Add pagination override (footer basically)

Author: Fernando-A-Rocha

web/astro.config.mjs

@@ -14,6 +14,10 @@ export default defineConfig({
 				light: './src/assets/logo-black.png',
 				dark: './src/assets/logo-white.png',
 			},
+			components: {
+				// Override some default components
+				Pagination: './src/overrides/Pagination.astro',
+			},
 			sidebar: [
 				{
 					label: 'Start here',

web/src/components/IconLinkCard.astro

@@ -0,0 +1,91 @@
+---
+// Source: https://github.com/withastro/starlight/blob/a3183597b740c19f95757ecd81fb8c99f87e2ca8/packages/starlight/user-components/LinkCard.astro
+// MIT License, Copyright (c) 2023 Astro contributors
+import type { HTMLAttributes } from 'astro/types';
+import { Icon } from '@astrojs/starlight/components';
+
+type IconProps = Parameters<typeof Icon>[0];
+type StarlightIcon = IconProps['name'];
+
+interface Props extends Omit<HTMLAttributes<'a'>, 'title'> {
+    title: string;
+    description?: string;
+    icon?: StarlightIcon;
+}
+
+const { title, description, icon, target = Astro.props.target || '_blank', ...attributes } = Astro.props;
+---
+
+<div class="sl-link-card">
+    <span class="sl-flex stack">
+        <div class="inline-flex">
+            {icon && <Icon name={icon} size="1.333em" class="icon" />}
+            <a {...attributes}>
+                <span class="title" set:html={title} />
+            </a>
+        </div>
+        {description && <span class="description" set:html={description} />}
+    </span>
+    <Icon name="right-arrow" size="1.333em" class="icon rtl:flip" />
+</div>
+
+<style>
+    .sl-link-card {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: 0.5rem;
+        border: 1px solid var(--sl-color-gray-5);
+        border-radius: 0.5rem;
+        padding: 1rem;
+        box-shadow: var(--sl-shadow-sm);
+        position: relative;
+    }
+
+    a {
+        text-decoration: none;
+        line-height: var(--sl-line-height-headings);
+    }
+
+    /* a11y fix for https://github.com/withastro/starlight/issues/487 */
+    a::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+    }
+
+    .stack {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .inline-flex {
+        display: inline-flex;
+        gap: 1rem;
+    }
+
+    .title {
+        color: var(--sl-color-white);
+        font-weight: 600;
+        font-size: var(--sl-text-lg);
+    }
+
+    .description {
+        color: var(--sl-color-gray-3);
+        line-height: 1.5;
+    }
+
+    .icon {
+        color: var(--sl-color-gray-3);
+        min-width: 1em;
+    }
+
+    /* Hover state */
+    .sl-link-card:hover {
+        background: var(--sl-color-gray-7, var(--sl-color-gray-6));
+        border-color: var(--sl-color-gray-2);
+    }
+
+    .sl-link-card:hover .icon {
+        color: var(--sl-color-white);
+    }
+</style>

web/src/overrides/Pagination.astro

@@ -0,0 +1,18 @@
+---
+import { CardGrid } from '@astrojs/starlight/components';
+import IconLinkCard from '@src/components/IconLinkCard.astro';
+---
+
+<CardGrid>
+    <IconLinkCard
+        icon="discord" 
+        title="Discord"
+        description="Ask questions and chat live with the community."
+        href="https://discord.com/invite/mtasa" />
+    
+    <IconLinkCard
+        icon="gitter"
+        title="Forum"
+        description="Engage with the community in the old-fashioned way."
+        href="https://forum.multitheftauto.com/" />
+</CardGrid>

web/tsconfig.json

@@ -1,5 +1,12 @@
 {
   "extends": "astro/tsconfigs/strict",
   "include": [".astro/types.d.ts", "**/*"],
-  "exclude": ["dist"]
+  "exclude": ["dist"],
+  "compilerOptions": {
+      "baseUrl": "src",
+      "strictNullChecks": true,
+      "paths": {
+        "@src/*": ["*"],
+      }
+    }
 }