added components Badge, TypeTitle, migrated existing code accordingly

astro.config.mjs

@@ -1,6 +1,7 @@
 import { defineConfig } from "astro/config";
 import solidJs from "@astrojs/solid-js";
 import mdx from "@astrojs/mdx";
+import icon from "astro-icon";
 
 import pagefind from "./pagefind";
 import { markdownConfig } from "./src/config/io/markdown.ts";
@@ -14,5 +15,6 @@ export default defineConfig({
     }),
     mdx(),
     pagefind(),
+    icon(),
   ],
 });

package.json

@@ -11,16 +11,17 @@
   },
   "dependencies": {
     "@ark-ui/solid": "^3.5.0",
-    "@astrojs/check": "^0.9.3",
+    "@astrojs/check": "^0.9.4",
-    "@astrojs/markdown-remark": "^5.1.0",
+    "@astrojs/markdown-remark": "^5.3.0",
-    "@astrojs/mdx": "^3.1.7",
+    "@astrojs/mdx": "^3.1.8",
     "@astrojs/solid-js": "^4.4.2",
     "@hbsnow/rehype-sectionize": "^1.0.7",
     "@pagefind/default-ui": "^1.1.1",
     "@shikijs/rehype": "^1.22.0",
     "@types/node": "^20.14.11",
-    "astro": "^4.15.9",
+    "astro": "^4.16.6",
     "astro-breadcrumbs": "^2.3.1",
+    "astro-icon": "^1.1.1",
     "hast": "^1.0.0",
     "hast-util-from-html": "^2.0.3",
     "node": "npm:22.7.0",
@@ -32,7 +33,7 @@
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@astrojs/ts-plugin": "^1.10.2",
+    "@astrojs/ts-plugin": "^1.10.3",
     "@biomejs/biome": "^1.8.3",
     "pagefind": "^1.1.1"
   },

src/components/Badge.astro

@@ -0,0 +1,21 @@
+---
+import { Icon } from "astro-icon/components";
+
+export interface Props {
+  badgeText: string;
+  withIcon?: boolean;
+  badgeIconName?: string;
+}
+
+const { badgeText, withIcon = true, badgeIconName } = Astro.props;
+---
+<span class="badge">
+  {withIcon &&
+    (
+      badgeIconName ?
+        <Icon name={badgeIconName}/>
+      : <Icon name={"flag"}/>
+    )
+  }
+  <span class="badge-text">{badgeText}</span>
+</span>

src/components/icons.tsx

@@ -115,8 +115,7 @@ export const ShevronSmallDown: VoidComponent<{
           stroke-width="2"
           d="M9 12L14 7M9 12L14 17"
           fill="currentColor"
-        >
+        ></path>
-        </path>
       </g>
     </svg>
   );
@@ -173,6 +172,7 @@ export const Hashtag: VoidComponent<{
       viewBox="0 0 256 256"
       class={props.class}
     >
+      <title>Link</title>
       <path
         fill="currentColor"
         d="M224 90h-51l8.89-48.93a6 6 0 1 0-11.8-2.14L160.81 90H109l8.89-48.93a6 6 0 0 0-11.8-2.14L96.81 90H48a6 6 0 0 0 0 12h46.63l-9.46 52H32a6 6 0 0 0 0 12h51l-8.9 48.93a6 6 0 0 0 4.83 7A5.6 5.6 0 0 0 80 222a6 6 0 0 0 5.89-4.93l9.3-51.07H147l-8.89 48.93a6 6 0 0 0 4.83 7a5.6 5.6 0 0 0 1.08.1a6 6 0 0 0 5.89-4.93l9.28-51.1H208a6 6 0 0 0 0-12h-46.63l9.46-52H224a6 6 0 0 0 0-12m-74.83 64h-51.8l9.46-52h51.8Z"
@@ -192,6 +192,7 @@ export const Tag: VoidComponent<{
       viewBox="0 0 256 256"
       class={props.class}
     >
+      <title>Property</title>
       <path
         fill="currentColor"
         d="M246.66 123.56L201 55.13A15.94 15.94 0 0 0 187.72 48H40a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h147.72a16 16 0 0 0 13.28-7.12l45.63-68.44a8 8 0 0 0 .03-8.88M187.72 192H40V64h147.72l42.66 64Z"
@@ -211,6 +212,7 @@ export const Subtitles: VoidComponent<{
       viewBox="0 0 256 256"
       class={props.class}
     >
+      <title>Table of contents</title>
       <path
         fill="currentColor"
         d="M224 48H32a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16m0 144H32V64h192zM48 136a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16H56a8 8 0 0 1-8-8m160 0a8 8 0 0 1-8 8h-96a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8m-48 32a8 8 0 0 1-8 8H56a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8m48 0a8 8 0 0 1-8 8h-16a8 8 0 0 1 0-16h16a8 8 0 0 1 8 8"
@@ -230,6 +232,7 @@ export const Ruler: VoidComponent<{
       viewBox="0 0 256 256"
       class={props.class}
     >
+      <title>Prop</title>
       <path
         fill="currentColor"
         d="m235.32 73.37l-52.69-52.68a16 16 0 0 0-22.63 0L20.68 160a16 16 0 0 0 0 22.63l52.69 52.68a16 16 0 0 0 22.63 0L235.32 96a16 16 0 0 0 0-22.63M84.68 224L32 171.31l32-32l26.34 26.35a8 8 0 0 0 11.32-11.32L75.31 128L96 107.31l26.34 26.35a8 8 0 0 0 11.32-11.32L107.31 96L128 75.31l26.34 26.35a8 8 0 0 0 11.32-11.32L139.31 64l32-32L224 84.69Z"
@@ -249,6 +252,7 @@ export const RoundBrackets: VoidComponent<{
       viewBox="0 0 256 256"
       class={props.class}
     >
+      <title>Function</title>
       <path
         fill="currentColor"
         d="M40 128c0 58.29 34.67 80.25 36.15 81.16a8 8 0 0 1-8.27 13.7C66.09 221.78 24 195.75 24 128s42.09-93.78 43.88-94.86a8 8 0 0 1 8.26 13.7C74.54 47.83 40 69.82 40 128m148.12-94.86a8 8 0 0 0-8.27 13.7C181.33 47.75 216 69.71 216 128s-34.67 80.25-36.12 81.14a8 8 0 0 0 8.24 13.72C189.91 221.78 232 195.75 232 128s-42.09-93.78-43.88-94.86"
@@ -268,6 +272,7 @@ export const PowerCord: VoidComponent<{
       viewBox="0 0 256 256"
       class={props.class}
     >
+      <title>Signal</title>
       <path
         fill="currentColor"
         d="M149.66 138.34a8 8 0 0 0-11.32 0L120 156.69L99.31 136l18.35-18.34a8 8 0 0 0-11.32-11.32L88 124.69l-18.34-18.35a8 8 0 0 0-11.32 11.32l6.35 6.34l-23.32 23.31a32 32 0 0 0 0 45.26l5.38 5.37l-28.41 28.4a8 8 0 0 0 11.32 11.32l28.4-28.41l5.37 5.38a32 32 0 0 0 45.26 0L132 191.31l6.34 6.35a8 8 0 0 0 11.32-11.32L131.31 168l18.35-18.34a8 8 0 0 0 0-11.32m-52.29 65a16 16 0 0 1-22.62 0l-22.06-22.09a16 16 0 0 1 0-22.62L76 135.31L120.69 180Zm140.29-185a8 8 0 0 0-11.32 0l-28.4 28.41l-5.37-5.38a32.05 32.05 0 0 0-45.26 0L124 64.69l-6.34-6.35a8 8 0 0 0-11.32 11.32l80 80a8 8 0 0 0 11.32-11.32l-6.35-6.34l23.32-23.31a32 32 0 0 0 0-45.26l-5.38-5.37l28.41-28.4a8 8 0 0 0 0-11.32m-34.35 79L180 120.69L135.31 76l23.32-23.31a16 16 0 0 1 22.62 0l22.06 22a16 16 0 0 1 0 22.68Z"
@@ -287,6 +292,7 @@ export const FourDiamonds: VoidComponent<{
       viewBox="0 0 256 256"
       class={props.class}
     >
+      <title>Variant</title>
       <path
         fill="currentColor"
         d="M122.34 109.66a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0 0-11.32l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 0 11.32ZM128 35.31L156.69 64L128 92.69L99.31 64Zm5.66 111a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 0 11.32l40 40a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0 0-11.32ZM128 220.69L99.31 192L128 163.31L156.69 192Zm109.66-98.35l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 0 11.32l40 40a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0 0-11.32M192 156.69L163.31 128L192 99.31L220.69 128Zm-82.34-34.35l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 0 11.32l40 40a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0 0-11.32M64 156.69L35.31 128L64 99.31L92.69 128Z"
@@ -434,6 +440,7 @@ export const LinkSimple: VoidComponent<{
       viewBox="0 0 256 256"
       class={props.class}
     >
+      <title>Link</title>
       <path
         fill="currentColor"
         d="M165.66 90.34a8 8 0 0 1 0 11.32l-64 64a8 8 0 0 1-11.32-11.32l64-64a8 8 0 0 1 11.32 0M215.6 40.4a56 56 0 0 0-79.2 0l-30.06 30.05a8 8 0 0 0 11.32 11.32l30.06-30a40 40 0 0 1 56.57 56.56l-30.07 30.06a8 8 0 0 0 11.31 11.32l30.07-30.11a56 56 0 0 0 0-79.2m-77.26 133.82l-30.06 30.06a40 40 0 1 1-56.56-56.57l30.05-30.05a8 8 0 0 0-11.32-11.32L40.4 136.4a56 56 0 0 0 79.2 79.2l30.06-30.07a8 8 0 0 0-11.32-11.31"

src/components/type/Functions.astro

@@ -5,7 +5,8 @@ import type {
 } from "@config/io/types";
 import { getQMLTypeLink } from "@config/io/helpers";
 import { Tag } from "@icons";
-import TypeDetails from "./TypeDetails.astro"
+import TypeDetails from "./TypeDetails.astro";
+import TypeTitle from "./TypeTitle.astro";
 
 export interface Props {
   funcData: QuickshellFunction[];
@@ -16,17 +17,21 @@ const { funcData } = Astro.props;
 <ul class="typedata typefuncs">
   {
     funcData.map(item => {
-      const functionParams = item.params.length > 0 ? item.params.map((funcparam,index) => `${funcparam.name}${index !== item.params.length -1 ? ", ":""}`) : null
+      const functionParams = item.params.length > 0 ? item.params.map((funcparam,index) => `${funcparam.name}${index !== item.params.length -1 ? ", ":""}`) : undefined
       const retTypeLink = getQMLTypeLink(item.ret as unknown as QMLTypeLinkObject)
+      let genericType:string|undefined;
+      let genericTypeLink:string|undefined;
       return (
         <li id={item.name} class="typedata-root typefunc-root">
-          <p class="typedata-name typefunc-name">
+          <TypeTitle
-      {item.name}(<span class="typedata-param">{functionParams}</span>)
+            typekind="func"
-      <span class="type-datatype">:&nbsp;<a
+            typename={item.name}
-                href={retTypeLink}
+            typelink={retTypeLink}
-                target="_blank"
+            typelink_text={item.ret.name || item.ret.type.toString()}
-                >{item.ret.name || item.ret.type}</a></span>
+            typename_generic={genericType}
-          </p>
+            typelink_generic={genericTypeLink}
+            typedata_params={functionParams}
+          />
           {
             item.params.length > 0 ? (
               <p class="typedata-params typefunc-params">

src/components/type/Properties.astro

@@ -5,6 +5,7 @@ import type {
   QuickshellProps,
 } from "@config/io/types";
 import { Tag, Flag } from "@icons";
+import TypeTitle from "./TypeTitle.astro";
 
 import TypeDetails from "./TypeDetails.astro";
 
@@ -37,34 +38,15 @@ const { propsKeys, propsData } = Astro.props;
       }
       return (
         <li id={ item } class="typedata-root typeprop-root">
-          <div class="typedata-title typeprop-title">
+          <TypeTitle
-            <section class="typedata-name typeprop-name">
+            typekind="prop"
-            <Tag client:idle/>
+            typename={item}
-            { item }<span class="type-datatype">:&nbsp;<a
+            typelink={typeLink}
-              href={typeLink}
+            typelink_text={linkText}
-            >{ linkText }</a>{genericType &&
+            typename_generic={genericType}
-            (<span class="type-datatype">&lt;</span><a
+            typelink_generic={genericTypeLink}
-              href={genericTypeLink}>{genericType}</a
+            badges={propData.flags}
-              ><span class="type-datatype">&gt;</span>
+          />
-            )}</span>
-            </section>
-            {
-              propData.flags && propData.flags.length > 0 ? (
-                <p class="type-flags">
-                  {
-                    propData.flags.map((flag) => {
-                      return (
-                        <span class="type-flag">
-                          <Flag client:idle/>
-                          {flag}
-                        </span>
-                      )
-                    })
-                  }
-                </p>
-              ) : null
-            }
-          </div>
           {
             gadget ? (
               <p class="typedata-params typefunc-params">

src/components/type/Signals.astro

@@ -2,6 +2,7 @@
 import type { QuickshellSignal } from "@config/io/types";
 import { Tag, PowerCord } from "@icons";
 import TypeDetails from "./TypeDetails.astro";
+import TypeTitle from "./TypeTitle.astro";
 
 export interface Props {
   signalKeys: string[];
@@ -15,15 +16,19 @@ const { signalKeys, signalsData } = Astro.props;
     signalKeys.map(item => {
       const signalData = signalsData[item];
       const paramKeys = signalData.params.length > 0 ? signalData.params.map((param,index) => `${param.name}${index !== signalData.params.length -1 ? ", ":""}`) : []
+      let genericType:string|undefined;
+      let genericTypeLink:string|undefined;
       return (
         <li id={ item } class="typedata-root typesignal-root">
-          <p class="typedata-name typesignal-name">
+          <TypeTitle
-            <PowerCord client:idle/>
+            typekind="signal"
-              { item }(<span class="typedata-param">{paramKeys}</span>)<span class="typesignal-doclink"><a
+            typename={item}
-              href="/docs/configuration/qml-overview#-signals"
+            typelink="/docs/configuration/qml-overview#-signals"
-              target="_blank"
+            typelink_text={"?"}
-            >?</a></span>
+            typename_generic={genericType}
-          </p>
+            typelink_generic={genericTypeLink}
+            typedata_params={paramKeys}
+          />
           {
             signalData.params && signalData.params.length > 0 ? (
               <p class="typedata-params typesignal-params">

src/components/type/TypeTitle.astro

@@ -0,0 +1,57 @@
+---
+import { Icon } from "astro-icon/components";
+import Badge from "@components/Badge.astro";
+
+export interface Props {
+  typekind: string;
+  typename: string;
+  typelink: string;
+  typelink_text: string;
+  typename_generic?: string;
+  typelink_generic?: string;
+  badges?: string[];
+  typedata_params?: string[];
+}
+
+const {
+  typekind,
+  typename,
+  typelink,
+  typelink_text,
+  typename_generic,
+  typelink_generic,
+  badges,
+  typedata_params,
+} = Astro.props;
+
+const iconSelector: { [key: string]: string } = {
+  prop: "tag",
+  func: "roundbrackets",
+  signal: "powercord",
+  variant: "fourdiamonds",
+};
+---
+<div class={`typedata-title type${typekind}-title`}>
+  <section class={`typedata-name type${typekind}-name`}>
+    {typekind !== "func" && <Icon name={iconSelector[typekind]}/>}
+    <span>{ typename }{ (typekind === "func" || typekind === "signal") ?
+      (<span>(</span><span class="typedata-param">{typedata_params}</span><span>)</span>)
+      :""}
+    </span>
+    { typekind !== "variant" &&
+    <span class=`type-datatype ${typekind === "signal" && "typesignal-doclink"}`>{typekind !== "signal" &&":"}&nbsp;
+      <a href={typelink}>{ typelink_text }</a>
+      {typename_generic &&
+        (
+          <span class="type-datatype">&lt;</span><a href={typelink_generic}>{typename_generic}</a><span class="type-datatype">&gt;</span>
+        )
+      }
+    </span>
+    }
+  </section>
+  <section class="type-badges">
+    {badges && badges.length > 0 ? (
+      badges.map(badgeText => <Badge badgeText={badgeText}/>)
+    ) : null}
+  </section>
+</div>

src/components/type/Variants.astro

@@ -2,6 +2,7 @@
 import type { QuickshellVariant } from "@config/io/types";
 import { FourDiamonds } from "../icons";
 import TypeDetails from "./TypeDetails.astro";
+import TypeTitle from "./TypeTitle.astro";
 
 export interface Props {
   variantKeys: string[];
@@ -19,10 +20,12 @@ const { variantKeys, variantsData } = Astro.props;
         : [];
       return (
         <li id={ item } class="typedata-root typevariant-root">
-          <p class="typedata-name typevariant-name">
+          <TypeTitle 
-            <FourDiamonds client:idle/>
+            typekind="variant"
-          { item }
+            typename={item}
-          </p>
+            typelink=""
+            typelink_text=""
+          />
           {
             paramKeys ? (
               <div class="typedata-params typevariant-params">

src/icons/flag.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><title>Flag</title><path fill="currentColor" d="M42.76 50A8 8 0 0 0 40 56v168a8 8 0 0 0 16 0v-44.23c26.79-21.16 49.87-9.75 76.45 3.41c16.4 8.11 34.06 16.85 53 16.85c13.93 0 28.54-4.75 43.82-18a8 8 0 0 0 2.76-6V56a8 8 0 0 0-13.27-6c-28 24.23-51.72 12.49-79.21-1.12C111.07 34.76 78.78 18.79 42.76 50M216 172.25c-26.79 21.16-49.87 9.74-76.45-3.41c-25-12.35-52.81-26.13-83.55-8.4V59.79c26.79-21.16 49.87-9.75 76.45 3.4c25 12.35 52.82 26.13 83.55 8.4Z"/></svg>

src/icons/fourdiamonds.svg

@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  viewBox="0 0 256 256"
+>
+  <title>Variant</title>
+  <path
+    fill="currentColor"
+    d="M122.34 109.66a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0 0-11.32l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 0 11.32ZM128 35.31L156.69 64L128 92.69L99.31 64Zm5.66 111a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 0 11.32l40 40a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0 0-11.32ZM128 220.69L99.31 192L128 163.31L156.69 192Zm109.66-98.35l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 0 11.32l40 40a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0 0-11.32M192 156.69L163.31 128L192 99.31L220.69 128Zm-82.34-34.35l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 0 11.32l40 40a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0 0-11.32M64 156.69L35.31 128L64 99.31L92.69 128Z"
+  />
+</svg>

src/icons/powercord.svg

@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  viewBox="0 0 256 256"
+>
+  <title>Signal</title>
+  <path
+    fill="currentColor"
+    d="M149.66 138.34a8 8 0 0 0-11.32 0L120 156.69L99.31 136l18.35-18.34a8 8 0 0 0-11.32-11.32L88 124.69l-18.34-18.35a8 8 0 0 0-11.32 11.32l6.35 6.34l-23.32 23.31a32 32 0 0 0 0 45.26l5.38 5.37l-28.41 28.4a8 8 0 0 0 11.32 11.32l28.4-28.41l5.37 5.38a32 32 0 0 0 45.26 0L132 191.31l6.34 6.35a8 8 0 0 0 11.32-11.32L131.31 168l18.35-18.34a8 8 0 0 0 0-11.32m-52.29 65a16 16 0 0 1-22.62 0l-22.06-22.09a16 16 0 0 1 0-22.62L76 135.31L120.69 180Zm140.29-185a8 8 0 0 0-11.32 0l-28.4 28.41l-5.37-5.38a32.05 32.05 0 0 0-45.26 0L124 64.69l-6.34-6.35a8 8 0 0 0-11.32 11.32l80 80a8 8 0 0 0 11.32-11.32l-6.35-6.34l23.32-23.31a32 32 0 0 0 0-45.26l-5.38-5.37l28.41-28.4a8 8 0 0 0 0-11.32m-34.35 79L180 120.69L135.31 76l23.32-23.31a16 16 0 0 1 22.62 0l22.06 22a16 16 0 0 1 0 22.68Z"
+  />
+</svg>

src/icons/roundbrackets.svg

@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  viewBox="0 0 256 256"
+>
+  <title>Function</title>
+  <path
+    fill="currentColor"
+    d="M40 128c0 58.29 34.67 80.25 36.15 81.16a8 8 0 0 1-8.27 13.7C66.09 221.78 24 195.75 24 128s42.09-93.78 43.88-94.86a8 8 0 0 1 8.26 13.7C74.54 47.83 40 69.82 40 128m148.12-94.86a8 8 0 0 0-8.27 13.7C181.33 47.75 216 69.71 216 128s-34.67 80.25-36.12 81.14a8 8 0 0 0 8.24 13.72C189.91 221.78 232 195.75 232 128s-42.09-93.78-43.88-94.86"
+  />
+</svg>

src/icons/tag.svg

@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  viewBox="0 0 256 256"
+>
+  <title>Property</title>
+  <path
+    fill="currentColor"
+    d="M246.66 123.56L201 55.13A15.94 15.94 0 0 0 187.72 48H40a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h147.72a16 16 0 0 0 13.28-7.12l45.63-68.44a8 8 0 0 0 .03-8.88M187.72 192H40V64h147.72l42.66 64Z"
+  />
+</svg>

src/pages/docs/types/[type]/[name].astro

@@ -2,13 +2,13 @@
 import { getQMLTypeLink } from "@config/io/helpers";
 import { processMarkdown } from "@config/io/markdown";
 import { generateTypeData } from "@config/io/generateTypeData";
-import { Flag } from "@icons";
 import DocsLayout from "@layouts/DocsLayout.astro";
 import TOC from "@components/navigation/sidebars/TOC.astro";
 import Properties from "@components/type/Properties.astro";
 import Functions from "@components/type/Functions.astro";
 import Signals from "@components/type/Signals.astro";
 import Variants from "@components/type/Variants.astro";
+import Badge from "@components/Badge.astro";
 
 export async function getStaticPaths() {
   const routes = await generateTypeData();
@@ -76,10 +76,7 @@ const details = data.details
             <subheading class="typedocs-subheading">
               {data.flags ? (
                 <div class="type-flags" data-pagefind-ignore>{data.flags.map(flag => (
-                  <span class="type-flag">
+                  <Badge badgeText={flag}/>
-                    <Flag client:idle/>
-                    {flag}
-                  </span>
                 ))}</div>
               ):null}
               {details ? <span class="parsedMD" set:html={details}/> : (<span class="toparse">{data.description}</span>)}

src/styles/docs/badge.css

@@ -0,0 +1,21 @@
+.type-badges {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 0.517rem;
+  font-size: 0.815rem;
+  margin: 0 !important;
+  max-width: 10rem;
+  justify-content: flex-end;
+}
+
+.badge {
+  padding-inline: 6px;
+  padding-block: 3px;
+  display: flex;
+  align-items: center;
+  gap: 0.117rem;
+  color: hsl(var(--inner-param-color));
+  border: 1px solid hsl(var(--inner-param-color));
+  border-radius: 5px;
+  width: max-content;
+}

src/styles/docs/docs-types.css

@@ -1,3 +1,6 @@
+@import "./type-title.css";
+@import "./badge.css";
+
 .root-nav {
   position: relative;
   display: flex;
@@ -99,42 +102,6 @@
     border-radius: 12px;
     padding: 0.8rem;
     transition: border 0.3s;
-
-    & .typedata-title {
-      margin-bottom: 0.8rem;
-
-      & .typedata-name {
-        font-size: 1.272rem;
-        display: flex;
-        align-items: center;
-        margin: 0;
-
-        & svg {
-          width: 1.2em;
-          height: 1.2em;
-          margin-right: 0.3em;
-        }
-      }
-
-      & .type-flags {
-        display: flex;
-        flex-flow: row nowrap;
-        gap: 0.517rem;
-        font-size: 0.815rem;
-        margin: 0;
-
-        & .type-flag {
-          padding-inline: 6px;
-          padding-block: 3px;
-          display: flex;
-          align-items: center;
-          gap: 0.117rem;
-          color: hsl(var(--inner-param-color));
-          border: 1px solid hsl(var(--inner-param-border-color));
-          border-radius: 6px;
-        }
-      }
-    }
   }
 
   & .typedata-details {
@@ -317,9 +284,8 @@ html.dark .typefuncs {
       color: hsl(var(--signal-link-color));
 
       & .typesignal-doclink {
-        position: absolute;
         top: -12px;
-        right: -12px;
+        left: -6px;
         opacity: 0.8;
         scale: 75%;
       }
@@ -391,13 +357,6 @@ html.dark .typevariants {
   }
 }
 
-@media (min-width: 40rem) {
-  .typedocs-content .typedata-title {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
 @media (min-width: 65rem) {
   .root-nav {
     & .root-nav-entry {

src/styles/docs/type-title.css

@@ -0,0 +1,23 @@
+.typedata-title {
+  margin-bottom: 1.618rem;
+
+  & .typedata-name {
+    font-size: 1.272rem;
+    display: flex;
+    align-items: center;
+    margin: 0;
+
+    & svg {
+      width: 1.2em;
+      height: 1.2em;
+      margin-right: 0.3em;
+    }
+  }
+}
+
+@media (min-width: 40rem) {
+  .typedata-title {
+    display: flex;
+    justify-content: space-between;
+  }
+}