feat: replaced default footer with carbon badge footer

astro.config.mjs

@@ -1,15 +1,19 @@
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
+import { getFilesInGuidesFolder } from './src/utils/documents';
 
 // https://astro.build/config
 export default defineConfig({
   integrations: [
     starlight({
       title: 'Klimakode',
-      defaultLocale: "nb",
+      defaultLocale: 'nb',
+      components: {
+        Footer: './src/components/Footer.astro',
+      },
       locales: {
         nb: {
-          label: "Norsk",
+          label: 'Norsk',
           lang: 'nb-NO',
           sidebar: [
             {
@@ -19,14 +23,14 @@ export default defineConfig({
           ],
         },
         en: {
-          label: "English",
+          label: 'English',
           sidebar: [
             {
               label: 'Tips for developing more sustainably',
               autogenerate: { directory: 'en/guides' },
             },
           ],
-        }
+        },
       },
       social: {
         github: 'https://github.com/strombraaten/climatecode',

src/components/Footer.astro

@@ -0,0 +1,53 @@
+---
+import Default from '@astrojs/starlight/components/Footer.astro';
+import type { Props } from '@astrojs/starlight/props';
+---
+
+<Default {...Astro.props}>
+  <slot />
+</Default>
+
+<div id="wcb" class="carbonbadge wcb-d"></div>
+<script
+  is:inline
+  src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js"
+  defer></script>
+
+<style>
+  .carbonbadge {
+    display: flex;
+    justify-self: start;
+  }
+</style>
+
+<script is:inline>
+  window.StarlightThemeProvider = (() => {
+    const storedTheme =
+      typeof localStorage !== 'undefined' &&
+      localStorage.getItem('starlight-theme');
+    const theme =
+      storedTheme ||
+      (window.matchMedia('(prefers-color-scheme: light)').matches
+        ? 'light'
+        : 'dark');
+    document.documentElement.dataset.theme =
+      theme === 'light' ? 'light' : 'dark';
+
+    // Remove 'wcb-d' class if theme is light
+    const carbonBadge = document.getElementById('wcb');
+    if (theme === 'light') {
+      carbonBadge.classList.remove('wcb-d');
+    }
+
+    return {
+      updatePickers(theme = storedTheme || 'auto') {
+        document
+          .querySelectorAll('starlight-theme-select')
+          .forEach((picker) => {
+            const select = picker.querySelector('select');
+            if (select) select.value = theme;
+          });
+      },
+    };
+  })();
+</script>

src/content/docs/en/guides/images.md

@@ -29,6 +29,7 @@ Use modern formats like WebP for better compression and reduced data transfer:
 Use tools like cwebp or online converters to convert existing images to WebP format.
 
 ### Implement Lazy Loading for Images
+
 Lazy loading only loads images when they become visible in the viewport:
 
 <img src="image.jpg" loading="lazy" alt="Description" />

src/content/docs/nb/hosting/content-delivery-network.mdx

@@ -8,5 +8,9 @@ import { Aside } from '@astrojs/starlight/components';
 Content Delivery Network, eller CDN som det gjerne kalles, er en tjeneste som gjør at du kan levere innhold til brukerne med høy hastighet og stor pålitelighet. Spesielt nyttig i tilfeller hvor du har mange brukere som trenger tilgang til innholdet på samme tid, eller fra ulike deler av verden.
 
 <Aside type="note" title="Forklar det som om jeg var 5 år gammel">
-  Du kan se på et Content Delivery Network som en bokhandel. Du kan kjøpe samme bok i små og store byer over hele verden, og være sikker på at du får nøyaktig det samme innholdet i boka. På samme måte kan brukerne dine få tilgang til innholdet på nettsiden din fra servere som er nær dem. Noe som gjør selve leveringen av informasjon raskere og mer pålitelig.
+  Du kan se på et Content Delivery Network som en bokhandel. Du kan kjøpe samme
+  bok i små og store byer over hele verden, og være sikker på at du får nøyaktig
+  det samme innholdet i boka. På samme måte kan brukerne dine få tilgang til
+  innholdet på nettsiden din fra servere som er nær dem. Noe som gjør selve
+  leveringen av informasjon raskere og mer pålitelig.
 </Aside>

src/content/i18n/nb-NO.json

@@ -1,42 +1,42 @@
 {
-    "skipLink.label": "Hopp til innhold",
-    "search.label": "Søk",
-    "search.ctrlKey": "Ctrl",
-    "search.cancelLabel": "Avbryt",
-    "search.devWarning": "Search is only available in production builds. \nTry building and previewing the site to test it out locally.",
-    "themeSelect.accessibleLabel": "Velg utseende",
-    "themeSelect.dark": "Mørk",
-    "themeSelect.light": "Lys",
-    "themeSelect.auto": "Auto",
-    "languageSelect.accessibleLabel": "Velg språk",
-    "menuButton.accessibleLabel": "Meny",
-    "sidebarNav.accessibleLabel": "Main",
-    "tableOfContents.onThisPage": "På denne siden",
-    "tableOfContents.overview": "Oversikt",
-    "i18n.untranslatedContent": "Dette innholdet er ikke tilgjengelig på ditt språk ennå.",
-    "page.editLink": "Rediger siden",
-    "page.lastUpdated": "Sist oppdatert:",
-    "page.previousLink": "Forrige",
-    "page.nextLink": "Neste",
-    "page.draft": "Dette innholdet er et utkast og blir ikke inkludert i produksjonsbyggingen.",
-    "404.text": "Ai! Den siden fant jeg ikke dessverre, men slapp av, det er ikke du som har gjort noe feil, bare vi som har litt rusk i maskineriet.",
-    "aside.note": "Note",
-    "aside.tip": "Tip",
-    "aside.caution": "Caution",
-    "aside.danger": "Danger",
-    "fileTree.directory": "Mappe",
-    "builtWithStarlight.label": "Bygget med Astro, på Starlight-fundamentet",
-    "expressiveCode.copyButtonCopied": "Kopiert!",
-    "expressiveCode.copyButtonTooltip": "Kopier til utklippstavle",
-    "expressiveCode.terminalWindowFallbackTitle": "Terminalen",
-    "pagefind.clear_search": "Tøm",
-    "pagefind.load_more": "Last inn flere resultater",
-    "pagefind.search_label": "Søk på denne nettsiden",
-    "pagefind.filters_label": "Filtre",
-    "pagefind.zero_results": "Ingen resultater for [SEARCH_TERM]",
-    "pagefind.many_results": "[COUNT] resultater for [SEARCH_TERM]",
-    "pagefind.one_result": "[COUNT] resultat for [SEARCH_TERM]",
-    "pagefind.alt_search": "Ingen resultater for [SEARCH_TERM]. Viser resultater for [DIFFERENT_TERM] i stedet",
-    "pagefind.search_suggestion": "Ingen resultater for [SEARCH_TERM]. Prøv et av følgende søk i stedet:",
-    "pagefind.searching": "Søker etter [SEARCH_TERM]..."
+  "skipLink.label": "Hopp til innhold",
+  "search.label": "Søk",
+  "search.ctrlKey": "Ctrl",
+  "search.cancelLabel": "Avbryt",
+  "search.devWarning": "Search is only available in production builds. \nTry building and previewing the site to test it out locally.",
+  "themeSelect.accessibleLabel": "Velg utseende",
+  "themeSelect.dark": "Mørk",
+  "themeSelect.light": "Lys",
+  "themeSelect.auto": "Auto",
+  "languageSelect.accessibleLabel": "Velg språk",
+  "menuButton.accessibleLabel": "Meny",
+  "sidebarNav.accessibleLabel": "Main",
+  "tableOfContents.onThisPage": "På denne siden",
+  "tableOfContents.overview": "Oversikt",
+  "i18n.untranslatedContent": "Dette innholdet er ikke tilgjengelig på ditt språk ennå.",
+  "page.editLink": "Rediger siden",
+  "page.lastUpdated": "Sist oppdatert:",
+  "page.previousLink": "Forrige",
+  "page.nextLink": "Neste",
+  "page.draft": "Dette innholdet er et utkast og blir ikke inkludert i produksjonsbyggingen.",
+  "404.text": "Ai! Den siden fant jeg ikke dessverre, men slapp av, det er ikke du som har gjort noe feil, bare vi som har litt rusk i maskineriet.",
+  "aside.note": "Note",
+  "aside.tip": "Tip",
+  "aside.caution": "Caution",
+  "aside.danger": "Danger",
+  "fileTree.directory": "Mappe",
+  "builtWithStarlight.label": "Bygget med Astro, på Starlight-fundamentet",
+  "expressiveCode.copyButtonCopied": "Kopiert!",
+  "expressiveCode.copyButtonTooltip": "Kopier til utklippstavle",
+  "expressiveCode.terminalWindowFallbackTitle": "Terminalen",
+  "pagefind.clear_search": "Tøm",
+  "pagefind.load_more": "Last inn flere resultater",
+  "pagefind.search_label": "Søk på denne nettsiden",
+  "pagefind.filters_label": "Filtre",
+  "pagefind.zero_results": "Ingen resultater for [SEARCH_TERM]",
+  "pagefind.many_results": "[COUNT] resultater for [SEARCH_TERM]",
+  "pagefind.one_result": "[COUNT] resultat for [SEARCH_TERM]",
+  "pagefind.alt_search": "Ingen resultater for [SEARCH_TERM]. Viser resultater for [DIFFERENT_TERM] i stedet",
+  "pagefind.search_suggestion": "Ingen resultater for [SEARCH_TERM]. Prøv et av følgende søk i stedet:",
+  "pagefind.searching": "Søker etter [SEARCH_TERM]..."
 }

src/utils/documents.ts

@@ -0,0 +1,35 @@
+import fs from 'fs';
+import path from 'path';
+
+const folderPath = 'src/content/docs/guides/';
+const absolutePath = path.join(process.cwd(), folderPath);
+
+type FileObject = {
+  label: string;
+  slug: string;
+};
+
+export function getFilesInGuidesFolder(): FileObject[] {
+  const fileNames: FileObject[] = [];
+
+  // Read the contents of the folder
+  const files = fs.readdirSync(absolutePath);
+
+  // Iterate over each file
+  files.forEach((file) => {
+    // Get the full path of the file
+    const filePath = `${absolutePath}/${file}`;
+
+    // Check if the path points to a file (not a directory)
+    if (fs.statSync(filePath).isFile()) {
+      const fileName = file.replaceAll('.md', '');
+      const fileToPush: FileObject = {
+        label: fileName.replaceAll('-', ' '),
+        slug: 'guides/' + fileName,
+      };
+      fileNames.push(fileToPush);
+    }
+  });
+
+  return fileNames;
+}