This is a demo of SaaSphere, a boilerplate for building SaaS applications. Built using NextJS, TailwindCSS, ShadCN and Drizzle.

      Documentation overview

      Creating documentation is easy with the components provided in this boilerplate. This has been created this way to ensure that the documentation is kept consistent and easy to read.

      You can use the following components to create your documentation:

      //Import the Documentation component as a wrapper for your documentation page
      import { Documentation } from '@/components/docs/documentation';
      

      //Import the DocumentationSection component to create sections in your documentation
      import { DocumentationSection } from '@/components/docs/documentation-section';
      

      //Import the DocumentationTypography component to create headings and paragraphs in 
      //your documentation
      import { DocumentationTypography } from '@/components/docs/documentation-typography';
      

      //Import the CodeBlock component to display code blocks in your documentation
      import { CodeBlock } from '@/components/code-block';

      Advanced details on code blocks can be found here.

      Props

      The following are the props for the documentation components:

      //Documentation component
      interface DocumentationProps {
      	children: React.ReactNode;
      }
      

      //DocumentationSection component
      interface DocumentationSectionProps {
      	id: string; // The id of the section which links to the sidebar # value
      	children: React.ReactNode;
      }
      

      //DocumentationTypography component
      interface DocumentationTypographyProps {
      	variant: 'h1' | 'h2' | 'h3' | 'h4' | 'p'; // The variant of the typography component
      	children: React.ReactNode;
      }
      

      //CodeBlock component
      interface CodeBlockProps {
      	code: string; // The code to display, this is a string of code
      	language: string; // The language of the code, e.g. javascript, typescript, etc.
      	enableLineNumbers?: boolean; // Enable line numbers for the code block
      	lines?: (number | string)[]; // Highlight specific lines in the code block
      	copyToClipboard?: boolean; // Enable copy to clipboard functionality (defaults to true)
      }

      Example usage

      Below is an example of how you can use the documentation components to create documentation.

      1
      import { Documentation } from '@/components/docs/documentation'; 
      2
      import { DocumentationSection } from '@/components/docs/documentation-section';
      3
      import { DocumentationTypography } from '@/components/docs/documentation-typography'; 
      4
      

      5
      //Rest of the code
      6
      <Documentation>
      7
      	<DocumentationSection id="overview">
      8
      		<DocumentationTypography variant="h1">
      9
      			Documentation overview
      10
      		</DocumentationTypography>
      11
      		<DocumentationTypography variant="p">
      12
      	</DocumentationSection>
      13
      </Documentation>

      Sidebar

      The sidebar is formed within the DocsSidebar component. To add a new section to the sidebar, simply add a group or item to the SIDEBAR_ITEMS array. Link this new item to a corresponding documentation section ID.

      To create a new category in the sidebar, add a a new group to SIDEBAR_ITEMS and link it to a newly created page within NextJs router. Below is an example of creating a new section which routes to a new subset page of documentation.

      Example

      1
      //Import the DocsSidebar component
      2
      

      3
      	const SIDEBAR_ITEMS = [
      4
      		{
      5
      			name: 'Getting setup',
      6
      			items: [
      7
      				{
      8
      					text: 'Introduction',
      9
      					link: '/docs#introduction',
      10
      					icon: <Lightbulb size={20} />,
      11
      					visible: true,
      12
      				},
      13
      			],
      14
      		},
      15
      		{
      16
      			name: 'New section',
      17
      			items: [
      18
      				{
      19
      					text: 'Overview',
      20
      					link: '/docs/new-section#overview',
      21
      					icon: <AppWindowMac size={20} />,
      22
      					visible: true,
      23
      				},
      24
      			],
      25
      		},
      26
      	];

      Code blocks

      Code blocks are used to display code within the documentation. This is achieved using the CodeBlock component. To display code blocks, use the following component:

      Props

      interface CodeBlockProps {
      code: string; // The code to display, this is a string of code
      language: string; // The language of the code, e.g. javascript, typescript, etc.
      enableLineNumbers?: boolean; // Enable line numbers for the code block
      lines?: (number | string)[]; // Highlight specific lines in the code block
      copyToClipboard?: boolean; // Enable copy to clipboard functionality (defaults to true)
      }

      Basic example

      1
      import { CodeBlock } from '@/components/code-block';
      2
      

      3
      

      4
      //Rest of the code
      5
      <CodeBlock code={code} language="javascript" />
      6
      

      7
      const code = `
      8
      async function sayHello(name) {
      9
      	console.log('Hello', name);
      10
      }
      11
      `;

      Expected output

      async function sayHello(name) {
      	console.log('Hello', name);
      }

      Advanced use cases

      Highlighting code

      To highlight specific lines in the code block, pass an array of line numbers to the lines prop. The code block will then highlight the lines specified. To highlight one line, pass type number. To highlight a range of lines, pass type string of format e.g 2:5.

      For more advanced use cases you may need to create a custom CodeBlock component, see the following link for more information: https://react-code-block.netlify.app/