The Company Docs

The Company documentation

View Demo · Documentation · Report Bug · Request Feature

📔 Table of Contents

• About the Project
  • Screenshots
  • Tech Stack
  • Features
  • Color Reference
  • Environment Variables
• Getting Started
  • Prerequisites
  • Run Locally
  • Deployment
• Usage
  • Guides
• Roadmap
• Contact
• Acknowledgements

🌟 About the Project

Docusaurus is a modern static website generator that helps you maintain open source documentation websites. We use Docusaurus to showcase our team documentation and update project progress.

📷 Screenshots

• Home page:

• Release viewer:

Demo: https://the-company-tcus.netlify.app/releases/view/nocodb/nocodb?from=11-30-2022&to=01-04-2023

• PDF viewer:

Demo: https://the-company-tcus.netlify.app/pdf-viewer?url=https://documentservices.adobe.com/view-sdk-demo/PDFs/Bodea%20Brochure.pdf&title=Bodea%20Brochure&embedMode=FULL_WINDOW

👾 Tech Stack

Client

• React.js
• WindiCSS
• TanStack Query
• React Router v5
• Mantine

Server

• Docusaurus v2

🎯 Features

• PDF viewer.
• GitHub release viewer.
• Dynamic routes (pdf viewer, release viewer).
• Custom navbar (cursor-effect button).

🎨 Color Reference

These colors are defined in the src/css/custom.css file when bootstrapping a new project.

• Light theme:

Color	Hex	CSS variable	WindiCSS utility (custom)*
primary	#1E40AF	--ifm-color-primary	primary
primary dark	#1B3A9D	--ifm-color-primary-dark	primary-dark
primary darker	#193695	--ifm-color-primary-darker	primary-darker
primary darkest	#152D7B	--ifm-color-primary-darkest	primary-darkest
primary light	#2146C1	--ifm-color-primary-light	primary-light
primary lighter	#224AC9	--ifm-color-primary-lighter	primary-lighter
primary lightest	#2F58DB	--ifm-color-primary-lightest	primary-lightest
docusaurus-highlighted-code-line-bg	#0000001A	--docusaurus-highlighted-code-line-bg	Not set

• Dark theme:

Color	Hex	CSS variable ([data-theme='dark'])**	WindiCSS utility (custom)*
primary	#BFDBFE	--ifm-color-primary	dark-primary
primary dark	#93C2FD	--ifm-color-primary-dark	dark-primary-dark
primary darker	#7DB6FD	--ifm-color-primary-darker	dark-primary-darker
primary darkest	#3C91FC	--ifm-color-primary-darkest	dark-primary-darkest
primary light	#EBF4FF	--ifm-color-primary-light	dark-primary-light
primary lighter	#FFFFFF	--ifm-color-primary-lighter	dark-primary-lighter
primary lightest	#FFFFFF	--ifm-color-primary-lightest	dark-primary-lightest
docusaurus-highlighted-code-line-bg	#0000004D	--docusaurus-highlighted-code-line-bg	Not set

*: These are not default WindiCSS utilities. It is defined in windi.config.ts. See example configuration below.

**: These variables applies to selector [data-theme='dark'] only.

• WindiCSS colors:

You can style your components with WindiCSS colors. See color reference at WindiCSS color utility.

---

Configure WindiCSS colors

// windi.config.ts
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#1e40af',
          dark: '#1b3a9d',
          darker: '#193695',
          darkest: '#152d7b',
          light: '#2146c1',
          lighter: '#224ac9',
          lightest: '#2f58db',
        },
        'dark-primary': {
          DEFAULT: '#bfdbfe',
          dark: '#93c2fd',
          darker: '#7db6fd',
          darkest: '#3c91fc',
          light: '#ebf4ff',
          lighter: '#ffffff',
          lightest: '#ffffff',
        },
      },
    },
  },
};

🔑 Environment Variables

To run this project, you will need to add the following environment variables to your .env file:

• App configs:

  GH_TOKEN: GitHub personal access token to fetch data from GitHub API.

  Note: It's recommended that the token has the following scopes: repo.public_repo.

  PDF_EMBED_CLIENT_ID (optional): Client ID (API Key) for Adobe PDF Embed API. You can checkout the documentation, or generate a new one here.

  Note: This is optional because the default client id for domains: localhost (development) and the-company-tcus.netlify.app (production) are already set in the file docusaurus.config.js.

E.g:

# .env
GH_TOKEN=ghp_HH8T***
PDF_EMBED_CLIENT_ID=e11a5***

You can also check out the file .env.example to see all required environment variables.

🧰 Getting Started

‼️ Prerequisites

This project uses pnpm as package manager:

npm install --global pnpm

🏃 Run Locally

Clone the project:

git clone https://github.com/the-company-tcus/docs.git

Go to the project directory:

cd docs

Install dependencies:

pnpm install

Start the server:

pnpm start

🚩 Deployment

Deploying to Netlify

Deploying to Vercel

Deploying to GitHub Pages

To deploy this project run:

GIT_USER=<GITHUB_USERNAME> pnpm deploy

Warning: You have to change the baseUrl in docusaurus.config.js to docs/ before deploying to GitHub Pages.

For more information, check out the doc Document Site Deployment.

👀 Usage

Guides

• Architecture.
• Components Management.
• Dynamic Routes.
• Production Setup:
  • Document Site Deployment.
  • Domain Setup.
  • Mail Server.
• API References.

🧭 Roadmap

• Features:

  • Remark plugin to transform PDF links to PDFViewer component.
  • Integrate remark-emoji plugin.

• Blogs:

  • Add custom dynamic routes to Docusaurus.
  • Add your custom navbar to Docusaurus.
  • Create your first remark plugin.

• Docs:

  • Git branching strategy.
  • Privacy Policy.
  • Terms of Service.

🤝 Contact

Duong Vinh - @duckymomo20012 - [email protected]

Project Link: https://github.com/the-company-tcus/docs.

💎 Acknowledgements

Here are useful resources and libraries that we have used in our projects:

• Docusaurus: Build optimized websites quickly, focus on your content.
• Awesome Readme Template: A detailed template to bootstrap your README file quickly.