feat: start on header

2026-10-21 18:57:03 +02:00 · 2026-01-08 20:39:44 -06:00
1 parent 51b2d1ce86
commit 220e4388d4
@@ -187,8 +187,8 @@
        "@blitzkit/core": "workspace:*",
        "@blitzkit/i18n": "workspace:*",
        "@bufbuild/protobuf": "^2.10.2",
-        "@fontsource-variable/inter": "^5.2.8",
        "@fontsource-variable/roboto-flex": "^5.2.8",
+        "@fontsource-variable/roboto-mono": "^5.2.8",
        "@radix-ui/colors": "^3.0.0",
        "@radix-ui/react-icons": "^1.3.2",
        "@react-three/drei": "^10.7.6",
@@ -545,10 +545,10 @@

    "@floating-ui/utils": ["@floating-ui/[email protected]", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],

-    "@fontsource-variable/inter": ["@fontsource-variable/[email protected]", "", {}, "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ=="],
-
    "@fontsource-variable/roboto-flex": ["@fontsource-variable/[email protected]", "", {}, "sha512-Q9zbz+P2VrDeIxBu9YAIG+eYpLmQF5FIJEEwAWn8En9Lao1TOISnoYcywGV+jSv7LGsHEndCR8hveXPnvCBEQQ=="],

+    "@fontsource-variable/roboto-mono": ["@fontsource-variable/[email protected]", "", {}, "sha512-6M2U3wGIUxYNKRrUoKls8BRRIPDA57T8J0agqwyDkiEHrLEEAqptsxcUl3eTm6tnRNEn6yEm4pCefvtnujebDA=="],
+
    "@fontsource/inter": ["@fontsource/[email protected]", "", {}, "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg=="],

    "@gltf-transform/core": ["@gltf-transform/[email protected]", "", { "dependencies": { "property-graph": "^3.0.0" } }, "sha512-qKhrQ29KJ9K6sz7xGoGRllqPBlROjPJMQPvCLBOfgMPH3S/Ph5E0e6fD5WmwTY5QPyBsDMRqKd1Vl0ncThTXGw=="],
@@ -17,8 +17,8 @@
    "@blitzkit/core": "workspace:*",
    "@blitzkit/i18n": "workspace:*",
    "@bufbuild/protobuf": "^2.10.2",
-    "@fontsource-variable/inter": "^5.2.8",
    "@fontsource-variable/roboto-flex": "^5.2.8",
+    "@fontsource-variable/roboto-mono": "^5.2.8",
    "@radix-ui/colors": "^3.0.0",
    "@radix-ui/react-icons": "^1.3.2",
    "@react-three/drei": "^10.7.6",
@@ -1,7 +1,11 @@
+---
+import "@fontsource-variable/roboto-flex";
+import "@fontsource-variable/roboto-mono";
+---
+
 <style is:global>
  @import "@radix-ui/colors/mauve-dark.css";
  @import "@radix-ui/colors/mauve-alpha.css";
-  @import "@fontsource-variable/roboto-flex";

  body {
    --space-0: 0.0625rem;
@@ -0,0 +1,4 @@
+.code {
+  font-family: "Roboto Mono";
+  color: red;
+}
@@ -0,0 +1,8 @@
+import type { ComponentProps } from "react";
+import "./index.css";
+
+export interface CodeProps extends ComponentProps<"code"> {}
+
+export function Code({ className }: CodeProps) {
+  return <code className={className?????} {...props} />;
+}
@@ -1,5 +1,7 @@
 ---
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { BlitzKitIcon } from "../icons/BlitzKit";
+import { Code } from "./Code";
 import { TextField } from "./TextField";

 const strings = { home: { search: "test" } };
@@ -9,16 +11,25 @@ const strings = { home: { search: "test" } };
  .home-hero {
    display: flex;
    flex-direction: column;
+    justify-content: end;
    align-items: center;
+    padding: 0 var(--space-4);
+    position: relative;

    .wallpaper {
+      position: absolute;
+      top: 0;
+      left: 0;
      width: 100%;
+      height: calc(100% - var(--space-5) / 2);
+
+      z-index: -1;
+
      background-image: url(/assets/home-hero.webp);
      background-size: cover;
      background-position: top;
-      height: 13rem;

-      .wrapper {
+      .gradient {
        display: flex;
        align-items: center;
        justify-content: center;
@@ -32,7 +43,30 @@ const strings = { home: { search: "test" } };
      }
    }

-    input {
+    .name {
+      margin: var(--space-6) 0;
+
+      .icon-wrapper {
+        position: relative;
+
+        width: var(--space-6);
+        height: var(--space-6);
+
+        .icon {
+          width: 100%;
+          height: 100%;
+        }
+
+        .version {
+          position: absolute;
+          top: 0;
+          right: 0;
+          transform: translateX(100%);
+        }
+      }
+    }
+
+    .text-field {
      width: 100%;
    }
  }
@@ -40,7 +74,14 @@ const strings = { home: { search: "test" } };

 <div class="home-hero">
  <div class="wallpaper">
-    <div class="wrapper"></div>
+    <div class="gradient"></div>
+  </div>
+
+  <div class="name">
+    <div class="icon-wrapper">
+      <BlitzKitIcon className="icon" />
+      <Code className="version">2.0</Code>
+    </div>
  </div>

  <TextField placeholder={strings.home.search}>
@@ -3,8 +3,6 @@
  align-items: center;

  gap: var(--space-3);
-  width: 100%;
-  max-width: 40rem;
  margin: 0 var(--space-4);

  border-radius: var(--max-size);
@@ -31,6 +29,8 @@
  }

  input {
+    min-width: 0;
+
    background: none;
    border: none;

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+
+export function BlitzKitIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg
+      width="128"
+      height="128"
+      viewBox="0 0 128 128"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M48.4082 19.8652C56.6277 19.8652 62.3045 21.5665 65.4375 24.9688C67.7005 27.3762 68.8875 30.4035 69 34.0498L52.1045 58.1982L61.252 68.375L30.8174 120.845L32.3818 93.4385H0L12.9863 19.8652H48.4082ZM83.584 58.1318L103.038 35.7969H128L99.2139 65.7285L117.691 109.37H90.4053L81.2812 84.373L78.4297 87.3389L74.5391 109.37H50.0312L52.4111 95.8789L71.4209 68.375L62.2734 58.1982L92.6064 7L83.584 58.1318ZM26.5791 77.875H32.9961C35.3204 77.875 37.1735 77.1677 38.5547 75.7529C39.9358 74.3381 40.8292 72.485 41.2334 70.1943C41.6376 67.9037 41.4012 66.0505 40.5254 64.6357C39.6495 63.1876 38.0496 62.463 35.7256 62.4629H29.3076L26.5791 77.875ZM31.4297 50.4365H37.1904C39.3126 50.4365 40.9635 49.8137 42.1426 48.5674C43.3553 47.2873 44.1641 45.5016 44.5684 43.2109C44.9726 40.954 44.8036 39.2186 44.0625 38.0059C43.3213 36.7598 41.8725 36.1367 39.7168 36.1367H33.957L31.4297 50.4365Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
@@ -1,5 +1,4 @@
 ---
-import "@fontsource-variable/inter";
 import BaseMeta from "../components/BaseMeta.astro";
 import BaseStyles from "../components/BaseStyles.astro";
 import ColorAlias from "../components/ColorAlias.astro";
@@ -1,9 +1,20 @@
 ---
+import locales from "@blitzkit/i18n/locales.json";
 import "@radix-ui/colors/amber-dark.css";
-import packageJson from "../../../../package.json";
-import HomeHero from "../components/HomeHero.astro";
-import { tools } from "../core/tools/tools";
-import BaseLayout from "../layouts/BaseLayout.astro";
+import type { GetStaticPaths } from "astro";
+import packageJson from "../../../../../package.json";
+import HomeHero from "../../components/HomeHero.astro";
+import { tools } from "../../core/tools/tools";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+
+export const getStaticPaths = (() => {
+  return [
+    ...locales.supported
+      .filter(({ locale }) => locale !== locales.default)
+      .map(({ locale }) => ({ params: { locale }, props: { locale } })),
+    { params: { locale: undefined }, props: { locale: locales.default } },
+  ];
+}) satisfies GetStaticPaths;
 ---

 <BaseLayout accent="amber">