How to write your first article.

1. Creating the article file.

First create a file inside blog folder in pages (/pages/blog/). You can also create a sub folder inside blog folder. For SEO, the best practice is to name the file and folders in all lower case seperated by hyphen "-" and end with ".tsx".
example: "your-first-article.tsx". This will create a tsx file.

2. Adding your article details in ARTICLES_LIST

Go to /BLOG_CONSTANTS/_ARTICLES_LIST.tsx file. Here we will add details of your article in ARTICLES_LIST array as follows.

    // Import author profiles, just type the name you have set in _BLOG_SETUP inside the curly brackets
    import { MAYUR, RUPALI } from './_BLOG_SETUP';

    // file --> /BLOG_CONSTANTS/_ARTICLE_LIST.tsx
    export const ARTICLES: iArticle[] = [
        ...,
        {
            path: '/pages/blog/your-first-article.tsx',
            featureArticle: true,
            preview: {
                // the author object you created in _BLOG_SETUP file
                author: MAYUR,
                date: "August 6 2022",
                articleTitle: "Your first article",
                shortIntro: "This is a demo file for your first article, you can copy structure of this file to create multile article.",
                tags: "demo, your first article",
                thumbnail: "/public/imp_assets/tutorials/how-to-write-first-article.svg",
                category: 'tutorial'
            },
            seo: {
                title: "Your first article",
                description:
                    "This is a demo file for your first article, you can copy structure of this file to create multile article.",
                keywords: "demo, blog setup, first article",
                ogImage: "/images/tutorials/demo-image.jpg",
                twitterHandle: "@mayur_nalwala",
            }
        },
        ...
    ]

In our article details we have 4 important properties path, featureArticle, preview, and seo.

• path
  As show in the above image, path contains the file path of our article.
  If you have Path Intellisense installed in your VS Code, it will be ease to add path, just hit "/" and then auto suggestions will come up, just follow the auto suggestions and set the path of the article file.

• featureArticle
  You can set it true or false as shown in the above image. If true the article card will be of full width as shown in the image below.
  *note : adding featureArticle property is optional

  

  feature article exmaple

• preview
  

  This will display the details of the article in the article cards on main home page and article's header on the article page

  • author : Paste the author variable imported from _BLOG_SETUP as shown in the image.
  • date : Write the article date in quotes i.e. as a string.
  • articleTitle : Write the article title in quotes i.e. as a string.
  • tags : Write tags and seperate with commas.
  • thumbnail : Save the image file in public-images folder and paste the image path. This will be displayed in article cards on home page. For thumpbails the recommended size is 540x300px.
  • shortIntro : A short intro for your article that will be shown on article cards.
  • category : If the article in under some category, write the category name.
  Check the above image for example of check /BLOG_CONSTANTS/_ARTICLES_LIST.tsx file.
• seo
  

  SEO details for your article page. As shown in the above image seo contains 5 important properties title, description, keywords, ogImage, twitterHandle, author.
  
  *note : seo is optional as we have already passed preview we will create default seo with that but if you want to pass any extra keywords or different page title, description etc we can write that in seo : {} object.

3. Writing the article.

Now we can go to our created file your-first-article.tsx and write our article. To write our article we will use different components as shown in Blog with sidebar layout or Blog with centered layout example. You can also checkout all the available components to write your article in All Components Demo page.