Revert "feat: update link colors to #2178DD"

.github/workflows/worfklow.yml

@@ -0,0 +1,44 @@
+name: Build and Deploy
+on: [push]
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+
+      - name: Cache  💾
+        uses: actions/cache@v2
+        with:
+          path: ${{ github.workspace }}/.next/cache
+          key: ${{ runner.os }}-nextjs-v3-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Install and Build 🔧
+        uses: actions/setup-node@v1
+        with:
+          node-version: '12'
+      - run: npm install
+      - run: npm run build
+      - run: node ./scripts/generate-sitemap.js
+        env:
+            CI: false
+
+      - name: Update Sitemap 🕸
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          ref: ${{ github.head_ref }}
+          file_pattern: 'public/sitemap.xml'
+          commit_message: Auto-updating the Sitemap!
+
+      - name: Deploy 🚀
+        if: github.ref == 'refs/heads/main'
+        uses: JamesIves/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages  # The branch the action should deploy to.
+          FOLDER: out       # The folder the action should deploy.
+          CLEAN: true       # Automatically remove deleted files from the deploy branch

components/common/Bio/Bio.js

@@ -1,34 +1,33 @@
 import clsx from "clsx";
-import Link from 'next/link';
-import Image from 'next/image';
+import Link from 'next/link'
+
+import { Image } from "..";
 import { getSiteMetaData } from "@utils/helpers";
 
 export function Bio({ className }) {
   const { author, social } = getSiteMetaData();
 
   return (
-    <section style={{fontSize: '1.2rem', lineHeight: 1.5, textAlign: 'justify'}}>
-      <div className={clsx(`flex items-center`, className)}>
-        <Image
-          src="/profile.png"
-          width={96}
-          height={96}
-          style={{borderRadius: '9999px'}}
-          alt="Francisco Javier Arceo"
-          priority={true}
-          unoptimized={true}
-        />
-        <h2 style={{fontSize: '2.0rem', marginLeft: '2rem', textAlign: 'center'}}>Hello there! &#128075;</h2>
-      </div>
-      <div style={{paddingBottom: 20}}>
-        <p>I'm{' '}<Link href="/about-me" className="text-link-blue">Francisco</Link> and this is my blog. 
-          You can find some of my other writing on{' '}<a href="https://chaosengineering.substack.com/" className="text-link-blue">the Chaos Engineering blog</a>.
+    <>
+    <section style={{fontSize: '1.2rem', lineHeight: 1.5,textAlign: 'justify'}}>
+    <div className={clsx(`flex items-center`, className)}>
+    <img
+      src={require("../../../content/assets/profile.png")}
+      style={{width: '6rem', borderRadius: '9999px'}}
+      alt={'Francisco Javier Arceo'}
+      />
+      <h2 style={{fontSize: '2.0rem', marginLeft: '2rem', textAlign: 'center'}}>Hello there! &#128075;</h2>
+    </div>
+    <div style={{paddingBottom: 20,}}>
+        <p>I'm{' '}<a href="/about-me">Francisco</a> and this is my blog. 
+          You can find some of my other writing on{' '}<a href="https://chaosengineering.substack.com/">the Chaos Engineering blog</a>.
           I'm very passionate about data, code, technology, engineering, economics, finance, machine learning, digital products, and philanthropy.
           I'll probably write about some of those things so feel free to check back in if you're interested!
         </p><br/>
-        <p>Want to get in touch? Feel free to contact me on{' '}<a href='https://twitter.com/franciscojarceo' className="text-link-blue">Twitter</a>.</p>
+        <p>Want to get in touch? Feel free to contact me on{' '}<a href='https://twitter.com/franciscojarceo'>Twitter</a>.</p>
         <p>Thanks for stopping by my little corner of the internet! &#x1f913;</p>
-      </div>
+    </div>
     </section>
+    </>
   );
 }

components/common/Image/Image.js

@@ -1,15 +1,15 @@
-import Image from 'next/image';
+import "lazysizes";
 
-export function CustomImage({ alt, src, className }) {
+export function Image({ alt, src, previewSrc, webpSrc, className }) {
   return (
-    <Image
-      className={className}
-      alt={alt}
-      src={src}
-      width={800}
-      height={400}
-      priority={true}
-      unoptimized={true}
-    />
+    <picture className={className}>
+      <source type="image/webp" data-srcset={webpSrc} />
+      <source type="image/png" data-srcset={src} />
+      <img
+        className={`lazyload blur ${className}`}
+        alt={alt}
+        src={previewSrc}
+      />
+    </picture>
   );
 }

components/common/Image/index.js

@@ -1 +1 @@
-export { CustomImage as Image } from "./Image";
+export * from "./Image";

components/common/Layout/Layout.js

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { DarkModeSwitch } from "react-toggle-dark-mode";
 import { useTheme } from "next-themes";
+import { Person } from "schema-dts";
 import { JsonLd } from "react-schemaorg";
 import { jsonLdScriptProps } from "react-schemaorg";
 import { getSiteMetaData } from "@utils/helpers";
@@ -14,12 +15,12 @@ export const Footer = () => {
   return (
     <footer className="text-lg font-light">
     {
-      isRoot ? <div/>: <div style={{paddingTop: 10, paddingBottom: 10}}><Link href="/" className="text-lg font-bold">← Back home</Link></div>
+      isRoot ? <div/>: <div style={{paddingTop: 10, paddingBottom: 10}}><Link href="/"><a className="text-lg font-bold">← Back home</a></Link></div>
     }
     <hr/>
     <div>
-      <p>Like this blog? Check out the code on my{' '}<a href="https://github.com/franciscojavierarceo/franciscojavierarceo.github.io" className="text-link-blue">GitHub</a>.</p>
-      <p>Built with{" "}<a href="https://nextjs.org/" className="text-link-blue">Next.js</a> and &#x2615;</p>
+      <p>Like this blog? Check out the code on my{' '}<a href="https://github.com/franciscojavierarceo/franciscojavierarceo.github.io">GitHub</a>.</p>
+      <p>Built with{" "}<a href="https://nextjs.org/">Next.js</a> and &#x2615;</p>
     </div>
   </footer>
   );
@@ -28,7 +29,7 @@ export const Footer = () => {
 export const Footer2 = ({}) => (
   <footer className="text-lg font-light">
     {
-      useRouter() === "/" ?  <div style={{paddingTop: 10}}><Link href="/" className="text-lg font-bold">← Back home</Link></div>: <div/>
+      useRouter() === "/" ?  <div style={{paddingTop: 10}}><Link href="/"><a className="text-lg font-bold">← Back home</a></Link></div>: <div/>
     }
     <hr/>
     <div>
@@ -107,7 +108,7 @@ const Header = () => {
         />
       )}
       <script
-        {...jsonLdScriptProps({
+        {...jsonLdScriptProps<Person>({
           "@context": "https://schema.org",
           "@type": "Person",
           name: name,
@@ -125,25 +126,31 @@ const Header = () => {
 
 const LargeTitle = () => (
   <h1>
-    <Link href="/" legacyBehavior>
-      <a className={clsx(
-        "text-3xl font-black leading-none text-black no-underline font-display",
-        "sm:text-4xl",
-        "dark:text-white"
-      )}>
+    <Link href="/">
+      <a
+        className={clsx(
+          "text-3xl font-black leading-none text-black no-underline font-display",
+          "sm:text-4xl",
+          "dark:text-white"
+        )}
+      >
         Francisco Javier Arceo
       </a>
     </Link>
   </h1>
 );
 
 const SmallTitle = () => (
-  <Link href="/" legacyBehavior>
-    <a className={clsx(
-      "text-2xl font-black text-black no-underline font-display",
-      "dark:text-white"
-    )}>
-      Francisco Javier Arceo
-    </a>
-  </Link>
+  <a>
+    <Link href="/">
+      <a
+        className={clsx(
+          "text-2xl font-black text-black no-underline font-display",
+          "dark:text-white"
+        )}
+      >
+        Francisco Javier Arceo
+      </a>
+    </Link>
+  </a>
 );

next.config.js

@@ -1,12 +1,17 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  output: 'export',
-  images: {
-    unoptimized: true,
-  },
-  basePath: '',
-  assetPrefix: '',
-  trailingSlash: true,
-};
+const optimizedImages = require("next-optimized-images");
 
-module.exports = nextConfig;
+module.exports = optimizedImages({
+    async headers() {
+        return [
+          {
+            source: '/sitemap.xml',
+            headers: [
+              {
+                key: 'Content-type',
+                value: 'application/xml',
+              }
+            ],
+          },
+        ]
+      },
+});