Label nested workflows and add in-recipe jump links
This commit is contained in:
pat
@@ -2,6 +2,16 @@ import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import TermOutput from "./TermOutput";
|
||||
|
||||
const JUMP = [
|
||||
{ id: "problem", label: "Problem" },
|
||||
{ id: "actors", label: "Actors" },
|
||||
{ id: "setup", label: "Setup" },
|
||||
{ id: "safeguards", label: "Safeguards" },
|
||||
{ id: "method", label: "Method" },
|
||||
{ id: "evidence", label: "Evidence" },
|
||||
{ id: "tryit", label: "Try-it" },
|
||||
];
|
||||
|
||||
function ShieldCheck() {
|
||||
return (
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
||||
@@ -59,13 +69,25 @@ async function copyText(text) {
|
||||
}
|
||||
}
|
||||
|
||||
function Field({ anchor, name, label, children }) {
|
||||
return (
|
||||
<div className="row" id={`${anchor}-${name}`}>
|
||||
<h4 className="k">{label}</h4>
|
||||
<div className="v">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function WorkflowBlock({
|
||||
recipe,
|
||||
complete = false,
|
||||
onToggleComplete,
|
||||
focused = false,
|
||||
index = 1,
|
||||
total = 1,
|
||||
}) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const a = recipe.anchor;
|
||||
|
||||
const onShare = async () => {
|
||||
const ok = await copyText(recipe.shareBlurb);
|
||||
@@ -76,140 +98,120 @@ export default function WorkflowBlock({
|
||||
|
||||
return (
|
||||
<article
|
||||
id={recipe.anchor}
|
||||
id={a}
|
||||
className={`recipe recipe-nested${focused ? " recipe-focus" : ""}`}
|
||||
aria-labelledby={`${recipe.anchor}-title`}
|
||||
aria-labelledby={`${a}-title`}
|
||||
>
|
||||
<div className="recipe-top">
|
||||
<span className="recipe-id">
|
||||
recipe <b>{recipe.id}</b> · v{recipe.version} · {recipe.time} · {recipe.cost}
|
||||
Workflow {index} of {total} · <b>{recipe.id}</b> · v{recipe.version} · {recipe.time} · {recipe.cost}
|
||||
</span>
|
||||
<span className="recipe-vert">{recipe.vertical}</span>
|
||||
</div>
|
||||
|
||||
<div className="recipe-body">
|
||||
<h3 className="recipe-title" id={`${recipe.anchor}-title`}>
|
||||
<h3 className="recipe-title" id={`${a}-title`}>
|
||||
{recipe.title}
|
||||
</h3>
|
||||
|
||||
<div className="row">
|
||||
<div className="k">Problem</div>
|
||||
<div className="v">
|
||||
{recipe.problem}{" "}
|
||||
<span className="sub">{recipe.problemJob}</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="recipe-jump" aria-label="In this workflow">
|
||||
{JUMP.map((j) => (
|
||||
<a key={j.id} href={`#${a}-${j.id}`}>
|
||||
{j.label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="row">
|
||||
<div className="k">Actors</div>
|
||||
<div className="v">
|
||||
<ul className="plain-list">
|
||||
{recipe.actors.map((line) => (
|
||||
<li key={line}>{line}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<Field anchor={a} name="problem" label="Problem">
|
||||
{recipe.problem} <span className="sub">{recipe.problemJob}</span>
|
||||
</Field>
|
||||
|
||||
<div className="row">
|
||||
<div className="k">Setup</div>
|
||||
<div className="v">
|
||||
<ul className="plain-list">
|
||||
{recipe.setup.map((line) => (
|
||||
<li key={line}>{line}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="k">Safeguards</div>
|
||||
<div className="v">
|
||||
{recipe.safeguards.map((line) => (
|
||||
<div className="guard" key={line}>
|
||||
<ShieldCheck />
|
||||
<span>{line}</span>
|
||||
</div>
|
||||
<Field anchor={a} name="actors" label="Actors">
|
||||
<ul className="plain-list">
|
||||
{recipe.actors.map((line) => (
|
||||
<li key={line}>{line}</li>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</Field>
|
||||
|
||||
<div className="row">
|
||||
<div className="k">Method</div>
|
||||
<div className="v">
|
||||
<ol className="steps">
|
||||
{recipe.method.map((step, i) => (
|
||||
<li key={i}>
|
||||
<div className="step-copy">
|
||||
{step.text}
|
||||
{step.term ? <TermOutput id={step.term} /> : null}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="k">Evidence</div>
|
||||
<div className="v">
|
||||
{recipe.evidence.map((line) => (
|
||||
<p key={line} className="evidence-p">
|
||||
{line}
|
||||
</p>
|
||||
<Field anchor={a} name="setup" label="Setup">
|
||||
<ul className="plain-list">
|
||||
{recipe.setup.map((line) => (
|
||||
<li key={line}>{line}</li>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</Field>
|
||||
|
||||
<div className="row">
|
||||
<div className="k">Try it</div>
|
||||
<div className="v">
|
||||
<p>
|
||||
About {recipe.tryit.minutes} minutes. {recipe.tryit.sample}{" "}
|
||||
{recipe.tryit.produce}
|
||||
</p>
|
||||
<p className="sub-line">
|
||||
{recipe.tryit.done}{" "}
|
||||
<a className="inline-sample" href={recipe.tryit.href} download>
|
||||
{recipe.tryit.hrefLabel}
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<span className="chip">◷ {recipe.tryit.chip}</span>
|
||||
</p>
|
||||
{onToggleComplete ? (
|
||||
<div className="tryit-actions">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn ${complete ? "btn-primary tryit-done" : "btn-ghost"}`}
|
||||
aria-pressed={complete}
|
||||
onClick={() => onToggleComplete(recipe.id)}
|
||||
>
|
||||
{complete ? <CheckMark /> : null}
|
||||
{complete ? "Counted as activation (demo)" : "Mark complete"}
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<Field anchor={a} name="safeguards" label="Safeguards">
|
||||
{recipe.safeguards.map((line) => (
|
||||
<div className="guard" key={line}>
|
||||
<ShieldCheck />
|
||||
<span>{line}</span>
|
||||
</div>
|
||||
))}
|
||||
</Field>
|
||||
|
||||
<div className="row">
|
||||
<div className="k">Share</div>
|
||||
<div className="v">
|
||||
<p>
|
||||
Copy a short result line. Share the outcome, not the recipe text.
|
||||
<Field anchor={a} name="method" label="Method">
|
||||
<ol className="steps">
|
||||
{recipe.method.map((step, i) => (
|
||||
<li key={i}>
|
||||
<div className="step-copy">
|
||||
{step.text}
|
||||
{step.term ? <TermOutput id={step.term} /> : null}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</Field>
|
||||
|
||||
<Field anchor={a} name="evidence" label="Evidence">
|
||||
{recipe.evidence.map((line) => (
|
||||
<p key={line} className="evidence-p">
|
||||
{line}
|
||||
</p>
|
||||
))}
|
||||
</Field>
|
||||
|
||||
<Field anchor={a} name="tryit" label="Try-it">
|
||||
<p>
|
||||
About {recipe.tryit.minutes} minutes. {recipe.tryit.sample}{" "}
|
||||
{recipe.tryit.produce}
|
||||
</p>
|
||||
<p className="sub-line">
|
||||
{recipe.tryit.done}{" "}
|
||||
<a className="inline-sample" href={recipe.tryit.href} download>
|
||||
{recipe.tryit.hrefLabel}
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<span className="chip">◷ {recipe.tryit.chip}</span>
|
||||
</p>
|
||||
{onToggleComplete ? (
|
||||
<div className="tryit-actions">
|
||||
<button type="button" className="btn btn-ghost" onClick={onShare}>
|
||||
{copied ? "Copied" : "Copy result line"}
|
||||
<button
|
||||
type="button"
|
||||
className={`btn ${complete ? "btn-primary tryit-done" : "btn-ghost"}`}
|
||||
aria-pressed={complete}
|
||||
onClick={() => onToggleComplete(recipe.id)}
|
||||
>
|
||||
{complete ? <CheckMark /> : null}
|
||||
{complete ? "Counted as activation (demo)" : "Mark complete"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</Field>
|
||||
|
||||
<div className="row">
|
||||
<div className="k">Record</div>
|
||||
<div className="v recipe-record">
|
||||
<Field anchor={a} name="share" label="Share">
|
||||
<p>Copy a short result line. Share the outcome, not the recipe text.</p>
|
||||
<div className="tryit-actions">
|
||||
<button type="button" className="btn btn-ghost" onClick={onShare}>
|
||||
{copied ? "Copied" : "Copy result line"}
|
||||
</button>
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
<Field anchor={a} name="record" label="Record">
|
||||
<div className="recipe-record">
|
||||
<span>Author: {recipe.author}</span>
|
||||
<span>Sources: {recipe.sources}</span>
|
||||
<span>Last updated: {recipe.lastUpdated}</span>
|
||||
@@ -225,7 +227,7 @@ export default function WorkflowBlock({
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Field>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user