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


/@types/remark-html.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'remark-html'
2 | 


--------------------------------------------------------------------------------
/.env.local.sample:
--------------------------------------------------------------------------------
1 | ## pegue esses dados no Mongo Atlas ;)
2 | MONGODB_URI=
3 | MONGODB_DB=
4 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/types/global" />
3 | 


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


--------------------------------------------------------------------------------
/types/author.ts:
--------------------------------------------------------------------------------
1 | type Author = {
2 |   name: string
3 |   picture: string
4 | }
5 | 
6 | export default Author
7 | 


--------------------------------------------------------------------------------
/public/favicon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-content/blog-nextjs-mongodb-vercel/HEAD/public/favicon/favicon.ico


--------------------------------------------------------------------------------
/public/favicon/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-content/blog-nextjs-mongodb-vercel/HEAD/public/favicon/favicon-16x16.png


--------------------------------------------------------------------------------
/public/favicon/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-content/blog-nextjs-mongodb-vercel/HEAD/public/favicon/favicon-32x32.png


--------------------------------------------------------------------------------
/public/favicon/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-content/blog-nextjs-mongodb-vercel/HEAD/public/favicon/mstile-150x150.png


--------------------------------------------------------------------------------
/public/assets/blog/authors/jj.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-content/blog-nextjs-mongodb-vercel/HEAD/public/assets/blog/authors/jj.jpeg


--------------------------------------------------------------------------------
/public/assets/blog/authors/joe.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-content/blog-nextjs-mongodb-vercel/HEAD/public/assets/blog/authors/joe.jpeg


--------------------------------------------------------------------------------
/public/assets/blog/authors/tim.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-content/blog-nextjs-mongodb-vercel/HEAD/public/assets/blog/authors/tim.jpeg


--------------------------------------------------------------------------------
/public/assets/blog/preview/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-content/blog-nextjs-mongodb-vercel/HEAD/public/assets/blog/preview/cover.jpg


--------------------------------------------------------------------------------
/public/favicon/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-content/blog-nextjs-mongodb-vercel/HEAD/public/favicon/apple-touch-icon.png


--------------------------------------------------------------------------------
/public/assets/blog/hello-world/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-content/blog-nextjs-mongodb-vercel/HEAD/public/assets/blog/hello-world/cover.jpg


--------------------------------------------------------------------------------
/public/assets/blog/last-post/cover.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-content/blog-nextjs-mongodb-vercel/HEAD/public/assets/blog/last-post/cover.jpeg


--------------------------------------------------------------------------------
/public/favicon/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-content/blog-nextjs-mongodb-vercel/HEAD/public/favicon/android-chrome-192x192.png


--------------------------------------------------------------------------------
/public/favicon/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-content/blog-nextjs-mongodb-vercel/HEAD/public/favicon/android-chrome-512x512.png


--------------------------------------------------------------------------------
/public/assets/blog/dynamic-routing/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-content/blog-nextjs-mongodb-vercel/HEAD/public/assets/blog/dynamic-routing/cover.jpg


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


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


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


--------------------------------------------------------------------------------
/components/post-views.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode } from "react";
 2 | 
 3 | type Props = {
 4 |   children?: ReactNode;
 5 | };
 6 | 
 7 | const PostViews = ({ children }: Props) => {
 8 |   return <small className="text-lg">{children}</small>;
 9 | };
10 | 
11 | export default PostViews;
12 | 


--------------------------------------------------------------------------------
/types/post.ts:
--------------------------------------------------------------------------------
 1 | import Author from './author'
 2 | 
 3 | type PostType = {
 4 |   slug: string
 5 |   title: string
 6 |   date: string
 7 |   coverImage: string
 8 |   author: Author
 9 |   excerpt: string
10 |   ogImage: {
11 |     url: string
12 |   }
13 |   content: string
14 | }
15 | 
16 | export default PostType
17 | 


--------------------------------------------------------------------------------
/components/container.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode, FunctionComponent } from 'react'
 2 | 
 3 | type Props = {
 4 |   children?: ReactNode
 5 | }
 6 | 
 7 | const Container: FunctionComponent = ({ children }: Props) => {
 8 |   return <div className="container mx-auto px-5">{children}</div>
 9 | }
10 | 
11 | export default Container
12 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/lib/constants.ts:
--------------------------------------------------------------------------------
1 | export const EXAMPLE_PATH = 'blog-starter-typescript'
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 | 


--------------------------------------------------------------------------------
/components/date-formatter.tsx:
--------------------------------------------------------------------------------
 1 | import { parseISO, format } from 'date-fns'
 2 | 
 3 | type Props = {
 4 |   dateString: string
 5 | }
 6 | 
 7 | const DateFormatter = ({ dateString }: Props) => {
 8 |   const date = parseISO(dateString)
 9 |   return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
10 | }
11 | 
12 | export default DateFormatter
13 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/lib/fetcher.ts:
--------------------------------------------------------------------------------
 1 | import useSWR from "swr";
 2 | 
 3 | export function useFetch(url: string, revalidateOnFocus: boolean = false) {
 4 |   const { data, error } = useSWR(url, async (url) => {
 5 |     const response = await fetch(url);
 6 |     const data = await response.json();
 7 | 
 8 |     return data;
 9 |   }, {revalidateOnFocus });
10 | 
11 |   return { data, error };
12 | }


--------------------------------------------------------------------------------
/pages/_document.tsx:
--------------------------------------------------------------------------------
 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 | 


--------------------------------------------------------------------------------
/components/header.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | 
 3 | const 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 da Rocketseat</a>
 8 |       </Link>
 9 |       .
10 |     </h2>
11 |   );
12 | };
13 | 
14 | export default Header;
15 | 


--------------------------------------------------------------------------------
/components/post-title.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode } from 'react'
 2 | 
 3 | type Props = {
 4 |   children?: ReactNode
 5 | }
 6 | 
 7 | const PostTitle = ({ children }: Props) => {
 8 |   return (
 9 |     <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">
10 |       {children}
11 |     </h1>
12 |   )
13 | }
14 | 
15 | export default PostTitle
16 | 


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


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/components/layout.tsx:
--------------------------------------------------------------------------------
 1 | import Alert from './alert'
 2 | import Footer from './footer'
 3 | import Meta from './meta'
 4 | 
 5 | type Props = {
 6 |   preview?: boolean
 7 |   children: React.ReactNode
 8 | }
 9 | 
10 | const Layout = ({ preview, children }: Props) => {
11 |   return (
12 |     <>
13 |       <Meta />
14 |       <div className="min-h-screen">
15 |         <Alert preview={preview} />
16 |         <main>{children}</main>
17 |       </div>
18 |       <Footer />
19 |     </>
20 |   )
21 | }
22 | 
23 | export default Layout
24 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/components/avatar.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | type Props = {
 4 |   name: string;
 5 |   picture: string;
 6 | };
 7 | 
 8 | const Avatar = ({ name, picture }: Props) => {
 9 |   return (
10 |     <div className="flex items-center">
11 |       <Image
12 |         src={picture}
13 |         width={48}
14 |         height={48}
15 |         // unsized={true}
16 |         className="w-12 h-12 rounded-full mr-4"
17 |         alt={name}
18 |       />
19 |       <div className="text-xl font-bold">{name}</div>
20 |     </div>
21 |   );
22 | };
23 | 
24 | export default Avatar;
25 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "jsx": "preserve",
 6 |     "strict": true,
 7 |     "esModuleInterop": true,
 8 |     "skipLibCheck": true,
 9 |     "forceConsistentCasingInFileNames": true,
10 |     "lib": ["dom", "dom.iterable", "esnext"],
11 |     "allowJs": true,
12 |     "noEmit": true,
13 |     "moduleResolution": "node",
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "baseUrl": "./",
17 |     "paths": {
18 |       "@/*": ["./*"]
19 |     }
20 |   },
21 |   "exclude": ["node_modules"],
22 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
23 | }
24 | 


--------------------------------------------------------------------------------
/pages/api/page-views-preview.ts:
--------------------------------------------------------------------------------
 1 | import {connectToDatabase} from '@/config/mongodb';
 2 | import { NextApiRequest, NextApiResponse } from 'next';
 3 | 
 4 | export default async (req: NextApiRequest, res: NextApiResponse) => {
 5 |   
 6 |   const slug = req.query.id; 
 7 |   
 8 |   if(!slug) return res.json("Página não encontrada!")
 9 | 
10 |   const { db, client } = await connectToDatabase();
11 | 
12 |   if(client.isConnected()) {
13 |     const pageViewBySlug = await db
14 |     .collection("pageviews")
15 |     .findOne({ slug })
16 | 
17 |   let total = 0;
18 |   if(pageViewBySlug) {
19 |     total = pageViewBySlug.total;
20 |   }
21 |    
22 |   return res.status(200).json({ total })
23 |     
24 |   }
25 | 
26 |   return res.status(500).json({ error: 'client DB is not connected' })
27 | 
28 | }
29 | 


--------------------------------------------------------------------------------
/components/intro.tsx:
--------------------------------------------------------------------------------
 1 | import { CMS_NAME } from "../lib/constants";
 2 | 
 3 | const 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-4xl md:text-5xl font-bold tracking-tighter leading-tight md:pr-8">
 7 |         Blog da Rocketseat.
 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 | 
23 | export default Intro;
24 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   purge: ['./components/**/*.tsx', './pages/**/*.tsx'],
 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 | 


--------------------------------------------------------------------------------
/components/cover-image.tsx:
--------------------------------------------------------------------------------
 1 | import cn from "classnames";
 2 | import Link from "next/link";
 3 | import Image from "next/image";
 4 | 
 5 | type Props = {
 6 |   title: string;
 7 |   src: string;
 8 |   slug?: string;
 9 | };
10 | 
11 | const CoverImage = ({ title, src, slug }: Props) => {
12 |   const image = (
13 |     <Image
14 |       src={src}
15 |       width={1240}
16 |       height={826}
17 |       // unsized={true}
18 |       alt={`Cover Image for ${title}`}
19 |       className={cn("shadow-small", {
20 |         "hover:shadow-medium transition-shadow duration-200": slug,
21 |       })}
22 |     />
23 |   );
24 |   return (
25 |     <div className="sm:mx-0">
26 |       {slug ? (
27 |         <Link as={`/posts/${slug}`} href="/posts/[slug]">
28 |           <a aria-label={title}>{image}</a>
29 |         </Link>
30 |       ) : (
31 |         image
32 |       )}
33 |     </div>
34 |   );
35 | };
36 | 
37 | export default CoverImage;
38 | 


--------------------------------------------------------------------------------
/config/mongodb.ts:
--------------------------------------------------------------------------------
 1 | import { MongoClient } from 'mongodb'
 2 | 
 3 | let uri = process.env.MONGODB_URI || "" // trick ts :(
 4 | let dbName = process.env.MONGODB_DB
 5 | 
 6 | let cachedClient: any = null
 7 | let cachedDb: any = null
 8 | 
 9 | if (!uri) {
10 |   throw new Error(
11 |     'Please define the MONGODB_URI environment variable inside .env.local'
12 |   )
13 | }
14 | 
15 | if (!dbName) {
16 |   throw new Error(
17 |     'Please define the MONGODB_DB environment variable inside .env.local'
18 |   )
19 | }
20 | 
21 | export async function connectToDatabase() {
22 |   if (cachedClient && cachedDb) {
23 |     return { client: cachedClient, db: cachedDb }
24 |   }
25 | 
26 |   const client = await MongoClient.connect(uri, {
27 |     useNewUrlParser: true,
28 |     useUnifiedTopology: true,
29 |   })
30 | 
31 |   const db = await client.db(dbName)
32 | 
33 |   cachedClient = client
34 |   cachedDb = db
35 | 
36 |   return { client, db }
37 | }


--------------------------------------------------------------------------------
/components/more-stories.tsx:
--------------------------------------------------------------------------------
 1 | import PostPreview from './post-preview'
 2 | import Post from '../types/post'
 3 | 
 4 | type Props = {
 5 |   posts: Post[]
 6 | }
 7 | 
 8 | const MoreStories = ({ posts }: Props) => {
 9 |   return (
10 |     <section>
11 |       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
12 |         More Stories
13 |       </h2>
14 |       <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">
15 |         {posts.map((post) => (
16 |           <PostPreview
17 |             key={post.slug}
18 |             title={post.title}
19 |             coverImage={post.coverImage}
20 |             date={post.date}
21 |             author={post.author}
22 |             slug={post.slug}
23 |             excerpt={post.excerpt}
24 |           />
25 |         ))}
26 |       </div>
27 |     </section>
28 |   )
29 | }
30 | 
31 | export default MoreStories
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "blog-starter-typescript",
 3 |   "version": "1.0.0",
 4 |   "scripts": {
 5 |     "dev": "next",
 6 |     "build": "next build",
 7 |     "start": "next start",
 8 |     "typecheck": "tsc"
 9 |   },
10 |   "dependencies": {
11 |     "classnames": "2.2.6",
12 |     "date-fns": "2.10.0",
13 |     "gray-matter": "4.0.2",
14 |     "mongodb": "^3.6.2",
15 |     "next": "^10.0.0",
16 |     "react": "^17.0.1",
17 |     "react-dom": "^17.0.1",
18 |     "remark": "11.0.2",
19 |     "remark-html": "10.0.0",
20 |     "swr": "^0.3.6",
21 |     "typescript": "^3.9.2"
22 |   },
23 |   "devDependencies": {
24 |     "@types/classnames": "^2.2.10",
25 |     "@types/jest": "^25.2.2",
26 |     "@types/mongodb": "^3.5.28",
27 |     "@types/node": "^14.0.1",
28 |     "@types/react": "^16.9.35",
29 |     "@types/react-dom": "^16.9.8",
30 |     "postcss-preset-env": "^6.7.0",
31 |     "tailwindcss": "^1.4.0"
32 |   },
33 |   "license": "MIT"
34 | }
35 | 


--------------------------------------------------------------------------------
/styles/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | 
 3 | /* Write your own custom base styles here */
 4 | 
 5 | body {
 6 |   background-color: #e8ffff;
 7 |   color: #213e3b;
 8 | }
 9 | 
10 | h1 {
11 |   color: #14274e;
12 | }
13 | 
14 | h3 {
15 |   color: #7579e7;
16 | }
17 | 
18 | .dark-mode {
19 |   background-color: #e8ffff;
20 | }
21 | 
22 | @media (prefers-color-scheme: dark) {
23 |   body {
24 |     background-color: #010101;
25 |     color: #f0ece2;
26 |   }
27 | 
28 |   h1 {
29 |     color: #7579e7;
30 |   }
31 | 
32 |   h3 {
33 |     color: #69779b;
34 |   }
35 | 
36 |   img {
37 |     filter: brightness(0.9);
38 |   }
39 | 
40 |   .dark-mode {
41 |     background-color: rgb(18, 18, 20);
42 |   }
43 | }
44 | 
45 | /* Start purging... */
46 | @tailwind components;
47 | /* Stop purging. */
48 | 
49 | /* Write you own custom component styles here */
50 | 
51 | /* Start purging... */
52 | @tailwind utilities;
53 | /* Stop purging. */
54 | 
55 | /* Your own custom utilities */
56 | 


--------------------------------------------------------------------------------
/pages/api/page-views.ts:
--------------------------------------------------------------------------------
 1 | import {connectToDatabase} from '@/config/mongodb';
 2 | import { NextApiRequest, NextApiResponse } from 'next';
 3 | 
 4 | export default async (req: NextApiRequest, res: NextApiResponse) => {
 5 |   
 6 |   const slug = req.query.id; 
 7 |   
 8 |   if(!slug) return res.json("Página não encontrada!")
 9 | 
10 |   const { db, client } = await connectToDatabase();
11 | 
12 |   if(client.isConnected()) {
13 |     const pageViewBySlug = await db
14 |     .collection("pageviews")
15 |     .findOne({ slug })
16 | 
17 |     let total = 0;
18 |     if(pageViewBySlug) {
19 |       total = pageViewBySlug.total + 1;
20 |       await db.collection('pageviews').updateOne({ slug }, { $set: { total }})
21 |     } else {
22 |       total = 1;
23 |       await db.collection('pageviews').insertOne({ slug, total })
24 |     }
25 |     
26 |     return res.status(200).json({ total })
27 |     
28 |   }
29 | 
30 |   return res.status(500).json({ error: 'client DB is not connected' })
31 | 
32 | }
33 | 


--------------------------------------------------------------------------------
/components/post-header.tsx:
--------------------------------------------------------------------------------
 1 | import Avatar from "./avatar";
 2 | import DateFormatter from "./date-formatter";
 3 | import CoverImage from "./cover-image";
 4 | import PostTitle from "./post-title";
 5 | import PostViews from "./post-views";
 6 | import Author from "../types/author";
 7 | 
 8 | type Props = {
 9 |   title: string;
10 |   coverImage: string;
11 |   date: string;
12 |   author: Author;
13 |   views: number;
14 | };
15 | 
16 | const PostHeader = ({ title, coverImage, date, author, views }: Props) => {
17 |   return (
18 |     <>
19 |       <PostTitle>{title}</PostTitle>
20 |       <div className="hidden md:block md:mb-12">
21 |         <Avatar name={author.name} picture={author.picture} />
22 |       </div>
23 |       <div className="mb-8 md:mb-16 sm:mx-0">
24 |         <CoverImage title={title} src={coverImage} />
25 |       </div>
26 |       <div className="max-w-2xl mx-auto">
27 |         <div className="block md:hidden mb-6">
28 |           <Avatar name={author.name} picture={author.picture} />
29 |         </div>
30 |         <div className="mb-6 text-lg">
31 |           <DateFormatter dateString={date} /> -{" "}
32 |           <PostViews>{`${views >= 0 ? views : "..."} views`}</PostViews>
33 |         </div>
34 |       </div>
35 |     </>
36 |   );
37 | };
38 | 
39 | export default PostHeader;
40 | 


--------------------------------------------------------------------------------
/components/footer.tsx:
--------------------------------------------------------------------------------
 1 | import Container from "./container";
 2 | import { EXAMPLE_PATH } from "../lib/constants";
 3 | 
 4 | const Footer = () => {
 5 |   return (
 6 |     <footer className="dark-mode">
 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 | 
32 | export default Footer;
33 | 


--------------------------------------------------------------------------------
/lib/api.ts:
--------------------------------------------------------------------------------
 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: string, fields: string[] = []) {
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 |   type Items = {
18 |     [key: string]: string
19 |   }
20 | 
21 |   const items: Items = {}
22 | 
23 |   // Ensure only the minimal needed data is exposed
24 |   fields.forEach((field) => {
25 |     if (field === 'slug') {
26 |       items[field] = realSlug
27 |     }
28 |     if (field === 'content') {
29 |       items[field] = content
30 |     }
31 | 
32 |     if (data[field]) {
33 |       items[field] = data[field]
34 |     }
35 |   })
36 | 
37 |   return items
38 | }
39 | 
40 | export function getAllPosts(fields: string[] = []) {
41 |   const slugs = getPostSlugs()
42 |   const posts = slugs
43 |     .map((slug) => getPostBySlug(slug, fields))
44 |     // sort posts by date in descending order
45 |     .sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
46 |   return posts
47 | }
48 | 


--------------------------------------------------------------------------------
/components/meta.tsx:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
 3 | 
 4 | const 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 | 
44 | export default Meta
45 | 


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


--------------------------------------------------------------------------------
/components/post-preview.tsx:
--------------------------------------------------------------------------------
 1 | import Avatar from "./avatar";
 2 | import DateFormatter from "./date-formatter";
 3 | import CoverImage from "./cover-image";
 4 | import Link from "next/link";
 5 | import Author from "../types/author";
 6 | import PostViews from "@/components/post-views";
 7 | import { useFetch } from "@/lib/fetcher";
 8 | 
 9 | type Props = {
10 |   title: string;
11 |   coverImage: string;
12 |   date: string;
13 |   excerpt: string;
14 |   author: Author;
15 |   slug: string;
16 | };
17 | 
18 | const PostPreview = ({
19 |   title,
20 |   coverImage,
21 |   date,
22 |   excerpt,
23 |   author,
24 |   slug,
25 | }: Props) => {
26 |   const { data } = useFetch(`/api/page-views-preview?id=${slug}`, true);
27 | 
28 |   const views = data?.total;
29 | 
30 |   return (
31 |     <div>
32 |       <div className="mb-5">
33 |         <CoverImage slug={slug} title={title} src={coverImage} />
34 |       </div>
35 |       <h3 className="text-3xl mb-3 leading-snug">
36 |         <Link as={`/posts/${slug}`} href="/posts/[slug]">
37 |           <a className="hover:underline">{title}</a>
38 |         </Link>
39 |       </h3>
40 |       <div className="text-lg mb-4">
41 |         <DateFormatter dateString={date} /> -{" "}
42 |         <PostViews>{`${views >= 0 ? views : "..."} views`}</PostViews>
43 |       </div>
44 |       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
45 |       <Avatar name={author.name} picture={author.picture} />
46 |     </div>
47 |   );
48 | };
49 | 
50 | export default PostPreview;
51 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
 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 | import Post from '../types/post'
10 | 
11 | type Props = {
12 |   allPosts: Post[]
13 | }
14 | 
15 | const Index = ({ allPosts }: Props) => {
16 |   const heroPost = allPosts[0]
17 |   const morePosts = allPosts.slice(1)
18 |   return (
19 |     <>
20 |       <Layout>
21 |         <Head>
22 |           <title>Next.js Blog Example with {CMS_NAME}</title>
23 |         </Head>
24 |         <Container>
25 |           <Intro />
26 |           {heroPost && (
27 |             <HeroPost
28 |               title={heroPost.title}
29 |               coverImage={heroPost.coverImage}
30 |               date={heroPost.date}
31 |               author={heroPost.author}
32 |               slug={heroPost.slug}
33 |               excerpt={heroPost.excerpt}
34 |             />
35 |           )}
36 |           {morePosts.length > 0 && <MoreStories posts={morePosts} />}
37 |         </Container>
38 |       </Layout>
39 |     </>
40 |   )
41 | }
42 | 
43 | export default Index
44 | 
45 | export const getStaticProps = async () => {
46 |   const allPosts = getAllPosts([
47 |     'title',
48 |     'date',
49 |     'slug',
50 |     'author',
51 |     'coverImage',
52 |     'excerpt',
53 |   ])
54 | 
55 |   return {
56 |     props: { allPosts },
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![Next.js](https://assets.vercel.com/image/upload/v1538361091/repositories/next-js/next-js.png)](https://nextjs.org)
 2 | 
 3 | <p align="center">
 4 |   <a href="#-projeto">Projeto</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
 5 |   <a href="#rocket-tecnologias">Tecnologias</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
 6 |   <a href="#-hosting">Hospedagem</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
 7 |   <a href="#-playground">Playground</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
 8 | </p>
 9 | 
10 | <p align="center">
11 |   <img  src="https://img.shields.io/static/v1?label=license&message=MIT&color=8257E6&labelColor=121214" alt="License">
12 | 
13 |   <img src="https://img.shields.io/github/stars/rocketseat-content/blog-nextjs-mongodb-vercel?label=stars&message=MIT&color=8257E6&labelColor=121214" alt="Stars">  
14 | </p>
15 | 
16 | <br>
17 | 
18 | 
19 | ## 💻 Projeto
20 | 
21 | Criamos um Blog com NextJS e fizemos um post no [blog da Rocketseat](http://blog.rocketseat.com.br/) 💜 
22 | 
23 | 
24 | ## 🚀 Tecnologias
25 | 
26 | Esse projeto foi desenvolvido utilizando as seguintes tecnologias:
27 | 
28 | - [NextJS](https://nextjs.org/)
29 | - [MongoDB](https://expressjs.com/pt-br/)
30 | - [React](https://reactjs.org/)
31 | 
32 | ## 🌐 Hospedagem
33 | 
34 | - [Mongo Atlas](https://cloud.mongodb.com/)
35 | - [Vercel](https://vercel.com/dashboard)
36 | 
37 | ## 🎮 Playground
38 | 
39 | - [Site](http://blog-rocketseat.vercel.app/)
40 | - [API](https://blog-rocketseat.vercel.app/api/page-views-preview?id=1)
41 | 
42 | 
43 | ## 📝 Licença
44 | 
45 | Fique a vontade <3
46 | 
47 | ---
48 | 
49 | <p align="center">Desenvolvido com 💜 por Thiago Marinho | AX @ Rocketseat</p>
50 | 
51 | 
52 | 


--------------------------------------------------------------------------------
/components/hero-post.tsx:
--------------------------------------------------------------------------------
 1 | import Avatar from "./avatar";
 2 | import DateFormatter from "./date-formatter";
 3 | import CoverImage from "./cover-image";
 4 | import Link from "next/link";
 5 | import Author from "../types/author";
 6 | import { useFetch } from "@/lib/fetcher";
 7 | import PostViews from "./post-views";
 8 | 
 9 | type Props = {
10 |   title: string;
11 |   coverImage: string;
12 |   date: string;
13 |   excerpt: string;
14 |   author: Author;
15 |   slug: string;
16 | };
17 | 
18 | const HeroPost = ({
19 |   title,
20 |   coverImage,
21 |   date,
22 |   excerpt,
23 |   author,
24 |   slug,
25 | }: Props) => {
26 |   const { data } = useFetch(`/api/page-views-preview?id=${slug}`, true);
27 | 
28 |   const views = data?.total;
29 |   console.log(views);
30 | 
31 |   return (
32 |     <section>
33 |       <div className="mb-8 md:mb-16">
34 |         <CoverImage title={title} src={coverImage} slug={slug} />
35 |       </div>
36 |       <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
37 |         <div>
38 |           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
39 |             <Link as={`/posts/${slug}`} href="/posts/[slug]">
40 |               <a className="hover:underline">{title}</a>
41 |             </Link>
42 |           </h3>
43 |           <div className="mb-4 md:mb-0 text-lg">
44 |             <DateFormatter dateString={date} /> -{" "}
45 |             <PostViews>{`${views >= 0 ? views : "..."} views`}</PostViews>
46 |           </div>
47 |         </div>
48 |         <div>
49 |           <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
50 |           <Avatar name={author.name} picture={author.picture} />
51 |         </div>
52 |       </div>
53 |     </section>
54 |   );
55 | };
56 | 
57 | export default HeroPost;
58 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/_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 | 


--------------------------------------------------------------------------------
/_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/last-post.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: 'Last post for demonstration'
 3 | excerpt: 'Last Post is 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/last-post/cover.jpeg'
 5 | date: '2020-10-22T06:35:07.322Z'
 6 | author:
 7 |   name: JJ Kasper
 8 |   picture: '/assets/blog/authors/jj.jpeg'
 9 | ogImage:
10 |   url: '/assets/blog/last-post/cover.jpeg'
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 | 
21 | 
22 | Thank you for reading!


--------------------------------------------------------------------------------
/_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 | 


--------------------------------------------------------------------------------
/pages/posts/[slug].tsx:
--------------------------------------------------------------------------------
  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 | import PostType from "../../types/post";
 14 | 
 15 | import { useFetch } from "@/lib/fetcher";
 16 | 
 17 | type Props = {
 18 |   post: PostType;
 19 |   morePosts: PostType[];
 20 |   preview?: boolean;
 21 | };
 22 | 
 23 | const Post = ({ post, morePosts, preview }: Props) => {
 24 |   const router = useRouter();
 25 |   if (!router.isFallback && !post?.slug) {
 26 |     return <ErrorPage statusCode={404} />;
 27 |   }
 28 | 
 29 |   const { data } = useFetch(`/api/page-views?id=${post.slug}`);
 30 | 
 31 |   return (
 32 |     <Layout preview={preview}>
 33 |       <Container>
 34 |         <Header />
 35 |         {router.isFallback ? (
 36 |           <PostTitle>Loading…</PostTitle>
 37 |         ) : (
 38 |           <>
 39 |             <article className="mb-32">
 40 |               <Head>
 41 |                 <title>
 42 |                   {post.title} | Next.js Blog Example with {CMS_NAME}
 43 |                 </title>
 44 |                 <meta property="og:image" content={post.ogImage.url} />
 45 |               </Head>
 46 |               <PostHeader
 47 |                 title={post.title}
 48 |                 coverImage={post.coverImage}
 49 |                 date={post.date}
 50 |                 author={post.author}
 51 |                 views={data?.total}
 52 |               />
 53 |               <PostBody content={post.content} />
 54 |             </article>
 55 |           </>
 56 |         )}
 57 |       </Container>
 58 |     </Layout>
 59 |   );
 60 | };
 61 | 
 62 | export default Post;
 63 | 
 64 | type Params = {
 65 |   params: {
 66 |     slug: string;
 67 |   };
 68 | };
 69 | 
 70 | export async function getStaticProps({ params }: Params) {
 71 |   const post = getPostBySlug(params.slug, [
 72 |     "title",
 73 |     "date",
 74 |     "slug",
 75 |     "author",
 76 |     "content",
 77 |     "ogImage",
 78 |     "coverImage",
 79 |   ]);
 80 |   const content = await markdownToHtml(post.content || "");
 81 | 
 82 |   return {
 83 |     props: {
 84 |       post: {
 85 |         ...post,
 86 |         content,
 87 |       },
 88 |     },
 89 |   };
 90 | }
 91 | 
 92 | export async function getStaticPaths() {
 93 |   const posts = getAllPosts(["slug"]);
 94 | 
 95 |   return {
 96 |     paths: posts.map((posts) => {
 97 |       return {
 98 |         params: {
 99 |           slug: posts.slug,
100 |         },
101 |       };
102 |     }),
103 |     fallback: false,
104 |   };
105 | }
106 | 


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