zudoku 0.0.0-feat-bundled-types.9aa135e → 0.0.0-feat-openapi-docs-redesign.dab3fc6a

package/src/app/entry.server.tsx

@@ -1,8 +1,8 @@
+import { Transform } from "node:stream";
 import { dehydrate, QueryClient } from "@tanstack/react-query";
-import { type HelmetData } from "@zudoku/react-helmet-async";
+import type { HelmetData } from "@zudoku/react-helmet-async";
 import type express from "express";
 import logger from "loglevel";
-import { Transform } from "node:stream";
 import { renderToPipeableStream, renderToStaticMarkup } from "react-dom/server";
 import {
   createStaticHandler,
@@ -10,12 +10,10 @@ import {
   isRouteErrorResponse,
   type RouteObject,
 } from "react-router";
-import "virtual:zudoku-theme.css";
 import "vite/modulepreload-polyfill";
-import { BootstrapStatic, ServerError } from "zudoku/components";
+import { BootstrapStatic, ServerError } from "zudoku/__internal";
 import { NO_DEHYDRATE } from "../lib/components/cache.js";
 import type { PrerenderResponse } from "../vite/prerender/PrerenderResponse.js";
-import "./main.css";
 import { getRoutesByConfig } from "./main.js";
 export { getRoutesByConfig };
 
@@ -51,7 +49,7 @@ export const render = async ({
     if ([301, 302, 303, 307, 308].includes(context.status)) {
       return response.redirect(
         import.meta.env.PROD ? context.status : 307,
-        context.headers.get("Location")!,
+        context.headers.get("Location") ?? "",
       );
     }
 
@@ -124,12 +122,22 @@ export const render = async ({
             !query.queryKey.includes(NO_DEHYDRATE),
         });
 
-        response.end(
-          htmlEnd?.replace(
-            "</body>",
-            `<script>window.DATA=${JSON.stringify(dehydrated)}</script></body>`,
-          ),
-        );
+        if (!htmlEnd) return response.end();
+
+        const closingTag = "</body>";
+        const idx = htmlEnd.lastIndexOf(closingTag);
+
+        if (idx === -1) return response.end(htmlEnd);
+
+        const serialized = JSON.stringify(dehydrated)
+          .replace(/</g, "\\u003c")
+          .replace(/>/g, "\\u003e");
+
+        response.write(htmlEnd.slice(0, idx));
+        response.write("<script>window.DATA=");
+        response.write(serialized);
+        response.write("</script>");
+        response.end(htmlEnd.slice(idx));
       });
 
       pipe(transformStream);

package/src/app/env.ts

@@ -1,3 +1,4 @@
+import { z } from "zod";
 import { BuildConfigSchema } from "./ZuploBuildConfig.js";
 
 const getZuploBuildConfig = () => {
@@ -9,11 +10,18 @@ const getZuploBuildConfig = () => {
     );
     return zuploBuildConfig;
   } catch (error) {
-    // eslint-disable-next-line no-console
+    if (error instanceof z.ZodError) {
+      // biome-ignore lint/suspicious/noConsole: Logging allowed here
+      console.error("ZUPLO_BUILD_CONFIG is invalid.");
+      // biome-ignore lint/suspicious/noConsole: Logging allowed here
+      console.log(error.issues);
+      return undefined;
+    }
+    // biome-ignore lint/suspicious/noConsole: Logging allowed here
     console.error(
       "ZUPLO_BUILD_CONFIG is a reserved environment variable and cannot be used for custom configuration. Please remove it from your environment variables.",
     );
-    // eslint-disable-next-line no-console
+    // biome-ignore lint/suspicious/noConsole: Logging allowed here
     console.log(error);
     return undefined;
   }

package/src/app/main.css

@@ -1,6 +1,6 @@
-/* @vite-plugin-inject font */
-@import "./defaultTheme.css" layer(theme);
+/* @vite-plugin-inject defaultTheme */
 @import "tailwindcss" source("..");
+@import "tw-animate-css";
 
 /* @vite-plugin-inject main */
 
@@ -32,21 +32,6 @@
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
-
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow: var(--shadow);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
-
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
@@ -55,6 +40,13 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
 }
 
 @utility prose {
@@ -74,12 +66,36 @@
   hr {
     @apply border-border;
   }
+  code {
+    font-weight: 400;
+  }
   code::before {
     content: none;
   }
   code::after {
     content: none;
   }
+
+  ol > li {
+    @apply my-2.5;
+  }
+
+  header:has(h1) {
+    & + p {
+      @apply my-0;
+    }
+  }
+
+  h2 {
+    @apply mt-8 mb-4;
+  }
+
+  ul.contains-task-list {
+    @apply list-none px-0;
+    li {
+      @apply my-1 flex items-center gap-1.5;
+    }
+  }
 }
 
 @layer base {
@@ -114,6 +130,11 @@
     @apply h-full overscroll-none;
   }
 
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none;
+  }
+
   details summary {
     @apply cursor-pointer;
   }
@@ -134,7 +155,8 @@
   }
 
   ::selection {
-    @apply bg-primary text-primary-foreground;
+    background: var(--color-primary);
+    color: var(--color-primary-foreground);
   }
 
   .bg-primary::selection,
@@ -152,18 +174,14 @@
     cursor: pointer;
   }
 
-  .prose.prose {
-    ul.contains-task-list {
-      @apply list-none px-0;
-      li {
-        @apply flex items-center gap-2;
-      }
-    }
-  }
 
   .shiki {
     counter-reset: line;
     @apply leading-normal;
+    background-color: var(--shiki-light-bg) !important;
+  }
+  .dark .shiki {
+    background-color: var(--shiki-dark-bg) !important;
   }
   .code-block .shiki {
     @apply grid grid-rows-1;
@@ -193,18 +211,26 @@
   }
 
   .shiki.not-inline .line {
-    @apply block -mx-4 px-4 w-[calc(100%+2rem)];
-    --highlighted-bg: hsl(
-      from hsl(var(--muted)) h s calc(l + 4 * var(--dark)) / 50%
-    );
+    @apply block -mx-4 px-4;
+    width: calc(100% + --spacing(4));
+    --highlighted-bg: hsl(from var(--shiki-light-bg) h s calc(l - 6));
   }
+  .dark .shiki.not-inline .line {
+    --highlighted-bg: hsl(from var(--shiki-dark-bg) h s calc(l + 10));
+  }
+
   .shiki .line.highlighted {
-    @apply bg-(--highlighted-bg);
+    @apply bg-(--highlighted-bg) relative;
+  }
+
+  .shiki .line.highlighted::after {
+    @apply absolute left-0 top-0 bottom-0 right-auto translate-x-full content-[''];
+    border-left: 4px solid
+      hsl(from var(--highlighted-bg) h s calc(l + 4 * var(--dark)));
   }
 
   .shiki .highlighted-word {
-    @apply bg-(--highlighted-bg) px-0.5 rounded;
-    box-shadow: 0 0 0 4px var(--highlighted-bg);
+    @apply inline-block bg-(--highlighted-bg) px-0.5 rounded;
   }
 
   select {

package/src/app/main.tsx

@@ -1,4 +1,3 @@
-import { type RouteObject } from "react-router";
 import { configuredApiKeysPlugin } from "virtual:zudoku-api-keys-plugin";
 import {
   configuredApiCatalogPlugins,
@@ -6,25 +5,29 @@ import {
 } from "virtual:zudoku-api-plugins";
 import { configuredAuthProvider } from "virtual:zudoku-auth";
 import { configuredCustomPagesPlugin } from "virtual:zudoku-custom-pages-plugin";
-import { configuredDocsPlugins } from "virtual:zudoku-docs-plugins";
+import { configuredDocsPlugin } from "virtual:zudoku-docs-plugin";
+import { configuredNavigation } from "virtual:zudoku-navigation";
 import { configuredRedirectPlugin } from "virtual:zudoku-redirect-plugin";
 import { configuredSearchPlugin } from "virtual:zudoku-search-plugin";
 import { registerShiki } from "virtual:zudoku-shiki-register";
-import { configuredSidebar } from "virtual:zudoku-sidebar";
+import type { RouteObject } from "react-router";
 import "virtual:zudoku-theme.css";
 import {
   BuildCheck,
   Layout,
+  Meta,
   RouteGuard,
   RouterError,
   StatusPage,
-  Zudoku,
-} from "zudoku/components";
+} from "zudoku/__internal";
+import { Zudoku } from "zudoku/components";
+import { Outlet } from "zudoku/router";
 import type { ZudokuConfig } from "../config/config.js";
-import type { ZudokuContextOptions } from "../lib/core/ZudokuContext.js";
 import { isNavigationPlugin } from "../lib/core/plugins.js";
+import type { ZudokuContextOptions } from "../lib/core/ZudokuContext.js";
 import { highlighter } from "../lib/shiki.js";
 import { ZuploEnv } from "./env.js";
+import "./main.css";
 
 await registerShiki(highlighter);
 
@@ -35,12 +38,12 @@ export const convertZudokuConfigToOptions = (
     basePath: config.basePath,
     canonicalUrlOrigin: config.canonicalUrlOrigin,
     protectedRoutes: config.protectedRoutes,
-    page: {
-      ...config.page,
+    site: {
+      ...config.site,
       showPoweredBy:
         ZuploEnv.buildConfig?.entitlements.devPortalZuploBranding ??
-        config.page?.showPoweredBy,
-      logo: config.page?.logo,
+        config.site?.showPoweredBy,
+      logo: config.site?.logo,
     },
     slots: config.slots,
     metadata: {
@@ -48,12 +51,11 @@ export const convertZudokuConfigToOptions = (
       title: "%s - Zudoku",
       ...config.metadata,
     },
-    sidebars: configuredSidebar,
-    topNavigation: config.topNavigation,
+    navigation: configuredNavigation,
     mdx: config.mdx,
     plugins: [
       ...(configuredAuthProvider ? [configuredAuthProvider] : []),
-      ...configuredDocsPlugins,
+      ...(configuredDocsPlugin ? [configuredDocsPlugin] : []),
       ...configuredApiPlugins,
       ...(configuredSearchPlugin ? [configuredSearchPlugin] : []),
       ...(configuredRedirectPlugin ? [configuredRedirectPlugin] : []),
@@ -71,7 +73,7 @@ export const convertZudokuConfigToOptions = (
 
 export const getRoutesByOptions = (
   options: ZudokuContextOptions,
-  enableStatusPages = false,
+  enableStatusPages = true,
 ) => {
   const allPlugins = [
     ...(options.plugins ?? []),
@@ -82,22 +84,19 @@ export const getRoutesByOptions = (
     .flatMap((plugin) => (isNavigationPlugin(plugin) ? plugin.getRoutes() : []))
     .concat(
       enableStatusPages
-        ? [400, 403, 404, 405, 414, 416, 500, 501, 502, 503, 504].map(
-            (statusCode) => ({
-              path: `/.static/${statusCode}`,
-              element: <StatusPage statusCode={statusCode} />,
-            }),
-          )
+        ? [400, 404, 500].map((statusCode) => ({
+            path: `/${statusCode}`,
+            element: <StatusPage statusCode={statusCode} />,
+          }))
         : [],
     )
-    .concat([
-      {
-        path: "*",
-        loader: () => {
-          throw new Response("Not Found", { status: 404 });
-        },
-      },
-    ]);
+    .concat([{ path: "*", element: <StatusPage statusCode={404} /> }])
+    .map((route) => ({
+      ...route,
+      errorElement: <RouterError className="w-full m-0" />,
+    }));
+
+  // @TODO Detect conflicts in routes and log warning
 
   return routes;
 };
@@ -114,22 +113,33 @@ export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
       element: (
         <Zudoku {...options}>
           <BuildCheck
-            buildId={
-              import.meta.env.IS_ZUPLO && import.meta.env.ZUPLO_BUILD_ID
-                ? import.meta.env.ZUPLO_BUILD_ID
-                : undefined
-            }
+            buildId={import.meta.env.ZUPLO_BUILD_ID}
+            environmentType={import.meta.env.ZUPLO_ENVIRONMENT_TYPE}
           />
-          <Layout />
+          <Outlet />
         </Zudoku>
       ),
+      hydrateFallbackElement: <div>Loading...</div>,
       children: [
         {
-          element: <RouteGuard />,
+          element: (
+            <Meta>
+              <RouteGuard />
+            </Meta>
+          ),
           errorElement: <RouterError />,
-          children: routes,
+          children: routes.map((r) =>
+            r.handle?.layout === "none" ? r : wrapWithLayout(r),
+          ),
         },
       ],
     },
   ];
 };
+
+const wrapWithLayout = (route: RouteObject) => {
+  return {
+    element: <Layout />,
+    children: [route],
+  };
+};

package/src/app/standalone.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter } from "react-router";
-import { Bootstrap } from "zudoku/components";
+import { Bootstrap } from "zudoku/__internal";
 import type { ZudokuConfig } from "../config/validators/validate.js";
 import { openApiPlugin } from "../lib/plugins/openapi/index.js";
 import "../lib/util/logInit.js";
@@ -13,14 +13,19 @@ if (!root) {
 }
 
 const apiUrl = root.getAttribute("data-api-url");
-const pageTitle = document.getElementsByTagName("title")[0]!.innerText;
+
+if (!apiUrl) {
+  throw new Error("No api url found");
+}
+
+const title = document.getElementsByTagName("title")[0]?.innerText;
 const logoUrl = root.getAttribute("data-logo-url");
 
 // IMPORTANT: This component must not contain tailwind classes
 // This directory is not processed by the tailwind plugin
 
 const config = {
-  page: {
+  site: {
     logo: logoUrl
       ? {
           src: {
@@ -29,20 +34,21 @@ const config = {
           },
         }
       : undefined,
-    pageTitle,
+    title,
   },
-  topNavigation: [
+  navigation: [
     {
-      id: "/",
+      type: "link",
       label: "API Reference",
+      to: "/",
     },
   ],
   plugins: [
     // Using the plugin directly because there's no config file to load in the virtual plugins
     openApiPlugin({
       type: "url",
-      input: apiUrl!,
-      navigationId: "/",
+      input: apiUrl,
+      path: "/",
     }),
   ],
 } satisfies ZudokuConfig;

package/src/lib/MissingIcon.tsx

@@ -1,4 +1,4 @@
-import { CircleDashed, LucideProps } from "lucide-react";
+import { CircleDashed, type LucideProps } from "lucide-react";
 import {
   Tooltip,
   TooltipContent,

package/src/lib/assets/language-icons/c.tsx

@@ -0,0 +1,31 @@
+import type { SVGProps } from "react";
+
+const CIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 38.000089 42.000031"
+    {...props}
+  >
+    <title>C</title>
+    <path
+      fill="#004482"
+      d="M17.903.286a2.247 2.247 0 0 1 2.193 0L36.903 9.72A2.12 2.12 0 0 1 38 11.566v18.867c0 .762-.418 1.466-1.097 1.847l-16.807 9.434a2.247 2.247 0 0 1-2.193 0L1.096 32.28A2.122 2.122 0 0 1 0 30.434V11.567c0-.762.418-1.466 1.097-1.847C4.451 7.837 14.549 2.17 17.903.286z"
+    />
+    <path
+      fill="#659ad2"
+      d="M.304 31.404C.038 31.048 0 30.71 0 30.255V11.496c0-.758.417-1.458 1.094-1.836L17.842.28c.677-.379 1.594-.37 2.271.008 3.343 1.872 13.371 7.46 16.714 9.331.27.152.476.335.66.576z"
+    />
+    <path
+      fill="#fff"
+      d="M19 7c7.727 0 14 6.273 14 14s-6.273 14-14 14S5 28.727 5 21 11.273 7 19 7zm0 7c3.863 0 7 3.136 7 7 0 3.863-3.137 7-7 7s-7-3.137-7-7c0-3.864 3.136-7 7-7z"
+    />
+    <path
+      fill="#00599c"
+      d="M37.485 10.205c.516.483.506 1.211.506 1.784 0 3.795-.032 14.59.009 18.384.004.396-.127.813-.323 1.127L18.593 21z"
+    />
+  </svg>
+);
+
+export default CIcon;

package/src/lib/assets/language-icons/commonlisp.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+
+const CommonLispIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 512 512"
+    {...props}
+  >
+    <title>Common Lisp</title>
+    <circle cx="256" cy="256" r="235" fill="#fff" />
+    <path
+      stroke="#000"
+      strokeWidth="5"
+      d="m255.56 20.008c-62.374 0.1169-122.17 24.922-166.3 68.992-92.236 92.091-92.353 241.52-0.2617 333.75 92.09 92.236 241.52 92.353 333.75 0.262 92.236-92.091 92.353-241.52 0.262-333.75-44.377-44.447-104.64-69.371-167.45-69.254zm2.281 1.0059c59.934 0.4846 119.39 23.809 164.46 68.953 91.701 91.845 91.585 240.64-0.259 332.34-45.922 45.851-120.32 45.793-166.17-0.129-45.851-45.922-45.793-120.32 0.129-166.17 46.412-46.339 46.471-121.53 0.13-167.94-37.084-37.141-94.457-46.553-140.66-21.658 42.416-31.541 92.711-45.798 142.37-45.396zm-190.84 130.26h40c9.943 42.147 25.204 79.418 40.75 116.43 15.9-41.326 33.203-81.249 55.25-116.43h40c-48.928 97.364-102.19 164.06-24 250h-40c-47.567-77.243-82.439-147.67-112-250z"
+    />
+    <path d="m293 110.72c78.194 85.936 24.928 152.64-24 250h40c22.047-35.179 39.35-75.102 55.25-116.43 15.546 37.01 30.807 74.282 40.75 116.43h40c-29.561-102.33-64.433-172.76-112-250z" />
+  </svg>
+);
+
+export default CommonLispIcon;

package/src/lib/assets/language-icons/cpp.tsx

@@ -0,0 +1,35 @@
+import type { SVGProps } from "react";
+
+const CppIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 306 344.35"
+    {...props}
+  >
+    <title>C++</title>
+    <path
+      fill="#00599C"
+      d="M302.107 258.262c2.401-4.159 3.893-8.845 3.893-13.053V99.14c0-4.208-1.49-8.893-3.892-13.052L153 172.175l149.107 86.087z"
+    />
+    <path
+      fill="#004482"
+      d="m166.25 341.193 126.5-73.034c3.644-2.104 6.956-5.737 9.357-9.897L153 172.175 3.893 258.263c2.401 4.159 5.714 7.793 9.357 9.896l126.5 73.034c7.287 4.208 19.213 4.208 26.5 0z"
+    />
+    <path
+      fill="#659AD2"
+      d="M302.108 86.087c-2.402-4.16-5.715-7.793-9.358-9.897L166.25 3.156c-7.287-4.208-19.213-4.208-26.5 0L13.25 76.19C5.962 80.397 0 90.725 0 99.14v146.069c0 4.208 1.491 8.894 3.893 13.053L153 172.175l149.108-86.088z"
+    />
+    <path
+      fill="#FFF"
+      d="M153 274.175c-56.243 0-102-45.757-102-102s45.757-102 102-102c36.292 0 70.139 19.53 88.331 50.968l-44.143 25.544c-9.105-15.736-26.038-25.512-44.188-25.512-28.122 0-51 22.878-51 51 0 28.121 22.878 51 51 51 18.152 0 35.085-9.776 44.191-25.515l44.143 25.543c-18.192 31.441-52.04 50.972-88.334 50.972z"
+    />
+    <path
+      fill="#FFF"
+      d="M255 166.508h-11.334v-11.333h-11.332v11.333H221v11.333h11.334v11.334h11.332v-11.334H255zM297.5 166.508h-11.334v-11.333h-11.332v11.333H263.5v11.333h11.334v11.334h11.332v-11.334H297.5z"
+    />
+  </svg>
+);
+
+export default CppIcon;

package/src/lib/assets/language-icons/csharp.tsx

@@ -0,0 +1,35 @@
+import type { SVGProps } from "react";
+
+const CsharpIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>C#</title>
+    <path
+      d="M29 10.232a2.387 2.387 0 0 0-.318-1.244 2.451 2.451 0 0 0-.936-.879q-5.194-2.868-10.393-5.733a2.642 2.642 0 0 0-2.763.024c-1.378.779-8.275 4.565-10.331 5.706A2.287 2.287 0 0 0 3 10.231V21.77a2.4 2.4 0 0 0 .3 1.22 2.434 2.434 0 0 0 .954.9c2.056 1.141 8.954 4.927 10.332 5.706a2.642 2.642 0 0 0 2.763.026q5.19-2.871 10.386-5.733a2.444 2.444 0 0 0 .955-.9 2.4 2.4 0 0 0 .3-1.22V10.232"
+      fill="#4e994a"
+    />
+    <path
+      d="M28.549 23.171a2.126 2.126 0 0 0 .147-.182 2.4 2.4 0 0 0 .3-1.22V10.232a2.387 2.387 0 0 0-.318-1.244c-.036-.059-.089-.105-.13-.16L16 16Z"
+      fill="#358230"
+    />
+    <path
+      d="M28.549 23.171 16 16 3.451 23.171a2.435 2.435 0 0 0 .809.72c2.056 1.141 8.954 4.927 10.332 5.706a2.642 2.642 0 0 0 2.763.026q5.19-2.871 10.386-5.733a2.43 2.43 0 0 0 .808-.719Z"
+      fill="#1a7515"
+    />
+    <path
+      d="M19.6 18.02a4.121 4.121 0 1 1-.027-4.087l3.615-2.073A8.309 8.309 0 0 0 7.7 16a8.216 8.216 0 0 0 1.1 4.117 8.319 8.319 0 0 0 14.411-.017L19.6 18.02"
+      fill="#fff"
+    />
+    <path
+      d="M27.67 15.271v-1.238h-1.007v-1.006h-1.239v1.006h-1.508v-1.006h-1.239v1.006h-1.008v1.238h1.006v1.513h-1.006v1.237h1.006v1.006h1.239v-1.006h1.509v1.006h1.239v-1.006h1.006v-1.237h-1v-1.513Zm-2.246 1.513h-1.508v-1.513h1.508Z"
+      fill="#fff"
+    />
+  </svg>
+);
+
+export default CsharpIcon;

package/src/lib/assets/language-icons/css.tsx

@@ -0,0 +1,36 @@
+import type { SVGProps } from "react";
+
+const CssIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>CSS</title>
+    <path
+      fill="#1572b6"
+      d="M5.902 27.201 3.656 2h24.688l-2.249 25.197L15.985 30 5.902 27.201z"
+    />
+    <path fill="#33a9dc" d="m16 27.858 8.17-2.265 1.922-21.532H16v23.797z" />
+    <path
+      fill="#fff"
+      d="M16 13.191h4.09l.282-3.165H16V6.935h7.75l-.074.829-.759 8.547H16v-3.12z"
+    />
+    <path
+      fill="#ebebeb"
+      d="m16.019 21.218-.014.004-3.442-.93-.22-2.465H9.24l.433 4.853 6.331 1.758.015-.004v-3.216z"
+    />
+    <path
+      fill="#fff"
+      d="m19.827 16.151-.372 4.139-3.447.93v3.216l6.336-1.756.047-.522.537-6.007h-3.101z"
+    />
+    <path
+      fill="#ebebeb"
+      d="M16.011 6.935v3.091H8.545l-.062-.695-.141-1.567-.074-.829h7.743zM16 13.191v3.091H12.601l-.062-.695-.14-1.567-.074-.829H16z"
+    />
+  </svg>
+);
+
+export default CssIcon;

package/src/lib/assets/language-icons/dart.tsx

@@ -0,0 +1,39 @@
+import type { SVGProps } from "react";
+
+const DartIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="188 251.8 110.5 110.5"
+    {...props}
+  >
+    <title>Dart</title>
+    <path
+      fill="#00c4b3"
+      d="m217.7 281.7-7.1-7.1v51.2l.1 2.4c0 1.1.2 2.4.6 3.7l56.2 19.8 14-6.2z"
+    />
+    <path
+      fill="#22d3c5"
+      d="M211.3 331.9zm70.2 13.6-14 6.2-56.1-19.8c1.1 4.1 3.4 8.7 6 11.3l18.3 18.2 40.8.1z"
+    />
+    <path
+      fill="#0075c9"
+      d="m210.8 274.6-21.8 33c-1.8 1.9-.9 5.9 2 8.9l12.6 12.7 7.9 2.8c-.3-1.3-.6-2.6-.6-3.7l-.1-2.4z"
+    />
+    <path
+      fill="#0075c9"
+      d="M267.9 275.2c-1.3-.3-2.6-.5-3.7-.6l-2.5-.1h-51.1l70.9 70.9 6.2-14z"
+    />
+    <path
+      fill="#00a8e1"
+      d="M267.8 275.2c.1 0 .1 0 0 0 .1 0 .1 0 0 0zm11.4 6c-2.6-2.6-7.1-5-11.3-6l19.8 56.2-6.2 14 15.2-4.9v-41.7z"
+    />
+    <path
+      fill="#00c4b3"
+      d="m265.1 267.4-12.7-12.6c-2.9-2.9-6.9-3.8-8.9-2l-33 21.8h51.1l2.5.1c1.1 0 2.4.2 3.7.6z"
+    />
+  </svg>
+);
+
+export default DartIcon;