Tutorials
All Tutorials
- {Object.entries(tutorialFiles).map(([path, raw]) => {
- const { frontmatter } = parseFrontmatter(raw as string);
- const slug = pathToFilename(path);
- if (frontmatter.isPublished === "false") return null;
+ {getTutorialItems().map((item) => {
+ if (!item.isPublished) return null;
return (
- {frontmatter.title || slug}
+ {item.title}
);
})}
@@ -126,17 +118,14 @@ export default function Example() {
All FAQs
- {Object.entries(faqFiles).map(([path, raw]) => {
- const { frontmatter } = parseFrontmatter(raw as string);
- const slug = pathToFilename(path);
- if (frontmatter.isPublished === "false") return null;
- const title = (frontmatter.title || slug) as string;
+ {getFaqItems().map((item) => {
+ if (!item.isPublished) return null;
const truncated =
- title.length > 36 ? title.slice(0, 33) + "…" : title;
+ item.title.length > 36 ? item.title.slice(0, 33) + "…" : item.title;
return (
{truncated}
diff --git a/frontend/apps/artcraft-website/src/components/navbar/navbar.tsx b/frontend/apps/artcraft-website/src/components/navbar/navbar.tsx
index 9210e619c6..fe3f96da33 100644
--- a/frontend/apps/artcraft-website/src/components/navbar/navbar.tsx
+++ b/frontend/apps/artcraft-website/src/components/navbar/navbar.tsx
@@ -7,6 +7,7 @@ import { DiscordButton } from "../discord-button";
const NAV_ITEMS = [
{ name: "Home", href: "/" },
{ name: "Tutorials", href: "/tutorials" },
+ { name: "News", href: "/news" },
{ name: "FAQ", href: "/faq" },
];
diff --git a/frontend/apps/artcraft-website/src/pages/faq/article.tsx b/frontend/apps/artcraft-website/src/pages/faq/article.tsx
index fe91c9d99c..5676d65ffe 100644
--- a/frontend/apps/artcraft-website/src/pages/faq/article.tsx
+++ b/frontend/apps/artcraft-website/src/pages/faq/article.tsx
@@ -1,42 +1,19 @@
-import { useMemo } from "react";
import { Link, useParams } from "react-router-dom";
import Seo from "../../components/seo";
-import { parseFrontmatter, markdownToHtml } from "../../utils/markdown";
+import { getFaqItemBySlug, markdownToHtml } from "@storyteller/markdown-content";
import { faChevronLeft } from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-const markdownFiles = import.meta.glob("./content/*.md", {
- query: "?raw",
- import: "default",
- eager: true,
-});
+import { useMemo } from "react";
const FaqArticle = () => {
const { slug } = useParams();
- const entries = Object.entries(markdownFiles);
- const markdown = (() => {
- const byFilename = entries.find(([path]) =>
- path.endsWith(`/content/${slug}.md`)
- );
- if (byFilename) return byFilename[1] as string;
- for (const [_, raw] of entries) {
- const { frontmatter } = parseFrontmatter(raw as string);
- if (
- frontmatter.slug &&
- frontmatter.slug.trim().toLowerCase() === (slug || "").toLowerCase()
- ) {
- return raw as string;
- }
- }
- return null;
- })();
- const { frontmatter, body } = useMemo(
- () =>
- markdown ? parseFrontmatter(markdown) : { frontmatter: {}, body: "" },
- [markdown]
- );
+ const item = slug ? getFaqItemBySlug(slug) : null;
- if (!markdown) {
+ const html = useMemo(() =>
+ item ? markdownToHtml(item.body, "/faq/") : ""
+ , [item]);
+
+ if (!item) {
return (
@@ -47,16 +24,16 @@ const FaqArticle = () => {
);
}
- const title = `${frontmatter.title || slug} - ArtCraft`;
- const description = frontmatter.abstract || "";
- const thumbnail = frontmatter.thumbnail || "";
- const html = markdownToHtml(body, "/faq/");
+ const title = `${item.title} - ArtCraft`;
+ const description = item.description || "";
+ const thumbnail = item.thumbnail || "";
+
const jsonLd = {
"@context": "https://schema.org",
"@type": "Article",
- headline: frontmatter.title || slug,
+ headline: item.title,
description: description,
- articleBody: body,
+ articleBody: item.body,
};
return (
@@ -79,7 +56,7 @@ const FaqArticle = () => {
- {frontmatter.title || slug} + {item.title || slug}
{description &&{description}
} @@ -87,7 +64,7 @@ const FaqArticle = () => {{item.title}
+
+ {item.title}
+
{item.description}
))} diff --git a/frontend/apps/artcraft-website/src/pages/index.ts b/frontend/apps/artcraft-website/src/pages/index.ts index 29627e4d79..5985fc1f24 100644 --- a/frontend/apps/artcraft-website/src/pages/index.ts +++ b/frontend/apps/artcraft-website/src/pages/index.ts @@ -2,6 +2,6 @@ export * from "./landing"; export * from "./landing2"; export * from "./download"; export * from "./tutorials"; -export { default as TutorialsIndex } from "./tutorials/md-index"; +export { default as TutorialsIndex } from "./tutorials/tutorials"; export { default as TutorialsArticle } from "./tutorials/article"; export * from "./faq"; diff --git a/frontend/apps/artcraft-website/src/pages/tutorials/article.tsx b/frontend/apps/artcraft-website/src/pages/tutorials/article.tsx index 200a30c2d7..59b83ba733 100644 --- a/frontend/apps/artcraft-website/src/pages/tutorials/article.tsx +++ b/frontend/apps/artcraft-website/src/pages/tutorials/article.tsx @@ -1,50 +1,20 @@ import { useMemo } from "react"; import { Link, useParams } from "react-router-dom"; import Seo from "../../components/seo"; -import { parseFrontmatter, markdownToHtml } from "../../utils/markdown"; +import { getTutorialItemBySlug, markdownToHtml } from "@storyteller/markdown-content"; import { faChevronLeft } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -const tutorialFiles = import.meta.glob("./content/*.md", { - query: "?raw", - import: "default", - eager: true, -}); - const TutorialsArticle = () => { const { slug } = useParams(); - const entries = Object.entries(tutorialFiles); - const markdown = (() => { - // 1) filename match - const byFilename = entries.find(([path]) => - path.endsWith(`/content/${slug}.md`) - ); - if (byFilename) return byFilename[1] as string; - // 2) frontmatter slug match - const wanted = (slug || "").toLowerCase(); - for (const [_, raw] of entries) { - const { frontmatter } = parseFrontmatter(raw as string); - const fmSlug = (frontmatter.slug || "").trim().toLowerCase(); - if (fmSlug && fmSlug === wanted) return raw as string; - const aliasesRaw = (frontmatter.aliases || "").toString(); - if (aliasesRaw) { - const candidateList = aliasesRaw - .split(/[\s,]+/) - .map((s) => s.trim().toLowerCase()) - .filter(Boolean); - if (candidateList.includes(wanted)) return raw as string; - } - } - return null; - })(); - const { frontmatter, body } = useMemo( - () => - markdown ? parseFrontmatter(markdown) : { frontmatter: {}, body: "" }, - [markdown] - ); + const item = slug ? getTutorialItemBySlug(slug) : null; - if (!markdown) { + const html = useMemo(() => + item ? markdownToHtml(item.body) : "" + , [item]); + + if (!item) { return (
@@ -55,8 +25,8 @@ const TutorialsArticle = () => {
);
}
- const title = `${frontmatter.title || slug} - ArtCraft`;
- const description = frontmatter.abstract || "";
+ const title = `${item.title} - ArtCraft`;
+ const description = item.abstract || "";
const toEmbed = (url: string): string => {
if (!url) return url;
if (url.includes("youtu.be/"))
@@ -65,18 +35,17 @@ const TutorialsArticle = () => {
return url;
};
const frontmatterVideo =
- (frontmatter.videoUrl as string) ||
- (frontmatter.youtubeId
- ? `https://www.youtube.com/embed/${frontmatter.youtubeId}`
+ (item.videoUrl as string) ||
+ (item.youtubeId
+ ? `https://www.youtube.com/embed/${item.youtubeId}`
: "");
const videoUrl = toEmbed(frontmatterVideo);
- const html = markdownToHtml(body);
const jsonLd = {
"@context": "https://schema.org",
"@type": "Article",
- headline: frontmatter.title || slug,
+ headline: item.title,
description: description,
- articleBody: body,
+ articleBody: item.body,
};
return (
@@ -99,14 +68,14 @@ const TutorialsArticle = () => {
- {frontmatter.title || slug} + {item.title || slug}
{description &&{description}
} {videoUrl && (