Merge pull request #538 from nblackburn/astro-4.11

astro-4.11
nblackburn · Aug 8, 2024 · 44d7aed · 44d7aed · vercel · Aug 8, 2024
2 parents 959f456 + 6eb9484
commit 44d7aed
Show file tree

Hide file tree

Showing 19 changed files with 2,271 additions and 1,210 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@nblackburn/website",
     "private": true,
-    "version": "1.44.0",
+    "version": "1.45.0",
     "type": "module",
     "scripts": {
         "start": "astro dev",
@@ -14,7 +14,7 @@
     },
     "packageManager": "[email protected]",
     "devDependencies": {
-        "@astrojs/check": "^0.5.8",
+        "@astrojs/check": "^0.9.2",
         "@commitlint/cli": "^19.0.3",
         "@commitlint/config-conventional": "^19.0.3",
         "@playwright/test": "^1.42.1",
@@ -33,18 +33,18 @@
         "typescript": "^5.3.3"
     },
     "dependencies": {
-        "@astrojs/rss": "^4.0.5",
-        "@astrojs/sitemap": "^3.1.1",
-        "@astrojs/vercel": "^7.3.6",
-        "@astrojs/vue": "^4.0.8",
+        "@astrojs/rss": "^4.0.7",
+        "@astrojs/sitemap": "^3.1.6",
+        "@astrojs/vercel": "^7.7.2",
+        "@astrojs/vue": "^4.5.0",
         "@fontsource/nunito-sans": "^5.0.12",
         "@vanilla-extract/css": "^1.14.1",
-        "astro": "^4.5.2",
+        "astro": "^4.13.2",
         "date-fns": "^3.3.1",
         "sharp": "^0.33.2",
         "vue": "^3.4.21"
     },
     "resolutions": {
         "deep-object-diff": "^1.1.9"
     }
-}
+}
diff --git a/src/components/button.vue b/src/components/button.vue
@@ -7,8 +7,9 @@
 <script lang="ts" setup>
 import * as styles from './button.css';
 
-defineProps({
-    name: String,
-    disabled: Boolean
-});
+interface Props {
+    disabled?: boolean
+}
+
+defineProps<Props>()
 </script>
diff --git a/src/components/fieldSet.vue b/src/components/fieldSet.vue
@@ -1,9 +1,5 @@
 <template>
-    <fieldset
-        :class="[styles.fieldSet, validated ? styles.validated : '']"
-        :name="name"
-        ref="fieldSet"
-    >
+    <fieldset :class="[styles.fieldSet, validated ? styles.validated : '']" :name="name" ref="fieldSet">
         <slot />
     </fieldset>
 </template>
@@ -13,7 +9,11 @@ import { onMounted, ref } from 'vue';
 import listenOnce from '@utilities/listenOnce';
 import * as styles from '@components/fieldSet.css';
 
-defineProps({ name: String });
+interface Props {
+    name?: string
+}
+
+defineProps<Props>();
 
 const fieldSet = ref();
 const validated = ref(false);

diff --git a/src/components/header.vue b/src/components/header.vue
@@ -3,7 +3,7 @@
         <AccentBar />
         <div :class="styles.container">
             <Link href="/">
-                <Logo />
+            <Logo />
             </Link>
             <Navbar :links="nav" :active-page="activePage" />
         </div>
@@ -18,7 +18,9 @@ import Link from '@components/link.vue';
 import Navbar from '@components/navBar.vue';
 import AccentBar from '@components/accentBar.vue';
 
-defineProps({
-    activePage: String
-});
+interface Props {
+    activePage?: string
+};
+
+defineProps<Props>();
 </script>
diff --git a/src/components/input.vue b/src/components/input.vue
@@ -1,31 +1,23 @@
 <template>
-    <input
-        :type="type"
-        :name="name"
-        :id="id"
-        :required="required"
-        :disabled="disabled"
-        :value="modelValue"
-        :class="[styles.input, validated ? styles.validated : '']"
-        @invalid="onValidated"
-        @valid="onValidated"
-        @input="$emit('update:modelValue', $event?.target?.value)"
-    />
+    <input :type="type" :name="name" :id="id" :required="required" :disabled="disabled" :value="modelValue"
+        :class="[styles.input, validated ? styles.validated : '']" @invalid="onValidated" @valid="onValidated"
+        @input="$emit('update:modelValue', $event?.target?.value)" />
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 import * as styles from './input.css';
 
-defineProps({
-    type: String,
-    name: String,
-    id: String,
-    required: Boolean,
-    disabled: Boolean,
-    modelValue: String
-});
+interface Props {
+    type?: string,
+    name?: string,
+    id?: string,
+    required?: boolean,
+    disabled?: boolean,
+    modelValue?: string
+};
 
+defineProps<Props>();
 defineEmits(['update:modelValue']);
 
 const validated = ref(false);

diff --git a/src/components/link.vue b/src/components/link.vue
@@ -9,16 +9,13 @@ import { computed } from 'vue';
 import config from '@app/config';
 import { isExternalLink, buildRefLink } from '@utilities/refLink';
 
-const props = defineProps({
-    href: {
-        type: String
-    },
-    referrer: {
-        type: String,
-        default() {
-            return config.seo.ref;
-        }
-    }
+interface Props {
+    href?: string,
+    referrer?: string
+};
+
+const props = withDefaults(defineProps<Props>(), {
+    referrer: config.seo.ref
 });
 
 const isExternal = isExternalLink(props.href);

diff --git a/src/components/linkGroups.vue b/src/components/linkGroups.vue
@@ -1,31 +1,14 @@
 <template>
     <div :class="styles.linkGroups">
-        <section
-            v-for="group in groups"
-            :key="group.id"
-            :class="styles.linkGroup"
-        >
+        <section v-for="group in groups" :key="group.id" :class="styles.linkGroup">
             <h3 :class="styles.heading">{{ group.name }}</h3>
             <ol :class="styles.items">
-                <li
-                    v-for="item in group.items"
-                    :key="item.id"
-                    :class="styles.item"
-                >
-                    <Link
-                        :href="item.href"
-                        :class="styles.link"
-                        :aria-label="item.title + ' (External link)'"
-                    >
-                        <svg
-                            width="24"
-                            height="24"
-                            role="img"
-                            :class="styles.icon"
-                        >
-                            <use href="#external" />
-                        </svg>
-                        <span>{{ item.title }}</span>
+                <li v-for="item in group.items" :key="item.id" :class="styles.item">
+                    <Link :href="item.href" :class="styles.link" :aria-label="item.title + ' (External link)'">
+                    <svg width="24" height="24" role="img" :class="styles.icon">
+                        <use href="#external" />
+                    </svg>
+                    <span>{{ item.title }}</span>
                     </Link>
                 </li>
             </ol>
@@ -34,28 +17,19 @@
 </template>
 
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import Link from '@components/link.vue';
 import * as styles from './linkGroups.css';
+import { Group } from '@utilities/groupItems';
 
 type Item = {
     id: string;
     href: string;
     title: string;
 };
 
-type Group = {
-    id: string;
-    name: string;
-    items: Item[];
+interface Props {
+    groups?: Group[]
 };
 
-defineProps({
-    groups: {
-        type: Array as PropType<Group[]>,
-        default() {
-            return [];
-        }
-    }
-});
+defineProps<Props>();
 </script>
diff --git a/src/components/logo.vue b/src/components/logo.vue
@@ -1,44 +1,25 @@
 <template>
-    <svg
-        :width="size"
-        :height="size"
-        role="img"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 128 128"
-    >
+    <svg :width="size" :height="size" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
         <title>Logo</title>
-        <ellipse
-            cx="22.831"
-            cy="105.296"
-            rx="10.031"
-            ry="9.904"
-            :fill="`rgb(${secondaryAccent})`"
-        />
+        <ellipse cx="22.831" cy="105.296" rx="10.031" ry="9.904" :fill="`rgb(${secondaryAccent})`" />
         <path
             d="M12.8,22.704c0,-5.466 4.495,-9.904 10.031,-9.904c2.769,-0 5.276,1.109 7.092,2.902l0.002,-0.001l31.381,30.983l-0.005,0.006c1.674,1.77 2.699,4.146 2.699,6.756c0,5.467 -4.495,9.905 -10.031,9.905c-2.645,-0 -5.051,-1.013 -6.844,-2.666l-0.005,0.006l-14.257,-14.076l-0,14.076c-0,5.466 -4.495,9.904 -10.032,9.904c-5.536,0 -10.031,-4.438 -10.031,-9.904l0,-37.987Z"
-            :fill="`rgb(${primaryAccent})`"
-        />
-        <ellipse
-            cx="105.169"
-            cy="22.704"
-            rx="10.031"
-            ry="9.904"
-            :fill="`rgb(${primaryAccent})`"
-        />
+            :fill="`rgb(${primaryAccent})`" />
+        <ellipse cx="105.169" cy="22.704" rx="10.031" ry="9.904" :fill="`rgb(${primaryAccent})`" />
         <path
             d="M95.137,67.309c0,-5.466 4.495,-9.904 10.032,-9.904c5.536,-0 10.031,4.438 10.031,9.904l0,37.987c0,5.466 -4.495,9.904 -10.031,9.904c-2.769,0 -5.276,-1.109 -7.092,-2.902l-0.002,0.001l-31.381,-30.983l0.005,-0.006c-1.674,-1.77 -2.699,-4.146 -2.699,-6.756c-0,-5.467 4.495,-9.905 10.031,-9.905c2.645,0 5.051,1.013 6.844,2.666l0.005,-0.006l14.257,14.076l0,-14.076Z"
-            :fill="`rgb(${secondaryAccent})`"
-        />
+            :fill="`rgb(${secondaryAccent})`" />
     </svg>
 </template>
 
 <script lang="ts" setup>
 import { primaryAccent, secondaryAccent } from '@styles/theme.css';
 
-defineProps({
-    size: {
-        type: Number,
-        default: 48
-    }
+interface Props {
+    size?: number
+};
+
+withDefaults(defineProps<Props>(), {
+    size: 48
 });
 </script>
diff --git a/src/components/navBar.vue b/src/components/navBar.vue
@@ -2,35 +2,25 @@
     <nav :class="styles.navBar">
         <ol :class="styles.items">
             <li v-for="link in links" :class="styles.item">
-                <NavLink
-                    :href="link.href"
-                    :key="link.id"
-                    :active="isActive(link)"
-                    :aria-current="isActive(link) ? 'page' : false"
-                    secondary
-                    >{{ link.title }}</NavLink
-                >
+                <NavLink :href="link.href" :key="link.id" :active="isActive(link)"
+                    :aria-current="isActive(link) ? 'page' : false" secondary>{{ link.title }}</NavLink>
             </li>
         </ol>
     </nav>
 </template>
 
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import * as styles from './navBar.css';
 import type { NavItem } from '@config/nav';
 import NavLink from '@components/navLink.vue';
 
-const props = defineProps({
-    activePage: {
-        type: String
-    },
-    links: {
-        type: Array as PropType<NavItem[]>,
-        default() {
-            return [];
-        }
-    }
+interface Props {
+    activePage?: string,
+    links: NavItem[]
+};
+
+const props = withDefaults(defineProps<Props>(), {
+    links: () => []
 });
 
 const isActive = (link: NavItem) => {

diff --git a/src/components/navLink.vue b/src/components/navLink.vue
@@ -1,27 +1,31 @@
 <template>
-    <Link
-        :class="[
-            styles.navLink,
-            icon ? styles.icon : '',
-            active ? styles.active : '',
-            disabled ? styles.disabled : '',
-            secondary ? styles.secondary : styles.primary
-        ]"
-        :href="href"
-    >
-        <slot />
+    <Link :class="[
+        styles.navLink,
+        icon ? styles.icon : '',
+        active ? styles.active : '',
+        disabled ? styles.disabled : '',
+        secondary ? styles.secondary : styles.primary
+    ]" :href="href">
+    <slot />
     </Link>
 </template>
 
 <script lang="ts" setup>
 import * as styles from './navLink.css';
 import Link from '@components/link.vue';
 
-defineProps({
-    href: String,
-    icon: Boolean,
-    active: Boolean,
-    disabled: Boolean,
-    secondary: Boolean
+interface Props {
+    href?: string,
+    icon?: boolean,
+    active?: boolean,
+    disabled?: boolean,
+    secondary?: boolean
+};
+
+withDefaults(defineProps<Props>(), {
+    icon: false,
+    active: false,
+    disabled: false,
+    secondary: false
 });
 </script>