Merge branch 'main' into feat/example-sveltekit

Author: s-petey

404/index.mdx

@@ -0,0 +1,7 @@
+---
+title: "Page not found"
+description: "404, can't find the page you're looking for."
+layout: "raw.tsx"
+---
+
+<comp.FourOhFour />

_components/Admonition.tsx

@@ -0,0 +1,17 @@
+type AdmonitionType =
+  | "note"
+  | "caution"
+  | "tip";
+
+export default function Admonition(
+  props: { type: AdmonitionType; children: any },
+) {
+  return (
+    <div class={`admonition ${props.type}`}>
+      <div class="title">{props.type}</div>
+      <p></p>
+      {/* This is how lume seems to add a space between the title and the content (sorry for the hacky solution)*/}
+      {props.children}
+    </div>
+  );
+}

_components/Banner.css

@@ -0,0 +1,10 @@
+.banner {
+  @apply flex flex-col gap-4 p-4 border-l-4 text-runtime-foreground
+    bg-runtime-background dark:bg-background-secondary border-runtime-500;
+  width: 100%;
+  margin: 4rem 0;
+}
+
+.banner-deploy {
+  @apply border-deploy-500 bg-deploy-50 dark:bg-background-secondary;
+}

_components/Banner.tsx

@@ -0,0 +1,11 @@
+export default function Banner(props: { children: any; type: string }) {
+  return (
+    <div
+      className={`banner banner-${props.type}`}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+export const css = "@import './_components/Banner.css';";

_components/Breadcrumbs.tsx

@@ -37,7 +37,7 @@ export default function (props: {
   url: string;
   sectionTitle: string;
   sectionHref: string;
-}) {
+}, helpers: Lume.Helpers) {
   const crumbs: SidebarItem[] = [];
 
   for (const section of props.sidebar) {
@@ -99,9 +99,13 @@ export default function (props: {
                   </a>
                 )
                 : (
-                  <span itemprop="name" class="block px-3 py-1.5 text-sm">
-                    {crumb.title}
-                  </span>
+                  <span
+                    itemprop="name"
+                    class="block px-3 py-1.5 text-sm"
+                    dangerouslySetInnerHTML={{
+                      __html: helpers.md(crumb.title, true),
+                    }}
+                  />
                 )}
               <meta itemprop="position" content={String(i + 2)} />
             </li>

_components/CTA.css

@@ -1,5 +1,5 @@
 .docs-cta {
-  @apply border text-balance text-black font-bold inline-block py-3.5 px-6
+  @apply border text-balance text-black font-bold inline-block py-3.5 px-6 mr-4
     rounded-full w-max hover:no-underline transition-colors duration-200 mb-6;
 }
 

_components/Columns.css

@@ -0,0 +1,20 @@
+.columns {
+  margin: 2rem 0;
+  div {
+    margin-bottom: 2rem;
+  }
+}
+
+@media (min-width: 750px) {
+  .columns {
+    display: flex;
+    justify-content: space-between;
+    gap: 2rem;
+
+    div {
+      flex: 1;
+      text-wrap: balance;
+      margin-bottom: 1rem;
+    }
+  }
+}

_components/Columns.tsx

@@ -0,0 +1,5 @@
+export default function Columns(props: { children: any }) {
+  return <section className="columns">{props.children}</section>;
+}
+
+export const css = `@import './_components/Columns.css';`;

_components/Hamburger.tsx

@@ -2,9 +2,9 @@ export default function () {
   return (
     <>
       <label htmlFor="hamburger" className="hamburger-label">
-        <span class="hamburger-bar hamburger-bar--top"></span>
-        <span class="hamburger-bar hamburger-bar--middle"></span>
-        <span class="hamburger-bar hamburger-bar--bottom"></span>
+        <span className="hamburger-bar hamburger-bar--top"></span>
+        <span className="hamburger-bar hamburger-bar--middle"></span>
+        <span className="hamburger-bar hamburger-bar--bottom"></span>
       </label>
       <input type="checkbox" id="hamburger" className="hamburger-checkbox" />
     </>

_components/Heading.css

@@ -0,0 +1,19 @@
+h2.heading {
+  @apply text-3xl md:text-4xl font-semibold underline underline-offset-8 mb-6;
+}
+
+h3.heading {
+  @apply text-xl md:text-2xl font-semibold underline underline-offset-8 mb-4;
+}
+
+.heading-runtime {
+  @apply decoration-runtime-500;
+}
+
+.heading-deploy {
+  @apply decoration-deploy-500;
+}
+
+.heading-purple {
+  @apply decoration-purple-500;
+}