Assets and style guide page

2 files changed, 185 insertions, 0 deletions

diff --git a/src/components/ColorSwatch.astro b/src/components/ColorSwatch.astro
new file mode 100644
index 0000000..df01d5a
--- /dev/null
+++ b/src/components/ColorSwatch.astro
@@ -0,0 +1,49 @@
+---
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+  color: string
+  [key: string]: any
+}
+
+const { color: colorName, class: className, ...rest } = Astro.props
+---
+
+<button
+  class={cn(
+    'cursor-pointer bg-primary text-primary-foreground border-border border flex min-h-20  w-full items-center justify-center rounded font-mono text-sm font-bold',
+    className,
+  )}
+  {...rest}
+  title={'Click to copy: ' + colorName}
+  data-color={colorName}
+  data-color-swatch
+>
+  <span>{colorName}</span>
+</button>
+
+<script>
+  const initClipboard = () => {
+    const buttons = document.querySelectorAll(
+      '[data-color-swatch]',
+    ) as NodeListOf<HTMLButtonElement>
+
+    buttons.forEach((button) => {
+      const color = button?.dataset.color as string
+      button?.addEventListener('click', async () => {
+        try {
+          await navigator.clipboard.writeText(color)
+          button.innerText = 'Copied!'
+          setTimeout(() => {
+            button.innerText = color
+          }, 1000)
+        } catch (err) {
+          console.error('Error copying to clipboard.', err)
+        }
+      })
+    })
+  }
+
+  document.addEventListener('astro:page-load', initClipboard)
+</script>
diff --git a/src/pages/styleguide.astro b/src/pages/styleguide.astro
new file mode 100644
index 0000000..575718a
--- /dev/null
+++ b/src/pages/styleguide.astro
@@ -0,0 +1,136 @@
+---
+import Breadcrumbs from '@/components/Breadcrumbs.astro'
+import ColorSwatch from '@/components/ColorSwatch.astro'
+import PageHead from '@/components/PageHead.astro'
+import Layout from '@/layouts/Layout.astro'
+---
+
+<Layout class="max-w-3xl">
+  <PageHead slot="head" title="Assets and Style Guide" />
+  <Breadcrumbs
+    items={[{ label: 'Assets and Style Guide', icon: 'lucide:palette' }]}
+  />
+  <article class="prose mx-auto mt-6 flex w-full max-w-4xl flex-col gap-6">
+    <h1>Assets and Style Guide</h1>
+
+    <section>
+      <h2>Logo</h2>
+      <img src="/static/logo.svg" alt="Logo" height={200} class="h-20" />
+      <ul>
+        <li>
+          <a href="/staic/logo.svg" download="fosscet-logo.svg">
+            SVG, logo only
+          </a>
+        </li>
+        <li>
+          <a
+            href="/static/web-app-manifest-192x192.png"
+            download="fosscet-logo-192.svg"
+          >
+            PNG 192x192, logo only
+          </a>
+        </li>
+
+        <li>
+          <a
+            href="/static/web-app-manifest-512x512.png"
+            download="fosscet-logo-512.svg"
+          >
+            PNG 512x512, logo only
+          </a>
+        </li>
+      </ul>
+    </section>
+
+    <section>
+      <h2>Logo and Word Mark</h2>
+      <img
+        src="/static/1200x630.png"
+        alt="Logo and word mark"
+        height={200}
+        class="h-30"
+      />
+      <ul>
+        <li>
+          <a href="/static/1200x630.png" download="fosscet-logo-wordmark.png">
+            PNG 1200x630, logo and word mark
+          </a>
+        </li>
+      </ul>
+    </section>
+
+    <section>
+      <h2>Fonts</h2>
+
+      <div
+        class="grid grid-cols-1 items-center justify-center gap-x-8 gap-y-4 md:grid-cols-2 md:gap-y-8"
+      >
+        <div
+          class="border-border from-primary/10 to-primary/2 flex h-full items-center justify-center rounded border bg-linear-to-bl px-6 py-2 text-center font-mono text-4xl"
+        >
+          0xProto
+        </div>
+        <p>
+          Tailwind class <code>font-mono</code>.
+          <br />
+          Use for headings, code blocks, and aesthetic details.
+          <br />
+          Download from <a href="https://github.com/0xType/0xProto/releases">
+            GitHub: 0xType/0xProto
+          </a>
+        </p>
+        <div
+          class="border-border flex h-full items-center justify-center rounded border px-6 py-2 text-center font-sans text-4xl"
+        >
+          Geist
+        </div>
+        <p>
+          Tailwind class <code>font-sans</code>.
+          <br />
+          Use for text everywhere else.
+          <br />
+          Download from <a href="https://fonts.google.com/specimen/Geist">
+            Google Fonts: Geist
+          </a>
+        </p>
+      </div>
+    </section>
+
+    <section class="mt-10">
+      <h2>Colours</h2>
+      <p>
+        General guidelines:
+        <ul>
+          <li>
+            Use the <code>primary</code> colour sparingly, for design elements and
+            accents. Avoid using it for text.
+          </li>
+          <li>
+            Use <code>foreground</code> for headings, navigation elements, and text
+            that stands out.
+          </li>
+          <li>
+            Use <code>muted-foreground</code> for paragraphs.
+          </li>
+        </ul>
+      </p>
+      <div class="flex flex-1 flex-col gap-4 md:flex-row">
+        <ColorSwatch
+          color="primary"
+          class="bg-primary text-primary-foreground"
+        />
+
+        <ColorSwatch color="foreground" class="bg-foreground text-background" />
+
+        <ColorSwatch
+          color="muted-foreground"
+          class="bg-muted-foreground text-muted"
+        />
+
+        <ColorSwatch color="muted" class="bg-muted text-muted-foreground" />
+
+        <ColorSwatch color="background" class="bg-background text-foreground" />
+      </div>
+    </section>
+  </article>
+</Layout>