Merge branch 'main' into feat/example-sveltekit

Author: s-petey

.github/workflows/update_versions.ts

@@ -32,6 +32,8 @@ cliCommandsReferenceFile.writeJsonPrettySync(
   JSON.parse(new TextDecoder().decode(jsonReference.outputSync().stdout)),
 );
 
+await $`deno task update_lint_rules`;
+
 if (Deno.args.includes("--create-pr")) {
   await tryCreatePr();
 }

404.tsx

@@ -31,6 +31,40 @@ deno task prod
 Which will start a Deno server on [localhost:8000](http://localhost:8000) used
 in production, which handles redirects.
 
+the above commands will defauilt to performing as complete build of the site
+including all of the more expensive operations. You can also perform a lighter
+build by running:
+
+```console
+deno task build:light
+```
+
+This will build the site without generating the Open Graph images and other more
+time-consuming operations which might be desirable to skip during local
+developement work.
+
+## Developing styles and components
+
+We are increasingly making use of global components to improve consistency and
+reduce duplication. A styleguide has been created to preview and develop these
+components and is generated during the build process.
+
+You can browse to it in the site at `/styleguide/`
+
+To avoid longer build times of the entire site and all of its content while
+developing UI elements and components, a styleguide-only build is avaiable which
+performs the initial global configureation for the site, but then only generates
+and watches for changes in the `/styleguide` folder of the repo.
+
+To work on just the components and UI elements and review them within
+styleguide, run:
+
+```console
+deno task serve:style
+```
+
+Then browse to the styleguide section of the site at `/styleguide/`
+
 ## Editing content
 
 The actual content of the docs site is found mostly in these folders:

README.md

@@ -0,0 +1,18 @@
+import type { PageBase, ToCCtx } from "@deno/doc";
+
+export default function Base(
+  { data, comp, children }: Lume.Data & { data: PageBase },
+  _helpers: Lume.Helpers,
+) {
+  return (
+    <>
+      <div className="ddoc markdown-body">
+        <link rel="stylesheet" href="/reference_styles.css" />
+        <comp.Breadcrumbs parts={data.breadcrumbs_ctx.parts} />
+        <div id="content">
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}

_components/Base.tsx

@@ -0,0 +1,21 @@
+.crumbs {
+  display: flex;
+  flex-wrap: wrap;
+  text-align: center;
+  margin-top: 0.5rem;
+  margin-left: -0.75rem;
+  color: hsl(var(--foreground-secondary));
+}
+
+.crumb-link {
+  display: flex;
+  align-items: center;
+  &::after {
+    content: "";
+    width: 1em;
+    height: 1em;
+    background: url(./img/chevron.svg) no-repeat center;
+    display: inline-block;
+    margin-left: 1rem;
+  }
+}

_components/Breadcrumbs.css

@@ -1,33 +1,26 @@
-import type {
-  BreadcrumbItem,
-  Sidebar as Sidebar_,
-  SidebarItem,
-} from "../types.ts";
-import { isSidebarCategory, isSidebarDoc, isSidebarLink } from "../types.ts";
+import type { Sidebar as Sidebar_, SidebarItem } from "../types.ts";
 
-export function generateCrumbs(
+function generateCrumbs(
   url: string,
   title: string,
   items: SidebarItem[],
-  current: BreadcrumbItem[] = [],
-): BreadcrumbItem[] {
+  current: SidebarItem[] = [],
+): SidebarItem[] {
   for (const item of items) {
-    const foundTargetPage = (typeof item === "string" && item === url) ||
-      (isSidebarDoc(item) && item.id === url) ||
-      (isSidebarLink(item) && item.href === url);
+    const foundTargetPage = item.href === url;
 
     if (foundTargetPage) {
-      current.push({ label: title });
+      current.push({ title: title });
       return current;
     }
 
-    if (isSidebarCategory(item)) {
-      const childItems: BreadcrumbItem[] = [];
+    if (item.items) {
+      const childItems: SidebarItem[] = [];
       generateCrumbs(url, title, item.items, childItems);
 
       if (childItems.length > 0) {
         if (item.href) {
-          current.push({ label: item.label, href: item.href });
+          current.push({ title: item.title, href: item.href });
         }
         current.push(...childItems);
         return current;
@@ -38,26 +31,26 @@ export function generateCrumbs(
   return current;
 }
 
-export function Breadcrumbs(props: {
+export default function (props: {
   title: string;
   sidebar: Sidebar_;
   url: string;
   sectionTitle: string;
   sectionHref: string;
 }) {
-  const crumbs: BreadcrumbItem[] = [];
+  const crumbs: SidebarItem[] = [];
 
   for (const section of props.sidebar) {
     if (section.href === props.url) {
-      crumbs.push({ label: props.title });
+      crumbs.push({ title: props.title });
       break;
     }
 
-    const rootItem = { label: section.title, href: section.href };
+    const rootItem = { title: section.title, href: section.href };
     const potentialCrumbs = generateCrumbs(
       props.url,
       props.title,
-      section.items,
+      section?.items || [],
       [rootItem],
     );
 
@@ -68,9 +61,9 @@ export function Breadcrumbs(props: {
   }
 
   return (
-    <nav class="mb-4">
+    <nav>
       <ul
-        class="flex flex-wrap text-foreground-secondary items-center -ml-3"
+        class="crumbs"
         itemscope
         itemtype="https://schema.org/BreadcrumbList"
       >
@@ -80,26 +73,14 @@ export function Breadcrumbs(props: {
           itemtype="https://schema.org/ListItem"
         >
           <a
-            class="block px-3 py-1.5 underline underline-offset-4 decoration-foreground-tertiary hover:text-foreground-secondary hover:underline-medium hover:bg-foreground-tertiary dark:hover:bg-background-secondary dark:hover:text-foreground-primary rounded transition duration-100 text-sm"
+            class="crumb-link pl-3 py-1.5 underline underline-offset-4 decoration-foreground-tertiary hover:text-foreground-secondary hover:underline-medium hover:bg-foreground-tertiary dark:hover:bg-background-secondary dark:hover:text-foreground-primary rounded transition duration-100 text-sm"
             itemprop="item"
             href={props.sectionHref}
           >
             <span itemprop="name">{props.sectionTitle}</span>
           </a>
           <meta itemprop="position" content="1" />
         </li>
-        <li>
-          <svg
-            class="size-4 text-foreground-secondary rotate-90"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-          >
-            <path
-              fill="currentColor"
-              d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
-            />
-          </svg>
-        </li>
         {crumbs.map((crumb, i) => (
           <>
             <li
@@ -112,36 +93,23 @@ export function Breadcrumbs(props: {
                   <a
                     href={crumb.href}
                     itemprop="item"
-                    class="block px-3 py-1.5 underline underline-offset-4 decoration-foreground-tertiary hover:text-foreground-secondary hover:underline-medium hover:bg-foreground-tertiary dark:hover:bg-background-secondary dark:hover:text-foreground-primary rounded transition duration-100 text-sm"
+                    class="crumb-link pl-3 py-1.5 underline underline-offset-4 decoration-foreground-tertiary hover:text-foreground-secondary hover:underline-medium hover:bg-foreground-tertiary dark:hover:bg-background-secondary dark:hover:text-foreground-primary rounded transition duration-100 text-sm"
                   >
-                    <span itemprop="name">{crumb.label}</span>
+                    <span itemprop="name">{crumb.title}</span>
                   </a>
                 )
                 : (
                   <span itemprop="name" class="block px-3 py-1.5 text-sm">
-                    {crumb.label}
+                    {crumb.title}
                   </span>
                 )}
               <meta itemprop="position" content={String(i + 2)} />
             </li>
-            {i < crumbs.length - 1 && (
-              <li>
-                <svg
-                  class="size-4 text-foreground-secondary rotate-90"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
-                  >
-                  </path>
-                </svg>
-              </li>
-            )}
           </>
         ))}
       </ul>
     </nav>
   );
 }
+
+export const css = `@import './_components/Breadcrumbs.css';`;

_components/Breadcrumbs.tsx

@@ -0,0 +1,22 @@
+.docs-cta {
+  @apply border text-balance text-black font-bold inline-block py-3.5 px-6
+    rounded-full w-max hover:no-underline transition-colors duration-200 mb-6;
+}
+
+.runtime-cta,
+.deploy-cta {
+  @apply border-gray-4 hover:!no-underline !text-gray-4;
+}
+
+.runtime-cta {
+  @apply bg-runtime-400 border-runtime-400 hover:bg-runtime-300;
+}
+
+.deploy-cta {
+  @apply bg-deploy-500 border-deploy-500 hover:bg-deploy-400;
+}
+
+.jsr-cta {
+  @apply bg-jsr-yellow-400 border-jsr-cyan-950 !text-jsr-cyan-950 border-2
+    hover:!no-underline hover:bg-jsr-yellow-300;
+}

_components/CTA.css

@@ -0,0 +1,11 @@
+export default function CTA(
+  { href, children, type }: { href: string; children: string; type: string },
+) {
+  return (
+    <a href={href} className={`docs-cta ${type}-cta`}>
+      {children}
+    </a>
+  );
+}
+
+export const css = "@import './_components/CTA.css';";

_components/CTA.tsx

@@ -1,4 +1,4 @@
-export default function Feedback({ file }) {
+export default function Feedback({ file }: { file: string | undefined }) {
   if (!file) {
     return <></>;
   } else {

_components/Feedback.tsx

@@ -1,12 +1,17 @@
 footer {
+  margin-top: 2rem;
   padding: 3rem;
   border-top: 1px solid hsl(var(--foreground-tertiary));
 }
 
 .footer-nav {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 1rem;
+  display: flex;
+  flex-direction: column;
+  row-gap: 3rem;
+}
+
+.footer-section {
+  min-width: 170px;
 }
 
 .footer-section-heading {
@@ -38,12 +43,18 @@ footer {
   color: hsl(var(--foreground-secondary));
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 500px) {
   footer {
-    padding: 2vw 3vw;
+    padding: 2rem 5vw;
   }
+
   .footer-nav {
-    max-width: 1240px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    max-width: 1000px;
+    column-gap: clamp(4rem, 5vw, 65px);
+    row-gap: 4rem;
     margin: 0 auto;
   }
 }