Add hero layout (#354)

* Progress * Styles * Progress * Styles * docs * Lints * wip * Litns
universal-ember · Aug 15, 2024 · b38cefa · b38cefa
1 parent 795168b
commit b38cefa
Show file tree

Hide file tree

Showing 18 changed files with 559 additions and 195 deletions.
diff --git a/docs-app/.template-lintrc.js b/docs-app/.template-lintrc.js
@@ -6,5 +6,6 @@ module.exports = {
     'no-forbidden-elements': 'off',
     'no-shadowed-elements': 'off',
     'no-inline-styles': 'off',
+    'no-whitespace-for-layout': 'off',
   },
 };
diff --git a/docs-app/app/app.ts b/docs-app/app/app.ts
@@ -10,7 +10,10 @@ import loadInitializers from 'ember-load-initializers';
 import { sync } from 'ember-primitives/color-scheme';
 import Resolver from 'ember-resolver';
 
+import { install } from './icons';
+
 sync();
+install();
 
 // @babel/traverse (from babel-plugin-ember-template-imports)
 // accesses process.....

diff --git a/docs-app/app/components/header.gts b/docs-app/app/components/header.gts
@@ -45,31 +45,35 @@ export const Header: TOC<{ Blocks: { default: [] } }> = <template>
             input here
         </div>
       }}
-      <div class="relative flex justify-end gap-6 basis-0 sm:gap-8 md:flex-grow">
-        <ThemeToggle />
-        <TestsLink />
-        <GitHubLink />
-      </div>
+      <TopRight />
     </div>
   </header>
 </template>;
 
-const LogoLink = <template>
+export const TopRight = <template>
+  <div class="relative flex justify-end gap-6 basis-0 sm:gap-8 md:flex-grow">
+    <ThemeToggle />
+    <TestsLink />
+    <GitHubLink />
+  </div>
+</template>;
+
+export const LogoLink = <template>
   <a href="/" aria-label="Home page">
     <Logomark class="h-9 w-28 lg:hidden" />
     <Logo class="hidden w-auto h-9 fill-slate-700 lg:block dark:fill-sky-100" />
   </a>
 </template>;
 
-const TestsLink = <template>
+export const TestsLink = <template>
   <ExternalLink href="/tests" class="group" aria-label="Tests">
     <Flask
       class="w-6 h-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300"
     />
   </ExternalLink>
 </template>;
 
-const GitHubLink = <template>
+export const GitHubLink = <template>
   <ExternalLink
     class="group"
     href="https://github.com/universal-ember/ember-primitives"

diff --git a/docs-app/app/components/icons.gts b/docs-app/app/components/icons.gts
@@ -2,8 +2,42 @@ import type { TOC } from '@ember/component/template-only';
 /**
  * Copied from font-awesome directly,
  * but with the addition of fill="currentColor"
+ *
+ * Font Awesome Free 6.6.0 by @fontawesome
+ * - https://fontawesome.com License
+ * - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.
  */
 
+export const XTwitter: TOC<{ Element: SVGElement }> = <template>
+  <svg aria-hidden="true" ...attributes>
+    <use xlink:href="#social-xtwitter" />
+  </svg>
+</template>;
+
+export const Discord: TOC<{ Element: SVGElement }> = <template>
+  <svg aria-hidden="true" ...attributes>
+    <use xlink:href="#social-discord" />
+  </svg>
+</template>;
+
+export const Threads: TOC<{ Element: SVGElement }> = <template>
+  <svg aria-hidden="true" ...attributes>
+    <use xlink:href="#social-threads" />
+  </svg>
+</template>;
+
+export const BlueSky: TOC<{ Element: SVGElement }> = <template>
+  <svg aria-hidden="true" ...attributes>
+    <use xlink:href="#social-bluesky" />
+  </svg>
+</template>;
+
+export const Mastodon: TOC<{ Element: SVGElement }> = <template>
+  <svg aria-hidden="true" ...attributes>
+    <use xlink:href="#social-mastodon" />
+  </svg>
+</template>;
+
 export const Sun: TOC<{ Element: SVGElement }> = <template>
   <svg aria-hidden="true" viewBox="0 0 16 16" ...attributes>
     <path
@@ -25,10 +59,8 @@ export const Moon: TOC<{ Element: SVGElement }> = <template>
 </template>;
 
 export const GitHub: TOC<{ Element: SVGElement }> = <template>
-  <svg aria-hidden="true" viewBox="0 0 16 16" ...attributes>
-    <path
-      d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
-    />
+  <svg aria-hidden="true" ...attributes>
+    <use xlink:href="#social-github" />
   </svg>
 </template>;
 

diff --git a/docs-app/app/icons.ts b/docs-app/app/icons.ts
@@ -0,0 +1,56 @@
+export function install() {
+  installSocials();
+}
+
+export function installIcons(setName: string, set: string) {
+  let id = `icon-set__${setName}`;
+  let existing = document.getElementById(id);
+
+  if (!existing) {
+    let div = document.createElement('div');
+
+    div.innerHTML = set;
+
+    document.body.appendChild(div);
+  }
+
+  // do nothing! set already installed!
+}
+
+export function installSocials() {
+  installIcons('social', socialSet);
+}
+
+/**
+ * How to make a sprite Sheet?
+ * 1. Copy SVG into the <svg> tag
+ * 2. Rename <svg to <symbol
+ * 3. Add ID
+ * 4. Add fill=currentColor to the symbol tag
+ */
+const socialSet = `
+<svg width="0" height="0" style="visibility:hidden">
+  <symbol  id="social-bluesky" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+    <path d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.6-.9 10-1.4c-3.3 .5-6.6 1-10 1.4C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.8-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z"/></symbol>
+
+  <symbol id="social-mastodon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5 0 0 1 -.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"/></symbol>
+
+  <symbol id="social-threads" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path d="M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z"/></symbol>
+
+  <symbol id="social-discord" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+    <path d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"/></symbol>
+
+  <symbol id="social-xtwitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/>
+  </symbol>
+
+
+  <symbol id="social-github" viewBox="0 0 16 16">
+    <path
+      d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
+    />
+  </symbol>
+</svg>
+`;
diff --git a/docs-app/app/routes/index.ts b/docs-app/app/routes/index.ts
diff --git a/docs-app/app/templates/application.gts b/docs-app/app/templates/application.gts
@@ -1,11 +1,6 @@
 import 'ember-mobile-menu/themes/android';
 import './layout.css';
 
-import { Header } from 'docs-app/components/header';
-import { Menu } from 'docs-app/components/icons';
-import { Nav } from 'docs-app/components/nav';
-// @ts-expect-error - no types are provided for ember-mobile-menu
-import MenuWrapper from 'ember-mobile-menu/components/mobile-menu-wrapper';
 import pageTitle from 'ember-page-title/helpers/page-title';
 import { colorScheme } from 'ember-primitives/color-scheme';
 import Route from 'ember-route-template';
@@ -15,27 +10,7 @@ const Application =
     {{pageTitle "ember-primitives"}}
     {{(syncBodyClass)}}
 
-    <MenuWrapper as |mmw|>
-      <mmw.MobileMenu @mode="push" @maxWidth={{300}} as |mm|>
-        <Nav @onClick={{mm.actions.close}} />
-      </mmw.MobileMenu>
-
-      <mmw.Content>
-        <Header>
-          <mmw.Toggle>
-            <Menu class="w-6 h-6 stroke-slate-500" />
-          </mmw.Toggle>
-        </Header>
-
-        <div class="outer-content">
-          <Nav />
-
-          <main class="relative grid justify-center flex-auto w-full mx-auto max-w-8xl">
-            {{outlet}}
-          </main>
-        </div>
-      </mmw.Content>
-    </MenuWrapper>
+    {{outlet}}
   </template>
 
 export default Route(Application);