docs(website): improve document structure

uhyo · Aug 24, 2023 · 80a2bc6 · 80a2bc6
1 parent b06f26c
commit 80a2bc6
Show file tree

Hide file tree

Showing 8 changed files with 227 additions and 208 deletions.
diff --git a/website/src/app/(docs)/_toc/Outline.tsx b/website/src/app/(docs)/_toc/Outline.tsx
@@ -6,20 +6,18 @@ export const Outline: React.FC<{
 }> = ({ toc, currentHeading }) => {
   return (
     <nav>
-      <div>
-        <h2>On this page</h2>
-        <ul>
-          {toc.map((item) => (
-            <li
-              key={item.id}
-              data-level={item.level}
-              data-current={item.id === currentHeading ? "true" : undefined}
-            >
-              <a href={`#${item.id}`}>{item.text}</a>
-            </li>
-          ))}
-        </ul>
-      </div>
+      <h2>On this page</h2>
+      <ul>
+        {toc.map((item) => (
+          <li
+            key={item.id}
+            data-level={item.level}
+            data-current={item.id === currentHeading ? "true" : undefined}
+          >
+            <a href={`#${item.id}`}>{item.text}</a>
+          </li>
+        ))}
+      </ul>
     </nav>
   );
 };
diff --git a/website/src/app/(docs)/_toc/Toc.css b/website/src/app/(docs)/_toc/Toc.css
@@ -1,13 +1,13 @@
 div.toc {
-  display: grid;
-  grid-template-columns: 1fr var(--toc-width);
+  grid-area: toc;
+  width: var(--toc-width);
 }
 
 div.toc nav {
   font-size: 0.9rem;
 }
 
-div.toc nav > div {
+div.toc nav {
   position: sticky;
   left: 0;
   top: 0;

diff --git a/website/src/app/(docs)/_toc/index.tsx b/website/src/app/(docs)/_toc/index.tsx
@@ -15,8 +15,8 @@ export const Toc: React.FC<React.PropsWithChildren> = ({ children }) => {
 
   return (
     <>
+      {children}
       <div className="toc">
-        {children}
         <Outline toc={toc} currentHeading={currentHeading} />
       </div>
     </>

diff --git a/website/src/app/(docs)/layout.tsx b/website/src/app/(docs)/layout.tsx
@@ -1,6 +1,5 @@
 import { Footer } from "../_utils/Footer";
 import { Header } from "../_utils/Header";
-import { Toc } from "./_toc";
 
 export default function DocsLayout({
   children,

diff --git a/website/src/app/(toppage)/page.module.css b/website/src/app/(toppage)/page.module.css
@@ -1,4 +1,4 @@
-.main hgroup {
+.header hgroup {
   max-width: 90vw;
   min-height: 12em;
   margin-inline: auto;
@@ -9,37 +9,37 @@
   font-family: var(--font-outfit);
 }
 
-.main hgroup > p:first-of-type {
+.header hgroup > p:first-of-type {
   grid-column: 1;
   grid-row: 1 / span 2;
   align-self: center;
 }
 
-.main hgroup img {
+.header hgroup img {
   max-width: 30vw;
   height: auto;
 }
 
-.main hgroup h1 {
+.header hgroup h1 {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   font-size: min(5em, 15vw);
 }
 
-.main hgroup h1 > span {
+.header hgroup h1 > span {
   background: var(--nitrogql-gradient);
   color: transparent;
   background-clip: text;
   -webkit-background-clip: text;
 }
 
-.main hgroup > p:last-of-type {
+.header hgroup > p:last-of-type {
   font-size: 1.5em;
   font-weight: bold;
 }
 
-.main main > p {
+main.main > p {
   font-size: 1.2em;
 }