Page Layout for a article with centered layout

This current article is made using blogcentered layout. This layout will be used to write your blog posts or articles.

    // import PageLayout from components
    import { ..., PageLayout, ... } from "../../../src/components";
    const Article = () => {
        return (
            // pass blogcentered as shown
            <PageLayout blogcentered>
                {/* Start writing your article here */}
            </PageLayout>
        )		
    }

    export default Article;

The above code snippet gives you a demo on how to use blogcentered layout. The current article that you see is the basic output/example of blogcentered layout which will consist of a navbar on the top and the main content area. The author details and more articles by the author will be available at the bottom after the article.

How to use

If you want to explore this layout checkout the code for this article in
blog-with-centered-layout.tsx file inside pages/tutorial folder.

Features

• This layout is of contained width and centered, this is to keep the article / blog posts style consistent.
• At the bottom, we have author details and more articles from the author.

Components Used to write this article

Check blog-with-sidebar-layout.tsx in pages/tutorial file to see all the mentioned components in use.

• We have used the <PageLayout blogwithsidebar/> as shown in the above code block.
• Image tag for displaying images.
  To use image we have to import Image from components and ImageSize enum from enums. The Image size will help us to set the size of the image.
  Available sizes: ImageSize.DEFAULT, ImageSize.FULL, ImageSize.MEDIUM, ImageSize.SMALL, ImageSize.XS.

  
      // import ImageSize from enums
      import { ..., ImageSize } from "../../src/shared/enums"
      // import Image from components
      import { ..., Image, ... } from "../../../src/components";
      const Article = () => {
          return (
              <Image src="/public/images/tutorials/demo-image.jpg" alt="alt text" caption="img caption" className="my-5" />
              <Image src="/public/images/tutorials/demo-image.jpg" alt="alt text" caption="img caption" size={ImageSize.FUll} className="mb-5" />
              <Image src="/public/images/tutorials/demo-image.jpg" alt="alt text" caption="img caption" size={ImageSize.MEDIUM} className="mb-5" />
              <Image src="/public/images/tutorials/demo-image.jpg" alt="alt text" caption="img caption" size={ImageSize.SMALL} className="mb-5" />
              <Image src="/public/images/tutorials/demo-image.jpg" alt="alt text" caption="img caption" size={ImageSize.XS} className="mb-5" />
          )		
      }
  
      export default Article;
  
  

• Text.
  We use this to write content/text. To use image we have to import Text from components. We have different Text types like title, subtitle, p, quote with default styles and by default is paragraph.

  
      // import TextAlign from enums
      import { ..., TextAlign } from "../../src/shared/enums"
      // import Text from components
      import { ..., Text, ... } from "../../../src/components";
      const Article = () => {
          return (
              <Text>By Default its paragraph tag</Text>
              <Text p>Paragraph</Text>
              <Text title>Title</Text>
              <Text subtitle>Subtitle</Text>
              <Text quote>Quoted text</Text>
  
              {/* Changing default styles */}
              <Text p className="!text-[20px] !font-bold">Overide text size and weight</Text>
  
              {/* Text Aligns */}
              <Text p textAlign={TextAlign.CENTER}>Text Align Center</Text>
              <Text p textAlign={TextAlign.LEFT}>Text Align Left</Text>
              <Text p textAlign={TextAlign.RIGHT}>Text Align Right</Text>
              <Text p textAlign={TextAlign.JUSTIFY}>Text Align Justify</Text>
              <Text p textAlign={TextAlign.NONE}>Text Align None</Text>
  
              {/* Text Aligns via tailwind classes */}
              <Text p className="text-left">...</Text>
              <Text p className="text-right">...</Text>
  
              {/* Change font colors via color="" */}
              <Text p color="red">Text color red</Text>
              <Text p color="#E2904B">Text color #E2904B</Text>
  
              {/* Change font colors via tailwind classes */}
              <Text p className="font-blue-600">...</Text>
              <Text p className="font-slate-400">...</Text>
          )		
      }
  
      export default Article;
  
  

• List
  This is used to display lists. We have 3 different types: ListType.disc | ListType.number | ListType.none, by default type is ListType.disc.

  
      // import ListType from enums
      import { ..., ListType } from "../../src/shared/enums"
      // import List from components
      import { ..., List, ... } from "../../../src/components";
      const Article = () => {
          return (
              <List type={ListType.disc}>
                  <li>List with disc</li>
              </List>
  
              {/* or */}
              <List type={ListType.number}>
                  <li>List with number</li>
              </List>
  
              {/* or */}
              <List type={ListType.none}>
                  <li>List with no style</li>
              </List>
          )		
      }
  
      export default Article;
  
  

• Seperator
  This is used to add a section sepertator. We have 2 types: <Seperator dots/> or <Seperator line/>, by default it is line.

  
      // import Seperator from components
      import { ..., Seperator, ... } from "../../../src/components";
      const Article = () => {
          return (
              <Seperator dots />
              {/* or */}
              <Seperator line />
          )		
      }
  
      export default Article;
  
  

note: all these components are used in blog-with-sidebar-layout.tsx and blog-with-centerd-layout.tsx in pages/tutorial. You can also check All Components Demo, list of all components, its types and how to use them.