From 92a2d9d0863cba092515b79740abbfd6c3adc02d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20Weng?= Date: Sat, 1 Aug 2020 16:41:20 +0200 Subject: [PATCH] Update README.md and add style for heading in content block --- README.md | 35 +++-- ...01-nextjs-blog-boilerplate-presentation.md | 126 ++++++++++++++++++ src/content/Content.tsx | 12 +- src/pages/about.tsx | 23 ++-- src/pages/posts/[slug].tsx | 12 +- src/templates/Main.tsx | 3 +- 6 files changed, 182 insertions(+), 29 deletions(-) create mode 100644 _posts/2020-06-01-nextjs-blog-boilerplate-presentation.md diff --git a/README.md b/README.md index 719a058..2a0c213 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,20 @@ -# Next js Boilerplate +# Next js Blog Boilerplate -🚀 Next.js Boilerplate is starter code for your Next js project by putting developer experience first . ⚡️ Made with [Next.js](https://nextjs.org), [TypeScript](https://www.typescriptlang.org), [ESLint](https://eslint.org), [Prettier](https://prettier.io), [PostCSS](https://postcss.org), [Tailwind CSS](https://tailwindcss.com). +🚀 Next.js Blog Boilerplate is starter code for your blog based on Next.js framework. ⚡️ Made with [Next.js](https://nextjs.org), [TypeScript](https://www.typescriptlang.org), [ESLint](https://eslint.org), [Prettier](https://prettier.io), [PostCSS](https://postcss.org), [Tailwind CSS](https://tailwindcss.com). -Clone this project and use it to create your own [Next.js](https://nextjs.org) project. You can check a [Next js templates demo](https://creativedesignsguru.com/demo/Nextjs-Boilerplate/). +Clone this project and use it to create your own [Next.js](https://nextjs.org) blog. You can check a [Next js blog templates demo](https://creativedesignsguru.com/demo/Nextjs-Blog-Boilerplate/). ### Features +Blog feature: + +- 🎈 Syntax Highlighting with Prism.js +- 🤖 SEO metadata and Open Graph tags +- ⚙️ JSON-LD for richer indexing +- 📖 Pagination +- ⬇️ Markdown +- 💯 Maximize lighthouse score + Developer experience first: - 🔥 [Next.js](https://nextjs.org) for Static Site Generator @@ -37,7 +46,7 @@ Built-in feature from Next.js: Run the following command on your local environment: ``` -git clone --depth=1 https://github.com/ixartz/Next-js-Boilerplate.git my-project-name +git clone --depth=1 https://github.com/ixartz/Next-js-Blog-Boilerplate.git my-project-name cd my-project-name npm install ``` @@ -52,10 +61,15 @@ Open http://localhost:8080 with your favorite browser to see your project. ``` . -├── public # Static files -├── src -│ ├── pages # Next.js pages -│ └── styles # CSS files +├── _posts # Your blog posts +├── public # Static files +│ ├── assets +│ │ └── images +│ │ └── posts # Images used in your blog posts +└── src + ├── pages # Next.js pages + ├── styles # Your blog CSS files + └── templates # Blog templates ``` ### Customization @@ -63,7 +77,10 @@ Open http://localhost:8080 with your favorite browser to see your project. You can easily configure Next js Boilerplate. Please change the following file: - `public/apple-touch-icon.png`, `public/favicon.ico`, `public/favicon-16x16.png` and `public/favicon-32x32.png`: your blog favicon, you can generate from https://favicon.io/favicon-converter/ +- `public/assets/images/logo.png`, `public/assets/images/logo-32x32.png`: your blog logo - `src/styles/main.css`: your blog CSS file using Tailwind CSS +- `src/utils/Config.ts`: configuration file like blog name, url, etc. +- `src/templates/Main.tsx`: blog theme ### Deploy to production @@ -88,7 +105,7 @@ Now, your blog is ready to be deployed. All generated files are located at `dist Clone this repository on own GitHub account and deploy to Netlify: -[![Netlify Deploy button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ixartz/Next-js-Boilerplate) +[![Netlify Deploy button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ixartz/Next-js-Blog-Boilerplate) ### Contributions diff --git a/_posts/2020-06-01-nextjs-blog-boilerplate-presentation.md b/_posts/2020-06-01-nextjs-blog-boilerplate-presentation.md new file mode 100644 index 0000000..e9bf36c --- /dev/null +++ b/_posts/2020-06-01-nextjs-blog-boilerplate-presentation.md @@ -0,0 +1,126 @@ +--- +title: 'Next.js blog Boilerplate Presentation' +description: Everything you need to use this Nextjs Boilerplate template +date: '2020-06-01' +modified_date: '2020-06-01' +image: /assets/images/posts/random-img.jpg +--- + +# Next js Blog Boilerplate + +🚀 Next.js Blog Boilerplate is starter code for your blog based on Next.js framework. ⚡️ Made with [Next.js](https://nextjs.org), [TypeScript](https://www.typescriptlang.org), [ESLint](https://eslint.org), [Prettier](https://prettier.io), [PostCSS](https://postcss.org), [Tailwind CSS](https://tailwindcss.com). + +Clone this project and use it to create your own [Next.js](https://nextjs.org) blog. You can check a [Next js blog templates demo](https://creativedesignsguru.com/demo/Nextjs-Blog-Boilerplate/). + +### Features + +Blog feature: + +- 🎈 Syntax Highlighting with Prism.js +- 🤖 SEO metadata and Open Graph tags +- ⚙️ JSON-LD for richer indexing +- 📖 Pagination +- ⬇️ Markdown +- 💯 Maximize lighthouse score + +Developer experience first: + +- 🔥 [Next.js](https://nextjs.org) for Static Site Generator +- 🎨 Integrate with [Tailwind CSS](https://tailwindcss.com) +- 💅 [PostCSS](https://postcss.org) for processing [Tailwind CSS](https://tailwindcss.com) +- 🎉 Type checking [TypeScript](https://www.typescriptlang.org) +- ✏️ Linter with [ESLint](https://eslint.org) +- 🛠 Code Formatter with [Prettier](https://prettier.io) +- 🦊 SEO metadata, [JSON-LD](https://developers.google.com/search/docs/guides/intro-structured-data) and [Open Graph](https://ogp.me/) tags with [Next SEO](https://github.com/garmeeh/next-seo) + +Built-in feature from Next.js: + +- ☕ Minify HTML & CSS with [HTMLMinifier](https://www.npmjs.com/package/html-minifier) +- 💨 Live reload +- ✅ Cache busting + +### Philosophy + +- Minimal code +- SEO-friendly +- 🚀 Production-ready + +### Requirements + +- Node.js and npm + +### Getting started + +Run the following command on your local environment: + +```shell +git clone --depth=1 https://github.com/ixartz/Next-js-Blog-Boilerplate.git my-project-name +cd my-project-name +npm install +``` + +Then, you can run locally in development mode with live reload: + +```shell +npm run dev +``` + +Open http://localhost:8080 with your favorite browser to see your project. + +```shell +. +├── _posts # Your blog posts +├── public # Static files +│ ├── assets +│ │ └── images +│ │ └── posts # Images used in your blog posts +└── src + ├── pages # Next.js pages + ├── styles # Your blog CSS files + └── templates # Blog templates +``` + +### Customization + +You can easily configure Next js Boilerplate. Please change the following file: + +- `public/apple-touch-icon.png`, `public/favicon.ico`, `public/favicon-16x16.png` and `public/favicon-32x32.png`: your blog favicon, you can generate from https://favicon.io/favicon-converter/ +- `public/assets/images/logo.png`, `public/assets/images/logo-32x32.png`: your blog logo +- `src/styles/main.css`: your blog CSS file using Tailwind CSS +- `src/utils/Config.ts`: configuration file like blog name, url, etc. +- `src/templates/Main.tsx`: blog theme + +### Deploy to production + +You can see the results locally in production mode with: + +```shell +$ npm run build +$ npm run start +``` + +The generated HTML and CSS files are minified (built-in feature from Next js). It will also removed unused CSS from [Tailwind CSS](https://tailwindcss.com). + +You can create an optimized production build with: + +```shell +npm run build-prod +``` + +Now, your blog is ready to be deployed. All generated files are located at `dist` folder, which you can deploy with any hosting service. + +### Deploy to Netlify + +Clone this repository on own GitHub account and deploy to Netlify: + +[![Netlify Deploy button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ixartz/Next-js-Blog-Boilerplate) + +### Contributions + +Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug. + +### License + +Licensed under the MIT License, Copyright © 2020 + +See [LICENSE](LICENSE) for more information. diff --git a/src/content/Content.tsx b/src/content/Content.tsx index 56058e8..b59150f 100644 --- a/src/content/Content.tsx +++ b/src/content/Content.tsx @@ -10,10 +10,6 @@ const Content = (props: IContentProps) => ( diff --git a/src/pages/about.tsx b/src/pages/about.tsx index bb5a1cd..3c4998b 100644 --- a/src/pages/about.tsx +++ b/src/pages/about.tsx @@ -1,20 +1,23 @@ import React from 'react'; +import { Content } from '../content/Content'; import { Meta } from '../layout/Meta'; import { Main } from '../templates/Main'; const About = () => (
}> -

- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione fuga recusandae quidem. - Quaerat molestiae blanditiis doloremque possimus labore voluptatibus distinctio recusandae - autem esse explicabo molestias officia placeat, accusamus aut saepe. -

-

- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione fuga recusandae quidem. - Quaerat molestiae blanditiis doloremque possimus labore voluptatibus distinctio recusandae - autem esse explicabo molestias officia placeat, accusamus aut saepe. -

+ +

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione fuga recusandae quidem. + Quaerat molestiae blanditiis doloremque possimus labore voluptatibus distinctio recusandae + autem esse explicabo molestias officia placeat, accusamus aut saepe. +

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione fuga recusandae quidem. + Quaerat molestiae blanditiis doloremque possimus labore voluptatibus distinctio recusandae + autem esse explicabo molestias officia placeat, accusamus aut saepe. +

+
); diff --git a/src/pages/posts/[slug].tsx b/src/pages/posts/[slug].tsx index b7a3741..de79def 100644 --- a/src/pages/posts/[slug].tsx +++ b/src/pages/posts/[slug].tsx @@ -3,6 +3,7 @@ import React from 'react'; import { format } from 'date-fns'; import { GetStaticPaths, GetStaticProps } from 'next'; +import { Content } from '../../content/Content'; import { Meta } from '../../layout/Meta'; import { Main } from '../../templates/Main'; import { getAllPosts, getPostBySlug } from '../../utils/Content'; @@ -37,10 +38,13 @@ const DisplayPost = (props: IPostProps) => ( >

{props.title}

{format(new Date(props.date), 'LLLL d, yyyy')}
-
+ + +
+ ); diff --git a/src/templates/Main.tsx b/src/templates/Main.tsx index d33deae..7bc24bc 100644 --- a/src/templates/Main.tsx +++ b/src/templates/Main.tsx @@ -2,7 +2,6 @@ import React, { ReactNode } from 'react'; import Link from 'next/link'; -import { Content } from '../content/Content'; import { Navbar } from '../navigation/Navbar'; import { Config } from '../utils/Config'; @@ -40,7 +39,7 @@ const Main = (props: IMainProps) => (
- {props.children} +
{props.children}
Made with