feat: link shortener

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react/no-unescaped-entities": "off"
+  }
 }

package.json

@@ -14,6 +14,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/lab": "^5.0.0-alpha.153",
     "@mui/material": "^5.14.18",
+    "@vercel/edge-config": "^0.4.1",
     "dayjs": "^1.11.10",
     "feed": "^4.2.2",
     "glob": "^10.3.10",

public/blog/atom.xml

@@ -2,7 +2,7 @@
 <feed xmlns="http://www.w3.org/2005/Atom">
     <id>https://srizan.dev/blog</id>
     <title>Sr Izan's Blog</title>
-    <updated>2023-12-03T19:13:44.979Z</updated>
+    <updated>2023-12-12T18:15:17.193Z</updated>
     <generator>https://github.com/jpmonette/feed</generator>
     <author>
         <name>Sr Izan</name>

public/blog/rss.xml

@@ -4,7 +4,7 @@
         <title>Sr Izan's Blog</title>
         <link>https://srizan.dev/blog</link>
         <description>My little donowall place on the net</description>
-        <lastBuildDate>Sun, 03 Dec 2023 19:13:44 GMT</lastBuildDate>
+        <lastBuildDate>Tue, 12 Dec 2023 18:15:17 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>en</language>

src/app/(pages)/blog/[id]/page.tsx

@@ -2,7 +2,7 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
-import BlogNavBar from "../../../_components/BlogNavBar";
+import BlogNavBar from "../../../_components/NavBar";
 import '../../../_css/BlogPost.css';
 import React from "react";
 import jsonDataArray from '../../../../../public/blogPosts.json';
@@ -32,7 +32,7 @@ export default async function Page({ params }: { params: { id: string } }) {
     }
     return (
         <div>
-            <BlogNavBar title={jsonData.title} />
+            <BlogNavBar title={jsonData.title} isBlog />
             <div className={'blogPostContent'}>
                 <ReactMarkdown remarkPlugins={[remarkGfm]} components={{
                     code({node, className, children, ...props}) {

src/app/(pages)/blog/page.tsx

@@ -2,7 +2,7 @@ import '../../../app/_css/Blog.css';
 import Head from 'next/head';
 import blogPosts from '../../../../public/blogPosts.json'
 import BlogPostCard from '../../../app/_components/BlogPostCard';
-import BlogNavBar from '../../../app/_components/BlogNavBar';
+import BlogNavBar from '../../_components/NavBar';
 import BlogRssDial from '@/app/_components/BlogRssDial';
 
 function Blog() {
@@ -12,7 +12,7 @@ function Blog() {
                 <title>Blog</title>
                 <meta name="theme-color" content="#0d0d0d" />
             </Head>
-            <BlogNavBar />
+            <BlogNavBar isBlog />
             <div className="blogPosts">
                 {blogPosts.map((post) => {
                     return (

src/app/(pages)/go/[name]/page.tsx

@@ -0,0 +1,29 @@
+import NavBar from "@/app/_components/NavBar";
+import { get } from '@vercel/edge-config';
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import '../../../_css/LinkShortenerVerification.css';
+import { Metadata } from 'next';
+
+export default async function Page({ params }: { params: { name: string } }) {
+    const getLink = await get(params.name) as string | undefined;
+    if (!getLink) {
+        redirect('../notfound')
+    }
+    const url = new URL(getLink);
+    return (
+        <div>
+            <NavBar title={'Link shortener'} />
+            <div className="navbarMargin center">
+                <h3>This link sends you to {url.hostname}</h3>
+                <Link href={url.toString()}>Go there I don't care</Link>
+            </div>
+        </div>
+    )
+}
+
+export async function generateMetadata({ params }: { params: { name: string } }): Promise<Metadata> {
+    return {
+        title: `Link shortener ID ${params.name}`
+    }
+}

src/app/_components/NavBar.tsx

@@ -5,10 +5,14 @@ import { useEffect, useState } from 'react';
 import '../_css/BlogNavBar.css'
 import Link from 'next/link';
 
-export default function BlogNavBar(props: Props) {
+export default function NavBar(props: Props) {
     const [isScrolled, setIsScrolled] = useState(false);
+    const [title, setTitle] = useState(props.title || 'Unnamed page');
 
     useEffect(() => {
+        if (props.isBlog) {
+            setTitle('Blog');
+        }
         let prevScrollpos = window.scrollY;
 
         const handleScroll = () => {
@@ -22,16 +26,17 @@ export default function BlogNavBar(props: Props) {
         return () => {
             window.removeEventListener('scroll', handleScroll);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return (
         <div className={`navBar ${isScrolled ? 'hide' : ''}`}>
             <div className="iconContainer">
                 <img src="/pfp.webp" alt="main profile picture" height="50vh" />
-                <p>{props.title || 'Sr Izan\'s blog'}</p>
+                <p>{title}</p>
             </div>
-            <Link href={props.title ? '/blog' : '/'} className="backHomeLink">Go back {props.title ? 'to posts' : 'home'}</Link>
+            <Link href={props.isBlog ? '/blog' : '/'} className="backHomeLink">Go back</Link>
         </div>
     )
 }
 
-type Props = { title?: string }
+type Props = { title?: string, isBlog?: boolean }

src/app/_css/LinkShortenerVerification.css

@@ -0,0 +1,3 @@
+.center {
+    text-align: center;
+}

src/app/globals.css

@@ -21,6 +21,10 @@
     'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
 }
 
+.navbarMargin {
+  margin-top: 90px;
+}
+
 a {
   font-weight: 500;
   color: var(--link-color);

yarn.lock

@@ -601,6 +601,18 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@vercel/edge-config-fs@0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@vercel/edge-config-fs/-/edge-config-fs-0.1.0.tgz#cda8327f611418c1d1cbb28c6bed02d782be928b"
+  integrity sha512-NRIBwfcS0bUoUbRWlNGetqjvLSwgYH/BqKqDN7vK1g32p7dN96k0712COgaz6VFizAm9b0g6IG6hR6+hc0KCPg==
+
+"@vercel/edge-config@^0.4.1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@vercel/edge-config/-/edge-config-0.4.1.tgz#c247011dcd05ce6a6b4d17139215c8f684d83cb3"
+  integrity sha512-4Mc3H7lE+x4RrL17nY8CWeEorvJHbkNbQTy9p8H1tO7y11WeKj5xeZSr07wNgfWInKXDUwj5FZ3qd/jIzjPxug==
+  dependencies:
+    "@vercel/edge-config-fs" "0.1.0"
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"