Merge pull request #865 from thefrontside/dl/fix-docs-scroll-styles

Fix scroll to behave similar to interactors docs
thefrontside · Mar 5, 2024 · a860b0e · a860b0e
2 parents 25b7184 + 4a3fa90
commit a860b0e
Show file tree

Hide file tree

Showing 11 changed files with 155 additions and 254 deletions.
diff --git a/www/components/footer.tsx b/www/components/footer.tsx
@@ -2,15 +2,36 @@ import { IconExternal } from "./icons/external.tsx";
 
 export function Footer(): JSX.Element {
   return (
-    <footer class="grid grid-cols-3 py-2 text-center text-gray-500 tracking-wide bg-gray-100">
-      <section class="col-span-3">
+    <footer class="grid grid-cols-3 text-center text-gray-500 tracking-wide bg-gray-100 py-8 gap-y-4 leading-8 justify-self-end">
+      <section class="flex flex-col gap-y-1">
+        <h1 class="text-sm uppercase font-bold text-blue-primary mb-4">About</h1>
         <a class="text-gray-800" href="https://frontside.com">
-          Created by Frontside <IconExternal />
+          Maintained by Frontside <IconExternal />
+        </a>
+        <a class="text-gray-800" href="https://frontside.com/blog/2023-12-18-announcing-effection-v3/">
+          Effection v3 Release Post <IconExternal />
+        </a>
+      </section>
+      <section class="flex flex-col gap-y-1">
+        <h1 class="text-sm uppercase font-bold text-blue-primary mb-4">OSS Projects</h1>
+        <a href="https://frontside.com/interactors" class="text-gray-800">
+          Interactors <IconExternal />
+        </a>
+        <a href="/V2" class="text-gray-800">
+          Effection<em class="align-super text-xs">v2</em> <IconExternal />
+        </a>
+      </section>
+      <section class="flex flex-col gap-y-1">
+        <h1 class="text-sm uppercase font-bold text-blue-primary mb-4">Community</h1>
+        <a href="https://discord.gg/r6AvtnU" class="text-gray-800">
+          Discord <IconExternal />
+        </a>
+        <a href="https://github.com/thefrontside/effection" class="text-gray-800">
+          GitHub <IconExternal />
         </a>
       </section>
       <p class="col-span-3 text-blue-primary text-xs">
-        Copyright © 2019 - {new Date().getFullYear()}{" "}
-        The Frontside Software, Inc.
+        Copyright © 2019 - {new Date().getFullYear()} The Frontside Software, Inc.
       </p>
     </footer>
   );

diff --git a/www/components/header.tsx b/www/components/header.tsx
@@ -1,58 +1,32 @@
 import { ProjectSelect } from "./project-select.tsx";
-import { IconGithHub } from "./icons/github.tsx";
-import { IconDiscord } from "./icons/discord.tsx";
 
-export function Header() {
+interface HeaderProps {
+  navLinks: JSX.Element[];
+}
+
+export function Header({ navLinks }: HeaderProps) {
   return (
-    <header class="header w-full top-0 p-6 tracking-wide z-10">
-      <div class="flex items-center justify-between">
-        <div>
+    <header class="header w-full top-0 p-6 py-8 sticky tracking-wide z-10">
+      <div class="flex items-center justify-between max-w-screen-2xl mx-auto">
+        <div class="flex">
           <a
             href="/"
-            class="flex items-end gap-x-2 sm:gap-x-1 after:content-['v3'] after:inline after:relative after:top-0 after:text-sm"
+            class="flex items-end gap-x-2"
           >
-            <img
-              src="/assets/images/effection-logo.svg"
-              alt="Effection Logo"
-              width={156}
-              height={24}
-            />
+            <img src="/assets/images/effection-logo.svg" alt="Effection Logo" width={156} height={24} />
           </a>
+          <span class="hidden sm:flex items-center">
+            <ProjectSelect />
+          </span>
         </div>
-        <nav aria-label="Site Nav" class="text-sm">
-          <ul class="flex items-center sm:gap-1.5 gap-3 md:gap-16">
-            <li>
-              <a href="/docs/installation">Guides</a>
-            </li>
-            <li>
-              <a href="https://deno.land/x/effection/mod.ts">API</a>
-            </li>
-            <li>
-              <a class="flex flex-row" href="https://github.com/thefrontside/effection">
-                <span class="pr-1 md:inline-flex">
-                  <IconGithHub />
-                </span>
-                <span class="hidden md:inline-flex">
-                  GitHub
-                </span>
-              </a>
-            </li>
-            <li>
-              <a class="flex flex-row" href="https://discord.gg/r6AvtnU">
-                <span class="pr-1 md:inline-flex">
-                  <IconDiscord />
-                </span>
-                <span class="hidden md:inline-flex">
-                  Discord
-                </span>
-              </a>
-            </li>
-            <li>
-              <ProjectSelect />
-            </li>
+        <nav aria-label="Site Nav" class="text-sm font-bold">
+          <ul class="flex items-center sm:gap-1.5 gap-3 md:gap-12">
+            {navLinks.map(link => (
+              <li>{link}</li>
+            ))}
           </ul>
         </nav>
       </div>
     </header>
-  )
-}
+  );
+}
diff --git a/www/components/icons/github.tsx b/www/components/icons/github.tsx
@@ -1,4 +1,4 @@
-export const IconGithHub = () => (
+export const IconGithub = () => (
   <svg
     height="16"
     focusable="false"
@@ -12,4 +12,4 @@ export const IconGithHub = () => (
     <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z">
     </path>
   </svg>
-);
+);
diff --git a/www/components/navburger.tsx b/www/components/navburger.tsx
@@ -2,7 +2,7 @@
 export function Navburger() {
   return (
     <svg
-      class="inline-block h-4 w-4 fill-current fixed mt-2.5 right-2.5"
+      class="inline-block h-4 w-4 fill-current"
       viewBox="0 0 20 20"
       xmlns="http://www.w3.org/2000/svg"
     >

diff --git a/www/components/project-select.tsx b/www/components/project-select.tsx
@@ -1,12 +1,12 @@
-export function ProjectSelect() {
+export function ProjectSelect({ classnames }: { classnames?: string }) {
   let uuid = self.crypto.randomUUID();
 
   let toggleId = `toggle-${uuid}`;
   let openerId = `opener-${uuid}`;
   let closerId = `closer-${uuid}`;
 
   return (
-    <>
+    <div class={classnames}>
       <style media="all">
         {`
         #${toggleId}:checked ~ label#${openerId} > aside {
@@ -36,7 +36,7 @@ export function ProjectSelect() {
       <input type="checkbox" class="hidden" id={toggleId} checked />
       <label id={openerId} class="cursor-pointer" for={toggleId}>
         <span class="sm:hidden">OSS</span>
-        <aside class="absolute m-4 rounded-md text-blue-primary bg-white shadow-lg right-0 z-50">
+        <aside class="absolute m-4 rounded-md text-blue-primary bg-white shadow-lg sm-max:right-0 sm:left-0 z-50">
           <h4 class="p-2.5 uppercase text-sm text-center font-normal min-w-max">
             Frontside Open Source
           </h4>
@@ -65,7 +65,7 @@ export function ProjectSelect() {
         class="absolute w-screen h-screen inset-0 z-40 hidden"
         for={toggleId}
       />
-    </>
+    </div>
   );
 }
 

diff --git a/www/deno.lock b/www/deno.lock
@@ -22,17 +22,17 @@
       "@hazae41/foras@2.1.1": {
         "integrity": "sha512-iBWx2Q0UYn4IFjdL043Kv1fJCytKFZwtx7DzGHcpDeg+zuEJklsM+oQkRmnUvrJCz/kBKdPQfCjNwDZ4kCc09w==",
         "dependencies": {
-          "@hazae41/result": "@hazae41/result@1.1.12"
+          "@hazae41/result": "@hazae41/result@1.1.16"
         }
       },
       "@hazae41/option@1.0.27": {
         "integrity": "sha512-5hD+XtEwLAx54Z93alEa2B8ZurVs/HqZolc6C4OI3gJbaSmnypo0o5b8QSB98O8lcPwypa+8YcQtWffTF2J2mw==",
         "dependencies": {
-          "@hazae41/result": "@hazae41/result@1.1.12"
+          "@hazae41/result": "@hazae41/result@1.1.16"
         }
       },
-      "@hazae41/result@1.1.12": {
-        "integrity": "sha512-UpbOL30LmEyUXbrp2+Ndhd0n4iw5bSloOWyMdpXZiKxuooT0Ga4Go30ZcETAlF1gb7G9ZmRdC1KoYkM2WVn7+w==",
+      "@hazae41/result@1.1.16": {
+        "integrity": "sha512-PMDtqlbriUkI+2oJViHAAud6DfKS1Ls0vBlNz2RdBCrDIB9ThoeBmjAejjuXnVXSLWbSiRCnS+g5aFsWf4BcFw==",
         "dependencies": {
           "@hazae41/option": "@hazae41/option@1.0.27"
         }
@@ -374,16 +374,16 @@
           "@types/hast": "@types/hast@3.0.3"
         }
       },
-      "hast-util-raw@9.0.1": {
-        "integrity": "sha512-5m1gmba658Q+lO5uqL5YNGQWeh1MYWZbZmWrM5lncdcuiXuo5E2HT/CIOp0rLF8ksfSwiCVJ3twlgVRyTGThGA==",
+      "hast-util-raw@9.0.2": {
+        "integrity": "sha512-PldBy71wO9Uq1kyaMch9AHIghtQvIwxBUkv823pKmkTM3oV1JxtsTNYdevMxvUHqcnOAuO65JKU2+0NOxc2ksA==",
         "dependencies": {
           "@types/hast": "@types/hast@3.0.3",
           "@types/unist": "@types/unist@3.0.2",
           "@ungap/structured-clone": "@ungap/structured-clone@1.2.0",
           "hast-util-from-parse5": "hast-util-from-parse5@8.0.1",
           "hast-util-to-parse5": "hast-util-to-parse5@8.0.0",
           "html-void-elements": "html-void-elements@3.0.0",
-          "mdast-util-to-hast": "mdast-util-to-hast@13.0.2",
+          "mdast-util-to-hast": "mdast-util-to-hast@13.1.0",
           "parse5": "parse5@7.1.2",
           "unist-util-position": "unist-util-position@5.0.0",
           "unist-util-visit": "unist-util-visit@5.0.0",
@@ -456,10 +456,10 @@
           "@types/unist": "@types/unist@3.0.2",
           "ccount": "ccount@2.0.1",
           "comma-separated-tokens": "comma-separated-tokens@2.0.3",
-          "hast-util-raw": "hast-util-raw@9.0.1",
+          "hast-util-raw": "hast-util-raw@9.0.2",
           "hast-util-whitespace": "hast-util-whitespace@3.0.0",
           "html-void-elements": "html-void-elements@3.0.0",
-          "mdast-util-to-hast": "mdast-util-to-hast@13.0.2",
+          "mdast-util-to-hast": "mdast-util-to-hast@13.1.0",
           "property-information": "property-information@6.4.0",
           "space-separated-tokens": "space-separated-tokens@2.0.2",
           "stringify-entities": "stringify-entities@4.0.3",
@@ -734,8 +734,8 @@
           "unist-util-visit": "unist-util-visit@4.1.2"
         }
       },
-      "mdast-util-to-hast@13.0.2": {
-        "integrity": "sha512-U5I+500EOOw9e3ZrclN3Is3fRpw8c19SMyNZlZ2IS+7vLsNzb2Om11VpIVOR+/0137GhZsFEF6YiKD5+0Hr2Og==",
+      "mdast-util-to-hast@13.1.0": {
+        "integrity": "sha512-/e2l/6+OdGp/FB+ctrJ9Avz71AN/GRH3oi/3KAx/kMnoUsD6q0woXlDT8lLEeViVKE7oZxE7RXzvO3T8kF2/sA==",
         "dependencies": {
           "@types/hast": "@types/hast@3.0.3",
           "@types/mdast": "@types/mdast@4.0.3",
@@ -744,7 +744,8 @@
           "micromark-util-sanitize-uri": "micromark-util-sanitize-uri@2.0.0",
           "trim-lines": "trim-lines@3.0.1",
           "unist-util-position": "unist-util-position@5.0.0",
-          "unist-util-visit": "unist-util-visit@5.0.0"
+          "unist-util-visit": "unist-util-visit@5.0.0",
+          "vfile": "vfile@6.0.1"
         }
       },
       "mdast-util-to-markdown@1.5.0": {

diff --git a/www/docs/installation.mdx b/www/docs/installation.mdx
@@ -3,10 +3,10 @@ If you encounter obstacles integrating with your environment, please create a [G
 
 ## Node.js & Browser
 
-<p class="inline-flex space-x-2 my-0">
-  <img class="my-0" src="https://badgen.net/bundlephobia/min/effection" alt="Bundlephobia badge showing effection minified" />
-  <img class="my-0" src="https://badgen.net/bundlephobia/minzip/effection" alt="Bundlephobia badge showing effection gzipped size" />
-  <img class="my-0" src="https://badgen.net/bundlephobia/tree-shaking/effection" alt="Bundlephobia badge showing it's treeshackable" />
+<p class="inline-flex my-0 flex-wrap gap-1">
+  <img class="my-1" src="https://badgen.net/bundlephobia/min/effection" alt="Bundlephobia badge showing effection minified" />
+  <img class="my-1" src="https://badgen.net/bundlephobia/minzip/effection" alt="Bundlephobia badge showing effection gzipped size" />
+  <img class="my-1" src="https://badgen.net/bundlephobia/tree-shaking/effection" alt="Bundlephobia badge showing it's treeshackable" />
 </p>
 
 Effection is available on [NPM][npm], as well as derived registries such as [Yarn][yarn] and [UNPKG][unpkg]. It comes with TypeScript types and can be consumed as both ESM and CommonJS.

diff --git a/www/routes/app.html.tsx b/www/routes/app.html.tsx
@@ -10,15 +10,20 @@ export interface Options {
   title: string;
 }
 
+export interface AppHtmlProps {
+  children: JSXChild;
+  navLinks: JSX.Element[];
+}
+
 export function* useAppHtml({
   title,
-}: Options): Operation<({ children }: { children: JSXChild }) => JSX.Element> {
+}: Options): Operation<({ children, navLinks }: AppHtmlProps) => JSX.Element> {
   let homeURL = yield* useAbsoluteUrl("/");
   let twitterImageURL = yield* useAbsoluteUrl(
     "/assets/images/meta-effection.png"
   );
 
-  return ({ children }) => (
+  return ({ children, navLinks }) => (
     <html lang="en-US" dir="ltr">
       <head>
         <meta charset="UTF-8" />
@@ -61,11 +66,10 @@ export function* useAppHtml({
           <link rel="stylesheet" href="/assets/prism-atom-one-dark.css" />
         </noscript>
       </head>
-      <body class="max-w-screen-2xl m-auto">
-        <div class="flex flex-col h-full overflow-hidden">
-          <Header />
-          <main class="grow container min-h-0 mx-auto overflow-hidden h-full">{children}</main>
-        </div>
+      <body class="flex flex-col">
+        <Header navLinks={navLinks} />
+        <main class="container max-w-screen-2xl mx-auto mb-auto">{children}</main>
+        <Footer />
       </body>
     </html>
   );