Data-Loading for Docusaurus Routes

A simple guide to building routes and loading data in Docusaurus projects, illustrated by a showcase example.

This weekend, I started creating a showcase of all dapps built with Juno for our website, which uses Docusaurus. Since I found the documentation somewhat lacking, I’ve decided to share a tutorial outlining the steps involved.

Note: All the code discussed in this blog post is open source and available for you to view and use. You can find it in my repository here.

UI: Page

If your primary interest is in data loading, this step might be optional. However, for building a feature like a “showcase,” it’s helpful to start with creating a new route. For my project, where I wanted to present the page at a /showcase path, I initated a new component in src/pages/showcase/index.tsx, using TypeScript/TSX.

The layout of this page is simple. It’s composed of two sections: the first serves as an introduction and includes an invitation for submissions of dapps to be featured in the showcase. The second section is where the spotlighted applications will be displayed.

Remember, at this point, the component doesn’t contain any data. It’s essentially a skeleton that we’ll populate with data in the following chapters.

import React from "react";
import styles from "./index.module.scss";
import Link from "@docusaurus/Link";
import Spotlight from "@site/src/components/Spotlight";
import Layout from "@theme/Layout";

export default function Showcase() {
  // TODO: the data we want to display
  const dapps = [];

  return (
    <Layout>
      <section>
        <h1>Showcase</h1>

        <p>List of dApps devs are building with Juno.</p>

        <Link
          href="https://github.com/junobuild/docs#submit-your-work"
          target="_blank"
        >
          🙏 Please add yours
        </Link>
      </section>

      <section>
        <div className={styles.grid}>
          {dapps.map((data, i) => (
            <Spotlight {...data} key={i} />
          ))}
        </div>
      </section>
    </Layout>
  );
}

The snippet shared earlier focuses on the HTML structure and doesn’t include styling details. For those interested in…