Skip to content

Commit

Permalink
Merge pull request #26 from thedevdavid/release/0.4.0
Browse files Browse the repository at this point in the history
Release/0.4.0
  • Loading branch information
thedevdavid authored Jul 3, 2023
2 parents d86c50c + ed84523 commit 0685a0b
Show file tree
Hide file tree
Showing 36 changed files with 766 additions and 575 deletions.
4 changes: 3 additions & 1 deletion .env.example
Original file line number Diff line number Diff line change
@@ -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=
19 changes: 19 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
18 changes: 15 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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

Expand Down
2 changes: 1 addition & 1 deletion app/(site)/[slug]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand Down
3 changes: 2 additions & 1 deletion app/(site)/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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"
Expand Down
59 changes: 32 additions & 27 deletions app/(site)/posts/[slug]/opengraph-image.tsx
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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}
Expand All @@ -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>
),
Expand Down
39 changes: 4 additions & 35 deletions app/(site)/posts/[slug]/page.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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: {
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
59 changes: 32 additions & 27 deletions app/(site)/posts/[slug]/twitter-image.tsx
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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}
Expand All @@ -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>
),
Expand Down
2 changes: 1 addition & 1 deletion app/(site)/posts/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading

1 comment on commit 0685a0b

@vercel
Copy link

@vercel vercel bot commented on 0685a0b Jul 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.