vercel · leerob · Mar 22, 2021 · Mar 19, 2021 · Mar 19, 2021 · Mar 19, 2021
diff --git a/examples/blog/.gitignore b/examples/blog/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+public/feed.xml
diff --git a/examples/blog/README.md b/examples/blog/README.md
@@ -0,0 +1,34 @@
+# Portfolio Starter Kit
+
+This portfolio is built with **Next.js** and a library called [Nextra](https://nextra.vercel.app/). It allows you to write Markdown and focus on the _content_ of your portfolio. This starter includes:
+
+- Automatically configured to handle Markdown/MDX
+- Generates an RSS feed based on your posts
+- A beautiful theme included out of the box
+- Easily categorize posts with tags
+- Fast, optimized web font loading
+
+## Configuration
+
+1. Update your name in `theme.config.js` or change the footer.
+1. Update your name and site URL for the RSS feed in `scripts/gen-rss.js`.
+1. Update the meta tags in `pages/_document.js`.
+1. Update the posts inside `pages/posts/*.md` with your own content.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/blog&project-name=portfolio&repository-name=portfolio)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example blog my-blog
+# or
+yarn create next-app --example blog my-blog
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/blog/next.config.js b/examples/blog/next.config.js
@@ -0,0 +1,2 @@
+const withNextra = require('nextra')('nextra-theme-blog', './theme.config.js')
+module.exports = withNextra()
diff --git a/examples/blog/package.json b/examples/blog/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "portfolio",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "next",
+    "build": "node ./scripts/gen-rss.js && next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "gray-matter": "^4.0.2",
+    "next": "latest",
+    "nextra": "^0.4.3",
+    "nextra-theme-blog": "^0.1.4",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "rss": "^1.2.2"
+  },
+  "prettier": {
+    "arrowParens": "always",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "none",
+    "semi": false
+  }
+}
diff --git a/examples/blog/pages/_app.js b/examples/blog/pages/_app.js
@@ -0,0 +1,27 @@
+import 'nextra-theme-blog/style.css'
+import Head from 'next/head'
+
+import '../styles/main.css'
+
+export default function Nextra({ Component, pageProps }) {
+  return (
+    <>
+      <Head>
+        <link
+          rel="alternate"
+          type="application/rss+xml"
+          title="RSS"
+          href="/feed.xml"
+        />
+        <link
+          rel="preload"
+          href="/fonts/Inter-roman.latin.var.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+      </Head>
+      <Component {...pageProps} />
+    </>
+  )
+}
diff --git a/examples/blog/pages/_document.js b/examples/blog/pages/_document.js
@@ -0,0 +1,41 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+
+  render() {
+    const meta = {
+      title: 'Next.js Blog Starter Kit',
+      description: 'Clone and deploy your own Next.js portfolio in minutes.',
+      image:
+        'https://assets.vercel.com/image/upload/q_auto/front/vercel/dps.png'
+    }
+
+    return (
+      <Html>
+        <Head>
+          <meta name="robots" content="follow, index" />
+          <meta name="description" content={meta.description} />
+          <meta property="og:site_name" content={meta.title} />
+          <meta property="og:description" content={meta.description} />
+          <meta property="og:title" content={meta.title} />
+          <meta property="og:image" content={meta.image} />
+          <meta name="twitter:card" content="summary_large_image" />
+          <meta name="twitter:site" content="@yourname" />
+          <meta name="twitter:title" content={meta.title} />
+          <meta name="twitter:description" content={meta.description} />
+          <meta name="twitter:image" content={meta.image} />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
diff --git a/examples/blog/pages/index.mdx b/examples/blog/pages/index.mdx
@@ -0,0 +1,56 @@
+---
+type: page
+title: About
+date: 2021-03-19
+---
+
+# Your Name
+
+Hey, I'm a Senior Software Engineer at Company. I enjoy working with Next.js and crafting beautiful front-end experiences.
+
+This portfolio is built with **Next.js** and a library called [Nextra](https://nextra.vercel.app/). It allows you to write Markdown and focus on the _content_ of your portfolio.
+
+[**Deploy your own**](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/blog&project-name=portfolio&repository-name=portfolio) in a few minutes.
+
+---
+
+<div>
+  Twitter [@yourname](https://twitter.com/yourname)
+  <br />
+  GitHub [@yourname](https://github.com/yourname)
+  <br />
+  Instagram [@yourname](https://instagram.com/yourname)
+  <br />
+  Email your@name.com
+</div>
+
+<br />
+
+<details><summary children="Resume"/>
+
+<style jsx>{`
+  summary:not(:focus-visible):focus {
+    outline: none;
+  }
+`}</style>
+
+### Experience
+
+- Senior Software Engineer at Company 2021–
+- Software Engineer at Company, 2017–2021
+- Bachelor of Computer Science at Your University, 2013–2017
+
+### Projects
+
+- [Next.js](https://nextjs.org)
+- [Nextra](https://nextra.vercel.app/)
+- [Vercel](http://vercel.com)
+
+## Skills
+
+- Next.js
+- TypeScript
+- Vercel
+- CSS
+
+</details>
diff --git a/examples/blog/pages/photos.mdx b/examples/blog/pages/photos.mdx
@@ -0,0 +1,31 @@
+---
+type: page
+title: Photos
+date: 2021-03-18
+---
+
+# Photos
+
+Here's some of my photography.
+
+import Image from 'next/image'
+
+<Image
+  src="/images/photo2.jpg"
+  alt="Photo"
+  width={1125}
+  height={750}
+  quality={100}
+  className="next-image"
+/>
+[Unsplash ↗ ](https://unsplash.com/photos/WeYamle9fDM)
+
+<Image
+  src="/images/photo.jpg"
+  alt="Photo"
+  width={1125}
+  height={750}
+  quality={100}
+  className="next-image"
+/>
+[Unsplash ↗ ](https://unsplash.com/photos/ndN00KmbJ1c)
diff --git a/examples/blog/pages/posts/index.md b/examples/blog/pages/posts/index.md
@@ -0,0 +1,7 @@
+---
+type: posts
+title: Posts
+date: 2021-03-18
+---
+
+# Posts
diff --git a/examples/blog/pages/posts/markdown.md b/examples/blog/pages/posts/markdown.md
@@ -0,0 +1,99 @@
+---
+title: Markdown Examples
+date: 2021/3/19
+description: View examples of all possible Markdown options.
+tag: web development
+author: You
+---
+
+# Markdown Examples
+
+## h2 Heading
+
+### h3 Heading
+
+#### h4 Heading
+
+##### h5 Heading
+
+###### h6 Heading
+
+## Emphasis
+
+**This is bold text**
+
+_This is italic text_
+
+~~Strikethrough~~
+
+## Blockquotes
+
+> Develop. Preview. Ship. – Vercel
+
+## Lists
+
+Unordered
+
+- Lorem ipsum dolor sit amet
+- Consectetur adipiscing elit
+- Integer molestie lorem at massa
+
+Ordered
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+
+## Code
+
+Inline `code`
+
+```
+export default function Nextra({ Component, pageProps }) {
+  return (
+    <>
+      <Head>
+        <link
+          rel="alternate"
+          type="application/rss+xml"
+          title="RSS"
+          href="/feed.xml"
+        />
+        <link
+          rel="preload"
+          href="/fonts/Inter-roman.latin.var.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+      </Head>
+      <Component {...pageProps} />
+    </>
+  )
+}
+```
+
+## Tables
+
+| **Option** | **Description**                                                                                                             |
+| ---------- | --------------------------------------------------------------------------------------------------------------------------- |
+| First      | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
+| Second     | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
+| Third      | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
+
+## Links
+
+- [Next.js](https://nextjs.org)
+- [Nextra](https://nextra.vercel.app/)
+- [Vercel](http://vercel.com)
+
+### Footnotes
+
+- Footnote [^1].
+- Footnote [^2].
+
+[^1]: Footnote **can have markup**
+
+  and multiple paragraphs.
+
+[^2]: Footnote text.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		const withNextra = require('nextra')('nextra-theme-blog', './theme.config.js')
		module.exports = withNextra()