Design tweaks

Author: prototypa

.vscode/settings.json

@@ -1,7 +1,5 @@
 {
-  "css.customData": [
-    "./vscode.tailwind.json"
-  ],
+  "css.customData": ["./vscode.tailwind.json"],
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true
-}
+}

app/(blog)/[slug]/page.js

@@ -0,0 +1,59 @@
+export const dynamicParams = false;
+
+import fs from 'fs';
+import { join } from 'path';
+import matter from 'gray-matter';
+
+import md from 'markdown-it';
+import { notFound } from 'next/navigation';
+import { findLatestPosts } from '../../../src/utils/posts';
+
+const postsDirectory = join(process.cwd(), 'src/blog');
+const getFormattedDate = (date) => date;
+
+export async function generateStaticParams() {
+  const posts = await findLatestPosts();
+  return posts.map(({ slug }) => ({ slug }));
+}
+
+async function fetchData(params) {
+  const slug = params?.slug;
+  try {
+    const readFile = fs.readFileSync(join(postsDirectory, `${slug}.md`), 'utf-8');
+    const { data: frontmatter, content } = matter(readFile);
+    return {
+      slug,
+      ...frontmatter,
+      content,
+    };
+  } catch (e) {}
+
+  return null;
+}
+
+export default async function Page({ params }) {
+  const post = await fetchData(params);
+
+  if (!post) {
+    return notFound();
+  }
+  return (
+    <section class="mx-auto py-8 sm:py-16 lg:py-20">
+      <article>
+        <header class={post.image ? 'text-center' : ''}>
+          <p class="mx-auto max-w-3xl px-4 sm:px-6">
+            <time dateTime={post.publishDate}>{getFormattedDate(post.publishDate)}</time> ~{' '}
+            {/* {Math.ceil(post.readingTime)} min read */}
+          </p>
+          <h1 className="leading-tighter font-heading mx-auto mb-8 max-w-3xl px-4 text-4xl font-bold tracking-tighter sm:px-6 md:text-5xl">
+            {post.title}
+          </h1>
+        </header>
+        <div
+          className="prose-md prose-headings:font-heading prose-headings:leading-tighter container prose prose-lg mx-auto mt-8 max-w-3xl px-6 prose-headings:font-bold prose-headings:tracking-tighter prose-a:text-primary-600 prose-img:rounded-md prose-img:shadow-lg dark:prose-invert dark:prose-headings:text-slate-300 dark:prose-a:text-primary-400 sm:px-6 lg:prose-xl"
+          dangerouslySetInnerHTML={{ __html: md().render(post.content) }}
+        />
+      </article>
+    </section>
+  );
+}

app/(blog)/blog/page.js

@@ -0,0 +1,20 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { findLatestPosts } from '~/utils/posts';
+
+export default async function Home({}) {
+  const posts = await findLatestPosts();
+  return (
+    <div className="grid grid-cols-1 p-4 md:grid-cols-3 md:p-0 lg:grid-cols-4">
+      {posts.map(({ slug, frontmatter }) => (
+        <div key={slug} className="m-2 flex flex-col overflow-hidden rounded-xl border border-gray-200 shadow-lg">
+          <Link href={`/${slug}`}>
+            <Image width={650} height={340} alt={frontmatter.title} src={`/${frontmatter.image}`} />
+            <h1 className="p-4">{frontmatter.title}</h1>
+          </Link>
+        </div>
+      ))}
+    </div>
+  );
+}

app/page.js

@@ -1,33 +1,25 @@
-import Header from "~/components/widgets/Header";
-import Hero from "~/components/widgets/Hero";
-import Features3 from "~/components/widgets/Features3";
-import Announcement from "~/components/widgets/Announcement";
-import Steps from "~/components/widgets/Steps";
-import Features2 from "~/components/widgets/Features2";
-import SocialProof from "../src/components/widgets/SocialProof";
-import Testimonial from "~/components/widgets/Testimonial";
-import FAQs from "~/components/widgets/FAQs";
-import Pricing from "~/components/widgets/Pricing";
-import CallToAction from "~/components/widgets/CallToAction";
-import Footer from "~/components/widgets/Footer";
+import Hero from '~/components/widgets/Hero';
+import Features3 from '~/components/widgets/Features3';
+import Steps from '~/components/widgets/Steps';
+import Features2 from '~/components/widgets/Features2';
+import SocialProof from '../src/components/widgets/SocialProof';
+import Testimonial from '~/components/widgets/Testimonial';
+import FAQs from '~/components/widgets/FAQs';
+import Pricing from '~/components/widgets/Pricing';
+import CallToAction from '~/components/widgets/CallToAction';
 
 export default function Page() {
   return (
     <>
-      <Announcement />
-      <Header />
-      <main>
-        <Hero />
-        <SocialProof />
-        <Features3 />
-        <Features2 />
-        <Steps />
-        <Testimonial />
-        <FAQs />
-        <Pricing />
-        <CallToAction />
-      </main>
-      <Footer />
+      <Hero />
+      <SocialProof />
+      <Features3 />
+      <Features2 />
+      <Steps />
+      <Testimonial />
+      <FAQs />
+      <Pricing />
+      <CallToAction />
     </>
   );
 }

next-sitemap.config.js

@@ -2,4 +2,4 @@
 module.exports = {
   siteUrl: process.env.SITE_URL || 'https://tailnext.vercel.app',
   generateRobotsTxt: true,
-}
+};

next.config.js

@@ -1,8 +1,18 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
+  swcMinify: true,
   images: {
-    unoptimized: true,
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'images.unsplash.com',
+      },
+      {
+        protocol: 'https',
+        hostname: 'source.unsplash.com',
+      },
+    ],
   },
   experimental: { appDir: true },
 };