Page Layout for a article with sidebar

This current article is made using blogwithsidebar 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 blogwithsidebar as shown
            <PageLayout blogwithsidebar>
                {/* Start writing your article here */}
            </PageLayout>
        )		
    }

    export default Article;
                

How to use

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

Features

• This layout is of contained width i.e has a max width same as the navbar, this is to keep the article / blog posts style consistent.
• In the sidebar on the right, we have author details and more articles from the author.
• We can also place ads on the right sidebar.

  
      // import PageLayout from components
      import { ..., PageLayout, ... } from "../../../src/components";
      const Article = () => {
          // create ads array and paste your add scripts as a string in quotes
          const ads = [
              'ad script',
              'ad script'
          ]
  
          return (
              // pass blogwithsidebar as shown
              <PageLayout blogwithsidebar ads={ads} >
                  {/* Start writing your article here */}
              </PageLayout>
          )		
      }
  
      export default Article;
  
  

  The above code block shows how to pass ads in the sidebar layout.

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 it is of type 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 it is of type 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 of type 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.