diff --git a/examples/vercel-blog-starter/.gitignore b/examples/vercel-blog-starter/.gitignore new file mode 100644 index 0000000..fd3dbb5 --- /dev/null +++ b/examples/vercel-blog-starter/.gitignore @@ -0,0 +1,36 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/examples/vercel-blog-starter/README.md b/examples/vercel-blog-starter/README.md new file mode 100644 index 0000000..0d8003c --- /dev/null +++ b/examples/vercel-blog-starter/README.md @@ -0,0 +1,63 @@ +# A statically generated blog example using Next.js, Markdown, and TypeScript + +This is the existing [blog-starter](https://github.com/vercel/next.js/tree/canary/examples/blog-starter) plus TypeScript. + +This example showcases Next.js's [Static Generation](https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates) feature using Markdown files as the data source. + +The blog posts are stored in `/_posts` as Markdown files with front matter support. Adding a new Markdown file in there will create a new blog post. + +To create the blog posts we use [`remark`](https://github.com/remarkjs/remark) and [`remark-html`](https://github.com/remarkjs/remark-html) to convert the Markdown files into an HTML string, and then send it down as a prop to the page. The metadata of every post is handled by [`gray-matter`](https://github.com/jonschlinkert/gray-matter) and also sent in props to the page. + +## Demo + +[https://next-blog-starter.vercel.app/](https://next-blog-starter.vercel.app/) + +## Deploy your own + +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/blog-starter) + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/blog-starter&project-name=blog-starter&repository-name=blog-starter) + +### Related examples + +- [WordPress](/examples/cms-wordpress) +- [DatoCMS](/examples/cms-datocms) +- [Sanity](/examples/cms-sanity) +- [TakeShape](/examples/cms-takeshape) +- [Prismic](/examples/cms-prismic) +- [Contentful](/examples/cms-contentful) +- [Strapi](/examples/cms-strapi) +- [Agility CMS](/examples/cms-agilitycms) +- [Cosmic](/examples/cms-cosmic) +- [ButterCMS](/examples/cms-buttercms) +- [Storyblok](/examples/cms-storyblok) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent) +- [Umbraco Heartcore](/examples/cms-umbraco-heartcore) +- [Builder.io](/examples/cms-builder-io) +- [TinaCMS](/examples/cms-tina/) +- [Enterspeed](/examples/cms-enterspeed) + +## How to use + +Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: + +```bash +npx create-next-app --example blog-starter blog-starter-app +``` + +```bash +yarn create next-app --example blog-starter blog-starter-app +``` + +```bash +pnpm create next-app --example blog-starter blog-starter-app +``` + +Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions). + +Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). + +# Notes + +`blog-starter` uses [Tailwind CSS](https://tailwindcss.com) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3). diff --git a/examples/vercel-blog-starter/_posts/dynamic-routing.md b/examples/vercel-blog-starter/_posts/dynamic-routing.md new file mode 100644 index 0000000..44b0b31 --- /dev/null +++ b/examples/vercel-blog-starter/_posts/dynamic-routing.md @@ -0,0 +1,19 @@ +--- +title: "Dynamic Routing and Static Generation" +excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus." +coverImage: "/assets/blog/dynamic-routing/cover.jpg" +date: "2020-03-16T05:35:07.322Z" +author: + name: JJ Kasper + picture: "/assets/blog/authors/jj.jpeg" +ogImage: + url: "/assets/blog/dynamic-routing/cover.jpg" +--- + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies. + +Venenatis cras sed felis eget velit. Consectetur libero id faucibus nisl tincidunt. Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Volutpat consequat mauris nunc congue nisi vitae. Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod. + +## Lorem Ipsum + +Tristique senectus et netus et malesuada fames ac turpis. Ridiculous mus mauris vitae ultricies leo integer malesuada nunc vel. In mollis nunc sed id semper. Egestas tellus rutrum tellus pellentesque. Phasellus vestibulum lorem sed risus ultricies tristique nulla. Quis blandit turpis cursus in hac habitasse platea dictumst quisque. Eros donec ac odio tempor orci dapibus ultrices. Aliquam sem et tortor consequat id porta nibh. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Diam vulputate ut pharetra sit amet. Ut tellus elementum sagittis vitae et leo. Arcu non odio euismod lacinia at quis risus sed vulputate. diff --git a/examples/vercel-blog-starter/_posts/hello-world.md b/examples/vercel-blog-starter/_posts/hello-world.md new file mode 100644 index 0000000..e3fe9fe --- /dev/null +++ b/examples/vercel-blog-starter/_posts/hello-world.md @@ -0,0 +1,19 @@ +--- +title: "Learn How to Pre-render Pages Using Static Generation with Next.js" +excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus." +coverImage: "/assets/blog/hello-world/cover.jpg" +date: "2020-03-16T05:35:07.322Z" +author: + name: Tim Neutkens + picture: "/assets/blog/authors/tim.jpeg" +ogImage: + url: "/assets/blog/hello-world/cover.jpg" +--- + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies. + +Venenatis cras sed felis eget velit. Consectetur libero id faucibus nisl tincidunt. Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Volutpat consequat mauris nunc congue nisi vitae. Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod. + +## Lorem Ipsum + +Tristique senectus et netus et malesuada fames ac turpis. Ridiculous mus mauris vitae ultricies leo integer malesuada nunc vel. In mollis nunc sed id semper. Egestas tellus rutrum tellus pellentesque. Phasellus vestibulum lorem sed risus ultricies tristique nulla. Quis blandit turpis cursus in hac habitasse platea dictumst quisque. Eros donec ac odio tempor orci dapibus ultrices. Aliquam sem et tortor consequat id porta nibh. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Diam vulputate ut pharetra sit amet. Ut tellus elementum sagittis vitae et leo. Arcu non odio euismod lacinia at quis risus sed vulputate. diff --git a/examples/vercel-blog-starter/_posts/preview.md b/examples/vercel-blog-starter/_posts/preview.md new file mode 100644 index 0000000..588bf9d --- /dev/null +++ b/examples/vercel-blog-starter/_posts/preview.md @@ -0,0 +1,19 @@ +--- +title: "Preview Mode for Static Generation" +excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus." +coverImage: "/assets/blog/preview/cover.jpg" +date: "2020-03-16T05:35:07.322Z" +author: + name: Joe Haddad + picture: "/assets/blog/authors/joe.jpeg" +ogImage: + url: "/assets/blog/preview/cover.jpg" +--- + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies. + +Venenatis cras sed felis eget velit. Consectetur libero id faucibus nisl tincidunt. Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Volutpat consequat mauris nunc congue nisi vitae. Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod. + +## Lorem Ipsum + +Tristique senectus et netus et malesuada fames ac turpis. Ridiculous mus mauris vitae ultricies leo integer malesuada nunc vel. In mollis nunc sed id semper. Egestas tellus rutrum tellus pellentesque. Phasellus vestibulum lorem sed risus ultricies tristique nulla. Quis blandit turpis cursus in hac habitasse platea dictumst quisque. Eros donec ac odio tempor orci dapibus ultrices. Aliquam sem et tortor consequat id porta nibh. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Diam vulputate ut pharetra sit amet. Ut tellus elementum sagittis vitae et leo. Arcu non odio euismod lacinia at quis risus sed vulputate. diff --git a/examples/vercel-blog-starter/package.json b/examples/vercel-blog-starter/package.json new file mode 100644 index 0000000..8293f65 --- /dev/null +++ b/examples/vercel-blog-starter/package.json @@ -0,0 +1,27 @@ +{ + "private": true, + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "classnames": "^2.5.1", + "date-fns": "^3.6.0", + "gray-matter": "^4.0.3", + "next": "latest", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "remark": "^15.0.1", + "remark-html": "^16.0.1" + }, + "devDependencies": { + "@types/node": "^20.14.8", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", + "autoprefixer": "^10.4.19", + "postcss": "^8.4.38", + "tailwindcss": "^3.4.4", + "typescript": "^5.5.2" + } +} diff --git a/examples/vercel-blog-starter/postcss.config.js b/examples/vercel-blog-starter/postcss.config.js new file mode 100644 index 0000000..12a703d --- /dev/null +++ b/examples/vercel-blog-starter/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/examples/vercel-blog-starter/public/assets/blog/authors/jj.jpeg b/examples/vercel-blog-starter/public/assets/blog/authors/jj.jpeg new file mode 100644 index 0000000..e3d5214 Binary files /dev/null and b/examples/vercel-blog-starter/public/assets/blog/authors/jj.jpeg differ diff --git a/examples/vercel-blog-starter/public/assets/blog/authors/joe.jpeg b/examples/vercel-blog-starter/public/assets/blog/authors/joe.jpeg new file mode 100644 index 0000000..d9677ad Binary files /dev/null and b/examples/vercel-blog-starter/public/assets/blog/authors/joe.jpeg differ diff --git a/examples/vercel-blog-starter/public/assets/blog/authors/tim.jpeg b/examples/vercel-blog-starter/public/assets/blog/authors/tim.jpeg new file mode 100644 index 0000000..cc49257 Binary files /dev/null and b/examples/vercel-blog-starter/public/assets/blog/authors/tim.jpeg differ diff --git a/examples/vercel-blog-starter/public/assets/blog/dynamic-routing/cover.jpg b/examples/vercel-blog-starter/public/assets/blog/dynamic-routing/cover.jpg new file mode 100644 index 0000000..c660c92 Binary files /dev/null and b/examples/vercel-blog-starter/public/assets/blog/dynamic-routing/cover.jpg differ diff --git a/examples/vercel-blog-starter/public/assets/blog/hello-world/cover.jpg b/examples/vercel-blog-starter/public/assets/blog/hello-world/cover.jpg new file mode 100644 index 0000000..33b7dc4 Binary files /dev/null and b/examples/vercel-blog-starter/public/assets/blog/hello-world/cover.jpg differ diff --git a/examples/vercel-blog-starter/public/assets/blog/preview/cover.jpg b/examples/vercel-blog-starter/public/assets/blog/preview/cover.jpg new file mode 100644 index 0000000..6a975fb Binary files /dev/null and b/examples/vercel-blog-starter/public/assets/blog/preview/cover.jpg differ diff --git a/examples/vercel-blog-starter/public/favicon/android-chrome-192x192.png b/examples/vercel-blog-starter/public/favicon/android-chrome-192x192.png new file mode 100644 index 0000000..2f07282 Binary files /dev/null and b/examples/vercel-blog-starter/public/favicon/android-chrome-192x192.png differ diff --git a/examples/vercel-blog-starter/public/favicon/android-chrome-512x512.png b/examples/vercel-blog-starter/public/favicon/android-chrome-512x512.png new file mode 100644 index 0000000..dbb0fae Binary files /dev/null and b/examples/vercel-blog-starter/public/favicon/android-chrome-512x512.png differ diff --git a/examples/vercel-blog-starter/public/favicon/apple-touch-icon.png b/examples/vercel-blog-starter/public/favicon/apple-touch-icon.png new file mode 100644 index 0000000..8f4033b Binary files /dev/null and b/examples/vercel-blog-starter/public/favicon/apple-touch-icon.png differ diff --git a/examples/vercel-blog-starter/public/favicon/browserconfig.xml b/examples/vercel-blog-starter/public/favicon/browserconfig.xml new file mode 100644 index 0000000..9824d87 --- /dev/null +++ b/examples/vercel-blog-starter/public/favicon/browserconfig.xml @@ -0,0 +1,9 @@ + + + + + + #000000 + + + diff --git a/examples/vercel-blog-starter/public/favicon/favicon-16x16.png b/examples/vercel-blog-starter/public/favicon/favicon-16x16.png new file mode 100644 index 0000000..29deaf6 Binary files /dev/null and b/examples/vercel-blog-starter/public/favicon/favicon-16x16.png differ diff --git a/examples/vercel-blog-starter/public/favicon/favicon-32x32.png b/examples/vercel-blog-starter/public/favicon/favicon-32x32.png new file mode 100644 index 0000000..e3b4277 Binary files /dev/null and b/examples/vercel-blog-starter/public/favicon/favicon-32x32.png differ diff --git a/examples/vercel-blog-starter/public/favicon/favicon.ico b/examples/vercel-blog-starter/public/favicon/favicon.ico new file mode 100644 index 0000000..ea2f437 Binary files /dev/null and b/examples/vercel-blog-starter/public/favicon/favicon.ico differ diff --git a/examples/vercel-blog-starter/public/favicon/mstile-150x150.png b/examples/vercel-blog-starter/public/favicon/mstile-150x150.png new file mode 100644 index 0000000..f2dfd90 Binary files /dev/null and b/examples/vercel-blog-starter/public/favicon/mstile-150x150.png differ diff --git a/examples/vercel-blog-starter/public/favicon/safari-pinned-tab.svg b/examples/vercel-blog-starter/public/favicon/safari-pinned-tab.svg new file mode 100644 index 0000000..72ab6e0 --- /dev/null +++ b/examples/vercel-blog-starter/public/favicon/safari-pinned-tab.svg @@ -0,0 +1,33 @@ + + + + +Created by potrace 1.11, written by Peter Selinger 2001-2013 + + + + + + + + + + diff --git a/examples/vercel-blog-starter/public/favicon/site.webmanifest b/examples/vercel-blog-starter/public/favicon/site.webmanifest new file mode 100644 index 0000000..a672d9a --- /dev/null +++ b/examples/vercel-blog-starter/public/favicon/site.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "Next.js", + "short_name": "Next.js", + "icons": [ + { + "src": "/favicons/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/favicons/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#000000", + "background_color": "#000000", + "display": "standalone" +} diff --git a/examples/vercel-blog-starter/src/app/_components/alert.tsx b/examples/vercel-blog-starter/src/app/_components/alert.tsx new file mode 100644 index 0000000..d758ba0 --- /dev/null +++ b/examples/vercel-blog-starter/src/app/_components/alert.tsx @@ -0,0 +1,48 @@ +import Container from "@/app/_components/container"; +import { EXAMPLE_PATH } from "@/lib/constants"; +import cn from "classnames"; + +type Props = { + preview?: boolean; +}; + +const Alert = ({ preview }: Props) => { + return ( +
+ +
+ {preview ? ( + <> + This page is a preview.{" "} + + Click here + {" "} + to exit preview mode. + + ) : ( + <> + The source code for this blog is{" "} + + available on GitHub + + . + + )} +
+ +
+ ); +}; + +export default Alert; diff --git a/examples/vercel-blog-starter/src/app/_components/avatar.tsx b/examples/vercel-blog-starter/src/app/_components/avatar.tsx new file mode 100644 index 0000000..9c2ea4d --- /dev/null +++ b/examples/vercel-blog-starter/src/app/_components/avatar.tsx @@ -0,0 +1,15 @@ +type Props = { + name: string; + picture: string; +}; + +const Avatar = ({ name, picture }: Props) => { + return ( +
+ {name} +
{name}
+
+ ); +}; + +export default Avatar; diff --git a/examples/vercel-blog-starter/src/app/_components/container.tsx b/examples/vercel-blog-starter/src/app/_components/container.tsx new file mode 100644 index 0000000..17458eb --- /dev/null +++ b/examples/vercel-blog-starter/src/app/_components/container.tsx @@ -0,0 +1,9 @@ +type Props = { + children?: React.ReactNode; +}; + +const Container = ({ children }: Props) => { + return
{children}
; +}; + +export default Container; diff --git a/examples/vercel-blog-starter/src/app/_components/cover-image.tsx b/examples/vercel-blog-starter/src/app/_components/cover-image.tsx new file mode 100644 index 0000000..dc1c092 --- /dev/null +++ b/examples/vercel-blog-starter/src/app/_components/cover-image.tsx @@ -0,0 +1,36 @@ +import cn from "classnames"; +import Link from "next/link"; +import Image from "next/image"; + +type Props = { + title: string; + src: string; + slug?: string; +}; + +const CoverImage = ({ title, src, slug }: Props) => { + const image = ( + {`Cover + ); + return ( +
+ {slug ? ( + + {image} + + ) : ( + image + )} +
+ ); +}; + +export default CoverImage; diff --git a/examples/vercel-blog-starter/src/app/_components/date-formatter.tsx b/examples/vercel-blog-starter/src/app/_components/date-formatter.tsx new file mode 100644 index 0000000..b092f5e --- /dev/null +++ b/examples/vercel-blog-starter/src/app/_components/date-formatter.tsx @@ -0,0 +1,12 @@ +import { parseISO, format } from "date-fns"; + +type Props = { + dateString: string; +}; + +const DateFormatter = ({ dateString }: Props) => { + const date = parseISO(dateString); + return ; +}; + +export default DateFormatter; diff --git a/examples/vercel-blog-starter/src/app/_components/footer.tsx b/examples/vercel-blog-starter/src/app/_components/footer.tsx new file mode 100644 index 0000000..c764a82 --- /dev/null +++ b/examples/vercel-blog-starter/src/app/_components/footer.tsx @@ -0,0 +1,32 @@ +import Container from "@/app/_components/container"; +import { EXAMPLE_PATH } from "@/lib/constants"; + +export function Footer() { + return ( + + ); +} + +export default Footer; diff --git a/examples/vercel-blog-starter/src/app/_components/header.tsx b/examples/vercel-blog-starter/src/app/_components/header.tsx new file mode 100644 index 0000000..0aa782e --- /dev/null +++ b/examples/vercel-blog-starter/src/app/_components/header.tsx @@ -0,0 +1,14 @@ +import Link from "next/link"; + +const Header = () => { + return ( +

+ + Blog + + . +

+ ); +}; + +export default Header; diff --git a/examples/vercel-blog-starter/src/app/_components/hero-post.tsx b/examples/vercel-blog-starter/src/app/_components/hero-post.tsx new file mode 100644 index 0000000..0eef0d0 --- /dev/null +++ b/examples/vercel-blog-starter/src/app/_components/hero-post.tsx @@ -0,0 +1,47 @@ +import Avatar from "@/app/_components/avatar"; +import CoverImage from "@/app/_components/cover-image"; +import { type Author } from "@/interfaces/author"; +import Link from "next/link"; +import DateFormatter from "./date-formatter"; + +type Props = { + title: string; + coverImage: string; + date: string; + excerpt: string; + author: Author; + slug: string; +}; + +export function HeroPost({ + title, + coverImage, + date, + excerpt, + author, + slug, +}: Props) { + return ( +
+
+ +
+
+
+

+ + {title} + +

+
+ +
+
+
+

{excerpt}

+ +
+
+
+ ); +} diff --git a/examples/vercel-blog-starter/src/app/_components/intro.tsx b/examples/vercel-blog-starter/src/app/_components/intro.tsx new file mode 100644 index 0000000..1364d14 --- /dev/null +++ b/examples/vercel-blog-starter/src/app/_components/intro.tsx @@ -0,0 +1,21 @@ +import { CMS_NAME } from "@/lib/constants"; + +export function Intro() { + return ( +
+

+ Blog. +

+

+ A statically generated blog example using{" "} + + Next.js + {" "} + and {CMS_NAME}. +

+
+ ); +} diff --git a/examples/vercel-blog-starter/src/app/_components/markdown-styles.module.css b/examples/vercel-blog-starter/src/app/_components/markdown-styles.module.css new file mode 100644 index 0000000..95d4f8b --- /dev/null +++ b/examples/vercel-blog-starter/src/app/_components/markdown-styles.module.css @@ -0,0 +1,18 @@ +.markdown { + @apply text-lg leading-relaxed; +} + +.markdown p, +.markdown ul, +.markdown ol, +.markdown blockquote { + @apply my-6; +} + +.markdown h2 { + @apply text-3xl mt-12 mb-4 leading-snug; +} + +.markdown h3 { + @apply text-2xl mt-8 mb-4 leading-snug; +} diff --git a/examples/vercel-blog-starter/src/app/_components/more-stories.tsx b/examples/vercel-blog-starter/src/app/_components/more-stories.tsx new file mode 100644 index 0000000..17191da --- /dev/null +++ b/examples/vercel-blog-starter/src/app/_components/more-stories.tsx @@ -0,0 +1,29 @@ +import { Post } from "@/interfaces/post"; +import { PostPreview } from "./post-preview"; + +type Props = { + posts: Post[]; +}; + +export function MoreStories({ posts }: Props) { + return ( +
+

+ More Stories +

+
+ {posts.map((post) => ( + + ))} +
+
+ ); +} diff --git a/examples/vercel-blog-starter/src/app/_components/post-body.tsx b/examples/vercel-blog-starter/src/app/_components/post-body.tsx new file mode 100644 index 0000000..065883c --- /dev/null +++ b/examples/vercel-blog-starter/src/app/_components/post-body.tsx @@ -0,0 +1,16 @@ +import markdownStyles from "./markdown-styles.module.css"; + +type Props = { + content: string; +}; + +export function PostBody({ content }: Props) { + return ( +
+
+
+ ); +} diff --git a/examples/vercel-blog-starter/src/app/_components/post-header.tsx b/examples/vercel-blog-starter/src/app/_components/post-header.tsx new file mode 100644 index 0000000..f377766 --- /dev/null +++ b/examples/vercel-blog-starter/src/app/_components/post-header.tsx @@ -0,0 +1,34 @@ +import Avatar from "./avatar"; +import CoverImage from "./cover-image"; +import DateFormatter from "./date-formatter"; +import { PostTitle } from "@/app/_components/post-title"; +import { type Author } from "@/interfaces/author"; + +type Props = { + title: string; + coverImage: string; + date: string; + author: Author; +}; + +export function PostHeader({ title, coverImage, date, author }: Props) { + return ( + <> + {title} +
+ +
+
+ +
+
+
+ +
+
+ +
+
+ + ); +} diff --git a/examples/vercel-blog-starter/src/app/_components/post-preview.tsx b/examples/vercel-blog-starter/src/app/_components/post-preview.tsx new file mode 100644 index 0000000..07415d1 --- /dev/null +++ b/examples/vercel-blog-starter/src/app/_components/post-preview.tsx @@ -0,0 +1,41 @@ +import { type Author } from "@/interfaces/author"; +import Link from "next/link"; +import Avatar from "./avatar"; +import CoverImage from "./cover-image"; +import DateFormatter from "./date-formatter"; + +type Props = { + title: string; + coverImage: string; + date: string; + excerpt: string; + author: Author; + slug: string; +}; + +export function PostPreview({ + title, + coverImage, + date, + excerpt, + author, + slug, +}: Props) { + return ( +
+
+ +
+

+ + {title} + +

+
+ +
+

{excerpt}

+ +
+ ); +} diff --git a/examples/vercel-blog-starter/src/app/_components/post-title.tsx b/examples/vercel-blog-starter/src/app/_components/post-title.tsx new file mode 100644 index 0000000..5d2dc0b --- /dev/null +++ b/examples/vercel-blog-starter/src/app/_components/post-title.tsx @@ -0,0 +1,13 @@ +import { ReactNode } from "react"; + +type Props = { + children?: ReactNode; +}; + +export function PostTitle({ children }: Props) { + return ( +

+ {children} +

+ ); +} diff --git a/examples/vercel-blog-starter/src/app/_components/section-separator.tsx b/examples/vercel-blog-starter/src/app/_components/section-separator.tsx new file mode 100644 index 0000000..62412c0 --- /dev/null +++ b/examples/vercel-blog-starter/src/app/_components/section-separator.tsx @@ -0,0 +1,3 @@ +export function SectionSeparator() { + return
; +} diff --git a/examples/vercel-blog-starter/src/app/_components/switch.module.css b/examples/vercel-blog-starter/src/app/_components/switch.module.css new file mode 100644 index 0000000..9ab3692 --- /dev/null +++ b/examples/vercel-blog-starter/src/app/_components/switch.module.css @@ -0,0 +1,56 @@ +.switch { + all: unset; + position: absolute; + right: 20px; + top: 70px; + display: inline-block; + color: currentColor; + border-radius: 50%; + border: 1px dashed currentColor; + cursor: pointer; + --size: 24px; + height: var(--size); + width: var(--size); + transition: all 0.3s ease-in-out 0s !important; +} + +[data-mode="system"] .switch::after { + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; + font-weight: 600; + font-size: calc(var(--size) / 2); + display: flex; + align-items: center; + justify-content: center; + content: "A"; +} + +[data-mode="light"] .switch { + box-shadow: 0 0 50px 10px yellow; + background-color: yellow; + border: 1px solid orangered; +} + +[data-mode="dark"] .switch { + box-shadow: calc(var(--size) / 4) calc(var(--size) / -4) calc(var(--size) / 8) + inset #fff; + border: none; + background: transparent; + animation: n linear 0.5s; +} + +@keyframes n { + 40% { + transform: rotate(-15deg); + } + 80% { + transform: rotate(10deg); + } + 0%, + 100% { + transform: rotate(0deg); + } +} diff --git a/examples/vercel-blog-starter/src/app/_components/theme-switcher.tsx b/examples/vercel-blog-starter/src/app/_components/theme-switcher.tsx new file mode 100644 index 0000000..2b5ee30 --- /dev/null +++ b/examples/vercel-blog-starter/src/app/_components/theme-switcher.tsx @@ -0,0 +1,113 @@ +"use client"; + +import styles from "./switch.module.css"; +import { memo, useEffect, useState } from "react"; + +declare global { + var updateDOM: () => void; +} + +type ColorSchemePreference = "system" | "dark" | "light"; + +const STORAGE_KEY = "nextjs-blog-starter-theme"; +const modes: ColorSchemePreference[] = ["system", "dark", "light"]; + +/** to reuse updateDOM function defined inside injected script */ + +/** function to be injected in script tag for avoiding FOUC (Flash of Unstyled Content) */ +export const NoFOUCScript = (storageKey: string) => { + /* can not use outside constants or function as this script will be injected in a different context */ + const [SYSTEM, DARK, LIGHT] = ["system", "dark", "light"]; + + /** Modify transition globally to avoid patched transitions */ + const modifyTransition = () => { + const css = document.createElement("style"); + css.textContent = "*,*:after,*:before{transition:none !important;}"; + document.head.appendChild(css); + + return () => { + /* Force restyle */ + getComputedStyle(document.body); + /* Wait for next tick before removing */ + setTimeout(() => document.head.removeChild(css), 1); + }; + }; + + const media = matchMedia(`(prefers-color-scheme: ${DARK})`); + + /** function to add remove dark class */ + window.updateDOM = () => { + const restoreTransitions = modifyTransition(); + const mode = localStorage.getItem(storageKey) ?? SYSTEM; + const systemMode = media.matches ? DARK : LIGHT; + const resolvedMode = mode === SYSTEM ? systemMode : mode; + const classList = document.documentElement.classList; + if (resolvedMode === DARK) classList.add(DARK); + else classList.remove(DARK); + document.documentElement.setAttribute("data-mode", mode); + restoreTransitions(); + }; + window.updateDOM(); + media.addEventListener("change", window.updateDOM); +}; + +let updateDOM: () => void; + +/** + * Switch button to quickly toggle user preference. + */ +const Switch = () => { + const [mode, setMode] = useState( + () => + ((typeof localStorage !== "undefined" && + localStorage.getItem(STORAGE_KEY)) ?? + "system") as ColorSchemePreference, + ); + + useEffect(() => { + // store global functions to local variables to avoid any interference + updateDOM = window.updateDOM; + /** Sync the tabs */ + addEventListener("storage", (e: StorageEvent): void => { + e.key === STORAGE_KEY && setMode(e.newValue as ColorSchemePreference); + }); + }, []); + + useEffect(() => { + localStorage.setItem(STORAGE_KEY, mode); + updateDOM(); + }, [mode]); + + /** toggle mode */ + const handleModeSwitch = () => { + const index = modes.indexOf(mode); + setMode(modes[(index + 1) % modes.length]); + }; + return ( +