feat: some work on footer

packages/i18n/strings/en.json

@@ -110,5 +110,10 @@
   "navbar": {
     "home": "Home",
     "settings": "Settings"
+  },
+
+  "companies": {
+    "discord": "Discord",
+    "github": "GitHub"
   }
 }

packages/website-ue/src/components/Footer.astro

@@ -1,8 +1,10 @@
 ---
+import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
 import packageJson from "../../../../package.json";
 import { api } from "../core/api/dynamic";
 import { BlitzKitIcon } from "../icons/BlitzKit";
 import { Code } from "./Code";
+import { Link } from "./Link";
 import { Text } from "./Text";
 
 interface Props {
@@ -28,20 +30,36 @@ const strings = await api.strings(locale);
       flex: 1;
       max-width: var(--page-width);
 
-      .logo {
-        display: flex;
-        align-items: center;
-        gap: var(--space-4);
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-4);
 
-        .icon {
-          width: var(--space-6);
-          height: var(--space-6);
+      .row-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .logo {
+          display: flex;
+          align-items: center;
+          gap: var(--space-4);
+
+          .icon {
+            width: var(--space-6);
+            height: var(--space-6);
+          }
+
+          .info {
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-1);
+          }
         }
 
-        .info {
+        .links {
           display: flex;
-          flex-direction: column;
-          gap: var(--space-1);
+          align-items: center;
+          gap: var(--space-5);
         }
       }
     }
@@ -50,17 +68,39 @@ const strings = await api.strings(locale);
 
 <div class="footer">
   <div class="content">
-    <div class="logo">
-      <BlitzKitIcon className="icon" />
+    <div class="row-info">
+      <div class="logo">
+        <BlitzKitIcon className="icon" />
 
-      <div class="info">
-        <Text lowContrast weight="medium" size="major">
-          {strings.common.name}
-        </Text>
+        <div class="info">
+          <Text lowContrast weight="medium" size="major">
+            {strings.common.name}
+          </Text>
 
-        <Code>
-          {packageJson.version}
-        </Code>
+          <Code>
+            {packageJson.version}
+          </Code>
+        </div>
+      </div>
+
+      <div class="links">
+        <Link
+          underline="hover"
+          color="gray"
+          href="https://discord.gg/nDt7AjGJQH"
+        >
+          <DiscordLogoIcon />
+          {strings.companies.discord}
+        </Link>
+
+        <Link
+          underline="hover"
+          color="gray"
+          href="https://github.com/blitzkit/blitzkit"
+        >
+          <GitHubLogoIcon />
+          {strings.companies.github}
+        </Link>
       </div>
     </div>
   </div>

packages/website-ue/src/components/Link/index.module.css

@@ -1,7 +1,10 @@
 .link {
-  color: var(--accent-11);
   text-decoration-color: currentColor;
 
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+
   &[data-underline="hover"],
   &[data-underline="never"] {
     text-decoration: none;
@@ -12,10 +15,6 @@
     text-decoration: underline;
   }
 
-  &[data-high-contrast="true"] {
-    color: var(--accent-12);
-  }
-
   svg {
     width: 1.25em;
     height: 1.25em;

packages/website-ue/src/components/Link/index.tsx

@@ -1,21 +1,29 @@
 import type { ComponentProps } from "react";
 import { classNames } from "../../core/ui/classNames";
-import "./index.css";
+import type { Color } from "../../core/ui/color";
+import styles from "./index.module.css";
 
 export interface LinkProps extends ComponentProps<"a"> {
   underline?: "always" | "hover" | "never";
   highContrast?: boolean;
+  color?: Color | "accent";
 }
 
 export function Link({
   highContrast,
   className,
   underline = "always",
+  color = "accent",
+  style,
   ...props
 }: LinkProps) {
   return (
     <a
-      className={classNames("link", className)}
+      className={classNames(styles.link, className)}
+      style={{
+        color: `var(--${color}-${highContrast ? 12 : 11})`,
+        ...style,
+      }}
       {...props}
       data-underline={underline}
       data-high-contrast={highContrast}

packages/website-ue/src/components/Navbar.astro

@@ -1,10 +1,6 @@
 ---
 import { BlitzKitIcon } from "../icons/BlitzKit";
 import { LinkI18n } from "./LinkI18n";
-import { Text } from "./Text";
-import { api } from "../core/api/dynamic";
-import { tools } from "../core/tools/tools";
-import type { Tool } from "../core/tools/tools";
 import { HamburgerMenuIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
 
 interface Props {
@@ -56,9 +52,7 @@ const { locale } = Astro.props;
           gap: var(--space-2);
 
           cursor: pointer;
-          color: var(--color-regular);
           text-decoration: none;
-          color: var(--gray-11);
 
           .selector {
             padding: var(--space-2);
@@ -102,7 +96,14 @@ const { locale } = Astro.props;
 <div id="navbar">
   <div class="content">
     <div class="group">
-      <LinkI18n {locale} href="/" className="action" tabIndex={0}>
+      <LinkI18n
+        color="gray"
+        highContrast
+        {locale}
+        href="/"
+        className="action"
+        tabIndex={0}
+      >
         <div class="selector">
           <BlitzKitIcon className="icon" />
         </div>
@@ -110,13 +111,27 @@ const { locale } = Astro.props;
     </div>
 
     <div class="group">
-      <LinkI18n {locale} href="/" className="action" tabIndex={0}>
+      <LinkI18n
+        color="gray"
+        highContrast
+        {locale}
+        href="/"
+        className="action"
+        tabIndex={0}
+      >
         <div class="selector">
           <MagnifyingGlassIcon className="icon" />
         </div>
       </LinkI18n>
 
-      <LinkI18n {locale} href="/" className="action" tabIndex={0}>
+      <LinkI18n
+        color="gray"
+        highContrast
+        {locale}
+        href="/"
+        className="action"
+        tabIndex={0}
+      >
         <div class="selector">
           <HamburgerMenuIcon className="icon" />
         </div>

packages/website-ue/src/components/ToolCard.astro

@@ -20,10 +20,11 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
 
 <style>
   .tool-card {
-    display: flex;
     flex-direction: column;
     height: 10rem;
     position: relative;
+    align-items: stretch;
+    gap: 0;
 
     border-radius: var(--space-3);
 

packages/website-ue/src/layouts/BaseLayout.astro

@@ -3,6 +3,7 @@ import BaseMeta from "../components/BaseMeta.astro";
 import BaseStyles from "../components/BaseStyles.astro";
 import ColorAlias from "../components/ColorAlias.astro";
 import ColorScale from "../components/ColorScale.astro";
+import Footer from "../components/Footer.astro";
 import Navbar from "../components/Navbar.astro";
 import type { Color } from "../core/ui/color";
 
@@ -66,5 +67,7 @@ const { accent, noNavbar, locale } = Astro.props;
     <div class="app">
       <slot />
     </div>
+
+    <Footer {locale} />
   </body>
 </html>