Merge pull request #57 from nblackburn/feature/refactor-static-data

Refactor static data
nblackburn · Nov 12, 2022 · 2ac6fa5 · 2ac6fa5
2 parents d89ecc3 + f26e5e0
commit 2ac6fa5
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 91 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@nblackburn/website",
     "private": true,
-    "version": "1.8.2",
+    "version": "1.9.0",
     "scripts": {
         "start": "astro dev",
         "build": "astro build",

diff --git a/src/components/header.vue b/src/components/header.vue
@@ -5,7 +5,7 @@
             <Link href="/">
                 <Logo />
             </Link>
-            <Navbar :links="links" :active-page="activePage" />
+            <Navbar :links="nav" :active-page="activePage" />
         </div>
     </header>
 </template>
@@ -15,21 +15,10 @@ import { defineComponent } from 'vue';
 import * as styles from './header.css';
 import Logo from '@components/logo.vue';
 import Link from '@components/link.vue';
+import { nav } from '@app/src/config/nav';
 import Navbar from '@components/navBar.vue';
 import AccentBar from '@components/accentBar.vue';
 
-export type Link = {
-    id: string;
-    title: string;
-    href: string;
-};
-
-const links: Link[] = [
-    { id: 'home', title: 'Home', href: '/' },
-    { id: 'projects', title: 'Projects', href: '/projects' },
-    { id: 'about', title: 'About', href: '/about' }
-];
-
 export default defineComponent({
     props: {
         activePage: {
@@ -46,7 +35,7 @@ export default defineComponent({
     },
 
     setup() {
-        return { styles, links };
+        return { styles, nav };
     }
 });
 </script>
diff --git a/src/components/socialLinks.vue b/src/components/socialLinks.vue
@@ -13,33 +13,10 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import * as styles from './socialLinks.css';
 import NavLink from '@components/navLink.vue';
-import { defineComponent } from 'vue';
-
-const socialLinks = [
-    { id: 'email', name: 'Email', href: 'mailto:support@nblackburn.uk' },
-    {
-        id: 'github',
-        name: 'GitHub',
-        href: 'https://github.com/nblackburn'
-    },
-    {
-        id: 'dribbble',
-        name: 'Dribbble',
-        href: 'https://dribbble.com/nblackburn'
-    },
-    {
-        id: 'soundcloud',
-        name: 'Soundcloud',
-        href: 'https://soundcloud.com/nblackburn'
-    },
-    {
-        id: 'twitter',
-        name: 'Twitter',
-        href: 'https://twitter.com/imnblackburn'
-    }
-];
+import { socialLinks } from '@config/socialLinks';
 
 export default defineComponent({
     components: {

diff --git a/src/config/nav.ts b/src/config/nav.ts
@@ -0,0 +1,11 @@
+export type NavItem = {
+    id: string;
+    title: string;
+    href: string;
+};
+
+export const nav: NavItem[] = [
+    { id: 'home', title: 'Home', href: '/' },
+    { id: 'projects', title: 'Projects', href: '/projects' },
+    { id: 'about', title: 'About', href: '/about' }
+];
diff --git a/src/config/socialLinks.ts b/src/config/socialLinks.ts
@@ -0,0 +1,29 @@
+export type SocialLink = {
+    id: string;
+    name: string;
+    href: string;
+};
+
+export const socialLinks: SocialLink[] = [
+    { id: 'email', name: 'Email', href: 'mailto:support@nblackburn.uk' },
+    {
+        id: 'github',
+        name: 'GitHub',
+        href: 'https://github.com/nblackburn'
+    },
+    {
+        id: 'dribbble',
+        name: 'Dribbble',
+        href: 'https://dribbble.com/nblackburn'
+    },
+    {
+        id: 'soundcloud',
+        name: 'Soundcloud',
+        href: 'https://soundcloud.com/nblackburn'
+    },
+    {
+        id: 'twitter',
+        name: 'Twitter',
+        href: 'https://twitter.com/imnblackburn'
+    }
+];
diff --git a/src/config/stack.ts b/src/config/stack.ts
@@ -0,0 +1,62 @@
+export enum StackType {
+    MUSIC = 'music',
+    TOOLS = 'tools',
+    DESIGN = 'design',
+    DEVELOPMENT = 'development'
+}
+
+export type StackItem = {
+    title: string;
+    href: string;
+    type: string;
+};
+
+export const stackGroups = [
+    { id: StackType.MUSIC, name: 'Music' },
+    { id: StackType.DEVELOPMENT, name: 'Development' },
+    { id: StackType.DESIGN, name: 'Design' },
+    { id: StackType.TOOLS, name: 'Tools' }
+];
+
+export const stack: StackItem[] = [
+    {
+        title: 'Auturia Keylab 61 Essential',
+        href: 'https://www.arturia.com/products/hybrid-synths/keylab-essential/overview',
+        type: StackType.MUSIC
+    },
+    {
+        title: 'Bitwig Studio',
+        href: 'https://bitwig.com',
+        type: StackType.MUSIC
+    },
+    {
+        title: 'Visual Studio Code',
+        href: 'https://code.visualstudio.com',
+        type: StackType.DEVELOPMENT
+    },
+    {
+        title: 'Fork',
+        href: 'https://git-fork.com',
+        type: StackType.DEVELOPMENT
+    },
+    {
+        title: 'Affinity Designer',
+        href: 'https://affinity.serif.com',
+        type: StackType.DESIGN
+    },
+    {
+        title: 'Figma',
+        href: 'https://figma.com',
+        type: StackType.DESIGN
+    },
+    {
+        title: 'Notion',
+        href: 'https://notion.so',
+        type: StackType.TOOLS
+    },
+    {
+        title: '1Password',
+        href: 'https://1password.com',
+        type: StackType.TOOLS
+    }
+];
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -3,63 +3,14 @@ import rigUrl from '@assets/img/rig.jpg';
 import Story from '@components/story.vue';
 import groupItems from '@utilities/groupItems';
 import { Image } from '@astrojs/image/components';
+import { stack, stackGroups } from '@config/stack';
 import LinkGroups from '@components/linkGroups.vue';
 import SidePanelLayout from '@layouts/sidePanel.astro';
 
-const types = [
-    { id: 'music', name: 'Music' },
-    { id: 'development', name: 'Development' },
-    { id: 'design', name: 'Design' },
-    { id: 'tools', name: 'Tools' }
-];
-
-const links = [
-    {
-        title: 'Auturia Keylab 61 Essential',
-        href: 'https://www.arturia.com/products/hybrid-synths/keylab-essential/overview',
-        type: 'music'
-    },
-    {
-        title: 'Bitwig Studio',
-        href: 'https://bitwig.com',
-        type: 'music'
-    },
-    {
-        title: 'Visual Studio Code',
-        href: 'https://code.visualstudio.com',
-        type: 'development'
-    },
-    {
-        title: 'Fork',
-        href: 'https://git-fork.com',
-        type: 'development'
-    },
-    {
-        title: 'Affinity Designer',
-        href: 'https://affinity.serif.com',
-        type: 'design'
-    },
-    {
-        title: 'Figma',
-        href: 'https://figma.com',
-        type: 'design'
-    },
-    {
-        title: 'Notion',
-        href: 'https://notion.so',
-        type: 'tools'
-    },
-    {
-        title: '1Password',
-        href: 'https://1password.com',
-        type: 'tools'
-    }
-];
-
 const title = 'About';
 const activePage = 'about';
-const groups = groupItems(types, links);
 const subTitle = 'A little bit about myself';
+const groups = groupItems(stackGroups, stack);
 ---
 
 <SidePanelLayout title={title} subTitle={subTitle} activePage={activePage}>

diff --git a/tsconfig.json b/tsconfig.json
@@ -15,6 +15,7 @@
         "jsx": "preserve",
         "paths": {
             "@app/*": ["*"],
+            "@config/*": ["src/config/*"],
             "@styles/*": ["src/styles/*"],
             "@assets/*": ["src/assets/*"],
             "@layouts/*": ["src/layouts/*"],