├── .gitignore
├── README.md
├── _posts
    ├── dynamic-routing.md
    ├── hello-world.md
    └── preview.md
├── components
    ├── alert.js
    ├── avatar.js
    ├── container.js
    ├── cover-image.js
    ├── date-formater.js
    ├── footer.js
    ├── header.js
    ├── hero-post.js
    ├── intro.js
    ├── layout.js
    ├── markdown-styles.module.css
    ├── meta.js
    ├── more-stories.js
    ├── post-body.js
    ├── post-header.js
    ├── post-preview.js
    ├── post-title.js
    └── section-separator.js
├── lib
    ├── api.js
    ├── constants.js
    └── markdownToHtml.js
├── package.json
├── pages
    ├── _app.js
    ├── _document.js
    ├── index.js
    └── posts
    │   └── [slug].js
├── postcss.config.js
├── public
    ├── assets
    │   └── blog
    │   │   ├── authors
    │   │       ├── jj.jpeg
    │   │       ├── joe.jpeg
    │   │       └── tim.jpeg
    │   │   ├── dynamic-routing
    │   │       └── cover.jpg
    │   │   ├── hello-world
    │   │       └── cover.jpg
    │   │   └── preview
    │   │       └── cover.jpg
    └── favicon
    │   ├── android-chrome-192x192.png
    │   ├── android-chrome-512x512.png
    │   ├── apple-touch-icon.png
    │   ├── browserconfig.xml
    │   ├── favicon-16x16.png
    │   ├── favicon-32x32.png
    │   ├── favicon.ico
    │   ├── mstile-150x150.png
    │   ├── safari-pinned-tab.svg
    │   └── site.webmanifest
├── styles
    └── index.css
└── tailwind.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # A statically generated blog example using Next.js and Markdown
 2 | 
 3 | This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using markdown files as the data source.
 4 | 
 5 | 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.
 6 | 
 7 | 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.
 8 | 
 9 | ## Demo
10 | 
11 | [https://next-blog-starter.now.sh/](https://next-blog-starter.now.sh/)
12 | 
13 | ## Deploy your own
14 | 
15 | Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
16 | 
17 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/blog-starter)
18 | 
19 | ### Related examples
20 | 
21 | - [WordPress](/examples/cms-wordpress)
22 | - [DatoCMS](/examples/cms-datocms)
23 | - [Sanity](/examples/cms-sanity)
24 | - [TakeShape](/examples/cms-takeshape)
25 | - [Prismic](/examples/cms-prismic)
26 | - [Contentful](/examples/cms-contentful)
27 | - [Strapi](/examples/cms-strapi)
28 | - [Agility CMS](/examples/cms-agilitycms)
29 | - [Cosmic](/examples/cms-cosmic)
30 | - [ButterCMS](/examples/cms-buttercms)
31 | - [Storyblok](/examples/cms-storyblok)
32 | - [GraphCMS](/examples/cms-graphcms)
33 | 
34 | ## How to use
35 | 
36 | ### Using `create-next-app`
37 | 
38 | Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
39 | 
40 | ```bash
41 | npx create-next-app --example blog-starter blog-starter-app
42 | # or
43 | yarn create next-app --example blog-starter blog-starter-app
44 | ```
45 | 
46 | ### Download manually
47 | 
48 | Download the example:
49 | 
50 | ```bash
51 | curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/blog-starter
52 | cd blog-starter
53 | ```
54 | 
55 | Install dependencies and run the example:
56 | 
57 | ```bash
58 | npm install
59 | npm run dev
60 | 
61 | # or
62 | 
63 | yarn install
64 | yarn dev
65 | ```
66 | 
67 | 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).
68 | 
69 | Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
70 | 
71 | # Notes
72 | 
73 | This blog-starter uses [Tailwind CSS](https://tailwindcss.com). To control the generated stylesheet's filesize, this example uses Tailwind CSS' v1.4 [`purge` option](https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css) to remove unused CSS.
74 | 


--------------------------------------------------------------------------------
/_posts/dynamic-routing.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: 'Dynamic Routing and Static Generation'
 3 | 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.'
 4 | coverImage: '/assets/blog/dynamic-routing/cover.jpg'
 5 | date: '2020-03-16T05:35:07.322Z'
 6 | author:
 7 |   name: JJ Kasper
 8 |   picture: '/assets/blog/authors/jj.jpeg'
 9 | ogImage:
10 |   url: '/assets/blog/dynamic-routing/cover.jpg'
11 | ---
12 | 
13 | 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.
14 | 
15 | 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.
16 | 
17 | ## Lorem Ipsum
18 | 
19 | 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.
20 | 


--------------------------------------------------------------------------------
/_posts/hello-world.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: 'Learn How to Pre-render Pages Using Static Generation with Next.js'
 3 | 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.'
 4 | coverImage: '/assets/blog/hello-world/cover.jpg'
 5 | date: '2020-03-16T05:35:07.322Z'
 6 | author:
 7 |   name: Tim Neutkens
 8 |   picture: '/assets/blog/authors/tim.jpeg'
 9 | ogImage:
10 |   url: '/assets/blog/hello-world/cover.jpg'
11 | ---
12 | 
13 | 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.
14 | 
15 | 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.
16 | 
17 | ## Lorem Ipsum
18 | 
19 | 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.
20 | 


--------------------------------------------------------------------------------
/_posts/preview.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: 'Preview Mode for Static Generation'
 3 | 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.'
 4 | coverImage: '/assets/blog/preview/cover.jpg'
 5 | date: '2020-03-16T05:35:07.322Z'
 6 | author:
 7 |   name: Joe Haddad
 8 |   picture: '/assets/blog/authors/joe.jpeg'
 9 | ogImage:
10 |   url: '/assets/blog/preview/cover.jpg'
11 | ---
12 | 
13 | 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.
14 | 
15 | 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.
16 | 
17 | ## Lorem Ipsum
18 | 
19 | 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.
20 | 


--------------------------------------------------------------------------------
/components/alert.js:
--------------------------------------------------------------------------------
 1 | import Container from './container'
 2 | import cn from 'classnames'
 3 | import { EXAMPLE_PATH } from '../lib/constants'
 4 | 
 5 | export default function Alert({ preview }) {
 6 |   return (
 7 |     <div
 8 |       className={cn('border-b', {
 9 |         'bg-accent-7 border-accent-7 text-white': preview,
10 |         'bg-accent-1 border-accent-2': !preview,
11 |       })}
12 |     >
13 |       <Container>
14 |         <div className="py-2 text-center text-sm">
15 |           {preview ? (
16 |             <>
17 |               This is page is a preview.{' '}
18 |               <a
19 |                 href="/api/exit-preview"
20 |                 className="underline hover:text-cyan duration-200 transition-colors"
21 |               >
22 |                 Click here
23 |               </a>{' '}
24 |               to exit preview mode.
25 |             </>
26 |           ) : (
27 |             <>
28 |               The source code for this blog is{' '}
29 |               <a
30 |                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
31 |                 className="underline hover:text-success duration-200 transition-colors"
32 |               >
33 |                 available on GitHub
34 |               </a>
35 |               .
36 |             </>
37 |           )}
38 |         </div>
39 |       </Container>
40 |     </div>
41 |   )
42 | }
43 | 


--------------------------------------------------------------------------------
/components/avatar.js:
--------------------------------------------------------------------------------
1 | export default function Avatar({ name, picture }) {
2 |   return (
3 |     <div className="flex items-center">
4 |       <img src={picture} className="w-12 h-12 rounded-full mr-4" alt={name} />
5 |       <div className="text-xl font-bold">{name}</div>
6 |     </div>
7 |   )
8 | }
9 | 


--------------------------------------------------------------------------------
/components/container.js:
--------------------------------------------------------------------------------
1 | export default function Container({ children }) {
2 |   return <div className="container mx-auto px-5">{children}</div>
3 | }
4 | 


--------------------------------------------------------------------------------
/components/cover-image.js:
--------------------------------------------------------------------------------
 1 | import cn from 'classnames'
 2 | import Link from 'next/link'
 3 | 
 4 | export default function CoverImage({ title, src, slug }) {
 5 |   const image = (
 6 |     <img
 7 |       src={src}
 8 |       alt={`Cover Image for ${title}`}
 9 |       className={cn('shadow-small', {
10 |         'hover:shadow-medium transition-shadow duration-200': slug,
11 |       })}
12 |     />
13 |   )
14 |   return (
15 |     <div className="-mx-5 sm:mx-0">
16 |       {slug ? (
17 |         <Link as={`/posts/${slug}`} href="/posts/[slug]">
18 |           <a aria-label={title}>{image}</a>
19 |         </Link>
20 |       ) : (
21 |         image
22 |       )}
23 |     </div>
24 |   )
25 | }
26 | 


--------------------------------------------------------------------------------
/components/date-formater.js:
--------------------------------------------------------------------------------
1 | import { parseISO, format } from 'date-fns'
2 | 
3 | export default function DateFormater({ dateString }) {
4 |   const date = parseISO(dateString)
5 |   return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
6 | }
7 | 


--------------------------------------------------------------------------------
/components/footer.js:
--------------------------------------------------------------------------------
 1 | import Container from './container'
 2 | import { EXAMPLE_PATH } from '../lib/constants'
 3 | 
 4 | export default function Footer() {
 5 |   return (
 6 |     <footer className="bg-accent-1 border-t border-accent-2">
 7 |       <Container>
 8 |         <div className="py-28 flex flex-col lg:flex-row items-center">
 9 |           <h3 className="text-4xl lg:text-5xl font-bold tracking-tighter leading-tight text-center lg:text-left mb-10 lg:mb-0 lg:pr-4 lg:w-1/2">
10 |             Statically Generated with Next.js.
11 |           </h3>
12 |           <div className="flex flex-col lg:flex-row justify-center items-center lg:pl-4 lg:w-1/2">
13 |             <a
14 |               href="https://nextjs.org/docs/basic-features/pages"
15 |               className="mx-3 bg-black hover:bg-white hover:text-black border border-black text-white font-bold py-3 px-12 lg:px-8 duration-200 transition-colors mb-6 lg:mb-0"
16 |             >
17 |               Read Documentation
18 |             </a>
19 |             <a
20 |               href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
21 |               className="mx-3 font-bold hover:underline"
22 |             >
23 |               View on GitHub
24 |             </a>
25 |           </div>
26 |         </div>
27 |       </Container>
28 |     </footer>
29 |   )
30 | }
31 | 


--------------------------------------------------------------------------------
/components/header.js:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | 
 3 | export default function Header() {
 4 |   return (
 5 |     <h2 className="text-2xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-20 mt-8">
 6 |       <Link href="/">
 7 |         <a className="hover:underline">Blog</a>
 8 |       </Link>
 9 |       .
10 |     </h2>
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/components/hero-post.js:
--------------------------------------------------------------------------------
 1 | import Avatar from '../components/avatar'
 2 | import DateFormater from '../components/date-formater'
 3 | import CoverImage from '../components/cover-image'
 4 | import Link from 'next/link'
 5 | 
 6 | export default function HeroPost({
 7 |   title,
 8 |   coverImage,
 9 |   date,
10 |   excerpt,
11 |   author,
12 |   slug,
13 | }) {
14 |   return (
15 |     <section>
16 |       <div className="mb-8 md:mb-16">
17 |         <CoverImage title={title} src={coverImage} slug={slug} />
18 |       </div>
19 |       <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
20 |         <div>
21 |           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
22 |             <Link as={`/posts/${slug}`} href="/posts/[slug]">
23 |               <a className="hover:underline">{title}</a>
24 |             </Link>
25 |           </h3>
26 |           <div className="mb-4 md:mb-0 text-lg">
27 |             <DateFormater dateString={date} />
28 |           </div>
29 |         </div>
30 |         <div>
31 |           <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
32 |           <Avatar name={author.name} picture={author.picture} />
33 |         </div>
34 |       </div>
35 |     </section>
36 |   )
37 | }
38 | 


--------------------------------------------------------------------------------
/components/intro.js:
--------------------------------------------------------------------------------
 1 | import { CMS_NAME } from '../lib/constants'
 2 | 
 3 | export default function Intro() {
 4 |   return (
 5 |     <section className="flex-col md:flex-row flex items-center md:justify-between mt-16 mb-16 md:mb-12">
 6 |       <h1 className="text-6xl md:text-8xl font-bold tracking-tighter leading-tight md:pr-8">
 7 |         Blog.
 8 |       </h1>
 9 |       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
10 |         A statically generated blog example using{' '}
11 |         <a
12 |           href="https://nextjs.org/"
13 |           className="underline hover:text-success duration-200 transition-colors"
14 |         >
15 |           Next.js
16 |         </a>{' '}
17 |         and {CMS_NAME}.
18 |       </h4>
19 |     </section>
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/components/layout.js:
--------------------------------------------------------------------------------
 1 | import Alert from '../components/alert'
 2 | import Footer from '../components/footer'
 3 | import Meta from '../components/meta'
 4 | 
 5 | export default function Layout({ preview, children }) {
 6 |   return (
 7 |     <>
 8 |       <Meta />
 9 |       <div className="min-h-screen">
10 |         <Alert preview={preview} />
11 |         <main>{children}</main>
12 |       </div>
13 |       <Footer />
14 |     </>
15 |   )
16 | }
17 | 


--------------------------------------------------------------------------------
/components/markdown-styles.module.css:
--------------------------------------------------------------------------------
 1 | .markdown {
 2 |   @apply text-lg leading-relaxed;
 3 | }
 4 | 
 5 | .markdown p,
 6 | .markdown ul,
 7 | .markdown ol,
 8 | .markdown blockquote {
 9 |   @apply my-6;
10 | }
11 | 
12 | .markdown h2 {
13 |   @apply text-3xl mt-12 mb-4 leading-snug;
14 | }
15 | 
16 | .markdown h3 {
17 |   @apply text-2xl mt-8 mb-4 leading-snug;
18 | }
19 | 


--------------------------------------------------------------------------------
/components/meta.js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
 3 | 
 4 | export default function Meta() {
 5 |   return (
 6 |     <Head>
 7 |       <link
 8 |         rel="apple-touch-icon"
 9 |         sizes="180x180"
10 |         href="/favicon/apple-touch-icon.png"
11 |       />
12 |       <link
13 |         rel="icon"
14 |         type="image/png"
15 |         sizes="32x32"
16 |         href="/favicon/favicon-32x32.png"
17 |       />
18 |       <link
19 |         rel="icon"
20 |         type="image/png"
21 |         sizes="16x16"
22 |         href="/favicon/favicon-16x16.png"
23 |       />
24 |       <link rel="manifest" href="/favicon/site.webmanifest" />
25 |       <link
26 |         rel="mask-icon"
27 |         href="/favicon/safari-pinned-tab.svg"
28 |         color="#000000"
29 |       />
30 |       <link rel="shortcut icon" href="/favicon/favicon.ico" />
31 |       <meta name="msapplication-TileColor" content="#000000" />
32 |       <meta name="msapplication-config" content="/favicon/browserconfig.xml" />
33 |       <meta name="theme-color" content="#000" />
34 |       <link rel="alternate" type="application/rss+xml" href="/feed.xml" />
35 |       <meta
36 |         name="description"
37 |         content={`A statically generated blog example using Next.js and ${CMS_NAME}.`}
38 |       />
39 |       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
40 |     </Head>
41 |   )
42 | }
43 | 


--------------------------------------------------------------------------------
/components/more-stories.js:
--------------------------------------------------------------------------------
 1 | import PostPreview from '../components/post-preview'
 2 | 
 3 | export default function MoreStories({ posts }) {
 4 |   return (
 5 |     <section>
 6 |       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
 7 |         More Stories
 8 |       </h2>
 9 |       <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
10 |         {posts.map((post) => (
11 |           <PostPreview
12 |             key={post.slug}
13 |             title={post.title}
14 |             coverImage={post.coverImage}
15 |             date={post.date}
16 |             author={post.author}
17 |             slug={post.slug}
18 |             excerpt={post.excerpt}
19 |           />
20 |         ))}
21 |       </div>
22 |     </section>
23 |   )
24 | }
25 | 


--------------------------------------------------------------------------------
/components/post-body.js:
--------------------------------------------------------------------------------
 1 | import markdownStyles from './markdown-styles.module.css'
 2 | 
 3 | export default function PostBody({ content }) {
 4 |   return (
 5 |     <div className="max-w-2xl mx-auto">
 6 |       <div
 7 |         className={markdownStyles['markdown']}
 8 |         dangerouslySetInnerHTML={{ __html: content }}
 9 |       />
10 |     </div>
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/components/post-header.js:
--------------------------------------------------------------------------------
 1 | import Avatar from '../components/avatar'
 2 | import DateFormater from '../components/date-formater'
 3 | import CoverImage from '../components/cover-image'
 4 | import PostTitle from '../components/post-title'
 5 | 
 6 | export default function PostHeader({ title, coverImage, date, author }) {
 7 |   return (
 8 |     <>
 9 |       <PostTitle>{title}</PostTitle>
10 |       <div className="hidden md:block md:mb-12">
11 |         <Avatar name={author.name} picture={author.picture} />
12 |       </div>
13 |       <div className="mb-8 md:mb-16 -mx-5 sm:mx-0">
14 |         <CoverImage title={title} src={coverImage} />
15 |       </div>
16 |       <div className="max-w-2xl mx-auto">
17 |         <div className="block md:hidden mb-6">
18 |           <Avatar name={author.name} picture={author.picture} />
19 |         </div>
20 |         <div className="mb-6 text-lg">
21 |           <DateFormater dateString={date} />
22 |         </div>
23 |       </div>
24 |     </>
25 |   )
26 | }
27 | 


--------------------------------------------------------------------------------
/components/post-preview.js:
--------------------------------------------------------------------------------
 1 | import Avatar from '../components/avatar'
 2 | import DateFormater from '../components/date-formater'
 3 | import CoverImage from './cover-image'
 4 | import Link from 'next/link'
 5 | 
 6 | export default function PostPreview({
 7 |   title,
 8 |   coverImage,
 9 |   date,
10 |   excerpt,
11 |   author,
12 |   slug,
13 | }) {
14 |   return (
15 |     <div>
16 |       <div className="mb-5">
17 |         <CoverImage slug={slug} title={title} src={coverImage} />
18 |       </div>
19 |       <h3 className="text-3xl mb-3 leading-snug">
20 |         <Link as={`/posts/${slug}`} href="/posts/[slug]">
21 |           <a className="hover:underline">{title}</a>
22 |         </Link>
23 |       </h3>
24 |       <div className="text-lg mb-4">
25 |         <DateFormater dateString={date} />
26 |       </div>
27 |       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
28 |       <Avatar name={author.name} picture={author.picture} />
29 |     </div>
30 |   )
31 | }
32 | 


--------------------------------------------------------------------------------
/components/post-title.js:
--------------------------------------------------------------------------------
1 | export default function PostTitle({ children }) {
2 |   return (
3 |     <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
4 |       {children}
5 |     </h1>
6 |   )
7 | }
8 | 


--------------------------------------------------------------------------------
/components/section-separator.js:
--------------------------------------------------------------------------------
1 | export default function SectionSeparator() {
2 |   return <hr className="border-accent-2 mt-28 mb-24" />
3 | }
4 | 


--------------------------------------------------------------------------------
/lib/api.js:
--------------------------------------------------------------------------------
 1 | import fs from 'fs'
 2 | import { join } from 'path'
 3 | import matter from 'gray-matter'
 4 | 
 5 | const postsDirectory = join(process.cwd(), '_posts')
 6 | 
 7 | export function getPostSlugs() {
 8 |   return fs.readdirSync(postsDirectory)
 9 | }
10 | 
11 | export function getPostBySlug(slug, fields = []) {
12 |   const realSlug = slug.replace(/\.md$/, '')
13 |   const fullPath = join(postsDirectory, `${realSlug}.md`)
14 |   const fileContents = fs.readFileSync(fullPath, 'utf8')
15 |   const { data, content } = matter(fileContents)
16 | 
17 |   const items = {}
18 | 
19 |   // Ensure only the minimal needed data is exposed
20 |   fields.forEach((field) => {
21 |     if (field === 'slug') {
22 |       items[field] = realSlug
23 |     }
24 |     if (field === 'content') {
25 |       items[field] = content
26 |     }
27 | 
28 |     if (data[field]) {
29 |       items[field] = data[field]
30 |     }
31 |   })
32 | 
33 |   return items
34 | }
35 | 
36 | export function getAllPosts(fields = []) {
37 |   const slugs = getPostSlugs()
38 |   const posts = slugs
39 |     .map((slug) => getPostBySlug(slug, fields))
40 |     // sort posts by date in descending order
41 |     .sort((post1, post2) => (post1.date > post2.date ? '-1' : '1'))
42 |   return posts
43 | }
44 | 


--------------------------------------------------------------------------------
/lib/constants.js:
--------------------------------------------------------------------------------
1 | export const EXAMPLE_PATH = 'blog-starter'
2 | export const CMS_NAME = 'Markdown'
3 | export const HOME_OG_IMAGE_URL =
4 |   'https://og-image.now.sh/Next.js%20Blog%20Starter%20Example.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg'
5 | 


--------------------------------------------------------------------------------
/lib/markdownToHtml.js:
--------------------------------------------------------------------------------
1 | import remark from 'remark'
2 | import html from 'remark-html'
3 | 
4 | export default async function markdownToHtml(markdown) {
5 |   const result = await remark().use(html).process(markdown)
6 |   return result.toString()
7 | }
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "blog-starter",
 3 |   "version": "1.0.0",
 4 |   "scripts": {
 5 |     "dev": "next",
 6 |     "build": "next build",
 7 |     "start": "next start"
 8 |   },
 9 |   "dependencies": {
10 |     "classnames": "2.2.6",
11 |     "date-fns": "2.10.0",
12 |     "gray-matter": "4.0.2",
13 |     "next": "latest",
14 |     "react": "^16.13.0",
15 |     "react-dom": "^16.13.0",
16 |     "remark": "11.0.2",
17 |     "remark-html": "10.0.0"
18 |   },
19 |   "devDependencies": {
20 |     "postcss-preset-env": "^6.7.0",
21 |     "tailwindcss": "^1.4.0"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/index.css'
2 | 
3 | export default function MyApp({ Component, pageProps }) {
4 |   return <Component {...pageProps} />
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document, { Html, Head, Main, NextScript } from 'next/document'
 2 | 
 3 | export default class MyDocument extends Document {
 4 |   render() {
 5 |     return (
 6 |       <Html lang="en">
 7 |         <Head />
 8 |         <body>
 9 |           <Main />
10 |           <NextScript />
11 |         </body>
12 |       </Html>
13 |     )
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Container from '../components/container'
 2 | import MoreStories from '../components/more-stories'
 3 | import HeroPost from '../components/hero-post'
 4 | import Intro from '../components/intro'
 5 | import Layout from '../components/layout'
 6 | import { getAllPosts } from '../lib/api'
 7 | import Head from 'next/head'
 8 | import { CMS_NAME } from '../lib/constants'
 9 | 
10 | export default function Index({ allPosts }) {
11 |   const heroPost = allPosts[0]
12 |   const morePosts = allPosts.slice(1)
13 |   return (
14 |     <>
15 |       <Layout>
16 |         <Head>
17 |           <title>Next.js Blog Example with {CMS_NAME}</title>
18 |         </Head>
19 |         <Container>
20 |           <Intro />
21 |           {heroPost && (
22 |             <HeroPost
23 |               title={heroPost.title}
24 |               coverImage={heroPost.coverImage}
25 |               date={heroPost.date}
26 |               author={heroPost.author}
27 |               slug={heroPost.slug}
28 |               excerpt={heroPost.excerpt}
29 |             />
30 |           )}
31 |           {morePosts.length > 0 && <MoreStories posts={morePosts} />}
32 |         </Container>
33 |       </Layout>
34 |     </>
35 |   )
36 | }
37 | 
38 | export async function getStaticProps() {
39 |   const allPosts = getAllPosts([
40 |     'title',
41 |     'date',
42 |     'slug',
43 |     'author',
44 |     'coverImage',
45 |     'excerpt',
46 |   ])
47 | 
48 |   return {
49 |     props: { allPosts },
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/pages/posts/[slug].js:
--------------------------------------------------------------------------------
 1 | import { useRouter } from 'next/router'
 2 | import ErrorPage from 'next/error'
 3 | import Container from '../../components/container'
 4 | import PostBody from '../../components/post-body'
 5 | import Header from '../../components/header'
 6 | import PostHeader from '../../components/post-header'
 7 | import Layout from '../../components/layout'
 8 | import { getPostBySlug, getAllPosts } from '../../lib/api'
 9 | import PostTitle from '../../components/post-title'
10 | import Head from 'next/head'
11 | import { CMS_NAME } from '../../lib/constants'
12 | import markdownToHtml from '../../lib/markdownToHtml'
13 | 
14 | export default function Post({ post, morePosts, preview }) {
15 |   const router = useRouter()
16 |   if (!router.isFallback && !post?.slug) {
17 |     return <ErrorPage statusCode={404} />
18 |   }
19 |   return (
20 |     <Layout preview={preview}>
21 |       <Container>
22 |         <Header />
23 |         {router.isFallback ? (
24 |           <PostTitle>Loading…</PostTitle>
25 |         ) : (
26 |           <>
27 |             <article className="mb-32">
28 |               <Head>
29 |                 <title>
30 |                   {post.title} | Next.js Blog Example with {CMS_NAME}
31 |                 </title>
32 |                 <meta property="og:image" content={post.ogImage.url} />
33 |               </Head>
34 |               <PostHeader
35 |                 title={post.title}
36 |                 coverImage={post.coverImage}
37 |                 date={post.date}
38 |                 author={post.author}
39 |               />
40 |               <PostBody content={post.content} />
41 |             </article>
42 |           </>
43 |         )}
44 |       </Container>
45 |     </Layout>
46 |   )
47 | }
48 | 
49 | export async function getStaticProps({ params }) {
50 |   const post = getPostBySlug(params.slug, [
51 |     'title',
52 |     'date',
53 |     'slug',
54 |     'author',
55 |     'content',
56 |     'ogImage',
57 |     'coverImage',
58 |   ])
59 |   const content = await markdownToHtml(post.content || '')
60 | 
61 |   return {
62 |     props: {
63 |       post: {
64 |         ...post,
65 |         content,
66 |       },
67 |     },
68 |   }
69 | }
70 | 
71 | export async function getStaticPaths() {
72 |   const posts = getAllPosts(['slug'])
73 | 
74 |   return {
75 |     paths: posts.map((post) => {
76 |       return {
77 |         params: {
78 |           slug: post.slug,
79 |         },
80 |       }
81 |     }),
82 |     fallback: false,
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: ['tailwindcss', 'postcss-preset-env'],
3 | }
4 | 


--------------------------------------------------------------------------------
/public/assets/blog/authors/jj.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rauchg/blog-starter/43ddf157b94de798d4928e03f58e9cb765107ba0/public/assets/blog/authors/jj.jpeg


--------------------------------------------------------------------------------
/public/assets/blog/authors/joe.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rauchg/blog-starter/43ddf157b94de798d4928e03f58e9cb765107ba0/public/assets/blog/authors/joe.jpeg


--------------------------------------------------------------------------------
/public/assets/blog/authors/tim.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rauchg/blog-starter/43ddf157b94de798d4928e03f58e9cb765107ba0/public/assets/blog/authors/tim.jpeg


--------------------------------------------------------------------------------
/public/assets/blog/dynamic-routing/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rauchg/blog-starter/43ddf157b94de798d4928e03f58e9cb765107ba0/public/assets/blog/dynamic-routing/cover.jpg


--------------------------------------------------------------------------------
/public/assets/blog/hello-world/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rauchg/blog-starter/43ddf157b94de798d4928e03f58e9cb765107ba0/public/assets/blog/hello-world/cover.jpg


--------------------------------------------------------------------------------
/public/assets/blog/preview/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rauchg/blog-starter/43ddf157b94de798d4928e03f58e9cb765107ba0/public/assets/blog/preview/cover.jpg


--------------------------------------------------------------------------------
/public/favicon/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rauchg/blog-starter/43ddf157b94de798d4928e03f58e9cb765107ba0/public/favicon/android-chrome-192x192.png


--------------------------------------------------------------------------------
/public/favicon/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rauchg/blog-starter/43ddf157b94de798d4928e03f58e9cb765107ba0/public/favicon/android-chrome-512x512.png


--------------------------------------------------------------------------------
/public/favicon/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rauchg/blog-starter/43ddf157b94de798d4928e03f58e9cb765107ba0/public/favicon/apple-touch-icon.png


--------------------------------------------------------------------------------
/public/favicon/browserconfig.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <browserconfig>
 3 |     <msapplication>
 4 |         <tile>
 5 |             <square150x150logo src="/favicons/mstile-150x150.png"/>
 6 |             <TileColor>#000000</TileColor>
 7 |         </tile>
 8 |     </msapplication>
 9 | </browserconfig>
10 | 


--------------------------------------------------------------------------------
/public/favicon/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rauchg/blog-starter/43ddf157b94de798d4928e03f58e9cb765107ba0/public/favicon/favicon-16x16.png


--------------------------------------------------------------------------------
/public/favicon/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rauchg/blog-starter/43ddf157b94de798d4928e03f58e9cb765107ba0/public/favicon/favicon-32x32.png


--------------------------------------------------------------------------------
/public/favicon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rauchg/blog-starter/43ddf157b94de798d4928e03f58e9cb765107ba0/public/favicon/favicon.ico


--------------------------------------------------------------------------------
/public/favicon/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rauchg/blog-starter/43ddf157b94de798d4928e03f58e9cb765107ba0/public/favicon/mstile-150x150.png


--------------------------------------------------------------------------------
/public/favicon/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="1024.000000pt" height="1024.000000pt" viewBox="0 0 1024.000000 1024.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | <metadata>
 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013
 9 | </metadata>
10 | <g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
11 | fill="#000000" stroke="none">
12 | <path d="M4785 10234 c-22 -2 -92 -9 -155 -14 -1453 -131 -2814 -915 -3676
13 | -2120 -480 -670 -787 -1430 -903 -2235 -41 -281 -46 -364 -46 -745 0 -381 5
14 | -464 46 -745 278 -1921 1645 -3535 3499 -4133 332 -107 682 -180 1080 -224
15 | 155 -17 825 -17 980 0 687 76 1269 246 1843 539 88 45 105 57 93 67 -8 6 -383
16 | 509 -833 1117 l-818 1105 -1025 1517 c-564 834 -1028 1516 -1032 1516 -4 1 -8
17 | -673 -10 -1496 -3 -1441 -4 -1499 -22 -1533 -26 -49 -46 -69 -88 -91 -32 -16
18 | -60 -19 -211 -19 l-173 0 -46 29 c-30 19 -52 44 -67 73 l-21 45 2 2005 3 2006
19 | 31 39 c16 21 50 48 74 61 41 20 57 22 230 22 204 0 238 -8 291 -66 15 -16 570
20 | -852 1234 -1859 664 -1007 1572 -2382 2018 -3057 l810 -1227 41 27 c363 236
21 | 747 572 1051 922 647 743 1064 1649 1204 2615 41 281 46 364 46 745 0 381 -5
22 | 464 -46 745 -278 1921 -1645 3535 -3499 4133 -327 106 -675 179 -1065 223 -96
23 | 10 -757 21 -840 13z m2094 -3094 c48 -24 87 -70 101 -118 8 -26 10 -582 8
24 | -1835 l-3 -1798 -317 486 -318 486 0 1307 c0 845 4 1320 10 1343 16 56 51 100
25 | 99 126 41 21 56 23 213 23 148 0 174 -2 207 -20z"/>
26 | <path d="M7843 789 c-35 -22 -46 -37 -15 -20 22 13 58 40 52 41 -3 0 -20 -10
27 | -37 -21z"/>
28 | <path d="M7774 744 c-18 -14 -18 -15 4 -4 12 6 22 13 22 15 0 8 -5 6 -26 -11z"/>
29 | <path d="M7724 714 c-18 -14 -18 -15 4 -4 12 6 22 13 22 15 0 8 -5 6 -26 -11z"/>
30 | <path d="M7674 684 c-18 -14 -18 -15 4 -4 12 6 22 13 22 15 0 8 -5 6 -26 -11z"/>
31 | <path d="M7598 644 c-38 -20 -36 -28 2 -9 17 9 30 18 30 20 0 7 -1 6 -32 -11z"/>
32 | </g>
33 | </svg>
34 | 


--------------------------------------------------------------------------------
/public/favicon/site.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Next.js",
 3 |   "short_name": "Next.js",
 4 |   "icons": [
 5 |     {
 6 |       "src": "/favicons/android-chrome-192x192.png",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     },
10 |     {
11 |       "src": "/favicons/android-chrome-512x512.png",
12 |       "sizes": "512x512",
13 |       "type": "image/png"
14 |     }
15 |   ],
16 |   "theme_color": "#000000",
17 |   "background_color": "#000000",
18 |   "display": "standalone"
19 | }
20 | 


--------------------------------------------------------------------------------
/styles/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | 
 3 | /* Write your own custom base styles here */
 4 | 
 5 | /* Start purging... */
 6 | @tailwind components;
 7 | /* Stop purging. */
 8 | 
 9 | /* Write you own custom component styles here */
10 | 
11 | /* Start purging... */
12 | @tailwind utilities;
13 | /* Stop purging. */
14 | 
15 | /* Your own custom utilities */
16 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   purge: ['./components/**/*.js', './pages/**/*.js'],
 3 |   theme: {
 4 |     extend: {
 5 |       colors: {
 6 |         'accent-1': '#FAFAFA',
 7 |         'accent-2': '#EAEAEA',
 8 |         'accent-7': '#333',
 9 |         success: '#0070f3',
10 |         cyan: '#79FFE1',
11 |       },
12 |       spacing: {
13 |         28: '7rem',
14 |       },
15 |       letterSpacing: {
16 |         tighter: '-.04em',
17 |       },
18 |       lineHeight: {
19 |         tight: 1.2,
20 |       },
21 |       fontSize: {
22 |         '5xl': '2.5rem',
23 |         '6xl': '2.75rem',
24 |         '7xl': '4.5rem',
25 |         '8xl': '6.25rem',
26 |       },
27 |       boxShadow: {
28 |         small: '0 5px 10px rgba(0, 0, 0, 0.12)',
29 |         medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
30 |       },
31 |     },
32 |   },
33 | }
34 | 


--------------------------------------------------------------------------------