diff --git a/docs/tutorials/index.mdx b/docs/tutorials/index.mdx index c393f312..52b80919 100644 --- a/docs/tutorials/index.mdx +++ b/docs/tutorials/index.mdx @@ -4,6 +4,7 @@ copyright: This file is part of midnight-docs. Copyright (C) Midnight Foundation title: Tutorials description: Step-by-step tutorials for building DApps on Midnight Network, from your first Compact contract to a full-stack deployment with wallet integration. sidebar_position: 4 +hide_table_of_contents: true tags: - tutorials - dapps @@ -13,6 +14,8 @@ tags: --- import PersonaTiles from '@site/src/components/PersonaTiles'; +import CoverageMatrix from '@site/src/components/CoverageMatrix'; +import { columns as tutorialColumns, features as tutorialFeatures } from '@site/src/components/CoverageMatrix/tutorialsData'; # Tutorials @@ -50,3 +53,30 @@ Step-by-step tutorials for building DApps on Midnight Network. Start with the en cta: "Build ZK Loan", }, ]} /> + +## What each tutorial covers + +Each tutorial teaches a different slice of the Midnight stack. Pick a feature or +pattern from the dropdown to see which tutorials teach it, or expand a section +to compare tutorials row by row. A filled dot means the tutorial teaches the +feature in depth, an outlined dot means the feature appears only briefly, and an +empty cell means the tutorial does not cover it. Every dot links to the section +of the tutorial where the feature is covered. + + + +:::note + +This matrix covers the written tutorials. Coverage data lives in +`src/components/CoverageMatrix/tutorialsData.jsx`. When a tutorial is added or +substantially updated, update the matrix there too. + +::: diff --git a/src/components/CoverageMatrix/index.jsx b/src/components/CoverageMatrix/index.jsx index 7be6adfd..832e01fd 100644 --- a/src/components/CoverageMatrix/index.jsx +++ b/src/components/CoverageMatrix/index.jsx @@ -1,24 +1,43 @@ import React, { useMemo, useState } from "react"; import Link from "@docusaurus/Link"; -import { columns as allColumns, features as allFeatures } from "./data"; +import { columns as exampleColumns, features as exampleFeatures } from "./data"; import styles from "./styles.module.css"; -const GROUPS = ["All", "DApps", "Contracts"]; +const DEFAULT_GROUPS = ["All", "DApps", "Contracts"]; -const MARKS = { - x: { cls: "markFull", label: "Demonstrated" }, - "?": { cls: "markPartial", label: "Partial or in progress" } -}; +// A coverage cell is either a plain "x" / "?" string, or an object +// { level: "x" | "?", href: "/path#anchor" } that also deep-links to the place +// in the docs where the feature is covered. +function cellOf(feature, columnId) { + const entry = feature.coverage[columnId]; + if (!entry) return null; + return typeof entry === "string" ? { level: entry } : entry; +} -function CoverageMark({ value }) { - const mark = MARKS[value] || { cls: "markNone", label: "Not covered" }; +function CoverageMark({ cell, featureName, columnName, fullLabel, partialLabel }) { + const mark = + cell?.level === "x" + ? { cls: "markFull", label: fullLabel } + : cell?.level === "?" + ? { cls: "markPartial", label: partialLabel } + : { cls: "markNone", label: "Not covered" }; + const dot =