Add CC-BY-SA footer.

Author: markjamesm

astro.config.mjs

@@ -10,6 +10,10 @@ export default defineConfig({
     starlight({
       plugins: [starlightThemeFlexoki({ accentColor: "blue" })],
       title: "M68k Reference",
+      components: {
+        // Override the default `Footer` component.
+        Footer: "./src/components/Footer.astro",
+      },
       editLink: {
         baseUrl: "https://github.com/markjamesm/m68k-reference/tree/main",
       },
@@ -25,18 +29,18 @@ export default defineConfig({
         },
       ],
       sidebar: [
-		        {
+        {
           label: "Start Here",
           items: [
             // Each item here is one entry in the navigation menu.
-            { label: "Getting Started", slug: "getting-started" }
+            { label: "Getting Started", slug: "getting-started" },
           ],
         },
-		        {
+        {
           label: "Reference",
           items: [
-			{ label: "Overview", slug: "reference/overview" },
-			{ label: "Manuals", slug: "reference/manuals" },
+            { label: "Overview", slug: "reference/overview" },
+            { label: "Manuals", slug: "reference/manuals" },
           ],
         },
         {

src/components/Attribution.astro

@@ -0,0 +1,21 @@
+---
+
+---
+
+<p>
+  This work is licensed under <a
+    href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a
+  ><img
+    src="https://mirrors.creativecommons.org/presskit/icons/cc.svg"
+    alt=""
+    style="max-width: 1em;max-height:1em;margin-left: .2em;"
+  /><img
+    src="https://mirrors.creativecommons.org/presskit/icons/by.svg"
+    alt=""
+    style="max-width: 1em;max-height:1em;margin-left: .2em;"
+  /><img
+    src="https://mirrors.creativecommons.org/presskit/icons/sa.svg"
+    alt=""
+    style="max-width: 1em;max-height:1em;margin-left: .2em;"
+  />
+</p>

src/components/Footer.astro

@@ -0,0 +1,75 @@
+---
+import EditLink from 'virtual:starlight/components/EditLink';
+import LastUpdated from 'virtual:starlight/components/LastUpdated';
+import Pagination from 'virtual:starlight/components/Pagination';
+import config from 'virtual:starlight/user-config';
+import { Icon } from '@astrojs/starlight/components';
+import Attribution from './Attribution.astro';
+---
+
+<footer class="sl-flex">
+	<div class="meta sl-flex">
+		<EditLink />
+		<LastUpdated />
+	</div>
+	<Pagination />
+
+    <div class="copyright sl-flex">
+        <Attribution />
+    </div>
+
+	{
+		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: right;
+			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);
+		}
+
+        .copyright {
+            align-items: right;
+			gap: 0.5em;
+			margin: 1.5rem auto;
+			font-size: var(--sl-text-xs);
+            font-style: italic;
+			text-decoration: none;
+        }
+	}
+
+	@layer starlight.components {
+		.kudos :global(svg) {
+			color: var(--sl-color-orange);
+		}
+	}
+</style>

src/content/docs/index.mdx

@@ -39,12 +39,3 @@ import { Aside, LinkCard, CardGrid } from '@astrojs/starlight/components';
   		description="Consult the list of available reference manuals, in PDF format."
 	/>
 </CardGrid>
-
-*This work is licensed under a
-[Creative Commons Attribution-ShareAlike 4.0 International License][cc-by-sa].*
-
-[![CC BY-SA 4.0][cc-by-sa-image]][cc-by-sa]
-
-[cc-by-sa]: http://creativecommons.org/licenses/by-sa/4.0/
-[cc-by-sa-image]: https://licensebuttons.net/l/by-sa/4.0/88x31.png
-[cc-by-sa-shield]: https://img.shields.io/badge/License-CC%20BY--SA%204.0-lightgrey.svg