Merge pull request #7 from thedevdavid/develop

Release 0.3.0

Author: thedevdavid

CHANGELOG.md

@@ -0,0 +1,25 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.3.0] - 2023-06-18
+
+### Added
+
+- Configurable navigation links
+- Projects video file support
+
+### Fixed
+
+- Mobile navigation
+- Responsive layout issues
+- Unoptimized images
+
+### Changed
+
+- Switched unperformant gif files to mp4

README.md

@@ -11,7 +11,7 @@ This project is from developers for developers. Please feel free to report a bug
 
 If you love this template and/or use it, please give it a star on GitHub. This will help more people discover it, thus help improving the template.
 
-[![GitHub stars](https://img.shields.io/github/stars/thedevdavid/digital-garden?style=social)](
+![GitHub Repo stars](https://img.shields.io/github/stars/thedevdavid/digital-garden?style=social)
 
 **Note: This project is always evolving and it's far from being perfect or even done.** I'm always open to suggestions and contributions. Feel free to open an issue or a PR if you have any ideas or suggestions. You can also see the [roadmap](#features--roadmap) for planned features if you want to contribute.
 
@@ -58,6 +58,12 @@ Open [http://localhost:3000](http://localhost:3000) in your browser to see the r
 
 You can write content in Markdown or MDX. The content is located in `content/` and is organized in folders. The `pages` folder contains the pages. The `posts` folder contains the blogposts. The `projects` folder contains the projects.
 
+Editing list pages is done in the `lib` folder.
+
+- `/uses` - `lib/uses-data.ts`
+- `/projects` - `lib/projects-data.ts`
+- `/social` - `lib/social-data.ts`
+
 ### Deployment
 
 You can deploy the project with [Vercel](https://vercel.com/) or any other hosting provider. If you want to use Vercel, you can use the button at the top of this README.
@@ -78,7 +84,9 @@ The project uses Tailwind colors and @shadcn/ui config. Customize the colors on
 
 ### Metadata
 
-You can change the metadata in `utils/metadata.ts`. This will be used around the site for social links, handles, SEO, and OG.
+You can change the metadata in `utils/metadata.ts`. This will be used around the site for titles, social links, social handles, SEO, etc.
+
+You can edit navigation links in `lib/navigation-links.ts`.
 
 ### Analytics
 

app/(site)/layout.tsx

@@ -1,34 +1,14 @@
-import Link from "next/link";
-
-import { defaultAuthor } from "@/lib/metadata";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { CommandDialogComponent } from "@/components/command-dialog";
 import Footer from "@/components/footer";
-import { ModeToggle } from "@/components/mode-toggle";
-import { Navbar } from "@/components/navbar";
+import { Navigation } from "@/components/navigation";
 
 interface RootLayoutProps {
   children: React.ReactNode;
 }
 
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
-    <div className="">
-      <header className="mx-auto mt-4 h-16 w-full max-w-6xl px-4 lg:px-0">
-        <div className="container flex items-center justify-between rounded-lg border border-black/40 bg-white/30 bg-clip-padding px-4 py-2 shadow-md backdrop-blur-sm dark:border-white dark:bg-black/30 dark:text-white">
-          <Avatar asChild>
-            <Link href="/">
-              <AvatarImage className="rounded-full border border-black hover:opacity-60" src="/avatar.png" />
-              <AvatarFallback>{defaultAuthor.name}</AvatarFallback>
-            </Link>
-          </Avatar>
-          <nav className="ml-auto space-x-6 text-sm font-medium">
-            <Navbar />
-          </nav>
-          <CommandDialogComponent />
-          <ModeToggle />
-        </div>
-      </header>
+    <>
+      <Navigation />
       <div className="order-last mt-[calc(theme(spacing.16)-theme(spacing.3))]"></div>
       <main>{children}</main>
       <Footer />
@@ -44,6 +24,6 @@ export default function RootLayout({ children }: RootLayoutProps) {
           }}
         />
       </div>
-    </div>
+    </>
   );
 }

app/(site)/page.tsx

@@ -47,7 +47,7 @@ export default async function Home() {
                       "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"
                     )}
                   >
-                    <h3 className="m-0 text-2xl font-bold leading-none text-foreground">{post.title}</h3>
+                    <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>
@@ -66,12 +66,17 @@ export default async function Home() {
               See all posts <ArrowRight className="ml-2 h-4 w-4" />
             </Link>
           </div>
-          <aside className="flex w-full flex-col items-center justify-center md:block">
+          <aside className="w-full">
             <Sidebar />
           </aside>
         </div>
       </div>
-      <CTA />
+      <CTA
+        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."
+        buttonText="Send me the emails"
+      />
       {aboutPage && (
         <div className="container max-w-6xl">
           <h2 className="mb-8 font-heading text-4xl font-bold">Who&apos;s this girl again?</h2>
@@ -81,7 +86,7 @@ export default async function Home() {
                 src="/avatar-home.png"
                 alt={defaultAuthor.name}
                 width={400}
-                height={400}
+                height={498}
                 className="h-auto w-72 -rotate-1 hover:rotate-3"
               />
               <div className="text-center">

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

@@ -66,7 +66,7 @@ export default async function PostPage({ params }: PostProps) {
       <nav aria-label="Breadcrumb">
         <ol role="list" className="hidden items-center gap-1 text-sm text-muted-foreground md:flex md:flex-row">
           <li>
-            <Link href="/" className="block transition hover:text-muted-foreground/70">
+            <Link href="/" className="block transition hover:text-muted-foreground/70" aria-label="Go to Home">
               <span className="sr-only"> Home </span>
               <Home size={14} />
             </Link>
@@ -105,7 +105,7 @@ export default async function PostPage({ params }: PostProps) {
           </li>
         </ol>
       </nav>
-      <div className="grid lg:grid-flow-col">
+      <div className="flex flex-col lg:flex-row">
         <div className="lg:hidden">
           <div className="mb-4 mt-1 text-sm leading-snug text-muted-foreground">
             <p className="mb-2">{`${post.readTimeMinutes} mins read`}</p>
@@ -142,7 +142,7 @@ export default async function PostPage({ params }: PostProps) {
             </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:max-w-2xl">
+        <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">
           <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>
@@ -151,9 +151,9 @@ export default async function PostPage({ params }: PostProps) {
           <Mdx code={post.body.code} />
           <hr className="my-4" />
           {post.tags && (
-            <ul className="m-0 flex list-none flex-row space-x-2 p-0 text-sm text-muted-foreground">
+            <ul className="m-0 list-none space-x-2 p-0 text-sm text-muted-foreground">
               {post.tags.map((tag: any) => (
-                <li className="p-0" key={tag.trim()}>
+                <li className="inline-block p-0" key={tag.trim()}>
                   {tag}
                 </li>
               ))}

app/(site)/projects/page.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 import { format, parseISO } from "date-fns";
 import { AlertTriangle } from "lucide-react";
 
-import { projects } from "@/lib/projectsData";
+import { projects } from "@/lib/projects-data";
 import { SpotlightCard } from "@/components/spotlight-card";
 
 export async function generateMetadata(): Promise<Metadata> {

app/(site)/uses/page.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 import { format, parseISO } from "date-fns";
 import { AlertTriangle } from "lucide-react";
 
-import { hardware, software } from "@/lib/usesData";
+import { hardware, software } from "@/lib/uses-data";
 
 export async function generateMetadata(): Promise<Metadata> {
   return {

app/(social)/social/page.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 import { Github, Instagram, Linkedin, Twitter, Youtube } from "lucide-react";
 
 import { defaultAuthor } from "@/lib/metadata";
-import { projects } from "@/lib/projectsData";
+import { projects } from "@/lib/projects-data";
 import { Button } from "@/components/ui/button";
 import CTA from "@/components/cta";
 import { Signature } from "@/components/signature";
@@ -60,7 +60,12 @@ export default async function SocialPage() {
         </div>
         <Signature />
       </div>
-      <CTA />
+      <CTA
+        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."
+        buttonText="Send me the emails"
+      />
     </>
   );
 }

components/cta.tsx

@@ -14,11 +14,17 @@ import { Input } from "@/components/ui/input";
 import { ToastAction } from "@/components/ui/toast";
 import { useToast } from "@/components/ui/use-toast";
 
+interface CTAProps {
+  title: string;
+  description?: string;
+  buttonText: string;
+}
+
 const formSchema = z.object({
   email: z.string().email(),
 });
 
-const CTA = () => {
+const CTA = ({ title, description, buttonText }: CTAProps) => {
   const { toast } = useToast();
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -27,7 +33,7 @@ const CTA = () => {
     },
   });
   function onSubmit(values: z.infer<typeof formSchema>) {
-    // TODO: Newsletter subbscriptions
+    // TODO: Newsletter subscriptions
     toast({
       title: "In progress...",
       description: "I'm still working on this feature.",
@@ -40,37 +46,32 @@ const CTA = () => {
     console.log(values);
   }
   return (
-    <section className="relative isolate my-24 overflow-hidden rounded-lg bg-primary py-6 text-primary-foreground shadow-md">
+    <section className="relative isolate my-24 overflow-hidden bg-primary py-6 text-primary-foreground">
       <div className="p-8 md:p-12">
         <div className="mx-auto max-w-lg text-center">
-          <h2 className="font-heading text-2xl font-bold md:text-3xl">I also write deep dives in email</h2>
+          <h2 className="font-heading text-2xl font-bold md:text-3xl">{title}</h2>
 
-          <p className="hidden text-muted-foreground sm:mt-4 sm:block">
-            I write about coding, design, digital nomad life, and solopreneurship. Join over 1,000 other developers in
-            getting better in business. Unsubscribe whenever.
-          </p>
+          <p className="hidden text-muted-foreground sm:mt-4 sm:block">{description}</p>
         </div>
 
         <div className="mx-auto mt-8 max-w-xl">
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-              <div className="flex w-full gap-2">
-                <FormField
-                  control={form.control}
-                  name="email"
-                  render={({ field }) => (
-                    <FormItem className="w-full">
-                      <FormControl>
-                        <Input type="email" placeholder="anakin.skywalker@darksi.de" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <Button type="submit" variant="secondary">
-                  <Mail className="mr-2 h-4 w-4" /> Send me the emails
-                </Button>
-              </div>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="flex w-full flex-col gap-3 md:flex-row">
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem className="flex-auto">
+                    <FormControl>
+                      <Input type="email" placeholder="anakin.skywalker@darksi.de" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button type="submit" variant="secondary" className="">
+                <Mail className="mr-2 h-4 w-4" /> {buttonText}
+              </Button>
             </form>
           </Form>
           <div className="mt-4 flex items-center justify-center">

components/hero-image.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 
 import { defaultAuthor } from "@/lib/metadata";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 
 interface HeroProps {
   title: string;
@@ -14,6 +15,12 @@ interface HeroProps {
 export function HeroImage({ title, subtitle }: HeroProps) {
   return (
     <div className="container flex max-w-6xl flex-col items-center md:flex-row">
+      <div className="mb-4 flex max-w-xl self-start sm:hidden">
+        <Avatar>
+          <AvatarImage className="rounded-full border border-primary" src="/avatar.png" alt={defaultAuthor.name} />
+          <AvatarFallback>{defaultAuthor.name}</AvatarFallback>
+        </Avatar>
+      </div>
       <div className="flex max-w-xl flex-col lg:mr-auto">
         <h1 className="font-heading text-5xl font-bold tracking-tight sm:text-6xl">{title}</h1>
         <h2 className="mt-6 font-heading text-lg text-muted-foreground">{subtitle}</h2>

components/hero-simple.tsx

@@ -12,11 +12,13 @@ interface HeroProps {
 
 export function HeroSimple({ title, subtitle }: HeroProps) {
   return (
-    <div className="container flex max-w-5xl flex-col items-center justify-center py-32 text-center">
-      <h1 className="mb-2 font-heading text-5xl font-bold leading-tight tracking-tight sm:text-6xl">{title}</h1>
+    <div className="container flex max-w-5xl flex-col items-center justify-center text-center sm:py-20 md:py-32">
+      <h1 className="mb-2 font-heading text-4xl font-bold leading-tight tracking-tight sm:text-5xl md:text-6xl">
+        {title}
+      </h1>
       <div className="flex content-center items-center justify-center">
         <Avatar>
-          <AvatarImage className="border-blac rounded-full border" src="/avatar.png" />
+          <AvatarImage className="rounded-full border border-primary" src="/avatar.png" alt={defaultAuthor.name} />
           <AvatarFallback>{defaultAuthor.name}</AvatarFallback>
         </Avatar>
         <p className="ml-2 font-bold text-muted-foreground">{defaultAuthor.handle}</p>

components/hero-video.tsx

@@ -2,7 +2,9 @@
 
 import * as React from "react";
 
+import { defaultAuthor } from "@/lib/metadata";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 
 interface HeroProps {
   title: string;
@@ -12,7 +14,13 @@ interface HeroProps {
 export function HeroVideo({ title, subtitle }: HeroProps) {
   return (
     <div className="container flex max-w-6xl flex-col items-center md:flex-row">
-      <div className="w-4/12">
+      <div className="mb-4 flex max-w-xl self-start sm:hidden">
+        <Avatar>
+          <AvatarImage className="rounded-full border border-primary" src="/avatar.png" alt={defaultAuthor.name} />
+          <AvatarFallback>{defaultAuthor.name}</AvatarFallback>
+        </Avatar>
+      </div>
+      <div className="hidden lg:block lg:w-4/12">
         <AspectRatio ratio={9 / 12}>
           <div className="rounded-lg bg-black shadow-lg">
             <iframe