Merge pull request #41 from nblackburn/feature/refactor-components

Refactor components

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@nblackburn/website",
     "private": true,
-    "version": "1.7.3",
+    "version": "1.7.4",
     "scripts": {
         "start": "astro dev",
         "build": "astro build",

src/components/about.vue

@@ -27,15 +27,16 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import * as styles from './about.css';
 import NavLink from '@components/navLink.vue';
 import SocialLinks from '@components/socialLinks.vue';
 
-export default {
+export default defineComponent({
     components: { SocialLinks, NavLink },
 
     setup() {
         return { styles };
     }
-};
+});
 </script>

src/components/dynamicPalette.vue

@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import { onMounted } from 'vue';
+import { onMounted, defineComponent } from 'vue';
 import { getActivePalette, applyPalette } from '@utilities/paletteManager';
 
-export default {
+export default defineComponent({
     setup() {
         onMounted(() => {
             const bodyElement = document.body;
@@ -15,5 +15,5 @@ export default {
             applyPalette(activePalette, bodyElement);
         });
     }
-};
+});
 </script>

src/components/link.vue

@@ -1,8 +1,8 @@
 <script lang="ts">
-import { h } from 'vue';
+import { h, defineComponent } from 'vue';
 import { isExternalLink, buildRefLink } from '@utilities/refLink';
 
-export default {
+export default defineComponent({
     props: {
         href: {
             type: String
@@ -32,5 +32,5 @@ export default {
                 slots.default()
             );
     }
-};
+});
 </script>

src/components/linkGroups.vue

@@ -26,9 +26,9 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue';
 import Link from '@components/link.vue';
 import * as styles from './linkGroups.css';
+import { defineComponent, PropType } from 'vue';
 
 type Item = {
     id: string;
@@ -42,7 +42,7 @@ type Group = {
     items: Item[];
 };
 
-export default {
+export default defineComponent({
     components: {
         Link
     },
@@ -59,5 +59,5 @@ export default {
     setup() {
         return { styles };
     }
-};
+});
 </script>

src/components/navLink.vue

@@ -13,10 +13,11 @@
 </template>
 
 <script lang="ts">
-import Link from '@components/link.vue';
+import { defineComponent } from 'vue';
 import * as styles from './navLink.css';
+import Link from '@components/link.vue';
 
-export default {
+export default defineComponent({
     components: {
         Link
     },
@@ -42,5 +43,5 @@ export default {
     setup() {
         return { styles };
     }
-};
+});
 </script>

src/components/notFound.vue

@@ -12,11 +12,12 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import * as styles from './notFound.css';
 
-export default {
+export default defineComponent({
     setup() {
         return { styles };
     }
-};
+});
 </script>

src/components/pageHeader.vue

@@ -6,9 +6,10 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import * as styles from './pageHeader.css';
 
-export default {
+export default defineComponent({
     props: {
         title: {
             type: String
@@ -22,5 +23,5 @@ export default {
     setup() {
         return { styles };
     }
-};
+});
 </script>

src/components/projectCard.vue

@@ -31,10 +31,10 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue';
 import Link from '@components/link.vue';
 import * as styles from './projectCard.css';
 import { format, parseISO } from 'date-fns';
+import { defineComponent, PropType } from 'vue';
 
 export type Project = {
     url: string;
@@ -45,7 +45,7 @@ export type Project = {
     publishedDate: string;
 };
 
-export default {
+export default defineComponent({
     components: {
         Link
     },
@@ -68,5 +68,5 @@ export default {
 
         return { styles, publishDate };
     }
-};
+});
 </script>

src/components/projectList.vue

@@ -5,11 +5,12 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import * as styles from './projectList.css';
 
-export default {
+export default defineComponent({
     setup() {
         return { styles };
     }
-};
+});
 </script>

src/components/socialLinks.vue

@@ -15,6 +15,7 @@
 <script lang="ts">
 import * as styles from './socialLinks.css';
 import NavLink from '@components/navLink.vue';
+import { defineComponent } from 'vue';
 
 const socialLinks = [
     { id: 'email', name: 'Email', href: 'mailto:[email protected]' },
@@ -40,14 +41,13 @@ const socialLinks = [
     }
 ];
 
-export default {
+export default defineComponent({
     components: {
         NavLink
     },
 
     setup() {
         return { styles, socialLinks };
     }
-};
+});
 </script>
-,

src/components/story.vue

@@ -30,11 +30,12 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import * as styles from './story.css';
 
-export default {
+export default defineComponent({
     setup() {
         return { styles };
     }
-};
+});
 </script>