aungmyatmoe.me VS theodorusclarence.com

If you are questioning what is raynaldo.me Quicklinks is, here is the answer. My brother, Thedorus Clarence created a Next.js project called notiolink, so we can create short links in notion. If you are interested, you can install it by yourself. I will give some demo videos below.

It is open source if you want to check the source code

On my personal website, I use Spotify API to show what song is currently playing. Now, I will try to explain on how do I do that.

// src/components/Seo.tsx import Head from 'next/head'; import { useRouter } from 'next/router'; const defaultMeta = { title: 'Next.js Tailwind Starter', site_name: 'Next.js Tailwind Starter', description: 'A template for Next.js and Tailwindcss by Theodorus Clarence', url: 'https://theodorusclarence.com', image: 'https://theodorusclarence.com/favicon/large-og.jpg', type: 'website', robots: 'follow, index', }; type SeoProps = { date?: string; templateTitle?: string; } & Partial; export default function Seo(props: SeoProps) { const router = useRouter(); const meta = { ...defaultMeta, ...props, }; meta['title'] = props.templateTitle ? `${props.templateTitle} | ${meta.site_name}` : meta.title; return ( {meta.title}title> <meta name='robots' content={meta.robots} /> <meta content={meta.description} name='description' /> <meta property='og:url' content={`${meta.url}${router.asPath}`} /> <link rel='canonical' href={`${meta.url}${router.asPath}`} /> {/* Open Graph */} <meta property='og:type' content={meta.type} /> <meta property='og:site_name' content={meta.site_name} /> <meta property='og:description' content={meta.description} /> <meta property='og:title' content={meta.title} /> <meta name='image' property='og:image' content={meta.image} /> {/* Twitter */} <meta name='twitter:card' content='summary_large_image' /> <meta name='twitter:site' content='@th_clarence' /> <meta name='twitter:title' content={meta.title} /> <meta name='twitter:description' content={meta.description} /> <meta name='twitter:image' content={meta.image} /> {meta.date && ( <> <meta property='article:published_time' content={meta.date} /> <meta name='publish_date' property='og:publish_date' content={meta.date} /> <meta name='author' property='article:author' content='Theodorus Clarence' /> </> )} Head> ); }

Notice the use of space between to reduce class too. The code example is taken from this website and available on github. Kindly star it if it helps!