Replace JS blog-starter example with TS, deprecate `blog-starter-ty…

…pescript` example (#38395) * Replace `blog-starter` JS example with `blog-starter-typescript` * lint-fix, Revert pnpm-lock.yaml * Revert root readme.md * Add useful sections omitted from original Typescript convert Co-authored-by: JJ Kasper <[email protected]>
vercel · Jul 8, 2022 · 8783793 · 8783793
1 parent 6faf84f
commit 8783793
Show file tree

Hide file tree

Showing 94 changed files with 49 additions and 870 deletions.
diff --git a/examples/blog-starter-typescript/.gitignore b/examples/blog-starter-typescript/.gitignore
diff --git a/examples/blog-starter-typescript/README.md b/examples/blog-starter-typescript/README.md
@@ -1,35 +1,3 @@
-# A statically generated blog example using Next.js, Markdown, and TypeScript
+## Deprecated
 
-This is the existing [blog-starter](https://github.com/vercel/next.js/tree/canary/examples/blog-starter) plus TypeScript.
-
-This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using Markdown files as the data source.
-
-The blog posts are stored in `/_posts` as Markdown files with front matter support. Adding a new Markdown file in there will create a new blog post.
-
-To create the blog posts we use [`remark`](https://github.com/remarkjs/remark) and [`remark-html`](https://github.com/remarkjs/remark-html) to convert the Markdown files into an HTML string, and then send it down as a prop to the page. The metadata of every post is handled by [`gray-matter`](https://github.com/jonschlinkert/gray-matter) and also sent in props to the page.
-
-## Deploy your own
-
-Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/blog-starter-typescript)
-
-[![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-starter-typescript&project-name=blog-starter-typescript&repository-name=blog-starter-typescript)
-
-## How to use
-
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
-
-```bash
-npx create-next-app --example blog-starter-typescript blog-starter-typescript-app
-# or
-yarn create next-app --example blog-starter-typescript blog-starter-typescript-app
-# or
-pnpm create next-app --example blog-starter-typescript blog-starter-typescript-app
-```
-
-Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).
-
-Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
-
-# Notes
-
-`blog-starter-typescript` uses [Tailwind CSS](https://tailwindcss.com) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3).
+The main [blog-starter](/examples/blog-starter) example has been refactored to use TypeScript, so this example is deprecated.
diff --git a/examples/blog-starter-typescript/_posts/dynamic-routing.md b/examples/blog-starter-typescript/_posts/dynamic-routing.md
diff --git a/examples/blog-starter-typescript/_posts/hello-world.md b/examples/blog-starter-typescript/_posts/hello-world.md
diff --git a/examples/blog-starter-typescript/_posts/preview.md b/examples/blog-starter-typescript/_posts/preview.md
diff --git a/examples/blog-starter-typescript/components/container.tsx b/examples/blog-starter-typescript/components/container.tsx
diff --git a/examples/blog-starter-typescript/components/markdown-styles.module.css b/examples/blog-starter-typescript/components/markdown-styles.module.css
diff --git a/examples/blog-starter-typescript/lib/constants.ts b/examples/blog-starter-typescript/lib/constants.ts
diff --git a/examples/blog-starter-typescript/package.json b/examples/blog-starter-typescript/package.json
diff --git a/examples/blog-starter-typescript/postcss.config.js b/examples/blog-starter-typescript/postcss.config.js
diff --git a/examples/blog-starter-typescript/public/assets/blog/authors/jj.jpeg b/examples/blog-starter-typescript/public/assets/blog/authors/jj.jpeg
diff --git a/examples/blog-starter-typescript/public/assets/blog/authors/joe.jpeg b/examples/blog-starter-typescript/public/assets/blog/authors/joe.jpeg
diff --git a/examples/blog-starter-typescript/public/assets/blog/authors/tim.jpeg b/examples/blog-starter-typescript/public/assets/blog/authors/tim.jpeg
diff --git a/examples/blog-starter-typescript/public/assets/blog/dynamic-routing/cover.jpg b/examples/blog-starter-typescript/public/assets/blog/dynamic-routing/cover.jpg
diff --git a/examples/blog-starter-typescript/public/assets/blog/hello-world/cover.jpg b/examples/blog-starter-typescript/public/assets/blog/hello-world/cover.jpg
diff --git a/examples/blog-starter-typescript/public/assets/blog/preview/cover.jpg b/examples/blog-starter-typescript/public/assets/blog/preview/cover.jpg
diff --git a/examples/blog-starter-typescript/styles/index.css b/examples/blog-starter-typescript/styles/index.css
diff --git a/examples/blog-starter-typescript/tailwind.config.js b/examples/blog-starter-typescript/tailwind.config.js
diff --git a/examples/blog-starter/.gitignore b/examples/blog-starter/.gitignore
@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# typescript
+*.tsbuildinfo
diff --git a/...tarter-typescript/@types/remark-html.d.ts → ...ples/blog-starter/@types/remark-html.d.ts b/...tarter-typescript/@types/remark-html.d.ts → ...ples/blog-starter/@types/remark-html.d.ts
diff --git a/examples/blog-starter/README.md b/examples/blog-starter/README.md
@@ -1,4 +1,6 @@
-# A statically generated blog example using Next.js and Markdown
+# A statically generated blog example using Next.js, Markdown, and TypeScript
+
+This is the existing [blog-starter](https://github.com/vercel/next.js/tree/canary/examples/blog-starter) plus TypeScript.
 
 This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using Markdown files as the data source.
 
@@ -51,6 +53,6 @@ Your blog should be up and running on [http://localhost:3000](http://localhost:3
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
 
-## Notes
+# Notes
 
-This blog-starter uses [Tailwind CSS](https://tailwindcss.com) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3).
+`blog-starter` uses [Tailwind CSS](https://tailwindcss.com) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3).
diff --git a/examples/blog-starter/components/alert.js b/examples/blog-starter/components/alert.js
diff --git a/...g-starter-typescript/components/alert.tsx → examples/blog-starter/components/alert.tsx b/...g-starter-typescript/components/alert.tsx → examples/blog-starter/components/alert.tsx
diff --git a/examples/blog-starter/components/avatar.js b/examples/blog-starter/components/avatar.js
diff --git a/...-starter-typescript/components/avatar.tsx → examples/blog-starter/components/avatar.tsx b/...-starter-typescript/components/avatar.tsx → examples/blog-starter/components/avatar.tsx
diff --git a/examples/blog-starter/components/container.js b/examples/blog-starter/components/container.js
diff --git a/examples/blog-starter/components/container.tsx b/examples/blog-starter/components/container.tsx
@@ -0,0 +1,9 @@
+type Props = {
+  children?: React.ReactNode
+}
+
+const Container = ({ children }: Props) => {
+  return <div className="container mx-auto px-5">{children}</div>
+}
+
+export default Container
diff --git a/examples/blog-starter/components/cover-image.js b/examples/blog-starter/components/cover-image.js
diff --git a/...ter-typescript/components/cover-image.tsx → ...s/blog-starter/components/cover-image.tsx b/...ter-typescript/components/cover-image.tsx → ...s/blog-starter/components/cover-image.tsx
diff --git a/examples/blog-starter/components/date-formatter.js b/examples/blog-starter/components/date-formatter.js
diff --git a/...-typescript/components/date-formatter.tsx → ...log-starter/components/date-formatter.tsx b/...-typescript/components/date-formatter.tsx → ...log-starter/components/date-formatter.tsx
diff --git a/examples/blog-starter/components/footer.js b/examples/blog-starter/components/footer.js
diff --git a/...-starter-typescript/components/footer.tsx → examples/blog-starter/components/footer.tsx b/...-starter-typescript/components/footer.tsx → examples/blog-starter/components/footer.tsx
diff --git a/examples/blog-starter/components/header.js b/examples/blog-starter/components/header.js
diff --git a/...-starter-typescript/components/header.tsx → examples/blog-starter/components/header.tsx b/...-starter-typescript/components/header.tsx → examples/blog-starter/components/header.tsx