feat: Add README and initial demo/index HTML page (#1)

nfreear · Dec 19, 2021 · 1519e29 · 1519e29
1 parent c460934
commit 1519e29
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 6 deletions.
diff --git a/.nojekyll b/.nojekyll
@@ -0,0 +1 @@
+# .nojekyll
diff --git a/README.md b/README.md
@@ -0,0 +1,38 @@
+
+[![Node.js CI][ci-img]][ci]
+
+# My Web Components #
+
+A collection of experimental Web Components, NOT yet open sourced!
+
+## Rationale ##
+
+* Experimental, particularly `<my-page>`, `<my-nav>` which are probably not for production !!
+* Should be usable without a build system, minimalist,
+* Accessible and usable for end-users - use WAI-ARIA where appropriate!
+* Simple for developers to try out,
+* ES6 classes in JS files, with associated HTML + CSS in `<template>` in `.tpl.html` files,
+* Self-contained where possible - SVG icons embedded in `<template>`, except `<my-map>` (Leaflet.js)
+* Use shadow DOM where possible - see notes on forms (below?)
+* A playground, plus some components that I will use in my blog etc.
+* Demo page, per component (almost?!),
+* `semistandard` linting, etc.
+
+About [Web Components][mdn].
+
+## Usage
+
+```
+<my-skip-link></my-skip-link>
+
+
+<my-options template-host="github.io">
+
+<script src="https://nfreear.github.io/web-components/index.js"
+  type="module" async crossorigin
+></script>
+```
+
+[ci]: https://github.com/nfreear/web-components/actions/workflows/node.js.yml
+[ci-img]: https://github.com/nfreear/web-components/actions/workflows/node.js.yml/badge.svg
+[mdn]: https://developer.mozilla.org/en-US/docs/Web/Web_Components
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,40 @@
+<!doctype html><html lang="en" style="opacity: 0"><title> Index </title>
+
+<meta name="robots" content="noindex">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+
+<style>
+  .XX:not(:defined) { opacity: 0; }
+</style>
+
+<my-page>
+
+  <h2> Index </h2>
+
+  <p> A collection of reusable Web Components. </p>
+
+  <ol>
+    <li><a href="my-analytics.html"   >my-analytics</a>
+    <li><a href="my-busy-spinner.html">my-busy-spinner</a>
+    <li><a href="my-map.html"         >my-map</a>
+    <li><a href="my-options.html"     >my-options</a>
+    <li><a href="my-page.html"        >my-page</a>
+    <li><a href="my-skip-link.html"   >my-skip-link</a>
+    <li><a href="my-star-rating.html" >my-star-rating</a>
+  </ol>
+
+</my-page>
+
+
+<my-analytics
+  analytics-id="UA-8330079-10"
+  anonymize-ip="true"
+  debug="true"
+  no-cookies="true"
+>
+</my-analytics>
+
+
+<script type="module" src="../index.js"></script>
+
+</html>
diff --git a/src/components/my-page.tpl.html b/src/components/my-page.tpl.html
@@ -7,19 +7,30 @@
     nav,
     main,
     footer {
-      color: var(--color-1);
-      font: 1rem/1.1 sans-serif;
-      margin: .5rem auto;
-      max-width: 34rem;
+      background: #fcfcfc;
+      border: 1px solid #e6e6e6;
+      color: var(--color-1, #333);
+      font: 1rem/1.2 sans-serif;
+      margin: .6rem auto;
+      max-width: 33rem;
+      min-width: 12rem;
+      padding: 0 .3rem;
+    }
+    main {
+      line-height: 1.8;
+    }
+    pre {
+      border: 1px solid #ccc;
+      padding: .5rem;
     }
   </style>
 
   <header>
-    <h1> Demo </h1>
+    <h1> My Web Components </h1>
   </header>
 
   <nav>
-    <a href="#">Home</a> | <a href="#">Link 2</a> | ...
+    <a href="./">Home</a> | <a href="#">Link 2</a> | ...
   </nav>
 
   <main><slot></slot></main>