feat: new homepage

apps/typegpu-docs/astro.config.mjs

@@ -39,6 +39,10 @@ export default defineConfig({
   markdown: {
     remarkPlugins: [remarkMath],
     rehypePlugins: [rehypeMathJax],
+    shikiConfig: {
+      theme: 'one-dark-pro',
+      wrap: true,
+    },
   },
   vite: {
     define: {
@@ -80,6 +84,9 @@ export default defineConfig({
         './src/fonts/font-face.css',
         './src/mathjax.css',
       ],
+      expressiveCode: {
+        themes: ['github-dark'],
+      },
       plugins: stripFalsy([
         starlightBlog({
           navigation: 'none',

apps/typegpu-docs/src/components/Backlog.astro

@@ -0,0 +1,148 @@
+---
+import { Image } from "astro:assets";
+import as_a_foundation from "../assets/hero/as_a_foundation.svg";
+import as_a_puzzle_piece from "../assets/hero/as_a_puzzle_piece.svg";
+import for_libraries from "../assets/hero/for_libraries.svg";
+---
+
+<div class="gap-8 grid grid-cols-1 md:grid-cols-3">
+  <!-- Backlog Column -->
+  <div class="p-5 bg-accent-100/40 dark:bg-[#30354A]">
+    <div class="flex justify-between items-center mb-6">
+      <h2 class="font-bold text-blue-950 dark:text-white text-lg">Backlog</h2>
+      <div
+        class="flex justify-center items-center bg-white dark:bg-[#272B3C] shadow-sm w-8 h-8"
+      >
+        <Image
+          src={for_libraries}
+          alt="For libraries icon"
+          class="w-5 h-5 fill-black"
+        />
+      </div>
+    </div>
+
+    <div class="space-y-4">
+      <div class="bg-white dark:bg-[#272B3C] shadow-sm p-4">
+        <h3 class="text-blue-950 dark:text-white">Imperative code</h3>
+        <p class="mt-1 text-slate-500 dark:text-white text-sm">
+          Perform multiple background tasks at the same time and improve the
+          every...
+        </p>
+      </div>
+      <div class="p-4 border-2 border-accent-300/80">
+        <h3 class="text-blue-950 dark:text-white">Need something?</h3>
+        <p class="mt-1 text-slate-500 dark:text-white text-sm">
+          Let us know about your improvement ideas, maybe they will land here!
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <!-- In Progress Column -->
+  <div class="p-5 bg-accent-100/40 dark:bg-[#30354A]">
+    <div class="flex justify-between items-center mb-6">
+      <h2 class="text-blue-950 dark:text-white text-lg">In progress</h2>
+      <div
+        class="flex justify-center items-center bg-white dark:bg-[#272B3C] shadow-sm w-8 h-8"
+      >
+        <Image
+          src={as_a_puzzle_piece}
+          alt="As a puzzle piece icon"
+          class="w-5 h-5 fill-black"
+        />
+      </div>
+    </div>
+
+    <div class="space-y-4">
+      <div class="bg-white dark:bg-[#272B3C] shadow-sm p-4">
+        <h3 class="text-blue-950 dark:text-white">Pipelines</h3>
+        <p class="mt-1 text-slate-500 dark:text-white text-sm">
+          Perform multiple background tasks at the same time and improve the
+          every...
+        </p>
+        <div class="mt-4">
+          <span class="font-medium text-slate-500 dark:text-white text-xs"
+            >Planned for late 2025</span
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Shipped Column -->
+  <div class="p-5 bg-accent-100/40 dark:bg-[#30354A]">
+    <div class="flex justify-between items-center mb-6">
+      <h2 class="text-blue-950 dark:text-white text-lg">Shipped</h2>
+      <div
+        class="flex justify-center items-center dark:bg-[#272B3C] shadow-sm w-8 h-8"
+      >
+        <Image
+          src={as_a_foundation}
+          alt="As a foundation icon"
+          class="w-5 h-5 fill-black"
+        />
+      </div>
+    </div>
+    <div class="space-y-4">
+      <div class="bg-white dark:bg-[#272B3C] shadow-sm p-4">
+        <h3 class="text-blue-950 dark:text-white">Data structures & buffers</h3>
+        <p class="mt-1 text-slate-500 dark:text-white text-sm">
+          Perform multiple background tasks at the same time and improve the
+          every...
+        </p>
+        <div class="flex justify-between items-center mt-4">
+          <span class="text-slate-500 dark:text-white text-xs">May 2024</span>
+          <span
+            class="bg-slate-100 px-2 py-1 font-semibold text-slate-600 text-xs"
+            >v0.1</span
+          >
+        </div>
+      </div>
+
+      <div class="bg-white dark:bg-[#272B3C] shadow-sm p-4">
+        <h3 class="text-blue-950 dark:text-white">Bind groups</h3>
+        <p class="mt-1 text-slate-500 dark:text-white text-sm">
+          Perform multiple background tasks at the same time and improve the
+          every...
+        </p>
+        <div class="flex justify-between items-center mt-4">
+          <span class="text-slate-500 dark:text-white text-xs">Oct 2024</span>
+          <span
+            class="bg-slate-100 px-2 py-1 font-semibold text-slate-600 text-xs"
+            >v0.2</span
+          >
+        </div>
+      </div>
+
+      <div class="bg-white dark:bg-[#272B3C] shadow-sm p-4">
+        <h3 class="text-blue-950 dark:text-white">Linker</h3>
+        <p class="mt-1 text-slate-500 dark:text-white text-sm">
+          Perform multiple background tasks at the same time and improve the
+          every...
+        </p>
+        <div class="flex justify-between items-center mt-4">
+          <span class="text-slate-500 dark:text-white text-xs">Feb 2025</span>
+          <span
+            class="bg-slate-100 px-2 py-1 font-semibold text-slate-600 text-xs"
+            >v0.3</span
+          >
+        </div>
+      </div>
+
+      <div class="bg-white dark:bg-[#272B3C] shadow-sm p-4">
+        <h3 class="text-blue-950 dark:text-white">Functions</h3>
+        <p class="mt-1 text-slate-500 dark:text-white text-sm">
+          Perform multiple background tasks at the same time and improve the
+          every...
+        </p>
+        <div class="flex justify-between items-center mt-4">
+          <span class="text-slate-500 dark:text-white text-xs">Feb 2025</span>
+          <span
+            class="bg-slate-100 px-2 py-1 font-semibold text-slate-600 text-xs"
+            >v0.3</span
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

apps/typegpu-docs/src/components/CodeButton.astro

@@ -0,0 +1,29 @@
+---
+interface Props {
+  title: string;
+  message: string;
+  icon: ((_props: astroHTML.JSX.SVGAttributes) => any) & ImageMetadata;
+}
+
+const { title, message, icon } = Astro.props as Props;
+---
+
+<div
+  class="bg-position-[100%_100%] bg-gradient-to-tl from-gradient-blue via-gradient-purple to-[#f8f7dd] p-0.5 bg-size-[200%_200%] aspect-square"
+>
+  <div class="flex flex-col items-start dark:bg-[#30354A] p-8 aspect-square bg-accent-50">
+    <div
+      class="flex justify-center items-center bg-position-[100%_100%] bg-gradient-to-tl from-gradient-blue via-gradient-purple to-[#f8f7dd] mb-6 w-16 h-16 bg-size-[200%_200%]"
+    >
+      {icon && <img src={icon.src} alt="Icon" class="w-8 h-8" />}
+    </div>
+
+    <h3 class="mb-4 font-semibold text-gray-800 dark:text-white sm:text-lg md:text-2xl">
+      {title}
+    </h3>
+
+    <p class="text-base text-gray-600 dark:text-white leading-relaxed">
+      {message}
+    </p>
+  </div>
+</div>

apps/typegpu-docs/src/components/CodePen.astro

@@ -0,0 +1,56 @@
+---
+import { Code } from "astro/components";
+
+type SupportedLanguages =
+  | "typescript"
+  | "javascript"
+  | "jsx"
+  | "tsx"
+  | "html"
+  | "css"
+  | "json"
+  | "yaml"
+  | "markdown"
+  | "bash"
+  | "shell";
+
+interface Props {
+  code: string;
+  language?: SupportedLanguages;
+}
+
+const { code, language = "typescript" } = Astro.props as Props;
+
+const formattedCode = code.trim();
+---
+
+<div class="w-full">
+  <div class:list={["overflow-x-auto", "text-[0.5rem] md:text-sm font-mono"]}>
+    <Code
+      code={formattedCode}
+      lang={language}
+      theme="github-dark"
+      class={"p-4"}
+    />
+  </div>
+</div>
+<!-- one-dark-pro, github-dark, github-light, dracula, nord, monokai, solarized-light, solarized-dark -->
+<style>
+  code {
+    counter-reset: line;
+    font-family: "JetBrains Mono", monospace;
+  }
+
+  :global(code) {
+    counter-reset: step;
+    counter-increment: step 0;
+  }
+
+  :global(code .line::before) {
+    content: counter(step);
+    counter-increment: step;
+    width: 1rem;
+    margin-right: 1rem;
+    display: inline-block;
+  }
+</style>