Merge pull request #40 from thedevdavid/release/0.6.0

Release/0.6.0

Author: thedevdavid

.env.example

@@ -1,4 +1,11 @@
 #Next
 NEXT_PUBLIC_BASE_URL=https://localhost:3000
+
+#Analytics
 NEXT_PUBLIC_UMAMI_SCRIPT_URL=
-NEXT_PUBLIC_UMAMI_WEBSITE_ID=
+NEXT_PUBLIC_UMAMI_WEBSITE_ID=
+
+#Email
+EMAIL_API_BASE=
+NEXT_PUBLIC_EMAIL_API_KEY=
+NEXT_PUBLIC_EMAIL_GROUP_ID=

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,17 +1,17 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm lint-staged

.lintstagedrc.js

@@ -0,0 +1,9 @@
+const path = require("path");
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames.map((f) => path.relative(process.cwd(), f)).join(" --file ")}`;
+
+module.exports = {
+  "*.{js,jsx,ts,tsx}": [buildEslintCommand],
+  "*": "prettier --ignore-unknown --write",
+};

CHANGELOG.md

@@ -7,6 +7,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Convertkit newsletter provider
+- Plausible analytics provider
+
+## [0.6.0] - 2023-07-16
+
+### Added
+
+- Back to top button
+- SocialIcon component
+- Share post component
+- Lint staged files
+- Tag generation and routing
+- Newsletter feature
+- MailerLite integration
+
+### Changed
+
+- Changed social icons to use [simple-icons](https://simpleicons.org)
+- New post preview component
+- Updated package dependencies
+- Formatted codebase with updated Prettier
+
 ## [0.5.0] - 2023-07-06
 
 ### Added

README.md

@@ -24,7 +24,12 @@ If you love this template and/or use it, please give it a star on GitHub. This w
   - [Colors](#colors)
   - [Metadata](#metadata)
   - [Analytics](#analytics)
+    - [Vercel](#vercel)
+    - [Umami](#umami)
+    - [Other analytics providers](#other-analytics-providers)
   - [Newsletter subscription](#newsletter-subscription)
+    - [MailerLite](#mailerlite)
+    - [Other newsletter providers](#other-newsletter-providers)
   - [Hero section](#hero-section)
   - [Other tips & tricks](#other-tips--tricks)
     - [Image optimization](#image-optimization)
@@ -116,13 +121,22 @@ Umami is a simple, easy to use, web analytics solution with self-hosting option!
 Configure:
 Set `NEXT_PUBLIC_UMAMI_SCRIPT_URL` & `NEXT_PUBLIC_UMAMI_WEBSITE_ID` environment variables on your `.env.local` file and on Vercel dashboard.
 
-#### Others
+#### Other analytics providers
 
 Supporting other analytics providers are in progress. Feel free to open an issue if you have any suggestions or a PR if you want to implement it yourself.
 
 ### Newsletter subscription
 
-_WIP_ as I'm still deciding which email tools to support. Feel free to open an issue if you have any suggestions or a PR if you want to implement it yourself.
+#### MailerLite
+
+MailerLite is a simple email marketing tool for all types of businesses. You can read more about it on [MailerLite website](https://www.mailerlite.com/).
+
+Configure:
+Set `EMAIL_API_BASE`, `EMAIL_API_KEY`, and `EMAIL_GROUP_ID` environment variables on your `.env.local` file and on Vercel dashboard.
+
+#### Other newsletter providers
+
+Supporting other newsletter providers are in progress. Feel free to open an issue if you have any suggestions or a PR if you want to implement it yourself.
 
 ### Hero section
 
@@ -171,19 +185,30 @@ Note: DO NOT overdo it. You can easily make images look bad with lossy compressi
 - [x] Not found page
 - [x] contributing docs
 - [x] Docs refresh
-- [ ] Social sharing buttons
-- [ ] newsletter integration (form, api route, keys, welcome page, previous issues)
+- [x] Back to top button
+- [x] Social icons component
+- [x] Social sharing buttons
+- [x] Tags
+- [x] newsletter integration (form, api route, keys, thank you/welcome page, MailerLite provider)
+- [ ] Other newsletter providers (Convertkit, Substack, Buttondown, Mailchimp, etc)
 - [ ] Other analytics providers (fathom, simplelytics, plausible, etc)
-- [ ] Tags, categories
+- [ ] CLI and/or recipes
 - [ ] Post series page
+- [ ] prev/next post links
+- [ ] related posts
+- [ ] Newsletter previous issues page
 - [ ] Layouts/templates system
+- [ ] Notion data source
+- [ ] Sanity data source
 - [ ] hero title and subtitle text HTML support(?)
 - [ ] Design improvements (whitespace, layout, etc.)
 - [ ] error, and loading pages
 - [ ] Code preview component
 - [ ] Code highlight improvements (copy code, theme)
 - [ ] `manifest.json`
-- [ ] Hidden content (behind email subscription)
+- [ ] Rich project cards
+- [ ] CV template
+- [ ] Authenticated pages and/or hidden content (behind email address)
 - [ ] 100 lighthouse score
 - [ ] Command bar fuzzy search in content
 - [ ] Pagination

app/(site)/not-found.tsx

@@ -1,20 +1,27 @@
-"use client"
+"use client";
 
-import { Button } from "@/components/ui/button"
-import { useRouter } from "next/navigation"
+import { useRouter } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
 
 export default function NotFound() {
-  const router = useRouter()
+  const router = useRouter();
 
   return (
-    <div className="text-center justify-center items-center mb-16">
-      <span className="font-extrabold leading-none text-transparent text-[10rem] bg-clip-text bg-gradient-to-b from-foreground to-transparent">404</span>
-      <h2 className="font-heading text-2xl my-2 font-bold">Something&apos;s missing</h2>
+    <div className="mb-16 items-center justify-center text-center">
+      <span className="bg-gradient-to-b from-foreground to-transparent bg-clip-text text-[10rem] font-extrabold leading-none text-transparent">
+        404
+      </span>
+      <h2 className="my-2 font-heading text-2xl font-bold">Something&apos;s missing</h2>
       <p>Sorry, the page you are looking for doesn&apos;t exist or has been moved.</p>
-      <div className="flex gap-2 justify-center mt-8">
-        <Button onClick={() => router.back()} variant="default" size="lg">Go back</Button>
-        <Button onClick={() => router.push("/")} variant="ghost" size="lg">Back to Home</Button>
+      <div className="mt-8 flex justify-center gap-2">
+        <Button onClick={() => router.back()} variant="default" size="lg">
+          Go back
+        </Button>
+        <Button onClick={() => router.push("/")} variant="ghost" size="lg">
+          Back to Home
+        </Button>
       </div>
     </div>
-  )
-}
+  );
+}

app/(site)/page.tsx

@@ -1,27 +1,29 @@
 import Image from "next/image";
 import Link from "next/link";
+import { notFound } from "next/navigation";
 import { allPages, allPosts } from "@/.contentlayer/generated";
-import { compareDesc, format, parseISO } from "date-fns";
+import { compareDesc } from "date-fns";
 import { ArrowRight } from "lucide-react";
 
 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";
 import { Mdx } from "@/components/mdx-components";
+import NewsletterSubscribe from "@/components/newsletter-subscribe";
+import PostPreview from "@/components/post-preview";
 
 async function getAboutPage() {
-  const page = allPages.find((page) => page.slug === "about");
+  const aboutPage = allPages.find((page) => page.slug === "about");
 
-  if (!page) {
+  if (!aboutPage) {
     null;
   }
 
-  return page;
+  return aboutPage;
 }
 
 export default async function Home() {
@@ -30,7 +32,8 @@ export default async function Home() {
     .filter((post) => post.status === "published")
     .sort((a, b) =>
       compareDesc(new Date(a.lastUpdatedDate || a.publishedDate), new Date(b.lastUpdatedDate || b.publishedDate))
-    );
+    )
+    .slice(0, 8);
 
   return (
     <div className="pb-10">
@@ -41,25 +44,9 @@ export default async function Home() {
       <div className="container mt-12 max-w-6xl">
         <div className="grid grid-cols-1 place-items-start justify-between gap-12 lg:grid-cols-3">
           <div className="col-span-1 lg:col-span-2">
-            <div className="prose grid grid-flow-row gap-3">
+            <div className="grid grid-flow-row gap-2">
               {posts.map((post) => (
-                <article key={post._id} className="w-full">
-                  <Link
-                    href={`posts/${post.slug}`}
-                    className={cn(
-                      "select-rounded-md block w-full rounded-md px-3 py-6 leading-none no-underline outline-none transition hover:bg-foreground/20 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-                    )}
-                  >
-                    <h2 className="m-0 text-2xl font-bold leading-none text-foreground">{post.title}</h2>
-                    <div className="mb-4 mt-1 text-sm leading-snug text-muted-foreground">
-                      <time dateTime={post.publishedDate}>{format(parseISO(post.publishedDate), "LLLL d, yyyy")}</time>
-                      <span>{` // ${post.readTimeMinutes} mins read`}</span>
-                    </div>
-                    {post.description && (
-                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{post.description}</p>
-                    )}
-                  </Link>
-                </article>
+                <PostPreview key={post._id} post={post} />
               ))}
             </div>
             <Link
@@ -74,7 +61,7 @@ export default async function Home() {
           </aside>
         </div>
       </div>
-      <CTA
+      <NewsletterSubscribe
         title="I also write deep dives in email"
         description="I write about coding, design, digital nomad life, and solopreneurship. Join over 1,000 other developers in
             getting better in business. Unsubscribe whenever."

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

@@ -1,17 +1,19 @@
 import { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { PostSeries, PostWithSeries, SeriesItem } from "@/types";
-import { allPosts, Post } from "contentlayer/generated";
+import { PostSeries, SeriesItem } from "@/types";
+import { allPosts } from "contentlayer/generated";
 import { format, parseISO } from "date-fns";
 import { Home } from "lucide-react";
 
+import { BASE_URL, defaultAuthor } from "@/lib/metadata";
 import { cn } from "@/lib/utils";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { Mdx } from "@/components/mdx-components";
 import { PostSeriesBox } from "@/components/post-series-box";
+import { SocialShare } from "@/components/social-share";
 import { TableOfContents } from "@/components/table-of-contents";
 
 interface PostProps {
@@ -156,15 +158,23 @@ export default async function PostPage({ params }: PostProps) {
           )}
           <Mdx code={post.body.code} />
           <hr className="my-4" />
-          {post.tags && (
-            <ul className="m-0 list-none space-x-2 p-0 text-sm text-muted-foreground">
-              {post.tags.map((tag: any) => (
-                <li className="inline-block p-0" key={tag.trim()}>
-                  {tag}
-                </li>
-              ))}
-            </ul>
-          )}
+          <div className="flex flex-row items-center justify-between">
+            {post.tags && (
+              <ul className="m-0 list-none space-x-2 p-0 text-sm text-muted-foreground">
+                {post.tags.map((tag: string) => (
+                  <li className="inline-block p-0" key={tag}>
+                    <Link href={`/tags/${tag}`} className="inline-block transition hover:text-muted-foreground/70">
+                      {tag}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            )}
+            <SocialShare
+              text={`${post.title} via ${defaultAuthor.handle}`}
+              url={`${BASE_URL}/${post._raw.flattenedPath}`}
+            />
+          </div>
         </article>
         <aside className="hidden lg:block">
           <Card className={cn("sticky top-28 mb-4")}>