Release/0.4.0

.env.example

@@ -1,2 +1,4 @@
 #Next
-NEXT_PUBLIC_BASE_URL=https://localhost:3000
+NEXT_PUBLIC_BASE_URL=https://localhost:3000
+NEXT_PUBLIC_UMAMI_SCRIPT_URL=
+NEXT_PUBLIC_UMAMI_WEBSITE_ID=

CHANGELOG.md

@@ -7,6 +7,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.4.0] - 2023-07-03
+
+### Added
+
+- Copy button component
+- Scroll-aware table of contets
+- Minimal hero variant
+- Work availability status
+- Added Umami analytics
+
+### Changed
+
+- Fixed OG and Twitter images
+- Fixed autolink heading issues
+
+### Removed
+
+- Popover and tooltip components
+
 ## [0.3.2] - 2023-06-26
 
 ### Added

README.md

@@ -92,7 +92,18 @@ You can edit navigation links in `lib/navigation-links.ts`.
 
 ### Analytics
 
-Vercel analytics is added. To configure, you need to enable it on [Vercel project dashboard](https://vercel.com/dashboard) by selecting your Project and then click the Analytics tab and click Enable from the dialog.
+#### Vercel
+
+To configure, you need to enable it on [Vercel project dashboard](https://vercel.com/dashboard) by selecting your Project and then click the Analytics tab and click Enable from the dialog.
+
+#### Umami
+
+Umami is a simple, easy to use, web analytics solution with self-hosting option! You can read more about it on [Umami website](https://umami.is/). (Hint: On [Railway](https://railway.app), you can self-host it low cost or even free)
+
+Configure:
+Set `NEXT_PUBLIC_UMAMI_SCRIPT_URL` & `NEXT_PUBLIC_UMAMI_WEBSITE_ID` environment variables on your `.env.local` file and on Vercel dashboard.
+
+#### Others
 
 Supporting other analytics providers are planned. Feel free to open an issue if you have any suggestions or a PR if you want to implement it yourself.
 
@@ -141,7 +152,8 @@ Create a PR and add your blog to this list if you're using the template!
 - [x] projects page
 - [x] about section on homepage
 - [x] search & command bar
-- [x] Vercel analytics
+- [x] Analytics: Vercel, Umami
+- [ ] Other analytics providers (fathom, simplelytics, plausible, etc)
 - [ ] Design improvements (whitespace, layout, etc.)
 - [ ] 404, error, and loading pages
 - [ ] Code preview component
@@ -155,7 +167,6 @@ Create a PR and add your blog to this list if you're using the template!
 - [ ] Pagination
 - [ ] SEO improvements
 - [ ] Accessibility audit
-- [ ] Other analytics providers (fathom, simplelytics, plausible, umami, etc)
 - [ ] TypeScript fixes
 - [ ] Redesign uses page
 - [ ] Redesign projects page
@@ -173,6 +184,7 @@ Create a PR and add your blog to this list if you're using the template!
 - [ ] keyboard-based navigation with hotkeys (?)
 - [ ] multiple layouts (sidebar, full-width, etc.) (?)
 - [ ] multilang support (?)
+- [ ] contributing docs
 
 ## Inspiration & Mentions
 

app/(site)/[slug]/page.tsx

@@ -49,7 +49,7 @@ export default async function PagePage({ params }: PageProps) {
 
   return (
     <div className="container max-w-6xl pb-10">
-      <article className="prose mx-auto max-w-5xl dark:prose-invert prose-headings:mb-3 prose-headings:mt-8 prose-headings:font-heading prose-headings:font-bold prose-headings:leading-tight hover:prose-a:text-muted-foreground prose-a:prose-headings:no-underline">
+      <article className="prose mx-auto max-w-5xl dark:prose-invert prose-headings:mb-3 prose-headings:mt-8 prose-headings:font-heading prose-headings:font-bold prose-headings:leading-tight hover:prose-a:text-accent-foreground prose-a:prose-headings:no-underline">
         <h1 className="mt-0">{page.title}</h1>
         {page.description && <p className="m-0 text-xl">{page.description}</p>}
         {page.lastUpdatedDate && (

app/(site)/page.tsx

@@ -8,6 +8,7 @@ import { defaultAuthor } from "@/lib/metadata";
 import { cn } from "@/lib/utils";
 import CTA from "@/components/cta";
 import { HeroImage } from "@/components/hero-image";
+import { HeroMinimal } from "@/components/hero-minimal";
 import { HeroSimple } from "@/components/hero-simple";
 import { HeroVideo } from "@/components/hero-video";
 import { Sidebar } from "@/components/home-sidebar";
@@ -96,7 +97,7 @@ export default async function Home() {
               </div>
             </div>
             <div className="col-span-1 lg:col-span-2">
-              <article className="prose mx-auto max-w-5xl dark:prose-invert prose-headings:mb-3 prose-headings:mt-8 prose-headings:font-heading prose-headings:font-bold prose-headings:leading-tight hover:prose-a:text-muted-foreground prose-a:prose-headings:no-underline">
+              <article className="prose mx-auto max-w-5xl dark:prose-invert prose-headings:mb-3 prose-headings:mt-8 prose-headings:font-heading prose-headings:font-bold prose-headings:leading-tight hover:prose-a:text-accent-foreground prose-a:prose-headings:no-underline">
                 <Mdx code={aboutPage.body.code} />
                 <Link
                   href="/now"

app/(site)/posts/[slug]/opengraph-image.tsx

@@ -1,5 +1,6 @@
 import { ImageResponse } from "next/server";
 import { allPosts } from "contentlayer/generated";
+import { format, parseISO } from "date-fns";
 
 import { defaultAuthor } from "@/lib/metadata";
 
@@ -15,41 +16,36 @@ export const contentType = "image/png";
 
 // Image generation
 export default async function Image({ params }: { params: { slug: string } }) {
-  console.log(params);
   const post = await allPosts.find((post) => post.slug === params.slug);
 
   if (!post) {
     return {};
   }
 
+  const date = post.lastUpdatedDate || post.publishedDate;
+
   return new ImageResponse(
     (
       // ImageResponse JSX element
       <div
         style={{
+          background: "linear-gradient(45deg, rgba(59, 178, 93, 0.20) 0%, rgba(59, 121, 178, 0.20) 100%)",
           display: "flex",
           height: "100%",
           width: "100%",
-          alignItems: "center",
-          justifyContent: "center",
+          alignItems: "flex-start",
+          flexDirection: "column",
+          justifyContent: "space-between",
           letterSpacing: "-.02em",
-          fontWeight: 700,
-          background: "white",
+          padding: "64px 48px",
+          color: "#222",
         }}
       >
-        <div
-          style={{
-            right: 42,
-            bottom: 42,
-            position: "absolute",
-            display: "flex",
-            alignItems: "center",
-          }}
-        >
+        <div style={{ display: "flex" }}>
           <span
             style={{
-              marginLeft: 8,
-              fontSize: 20,
+              fontSize: "24px",
+              fontWeight: 400,
             }}
           >
             {defaultAuthor.handle}
@@ -58,20 +54,29 @@ export default async function Image({ params }: { params: { slug: string } }) {
         <div
           style={{
             display: "flex",
-            flexWrap: "wrap",
-            justifyContent: "center",
-            padding: "20px 50px",
-            margin: "0 42px",
-            fontSize: 40,
+            flexDirection: "column",
+            alignItems: "flex-start",
             width: "auto",
-            maxWidth: 750,
-            textAlign: "center",
-            backgroundColor: "black",
-            color: "white",
-            lineHeight: 1.4,
+            maxWidth: "70%",
           }}
         >
-          {post.title}
+          <p
+            style={{
+              fontWeight: "bold",
+              fontSize: "48px",
+              lineHeight: 1.1,
+            }}
+          >
+            {post.title}
+          </p>
+
+          <p
+            style={{
+              fontSize: "20px",
+            }}
+          >
+            {format(parseISO(date), "LLLL d, yyyy")} &middot; {post.readTimeMinutes} min read
+          </p>
         </div>
       </div>
     ),

app/(site)/posts/[slug]/page.tsx

@@ -1,7 +1,6 @@
 import { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { PostHeading } from "@/types";
 import { allPosts } from "contentlayer/generated";
 import { format, parseISO } from "date-fns";
 import { Home } from "lucide-react";
@@ -11,6 +10,7 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { Mdx } from "@/components/mdx-components";
+import { TableOfContents } from "@/components/table-of-contents";
 
 interface PostProps {
   params: {
@@ -114,35 +114,17 @@ export default async function PostPage({ params }: PostProps) {
             {post.lastUpdatedDate && (
               <time> Last updated: {format(parseISO(post.lastUpdatedDate), "LLLL d, yyyy")}</time>
             )}
-            d
           </div>
           <Accordion type="single" collapsible>
             <AccordionItem value="table-of-contents">
               <AccordionTrigger>Table of Contents</AccordionTrigger>
               <AccordionContent>
-                <div className="flex items-center rounded-md">
-                  <ol className="list-none space-y-2" role="list">
-                    {post.headings.map((heading: PostHeading) => (
-                      <li key={heading.slug} className="list-none">
-                        <Link
-                          className={cn(
-                            "text-sm font-bold",
-                            heading.heading === 3 && "pl-6 font-normal",
-                            heading.heading === 4 && "pl-8 font-normal"
-                          )}
-                          href={`#${heading.slug}`}
-                        >
-                          {heading.text}
-                        </Link>
-                      </li>
-                    ))}
-                  </ol>
-                </div>
+                <TableOfContents chapters={post.headings} />
               </AccordionContent>
             </AccordionItem>
           </Accordion>
         </div>
-        <article className="prose max-w-7xl dark:prose-invert prose-headings:mb-3 prose-headings:mt-8 prose-headings:font-heading prose-headings:font-bold prose-headings:leading-tight hover:prose-a:text-muted-foreground prose-a:prose-headings:no-underline lg:mr-auto lg:max-w-2xl">
+        <article className="prose max-w-7xl dark:prose-invert hover:prose-a:text-accent-foreground prose-a:prose-headings:mb-3 prose-a:prose-headings:mt-8 prose-a:prose-headings:font-heading prose-a:prose-headings:font-bold prose-a:prose-headings:leading-tight prose-a:prose-headings:no-underline lg:mr-auto lg:max-w-2xl">
           <h1 className="mb-2 font-heading">{post.title}</h1>
           {post.description && (
             <p className="mb-2 mt-0 text-xl text-slate-700 dark:text-slate-200">{post.description}</p>
@@ -166,20 +148,7 @@ export default async function PostPage({ params }: PostProps) {
               <CardTitle>Table of Contents</CardTitle>
             </CardHeader>
             <CardContent className="grid gap-4">
-              <div className="flex items-center rounded-md pl-2">
-                <ol className="list-none space-y-2" role="list">
-                  {post.headings.map((heading: PostHeading) => (
-                    <li key={heading.slug} className="list-none">
-                      <Link
-                        className={cn("text-sm font-bold", heading.heading === 3 && "pl-6 font-normal")}
-                        href={`#${heading.slug}`}
-                      >
-                        {heading.text}
-                      </Link>
-                    </li>
-                  ))}
-                </ol>
-              </div>
+              <TableOfContents chapters={post.headings} />
             </CardContent>
             <Separator />
             <CardFooter>

app/(site)/posts/[slug]/twitter-image.tsx

@@ -1,5 +1,6 @@
 import { ImageResponse } from "next/server";
 import { allPosts } from "contentlayer/generated";
+import { format, parseISO } from "date-fns";
 
 import { defaultAuthor } from "@/lib/metadata";
 
@@ -15,41 +16,36 @@ export const contentType = "image/png";
 
 // Image generation
 export default async function Image({ params }: { params: { slug: string } }) {
-  console.log(params);
   const post = await allPosts.find((post) => post.slug === params.slug);
 
   if (!post) {
     return {};
   }
 
+  const date = post.lastUpdatedDate || post.publishedDate;
+
   return new ImageResponse(
     (
       // ImageResponse JSX element
       <div
         style={{
+          background: "linear-gradient(45deg, rgba(59, 178, 93, 0.20) 0%, rgba(59, 121, 178, 0.20) 100%)",
           display: "flex",
           height: "100%",
           width: "100%",
-          alignItems: "center",
-          justifyContent: "center",
+          alignItems: "flex-start",
+          flexDirection: "column",
+          justifyContent: "space-between",
           letterSpacing: "-.02em",
-          fontWeight: 700,
-          background: "white",
+          padding: "64px 48px",
+          color: "#222",
         }}
       >
-        <div
-          style={{
-            right: 42,
-            bottom: 42,
-            position: "absolute",
-            display: "flex",
-            alignItems: "center",
-          }}
-        >
+        <div style={{ display: "flex" }}>
           <span
             style={{
-              marginLeft: 8,
-              fontSize: 20,
+              fontSize: "24px",
+              fontWeight: 400,
             }}
           >
             {defaultAuthor.handle}
@@ -58,20 +54,29 @@ export default async function Image({ params }: { params: { slug: string } }) {
         <div
           style={{
             display: "flex",
-            flexWrap: "wrap",
-            justifyContent: "center",
-            padding: "20px 50px",
-            margin: "0 42px",
-            fontSize: 40,
+            flexDirection: "column",
+            alignItems: "flex-start",
             width: "auto",
-            maxWidth: 750,
-            textAlign: "center",
-            backgroundColor: "black",
-            color: "white",
-            lineHeight: 1.4,
+            maxWidth: "70%",
           }}
         >
-          {post.title}
+          <p
+            style={{
+              fontWeight: "bold",
+              fontSize: "48px",
+              lineHeight: 1.1,
+            }}
+          >
+            {post.title}
+          </p>
+
+          <p
+            style={{
+              fontSize: "20px",
+            }}
+          >
+            {format(parseISO(date), "LLLL d, yyyy")} &middot; {post.readTimeMinutes} min read
+          </p>
         </div>
       </div>
     ),

app/(site)/posts/page.tsx

@@ -19,7 +19,7 @@ export default function Blog() {
     .sort((a, b) => compareDesc(new Date(a.publishedDate), new Date(b.publishedDate)));
   return (
     <div className="container">
-      <div className="prose mx-auto max-w-5xl dark:prose-invert prose-headings:mb-3 prose-headings:mt-8 prose-headings:font-heading prose-headings:font-bold prose-headings:leading-tight hover:prose-a:text-muted-foreground prose-a:prose-headings:no-underline">
+      <div className="prose mx-auto max-w-5xl dark:prose-invert prose-headings:mb-3 prose-headings:mt-8 prose-headings:font-heading prose-headings:font-bold prose-headings:leading-tight hover:prose-a:text-accent-foreground prose-a:prose-headings:no-underline">
         <h1 className="mt-0 ">Latest Posts</h1>
         <hr className="my-4" />
         <div className="grid grid-flow-row gap-3">