Skip to main content

Chapter 01 Settings

These are the settings inside directory Docusaurus.

docusaurus.config.js​

// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');

/** @type {import('@docusaurus/types').Config} */
const config = {
  title: '231saurus',                     // Or else
  tagline: 'May the fork() be with you!', // Or else
  favicon: 'img/favicon.ico',             // Or else
  url: 'https://cbkadal.github.io',       // Or else
  baseUrl: '/231saurus/',                 // Or else
  organizationName: 'cbkadal',            // (Usually your GitHub org/user name)
  projectName: '231saurus',               // (Usually your repo name)
  trailingSlash: false,                   // "true" or "false"

  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',

  // Even if you don't use internalization, you can use this field to set useful
  // metadata like html lang. For example, if your site is Chinese, you may want
  // to replace "en" with "zh-Hans".
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],
  },

  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
        },
        blog: {
          showReadingTime: true,
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      }),
    ],
  ],

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      // Replace with your project's social card
      image: 'img/docusaurus-social-card.jpg',
      navbar: {
        title: 'HOME',
        logo: {
          alt: 'Logo',
          src: 'img/cbkadal.jpg',
        },
        items: [
          {
            type: 'docSidebar',
            sidebarId: 'tutorialSidebar',
            position: 'left',
            label: 'General',
            to: '/docs',
          },
          {to: '/blog', label: 'Blog', position: 'left'},
          {
            href: 'https://github.com/cbkadal/231saurus/',
            label: 'GitHub',
            position: 'right',
          },
        ],
      },
      footer: {
        style: 'dark',
        links: [
          {
            title: 'Docs',
            items: [
              {
                label: 'General',
                to: '/docs',
              },
            ],
          },
          {
            title: 'Community',
            items: [
              {
                label: 'Stack Overflow',
                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
              },
              {
                label: 'Discord',
                href: 'https://discordapp.com/invite/docusaurus',
              },
              {
                label: 'Twitter',
                href: 'https://twitter.com/docusaurus',
              },
            ],
          },
          {
            title: 'More',
            items: [
              {
                label: 'Blog',
                to: '/blog',
              },
              {
                label: 'GitHub',
                href: 'https://github.com/cbkadal/231saurus/',
              },
            ],
          },
        ],
        copyright: `Copyright © ${new Date().getFullYear()} BinKadal, Sendirian Berhad --- 
        REV28: Tue 20 Jun 2023 09:30
        `,
        // REV27: Wed 14 Jun 2023 15:00
        // REV19: Fri 26 May 2023 10:00
        // REV09: Thu 25 May 2023 07:00
        // REV05: Thu 11 May 2023 03:00
        // REV01: Wed 03 May 2023 20:00
        // START: Sat 29 Apr 2023 13:00
      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
      },
    }),
};

module.exports = config;

src/pages/index.js​

import React from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import HomepageFeatures from '@site/src/components/HomepageFeatures';
import QuickAccess from '@site/src/components/QuickAccess';
import styles from './index.module.css';

function HomepageHeader() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <header className={clsx('hero hero--primary', styles.heroBanner)}>
      <div className="container">
        <h1 className="hero__title">{siteConfig.title}</h1>
        <p className="hero__subtitle">{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
            className="button button--secondary button--lg"
            to="/docs/category/appendix-a/">
            Cheat Sheet: 1 - 60; minutes ⏱️     
          </Link>
        </div>
        <br />
        <div className={styles.buttons}>
          <Link
            className="button button--secondary button--lg"
            // to="/docs/intro">
            to="https://docusaurus.io/">
            Docusaurus Central: 1 - &infin; minutes ⏱️
          </Link>
        </div>
      </div>
    </header>
  );
}

export default function Home() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <Layout
      title={`Hello from ${siteConfig.title}`}
      description="Description will go into a meta tag in <head />">
      <HomepageHeader />
      <main>
        <HomepageFeatures />
        <QuickAccess />
      </main>
    </Layout>
  );
}

// ZCZC
// REV04: Wed 14 Jun 2023 14:00
// REV03: Tue 30 May 2023 08:00
// REV02: Tue 23 May 2023 20:00
// REV01: Tue 09 May 2023 10:00
// START: Sun 07 May 2023 21:00

src/components/Highlight.js​

import React from 'react';

export default function Highlight({children, color}) {
  return (
    <span
      style={{
        backgroundColor: color,
        borderRadius: '2px',
        color: '#fff',
        padding: '0.2rem',
      }}>
      {children}
    </span>
  );
}

// ZCZC
// REV01: Fri 02 Jun 2023 17:00
// START: Wed 31 May 2023 13:00

src/components/HomepageFeatures/index.js​

import React from 'react';
import clsx from 'clsx';
import styles from './styles.module.css';

const FeatureList = [
  {
    title: 'Jolan Tru!',
    img: require('@site/static/img/grogu.jpg').default,
    description: (
      <>
        Qapla', this is the way!
      </>
    ),
  },
  {
    title: 'Do IT!',
    description: 'This is how me do it!',
    videoUrl: 'https://www.youtube.com/embed/jEoM3qan9Gs', 
  },
  {
    title: 'I have spoken!',
    img: require('@site/static/img/kuiil.jpg').default,
    description: (
      <>
         Hello Docusaurus,<br />Good Bye Jekyll!
      </>
    ),
  },
];

// function Feature({Svg, img,  title, description}) {
function Feature({ Svg, img, title, description, videoUrl }) {
  return (
    <div className={clsx('col col--4')}>
      <div className="text--center">
        {img && <img className={styles.featureSvg} role="img" src={img} />}
        {Svg && <Svg className={styles.featureSvg} role="img" />}
        {videoUrl && (
          <iframe
            className={styles.featureVideo}
            // width="560"
            // height="315"
            width="355"
            height="200"
            src={videoUrl}
            frameBorder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
          ></iframe>
        )}
      </div>
      <div className="text--center padding-horiz--md">
        <h3>{title}</h3>
        <p>{description}</p>
      </div>
    </div>
  );
}

export default function HomepageFeatures() {
  return (
    <section className={styles.features}>
      <div className="container">
        <div className="row">
          {FeatureList.map((props, idx) => (
            <Feature key={idx} {...props} />
          ))}
        </div>
      </div>
    </section>
  );
}

// REV06: Tue 30 May 2023 08:00
// REV05: Thu 25 May 2023 07:00
// REV04: Wed 24 May 2023 20:00
// REV03: Wed 10 May 2023 05:00
// REV01: Mon 08 May 2023 19:00
// START: Sun 07 May 2023 21:00

src/components/QuickAccess/index.js​

import React, { useState } from "react";
import "./QuickAccess.css";

const Index = () => {
  const [searchQuery, setSearchQuery] = useState("");

  const handleSearchChange = (event) => {
    setSearchQuery(event.target.value);
  };

  const cards = [
    {
      title: "Cheat Sheet",
      subtitle: "Sub Cheat Sheet",
      image: "img/cbkadalDOCU.jpg",
      content: "Yada yada yada yada yada.",
      target: "docs/"
    },
    {
      title: "Cheat Sheet",
      subtitle: "Sub Cheat Sheet",
      image: "img/cbkadalDOCU.jpg",
      content: "Yada yada yada yada yada.",
      target: "docs/"
    },
    {
      title: "Cheat Sheet",
      subtitle: "Sub Cheat Sheet",
      image: "img/cbkadalDOCU.jpg",
      content: "Yada yada yada yada yada.",
      target: "docs/"
    },
    {
      title: "Cheat Sheet",
      subtitle: "Sub Cheat Sheet",
      image: "img/cbkadalDOCU.jpg",
      content: "Yada yada yada yada yada.",
      target: "docs/"
    },
    {
      title: "Cheat Sheet",
      subtitle: "Sub Cheat Sheet",
      image: "img/cbkadalDOCU.jpg",
      content: "Yada yada yada yada yada.",
      target: "docs/"
    },
  ];

  const filteredCards = searchQuery
    ? cards.filter((card) =>
        card.title.toLowerCase().includes(searchQuery.toLowerCase())
      )
    : cards;

  return (
    <>
      <div className="title">Quick Access</div>
      <div className="search-container">
        <input
          type="text"
          value={searchQuery}
          onChange={handleSearchChange}
          placeholder="Search..."
          className="search-input"
        />
      </div>
      <div className="grid-container">
        {filteredCards.map((card, index) => (
          <a href={card.target} className="" key={card.title}>
            <article className="card" key={index}>
              <img src={card.image} alt="Place image here" />
              <div className="card_content">
                <span className="card_title">{card.title}</span>
                <span className="card_subtitle">{card.subtitle}</span>
                <p className="card_description">
                  {card.content.length > 200
                    ? `${card.content.substring(0, 200)}...`
                    : card.content}
                </p>
              </div>
            </article>
          </a>
        ))}
      </div>
    </>
  );
};

export default Index;

// START: Wed 14 Jun 2023 15:00

Rev. 03 -- 14 Jun 2023