Skip to content

Commit dc1658f

Browse files
UndyingSugimotokodiakhq[bot]timneutkens
authored
[Examples] Added blog-starter-typescript (vercel#12981)
* feature: add blog-starter-typescript * chore: edit tailwind.config * Fix linting Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Tim Neutkens <timneutkens@me.com>
1 parent 83827f7 commit dc1658f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+1013
-0
lines changed

‎examples/blog-starter-typescript/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.env
2+
.now

‎examples/blog-starter-typescript/@types/remark-html.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
declare module 'remark-html'

‎examples/blog-starter-typescript/README.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# A statically generated blog example using Next.js and Markdown and TypeScript
2+
3+
This is the existing [blog-starter](https://github.com/zeit/next.js/tree/canary/examples/blog-starter) plus TypeScript.
4+
5+
This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using markdown files as the data source.
6+
7+
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.
8+
9+
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.
10+
11+
## How to use
12+
13+
### Using `create-next-app`
14+
15+
Execute [`create-next-app`](https://github.com/zeit/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:
16+
17+
```bash
18+
npm init next-app --example blog-starter blog-starter-app
19+
# or
20+
yarn create next-app --example blog-starter blog-starter-app
21+
```
22+
23+
### Download manually
24+
25+
Download the example:
26+
27+
```bash
28+
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/blog-starter
29+
cd blog-starter
30+
```
31+
32+
Install dependencies and run the example:
33+
34+
```bash
35+
npm install
36+
npm run dev
37+
38+
# or
39+
40+
yarn install
41+
yarn dev
42+
```
43+
44+
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/zeit/next.js/discussions).
45+
46+
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)).
47+
48+
# Notes
49+
50+
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.

‎examples/blog-starter-typescript/_posts/dynamic-routing.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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 facilisi 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 facilisi 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. Ridiculus 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.

‎examples/blog-starter-typescript/_posts/hello-world.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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 facilisi 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 facilisi 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. Ridiculus 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.

‎examples/blog-starter-typescript/_posts/preview.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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 facilisi 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 facilisi 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. Ridiculus 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.

‎examples/blog-starter-typescript/components/alert.tsx

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

‎examples/blog-starter-typescript/components/avatar.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react'
2+
3+
type Props = {
4+
name: string
5+
picture: string
6+
}
7+
8+
const Avatar: React.FC<Props> = ({ name, picture }) => {
9+
return (
10+
<div className="flex items-center">
11+
<img src={picture} className="w-12 h-12 rounded-full mr-4" alt={name} />
12+
<div className="text-xl font-bold">{name}</div>
13+
</div>
14+
)
15+
}
16+
17+
export default Avatar

‎examples/blog-starter-typescript/components/container.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react'
2+
3+
const Container: React.FC = ({ children }) => {
4+
return <div className="container mx-auto px-5">{children}</div>
5+
}
6+
7+
export default Container

‎examples/blog-starter-typescript/components/cover-image.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
import cn from 'classnames'
3+
import Link from 'next/link'
4+
5+
type Props = {
6+
title: string
7+
src: string
8+
slug?: string
9+
}
10+
11+
const CoverImage: React.FC<Props> = ({ title, src, slug }) => {
12+
const image = (
13+
<img
14+
src={src}
15+
alt={`Cover Image for ${title}`}
16+
className={cn('shadow-small', {
17+
'hover:shadow-medium transition-shadow duration-200': slug,
18+
})}
19+
/>
20+
)
21+
return (
22+
<div className="-mx-5 sm:mx-0">
23+
{slug ? (
24+
<Link as={`/posts/${slug}`} href="/posts/[slug]">
25+
<a aria-label={title}>{image}</a>
26+
</Link>
27+
) : (
28+
image
29+
)}
30+
</div>
31+
)
32+
}
33+
34+
export default CoverImage

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy