Merge pull request #82 from open-wc/docs/site

Docs site

.gitignore

@@ -1,3 +1,10 @@
 dist/
 node_modules/
-.DS_Store
+.DS_Store
+
+## Rocket ignore files
+docs/_merged_data/
+docs/_merged_assets/
+docs/_merged_includes/
+_site-dev
+_site

.nvmrc

@@ -0,0 +1 @@
+v16.3.0

docs/.eleventyignore

@@ -0,0 +1,3 @@
+_assets
+_includes
+_data

docs/_assets/home.css

@@ -0,0 +1,11 @@
+.reasons article {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  text-align: center;
+}
+
+.reasons figure {
+  margin: 0;
+  display: contents;
+}

docs/_assets/style.css

@@ -0,0 +1,39 @@
+:not(rocket-navigation):not(:defined) {
+  opacity: 0;
+}
+
+.call-to-action {
+  background: var(--button-one) !important;
+  text-shadow: none !important;
+  border-radius: 5px !important;
+  padding-top: 15px !important;
+  padding-bottom: 15px !important;
+  border: none !important;
+}
+
+.call-to-action:hover,
+.call-to-action:focus,
+.call-to-action:active {
+  background: var(--button-one-hover) !important;
+}
+
+.call-to-action:nth-child(2) {
+  background: var(--button-two) !important;
+}
+
+.call-to-action:nth-child(2):hover,
+.call-to-action:nth-child(2):focus,
+.call-to-action:nth-child(2):active {
+  background: var(--button-two-hover) !important;
+}
+
+code-tabs[collection="package-managers"] {
+  --code-tabs-icon-height: 18px;
+  --code-tabs-justify-tabs: end;
+}
+
+body[layout='home'] .markdown-body .call-to-action:nth-of-type(2) {
+  --primary-color: #222;
+  --primary-color-lighter: #333;
+  --primary-color-darker: #000;
+}

docs/_assets/theme.css

@@ -0,0 +1,138 @@
+html {
+  --button-one-hover: #436eff;
+  --button-one: #2758ff;
+  --button-two-hover: #444;
+  --button-two: black;
+  --code-button-focus-background: var(--markdown-syntax-background-color);
+  --code-button-background: var(--markdown-table-row-odd-background-color);
+  --code-tabs-tabs-background: var(--page-background);
+  --contrast-color-dark: #1d3557;
+  --contrast-color-light: #fff;
+  --footer-background: rgba(0, 0, 0, 0.02);
+  --header-color: white;
+  --markdown-link-color: #2758ff;
+  --markdown-syntax-background-color: #f9f9f9;
+  --markdown-table-row-odd-background-color: #efefef;
+  --owc-active-color: #2758ff;
+  --owc-hover-color: #436eff;
+  --page-background: white;
+  --primary-color-accent: #cee5f6;
+  --primary-color-darker: #1a5285;
+  --primary-color-lighter: #449ad7;
+  --primary-color: rgb(44, 62, 80);
+  --primary-lines-color: #ccc;
+  --primary-text-color: #2c3e50;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    --header-color: #2f3136;
+    --footer-background: rgba(255, 255, 255, 0.1);
+    --page-background: #36393e;
+    --text-color: #eee;
+    --primary-text-color: #eee;
+    --primary-color: white;
+    --primary-color-lighter: #449ad7;
+    --primary-color-darker: #1a5285;
+    --primary-color-accent: #cee5f6;
+    --contrast-color-light: #fff;
+    --contrast-color-dark: #1d3557;
+    --primary-lines-color: #333;
+    --owc-active-color: #41ffb0;
+    --owc-hover-color: #6dffc2;
+    --button-one: #9b03fe;
+    --button-one-hover: #a724ff;
+    --button-two: black;
+    --button-two-hover: rgb(36, 36, 36);
+    --rocket-search-background-color: #4a4d52;
+    --rocket-search-highlight-color: #41ffb0;
+    --rocket-search-hover-background-color: #6b717a;
+    --rocket-search-fill-color: #fff;
+
+    /* Markdown */
+    --markdown-octicon-link: var(--primary-text-color);
+    --markdown-link-color: #41ffb0;
+    --markdown-divider-color: #e1e4e8;
+    --markdown-blockquote-border-color: #dfe2e5;
+    --markdown-blockquote-color: #90aac7;
+    --markdown-kbd-background-color: #fafbfc;
+    --markdown-kbd-border-color: #c6cbd1;
+    --markdown-kbd-border-bottom-color: #959da5;
+    --markdown-kbd-color: #444d56;
+    --markdown-heading-color-6: #6a737d;
+    --markdown-table-background-color: var(--markdown-syntax-background-color);
+    --markdown-table-row-odd-background-color: var(--markdown-kbd-color);
+    --markdown-table-border-color: transparent;
+    --markdown-code-background-color: rgba(27, 31, 35, 0.05);
+    --markdown-pre-background-color: rgb(49, 49, 49);
+
+    /* syntax */
+    --markdown-syntax-color: #f8f8f2;
+    --markdown-syntax-background-color: #2e3440;
+    --markdown-syntax-atrule-color: #88c0d0;
+    --markdown-syntax-attr-name-color: #a3be8c;
+    --markdown-syntax-attr-value-color: #88c0d0;
+    --markdown-syntax-builtin-color: #a3be8c;
+    --markdown-syntax-boolean-color: #81a1c1;
+    --markdown-syntax-class-name-color: #88c0d0;
+    --markdown-syntax-constant-color: #81a1c1;
+    --markdown-syntax-char-color: #a3be8c;
+    --markdown-syntax-deleted-color: #81a1c1;
+    --markdown-syntax-entity-color: #81a1c1;
+    --markdown-syntax-function-color: #88c0d0;
+    --markdown-syntax-inserted-color: #a3be8c;
+    --markdown-syntax-keyword-color: #81a1c1;
+    --markdown-syntax-number-color: #b48ead;
+    --markdown-syntax-operator-color: #81a1c1;
+    --markdown-syntax-property-color: #81a1c1;
+    --markdown-syntax-punctuation-color: #81a1c1;
+    --markdown-syntax-regex-color: #81a1c1;
+    --markdown-syntax-important-color: #81a1c1;
+    --markdown-syntax-selector-color: #a3be8c;
+    --markdown-syntax-symbol-color: #81a1c1;
+    --markdown-syntax-string-color: #a3be8c;
+    --markdown-syntax-tag-color: #81a1c1;
+    --markdown-syntax-url-color: #81a1c1;
+    --markdown-syntax-variable-color: #81a1c1;
+    --markdown-syntax-hotkey-selector-color: #d73a49;
+    --markdown-syntax-keyword-color: #22863a;
+    --markdown-syntax-background-color: rgb(27, 29, 35);
+    --markdown-syntax-atrule-color: rgb(198, 120, 221);
+    --markdown-syntax-attr-name-color: rgb(198, 120, 221);
+    --markdown-syntax-boolean-color: rgb(209, 154, 102);
+    --markdown-syntax-class-name-color: rgb(97, 175, 239);
+    --markdown-syntax-constant-color: rgb(220, 220, 170);
+    --markdown-syntax-entity-color: rgb(220, 220, 170);
+    --markdown-syntax-function-color: rgb(97, 175, 239);
+    --markdown-syntax-inserted-color: rgb(220, 220, 170);
+    --markdown-syntax-keyword-color: rgb(198, 120, 221);
+    --markdown-syntax-number-color: rgb(220, 220, 170);
+    --markdown-syntax-operator-color: rgb(220, 220, 170);
+    --markdown-syntax-property-color: rgb(220, 220, 170);
+    --markdown-syntax-punctuation-color: white;
+    --markdown-syntax-regex-color: rgb(209, 154, 102);
+    --markdown-syntax-selector-color: rgb(86, 156, 214);
+    --markdown-syntax-symbol-color: rgb(220, 220, 170);
+    --markdown-syntax-tag-color: rgb(86, 156, 214);
+    --markdown-syntax-url-color: rgb(220, 220, 170);
+    --markdown-syntax-variable-color: rgb(220, 220, 170);
+  }
+
+  .string {
+    color: rgb(152, 195, 121);
+  }
+
+  .comment {
+    color: #7d7d7d;
+  }
+
+  .language-css {
+    --markdown-syntax-string-color: #81a1c1;
+  }
+}
+
+body[layout='home'] .markdown-body .call-to-action:nth-of-type(2) {
+  --primary-color: #222;
+  --primary-color-lighter: #333;
+  --primary-color-darker: #000;
+}

docs/_assets/webmanifest.json

@@ -0,0 +1,29 @@
+{
+  "name": "Custom Elements Manifest",
+  "short_name": "CEM/A",
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "orientation": "portrait",
+  "Scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "../_merged_assets/_static/icons/android-chrome-192x192.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "../_merged_assets/_static/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "../_merged_assets/_static/icons/maskable-icon.jpg",
+      "sizes": "1024x1024",
+      "type": "image/jpg",
+      "purpose": "any maskable"
+    }
+  ],
+  "splash_pages": null
+}

docs/_data/footer.json

@@ -0,0 +1,33 @@
+[
+  {
+    "name": "Discover",
+    "children": [
+      {
+        "text": "Help and Feedback",
+        "href": "https://github.com/open-wc/custom-elements-manifest/issues"
+      }
+    ]
+  },
+  {
+    "name": "Follow",
+    "children": [
+      {
+        "text": "GitHub",
+        "href": "https://github.com/open-wc/custom-elements-manifest"
+      },
+      {
+        "text": "Twitter",
+        "href": "https://twitter.com/OpenWC"
+      }
+    ]
+  },
+  {
+    "name": "Support",
+    "children": [
+      {
+        "text": "Contribute",
+        "href": "https://github.com/open-wc/custom-elements-manifest/blob/master/CONTRIBUTING.md"
+      }
+    ]
+  }
+]

docs/_data/site.cjs

@@ -0,0 +1,27 @@
+module.exports = function () {
+  return {
+    dir: 'ltr',
+    lang: 'en',
+    name: 'Custom Elements Manifest',
+    title: 'Custom Elements Manifest',
+    description: 'Codegen for Web Components',
+    socialLinks: [
+      {
+        name: 'GitHub',
+        url: 'https://github.com/open-wc/custom-elements-manifest',
+      },
+      {
+        name: 'Slack',
+        url:
+          'https://join.slack.com/t/lit-and-friends/shared_invite/zt-llwznvsy-LZwT13R66gOgnrg12PUGqw',
+      },
+    ],
+    gitSiteUrl: 'https://github.com/open-wc/custom-elements-manifest',
+    gitBranch: 'master',
+    helpUrl: 'https://github.com/open-wc/custom-elements-manifest/issues',
+    logoAlt: 'Custom Elements Manifest',
+    iconColorMaskIcon: '#3f93ce',
+    iconColorMsapplicationTileColor: '#1d3557',
+    iconColorThemeColor: '#1d3557',
+  };
+};

docs/_includes/_joiningBlocks/_layoutHome/content/10-hero.njk

@@ -0,0 +1,13 @@
+{% if rocketLaunch.homeLayout === 'background' %}
+  <img class="page-background" src="{{ '/_assets/home-background.svg' | asset | url }}" role="presentation"/>
+{% endif %}
+
+<h1 class="page-title">{{title}}</h1>
+
+<p class="page-slogan">{{slogan}}</p>
+
+<div class="call-to-action-list" role="list">
+  {% for callToAction in callToActionItems %}
+    <a class="call-to-action" href="{{ callToAction.href | url }}" role="listitem">{{ callToAction.text | safe }}</a>
+  {% endfor %}
+</div>