Improve styling

package.json

@@ -5,9 +5,9 @@
   "main": ".eleventy.js",
   "scripts": {
     "clean": "node config/clean/clean.js",
-    "dev:sass": "sass --no-source-map --watch src/sass:./dist/app",
+    "dev:sass": "sass --no-source-map --watch src/style:./dist/app",
     "dev:eleventy": "ELEVENTY_ENV=dev npx @11ty/eleventy --serve --incremental --output=dist",
-    "build:sass": "sass --no-source-map src/sass:./dist/app",
+    "build:sass": "sass --no-source-map src/style:./dist/app",
     "build:eleventy": "npx @11ty/eleventy",
     "prefix": "lightningcss --browserslist ./dist/app/*.css -o ./dist/app/*.css",
     "start": "NODE_ENV=dev conc --kill-others 'npm:dev:*'",

src/_data/buildmeta.json

@@ -1 +1 @@
-{"inputs":{"node_modules/solid-js/dist/solid.js":{"bytes":51942,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"node_modules/solid-js/web/dist/web.js":{"bytes":27913,"imports":[{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"},{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"}],"format":"esm"},"src/scripts/jsx/app.jsx":{"bytes":2488,"imports":[{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"}],"format":"esm"},"src/scripts/jsx/fetch.jsx":{"bytes":3872,"imports":[{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"cjs"},"node_modules/@11ty/is-land/is-land.js":{"bytes":8708,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/scripts/js/is-land.js":{"bytes":34,"imports":[{"path":"node_modules/@11ty/is-land/is-land.js","kind":"import-statement","original":"@11ty/is-land/is-land.js"}],"format":"esm"},"dist/app/style.css":{"bytes":1038,"imports":[]}},"outputs":{"dist/app/app-AB2A76W7.min.js":{"imports":[],"exports":[],"entryPoint":"src/scripts/jsx/app.jsx","inputs":{"node_modules/solid-js/dist/solid.js":{"bytesInOutput":7272},"node_modules/solid-js/web/dist/web.js":{"bytesInOutput":3727},"src/scripts/jsx/app.jsx":{"bytesInOutput":226}},"bytes":11676},"dist/app/fetch-4UMXTQRU.min.js":{"imports":[],"exports":[],"entryPoint":"src/scripts/jsx/fetch.jsx","inputs":{"node_modules/solid-js/dist/solid.js":{"bytesInOutput":9032},"node_modules/solid-js/web/dist/web.js":{"bytesInOutput":4364},"src/scripts/jsx/fetch.jsx":{"bytesInOutput":557}},"bytes":14722},"dist/app/is-land-TXS7GROR.min.js":{"imports":[],"exports":[],"entryPoint":"src/scripts/js/is-land.js","inputs":{"node_modules/@11ty/is-land/is-land.js":{"bytesInOutput":3959},"src/scripts/js/is-land.js":{"bytesInOutput":0}},"bytes":4344},"dist/app/style-UUXDUJOW.min.css":{"imports":[],"entryPoint":"dist/app/style.css","inputs":{"dist/app/style.css":{"bytesInOutput":1038}},"bytes":1039}}}
+{"inputs":{"node_modules/solid-js/dist/solid.js":{"bytes":51942,"imports":[],"format":"esm"},"node_modules/solid-js/web/dist/web.js":{"bytes":27913,"imports":[{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"},{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"}],"format":"esm"},"src/scripts/jsx/app.jsx":{"bytes":2488,"imports":[{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"}],"format":"esm"},"src/scripts/jsx/fetch.jsx":{"bytes":3872,"imports":[{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"}],"format":"esm"},"node_modules/@11ty/is-land/is-land.js":{"bytes":8708,"imports":[],"format":"esm"},"src/scripts/js/is-land.js":{"bytes":34,"imports":[{"path":"node_modules/@11ty/is-land/is-land.js","kind":"import-statement","original":"@11ty/is-land/is-land.js"}],"format":"esm"},"dist/app/style.css":{"bytes":1661,"imports":[]}},"outputs":{"dist/app/app.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":145092},"dist/app/app.js":{"imports":[],"exports":[],"entryPoint":"src/scripts/jsx/app.jsx","inputs":{"node_modules/solid-js/dist/solid.js":{"bytesInOutput":54853},"node_modules/solid-js/web/dist/web.js":{"bytesInOutput":29123},"src/scripts/jsx/app.jsx":{"bytesInOutput":488}},"bytes":84626},"dist/app/fetch.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":145732},"dist/app/fetch.js":{"imports":[],"exports":[],"entryPoint":"src/scripts/jsx/fetch.jsx","inputs":{"node_modules/solid-js/dist/solid.js":{"bytesInOutput":54853},"node_modules/solid-js/web/dist/web.js":{"bytesInOutput":29123},"src/scripts/jsx/fetch.jsx":{"bytesInOutput":929}},"bytes":85071},"dist/app/is-land.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":14661},"dist/app/is-land.js":{"imports":[],"exports":[],"entryPoint":"src/scripts/js/is-land.js","inputs":{"node_modules/@11ty/is-land/is-land.js":{"bytesInOutput":7742},"src/scripts/js/is-land.js":{"bytesInOutput":0}},"bytes":7836},"dist/app/style.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":2779},"dist/app/style.css":{"imports":[],"entryPoint":"dist/app/style.css","inputs":{"dist/app/style.css":{"bytesInOutput":1318}},"bytes":1381}}}

src/_data/manifest.json

@@ -1,6 +1,10 @@
 {
-  "app": "app-AB2A76W7.min.js",
-  "fetch": "fetch-4UMXTQRU.min.js",
-  "is-land": "is-land-TXS7GROR.min.js",
-  "style": "style-UUXDUJOW.min.css"
+  "app.map": "app.js.map",
+  "app": "app.js",
+  "fetch.map": "fetch.js.map",
+  "fetch": "fetch.js",
+  "is-land.map": "is-land.js.map",
+  "is-land": "is-land.js",
+  "style.map": "style.css.map",
+  "style": "style.css"
 }

src/_data/meta.js

@@ -7,16 +7,16 @@ module.exports = {
       href: '/'
     },
     {
-      text: 'SolidJS',
-      href: '/solid/'
+      text: 'About',
+      href: '/about/'
     },
     {
-      text: 'WebC',
-      href: '/webc/'
+      text: 'Inline',
+      href: '/inline/'
     },
     {
       text: 'Islands',
-      href: '/islands/'
+      href: '/island/'
     }
   ]
 }

src/_includes/components/menu.webc

@@ -1,6 +1,7 @@
-<h2>Menu</h2>{{meta.environment}}
 <template webc:type="11ty" 11ty:type="liquid">
-  <ul>{% for link in meta.nav %}{% capture navhref %}{{ link.href | url }}{% endcapture %}
-    <li><a href="{{ link.href | url }}">{{ link.text }}</a></li>{% endfor %}
-  </ul>
+  <nav>
+    <ul>{% for link in meta.nav %}
+      <li><a href="{{ link.href | url }}">{{ link.text }}</a></li>{% endfor %}
+    </ul>
+  </nav>
 </template>

src/index.md

@@ -3,9 +3,6 @@ layout: default.html
 title: 11ty-solid-base
 ---
 
-## Menu
-- [WebC]({{ '/webc/' }})
-
 <menu></menu>
 
 ## The counter
@@ -45,22 +42,9 @@ render(() => <Solidify />, document.getElementById('shorty'))
   </template>
 </is-land> 
 
-## The webC component
-
-<tester></tester>
-
-
 ## SolidJS
 A more interesting example
 
 <p id="wordapp"></p>
 <script type="module" src="{{ '/app/fetch.js' | hash }}"></script>
 
-
-To do: 
- - A more complex webC example making use of:
- - bundling of webC with Solid-js
- - webC with scoped css
- - Solid-js web components/progressive enhancement example
-
-Look at [11ty docs](https://www.11ty.dev/docs/languages/webc/) & [11ty.rocks](https://11ty.rocks/).