feat: add ask dosu button

Author: steveiliop56

astro.config.mjs

@@ -30,6 +30,9 @@ export default defineConfig({
         "./src/styles/home.css",
         "./src/styles/4-to-5.css",
       ],
+      components: {
+        Footer: "./src/components/Footer.astro",
+      },
       title: "Tinyauth",
       credits: true,
       logo: {

public/vendor/dosu-dark.png

@@ -0,0 +1,38 @@
+---
+
+---
+
+<a
+    href="https://app.dosu.dev/6caa529c-9746-4936-af7c-260caadb8a1f/ask"
+    class="sl-flex print:hidden"
+>
+    <img alt="Dosu Logo" class="dosu dosu-light" src="/vendor/dosu-light.png" />
+    <img alt="Dosu Logo" class="dosu dosu-dark" src="/vendor/dosu-dark.png" />
+    Ask Dosu
+</a>
+
+<style>
+    @layer starlight.core {
+        a {
+            gap: 0.5rem;
+            align-items: center;
+            text-decoration: none;
+            color: var(--sl-color-gray-3);
+        }
+        a:hover {
+            color: var(--sl-color-white);
+        }
+    }
+    @layer startlight.components {
+        .dosu {
+            width: 1.25em;
+            height: 1.25em;
+        }
+        html[data-theme="dark"] .dosu-light {
+            display: none;
+        }
+        html:not([data-theme="dark"]) .dosu-dark {
+            display: none;
+        }
+    }
+</style>

public/vendor/dosu-light.png

@@ -0,0 +1,64 @@
+---
+import EditLink from "@astrojs/starlight/components/EditLink.astro";
+import LastUpdated from "@astrojs/starlight/components/LastUpdated.astro";
+import Pagination from "starlight-theme-rapide/overrides/Pagination.astro";
+import { Icon } from "@astrojs/starlight/components";
+import config from "virtual:starlight/user-config";
+import AskDosu from "./AskDosu.astro";
+---
+
+<footer class="sl-flex">
+    <div class="meta sl-flex">
+        <AskDosu />
+        <EditLink />
+        <LastUpdated />
+    </div>
+    <Pagination />
+
+    {
+        config.credits && (
+            <a class="kudos sl-flex" href="https://starlight.astro.build">
+                <Icon name={"starlight"} />{" "}
+                {Astro.locals.t("builtWithStarlight.label")}
+            </a>
+        )
+    }
+</footer>
+
+<style>
+    @layer starlight.core {
+        footer {
+            flex-direction: column;
+            gap: 1.5rem;
+        }
+        .meta {
+            gap: 0.75rem 3rem;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            margin-top: 3rem;
+            font-size: var(--sl-text-sm);
+            color: var(--sl-color-gray-3);
+        }
+        .meta > :global(p:only-child) {
+            margin-inline-start: auto;
+        }
+
+        .kudos {
+            align-items: center;
+            gap: 0.5em;
+            margin: 1.5rem auto;
+            font-size: var(--sl-text-xs);
+            text-decoration: none;
+            color: var(--sl-color-gray-3);
+        }
+        .kudos:hover {
+            color: var(--sl-color-white);
+        }
+    }
+
+    @layer starlight.components {
+        .kudos :global(svg) {
+            color: var(--sl-color-orange);
+        }
+    }
+</style>