feat: redesign landing and style of the wiki

astro.config.mjs

@@ -1,118 +1,103 @@
 import starlight from '@astrojs/starlight';
-import tailwind from '@astrojs/tailwind';
 import { defineConfig } from 'astro/config';
 import starlightLinksValidator from 'starlight-links-validator'
 import remarkMath from 'remark-math';
 import rehypeMathjax from 'rehype-mathjax';
-export const locales = {
-  root: {
-    label: 'English',
-    lang: 'en' // lang is required for root locales
-  },
-
-  mi: {
-    label: 'Māori',
-    lang: 'mi'
-  }
-};
-const site = 'https://wiki.tuhuratech.org.nz/';
 
-
-// https://astro.build/config
 export default defineConfig({
-  site,
+  site: 'https://wiki.tuhuratech.org.nz/',
   integrations: [starlight({
     title: 'Wiki',
+    description: 'A collection of guides and resources for learning technology targeted towards rangatahi and kura in Aotearoa',
     logo: {
       light: './src/assets/logo-light.png',
       dark: './src/assets/logo-dark.png',
       replacesTitle: true
     },
-    social: {
-      mastodon: 'https://mastodon.nzoss.nz/@tuhuratech',
-      github: 'https://github.com/Tuhura-Tech/Wiki',
-      discord: 'https://discord.gg/PNxh7cwKfQ'
-    },
+    lastUpdated: true,
     editLink: {
       baseUrl: 'https://github.com/Tuhura-Tech/Wiki/blob/main/'
     },
-    sidebar: [{
-      label: 'Guides',
-      items: [{
-        label: "About our Guides",
-        link: 'guides/about'
-      }, {
-        label: "Javascript",
-        collapsed: true,
-        items: [{
+    social: {
+      mastodon: 'https://mastodon.nzoss.nz/@tuhuratech',
+      discord: 'https://discord.gg/PNxh7cwKfQ',
+      github: 'https://github.com/Tuhura-Tech/Wiki'
+    },
+    customCss: [
+      // Relative path to your custom CSS file
+      './src/styles/custom.css',
+    ],
+    sidebar: [
+      {
+        label: "Python", items: [{
           label: "Setting Up",
-          link: 'guides/javascript/setting-up'
+          link: 'python'
         }, {
-          label: "Creative Coding",
-          collapsed: true,
+          label: "Setting Up",
+          link: 'python/setting-up'
+        }, {
+          label: "Flask",
           autogenerate: {
-            directory: 'guides/javascript/creative-coding'
+            directory: 'python/flask'
           }
         }]
-      },
-      { label: "Python", collapsed: true, autogenerate: { directory: 'guides/python' } },
-      {
-        label: "Git",
-        collapsed: true,
-        autogenerate: {
-          directory: 'guides/git'
-        }
-      }, {
-        label: "Cybersecurity",
-        collapsed: true,
-        autogenerate: {
-          directory: 'guides/cybersecurity'
-        }
       }, {
         label: "Game Design",
-        collapsed: true,
         items: [{
           label: "About",
-          link: 'guides/game-design/about'
+          link: 'game-design/about'
         }, {
           label: "Godot",
           autogenerate: {
-            directory: 'guides/game-design/godot'
+            directory: 'game-design/godot'
           }
         }],
       },
+      {
+        label: "Cybersecurity",
+
+        autogenerate: {
+          directory: 'cybersecurity'
+        }
+      },
       {
         label: "SQL",
-        collapsed: true,
         autogenerate: {
-          directory: 'guides/sql'
+          directory: 'sql'
         }
-      }]
-    }, {
-      label: 'NCEA Resources',
-      items: [{
-        label: "About our Resources",
-        link: 'ncea/about'
       }, {
-        label: "NCEA Level 2",
-        collapsed: true,
+        label: "Javascript",
+        items: [{
+          label: "Setting Up",
+          link: 'javascript/setting-up'
+        }, {
+          label: "Creative Coding",
+          autogenerate: {
+            directory: 'javascript/creative-coding'
+          }
+        }]
+      }, {
+        label: "Git",
         autogenerate: {
-          directory: 'ncea/level-2'
+          directory: 'git'
         }
       }, {
-        label: "NCEA Level 3",
-        collapsed: true,
+        label: "Tūhura Tech Resources",
         autogenerate: {
-          directory: 'ncea/level-3'
+          directory: 'tuhura-tech'
         }
-      }]
-    }, {
-      label: "Tuhura Tech Resources",
-      autogenerate: {
-        directory: 'tuhura-tech'
+      }],
+    locales: {
+      root: {
+        label: 'English',
+        lang: 'en' // lang is required for root locales
+      },
+
+      mi: {
+        label: 'Māori',
+        lang: 'mi'
       }
-    }],
-    locales,
+    },
     favicon: '/images/favicon.svg',
     head: [
       // Add ICO favicon fallback for Safari.
@@ -125,10 +110,10 @@ export default defineConfig({
         }
       }],
     plugins: [starlightLinksValidator()],
-  }), tailwind({
-    // Disable the default base styles:
-    applyBaseStyles: false
-  }),],
+    components: {
+      Hero: './src/components/starlight/Hero.astro',
+    },
+  })],
   markdown: {
     remarkPlugins: [remarkMath],
     rehypePlugins: [rehypeMathjax],
@@ -138,5 +123,4 @@ export default defineConfig({
       entrypoint: 'astro/assets/services/sharp'
     }
   }
-
 });

package.json

@@ -26,5 +26,6 @@
     "hastscript": "9.0.0",
     "rehype": "13.0.1",
     "unist-util-visit": "5.0.0"
-  }
+  },
+  "packageManager": "[email protected]+sha256.9e5f62ce5f2b7d4ceb3c2848f41cf0b33032c24d683c7088b53f62b1885fb246"
 }

src/components/Button.astro

@@ -0,0 +1,62 @@
+---
+import { Icon } from '@astrojs/starlight/components';
+import { z } from 'astro/zod';
+type IconName = Parameters<typeof Icon>[0]['name'];
+
+interface Props {
+	variant: 'primary' | 'secondary' | 'minimal';
+	link: string;
+	icon?: undefined | { type: 'icon'; name: IconName } | { type: 'raw'; html: string };
+}
+
+const propsSchema = z.object({
+	variant: z.enum(['primary', 'secondary', 'minimal']).default('primary'),
+	link: z.string(),
+	icon: z
+		.union([
+			z.object({ type: z.literal('icon'), name: z.custom<IconName>(z.string().parse) }),
+			z.object({ type: z.literal('raw'), html: z.string() }),
+		])
+		.optional(),
+});
+
+const { link, variant, icon } = propsSchema.parse(Astro.props);
+---
+
+<a class:list={['sl-flex action', variant]} href={link}>
+	<slot />
+	{icon?.type === 'icon' && <Icon name={icon.name} size="1.5em" />}
+	{icon?.type === 'raw' && <Fragment set:html={icon.html} />}
+</a>
+
+<style>
+	.action {
+		gap: 0.5em;
+		align-items: center;
+		border-radius: 999rem;
+		padding: 0.5rem 1.125rem;
+		color: var(--sl-color-white);
+		line-height: 1.1875;
+		text-decoration: none;
+		font-size: var(--sl-text-sm);
+	}
+	.action.primary,
+	.action.primary:hover {
+		background: var(--sl-color-text-accent);
+		color: var(--sl-color-black);
+	}
+	.action.secondary {
+		background: var(--sl-color-black);
+		border: 2px solid;
+	}
+	.action.minimal {
+		padding-inline: 0;
+	}
+
+	@media (min-width: 50rem) {
+		.action {
+			font-size: var(--sl-text-base);
+			padding: 1rem 1.25rem;
+		}
+	}
+</style>

src/components/Landing/Card.astro

@@ -0,0 +1,52 @@
+---
+import { Card as StarlightCard } from "@astrojs/starlight/components";
+export type Props = Parameters<typeof StarlightCard>[0];
+---
+
+<div class="landing-card">
+  <StarlightCard {...Astro.props}><slot /></StarlightCard>
+</div>
+
+<style>
+  .landing-card {
+    display: contents;
+    color: var(--sl-color-white);
+  }
+  :global(:root[data-theme="light"]) .landing-card {
+    --card-bg: rgba(255, 255, 255, 0.8);
+  }
+
+  .landing-card :global(.card) {
+    overflow: hidden;
+    background: var(--card-bg);
+    position: relative;
+  }
+
+  .landing-card :global(.card > *) {
+    z-index: 1;
+  }
+  .landing-card :global(.card::before) {
+    content: "";
+    position: absolute;
+    top: 0;
+    inset-inline-end: 0;
+    width: 6.25rem;
+    height: 6.25rem;
+    /* background: var(--landing-card-accent, var(--sl-color-accent)); */
+    border-radius: 100%;
+    filter: blur(3.25rem);
+    opacity: 0.33;
+  }
+
+  /* .landing-card :global(.card) {
+    --sl-card-bg: var(--sl-color-blue-low);
+    --sl-card-border: var(--sl-color-blue-high);
+    --landing-card-accent: hsl(165, 90%, 46%);
+  }
+
+  .landing-card:nth-child(2n) :global(.card) {
+    --sl-card-bg: var(--sl-color-blue-low);
+    --sl-card-border: var(--sl-color-blue-high);
+    --landing-card-accent: var(--sl-color-blue);
+  } */
+</style>

src/components/Landing/ListCard.astro

@@ -0,0 +1,51 @@
+---
+import Card from './Card.astro';
+export type Props = Parameters<typeof Card>[0];
+---
+
+<Card {...Astro.props}>
+	<div class="link-list">
+		<slot />
+	</div>
+</Card>
+
+<style>
+	.link-list :global(ul) {
+		list-style-type: none;
+		padding: 0;
+	}
+
+	.link-list :global(li) {
+		border-bottom: 1px solid var(--sl-color-gray-6);
+		padding: 0.25rem 0;
+		margin: 0 !important;
+	}
+	.link-list :global(li:last-child) {
+		border-bottom: none;
+	}
+
+	.link-list :global(a) {
+		display: flex;
+		gap: 0.5rem;
+		justify-content: space-between;
+		align-items: center;
+		text-decoration: none;
+	}
+
+	/* Add arrow icon to links. */
+	.link-list :global(a::after) {
+		content: '';
+		background-color: currentColor;
+		width: 1rem;
+		height: 1rem;
+		flex-shrink: 0;
+		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z'%3E%3C/path%3E%3C/svg%3E");
+		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z'%3E%3C/path%3E%3C/svg%3E");
+		mask-size: 100%;
+		-webkit-mask-size: 100%;
+	}
+	/* Mirror arrow in RTL layouts */
+	:global([dir='rtl']) .link-list :global(a::after:not(:where([dir='rtl'] [dir='ltr'] *))) {
+		transform: matrix(-1, 0, 0, 1, 0, 0);
+	}
+</style>