Skip to content

Commit 0685a0b

Browse files
thedevdavidthedevdavid
authored
Merge pull request #26 from thedevdavid/release/0.4.0
Release/0.4.0
2 parents d86c50c + ed84523 commit 0685a0b

36 files changed

+766
-575
lines changed

‎.env.example

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
#Next
2-
NEXT_PUBLIC_BASE_URL=https://localhost:3000
2+
NEXT_PUBLIC_BASE_URL=https://localhost:3000
3+
NEXT_PUBLIC_UMAMI_SCRIPT_URL=
4+
NEXT_PUBLIC_UMAMI_WEBSITE_ID=

‎CHANGELOG.md

+19
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10+
## [0.4.0] - 2023-07-03
11+
12+
### Added
13+
14+
- Copy button component
15+
- Scroll-aware table of contets
16+
- Minimal hero variant
17+
- Work availability status
18+
- Added Umami analytics
19+
20+
### Changed
21+
22+
- Fixed OG and Twitter images
23+
- Fixed autolink heading issues
24+
25+
### Removed
26+
27+
- Popover and tooltip components
28+
1029
## [0.3.2] - 2023-06-26
1130

1231
### Added

‎README.md

+15-3
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,18 @@ You can edit navigation links in `lib/navigation-links.ts`.
9292

9393
### Analytics
9494

95-
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.
95+
#### Vercel
96+
97+
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.
98+
99+
#### Umami
100+
101+
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)
102+
103+
Configure:
104+
Set `NEXT_PUBLIC_UMAMI_SCRIPT_URL` & `NEXT_PUBLIC_UMAMI_WEBSITE_ID` environment variables on your `.env.local` file and on Vercel dashboard.
105+
106+
#### Others
96107

97108
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.
98109

@@ -141,7 +152,8 @@ Create a PR and add your blog to this list if you're using the template!
141152
- [x] projects page
142153
- [x] about section on homepage
143154
- [x] search & command bar
144-
- [x] Vercel analytics
155+
- [x] Analytics: Vercel, Umami
156+
- [ ] Other analytics providers (fathom, simplelytics, plausible, etc)
145157
- [ ] Design improvements (whitespace, layout, etc.)
146158
- [ ] 404, error, and loading pages
147159
- [ ] Code preview component
@@ -155,7 +167,6 @@ Create a PR and add your blog to this list if you're using the template!
155167
- [ ] Pagination
156168
- [ ] SEO improvements
157169
- [ ] Accessibility audit
158-
- [ ] Other analytics providers (fathom, simplelytics, plausible, umami, etc)
159170
- [ ] TypeScript fixes
160171
- [ ] Redesign uses page
161172
- [ ] Redesign projects page
@@ -173,6 +184,7 @@ Create a PR and add your blog to this list if you're using the template!
173184
- [ ] keyboard-based navigation with hotkeys (?)
174185
- [ ] multiple layouts (sidebar, full-width, etc.) (?)
175186
- [ ] multilang support (?)
187+
- [ ] contributing docs
176188

177189
## Inspiration & Mentions
178190

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export default async function PagePage({ params }: PageProps) {
4949

5050
return (
5151
<div className="container max-w-6xl pb-10">
52-
<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">
52+
<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">
5353
<h1 className="mt-0">{page.title}</h1>
5454
{page.description && <p className="m-0 text-xl">{page.description}</p>}
5555
{page.lastUpdatedDate && (

‎app/(site)/page.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { defaultAuthor } from "@/lib/metadata";
88
import { cn } from "@/lib/utils";
99
import CTA from "@/components/cta";
1010
import { HeroImage } from "@/components/hero-image";
11+
import { HeroMinimal } from "@/components/hero-minimal";
1112
import { HeroSimple } from "@/components/hero-simple";
1213
import { HeroVideo } from "@/components/hero-video";
1314
import { Sidebar } from "@/components/home-sidebar";
@@ -96,7 +97,7 @@ export default async function Home() {
9697
</div>
9798
</div>
9899
<div className="col-span-1 lg:col-span-2">
99-
<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">
100+
<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">
100101
<Mdx code={aboutPage.body.code} />
101102
<Link
102103
href="/now"

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

+32-27
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ImageResponse } from "next/server";
22
import { allPosts } from "contentlayer/generated";
3+
import { format, parseISO } from "date-fns";
34

45
import { defaultAuthor } from "@/lib/metadata";
56

@@ -15,41 +16,36 @@ export const contentType = "image/png";
1516

1617
// Image generation
1718
export default async function Image({ params }: { params: { slug: string } }) {
18-
console.log(params);
1919
const post = await allPosts.find((post) => post.slug === params.slug);
2020

2121
if (!post) {
2222
return {};
2323
}
2424

25+
const date = post.lastUpdatedDate || post.publishedDate;
26+
2527
return new ImageResponse(
2628
(
2729
// ImageResponse JSX element
2830
<div
2931
style={{
32+
background: "linear-gradient(45deg, rgba(59, 178, 93, 0.20) 0%, rgba(59, 121, 178, 0.20) 100%)",
3033
display: "flex",
3134
height: "100%",
3235
width: "100%",
33-
alignItems: "center",
34-
justifyContent: "center",
36+
alignItems: "flex-start",
37+
flexDirection: "column",
38+
justifyContent: "space-between",
3539
letterSpacing: "-.02em",
36-
fontWeight: 700,
37-
background: "white",
40+
padding: "64px 48px",
41+
color: "#222",
3842
}}
3943
>
40-
<div
41-
style={{
42-
right: 42,
43-
bottom: 42,
44-
position: "absolute",
45-
display: "flex",
46-
alignItems: "center",
47-
}}
48-
>
44+
<div style={{ display: "flex" }}>
4945
<span
5046
style={{
51-
marginLeft: 8,
52-
fontSize: 20,
47+
fontSize: "24px",
48+
fontWeight: 400,
5349
}}
5450
>
5551
{defaultAuthor.handle}
@@ -58,20 +54,29 @@ export default async function Image({ params }: { params: { slug: string } }) {
5854
<div
5955
style={{
6056
display: "flex",
61-
flexWrap: "wrap",
62-
justifyContent: "center",
63-
padding: "20px 50px",
64-
margin: "0 42px",
65-
fontSize: 40,
57+
flexDirection: "column",
58+
alignItems: "flex-start",
6659
width: "auto",
67-
maxWidth: 750,
68-
textAlign: "center",
69-
backgroundColor: "black",
70-
color: "white",
71-
lineHeight: 1.4,
60+
maxWidth: "70%",
7261
}}
7362
>
74-
{post.title}
63+
<p
64+
style={{
65+
fontWeight: "bold",
66+
fontSize: "48px",
67+
lineHeight: 1.1,
68+
}}
69+
>
70+
{post.title}
71+
</p>
72+
73+
<p
74+
style={{
75+
fontSize: "20px",
76+
}}
77+
>
78+
{format(parseISO(date), "LLLL d, yyyy")} &middot; {post.readTimeMinutes} min read
79+
</p>
7580
</div>
7681
</div>
7782
),

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

+4-35
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Metadata } from "next";
22
import Link from "next/link";
33
import { notFound } from "next/navigation";
4-
import { PostHeading } from "@/types";
54
import { allPosts } from "contentlayer/generated";
65
import { format, parseISO } from "date-fns";
76
import { Home } from "lucide-react";
@@ -11,6 +10,7 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/
1110
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
1211
import { Separator } from "@/components/ui/separator";
1312
import { Mdx } from "@/components/mdx-components";
13+
import { TableOfContents } from "@/components/table-of-contents";
1414

1515
interface PostProps {
1616
params: {
@@ -114,35 +114,17 @@ export default async function PostPage({ params }: PostProps) {
114114
{post.lastUpdatedDate && (
115115
<time> Last updated: {format(parseISO(post.lastUpdatedDate), "LLLL d, yyyy")}</time>
116116
)}
117-
d
118117
</div>
119118
<Accordion type="single" collapsible>
120119
<AccordionItem value="table-of-contents">
121120
<AccordionTrigger>Table of Contents</AccordionTrigger>
122121
<AccordionContent>
123-
<div className="flex items-center rounded-md">
124-
<ol className="list-none space-y-2" role="list">
125-
{post.headings.map((heading: PostHeading) => (
126-
<li key={heading.slug} className="list-none">
127-
<Link
128-
className={cn(
129-
"text-sm font-bold",
130-
heading.heading === 3 && "pl-6 font-normal",
131-
heading.heading === 4 && "pl-8 font-normal"
132-
)}
133-
href={`#${heading.slug}`}
134-
>
135-
{heading.text}
136-
</Link>
137-
</li>
138-
))}
139-
</ol>
140-
</div>
122+
<TableOfContents chapters={post.headings} />
141123
</AccordionContent>
142124
</AccordionItem>
143125
</Accordion>
144126
</div>
145-
<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">
127+
<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">
146128
<h1 className="mb-2 font-heading">{post.title}</h1>
147129
{post.description && (
148130
<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) {
166148
<CardTitle>Table of Contents</CardTitle>
167149
</CardHeader>
168150
<CardContent className="grid gap-4">
169-
<div className="flex items-center rounded-md pl-2">
170-
<ol className="list-none space-y-2" role="list">
171-
{post.headings.map((heading: PostHeading) => (
172-
<li key={heading.slug} className="list-none">
173-
<Link
174-
className={cn("text-sm font-bold", heading.heading === 3 && "pl-6 font-normal")}
175-
href={`#${heading.slug}`}
176-
>
177-
{heading.text}
178-
</Link>
179-
</li>
180-
))}
181-
</ol>
182-
</div>
151+
<TableOfContents chapters={post.headings} />
183152
</CardContent>
184153
<Separator />
185154
<CardFooter>

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

+32-27
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ImageResponse } from "next/server";
22
import { allPosts } from "contentlayer/generated";
3+
import { format, parseISO } from "date-fns";
34

45
import { defaultAuthor } from "@/lib/metadata";
56

@@ -15,41 +16,36 @@ export const contentType = "image/png";
1516

1617
// Image generation
1718
export default async function Image({ params }: { params: { slug: string } }) {
18-
console.log(params);
1919
const post = await allPosts.find((post) => post.slug === params.slug);
2020

2121
if (!post) {
2222
return {};
2323
}
2424

25+
const date = post.lastUpdatedDate || post.publishedDate;
26+
2527
return new ImageResponse(
2628
(
2729
// ImageResponse JSX element
2830
<div
2931
style={{
32+
background: "linear-gradient(45deg, rgba(59, 178, 93, 0.20) 0%, rgba(59, 121, 178, 0.20) 100%)",
3033
display: "flex",
3134
height: "100%",
3235
width: "100%",
33-
alignItems: "center",
34-
justifyContent: "center",
36+
alignItems: "flex-start",
37+
flexDirection: "column",
38+
justifyContent: "space-between",
3539
letterSpacing: "-.02em",
36-
fontWeight: 700,
37-
background: "white",
40+
padding: "64px 48px",
41+
color: "#222",
3842
}}
3943
>
40-
<div
41-
style={{
42-
right: 42,
43-
bottom: 42,
44-
position: "absolute",
45-
display: "flex",
46-
alignItems: "center",
47-
}}
48-
>
44+
<div style={{ display: "flex" }}>
4945
<span
5046
style={{
51-
marginLeft: 8,
52-
fontSize: 20,
47+
fontSize: "24px",
48+
fontWeight: 400,
5349
}}
5450
>
5551
{defaultAuthor.handle}
@@ -58,20 +54,29 @@ export default async function Image({ params }: { params: { slug: string } }) {
5854
<div
5955
style={{
6056
display: "flex",
61-
flexWrap: "wrap",
62-
justifyContent: "center",
63-
padding: "20px 50px",
64-
margin: "0 42px",
65-
fontSize: 40,
57+
flexDirection: "column",
58+
alignItems: "flex-start",
6659
width: "auto",
67-
maxWidth: 750,
68-
textAlign: "center",
69-
backgroundColor: "black",
70-
color: "white",
71-
lineHeight: 1.4,
60+
maxWidth: "70%",
7261
}}
7362
>
74-
{post.title}
63+
<p
64+
style={{
65+
fontWeight: "bold",
66+
fontSize: "48px",
67+
lineHeight: 1.1,
68+
}}
69+
>
70+
{post.title}
71+
</p>
72+
73+
<p
74+
style={{
75+
fontSize: "20px",
76+
}}
77+
>
78+
{format(parseISO(date), "LLLL d, yyyy")} &middot; {post.readTimeMinutes} min read
79+
</p>
7580
</div>
7681
</div>
7782
),

‎app/(site)/posts/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function Blog() {
1919
.sort((a, b) => compareDesc(new Date(a.publishedDate), new Date(b.publishedDate)));
2020
return (
2121
<div className="container">
22-
<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">
22+
<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">
2323
<h1 className="mt-0 ">Latest Posts</h1>
2424
<hr className="my-4" />
2525
<div className="grid grid-flow-row gap-3">

0 commit comments

Comments
 (0)