Merge branch 'main' into add-hubsport-script-loader

Author: maartenba

.github/workflows/ci.yml

@@ -14,6 +14,9 @@ jobs:
     env: 
       AZURE_STATIC_WEB_APPS_API_TOKEN_HAPPY_OCEAN_048B8E60F: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_HAPPY_OCEAN_048B8E60F }}
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
     name: Build and Deploy Job
     steps:
       - uses: actions/checkout@v2
@@ -46,6 +49,10 @@ jobs:
     env: 
       AZURE_STATIC_WEB_APPS_API_TOKEN_HAPPY_OCEAN_048B8E60F: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_HAPPY_OCEAN_048B8E60F }}
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+      issues: write
     name: Close Pull Request Job
     steps:
       - name: Close Pull Request

.github/workflows/link-checker.yml

@@ -15,6 +15,10 @@ on:
 jobs:
   link_checker_job:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+      issues: write
     name: Link Checker Job
     steps:
       - uses: actions/checkout@v2

astro.config.mjs

@@ -1,5 +1,5 @@
 // @ts-check
-import { defineConfig } from "astro/config";
+import { defineConfig, fontProviders } from "astro/config";
 import starlight from "@astrojs/starlight";
 import starlightLinksValidator from "starlight-links-validator";
 import starlightClientMermaid from "@pasqal-io/starlight-client-mermaid";
@@ -18,6 +18,18 @@ export default defineConfig({
   site: "https://docs.duendesoftware.com",
   trailingSlash: "ignore",
   redirects: {},
+  experimental: {
+    fonts: [
+      {
+        provider: fontProviders.google(),
+        name: "Roboto",
+        cssVariable: "--font-roboto",
+        weights: ["100 900", "bold"],
+        styles: ["normal", "italic"],
+        display: "swap",
+      },
+    ],
+  },
   integrations: [
     starlight({
       customCss: ["./src/styles/custom.css"],

src/components/Head.astro

@@ -1,10 +1,12 @@
 ---
 import { getImagePath } from "astro-opengraph-images";
+import { Font } from "astro:assets";
 
 const { head } = Astro.locals.starlightRoute;
 const { url, site } = Astro;
 const openGraphImageUrl = getImagePath({ url, site });
 ---
 
 {head.map(({ tag: Tag, attrs, content }) => <Tag {...attrs} set:html={content} />)}
-{openGraphImageUrl && (<meta property="og:image" content={openGraphImageUrl} />)}
+{openGraphImageUrl && (<meta property="og:image" content={openGraphImageUrl} />)}
+<Font cssVariable="--font-roboto" preload />

src/styles/custom.css

@@ -1,9 +1,8 @@
-/* Font */
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
-
 /* Dark mode colors. */
 :root {
-    --sl-font: 'Roboto';
+    /* coming from Astro Font support. See astro.config.mjs */
+    /*noinspection CssUnresolvedCustomProperty*/
+    --sl-font: var(--font-roboto);
     --sl-color-accent-low: #43257c;
     --sl-color-accent: #6e45af;
     --sl-color-accent-high: #916bdb;