added images

Author: nmayur

BLOG_CONSTANTS/_ARTICLES_LIST.tsx

@@ -33,22 +33,22 @@ import { MAYUR, RUPALI } from './_BLOG_SETUP';
 // clear this article list and add your own
 export const ARTICLES_LIST: iArticle[] = [
     {
-        path: '/pages/blog/tutorial/how-to-setup-blog',
+        path: '/pages/blog/tutorial/how-to-setup-blog.tsx',
         featureArticle: true,
         preview: {
             author: MAYUR,
             date: "March 03 2022",
             articleTitle: "How to setup this blog template",
             tags: "demo, blog setup",
-            thumbnail: "/public/images/tutorials/blog-setup.jpg",
+            thumbnail: "/public/images/tutorials/how-to-setup-blog.svg",
             shortIntro: "These are the steps to setup your blog",
             category: 'tutorial'
         },
         seo: {
             title: "How to setup this blog template",
             description: "These are the steps to setup your blog",
             keywords: "demo, blog setup",
-            ogImage: "/public/images/tutorials/blog-setup.jpg",
+            ogImage: "/public/images/tutorials/how-to-setup-blog.svg",
             twitterHandle: "@mayur_nalwala",
             author: MAYUR.name
         }
@@ -60,7 +60,7 @@ export const ARTICLES_LIST: iArticle[] = [
             date: "August 08 2022",
             articleTitle: "Home Layout Example",
             tags: "demo, layout, home layout",
-            thumbnail: "/public/images/tutorials/centered-layout-thumb.png",
+            thumbnail: "/public/images/tutorials/home-layouts.svg",
             shortIntro: "In this article we will see Default Home Layout example.",
             category: 'layouts'
         },
@@ -69,7 +69,7 @@ export const ARTICLES_LIST: iArticle[] = [
             description:
                 "In this article we will see Default Home Layout example.",
             keywords: "next js, tailwind css, typescript, blog template, default layout, default home layout",
-            ogImage: "/public/images/tutorials/centered-layout-thumb.png",
+            ogImage: "/public/images/tutorials/home-layouts.svg",
             author: RUPALI.name
         }
     },
@@ -80,13 +80,13 @@ export const ARTICLES_LIST: iArticle[] = [
             date: "August 08 2022",
             articleTitle: "Page Layout for article with sidebar",
             tags: "demo, with sidebar, default layout",
-            thumbnail: "/public/images/tutorials/default-layout-thumb.jpg",
+            thumbnail: "/public/images/tutorials/blog-with-sidebar-layout.svg",
             shortIntro: "In this article we will see Page Layout for blog with sidebar example.",
             category: 'layouts'
         },
         seo: {
             keywords: "demo, with sidebar, blog page layout, blog page design with sidebar, webexpe, webexpe.com",
-            ogImage: "/public/images/tutorials/default-layout-thumb.jpg",
+            ogImage: "/public/images/tutorials/blog-with-sidebar-layout.svg",
         }
     },
     {
@@ -96,7 +96,7 @@ export const ARTICLES_LIST: iArticle[] = [
             date: "August 08 2022",
             articleTitle: "Page Layout for article with centered layout",
             tags: "demo, centered, centered layout",
-            thumbnail: "/public/images/tutorials/centered-layout-thumb.png",
+            thumbnail: "/public/images/tutorials/blog-with-centered-layout.svg",
             shortIntro: "This a demo artile with centered layout and with demo of all the components.",
             category: 'layouts'
         },
@@ -112,7 +112,7 @@ export const ARTICLES_LIST: iArticle[] = [
             date: "August 08 2022",
             articleTitle: "How to write your first article",
             tags: "demo, first article",
-            thumbnail: "/public/images/tutorials/centered-layout-thumb.png",
+            thumbnail: "/public/images/tutorials/how-to-write-first-article.svg",
             shortIntro: "This a step by step guide on how to write your first article.",
             category: 'tutorial'
         },
@@ -128,7 +128,7 @@ export const ARTICLES_LIST: iArticle[] = [
             date: "August 09 2022",
             articleTitle: "How to Export and deploy on firebase",
             tags: "demo, deploy blog",
-            thumbnail: "/public/images/tutorials/deploy.png",
+            thumbnail: "/public/images/tutorials/how-to-deploy.svg",
             shortIntro: "In this article you will see how to export blog files and what folder to deploy on your hosting.",
             category: 'tutorial'
         }
@@ -140,7 +140,7 @@ export const ARTICLES_LIST: iArticle[] = [
             date: "August 08 2022",
             articleTitle: "All Components",
             tags: "demo, all components",
-            thumbnail: "/public/images/tutorials/centered-layout-thumb.png",
+            thumbnail: "/public/images/tutorials/all-components.svg",
             shortIntro: "List of all usable components, its types and how to use it.",
             category: 'tutorial'
         },
@@ -155,12 +155,27 @@ export const ARTICLES_LIST: iArticle[] = [
             date: "August 10 2022",
             articleTitle: "Style Guide",
             tags: "demo, all components, style guide, styling tutorial",
-            thumbnail: "/public/images/tutorials/centered-layout-thumb.png",
+            thumbnail: "/public/images/tutorials/style-guide.svg",
             shortIntro: "Styling and theming tutorial.",
             category: 'tutorial'
         },
         seo: {
             keywords: "demo, all components, style guide, styling, css, tailwind css, tailwind, webexpe, webexpe.com",
         }
     },
+    {
+        path: '/pages/icons.tsx',
+        preview: {
+            author: MAYUR,
+            date: "August 13 2022",
+            articleTitle: "How to use icons",
+            tags: "demo, all components, style guide, styling tutorial, icons, how to use icons in website",
+            thumbnail: "/public/images/tutorials/how-to-use-icons.svg",
+            shortIntro: "How to use icons in your blog website.",
+            category: 'tutorial'
+        },
+        seo: {
+            keywords: "demo, all components, style guide, styling, css, tailwind css, tailwind, webexpe, webexpe.com, styling tutorial, icons, how to use icons in website",
+        }
+    },
 ]

next.config.js

@@ -1,9 +1,9 @@
 /** @type {import('next').NextConfig} */
-const removeImports = require("next-remove-imports")();
+// const removeImports = require("next-remove-imports")();
+// experimental: { esmExternals: true }
 const nextConfig = {
   reactStrictMode: true,
   trailingSlash: true,
-  experimental: { esmExternals: true }
 }
 
 module.exports = nextConfig

pages/blog/tutorial/how-to-write-your-first-article.tsx

@@ -35,7 +35,6 @@ const Article = () => {
                     Goto <b>/BLOG_CONSTANTS/_ARTICLES_LIST.tsx</b> file. Here we will add details of your article in <b>ARTICLES_LIST</b> array as follows.
                 </Text>
                 <CodeBlock code={Article_Entry_inList} className="my-5" />
-                {/* <Image className="my-5" src="/public/images/tutorials/add-article-in-list.svg" alt="Adding your article details in ARTICLES_LIST | webexpe.com" size={ImageSize.DEFAULT} /> */}
                 <Text p>
                     In our article details we have 4 important properties <b>path, featureArticle, preview, and seo</b>.
                 </Text>

pages/index.tsx

@@ -4,11 +4,12 @@ import { PageLayout, ArticleHeader, Text, List, Image, LinkTo, Seperator, Slider
 import ArticleCard from '../src/components/ArticleCards/ArticleCard';
 import FeaturedArticle from '../src/components/ArticleCards/FeaturedArticle';
 import { ARTICLES_LIST } from '../BLOG_CONSTANTS/_ARTICLES_LIST';
+import { DEFAULT_SEO } from "../BLOG_CONSTANTS/_BLOG_SETUP";
 
 
 const Home = () => {
   return (
-    <PageLayout home>
+    <PageLayout home PAGE_SEO={DEFAULT_SEO}>
       <section className='w-full md:pt-[100px] md:pb-[70px] pt-[130px] pb-20 mb-10 dark:bg-slate-800 bg-slate-200'>
         <div className="container text-center px-3">
           <Text title className='text-3xl'>
@@ -21,7 +22,7 @@ const Home = () => {
 
           <div className='flex justify-center mt-5 flex-wrap '>
             <a href="https://github.com/nmayur/nextjs-simple-blog-template" target="_blank" rel="noopener noreferrer" className='flex items-center justify-center rounded-md bg-blue-600 px-4 pb-2 text-white hover:text-white shadow-lg hover:shadow-none transition-all mb-3 md:mx-5 mx-2'>
-              <span className='text-xl pl-2 pt-2 block'>Github</span>
+              <span className='text-xl pt-2 block'>Github</span>
             </a>
             <LinkTo href="/about-us" passHref className='flex items-center justify-center rounded-md bg-blue-600 px-4 pb-2 text-white hover:text-white shadow-lg hover:shadow-none transition-all mb-3 md:mx-5 mx-2'>
               <span className='text-xl pt-2 block'>About</span>