zudoku 0.0.0-efc60ba6 → 0.0.0-efe3cd16

package/src/app/main.css

@@ -153,12 +153,12 @@
     @apply tabular-nums inline-flex items-baseline justify-end me-4 w-3 text-muted-foreground/25;
   }
 
-  .light .shiki.not-inline .line {
-    @apply block -mx-4 px-4 w-[calc(100%+2rem)];
+  .shiki.not-inline .line {
+    @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 {
-    @apply block -mx-4 px-4 w-[calc(100%+2rem)];
     --highlighted-bg: hsl(from var(--shiki-dark-bg) h s calc(l + 10));
   }
 
@@ -168,17 +168,12 @@
 
   .shiki .line.highlighted::after {
     @apply absolute left-0 top-0 bottom-0 right-auto translate-x-full content-[''];
-    border-left: 3px solid
+    border-left: 4px solid
       hsl(from var(--highlighted-bg) h s calc(l + 4 * var(--dark)));
   }
 
   .shiki .highlighted-word {
-    --highlighted-bg: hsl(
-      from var(--muted) h s calc(l + 4 * var(--dark)) / 50%
-    );
-
-    @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,
@@ -11,18 +10,21 @@ 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 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";
@@ -110,17 +112,30 @@ export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
             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,7 +13,12 @@ if (!root) {
 }
 
 const apiUrl = root.getAttribute("data-api-url");
-const title = 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
@@ -42,7 +47,7 @@ const config = {
     // Using the plugin directly because there's no config file to load in the virtual plugins
     openApiPlugin({
       type: "url",
-      input: apiUrl!,
+      input: apiUrl,
       path: "/",
     }),
   ],

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/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/go.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+
+const GoIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>Go</title>
+    <path
+      fill="#00ACD7"
+      d="m2.64 10.33-.02-.06.22-.27.12-.08H6.8l.03.08-.18.26-.11.06-3.9.01m-1.61.98L1 11.26l.22-.29.12-.06h4.9l.05.09-.08.24-.1.07H1.03m2.6.99-.04-.06.16-.28.1-.06H6l.07.07-.02.25-.08.08H3.63m11.15-2.16-1.78.47c-.19.04-.2.05-.34-.11-.16-.18-.27-.29-.5-.4-.66-.34-1.33-.24-1.94.15-.72.48-1.11 1.17-1.1 2.05.01.86.6 1.57 1.45 1.7.73.09 1.34-.17 1.83-.72l.29-.39h-2.07c-.22 0-.27-.14-.2-.32l.55-1.18c.03-.06.11-.17.27-.17h3.44c.15-.5.41-.96.75-1.41.78-1.03 1.73-1.57 3-1.81 1.07-.18 2.13-.07 3.07.57.84.58 1.37 1.36 1.5 2.39.19 1.45-.24 2.63-1.24 3.65-.71.72-1.58 1.17-2.57 1.39l-.86.08c-.98-.02-1.87-.3-2.62-.95-.52-.45-.88-.99-1.06-1.63-.15.24-.27.47-.44.7-.77 1.02-1.78 1.65-3.06 1.8-1.05.16-2.03-.05-2.89-.69-.79-.6-1.26-1.4-1.36-2.39-.14-1.17.2-2.22.91-3.14.76-1 1.77-1.63 3.01-1.86 1-.18 1.97-.06 2.84.52.57.38.97.9 1.24 1.52.04.09 0 .15-.12.18m6.11 1.6-.03-.36c-.19-1.06-1.17-1.66-2.19-1.43-1.01.22-1.67.85-1.88 1.86-.19.84.21 1.69.98 2.03.59.26 1.19.22 1.76-.06.84-.43 1.31-1.12 1.36-2.04Z"
+    />
+  </svg>
+);
+
+export default GoIcon;

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

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+
+const GraphqlIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>GraphQL</title>
+    <path
+      fill="#E10098"
+      d="m12 5.37-.44-.06L6 14.9c.24.21.4.48.47.78h11.06c.07-.3.23-.57.47-.78l-5.56-9.59-.44.06M6.6 16.53l4.28 2.53c.29-.27.69-.43 1.12-.43.43 0 .83.16 1.12.43l4.28-2.53H6.6M12 22a1.68 1.68 0 0 1-1.68-1.68l.09-.56-4.3-2.55c-.31.36-.76.58-1.27.58a1.68 1.68 0 0 1-1.68-1.68c0-.79.53-1.45 1.26-1.64V9.36c-.83-.11-1.47-.82-1.47-1.68A1.68 1.68 0 0 1 4.63 6c.55 0 1.03.26 1.34.66l4.41-2.53-.06-.45c0-.93.75-1.68 1.68-1.68.93 0 1.68.75 1.68 1.68l-.06.45 4.41 2.53c.31-.4.79-.66 1.34-.66a1.68 1.68 0 0 1 1.68 1.68c0 .86-.64 1.57-1.47 1.68v5.11c.73.19 1.26.85 1.26 1.64a1.68 1.68 0 0 1-1.68 1.68c-.51 0-.96-.22-1.27-.58l-4.3 2.55.09.56A1.68 1.68 0 0 1 12 22M10.8 4.86 6.3 7.44l.02.24c0 .71-.44 1.32-1.06 1.57l.03 5.25 5.51-9.64m2.4 0 5.51 9.64.03-5.25c-.62-.25-1.06-.86-1.06-1.57l.02-.24-4.5-2.58Z"
+    />
+  </svg>
+);
+
+export default GraphqlIcon;

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

@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+
+const HtmlIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlSpace="preserve"
+    width="1em"
+    height="1em"
+    viewBox="0 0 32 32"
+    {...props}
+  >
+    <path
+      fill="#E44D26"
+      d="M27.377 28.889 16.001 32 4.625 28.889 2 0h28.002z"
+    />
+    <path fill="#FF6C39" d="M16 2v27.75l9.232-2.742L27.688 2z" />
+    <path
+      fill="#FFF"
+      d="M24.363 6H7.607L8 10l.619 7h10.884l-.355 3.984L16 21.99l-3.143-1.006L12.648 19H8.803l.459 4.987L16 25.99l6.728-2.004.99-10.986H12.252l-.25-3H24z"
+    />
+  </svg>
+);
+
+export default HtmlIcon;

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

@@ -0,0 +1,35 @@
+import type { SVGProps } from "react";
+
+const JavaIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 128 128"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>Java</title>
+    <path
+      fill="#0074BD"
+      d="M47.617 98.12s-4.767 2.774 3.397 3.71c9.892 1.13 14.947.968 25.845-1.092 0 0 2.871 1.795 6.873 3.351-24.439 10.47-55.308-.607-36.115-5.969zm-2.988-13.665s-5.348 3.959 2.823 4.805c10.567 1.091 18.91 1.18 33.354-1.6 0 0 1.993 2.025 5.132 3.131-29.542 8.64-62.446.68-41.309-6.336z"
+    />
+    <path
+      fill="#EA2D2E"
+      d="M69.802 61.271c6.025 6.935-1.58 13.17-1.58 13.17s15.289-7.891 8.269-17.777c-6.559-9.215-11.587-13.792 15.635-29.58 0 .001-42.731 10.67-22.324 34.187z"
+    />
+    <path
+      fill="#0074BD"
+      d="M102.123 108.229s3.529 2.91-3.888 5.159c-14.102 4.272-58.706 5.56-71.094.171-4.451-1.938 3.899-4.625 6.526-5.192 2.739-.593 4.303-.485 4.303-.485-4.953-3.487-32.013 6.85-13.743 9.815 49.821 8.076 90.817-3.637 77.896-9.468zM49.912 70.294s-22.686 5.389-8.033 7.348c6.188.828 18.518.638 30.011-.326 9.39-.789 18.813-2.474 18.813-2.474s-3.308 1.419-5.704 3.053c-23.042 6.061-67.544 3.238-54.731-2.958 10.832-5.239 19.644-4.643 19.644-4.643zm40.697 22.747c23.421-12.167 12.591-23.86 5.032-22.285-1.848.385-2.677.72-2.677.72s.688-1.079 2-1.543c14.953-5.255 26.451 15.503-4.823 23.725 0-.002.359-.327.468-.617z"
+    />
+    <path
+      fill="#EA2D2E"
+      d="M76.491 1.587S89.459 14.563 64.188 34.51c-20.266 16.006-4.621 25.13-.007 35.559-11.831-10.673-20.509-20.07-14.688-28.815C58.041 28.42 81.722 22.195 76.491 1.587z"
+    />
+    <path
+      fill="#0074BD"
+      d="M52.214 126.021c22.476 1.437 57-.8 57.817-11.436 0 0-1.571 4.032-18.577 7.231-19.186 3.612-42.854 3.191-56.887.874 0 .001 2.875 2.381 17.647 3.331z"
+    />
+  </svg>
+);
+
+export default JavaIcon;

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

@@ -0,0 +1,11 @@
+import type { SVGProps } from "react";
+
+const JavascriptIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" {...props}>
+    <title>Javascript</title>
+    <rect x="2" y="2" width="28" height="28" fill="#f5de19" />
+    <path d="M20.809,23.875a2.866,2.866,0,0,0,2.6,1.6c1.09,0,1.787-.545,1.787-1.3,0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964,0-1.973,1.5-3.476,3.853-3.476a3.889,3.889,0,0,1,3.742,2.107L25,18.128A1.789,1.789,0,0,0,23.311,17a1.145,1.145,0,0,0-1.259,1.128c0,.789.489,1.109,1.618,1.6l.658.282c2.236.959,3.5,1.936,3.5,4.133,0,2.369-1.861,3.667-4.36,3.667a5.055,5.055,0,0,1-4.795-2.691Zm-9.295.228c.413.733.789,1.353,1.693,1.353.864,0,1.41-.338,1.41-1.653V14.856h2.631v8.982c0,2.724-1.6,3.964-3.929,3.964a4.085,4.085,0,0,1-3.947-2.4Z" />
+  </svg>
+);
+
+export default JavascriptIcon;

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

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+
+const JsonIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>JSON</title>
+    <path
+      className="fill-[#dfa410] dark:fill-[#f5de19]"
+      d="M5 3h2v2H5v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5h2v2H5c-1.07-.27-2-.9-2-2v-4a2 2 0 0 0-2-2H0v-2h1a2 2 0 0 0 2-2V5a2 2 0 0 1 2-2m14 0a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1v2h-1a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2v-2h2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5h-2V3h2m-7 12a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m-4 0a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m8 0a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1Z"
+    />
+  </svg>
+);
+
+export default JsonIcon;

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

@@ -0,0 +1,30 @@
+import type { SVGProps } from "react";
+
+const KotlinIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlSpace="preserve"
+    viewBox="0 0 500 500"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>Kotlin</title>
+    <linearGradient
+      id="a"
+      x1={500.003}
+      x2={-0.097}
+      y1={579.106}
+      y2={1079.206}
+      gradientTransform="translate(.097 -578.99) scale(.9998)"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop offset={0.003} stopColor="#e44857" />
+      <stop offset={0.469} stopColor="#c711e1" />
+      <stop offset={1} stopColor="#7f52ff" />
+    </linearGradient>
+    <path d="M500 500H0V0h500L250 250z" fill="url(#a)" />
+  </svg>
+);
+
+export default KotlinIcon;

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

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+
+const MarkdownIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>Markdown</title>
+    <path
+      className="fill-foreground/90"
+      d="M20.56 18H3.44C2.65 18 2 17.37 2 16.59V7.41C2 6.63 2.65 6 3.44 6h17.12c.79 0 1.44.63 1.44 1.41v9.18c0 .78-.65 1.41-1.44 1.41M3.44 6.94c-.26 0-.48.21-.48.47v9.19c0 .25.22.46.48.46h17.12c.26 0 .48-.21.48-.46V7.41c0-.26-.22-.47-.48-.47H3.44m1.45 8.25V8.81h1.92l1.92 2.35 1.92-2.35h1.93v6.38h-1.93v-3.66l-1.92 2.35-1.92-2.35v3.66H4.89m12.01 0-2.9-3.1h1.94V8.81h1.92v3.28h1.93l-2.89 3.1"
+    />
+  </svg>
+);
+
+export default MarkdownIcon;

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

@@ -0,0 +1,23 @@
+import type { SVGProps } from "react";
+
+const MdxIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>MDX</title>
+    <path
+      className="fill-foreground"
+      d="m20.3 16.5-3.9 3.9-4-3.9 1.1-1.1 2.1 2.1v-5.7h1.5v5.8l2.1-2.1Zm-16.8-.8 2.7 2.7L9 15.7v4.4h1.5V12l-4.3 4.3L2 12v8.1h1.5Z"
+    />
+    <path
+      fill="#f9ac00"
+      d="m28.8 20-3.1-3.1-3.1 3.1-1-1.1 3.1-3.1-3.2-3.2 1.1-1 3.1 3.2 3.2-3.2 1.1 1-3.2 3.2 3.1 3.1Z"
+    />
+  </svg>
+);
+
+export default MdxIcon;

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

@@ -0,0 +1,23 @@
+import type { SVGProps } from "react";
+
+const ObjectiveCIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>Objective-C</title>
+    <path
+      d="M11.29 15.976a8.892 8.892 0 0 0 1.039 4.557 4.818 4.818 0 0 0 5.579 2.13 3.789 3.789 0 0 0 2.734-3.181c.095-.535.1-.54.1-.54 1.537.222 4.014.582 5.55.8l-.1.389A9.958 9.958 0 0 1 23.8 24.9a8.35 8.35 0 0 1-4.747 2.378 12.925 12.925 0 0 1-7.322-.725 8.98 8.98 0 0 1-5.106-5.524A14.353 14.353 0 0 1 6.642 10.9a9.323 9.323 0 0 1 7.929-6.24 11.812 11.812 0 0 1 5.9.491 8.467 8.467 0 0 1 5.456 6.1c.083.311.1.369.1.369-1.709.311-3.821.705-5.518 1.075-.323-1.695-1.122-3.029-2.831-3.445a4.656 4.656 0 0 0-5.853 3.158 9.28 9.28 0 0 0-.341 1.273 10.89 10.89 0 0 0-.194 2.295Z"
+      className="fill-foreground"
+    />
+    <path
+      d="M2.033 30V2h5.934v2.227H4.723v23.546h3.244V30H2.033zM29.967 29.999h-5.934v-2.228h3.244V4.226h-3.244V1.999h5.934v28z"
+      className="fill-foreground"
+    />
+  </svg>
+);
+
+export default ObjectiveCIcon;

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

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+
+const PhpIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>PHP</title>
+    <path
+      fill="#8993be"
+      d="M12 18.08c-6.63 0-12-2.72-12-6.08s5.37-6.08 12-6.08S24 8.64 24 12s-5.37 6.08-12 6.08m-5.19-7.95c.54 0 .91.1 1.09.31.18.2.22.56.13 1.03-.1.53-.29.87-.58 1.09-.28.22-.71.33-1.29.33h-.87l.53-2.76h.99m-3.5 5.55h1.44l.34-1.75h1.23c.54 0 .98-.06 1.33-.17.35-.12.67-.31.96-.58.24-.22.43-.46.58-.73.15-.26.26-.56.31-.88.16-.78.05-1.39-.33-1.82-.39-.44-.99-.65-1.82-.65H4.59l-1.28 6.58m7.25-8.33-1.28 6.58h1.42l.74-3.77h1.14c.36 0 .6.06.71.18.11.12.13.34.07.66l-.57 2.93h1.45l.59-3.07c.13-.62.03-1.07-.27-1.36-.3-.27-.85-.4-1.65-.4h-1.27L12 7.35h-1.44M18 10.13c.55 0 .91.1 1.09.31.18.2.22.56.13 1.03-.1.53-.29.87-.57 1.09-.29.22-.72.33-1.3.33h-.85l.5-2.76h1m-3.5 5.55h1.44l.34-1.75h1.22c.55 0 1-.06 1.35-.17.35-.12.65-.31.95-.58.24-.22.44-.46.58-.73.15-.26.26-.56.32-.88.15-.78.04-1.39-.34-1.82-.36-.44-.99-.65-1.82-.65h-2.75l-1.29 6.58Z"
+    />
+  </svg>
+);
+
+export default PhpIcon;

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

@@ -0,0 +1,23 @@
+import type { SVGProps } from "react";
+
+const PythonIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 100 100"
+    {...props}
+  >
+    <path
+      fill="#387EB8"
+      d="M47.661 1.245c-23.863 0-22.373 10.348-22.373 10.348l.027 10.721h22.772v3.219H16.27S1 23.8 1 47.879s13.328 23.224 13.328 23.224h7.954V59.93s-.429-13.328 13.115-13.328h22.586s12.69.205 12.69-12.264V13.721S72.599 1.245 47.66 1.245ZM35.105 8.454a4.093 4.093 0 0 1 4.097 4.097 4.093 4.093 0 0 1-4.097 4.097 4.093 4.093 0 0 1-4.097-4.097 4.093 4.093 0 0 1 4.097-4.097Z"
+    />
+    <path
+      fill="#FFE052"
+      d="M48.34 94.755c23.862 0 22.372-10.348 22.372-10.348l-.026-10.72H47.914v-3.22H79.73S95 72.2 95 48.121 81.672 24.897 81.672 24.897h-7.954V36.07s.43 13.328-13.115 13.328H38.017s-12.689-.205-12.689 12.264v20.617s-1.927 12.477 23.011 12.477Zm12.556-7.209a4.093 4.093 0 0 1-4.097-4.097 4.093 4.093 0 0 1 4.097-4.096 4.093 4.093 0 0 1 4.097 4.096 4.093 4.093 0 0 1-4.097 4.097Z"
+    />
+  </svg>
+);
+
+export default PythonIcon;

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

@@ -0,0 +1,21 @@
+import type { SVGProps } from "react";
+
+const ReactIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>React</title>
+    <g className="fill-[#00a7c5] dark:fill-[#00d8fe]">
+      <circle cx={16} cy={15.974} r={2.5} />
+      <path d="M16 21.706a28.385 28.385 0 0 1-8.88-1.2 11.3 11.3 0 0 1-3.657-1.958A3.543 3.543 0 0 1 2 15.974c0-1.653 1.816-3.273 4.858-4.333A28.755 28.755 0 0 1 16 10.293a28.674 28.674 0 0 1 9.022 1.324 11.376 11.376 0 0 1 3.538 1.866A3.391 3.391 0 0 1 30 15.974c0 1.718-2.03 3.459-5.3 4.541a28.8 28.8 0 0 1-8.7 1.191Zm0-10.217a27.948 27.948 0 0 0-8.749 1.282c-2.8.977-4.055 2.313-4.055 3.2 0 .928 1.349 2.387 4.311 3.4A27.21 27.21 0 0 0 16 20.51a27.6 27.6 0 0 0 8.325-1.13C27.4 18.361 28.8 16.9 28.8 15.974a2.327 2.327 0 0 0-1.01-1.573 10.194 10.194 0 0 0-3.161-1.654A27.462 27.462 0 0 0 16 11.489Z" />
+      <path d="M10.32 28.443a2.639 2.639 0 0 1-1.336-.328c-1.432-.826-1.928-3.208-1.327-6.373a28.755 28.755 0 0 1 3.4-8.593 28.676 28.676 0 0 1 5.653-7.154 11.376 11.376 0 0 1 3.384-2.133 3.391 3.391 0 0 1 2.878 0c1.489.858 1.982 3.486 1.287 6.859a28.806 28.806 0 0 1-3.316 8.133 28.385 28.385 0 0 1-5.476 7.093 11.3 11.3 0 0 1-3.523 2.189 4.926 4.926 0 0 1-1.624.307Zm1.773-14.7a27.948 27.948 0 0 0-3.26 8.219c-.553 2.915-.022 4.668.75 5.114.8.463 2.742.024 5.1-2.036a27.209 27.209 0 0 0 5.227-6.79 27.6 27.6 0 0 0 3.181-7.776c.654-3.175.089-5.119-.713-5.581a2.327 2.327 0 0 0-1.868.089A10.194 10.194 0 0 0 17.5 6.9a27.464 27.464 0 0 0-5.4 6.849Z" />
+      <path d="M21.677 28.456c-1.355 0-3.076-.82-4.868-2.361a28.756 28.756 0 0 1-5.747-7.237 28.676 28.676 0 0 1-3.374-8.471 11.376 11.376 0 0 1-.158-4A3.391 3.391 0 0 1 8.964 3.9c1.487-.861 4.01.024 6.585 2.31a28.8 28.8 0 0 1 5.39 6.934 28.384 28.384 0 0 1 3.41 8.287 11.3 11.3 0 0 1 .137 4.146 3.543 3.543 0 0 1-1.494 2.555 2.59 2.59 0 0 1-1.315.324Zm-9.58-10.2a27.949 27.949 0 0 0 5.492 6.929c2.249 1.935 4.033 2.351 4.8 1.9.8-.465 1.39-2.363.782-5.434A27.212 27.212 0 0 0 19.9 13.74a27.6 27.6 0 0 0-5.145-6.64c-2.424-2.152-4.39-2.633-5.191-2.169a2.327 2.327 0 0 0-.855 1.662 10.194 10.194 0 0 0 .153 3.565 27.465 27.465 0 0 0 3.236 8.1Z" />
+    </g>
+  </svg>
+);
+
+export default ReactIcon;

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

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+
+const RubyIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>Ruby</title>
+    <path
+      fill="#d6422b"
+      d="M18.8 2.07c2.52.43 3.24 2.16 3.2 3.97V6l-1.14 14.93-14.78 1.01h.01c-1.23-.05-3.96-.17-4.09-3.99l1.37-2.5 2.77 6.46 2.36-7.62-.05.01.02-.02 7.71 2.46-1.99-7.78 7.35-.46-5.79-4.74 3.05-1.7v.01M2 17.91v.02-.02M6.28 6.23c2.96-2.95 6.79-4.69 8.26-3.2 1.46 1.47-.08 5.09-3.04 8.03-3 2.94-6.77 4.78-8.24 3.3-1.47-1.49.04-5.19 3.01-8.13h.01Z"
+    />
+  </svg>
+);
+
+export default RubyIcon;

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

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+
+const RustIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>Rust</title>
+    <path
+      className="fill-foreground"
+      d="m21.9 11.7-.9-.5V11l.7-.7c.1-.1.1-.3 0-.4l-.1-.1-.9-.3c0-.1 0-.2-.1-.2l.6-.8c.1-.1.1-.3-.1-.4 0 0-.1 0-.1-.1l-1-.2c0-.1-.1-.1-.1-.2l.4-.9v-.3c-.1-.1-.2-.1-.3-.1h-1s0-.1-.1-.1l.2-1c0-.2-.1-.3-.2-.3h-.1l-1 .2c0-.1-.1-.1-.2-.2v-1c0-.2-.1-.3-.3-.3h-.1l-.9.4h-.1L16 3c0-.2-.2-.3-.3-.2h-.1l-.8.6c-.1 0-.2 0-.2-.1l-.3-.9c-.1-.1-.2-.2-.4-.2 0 0-.1 0-.1.1L13 3h-.2l-.5-.8c-.1-.2-.3-.2-.5-.2l-.1.1-.5.9H11l-.7-.7c-.1-.1-.3-.1-.4 0l-.1.1-.3.9c-.1 0-.2 0-.2.1l-.8-.6c-.2-.1-.4-.1-.5.1V3l-.2 1s-.1 0-.2.1l-.9-.4c-.1-.1-.3 0-.4.1v1.1c0 .1-.1.1-.1.2l-1-.2c-.2-.1-.3 0-.3.2v.1l.2 1c-.1 0-.1.1-.2.1h-1c-.2 0-.3.1-.3.3v.1l.4.9v.2L3 8c-.2 0-.3.2-.3.3v.1l.6.8c0 .1 0 .2-.1.2l-.8.4c-.1.1-.2.2-.2.4 0 0 0 .1.1.1l.7.7v.2l-.8.5c-.2.1-.2.3-.2.4l.1.1.9.6v.2l-.7.7c-.1.1-.1.3 0 .4l.1.1.9.3c0 .1 0 .2.1.2l-.6.8c-.1.1-.1.3.1.4 0 0 .1 0 .1.1l1 .2c0 .1.1.1.1.2l-.4.9c-.1.1 0 .3.1.4h1.1c.1 0 .1.1.2.1l-.2 1c0 .2.1.3.2.3h.1l1-.2c0 .1.1.1.2.2v1c0 .2.1.3.3.3h.1l.9-.4h.1l.2 1c0 .2.2.3.3.2h.1l.8-.6c.1 0 .2 0 .2.1l.3.9c.1.1.2.2.4.2 0 0 .1 0 .1-.1l.8-.7h.2l.5.8c.1.1.3.2.4.1l.1-.1.5-.8h.2l.7.7c.1.1.3.1.4 0l.1-.1.3-.9c.1 0 .2 0 .2-.1l.8.6c.1.1.3.1.4-.1 0 0 0-.1.1-.1l.2-1c.1 0 .1-.1.2-.1l.9.4c.1.1.3 0 .4-.1v-1.1l.2-.2 1 .2c.2 0 .3-.1.3-.2v-.1l-.2-1 .2-.2h1c.2 0 .3-.1.3-.3v-.1l-.4-.9c0-.1.1-.1.1-.2l1-.2c.2 0 .3-.2.2-.3v-.1l-.6-.8.1-.2.9-.3c.1-.1.2-.2.2-.4 0 0 0-.1-.1-.1L21 13v-.2l.8-.5c.2-.1.2-.3.1-.6 0 .1 0 .1 0 0m-5.7 7c-.3-.1-.5-.4-.5-.7.1-.3.4-.5.7-.5.3.1.5.4.5.7 0 .4-.3.6-.7.5m-.2-1.9c-.3-.1-.6.1-.6.4l-.4 1.4c-.9.4-1.9.6-3 .6s-2.1-.2-3.1-.7l-.3-1.4c-.1-.3-.3-.5-.6-.4l-1.2.3c-.2-.2-.4-.5-.6-.7h6c.1 0 .1 0 .1-.1v-2.1c0-.1 0-.1-.1-.1h-1.7v-1.3h1.9c.2 0 .9 0 1.2 1 .1.3.2 1.3.4 1.6.1.3.6 1 1.1 1h3.1c-.2.3-.4.5-.7.8l-1.5-.3m-8.3 1.9c-.3.1-.6-.1-.7-.5-.1-.3.1-.6.5-.7s.6.1.7.5c0 .3-.2.6-.5.7M5.4 9.5c.1.3 0 .7-.3.8-.3.1-.7 0-.8-.3-.1-.3 0-.7.3-.8.4-.1.7 0 .8.3m-.7 1.6 1.3-.5c.3-.1.4-.4.3-.7L6 9.3h1V14H5c-.3-1-.4-1.9-.3-2.9m5.6-.4V9.3h2.5c.1 0 .9.1.9.7 0 .5-.6.7-1.1.7h-2.3m9 1.2v.5h-.8c-.1 0-.1 0-.1.1v.3c0 .8-.5 1-.9 1s-.8-.2-.9-.4c-.2-1.3-.6-1.5-1.2-2 .7-.5 1.5-1.2 1.5-2.1 0-1-.7-1.6-1.1-1.9-.7-.4-1.4-.5-1.6-.5H6.6c1.1-1.2 2.5-2 4.1-2.3l.9 1c.2.2.5.2.8 0l1-1c2.1.4 3.9 1.7 5 3.6l-.7 1.6c-.1.3 0 .6.3.7l1.3.6v.8m-7.7-8c.2-.2.6-.2.8 0 .2.2.2.6 0 .8-.3.3-.6.3-.9 0-.2-.2-.1-.5.1-.8m6.9 5.6c.1-.3.5-.4.8-.3.3.1.4.5.3.8-.1.3-.5.4-.8.3-.3-.1-.4-.5-.3-.8Z"
+    />
+  </svg>
+);
+
+export default RustIcon;

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

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+
+const ShellIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>Terminal</title>
+    <path
+      className="fill-foreground"
+      d="M13 19v-3h8v3h-8m-4.5-6L2.47 7h4.24l4.96 4.95c.58.59.58 1.55 0 2.12L6.74 19H2.5l6-6Z"
+    />
+  </svg>
+);
+
+export default ShellIcon;

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

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+
+const SwiftIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>Swift</title>
+    <path
+      fill="#F05138"
+      d="M17.09 19.72c-2.36 1.36-5.59 1.5-8.86.1A13.807 13.807 0 0 1 2 14.5c.67.55 1.46 1 2.3 1.4 3.37 1.57 6.73 1.46 9.1 0-3.37-2.59-6.24-5.96-8.37-8.71-.45-.45-.78-1.01-1.12-1.51 8.28 6.05 7.92 7.59 2.41-1.01 4.89 4.94 9.43 7.74 9.43 7.74.16.09.25.16.36.22.1-.25.19-.51.26-.78.79-2.85-.11-6.12-2.08-8.81 4.55 2.75 7.25 7.91 6.12 12.24-.03.11-.06.22-.05.39 2.24 2.83 1.64 5.78 1.35 5.22-1.21-2.39-3.48-1.65-4.62-1.17Z"
+    />
+  </svg>
+);
+
+export default SwiftIcon;

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

@@ -0,0 +1,23 @@
+import type { SVGProps } from "react";
+
+const TomlIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>TOML</title>
+    <path
+      className="dark:fill-[#7f7f7f]"
+      d="M22.76 6.83v3.25h-5v15.09h-3.5V10.08h-5V6.83Z"
+    />
+    <path
+      className="fill-[#bfbfbf] dark:fill-[#a2a2a2]"
+      d="M2 2h6.2v3.09H5.34v21.8H8.2V30H2ZM30 30h-6.2v-3.09h2.86V5.11H23.8V2H30Z"
+    />
+  </svg>
+);
+
+export default TomlIcon;

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

@@ -0,0 +1,23 @@
+import type { SVGProps } from "react";
+
+const TypescriptIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 260 260"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>TypeScript</title>
+    <path
+      fill="#fff"
+      d="M9.75 0h240.5c5.385 0 9.75 4.365 9.75 9.75v240.5a9.75 9.75 0 0 1-9.75 9.75H9.75C4.365 260 0 255.635 0 250.25V9.75C0 4.365 4.365 0 9.75 0z"
+    />
+    <path
+      fill="#3178c6"
+      d="M9.75 0h240.5c5.385 0 9.75 4.365 9.75 9.75v240.5a9.75 9.75 0 0 1-9.75 9.75H9.75C4.365 260 0 255.635 0 250.25V9.75C0 4.365 4.365 0 9.75 0zm134.78 138.32v-21.324H51.998v21.324h33.036v94.946h26.298V138.32zm10.485 92.439c4.241 2.162 9.257 3.784 15.048 4.865 5.79 1.081 11.893 1.622 18.309 1.622 6.253 0 12.193-.595 17.82-1.784 5.628-1.189 10.562-3.149 14.803-5.879s7.598-6.297 10.072-10.703 3.711-9.852 3.711-16.339c0-4.703-.707-8.824-2.12-12.365-1.414-3.541-3.453-6.69-6.117-9.447s-5.859-5.23-9.583-7.419c-3.725-2.189-7.925-4.257-12.601-6.203-3.425-1.406-6.497-2.771-9.216-4.095-2.718-1.324-5.029-2.676-6.932-4.054-1.903-1.379-3.371-2.838-4.404-4.379-1.033-1.54-1.55-3.284-1.55-5.23 0-1.784.463-3.392 1.387-4.824.924-1.433 2.229-2.663 3.915-3.69 1.685-1.027 3.751-1.824 6.198-2.392 2.447-.567 5.165-.851 8.156-.851 2.174 0 4.472.162 6.891.486 2.42.325 4.853.825 7.299 1.5a50.847 50.847 0 0 1 7.137 2.555 39.395 39.395 0 0 1 6.402 3.567v-24.244c-3.969-1.514-8.305-2.636-13.008-3.365-4.704-.73-10.1-1.095-16.189-1.095-6.199 0-12.071.662-17.617 1.987-5.546 1.324-10.425 3.392-14.639 6.203s-7.544 6.392-9.991 10.743c-2.447 4.352-3.67 9.555-3.67 15.609 0 7.731 2.243 14.326 6.729 19.785 4.485 5.46 11.295 10.082 20.43 13.866a277.435 277.435 0 0 1 10.031 4.298c3.099 1.405 5.777 2.865 8.033 4.378 2.257 1.514 4.037 3.162 5.342 4.946s1.958 3.811 1.958 6.082c0 1.676-.408 3.23-1.224 4.662-.815 1.433-2.052 2.676-3.71 3.73-1.659 1.054-3.725 1.879-6.199 2.473-2.474.595-5.369.892-8.686.892-5.654 0-11.254-.986-16.8-2.959s-10.684-4.933-15.415-8.879z"
+    />
+  </svg>
+);
+
+export default TypescriptIcon;