data-kitchen/index.html at main · SolidOS/data-kitchen · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Wormhole guard: the app shell must never run inside a frame (opening
       /index.html from a SolidOS listing would load the whole app recursively).
       When framed inside SolidOS, navigate SolidOS to the /dk-pod/ container (its
       own view); otherwise redirect the frame to /dk-pod/. -->
  <script>
    if (window.top !== window) {
      try { window.stop(); } catch (_) {}
      location.replace(location.origin + '/dk-pod/');
    }
  </script>
  <title>data-kitchen</title>

  <link rel="icon" href="data:,">
  <link rel="stylesheet" href="node_modules/sol-components/web/styles/root.css">
  <link rel="stylesheet" href="src/dk-styles.css">
  <link rel="stylesheet" href="assets/dk-chrome.css">

  <!-- Pre-paint boot: apply saved theme / text size before first paint. -->
  <script src="src/dk-boot.js"></script>

  <!-- sol-login reads the inrupt auth library from a window global. sc ships
       it only as an ESM build (which sets no global), so publish that build onto
       window.solidClientAuthn here — no separately-vendored UMD bundle to drift.
       The global is consumed lazily (at session creation, AuthManager._makeSession),
       so this deferred module runs well before it's needed. -->
  <script type="module">
    import * as inrupt from '/node_modules/sol-components/dist/vendor/@inrupt-solid-client-authn-browser.js';
    if (!window.solidClientAuthn) window.solidClientAuthn = inrupt;
  </script>

  <!-- component-interop (parser-blocking <head> script) reads both manifests —
       sol-components' first (it owns the shared specifiers: rdflib,
       solid-logic, solid-ui, …; merge is first-wins), dk's second (adds the
       ia-player plugin bundle and podz) — injects the stage-selected
       importmap, then import()s each data-components entry. dk's OWN bundle
       is loaded directly as a module below (not via the loader), so it stays
       out of the loader's import chain. -->
  <script src="node_modules/component-interop/component-interop.js"
          data-stage="auto"
          data-manifest="node_modules/sol-components/dist/sol-components.manifest.json dk-pod/dk/dk.manifest.json dk-pod/dk/dokieli.manifest.json"
          data-components="sol-basic sol-pod sol-pod-extras sol-pod-ops sol-live-edit sol-time sol-weather sol-calendar sol-search sol-feed sol-gallery sol-login sol-query menu-from-rdf rdf-bundle ia-player sol-menu-manager sol-button-bar-manager sol-plugin-manager"
          data-objects="webid:data-kitchen auth:sol-components"
  ></script>
  <script type="module" src="dist/dk.bundle.js"></script>
</head>
<body>

  <!-- The shared-defaults singleton, RDF-driven like the rest of the shell: its
       VALUES (color scheme, text size, CORS proxy) come from the `source` RDF —
       sol-default reads each ui: predicate into a kebab attribute
       (ui:colorScheme→color-scheme, ui:fontSize→font-size, ui:proxy→proxy). The
       markup names ONLY the structural anchors: `source` (what it loads),
       `shape` (the SHACL that drives the editable form), `solid-kitchen` (the
       dev write flag), `label` (the form's title). No inline value overrides —
       so nothing here shadows the RDF.
       data-settings-skip: preferences render as the open form at the top of the
       settings page (pages/settings.html), not as an accordion panel. -->
  <sol-default
      data-settings-skip
      label="Preferences"
      solid-kitchen
      shape="node_modules/sol-components/shapes/data-kitchen-settings.shacl"
      source="dk-pod/dk/ui-data/data-kitchen-settings.ttl#Settings"
  ></sol-default>

  <nav class="omp-chrome-bar" aria-label="Controls">
    <sol-include source="dk-pod/dk/plugins/ia-player/assets/mini-player.html" trusted></sol-include>
  </nav>

  <main id="dk-content" class="omp-panels">
    <!-- The topmost tabset renders from the RDF shell model: tabs are the
         ui:parts of ui-data/data-kitchen-main-menu.ttl#Tabs (via the menu-from-rdf add-on already in
         the loader list above); the #Bar / #Chrome launchers of the same
         document are built at load by src/dk-tabs-rdf.js. To edit the shell as
         HTML instead, round-trip it: npm run rdf2html / npm run html2rdf. -->
    <!-- data-settings-skip: the tabset's own menu editor stays OUT of the
         Customize Preferences accordion — tabs/menus are edited on the
         Customize Plugins page. (sol-settings' opt-out; children like
         search/calendar are still discovered.) -->
    <sol-tabs id="dk-tabs" keep-alive from-rdf="./dk-pod/dk/ui-data/data-kitchen-main-menu.ttl#Tabs" data-settings-skip></sol-tabs>

    <!-- The ☰ menu's component items (claimed here by id via data-for) display
         in this pane, which replaces the tab content area while open — not in
         a modal. dk-tabs-shell re-homes it into the tabset's content once the
         shell is built and hides it again when a tab is picked. -->
    <div id="dk-menu-pane" class="dk-menu-pane"
         data-for="MoreCustomize MoreAllPlugins MoreSettings" hidden></div>
  </main>

</body>
</html>