Update README.md and add style for heading in content block

mishguruorg · Aug 1, 2020 · 92a2d9d · 92a2d9d
1 parent a3372a6
commit 92a2d9d
Show file tree

Hide file tree

Showing 6 changed files with 182 additions and 29 deletions.
diff --git 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,18 +61,26 @@ 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
 
 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
@@ -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
@@ -10,17 +10,21 @@ const Content = (props: IContentProps) => (
 
     <style jsx>
       {`
-        .content {
-          @apply text-xl py-5;
-        }
-
         .content :global(p) {
           @apply my-6;
         }
 
         .content :global(ul) {
           @apply my-6;
         }
+
+        .content :global(h2) {
+          @apply text-2xl font-semibold text-gray-700 my-4;
+        }
+
+        .content :global(h3) {
+          @apply text-xl font-semibold text-gray-700 my-4;
+        }
       `}
     </style>
   </div>

diff --git 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 = () => (
   <Main meta={<Meta title="Lorem ipsum" description="Lorem ipsum" />}>
-    <p>
-      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.
-    </p>
-    <p>
-      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.
-    </p>
+    <Content>
+      <p>
+        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.
+      </p>
+      <p>
+        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.
+      </p>
+    </Content>
   </Main>
 );
 

diff --git 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) => (
   >
     <h1 className="text-center font-bold text-3xl text-gray-900">{props.title}</h1>
     <div className="text-center text-sm mb-8">{format(new Date(props.date), 'LLLL d, yyyy')}</div>
-    <div
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{ __html: props.content }}
-    />
+
+    <Content>
+      <div
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: props.content }}
+      />
+    </Content>
   </Main>
 );
 

diff --git 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) => (
         </div>
       </div>
 
-      <Content>{props.children}</Content>
+      <div className="text-xl py-5">{props.children}</div>
 
       <div className="border-t border-gray-300 text-center py-8">
         Made with