docs: New homepage design

apps/typegpu-docs/astro.config.mjs

@@ -343,6 +343,10 @@ export default defineConfig({
       ]),
     }),
     react(),
-    sitemap(),
+    sitemap({
+      // TODO(#2775): Remove this once the new homepage is live
+      // Match on the path so this keeps working regardless of deploy host/base.
+      filter: (page) => new URL(page).pathname.replace(/\/$/, '') !== '/TypeGPU/new',
+    }),
   ],
 });

apps/typegpu-docs/package.json

@@ -74,6 +74,7 @@
   },
   "devDependencies": {
     "@observablehq/plot": "^0.6.17",
+    "@shikijs/themes": "^4.0.0",
     "@types/babel__standalone": "^7.1.9",
     "@types/babel__template": "^7.4.4",
     "@types/babel__traverse": "^7.20.7",

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

@@ -0,0 +1,49 @@
+---
+interface Props {
+  title: string;
+  href: string;
+  size: 'lg' | 'base';
+  class?: string;
+}
+
+const {
+  title = 'Get started',
+  href = '/TypeGPU/getting-started',
+  size,
+  class: className,
+} = Astro.props;
+---
+
+<a
+  class:list={[
+    'text-grayscale-0 relative box-border flex h-fit w-auto items-center justify-center gap-3 overflow-hidden font-medium no-underline transition-all duration-200 ease-out hover:duration-500',
+    'from-gradient-blue via-gradient-purple bg-gradient-to-tl to-[#f8f7dd] bg-size-[200%_200%] bg-position-[100%_100%] hover:bg-position-[50%_50%]',
+    'before:animate-scroll-bg-y-slow before:absolute before:inset-0 before:block before:skew-x-16 before:bg-gradient-to-tr before:from-white/20 before:to-white/0 before:bg-size-[3rem_2rem] before:bg-center before:opacity-0 before:mix-blend-color-dodge before:transition-opacity before:duration-200 before:ease-out before:content-[""] hover:before:opacity-100 hover:before:delay-200 hover:before:duration-[1s]',
+    size === 'lg' ? 'px-10 py-6 text-2xl' : 'px-6 py-4 text-xl',
+    className,
+  ]}
+  {href}
+>
+  {title}
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    class="w-6"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M20 12H4"
+      stroke="#FCFCFF"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"></path>
+    <path
+      d="M14 18L20 12L14 6"
+      stroke="#FCFCFF"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"></path>
+  </svg>
+</a>

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

@@ -0,0 +1,39 @@
+---
+interface Props {
+  title: string;
+  message: string;
+  icon: ((_props: astroHTML.JSX.SVGAttributes) => any) & ImageMetadata;
+}
+
+const { title, message, icon: Icon } = Astro.props as Props;
+---
+
+<div
+  class="relative isolate box-border flex aspect-square flex-col items-start bg-gradient-to-tl p-6 lg:p-8"
+>
+  <div
+    class="from-gradient-blue to-gradient-purple absolute inset-0 -z-10 bg-gradient-to-tl"
+  >
+    <div
+      class="bg-tameplum-80 absolute inset-0 scale-100 transition-all duration-200 ease-out will-change-transform in-[[data-active=true]]:scale-[98.5%] dark:bg-[#30354A]"
+    >
+    </div>
+  </div>
+  <div
+    class="from-gradient-blue to-gradient-purple mb-6 flex h-12 w-12 items-center justify-center bg-gradient-to-tl"
+  >
+    {Icon && <Icon class="h-8 w-8" />}
+  </div>
+
+  <h3
+    class="dark:text-almost-white text-navy-100 text-2xl font-medium tracking-[1%] lg:text-2xl"
+  >
+    {title}
+  </h3>
+
+  <div class="flex-1">{/* Spacing */}</div>
+
+  <p class="dark:text-almost-white text-navy-100 text-base leading-relaxed">
+    {message}
+  </p>
+</div>

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

@@ -0,0 +1,56 @@
+---
+import { Code } from 'astro:components';
+import catppuccinMocha from '@shikijs/themes/catppuccin-mocha';
+
+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', 'font-mono text-[0.5rem] md:text-sm']}>
+    <Code
+      code={formattedCode}
+      lang={language}
+      theme={catppuccinMocha}
+      class={'p-4'}
+    />
+  </div>
+</div>
+<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>