feat: constants; update deps

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@example/basics",
+  "name": "@ayco/personal-website",
   "type": "module",
   "version": "0.0.1",
   "private": true,
@@ -12,10 +12,10 @@
     "deploy": "astro build && scp -r dist/. ayo@ayco.io:~/ayco.io-astro/dist"
   },
   "dependencies": {
-    "@astro-reactive/form": "^0.8.1",
+    "@astro-reactive/form": "^0.9.0",
-    "@astro-reactive/validator": "^0.3.4",
+    "@astro-reactive/validator": "^0.4.0",
-    "astro": "^2.5.5",
+    "astro": "^3.1.4",
-    "astro-github-stats": "^0.5.0",
+    "astro-github-stats": "^0.6.0",
-    "astro-icon": "^0.8.0"
+    "astro-iconify": "^1.2.0"
   }
 }

src/components/Nav.astro

@@ -1,11 +1,6 @@
 ---
-import Icon from "astro-icon";
+import Icon from "astro-iconify";
-export type Link = {
+import type { Link } from "../constants/links";
-  url: string;
-  icon: string;
-  set?: string;
-  text?: string;
-};
 
 export interface Props {
   links: Array<Link>;
@@ -14,26 +9,29 @@ export interface Props {
 let { links } = Astro.props;
 
 if (Astro.url.pathname !== "/") {
-  links = [{
+  links = [
-    url: "/",
+    {
-    icon: "home",
+      url: "/",
-  }].concat(links);
+      icon: "home",
+    },
+  ].concat(links);
 }
 ---
 
-  <nav>
+<nav>
-    <div id="wrapper">
+  <div id="wrapper">
-      {
+    {
-        links
+      links
-          .filter((link) => link.url !== "")
+        .filter((link) => link.url !== "")
-          .map((link) => (
+        .map((link) => (
-            <a href={link.url}>
+          <a href={link.url}>
-              <Icon pack={link.set ?? "mdi"} name={link.icon} /> {link.text ?? link.icon}
+            <Icon pack={link.set ?? "mdi"} name={link.icon} />{" "}
-            </a>
+            {link.text ?? link.icon}
-          ))
+          </a>
-      }
+        ))
-    </div>
+    }
-  </nav>
+  </div>
+</nav>
 
 <style>
   nav {
@@ -64,11 +62,11 @@ if (Astro.url.pathname !== "/") {
   }
 
   @media only screen and (max-device-width: 360px) {
-    #wrapper { text-align: center; }
+    #wrapper {
+      text-align: center;
+    }
     nav a {
       padding: 0.5em;
     }
   }
-
-
 </style>

src/constants/links.ts

@@ -0,0 +1,30 @@
+export type Link = {
+  url: string;
+  icon: string;
+  set?: string;
+  text?: string;
+};
+
+
+const links: Link[] = [
+  {
+    url: "https://ayos.blog",
+    icon: "blog",
+  },
+  {
+    url: "https://ayco.io/@ayo",
+    icon: "mastodon",
+    text: "social"
+  },
+  {
+    url: "https://ayco.io/gh/",
+    icon: "github",
+  },
+  {
+    url: "https://www.npmjs.com/~aayco",
+    icon: "npm",
+    set: "gg"
+  }
+];
+
+export default links;

src/layouts/Layout.astro

@@ -2,14 +2,13 @@
 import "./reset.css";
 import Head from "../components/Head.astro";
 import Nav from "../components/Nav.astro";
-import type { Link } from "../components/Nav.astro";
+import links from "../constants/links";
 export interface Props {
   title?: string;
   description?: string;
-  links?: Link[];
 }
 
-const { links = [], title, description } = Astro.props;
+const { title, description } = Astro.props;
 
 ---
 

src/pages/index.astro

@@ -2,41 +2,19 @@
 import Layout from "../layouts/Layout.astro";
 import Card from "../components/Card.astro";
 import Footer from "../components/Footer.astro";
-import type { Link } from "../components/Nav.astro";
 
-const response = await fetch('https://social.ayco.io/api/v1/accounts/109547735999980313')
+const response = await fetch(
-let {
+  "https://social.ayco.io/api/v1/accounts/109547735999980313"
-  display_name,
+);
-  avatar,
+let { display_name, avatar, note } = await response.json();
-  note
-} =  await response.json();
 
-const [first_name, last_name] = display_name.split(' ')
+const [first_name, last_name] = display_name.split(" ");
-note = note.replace('<span class="">ayco.io/gh/', '<span class="">').replace('<span class="">ayco.io/sh/', '<span class="">')
+note = note
-
+  .replace('<span class="">ayco.io/gh/', '<span class="">')
-const links: Link[] = [
+  .replace('<span class="">ayco.io/sh/', '<span class="">');
-  {
-    url: "https://ayos.blog",
-    icon: "blog",
-  },
-  {
-    url: "https://ayco.io/@ayo",
-    icon: "mastodon",
-    text: "social"
-  },
-  {
-    url: "https://ayco.io/gh/",
-    icon: "github",
-  },
-  {
-    url: "https://www.npmjs.com/~aayco",
-    icon: "npm",
-    set: "gg"
-  }
-];
 ---
 
-<Layout links={links}>
+<Layout>
   <section class="highlighted-section">
     <div class="highlighted-section__content">
       <img
@@ -52,7 +30,9 @@ const links: Link[] = [
         <div class="highlighted__note" set:html={note} />
         <a href="/now" class="now-wrapper">
           <span class="now-label">Now</span>
-          <span class="status">Certified Software Architecture Professional</span>
+          <span class="status"
+            >Certified Software Architecture Professional</span
+          >
         </a>
       </div>
     </div>
@@ -229,4 +209,4 @@ const links: Link[] = [
     color: white;
     font-weight: normal;
   }
-</style>
+</style>