tabletop-commander/app/page.tsx

import { readMD } from "@/actions/readMD";
import { TTCMD } from "@/components/ttcmd";
import { readFile } from "fs/promises";
import { Suspense } from "react";
import { HomeClient } from "./client";
import { MDSkeletonLoader } from "@/components/loader";

export default function Home() {
  const body = readMD("./md/home.md");
  return (
    <>
      <section className="heading">
        <h2 className="strapline">Tabletop Commander</h2>
        <h1>How does it work?</h1>
      </section>
      {
        /* <section className="w-full my-6">
        <div className="card">
          <p>
            Tabletop Commander (TC) is a rules-and-tools app for tabletop games
            - board, card, war, role-playing, you name it! It is the spiritual
            successor of Chapter Master by Emmaline Autumn, a Warhammer 40,000
            9th Edition rules reference and game helper.
          </p>
          <p>
            Emma decided to move on from Chapter Master as her interest in 40k
            was supplanted by the greater wargaming hobby after the release of
            10th edition made clear that Chapter Master was too inflexible and
            tedious to work on.
          </p>
          <p>
            See, Emma had a vision that anyone could contribute to making rules
            corrections so that anyone could have all of the rules as they
            currently exist. This ballooned into the idea that you could have
            all the rules as they existed at <em>any time</em>
          </p>
        </div>
      </section>
      <section className="mt-8 grid grid-cols-3 gap-x-8 gap-y-4">
        <div>
          <div className="card">
            <PuzzlePieceIcon className="w-10 h-10 mb-2" />
            <h3 className="text-lg mb-2">Game Systems</h3>
            <div className="mb-8">
              <p>
                The basis of TC is called a Game System Package. This package
                includes everything needed for a game system, including schemas,
                publications, and tools. Players can follow a Game System to get
                consistently updated content publications, or fork it to
                maintain it themselves.
              </p>
              <h4>But who owns a Game System?</h4>
              <p>
                The neat part is that no one does! You can contribute to any
                Game System with updates to publications and schemas through a
                community review system. Those with the high enough scores
                contribute more towards a total approval score which is used to
                determine whether the Game System. The more your contributions
                are approved, the higher your score becomes, the more weight
                your approval and contributions carry.
              </p>
              <p>
                If your score is high enough, and a contribution request has
                enough approvals, you can even be the one to merge it in!
              </p>
            </div>
            <button className="btn-secondary whitespace-nowrap">
              Learn More
            </button>
          </div>
        </div>

        <div>
          <div className="card">
            <CircleStackIcon className="w-10 h-10 mb-2" />
            <h3 className="text-lg mb-2">Schemas</h3>
            <div className="mb-8">
              <p>
                Those who have studied English or databases, you would know that
                a schema is a structural pattern. TC aims to provide a simple,
                user-edited and maintained schema system for <em>any</em> game.
              </p>
              <p>
                If that flew over your head, don&apos;t worry. Others can share
                the schemas they&apos;ve made with everyone, which come as part
                of a Game System package that you can fork or follow to get both
                content and schemas ready to use.
              </p>
              <h4>For the techies:</h4>
              <p>
                The schema system makes use of a powerful custom query language
                (tcQuery) I designed. By writing queries directly into the
                schema, we can reduce the amount of re-written content, while
                maintaining the presence of data anywhere we need it.
              </p>
            </div>
            <button className="btn-secondary">Learn More</button>
          </div>
        </div>

        <div>
          <div className="card">
            <BookOpenIcon className="w-10 h-10 mb-2" />
            <h3 className="text-lg mb-2">Publications</h3>
            <div className="mb-8">
              <p>
                Publications are the actual content of the rules. They
                don&apos;t just contain the content, but also the style in which
                the content is shown.
              </p>
              <p>
                Content can include text, images, and even video (through
                YouTube links or external embeds). Content can link to other
                parts of the publication through context based pop-overs.
              </p>
              <h4>For the techies (again):</h4>
              <p>
                Publications use an enhanced markdown syntax (tcMD) that
                implements tcQuery, and adds a bit of custom syntax for things
                like pop-overs and styling hints for rendering.
              </p>
              <p>
                The styling aspect is similar to a very trimmed down CSS, but
                can accomplish quite a lot. For example, this page is actually
                built using tcMD!*
              </p>
            </div>
            <button className="btn-secondary">Learn More</button>
          </div>
        </div>
        <cite className="col-span-3">
          * not quite yet, this page is currently built with React, but soon it
          will be done. If this makes it to production, tell Emma she forgot to
          turn the home page into magic
        </cite>
      </section> */
      }
      <Suspense fallback={<MDSkeletonLoader />}>
        <HomeClient body={body} />
      </Suspense>
    </>
  );
}