Skip to main content
Version: 3.0.0

HomePage

How to configure the home page which loaded when https://vulnsystem.github.io/ open? There are navbar, TopBanner, HeroBanner, and FeaturesContainer from top to the bottom in the home page.

The navBar is in the top of home page. You can adapt the navbar content according to the following code in the website/docusaurus.config.ts

NavBar
      navbar: {
        hideOnScroll: true,
        title: 'WoofWoof',
        logo: {
          alt: '',
          src: 'img/docusaurus.svg',
          srcDark: 'img/docusaurus_keytar.svg',
          width: 32,
          height: 32,
        },
        items: [
          {
            type: 'doc',
            position: 'left',
            docId: 'quickstart',
            label: 'Docus',
          },
          {
            type: 'docSidebar',
            position: 'left',
            sidebarId: 'api',
            label: 'API',
          },
          {to: 'blog', label: 'Blog', position: 'left'},
          {to: 'showcase', label: 'Showcase', position: 'left'},
          {
            to: '/community/support',
            label: 'Community',
            position: 'left',
            activeBaseRegex: `/community/`,
          },
          ......
        ]

TopBanner​

The TopBanner is next to the navbar and HeroBanner next to the TopBanner. You can adapt the TopBanner and HeroBanner content in the home page according to the following code in the website/src/pages/index.tsx.

TopBanner
function TopBanner() {
  return (
    <div className={styles.topBanner}>
      <div className={styles.topBannerTitle}>
        {'🎉\xa0'}
        <Link to="/blog/releases/3.0" className={styles.topBannerTitleText}>
          <Translate id="homepage.banner.launch.3.0">
            {'Docusaurus\xa03.0 is\xa0out!️'}
          </Translate>
        </Link>
        {'\xa0🥳'}
      </div>

HeroBanner​

HeroBanner next to the TopBanner. You can adapt the TopBanner and HeroBanner content in the home page according to the following code in the website/src/pages/index.tsx.

HeroBanner
function HeroBanner() {
  return (
    <div className={styles.hero} data-theme="dark">
      <div className={styles.heroInner}>
        <Heading as="h1" className={styles.heroProjectTagline}>
          <img
            alt={translate({message: 'Docusaurus with Keytar'})}
            className={styles.heroLogo}
            src={useBaseUrl('/img/docusaurus_keytar.svg')}
            width="200"
            height="200"
          />
          <span
            className={styles.heroTitleTextHtml}
            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML={{
              __html: translate({
                id: 'homepage.hero.title',
                message:
                  '<b>Anonymous</b>, <b>end-to-end cryptography</b> distributed event streaming platform',
                description:
                  'Home page hero title, can contain simple html tags',
              }),
            }}
          />
        </Heading>

FeaturesContainer​

The FeaturesContainer is next to the HeroBanner. You can adapt the FeaturesContainer content in the home page according to the following code in the website/src/data/features.tsx.

Features
const FEATURES: FeatureItem[] = [
  {
    title: translate({
      message: 'Based on Kafka',
      id: 'homepage.features.powered-by-mdx.title',
    }),
    image: {
      src: '/img/undraw_typewriter.svg',
      width: 1009.54,
      height: 717.96,
    },
    text: (
      <Translate id="homepage.features.powered-by-mdx.text">
        Apache Kafka is an open-source distributed event streaming platform 
        used for high-performance data pipelines, streaming analytics, 
        data integration, and mission-critical applications.
      </Translate>
    ),
  },