M
August 14 2022
Page Layout for a article with sidebar
#demo
#with sidebar
#default layout
This current article is made using blogwithsidebar layout. This layout will be used to write your blog posts or articles.
// import PageLayout from componentsimport { ..., 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.The above code block shows how to pass ads in the sidebar layout.// import PageLayout from componentsimport { ..., PageLayout, ... } from "../../../src/components";const Article = () => {// create ads array and paste your add scripts as a string in quotesconst ads = ['ad script','ad script']return (// pass blogwithsidebar as shown<PageLayout blogwithsidebar ads={ads} >{/* Start writing your article here */}</PageLayout>)}export default Article;
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 enumsimport { ..., ImageSize } from "../../src/shared/enums"// import Image from componentsimport { ..., 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 enumsimport { ..., TextAlign } from "../../src/shared/enums"// import Text from componentsimport { ..., 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 enumsimport { ..., ListType } from "../../src/shared/enums"// import List from componentsimport { ..., 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 componentsimport { ..., 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.