├── .eslintrc.json
├── next.config.js
├── config.js
├── public
├── banner.png
├── favicon.ico
├── images
│ ├── firstway.png
│ ├── geenome.png
│ ├── next.js.png
│ ├── firstway-2.png
│ ├── secondway.png
│ ├── npm-commands.png
│ ├── the-snap-store.png
│ ├── gnome-screenshots.png
│ ├── npm-init-command-1.png
│ ├── HTML-Version-History.jpg
│ ├── Title-tag-In-HTML-5.jpg
│ ├── next.js-add-css-code.jpg
│ ├── Linux-Basic-Introduction--1-.png
│ ├── Text-Highlighting-In-HTML-5.png
│ └── How-to-capture-screenshots-in-Raspberry-PI-4.png
├── robots.txt
├── sitemap.xml
├── vercel.svg
└── sitemap-0.xml
├── pages
├── api
│ └── hello.js
├── _app.js
├── Search.js
├── index.js
├── tag
│ └── [slug].js
├── category
│ └── [slug].js
└── blog
│ └── [slug].js
├── components
├── Footer.js
├── Banner.js
├── ItemPost.js
├── Post.js
├── Header.js
└── Sidebar.js
├── next-sitemap.js
├── next-seo.config.js
├── utils
└── index.js
├── posts
├── how-to-add-search-bar-functionality-in-ghost-cms-help-of-searchinghost.md
├── title-tag-in-html-5.md
├── text-highlighting-in-html-5.md
├── how-to-check-the-snap-store-package-available-for-raspberry-pi-4-or-not.md
├── html-version-history.md
├── how-to-capture-screenshots-in-raspberry-pi-4.md
├── keyboard-shortcut-keys-for-linux-terminal.md
├── how-to-add-css-in-next-js.md
├── how-is-npm-install-command.md
├── what-is-next-js.md
└── npm-outdated-command.md
├── .gitignore
├── package.json
├── styles
├── globals.css
└── Home.module.css
├── README.md
└── search.json
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | reactStrictMode: true,
3 | }
4 |
--------------------------------------------------------------------------------
/config.js:
--------------------------------------------------------------------------------
1 | const SITE_URL= 'https://markdowbnextjsblog.vercel.app/'
2 |
3 | export default SITE_URL
--------------------------------------------------------------------------------
/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/officialrajdeepsingh/markdowbnextjsblog/HEAD/public/banner.png
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/officialrajdeepsingh/markdowbnextjsblog/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/public/images/firstway.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/officialrajdeepsingh/markdowbnextjsblog/HEAD/public/images/firstway.png
--------------------------------------------------------------------------------
/public/images/geenome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/officialrajdeepsingh/markdowbnextjsblog/HEAD/public/images/geenome.png
--------------------------------------------------------------------------------
/public/images/next.js.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/officialrajdeepsingh/markdowbnextjsblog/HEAD/public/images/next.js.png
--------------------------------------------------------------------------------
/public/images/firstway-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/officialrajdeepsingh/markdowbnextjsblog/HEAD/public/images/firstway-2.png
--------------------------------------------------------------------------------
/public/images/secondway.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/officialrajdeepsingh/markdowbnextjsblog/HEAD/public/images/secondway.png
--------------------------------------------------------------------------------
/public/images/npm-commands.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/officialrajdeepsingh/markdowbnextjsblog/HEAD/public/images/npm-commands.png
--------------------------------------------------------------------------------
/public/images/the-snap-store.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/officialrajdeepsingh/markdowbnextjsblog/HEAD/public/images/the-snap-store.png
--------------------------------------------------------------------------------
/public/images/gnome-screenshots.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/officialrajdeepsingh/markdowbnextjsblog/HEAD/public/images/gnome-screenshots.png
--------------------------------------------------------------------------------
/public/images/npm-init-command-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/officialrajdeepsingh/markdowbnextjsblog/HEAD/public/images/npm-init-command-1.png
--------------------------------------------------------------------------------
/public/images/HTML-Version-History.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/officialrajdeepsingh/markdowbnextjsblog/HEAD/public/images/HTML-Version-History.jpg
--------------------------------------------------------------------------------
/public/images/Title-tag-In-HTML-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/officialrajdeepsingh/markdowbnextjsblog/HEAD/public/images/Title-tag-In-HTML-5.jpg
--------------------------------------------------------------------------------
/public/images/next.js-add-css-code.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/officialrajdeepsingh/markdowbnextjsblog/HEAD/public/images/next.js-add-css-code.jpg
--------------------------------------------------------------------------------
/public/images/Linux-Basic-Introduction--1-.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/officialrajdeepsingh/markdowbnextjsblog/HEAD/public/images/Linux-Basic-Introduction--1-.png
--------------------------------------------------------------------------------
/public/images/Text-Highlighting-In-HTML-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/officialrajdeepsingh/markdowbnextjsblog/HEAD/public/images/Text-Highlighting-In-HTML-5.png
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # *
2 | User-agent: *
3 | Allow: /
4 |
5 | # Host
6 | Host: http://localhost:3000/
7 |
8 | # Sitemaps
9 | Sitemap: http://localhost:3000/sitemap.xml
10 |
--------------------------------------------------------------------------------
/public/images/How-to-capture-screenshots-in-Raspberry-PI-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/officialrajdeepsingh/markdowbnextjsblog/HEAD/public/images/How-to-capture-screenshots-in-Raspberry-PI-4.png
--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 |
3 | export default function handler(req, res) {
4 | res.status(200).json({ name: 'John Doe' })
5 | }
6 |
--------------------------------------------------------------------------------
/public/sitemap.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | http://localhost:3000/sitemap-0.xml
4 |
--------------------------------------------------------------------------------
/components/Footer.js:
--------------------------------------------------------------------------------
1 | export default function Footer() {
2 | return
5 | }
--------------------------------------------------------------------------------
/next-sitemap.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next-sitemap').IConfig} */
2 |
3 | module.exports = {
4 | siteUrl: process.env.SITE_URL || 'https://example.com',
5 | generateRobotsTxt: true, // (optional)
6 | // Default transformation function
7 | }
--------------------------------------------------------------------------------
/next-seo.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | openGraph: {
3 | type: 'website',
4 | locale: 'en_IE',
5 | url: 'https://markdownnextjs.com',
6 | site_name: 'Rajdeep Singh',
7 | },
8 | twitter: {
9 | handle: '@Official_R_deep',
10 | site: '@Official_R_deep',
11 | cardType: 'summary_large_image',
12 | }
13 | };
--------------------------------------------------------------------------------
/utils/index.js:
--------------------------------------------------------------------------------
1 | import SITE_URL from "../config";
2 |
3 | export function sortByDate(a, b) {
4 | return new Date(b.frontmatter.date) - new Date(a.frontmatter.date)
5 | }
6 |
7 | export function slugify(title) {
8 | return title.toLowerCase().trim().replace(/[^\w ]+/g, '').replace(/ +/g, '-');
9 | }
10 |
11 | export function ImageUrl(url) {
12 |
13 | return SITE_URL + url
14 |
15 | }
--------------------------------------------------------------------------------
/posts/how-to-add-search-bar-functionality-in-ghost-cms-help-of-searchinghost.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | date : "2021-10-11T10:41:36Z"
4 | description : ""
5 | draft : true
6 | slug : "how-to-add-search-bar-functionality-in-ghost-cms-help-of-searchinghost"
7 | title : "How to Add Search bar functionality in Ghost Cms Help of SearchinGhost"
8 |
9 | ---
10 |
11 |
12 |
13 |
14 | https://github.com/gmfmi/searchinGhost
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/components/Banner.js:
--------------------------------------------------------------------------------
1 | export default function Banner() {
2 | return(
3 |
4 |
5 |
6 |
Welcome to my blog home page
7 |
Build nextjs blog website with Markdown, sitemap, serachbar, category, tag and SEO support
8 |
9 |
10 |
11 | )
12 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 |
33 | # vercel
34 | .vercel
35 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "markdownblog",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "next": "12.1.5",
13 | "react": "18.1.0",
14 | "react-dom": "18.1.0"
15 | },
16 | "devDependencies": {
17 | "eslint": "7.32.0",
18 | "eslint-config-next": "12.1.5",
19 | "gray-matter": "^4.0.3",
20 | "marked": "^4.0.14",
21 | "next-seo": "^5.4.0",
22 | "next-sitemap": "^2.5.20"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | padding: 0;
4 | margin: 0;
5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
7 | }
8 |
9 | a {
10 | color: inherit;
11 | text-decoration: none;
12 | }
13 |
14 | * {
15 | box-sizing: border-box;
16 | }
17 |
18 | p img{
19 | width:750px;
20 | margin: 5px auto;
21 | }
22 | pre{
23 | background-color: rgba(0, 0, 0, 0.548);
24 | width: 760px;
25 | padding: 6px 18px;
26 | }
27 | code{
28 | width: 100%;
29 | color: white;
30 | scroll-behavior: smooth;
31 | overflow-x: scroll;
32 |
33 | }
--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 | import Head from "next/head";
3 | import Header from "../components/Header";
4 | import Footer from "../components/Footer";
5 | import { DefaultSeo } from 'next-seo';
6 | import SEO from '../next-seo.config';
7 |
8 |
9 | function MyApp({ Component, pageProps }) {
10 | return ( <>
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | >)
20 | }
21 |
22 | export default MyApp
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Build static website with markdown and nextjs.
2 | In nextjs we provide sitemap, SEO and Search support.
3 |
4 | ## Follow Article Series
5 | https://medium.com/nextjs/build-the-static-blog-with-next-js-and-markdown-59576c75fbf2
6 |
7 | https://medium.com/nextjs/build-the-static-blog-with-next-js-and-markdown-d438c2f74297
8 |
9 | https://medium.com/nextjs/build-the-search-functionality-in-a-static-blog-with-next-js-and-markdown-33ebc5a2214e
10 |
11 | https://medium.com/nextjs/build-the-seo-and-sitemap-functionality-in-a-static-blog-with-next-js-and-markdown-d0b62c83d7f2
12 |
13 |
14 |
15 | ## step
16 | 1. Download code
17 | 2. Run the `npm install`
18 | 3. To start local develpoment server run ` npm run dev`
19 |
20 | ## Note
21 | change your ` localhost:3000 ` url in `./config.js` url.
22 |
23 | ## HTML Template
24 | https://startbootstrap.com/template/blog-home
25 |
--------------------------------------------------------------------------------
/components/ItemPost.js:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 |
3 | import { ImageUrl } from "../utils";
4 |
5 | export default function ItemPost({ post: {post } }) {
6 |
7 | // const imageUrl= process.env.SITE_URL + post.images[0]
8 |
9 |
10 | // console.log(imageUrl,' imageUrl ')
11 |
12 | const date = new Date(post.date)
13 |
14 | return (
15 |
16 |
17 |
18 |
{`${date.getMonth() + 1} - ${date.getDate()} - ${date.getFullYear()}`}
19 |
{post.title}
20 |
{post.summary}
21 |
22 |
Read More
23 |
24 |
25 |
26 |
27 |
28 | )
29 | }
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
3 |
4 |
--------------------------------------------------------------------------------
/components/Post.js:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 | import { slugify } from '../utils'
3 |
4 | export default function Post({ post }) {
5 |
6 | const date = new Date(post.frontmatter?.date)
7 | return (
8 |
9 |
10 |
11 |
{`${date.getMonth() + 1} - ${date.getDate()} - ${date.getFullYear()}`}
12 |
13 |
{
14 | post.frontmatter.tags.map(
15 | tag => {
16 |
17 | const slug = slugify(tag)
18 |
19 | return (
20 |
21 | #{tag}
22 |
23 | )
24 | }
25 | )
26 | }
27 |
{post.frontmatter.title}
28 |
{post.frontmatter.summary}
29 |
30 |
Read More
31 |
32 |
33 |
34 | )
35 | }
--------------------------------------------------------------------------------
/components/Header.js:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 | export default function Header() {
3 | return (<>
4 |
5 |
6 |
29 |
30 | >
31 | )
32 | }
--------------------------------------------------------------------------------
/posts/title-tag-in-html-5.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | categories : ["html", "html 5", "html for beginner", "html tutorial", "title tag", "html title tag"]
4 | date : "2020-12-25T10:09:58Z"
5 | description : "Title tag display page information in the browser toolbar."
6 | draft : false
7 | image : "images/Title-tag-In-HTML-5.jpg"
8 | images : ["images/Title-tag-In-HTML-5.jpg"]
9 | slug : "title-tag-in-html-5"
10 | summary : "Title tag display page information in the browser toolbar."
11 | tags : ["html", "html 5", "html for beginner", "html tutorial", "title tag", "html title tag"]
12 | title : "Title tag In HTML 5?"
13 |
14 | ---
15 |
16 |
17 |
18 | Title tag Use Display Page Information In Web browser On Top. The title is also Use In the Body tag.Title tag Provided a title for the Page When You Added to Favorites in The Browser. Title Tag also Displays title Information for the Page in Search Engine Results
19 |
20 | **Syntax:**
21 |
22 | ```html
23 | Heading With Title Tag
24 | ```
25 |
26 |
27 |
28 | You Use Title Tag Inside Body By Default Title tag Display None inside Browser.
29 |
30 | ```css
31 | title {
32 | display: none;
33 | }
34 | ```
35 |
36 |
37 |
38 | If you use the title tag shown in the browser, add CSS To Display Title In Browser.
39 |
40 | ```html
41 | Heading With Title Tag
42 | ```
43 |
44 | ---
45 |
46 | ### Example:
47 |
48 | ```html
49 |
50 |
51 |
52 |
53 | Index Page Information
54 |
55 |
56 |
57 | Heading With Title Tag
58 |
59 |
60 |
61 |
62 | ```
63 |
64 | ---
65 |
66 | # Contact me
67 |
68 | * [https://www.facebook.com/officialrajdeepsingh/](https://www.facebook.com/officialrajdeepsingh/)
69 | * [https://medium.com/officialrajdeepsingh](https://medium.com/officialrajdeepsingh)
70 | * [officialrajdeepsingh@gmail.com](mailto:officialrajdeepsingh@gmail.com)
71 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/posts/text-highlighting-in-html-5.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | categories : ["html", "html 5", "html tutorial", "Text Highlighting", "text highlighting in html", "html for beginner"]
4 | date : "2020-12-28T14:09:38Z"
5 | description : "Mark tag Help to High Lighting text in HTML 5"
6 | draft : false
7 | image : "images/Text-Highlighting-In-HTML-5.png"
8 | images : ["images/Text-Highlighting-In-HTML-5.png"]
9 | slug : "text-highlighting-in-html-5"
10 | summary : "Mark tag Help to High Lighting text in HTML 5 "
11 | tags : ["html", "html 5", "html tutorial", "Text Highlighting", "text highlighting in html", "html for beginner"]
12 | title : "Text Highlighting In HTML 5?"
13 |
14 | ---
15 |
16 |
17 |
18 | Text Highlighting in HTML 5, You Highlight the Text in a Paragraph heading and use it inside another tag. Add some Color Help Of CSS. So You can Use ` ` tag In `` tag very easily.
19 |
20 | **Syntax:**
21 |
22 | ```html
23 |
24 |
25 | ```
26 |
27 | Mark tag by default CSS By Chrome Browser.
28 |
29 | ```css
30 | mark {
31 | background-color: yellow;
32 | color: black;
33 | }
34 | ```
35 |
36 |
37 |
38 | **Example:**
39 |
40 | ```html
41 |
42 |
43 |
44 |
45 |
46 | Document
47 |
54 |
55 |
56 | we are write article that contains the Mark tag for Highlighting the text. you will make it easier to see it.
57 |
58 |
59 | ```
60 |
61 | ---
62 |
63 | # Contact me
64 |
65 | * [https://www.facebook.com/officialrajdeepsingh/](https://www.facebook.com/officialrajdeepsingh/)
66 | * [https://medium.com/officialrajdeepsingh](https://medium.com/officialrajdeepsingh)
67 | * [officialrajdeepsingh@gmail.com](mailto:officialrajdeepsingh@gmail.com)
68 |
69 |
70 |
71 | ---
72 |
73 |
74 |
75 |
--------------------------------------------------------------------------------
/components/Sidebar.js:
--------------------------------------------------------------------------------
1 | import { useState} from "react";
2 | import Link from 'next/link'
3 | import Search from "../search.json";
4 | import { slugify } from "../utils";
5 |
6 | export default function Sidebar() {
7 | const [search, setSearch]= useState()
8 | function findSerach(value) {
9 |
10 | setSearch(value.target.value)
11 | }
12 |
13 | return (
14 |
15 |
16 |
17 |
Search
18 |
19 |
20 |
21 |
22 |
Go!
23 |
24 |
25 |
26 |
27 |
28 |
29 |
Categories
30 |
31 |
32 |
33 |
34 |
35 | {
36 | Search?.map(
37 | post => {
38 | return post.frontmatter.categories.map(
39 | item => {
40 | const slug = slugify(item)
41 |
42 | return
43 | {item}
44 |
45 | }
46 | )
47 |
48 | }
49 | )
50 | }
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
Side Widget
60 |
You can put anything you want inside of these side widgets. They are easy to use, and feature the Bootstrap 5 card component!
61 |
62 |
63 | )
64 | }
--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 0 2rem;
3 | }
4 |
5 | .main {
6 | min-height: 100vh;
7 | padding: 4rem 0;
8 | flex: 1;
9 | display: flex;
10 | flex-direction: column;
11 | justify-content: center;
12 | align-items: center;
13 | }
14 |
15 | .footer {
16 | display: flex;
17 | flex: 1;
18 | padding: 2rem 0;
19 | border-top: 1px solid #eaeaea;
20 | justify-content: center;
21 | align-items: center;
22 | }
23 |
24 | .footer a {
25 | display: flex;
26 | justify-content: center;
27 | align-items: center;
28 | flex-grow: 1;
29 | }
30 |
31 | .title a {
32 | color: #0070f3;
33 | text-decoration: none;
34 | }
35 |
36 | .title a:hover,
37 | .title a:focus,
38 | .title a:active {
39 | text-decoration: underline;
40 | }
41 |
42 | .title {
43 | margin: 0;
44 | line-height: 1.15;
45 | font-size: 4rem;
46 | }
47 |
48 | .title,
49 | .description {
50 | text-align: center;
51 | }
52 |
53 | .description {
54 | margin: 4rem 0;
55 | line-height: 1.5;
56 | font-size: 1.5rem;
57 | }
58 |
59 | .code {
60 | background: #fafafa;
61 | border-radius: 5px;
62 | padding: 0.75rem;
63 | font-size: 1.1rem;
64 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
65 | Bitstream Vera Sans Mono, Courier New, monospace;
66 | }
67 |
68 | .grid {
69 | display: flex;
70 | align-items: center;
71 | justify-content: center;
72 | flex-wrap: wrap;
73 | max-width: 800px;
74 | }
75 |
76 | .card {
77 | margin: 1rem;
78 | padding: 1.5rem;
79 | text-align: left;
80 | color: inherit;
81 | text-decoration: none;
82 | border: 1px solid #eaeaea;
83 | border-radius: 10px;
84 | transition: color 0.15s ease, border-color 0.15s ease;
85 | max-width: 300px;
86 | }
87 |
88 | .card:hover,
89 | .card:focus,
90 | .card:active {
91 | color: #0070f3;
92 | border-color: #0070f3;
93 | }
94 |
95 | .card h2 {
96 | margin: 0 0 1rem 0;
97 | font-size: 1.5rem;
98 | }
99 |
100 | .card p {
101 | margin: 0;
102 | font-size: 1.25rem;
103 | line-height: 1.5;
104 | }
105 |
106 | .logo {
107 | height: 1em;
108 | margin-left: 0.5rem;
109 | }
110 |
111 | @media (max-width: 600px) {
112 | .grid {
113 | width: 100%;
114 | flex-direction: column;
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/pages/Search.js:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 | import Post from '../components/Post'
3 | import Banner from "../components/Banner";
4 | import search from "../search.json";
5 | import { useRouter } from 'next/router'
6 | import { NextSeo } from 'next-seo';
7 | import { ImageUrl} from '../utils'
8 |
9 | export default function Search() {
10 | const { query } = useRouter()
11 | const TempPosts = []
12 |
13 | search.map(
14 | (post) => {
15 | if (post.frontmatter.draft === false) {
16 | if (post.frontmatter.title.toLowerCase().includes(query.q) || post.frontmatter.summary.toLowerCase().includes(query.q) || post.frontmatter.description.toLowerCase().includes(query.q)) {
17 | TempPosts.push(post)
18 | } else {
19 | TempPosts.push(null)
20 | }
21 | }
22 | }
23 | )
24 |
25 | // remove null in posts
26 | const posts = TempPosts.filter(
27 | path => {
28 | return path && path
29 | }
30 | )
31 |
32 | return (
33 |
34 |
53 |
54 |
55 |
56 |
57 |
58 |
59 | {
60 | posts.length > 0 ?
61 | posts.map((post, index) => (
62 |
63 | )) :
64 |
65 | { query.q? `No post find base on ${query.q} `: 'loadding.. '}
66 |
67 |
68 | }
69 |
70 |
71 |
72 |
73 |
74 | )
75 | }
76 |
--------------------------------------------------------------------------------
/posts/how-to-check-the-snap-store-package-available-for-raspberry-pi-4-or-not.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | categories : ["Raspberry pi 4", "snapcraft", "Snap store", "Linux", "Binary"]
4 | date : "2022-03-26T07:50:39Z"
5 | description : "You can easily check the raspberry pi binary in the snap store without the command line and code."
6 | draft : false
7 | image : "images/the-snap-store.png"
8 | images : ["images/the-snap-store.png"]
9 | slug : "how-to-check-the-snap-store-package-available-for-raspberry-pi-4-or-not"
10 | summary : "You can easily check the raspberry pi binary in the snap store without the command line and code."
11 | tags : ["Raspberry pi 4", "snapcraft", "Snap store", "Linux", "Binary"]
12 | title : "How to check the snap store package available for raspberry pi 4 or not?"
13 |
14 | ---
15 |
16 |
17 | Ubuntu built the snap store package Eco-system. The Snap store help to distribute your Linux base application and software across the Linux distro.
18 |
19 | For checking the binary, you do not need any command. You need only two things. First is a web browser and a mouse.
20 |
21 | There is two binary support by raspberry pi 4. first is **arm64** and **armhf**. If one of the binary is present, you can install the package in your raspberry pi 4 without any problem.
22 |
23 |
24 |
25 | **There is two way to check the package binary is available for raspberry pi 4 or not.**
26 |
27 | 1. First way
28 | 2. Second way
29 |
30 |
31 |
32 | > In this article, I use the snap chromium package for example purpose.
33 |
34 |
35 | ## First way
36 |
37 | Firstly, you click on **the version drop-down list** and click again to **show the architecture** drop-down list and check all available binary forms for the list.
38 |
39 | * First step
40 | * Second step
41 |
42 | ### First step
43 |
44 | 
45 |
46 |
47 |
48 | ### Second step
49 |
50 | 
51 |
52 |
53 | ## Second way
54 |
55 | In a second way, you scroll down the page, go to the Linux distribution section, and check all the Linux distributions.
56 |
57 | 
58 |
59 |
60 | ---
61 |
62 | ### Reference
63 |
64 | https://snapcraft.io/chromium
65 |
66 | https://snapcraft.io/store
67 |
68 | https://snapcraft.io/docs
69 |
70 | ---
71 |
72 | ## Conclusion
73 |
74 | I hope my article solve your problem if you have any problem and then comment in the comment section.
75 |
76 | **For more updates, subscribe to our newsletter.**
77 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/posts/html-version-history.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | categories : ["html", "html 5", "HTML History", "Html Version", "Who Create Html"]
4 | date : "2020-12-24T11:13:05Z"
5 | description : "HTML History Very Complicated. But I Try To Explain Very Easy Way."
6 | draft : false
7 | image : "images/HTML-Version-History.jpg"
8 | images : ["images/HTML-Version-History.jpg"]
9 | slug : "html-version-history"
10 | summary : "HTML History Very Complicated. But I Try To Explain Very Easy Way."
11 | tags : ["html", "html 5", "HTML History", "Html Version", "Who Create Html"]
12 | title : "HTML Version History?"
13 |
14 | ---
15 |
16 |
17 |
18 | According to Wikipedia, HTML was Created By _**Tim Berners-Lee** in **1991**._ Launch official standard HTML Version in December 1999.
19 |
20 | In 1989, Berners-Lee also created an Internet-based hypertext system._HTML Comes in many versions. But_ HTML 4.01 Widely Use HTML.
21 |
22 | ### History:
23 |
24 | * **HTML 2 : November 24, 1995,**
25 | * **HTML 3 : January 14, 1997,**
26 | * **HTML 4 : December 18, 1997,**
27 | * **HTML 5 : October 28, 2014,**
28 |
29 |
30 |
31 | ### HTML 1:
32 |
33 | The original version of HTML 1.0 Announcing with few greatly limited features. Use HTML 1, and You Never be a creation of a Good Looking website.
34 |
35 | ### HTML 2:
36 |
37 | HTML 2.0 then arrived and included all the HTML 1.0 plus several new features for web page design. Now Use HTML 2.0 You Design A Website.
38 |
39 | ### HTML 3:
40 |
41 | HTML 2.0 served its purpose very well, but many Programmers or designing web pages wanted more control over their web pages and more ways to mark up their text and enhance Website appearance And Look On Browser.
42 |
43 | ### HTML 4:
44 |
45 | In the early days, **_HTML 4.0_** was code-named **_COUGAR_**. This version introduces new functionality, most of which comes from the expired HTML 3.0 draft. W3C Recommendation Explorer has done a Good job in implementing the many New features Into HTML 4.0. After 4.0, One More HTML Version Come People Know as XHTML. Which More Popular.
46 |
47 | ### HTML 5:
48 |
49 | HTML 5 Now A standard version and secondly More Popular On Earth. HTML 5 Give Lots Of Tags Help To Browser Understand Text Format and Secondly Build Unique beautiful Website Design.
50 |
51 | ---
52 |
53 | ### Reference:
54 |
55 |
56 |
57 | http://www.codefreetutorial.com/learn-html/76-different-versions-of-html
58 |
59 | ---
60 |
61 |
62 |
63 | # Contact me
64 |
65 | * [https://www.facebook.com/officialrajdeepsingh/](https://www.facebook.com/officialrajdeepsingh/)
66 | * [https://medium.com/officialrajdeepsingh](https://medium.com/officialrajdeepsingh)
67 | * [officialrajdeepsingh@gmail.com](mailto:officialrajdeepsingh@gmail.com)
68 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/posts/how-to-capture-screenshots-in-raspberry-pi-4.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | categories : ["Raspberry", "Raspi 4", "screensshots", "capture screen shots", "Gnome Screenshot", "install gnome screenshot"]
4 | date : "2021-01-24T12:26:07Z"
5 | description : "Raspi does not provide screenshots functionality by default. you use software and tool to take a screenshot in raspi."
6 | draft : false
7 | image : "images/How-to-capture-screenshots-in-Raspberry-PI-4.png"
8 | images : ["images/How-to-capture-screenshots-in-Raspberry-PI-4.png"]
9 | slug : "how-to-capture-screenshots-in-raspberry-pi-4"
10 | summary : "Raspi does not provide screenshots functionality by default. you use software and tool to take a screenshot in raspi."
11 | tags : ["Raspberry", "Raspi 4", "screensshots", "capture screen shots", "Gnome Screenshot", "install gnome screenshot"]
12 | title : "How to capture screenshots in Raspberry PI 4"
13 |
14 | ---
15 |
16 |
17 |
18 | In Raspberry pi 4, you take the screenshot help of two software. The first is scort, and the second is Gnome Screenshot.
19 |
20 | I'm personally recommended you use Gnome Screenshot. Gnome Screenshot provides a graphical interface. You use a graphical interface to take screenshots very easily.
21 |
22 | Other hands scort is a command-line tool, and scort does not provide any graphical interface.So I'm personally again recommended you use Gnome Screenshot.
23 |
24 | ### Install Gnome Screenshot in Raspbian or Raspberry pi 4:
25 |
26 | **let start it:**
27 |
28 | The Raspi 4 does not provide by default Gnome Screenshot.
29 |
30 | Firstly Update your raspberry pi 4. this is a compulsory step for installing Gnome Screenshot.
31 |
32 | ```cmd
33 | sudo apt update && sudo apt upgrade
34 | ```
35 |
36 | Your update and upgrade command run successfully. Now you install Gnome Screenshot following command.
37 |
38 | ```cmd
39 | sudo apt install gnome-screenshot
40 | ```
41 |
42 | Now you can find Gnome Screenshot in your accessories menu, listed as "Screenshot."
43 |
44 | 
45 |
46 |
47 | Gnome interface is very easy to understand. You use Gnome to get a Screenshot, add your own image name, and after save it. By default, all pic save inside your Picture folder.
48 |
49 | 
50 |
51 |
52 | ---
53 |
54 | ### Uninstall Gnome Screenshot:
55 |
56 | In some cases, you may uninstall the Gnome Screenshot. so follow this command
57 |
58 | ```cmd
59 | sudo apt-get remove --purge gnome-screenshot
60 | ```
61 |
62 | ---
63 |
64 | # Contact me
65 |
66 | * [https://www.facebook.com/officialrajdeepsingh/](https://www.facebook.com/officialrajdeepsingh/)
67 | * [https://medium.com/officialrajdeepsingh](https://medium.com/officialrajdeepsingh)
68 | * [officialrajdeepsingh@gmail.com](mailto:officialrajdeepsingh@gmail.com)
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 |
2 | import fs from 'fs'
3 | import path from 'path'
4 | import matter from 'gray-matter'
5 | import { NextSeo } from 'next-seo';
6 | import Post from '../components/Post'
7 | import Banner from "../components/Banner";
8 | import Sidebar from "../components/Sidebar"
9 | import { sortByDate, slugify,ImageUrl} from '../utils'
10 |
11 | export default function Home({ posts }) {
12 |
13 |
14 | return (
15 |
16 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | {posts.map((post, index) => (
42 |
43 | ))}
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | )
54 | }
55 |
56 | export async function getStaticProps() {
57 | // Get files from the posts dir
58 | const files = fs.readdirSync(path.join('posts'))
59 |
60 |
61 |
62 |
63 |
64 | // Get slug and frontmatter from posts
65 | const tempPosts = files.map((filename) => {
66 | // Create slug
67 | const slug = filename.replace('.md', '')
68 |
69 | // Get frontmatter
70 | const markdownWithMeta = fs.readFileSync(
71 | path.join('posts', filename),
72 | 'utf-8'
73 | )
74 |
75 | const { data: frontmatter } = matter(markdownWithMeta)
76 |
77 |
78 | if (frontmatter.draft === false) {
79 | return {
80 | slug,
81 | frontmatter,
82 | }
83 | } else {
84 | return null
85 | }
86 |
87 | })
88 |
89 | // remove null in tempPosts
90 | const posts = tempPosts.filter(
91 | post => {
92 | return post && post
93 | }
94 | )
95 | const jsonString = JSON.stringify(posts)
96 | fs.writeFileSync('./search.json', jsonString, err => {
97 | if (err) {
98 | console.log('Error writing file', err)
99 | } else {
100 | console.log('Successfully wrote file')
101 | }
102 | })
103 |
104 | return {
105 | props: {
106 | posts: posts.sort(sortByDate),
107 | },
108 | }
109 |
110 |
111 | }
112 |
113 |
114 |
115 |
--------------------------------------------------------------------------------
/posts/keyboard-shortcut-keys-for-linux-terminal.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | categories : ["Linux", "Keyboard Shortcut", "Shortcut keys", "Linux Terminal"]
4 | date : "2021-01-08T08:05:57Z"
5 | description : "Linux Keyboard Help To Enhance Your Working Speed Inside Command Tool"
6 | draft : false
7 | image : "images/Linux-Basic-Introduction--1-.png"
8 | images : ["images/Linux-Basic-Introduction--1-.png"]
9 | slug : "keyboard-shortcut-keys-for-linux-terminal"
10 | summary : "Linux Keyboard Help To Enhance Your Working Speed Inside Command Tool"
11 | tags : ["Linux", "Keyboard Shortcut", "Shortcut keys", "Linux Terminal"]
12 | title : "All Keyboard Shortcuts For Linux Terminal?"
13 |
14 | ---
15 |
16 |
17 |
18 | ## Ctrl + Alt + T :
19 |
20 | Use This Shortcut Key to Open Linux Terminal Inside Your Laptop || Pc || Machine.
21 |
22 | ### All Shoctkeys In Linux Terminal:
23 |
24 | * **Ctrl + L**: Clears the screen, similar to the clear command in the terminal.
25 | * **Ctrl + S:** Stop all output to the screen. When You run Commands with longs output. But You don't stop it.
26 | * **Tab**: tab Help Automatic Fill Your Name.
27 | * **Ctrl + A**: Cursor goes to Start Of Word
28 | * **Ctrl + E**: Cursor goes to End Of Word.
29 | * **Ctrl + F**: Move the cursor forward one by one character.
30 | * **Ctrl + B**: Move the Cursor backward one by one Character.
31 | * **Alt + F**: Move the cursor forward one by one Word.
32 | * **Alt + B**: Move the Cursor backward one by one Word.
33 | * **Alt + U**: Change Character or Word Into Uppercase.
34 | * **Alt + l**: Change Character Or Word Into Lower Case.
35 | * **Alt + T**: Swap the last two words before the cursor.
36 | * **Alt + C**: Use Capitalize Words.
37 | * **Alt + D**: Delete to end of word starting at the cursor
38 | * **Ctrl + K**: Cut Word/Line from the current position to the end of the line. Also, adding it to the clipboard, use ctrl + y to paste it again.
39 | * **Ctrl + W**: Delete the word before the Cursor Position. Also, adding it to the clipboard, use ctrl + y paste on it.
40 | * **Ctrl + Y**: Paste the last thing from the clipboard that you cut recently.
41 | * **Ctrl + D**: Delete Character By Character.
42 | * **Ctrl + T**: Remove White Space.
43 | * **Ctrl + Shift + W**: close terminal tab.
44 | * **Ctrl + Shift + Q**: close the entire terminal.
45 | * **Shift+Ctrl + N**: Open New Window.
46 | * **Shift + Ctrl +T**: Open New Tab In Window.
47 | * **Shift + Ctrl + W**: Close Tab.
48 | * **Shift + Ctrl + Q**: Close Window.
49 | * **Shift + Ctrl + C**: Use For Copy Text Inside Terminal.
50 | * **Shift + Ctrl + V**: Paste Text Inside Terminal.
51 | * **Shift + Ctrl + +**: Zoom In.
52 | * **Shift + Ctrl + -**: Zoom Out
53 | * **Shift + Ctrl + )**: Zoom Reset
54 | * **Shift + Ctrl + I**: Add Name Off Each Open Tab.
55 |
56 | ### Note:
57 |
58 | If i Forget Some Keyboard Shortcuts, and You Do Not find them on this page so Tell me in the comment box.
59 |
60 | ---
61 |
62 | # Contact me
63 |
64 | * [https://www.facebook.com/officialrajdeepsingh/](https://www.facebook.com/officialrajdeepsingh/)
65 | * [https://medium.com/officialrajdeepsingh](https://medium.com/officialrajdeepsingh)
66 | * [officialrajdeepsingh@gmail.com](mailto:officialrajdeepsingh@gmail.com)
67 |
68 |
69 |
70 | ---
71 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/posts/how-to-add-css-in-next-js.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | categories : ["Next.js", "Next", "Next.js Framework", "Next.js Tutorial", "React.js", "react.js tutorial"]
4 | date : "2020-11-10T11:42:46Z"
5 | description : "Easy Ways Add CSS in Next.js #SeriesPart2"
6 | image : "images/next.js-add-css-code.jpg"
7 | images : ["images/next.js-add-css-code.jpg"]
8 | slug : "how-to-add-css-in-next-js"
9 | summary : "Easy Ways Add CSS in Next.js #SeriesPart2 \n"
10 | tags : ["Next.js", "Next", "Next.js Framework", "Next.js Tutorial", "React.js", "react.js tutorial"]
11 | title : "How To Add CSS In Next js?"
12 | draft : false
13 | ---
14 |
15 | In this Next Series, we Learn How to add CSS's own Project with Easy Steps.
16 |
17 | Good News is that Next.js provides custom CSS functionality. You Use The next.js plugin inside your project and use it.
18 |
19 | ## What's Next.js?
20 |
21 | Make sure Read Basic Introduction About Next.js #SeriesStart 💕
22 |
23 | [https://officialrajdeepsingh.dev/what-is-next.js/](https://officialrajdeepsingh.dev/what-is-next.js/ "https://officialrajdeepsingh.dev/what-is-next.js/")
24 |
25 | ***
26 |
27 | ## New Update:
28 |
29 | Next.js Version 9.3 **Support CSS Global Stylesheets.** Now you add CSS directly Import `.css` files as global stylesheets.
30 |
31 | ```javascript
32 | import './style.css'
33 | ```
34 |
35 | ***
36 |
37 | **Go To Github Download or Use Npm:**
38 |
39 | ```cmd
40 | npm install --save @zeit/next-css
41 | or
42 | yarn add @zeit/next-css
43 | ```
44 |
45 | ***
46 |
47 | Create an `next.config.js` At the root of your project
48 |
49 | ## Default:
50 |
51 | default config use for import CSS Global stylesheet in custom _app.js
52 |
53 | ```javascript
54 | const withCSS = require('@zeit/next-css')
55 | module.exports = withCSS({})
56 | ```
57 |
58 | ## Custom:
59 |
60 | Custom config used for import CSS in other Components like header, footer like so.
61 |
62 | ```javascript
63 | const withCSS = require('@zeit/next-css')
64 | module.exports = withCSS({
65 | cssModules: true // After true than use import statement in next.js
66 | })
67 | ```
68 |
69 | ***
70 |
71 | ## How To add Global CSS:
72 |
73 | When you create your app, help with npm. in the next step, you create a global app. If you npm official command the by default app create in your project and import your Global CSS file in next.js custom _app.js
74 |
75 | ```javascript
76 | import '../styles.css'
77 | or
78 | import '../styles.scss'
79 | // This default export is required in a new `pages/_app.js` file.
80 | export default function MyApp({ Component, pageProps }) {
81 | return
82 | }
83 | ```
84 |
85 | ***
86 |
87 | # Demo:
88 |
89 |
90 |
91 | ***
92 |
93 | ## Reference:
94 |
95 | https://nextjs.org/docs/basic-features/built-in-css-support
96 |
97 | https://nextjs.org/blog/next-9-2
98 |
99 | https://nextjs.org/blog/next-10
100 |
101 | ***
102 |
103 | # Contact me
104 |
105 | * [https://www.facebook.com/officialrajdeepsingh/](https://www.facebook.com/officialrajdeepsingh/)
106 | * [https://www.facebook.com/groups/JavaScriptcode/](https://www.facebook.com/groups/JavaScriptcode/)
107 | * [https://www.facebook.com/groups/pythoncodejoin/](https://www.facebook.com/groups/pythoncodejoin/)
108 | * [officialrajdeepsingh@gmail.com](mailto:officialrajdeepsingh@gmail.com)
--------------------------------------------------------------------------------
/pages/tag/[slug].js:
--------------------------------------------------------------------------------
1 | import fs from 'fs'
2 | import path from 'path'
3 | import matter from 'gray-matter'
4 | import { marked } from 'marked'
5 | import Link from 'next/link'
6 | import ItemPost from '../../components/ItemPost'
7 | import { slugify, ImageUrl } from '../../utils'
8 | import { NextSeo } from 'next-seo';
9 |
10 | export default function tag({ posts }) {
11 |
12 |
13 |
14 |
15 | return (
16 | <>
17 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | {
44 | posts.map((post, index) => {
45 |
46 | return
47 | }
48 | )
49 |
50 | }
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | >
59 | )
60 |
61 |
62 |
63 |
64 |
65 | }
66 |
67 |
68 | export async function getStaticPaths() {
69 | const files = fs.readdirSync(path.join('posts'))
70 |
71 | let tempStorage = []
72 |
73 | const temppaths = files.map((filename) => {
74 |
75 | const markdownWithMeta = fs.readFileSync(
76 | path.join('posts', filename),
77 | 'utf-8'
78 | )
79 |
80 | const { data: frontmatter } = matter(markdownWithMeta)
81 |
82 | if (frontmatter.draft === false) {
83 | frontmatter.tags.map(
84 | tag => {
85 | let slug = slugify(tag)
86 | tempStorage.push({ params: { slug } });
87 |
88 | }
89 | )
90 | } else {
91 | return null
92 | }
93 |
94 |
95 | })
96 |
97 |
98 |
99 |
100 | const paths = tempStorage.filter((item,
101 | index) => {
102 | return tempStorage.indexOf(item) === index
103 | })
104 |
105 |
106 |
107 | // const paths=["npm"]
108 |
109 |
110 | return {
111 | paths,
112 | fallback: false,
113 | }
114 |
115 | }
116 |
117 | export async function getStaticProps({ params: { slug } }) {
118 |
119 | // Get files from the posts dir
120 | const files = fs.readdirSync(path.join('posts'))
121 |
122 | let tempStorage = []
123 |
124 |
125 |
126 | // Get slug and frontmatter from posts
127 |
128 | const tempPosts = files.map((filename) => {
129 |
130 | // Get frontmatter
131 | const markdownWithMeta = fs.readFileSync(
132 | path.join('posts', filename),
133 | 'utf-8'
134 | )
135 |
136 | const { data: frontmatter } = matter(markdownWithMeta)
137 |
138 |
139 |
140 | if (frontmatter.draft === false) {
141 | frontmatter.tags.map(
142 | tag => {
143 | let tagSlug = slugify(tag)
144 | if (slug === tagSlug) {
145 | tempStorage.push({ post: frontmatter })
146 | }
147 | }
148 | )
149 | } else {
150 | return null
151 | }
152 | })
153 |
154 |
155 |
156 | // remove null in tempPosts
157 |
158 | const posts = tempStorage.filter(
159 | post => {
160 |
161 | return post && post
162 | }
163 | )
164 |
165 | return {
166 | props: {
167 | posts
168 | },
169 | }
170 |
171 |
172 | }
173 |
--------------------------------------------------------------------------------
/pages/category/[slug].js:
--------------------------------------------------------------------------------
1 | import fs from 'fs'
2 | import path from 'path'
3 | import matter from 'gray-matter'
4 | import { marked } from 'marked'
5 | import Link from 'next/link'
6 | import ItemPost from '../../components/ItemPost'
7 | import { slugify, ImageUrl } from '../../utils'
8 | import { NextSeo } from 'next-seo';
9 |
10 |
11 | export default function Category({ posts }) {
12 |
13 | return (
14 | <>
15 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | {
43 | posts.map((post, index) => {
44 |
45 | return
46 | }
47 | )
48 |
49 | }
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 | >
58 | )
59 |
60 |
61 |
62 |
63 |
64 | }
65 |
66 |
67 | export async function getStaticPaths() {
68 | const files = fs.readdirSync(path.join('posts'))
69 |
70 | let tempStorage = []
71 |
72 | const temppaths = files.map((filename) => {
73 |
74 | const markdownWithMeta = fs.readFileSync(
75 | path.join('posts', filename),
76 | 'utf-8'
77 | )
78 |
79 | const { data: frontmatter } = matter(markdownWithMeta)
80 |
81 | if (frontmatter.draft === false) {
82 | frontmatter.categories.map(
83 | category => {
84 | let slug = slugify(category)
85 | tempStorage.push({ params: { slug } });
86 |
87 | }
88 | )
89 | } else {
90 | return null
91 | }
92 |
93 |
94 | })
95 |
96 |
97 |
98 |
99 | const paths = tempStorage.filter((item,
100 | index) => {
101 | return tempStorage.indexOf(item) === index
102 | })
103 |
104 |
105 |
106 |
107 |
108 | return {
109 | paths,
110 | fallback: false,
111 | }
112 |
113 | }
114 |
115 | export async function getStaticProps({ params: { slug } }) {
116 |
117 | // Get files from the posts dir
118 | const files = fs.readdirSync(path.join('posts'))
119 |
120 | let tempStorage = []
121 |
122 |
123 |
124 | // Get slug and frontmatter from posts
125 |
126 | const tempPosts = files.map((filename) => {
127 |
128 | // Get frontmatter
129 | const markdownWithMeta = fs.readFileSync(
130 | path.join('posts', filename),
131 | 'utf-8'
132 | )
133 |
134 | const { data: frontmatter } = matter(markdownWithMeta)
135 |
136 |
137 |
138 | if (frontmatter.draft === false) {
139 | frontmatter.categories.map(
140 | category => {
141 | let categroySlug = slugify(category)
142 | if (slug === categroySlug) {
143 |
144 | tempStorage.push({ post: frontmatter })
145 |
146 | }
147 | }
148 | )
149 | } else {
150 | return null
151 | }
152 | })
153 |
154 |
155 | // remove null in tempPosts
156 |
157 | const posts = tempStorage.filter(
158 | post => {
159 |
160 | return post && post
161 | }
162 | )
163 |
164 | return {
165 | props: {
166 | posts
167 | },
168 | }
169 |
170 |
171 | }
172 |
--------------------------------------------------------------------------------
/pages/blog/[slug].js:
--------------------------------------------------------------------------------
1 | import fs from 'fs'
2 | import path from 'path'
3 | import matter from 'gray-matter'
4 | import { marked } from 'marked'
5 | import Link from 'next/link'
6 | import { slugify, ImageUrl } from '../../utils'
7 | import { NextSeo } from 'next-seo';
8 |
9 | export default function PostPage({ content, frontmatter }) {
10 | const date = new Date(frontmatter.date)
11 | const imageMeta= frontmatter.images.map(
12 | image => {
13 | const imageUrl = ImageUrl(image)
14 | return {
15 | url: imageUrl,
16 | width: 1224,
17 | height: 724,
18 | alt: frontmatter.title,
19 | type: 'image/jpeg',
20 | }
21 | }
22 | )
23 |
24 |
25 | return (
26 | <>
27 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
{frontmatter.title}
53 |
54 |
55 |
{`${date.getMonth() + 1} - ${date.getDate()} - ${date.getFullYear()}`}
56 |
{
57 | frontmatter.categories.map(
58 | category => {
59 |
60 | const slug = slugify(category)
61 |
62 | return (
63 |
64 | #{category}
65 |
66 | )
67 | }
68 | )
69 | }
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 | >
82 | )
83 | }
84 |
85 |
86 | export async function getStaticPaths() {
87 | // Get files from the posts dir
88 | const files = fs.readdirSync(path.join('posts'))
89 |
90 | // Get slug and frontmatter from posts
91 | const temppaths = files.map((filename) => {
92 |
93 | // Get frontmatter
94 | const markdownWithMeta = fs.readFileSync(
95 | path.join('posts', filename),
96 | 'utf-8'
97 | )
98 |
99 | const { data: frontmatter } = matter(markdownWithMeta)
100 |
101 | if (frontmatter.draft === false) {
102 | return {
103 | params: {
104 | slug: filename.replace('.md', ''),
105 | },
106 | }
107 | } else {
108 | return null
109 | }
110 |
111 |
112 | })
113 | // remove null in tempPosts
114 | const paths = temppaths.filter(
115 | path => {
116 | return path && path
117 | }
118 | )
119 |
120 | return {
121 | paths,
122 | fallback: false,
123 | }
124 |
125 | }
126 |
127 |
128 | export async function getStaticProps({ params: { slug } }) {
129 |
130 | const markdownWithMeta = fs.readFileSync(
131 | path.join('posts', slug + '.md'),
132 | 'utf-8'
133 | )
134 |
135 | const { data: frontmatter, content } = matter(markdownWithMeta)
136 |
137 | return {
138 | props: {
139 | frontmatter,
140 | slug,
141 | content,
142 | },
143 | }
144 | }
--------------------------------------------------------------------------------
/search.json:
--------------------------------------------------------------------------------
1 | [{"slug":"how-is-npm-install-command","frontmatter":{"author":"Rajdeep Singh","categories":["npm","npm-cli","npm install command"],"date":"2022-03-20T13:09:24Z","description":"Npm install command help to install package from npmjs.org","image":"images/npm-init-command-1.png","images":["images/npm-init-command-1.png"],"slug":"how-is-npm-install-command","summary":"Npm install command help to install package from npmjs.org","tags":["npm","npm-cli","npm install command"],"title":"What is the npm install command?","draft":false}},{"slug":"how-to-add-css-in-next-js","frontmatter":{"author":"Rajdeep Singh","categories":["Next.js","Next","Next.js Framework","Next.js Tutorial","React.js","react.js tutorial"],"date":"2020-11-10T11:42:46Z","description":"Easy Ways Add CSS in Next.js #SeriesPart2","image":"images/next.js-add-css-code.jpg","images":["images/next.js-add-css-code.jpg"],"slug":"how-to-add-css-in-next-js","summary":"Easy Ways Add CSS in Next.js #SeriesPart2 \n","tags":["Next.js","Next","Next.js Framework","Next.js Tutorial","React.js","react.js tutorial"],"title":"How To Add CSS In Next js?","draft":false}},{"slug":"how-to-capture-screenshots-in-raspberry-pi-4","frontmatter":{"author":"Rajdeep Singh","categories":["Raspberry","Raspi 4","screensshots","capture screen shots","Gnome Screenshot","install gnome screenshot"],"date":"2021-01-24T12:26:07Z","description":"Raspi does not provide screenshots functionality by default. you use software and tool to take a screenshot in raspi.","draft":false,"image":"images/How-to-capture-screenshots-in-Raspberry-PI-4.png","images":["images/How-to-capture-screenshots-in-Raspberry-PI-4.png"],"slug":"how-to-capture-screenshots-in-raspberry-pi-4","summary":"Raspi does not provide screenshots functionality by default. you use software and tool to take a screenshot in raspi.","tags":["Raspberry","Raspi 4","screensshots","capture screen shots","Gnome Screenshot","install gnome screenshot"],"title":"How to capture screenshots in Raspberry PI 4"}},{"slug":"how-to-check-the-snap-store-package-available-for-raspberry-pi-4-or-not","frontmatter":{"author":"Rajdeep Singh","categories":["Raspberry pi 4","snapcraft","Snap store","Linux","Binary"],"date":"2022-03-26T07:50:39Z","description":"You can easily check the raspberry pi binary in the snap store without the command line and code.","draft":false,"image":"images/the-snap-store.png","images":["images/the-snap-store.png"],"slug":"how-to-check-the-snap-store-package-available-for-raspberry-pi-4-or-not","summary":"You can easily check the raspberry pi binary in the snap store without the command line and code.","tags":["Raspberry pi 4","snapcraft","Snap store","Linux","Binary"],"title":"How to check the snap store package available for raspberry pi 4 or not?"}},{"slug":"html-version-history","frontmatter":{"author":"Rajdeep Singh","categories":["html","html 5","HTML History","Html Version","Who Create Html"],"date":"2020-12-24T11:13:05Z","description":"HTML History Very Complicated. But I Try To Explain Very Easy Way.","draft":false,"image":"images/HTML-Version-History.jpg","images":["images/HTML-Version-History.jpg"],"slug":"html-version-history","summary":"HTML History Very Complicated. But I Try To Explain Very Easy Way.","tags":["html","html 5","HTML History","Html Version","Who Create Html"],"title":"HTML Version History?"}},{"slug":"keyboard-shortcut-keys-for-linux-terminal","frontmatter":{"author":"Rajdeep Singh","categories":["Linux","Keyboard Shortcut","Shortcut keys","Linux Terminal"],"date":"2021-01-08T08:05:57Z","description":"Linux Keyboard Help To Enhance Your Working Speed Inside Command Tool","draft":false,"image":"images/Linux-Basic-Introduction--1-.png","images":["images/Linux-Basic-Introduction--1-.png"],"slug":"keyboard-shortcut-keys-for-linux-terminal","summary":"Linux Keyboard Help To Enhance Your Working Speed Inside Command Tool","tags":["Linux","Keyboard Shortcut","Shortcut keys","Linux Terminal"],"title":"All Keyboard Shortcuts For Linux Terminal?"}},{"slug":"npm-outdated-command","frontmatter":{"author":"Rajdeep Singh","categories":["Npm"],"date":"2022-04-18T11:00:00Z","description":"Npm outdate command help to find old packages in your current project.","image":"images/npm-commands.png","images":["images/npm-commands.png"],"slug":"Learn-the-NPM-outdated-package-command","summary":"Npm outdate command help to find old packages in your current project.","tags":["Npm command","NPM CLI","Npm "],"title":"Learn the NPM outdated package command?","draft":false}},{"slug":"text-highlighting-in-html-5","frontmatter":{"author":"Rajdeep Singh","categories":["html","html 5","html tutorial","Text Highlighting","text highlighting in html","html for beginner"],"date":"2020-12-28T14:09:38Z","description":"Mark tag Help to High Lighting text in HTML 5","draft":false,"image":"images/Text-Highlighting-In-HTML-5.png","images":["images/Text-Highlighting-In-HTML-5.png"],"slug":"text-highlighting-in-html-5","summary":"Mark tag Help to High Lighting text in HTML 5 ","tags":["html","html 5","html tutorial","Text Highlighting","text highlighting in html","html for beginner"],"title":"Text Highlighting In HTML 5?"}},{"slug":"title-tag-in-html-5","frontmatter":{"author":"Rajdeep Singh","categories":["html","html 5","html for beginner","html tutorial","title tag","html title tag"],"date":"2020-12-25T10:09:58Z","description":"Title tag display page information in the browser toolbar.","draft":false,"image":"images/Title-tag-In-HTML-5.jpg","images":["images/Title-tag-In-HTML-5.jpg"],"slug":"title-tag-in-html-5","summary":"Title tag display page information in the browser toolbar.","tags":["html","html 5","html for beginner","html tutorial","title tag","html title tag"],"title":"Title tag In HTML 5?"}},{"slug":"what-is-next-js","frontmatter":{"author":"Rajdeep Singh","categories":["Next.js","Next.js Tutorial","React.js","React.js Framework","javascript Framework","Next","Next.js Framework"],"date":"2020-11-08T13:10:48Z","description":"Basic Introduction About Next.js #SeriesStart","draft":false,"image":"images/next.js.png","images":["images/next.js.png"],"slug":"what-is-next-js","summary":"Basic Introduction About Next.js #SeriesStart","tags":["Next.js","Next.js Tutorial","React.js","React.js Framework","javascript Framework","Next","Next.js Framework"],"title":"What is Next.js?"}}]
--------------------------------------------------------------------------------
/posts/how-is-npm-install-command.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | categories : ["npm", "npm-cli", "npm install command"]
4 | date : "2022-03-20T13:09:24Z"
5 | description : "Npm install command help to install package from npmjs.org"
6 | image : "images/npm-init-command-1.png"
7 | images : ["images/npm-init-command-1.png"]
8 | slug : "how-is-npm-install-command"
9 | summary : "Npm install command help to install package from npmjs.org"
10 | tags : ["npm", "npm-cli", "npm install command"]
11 | title : "What is the npm install command?"
12 | draft : false
13 | ---
14 |
15 | Npm, install command help to install dependencies and devDependencies base on package.json and package-lock.json file.
16 |
17 | **The simple word npm install command help to download the package from** [**npmjs.org**](https://www.npmjs.com/)**.**
18 |
19 | ```cmd
20 | npm install
21 |
22 | or
23 |
24 | npm i
25 |
26 | or
27 |
28 | npm add
29 | ```
30 |
31 | You can install any package base on two methods. I know there are other methods, but I created my way to quickly teach you the npm install command.
32 |
33 | > I cover the most important options which you use every day. npm I, npm install, and npm add is one command.
34 |
35 | 1. Syntax
36 | 2. Options or Flags
37 |
38 | ## Syntax
39 |
40 | 1. npm install
41 | 2. npm package **``**
42 | 3. npm install **`@`**
43 | 4. npm install **`@`**
44 | 5. npm install **``**
45 |
46 | ### npm install
47 |
48 | npm install command is the most used command in the npm world. The npm install command downloads all packages from the [npmjs](https://www.npmjs.com/) website and store them in the node_modules folder.
49 |
50 | ```json
51 | {
52 | "name": "my-app",
53 | "version": "0.1.0",
54 | "private": true,
55 | "scripts": {
56 | "dev": "next dev",
57 | "build": "next build",
58 | "start": "next start",
59 | "lint": "next lint"
60 | },
61 | "dependencies": {
62 | "next": "12.1.0",
63 | "react": "17.0.2",
64 | "react-dom": "17.0.2"
65 | },
66 | "devDependencies": {
67 | "eslint": "8.11.0",
68 | "eslint-config-next": "12.1.0"
69 | }
70 | }
71 | ```
72 |
73 | Npm, install command install package based on package.json file. Inside the package.json file, npm checks dependencies and the devDependencies section. Then, based on dependencies and devDependencies, npm starts installing the package locally.
74 |
75 | ### npm package **``**
76 |
77 | You can install a package based on the package name. So you mention the package name in the npm install command. Then, Npm directly installed the package into your **node_modules** folder locally.
78 |
79 | When downloading another package or starting with a new project, the npm-cli also updates your package.json file and mentions the package name by default in the dependencies section.
80 |
81 | ```cmd
82 | npm install react@latest
83 | ```
84 |
85 | ***
86 |
87 | ```json
88 | {
89 | "name": "my-app",
90 | "version": "0.1.0",
91 | "private": true,
92 | "scripts": {},
93 | "dependencies": {
94 | "react": "17.0.2"
95 | },
96 |
97 | }
98 | ```
99 |
100 | ### npm install `@`
101 |
102 | You can install the package base on the tag if the author defines the tags in the package on uploading to [npmjs](https://www.npmjs.com/).
103 |
104 | In a simple word, the tag is the name of the version. The package's author gives the name of a different version, i.e., version 1.0.0, the tag name first.
105 |
106 | By default, npm provide the latest tag for every npm package. The latest tag means the current version of the package.
107 |
108 | ```cmd
109 | npm install react-dom@latest
110 | ```
111 |
112 | ### npm install `@`
113 |
114 | you can install the package base on the version. Every package has a different version, and you can install a specific version of the npm package install in your project.
115 |
116 | ```cmd
117 | npm install react@16.1.1
118 | ```
119 |
120 | ### npm install ``
121 |
122 | You can install the package base on your git repo URL. npm install command helps to install the package directly from Github.
123 |
124 | ```cmd
125 | npm install https://github.com/facebook/react.git
126 | ```
127 |
128 | > Firstly install code locally from GitHub and then run npm install command inside folder code folder.
129 |
130 | ## Options or Flags
131 |
132 | 1. -g option
133 | 2. -P or --save-prod option
134 | 3. -D or --save-dev option
135 |
136 | ### -g option
137 |
138 | \-g flag or option helps the install the package globally in your machine. in Syntax ways, npm installs all packages in the working node_modules folder.
139 |
140 | Globally means you access package cli anywhere in laptop.
141 |
142 | ```cmd
143 | npx -g create-react-app
144 | ```
145 |
146 | ### -P or --save-prod option
147 |
148 | The -P or --save-prod option helps add your package into the production or dependencies section in the package.json file.
149 |
150 | By default, the npm install command adds the package into production.
151 |
152 | ```cmd
153 | npm install -P next@latest
154 |
155 | or
156 |
157 | npm install --save-prod next@latest
158 | ```
159 |
160 | ***
161 |
162 | ```json
163 | {
164 | "name": "my-app",
165 | "version": "0.1.0",
166 | "private": true,
167 | "scripts": {
168 | "dev": "next dev",
169 | "build": "next build",
170 | "start": "next start",
171 | "lint": "next lint"
172 | },
173 | "dependencies": {
174 | "next": "^12.1.0",
175 | "react": "17.0.2",
176 | "react-dom": "17.0.2"
177 | }
178 | }
179 | ```
180 |
181 | ### -D or --save-dev option
182 |
183 | The -D or --save-dev option helps add your package into the devDependencies section in the package.json file.
184 |
185 | ```cmd
186 |
187 | npm install -D eslint@latest
188 |
189 | or
190 |
191 | npm install --save-dev eslint@latest
192 |
193 | ```
194 |
195 | ***
196 |
197 | ```json
198 | {
199 | "name": "my-app",
200 | "version": "0.1.0",
201 | "private": true,
202 | "scripts": {
203 | "dev": "next dev",
204 | "build": "next build",
205 | "start": "next start",
206 | "lint": "next lint"
207 | },
208 | "dependencies": {
209 | "next": "^12.1.0",
210 | "react": "17.0.2",
211 | "react-dom": "17.0.2"
212 | },
213 | "devDependencies": {
214 | "eslint": "8.11.0",
215 | "eslint-config-next": "12.1.0"
216 | }
217 | }
218 | ```
219 |
220 | ***
221 |
222 | ### References
223 |
224 | https://docs.npmjs.com/cli/v6/commands/npm-install
225 |
226 | ***
227 |
--------------------------------------------------------------------------------
/posts/what-is-next-js.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | categories : ["Next.js", "Next.js Tutorial", "React.js", "React.js Framework", "javascript Framework", "Next", "Next.js Framework"]
4 | date : "2020-11-08T13:10:48Z"
5 | description : "Basic Introduction About Next.js #SeriesStart"
6 | draft : false
7 | image : "images/next.js.png"
8 | images : ["images/next.js.png"]
9 | slug : "what-is-next-js"
10 | summary : "Basic Introduction About Next.js #SeriesStart"
11 | tags : ["Next.js", "Next.js Tutorial", "React.js", "React.js Framework", "javascript Framework", "Next", "Next.js Framework"]
12 | title : "What is Next.js?"
13 |
14 | ---
15 |
16 |
17 |
18 | ****Next.js**** is a ****basically**** JavaScript ****framework**** build with ****react js****, ****webpack****, and ****babel****. Next.js helps the ****developer**** create a ****static generation**** (SSG) and ****server-side rendering**** (SSR) website easily.
19 |
20 | ZEIT builds Next.js. But ****recently,**** 1 Month ago, ****ZEIT**** purchase by ****[Vercel](https://vercel.com/)****. That ****means**** ZEIT is now ****Vercel****.
21 |
22 | https://vercel.com/blog/zeit-is-now-vercel
23 |
24 | Next.js ****helping**** to ****optimize**** your ****website****. Recently lots of ****developers working**** with ****Next.js.****
25 |
26 | ## Note:
27 |
28 | ****Next****.js, ****Nuxt****.js, and ****Nest****.js are ****different**** frameworks || library.
29 |
30 | ---
31 |
32 | # Feature:
33 |
34 | Next.js ****Feature**** help to developer ****solve**** the major ****problem**** in ****web development.****
35 |
36 | 1. ****Pre-Rendering Support SSG And SSR****
37 | 2. ****CSS-in-JS****
38 | 3. ****Zero Configuration****
39 | 4. ****Ready for Production****
40 |
41 |
42 |
43 | ---
44 |
45 | # Installation:
46 |
47 | ****install**** next in your ****machine**** with two ways
48 |
49 | 1. Manual Setup
50 | 2. Automatically Setup
51 |
52 | ---
53 |
54 | ## Manual Setup:
55 |
56 | ****Install**** `next`, `react` and `react-dom` in your ****project****:
57 |
58 | ```cmd
59 | npm install next react react-dom
60 | ```
61 |
62 | ****Open**** `package.json` and ****add**** the following `scripts`:
63 |
64 | ```javascript
65 | "scripts": {
66 | "dev": "next",
67 | "build": "next build",
68 | "start": "next start"
69 | }
70 | ```
71 |
72 | ****After**** Installation run ****script,**** use this ****Cmd****
73 |
74 | ```cmd
75 | npm run dev
76 |
77 | ```
78 |
79 | ****Now**** Visit this ****URL**** in ****your browser**** [http://localhost:3000/](http://localhost:3000/). ****your webserver**** Now Work 😃
80 |
81 | ---
82 |
83 | ## Automatically Setup:
84 |
85 | We highly ****recommend**** a ****beginner person**** to ****create a new Next.js**** app using this ****command**** `create-next-app` , this ****cmd**** Setup ****everything automatically**** for ****you****.
86 |
87 | ```cmd
88 | npm init next-app
89 | # or
90 | yarn create next-app
91 | ```
92 |
93 | After the ****installation**** is complete.
94 |
95 | ```cmd
96 | cd path // make sure you same folder other wish no use
97 | npm run dev // that cmd open create server and run your default browser http://localhost:3000/
98 | ```
99 |
100 | Start the ****development**** server. After Try ****editing**** `pages/index.js` and see the ****result**** on your ****browser****.
101 |
102 | ## Note:
103 |
104 | ****Index.js**** default next.js ****router**** path.
105 |
106 | ---
107 |
108 | # Next.js Youtube Course:
109 |
110 | On ****youtube**, a few YouTubers provide tutorials on next.js. In 2021 lots of YouTubers show interest in next.js.**
111 |
112 |
113 |
114 | ## 1. Bruno Antunes:
115 |
116 | ****Bruno Antunes**** provides ****a great**** path for ****Next****.js. That person ****creates**** a lot of ****tutorials**** on it **. Make ****** sure you ****watch**** it.
117 |
118 | VIDEO
119 |
120 | ## Youtube PlayList:
121 |
122 | VIDEO
123 |
124 | ---
125 |
126 | ## 2. Imran Sayed — Codeytek Academy:
127 |
128 | ****Imran Sayed**** is a Great ****developer**** my ****opinion****. Imran stayed to provide a very big contribution in next.js on youtube. Imran provides you a ****learning**** path in next.js || ****Wordpress API****|| ****apollo**** || ****graphql****.
129 |
130 | VIDEO
131 |
132 | ## Youtube Playlist:
133 |
134 | VIDEO
135 |
136 | ---
137 |
138 | ## Note:
139 |
140 | Tell me about other Youtubers who work with Next.js. Then mention in ****Comment** section website**:
141 |
142 | https://nextjs.org/docs/getting-started
143 |
144 | https://www.geeksforgeeks.org/next-js-introduction/
145 |
146 | https://www.freecodecamp.org/news/an-introduction-to-next-js-for-everyone-507d2d90ab54/
147 |
148 |
149 |
150 | ---
151 |
152 | # Read My Other Blog Medium:
153 |
154 | https://medium.com/officialrajdeepsingh/best-javascript-full-tutorial-on-youtube-117e08ab357a
155 |
156 | https://medium.com/officialrajdeepsingh/how-to-read-local-json-file-in-react-js-564125235fc7
157 |
158 | ---
159 |
160 | ## Conclusion:
161 |
162 | My ****Opinion**** next.js. Great ****Library**** To help the ****developer**** create ****server-side rendering**** (SSR) with one ****function**** || ****method**** in next.js. My big ****surprise When**** I start work with ****Wordpress**** and ****graphql. Next.js**** Provide More ****stability as compare to**** other ****React.js**** frameworks.
163 |
164 | ****Now**** My first ****choice is Nextjs**** in ****frontend****-****developer.****
165 |
166 | ---
167 |
168 | # Contact me
169 |
170 | * [https://www.facebook.com/officialrajdeepsingh/](https://www.facebook.com/officialrajdeepsingh/)
171 | * [https://www.facebook.com/groups/JavaScriptcode/](https://www.facebook.com/groups/JavaScriptcode/)
172 | * [https://www.facebook.com/groups/pythoncodejoin/](https://www.facebook.com/groups/pythoncodejoin/)
173 | * [officialrajdeepsingh@gmail.com](mailto:officialrajdeepsingh@gmail.com)
174 |
175 | # Thanks for Reading 😆
--------------------------------------------------------------------------------
/posts/npm-outdated-command.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | categories : ["Npm"]
4 | date : "2022-04-18T11:00:00Z"
5 | description : "Npm outdate command help to find old packages in your current project."
6 | image : "images/npm-commands.png"
7 | images : ["images/npm-commands.png"]
8 | slug : "Learn-the-NPM-outdated-package-command"
9 | summary : "Npm outdate command help to find old packages in your current project."
10 | tags : ["Npm command", "NPM CLI", "Npm "]
11 | title : "Learn the NPM outdated package command?"
12 | draft : false
13 | ---
14 |
15 | Npm outdated command print the list of the outdated package in your project. In the project, there are a lot of packages to check which are outdated.
16 |
17 | There are two ways to check outdated packages
18 |
19 | 1. Manual ways
20 | 2. NPM command
21 |
22 | ## Manual ways
23 |
24 | In manual ways, you open `package.json` files and compare every package manually.
25 |
26 | ## NPM command
27 |
28 | Npm, provide inbuilt functionality for the outdated package. So simple, you run one npm command, and you get a list of all npm outdated packages in your terminal.
29 |
30 | ```cmd
31 | npm outdated
32 | ```
33 |
34 | ***
35 |
36 | #### Output
37 |
38 | ```cmd
39 | rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$ npm outdated
40 | Package Current Wanted Latest Location Depended by
41 | @next/swc-linux-arm64-gnu 12.1.4 12.1.5 11.1.3-canary.104 node_modules/@next/swc-linux-arm64-gnu officialstaticblog
42 | @next/swc-linux-arm64-musl 12.1.4 12.1.5 11.1.3-canary.104 node_modules/@next/swc-linux-arm64-musl officialstaticblog
43 | eslint 8.12.0 8.12.0 8.13.0 node_modules/eslint officialstaticblog
44 | eslint-config-next 12.1.4 12.1.4 12.1.5 node_modules/eslint-config-next officialstaticblog
45 | marked 4.0.12 4.0.14 4.0.14 node_modules/marked officialstaticblog
46 | next 12.1.4 12.1.4 12.1.5 node_modules/next officialstaticblog
47 | rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$
48 | ```
49 |
50 | Npm provides lots more options or flags to improve the work experience.
51 |
52 | You can check all options with the npm help command.
53 |
54 | ```cmd
55 | npm outdated -help
56 | ```
57 |
58 | #### Output
59 |
60 | ```cmd
61 | rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$ npm outdated -help
62 | npm outdated
63 | Check for outdated packages
64 | Usage:
65 | npm outdated [[<@scope>/] ...]
66 | Options:
67 | [-a|--all] [--json] [-l|--long] [-p|--parseable] [-g|--global]
68 | [-w|--workspace [-w|--workspace ...]]
69 | Run "npm help outdated" for more info
70 | ```
71 |
72 | The list of options we discuss in the articles is common, and everybody uses them daily.
73 |
74 | ## --all or -a
75 |
76 | \-all flags or options help print all the outdated packages. The list is based on your project increase or decrease. For an indication -all flags use colour.
77 |
78 | ```cmd
79 | Package Current Wanted Latest Location Depended by
80 | @humanwhocodes/config-array 0.9.5 0.9.5 0.10.2 node_modules/@humanwhocodes/config-array eslint
81 | @next/env 12.1.4 12.1.4 12.1.5 node_modules/@next/env next
82 | @next/eslint-plugin-next 12.1.4 12.1.4 12.1.5 node_modules/@next/eslint-plugin-next eslint-config-next
83 | @next/swc-android-arm-eabi MISSING 12.1.4 12.1.1-canary.0 - next
84 | @next/swc-android-arm64 MISSING 12.1.4 11.1.3-canary.104 - next
85 | @next/swc-darwin-arm64 MISSING 12.1.4 11.1.2 -
86 | .....
87 | ```
88 |
89 | ## --json
90 |
91 | \--json print the data in the terminal in json structure. It helps to visualise and debug the packages.json file more easily.
92 |
93 | ```json rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$ npm outdated --json
94 | {
95 | "@next/swc-linux-arm64-gnu": {
96 | "current": "12.1.4",
97 | "wanted": "12.1.5",
98 | "latest": "11.1.3-canary.104",
99 | "dependent": "officialstaticblog",
100 | "location": "/home/rajdeepsingh/Downloads/officialstaticblog/node_modules/@next/swc-linux-arm64-gnu"
101 | },
102 | "@next/swc-linux-arm64-musl": {
103 | "current": "12.1.4",
104 | "wanted": "12.1.5",
105 | "latest": "11.1.3-canary.104",
106 | "dependent": "officialstaticblog",
107 | "location": "/home/rajdeepsingh/Downloads/officialstaticblog/node_modules/@next/swc-linux-arm64-musl"
108 | },
109 | "eslint": {
110 | "current": "8.12.0",
111 | "wanted": "8.12.0",
112 | "latest": "8.13.0",
113 | "dependent": "officialstaticblog",
114 | "location": "/home/rajdeepsingh/Downloads/officialstaticblog/node_modules/eslint"
115 | },
116 | "eslint-config-next": {
117 | "current": "12.1.4",
118 | "wanted": "12.1.4",
119 | "latest": "12.1.5",
120 | "dependent": "officialstaticblog",
121 | "location": "/home/rajdeepsingh/Downloads/officialstaticblog/node_modules/eslint-config-next"
122 | },
123 | "marked": {
124 | "current": "4.0.12",
125 | "wanted": "4.0.14",
126 | "latest": "4.0.14",
127 | "dependent": "officialstaticblog",
128 | "location": "/home/rajdeepsingh/Downloads/officialstaticblog/node_modules/marked"
129 | },
130 | "next": {
131 | "current": "12.1.4",
132 | "wanted": "12.1.4",
133 | "latest": "12.1.5",
134 | "dependent": "officialstaticblog",
135 | "location": "/home/rajdeepsingh/Downloads/officialstaticblog/node_modules/next"
136 | }
137 | }
138 | ```
139 |
140 | ## --long or -l
141 |
142 | \-l flag help to provide extendable information of very npm packages.
143 |
144 | ```cmd rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$ npm outdated -l
145 | Package Current Wanted Latest Location Depended by Package Type Homepage
146 | @next/swc-linux-arm64-gnu 12.1.4 12.1.5 11.1.3-canary.104 node_modules/@next/swc-linux-arm64-gnu officialstaticblog dependencies
147 | @next/swc-linux-arm64-musl 12.1.4 12.1.5 11.1.3-canary.104 node_modules/@next/swc-linux-arm64-musl officialstaticblog dependencies
148 | eslint 8.12.0 8.12.0 8.13.0 node_modules/eslint officialstaticblog devDependencies https://eslint.org
149 | eslint-config-next 12.1.4 12.1.4 12.1.5 node_modules/eslint-config-next officialstaticblog devDependencies https://github.com/vercel/next.js#readme
150 | marked 4.0.12 4.0.14 4.0.14 node_modules/marked officialstaticblog devDependencies https://marked.js.org
151 | next 12.1.4 12.1.4 12.1.5 node_modules/next officialstaticblog dependencies https://nextjs.org
152 | rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$
153 | ```
154 |
155 | ## -g or --global
156 |
157 | The global flag help print all the global package currently installed on your machine or laptop.
158 |
159 | ```cmd rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$ npm outdated -g
160 | Package Current Wanted Latest Location Depended by
161 | expo-cli 4.12.11 5.3.1 5.3.1 node_modules/expo-cli global
162 | npm 8.3.0 8.7.0 8.7.0 node_modules/npm global
163 | rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$
164 | ```
165 |
166 | ## -w or --workspace
167 |
168 | workspace print all outdated package lists in your workspace
169 |
170 | ```cmd
171 | npm outdated -w
172 | ```
173 |
174 | ***
175 |
176 | References
177 |
178 | [https://docs.npmjs.com/cli/v8/commands/npm-outdated#synopsis](https://docs.npmjs.com/cli/v8/commands/npm-outdated#synopsis "https://docs.npmjs.com/cli/v8/commands/npm-outdated#synopsis")
--------------------------------------------------------------------------------
/public/sitemap-0.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | http://localhost:3000 daily 0.7 2022-04-28T11:13:08.412Z
4 | http://localhost:3000/Search daily 0.7 2022-04-28T11:13:08.412Z
5 | http://localhost:3000/blog/how-is-npm-install-command daily 0.7 2022-04-28T11:13:08.413Z
6 | http://localhost:3000/blog/how-to-add-css-in-next-js daily 0.7 2022-04-28T11:13:08.413Z
7 | http://localhost:3000/blog/how-to-capture-screenshots-in-raspberry-pi-4 daily 0.7 2022-04-28T11:13:08.413Z
8 | http://localhost:3000/blog/how-to-check-the-snap-store-package-available-for-raspberry-pi-4-or-not daily 0.7 2022-04-28T11:13:08.413Z
9 | http://localhost:3000/blog/html-version-history daily 0.7 2022-04-28T11:13:08.413Z
10 | http://localhost:3000/blog/keyboard-shortcut-keys-for-linux-terminal daily 0.7 2022-04-28T11:13:08.413Z
11 | http://localhost:3000/blog/npm-outdated-command daily 0.7 2022-04-28T11:13:08.413Z
12 | http://localhost:3000/blog/text-highlighting-in-html-5 daily 0.7 2022-04-28T11:13:08.414Z
13 | http://localhost:3000/blog/title-tag-in-html-5 daily 0.7 2022-04-28T11:13:08.414Z
14 | http://localhost:3000/blog/what-is-next-js daily 0.7 2022-04-28T11:13:08.414Z
15 | http://localhost:3000/tag/npm daily 0.7 2022-04-28T11:13:08.414Z
16 | http://localhost:3000/tag/npmcli daily 0.7 2022-04-28T11:13:08.414Z
17 | http://localhost:3000/tag/npm-install-command daily 0.7 2022-04-28T11:13:08.414Z
18 | http://localhost:3000/tag/nextjs daily 0.7 2022-04-28T11:13:08.414Z
19 | http://localhost:3000/tag/next daily 0.7 2022-04-28T11:13:08.414Z
20 | http://localhost:3000/tag/nextjs-framework daily 0.7 2022-04-28T11:13:08.414Z
21 | http://localhost:3000/tag/nextjs-tutorial daily 0.7 2022-04-28T11:13:08.414Z
22 | http://localhost:3000/tag/reactjs daily 0.7 2022-04-28T11:13:08.414Z
23 | http://localhost:3000/tag/reactjs-tutorial daily 0.7 2022-04-28T11:13:08.414Z
24 | http://localhost:3000/tag/raspberry daily 0.7 2022-04-28T11:13:08.414Z
25 | http://localhost:3000/tag/raspi-4 daily 0.7 2022-04-28T11:13:08.415Z
26 | http://localhost:3000/tag/screensshots daily 0.7 2022-04-28T11:13:08.415Z
27 | http://localhost:3000/tag/capture-screen-shots daily 0.7 2022-04-28T11:13:08.415Z
28 | http://localhost:3000/tag/gnome-screenshot daily 0.7 2022-04-28T11:13:08.415Z
29 | http://localhost:3000/tag/install-gnome-screenshot daily 0.7 2022-04-28T11:13:08.415Z
30 | http://localhost:3000/tag/raspberry-pi-4 daily 0.7 2022-04-28T11:13:08.415Z
31 | http://localhost:3000/tag/snapcraft daily 0.7 2022-04-28T11:13:08.415Z
32 | http://localhost:3000/tag/snap-store daily 0.7 2022-04-28T11:13:08.415Z
33 | http://localhost:3000/tag/linux daily 0.7 2022-04-28T11:13:08.415Z
34 | http://localhost:3000/tag/binary daily 0.7 2022-04-28T11:13:08.415Z
35 | http://localhost:3000/tag/html daily 0.7 2022-04-28T11:13:08.415Z
36 | http://localhost:3000/tag/html-5 daily 0.7 2022-04-28T11:13:08.415Z
37 | http://localhost:3000/tag/html-history daily 0.7 2022-04-28T11:13:08.415Z
38 | http://localhost:3000/tag/html-version daily 0.7 2022-04-28T11:13:08.415Z
39 | http://localhost:3000/tag/who-create-html daily 0.7 2022-04-28T11:13:08.415Z
40 | http://localhost:3000/tag/keyboard-shortcut daily 0.7 2022-04-28T11:13:08.415Z
41 | http://localhost:3000/tag/shortcut-keys daily 0.7 2022-04-28T11:13:08.415Z
42 | http://localhost:3000/tag/linux-terminal daily 0.7 2022-04-28T11:13:08.415Z
43 | http://localhost:3000/tag/npm-command daily 0.7 2022-04-28T11:13:08.415Z
44 | http://localhost:3000/tag/npm-cli daily 0.7 2022-04-28T11:13:08.415Z
45 | http://localhost:3000/tag/html-tutorial daily 0.7 2022-04-28T11:13:08.415Z
46 | http://localhost:3000/tag/text-highlighting daily 0.7 2022-04-28T11:13:08.415Z
47 | http://localhost:3000/tag/text-highlighting-in-html daily 0.7 2022-04-28T11:13:08.415Z
48 | http://localhost:3000/tag/html-for-beginner daily 0.7 2022-04-28T11:13:08.415Z
49 | http://localhost:3000/tag/title-tag daily 0.7 2022-04-28T11:13:08.415Z
50 | http://localhost:3000/tag/html-title-tag daily 0.7 2022-04-28T11:13:08.415Z
51 | http://localhost:3000/tag/reactjs-framework daily 0.7 2022-04-28T11:13:08.417Z
52 | http://localhost:3000/tag/javascript-framework daily 0.7 2022-04-28T11:13:08.417Z
53 | http://localhost:3000/category/npm daily 0.7 2022-04-28T11:13:08.417Z
54 | http://localhost:3000/category/npmcli daily 0.7 2022-04-28T11:13:08.417Z
55 | http://localhost:3000/category/npm-install-command daily 0.7 2022-04-28T11:13:08.417Z
56 | http://localhost:3000/category/nextjs daily 0.7 2022-04-28T11:13:08.417Z
57 | http://localhost:3000/category/next daily 0.7 2022-04-28T11:13:08.417Z
58 | http://localhost:3000/category/nextjs-framework daily 0.7 2022-04-28T11:13:08.417Z
59 | http://localhost:3000/category/nextjs-tutorial daily 0.7 2022-04-28T11:13:08.417Z
60 | http://localhost:3000/category/reactjs daily 0.7 2022-04-28T11:13:08.417Z
61 | http://localhost:3000/category/reactjs-tutorial daily 0.7 2022-04-28T11:13:08.417Z
62 | http://localhost:3000/category/raspberry daily 0.7 2022-04-28T11:13:08.417Z
63 | http://localhost:3000/category/raspi-4 daily 0.7 2022-04-28T11:13:08.417Z
64 | http://localhost:3000/category/screensshots daily 0.7 2022-04-28T11:13:08.417Z
65 | http://localhost:3000/category/capture-screen-shots daily 0.7 2022-04-28T11:13:08.417Z
66 | http://localhost:3000/category/gnome-screenshot daily 0.7 2022-04-28T11:13:08.417Z
67 | http://localhost:3000/category/install-gnome-screenshot daily 0.7 2022-04-28T11:13:08.417Z
68 | http://localhost:3000/category/raspberry-pi-4 daily 0.7 2022-04-28T11:13:08.417Z
69 | http://localhost:3000/category/snapcraft daily 0.7 2022-04-28T11:13:08.417Z
70 | http://localhost:3000/category/snap-store daily 0.7 2022-04-28T11:13:08.417Z
71 | http://localhost:3000/category/linux daily 0.7 2022-04-28T11:13:08.417Z
72 | http://localhost:3000/category/binary daily 0.7 2022-04-28T11:13:08.417Z
73 | http://localhost:3000/category/html daily 0.7 2022-04-28T11:13:08.417Z
74 | http://localhost:3000/category/html-5 daily 0.7 2022-04-28T11:13:08.417Z
75 | http://localhost:3000/category/html-history daily 0.7 2022-04-28T11:13:08.417Z
76 | http://localhost:3000/category/html-version daily 0.7 2022-04-28T11:13:08.417Z
77 | http://localhost:3000/category/who-create-html daily 0.7 2022-04-28T11:13:08.417Z
78 | http://localhost:3000/category/keyboard-shortcut daily 0.7 2022-04-28T11:13:08.417Z
79 | http://localhost:3000/category/shortcut-keys daily 0.7 2022-04-28T11:13:08.417Z
80 | http://localhost:3000/category/linux-terminal daily 0.7 2022-04-28T11:13:08.417Z
81 | http://localhost:3000/category/html-tutorial daily 0.7 2022-04-28T11:13:08.418Z
82 | http://localhost:3000/category/text-highlighting daily 0.7 2022-04-28T11:13:08.418Z
83 | http://localhost:3000/category/text-highlighting-in-html daily 0.7 2022-04-28T11:13:08.418Z
84 | http://localhost:3000/category/html-for-beginner daily 0.7 2022-04-28T11:13:08.418Z
85 | http://localhost:3000/category/title-tag daily 0.7 2022-04-28T11:13:08.418Z
86 | http://localhost:3000/category/html-title-tag daily 0.7 2022-04-28T11:13:08.418Z
87 | http://localhost:3000/category/reactjs-framework daily 0.7 2022-04-28T11:13:08.418Z
88 | http://localhost:3000/category/javascript-framework daily 0.7 2022-04-28T11:13:08.418Z
89 |
--------------------------------------------------------------------------------