Allow using 'environment' variables in mdx

Author: janezd

api/book.ts

@@ -105,6 +105,7 @@ export const getBook = async (id: number): Promise<BookProps> => {
       title: book.title, subTitle: book.subtitle,
       requireLogin: book.requireLogin === 1, quizThreshold: book.quizThreshold,
       unlockChaptersOnAnswers: UnlockChaptersOnAnswersOptions[book.unlockChaptersOnAnswers],
+      env: JSON.parse(book.env || "{}") as Record<string, any>,
       public: book.public === 1, coverImg: book.coverImg,
       groups,
       tocInHeader: book.tocInHeader === 1, language: book.language,

components/Book/Book.tsx

@@ -25,11 +25,12 @@ import { usePublicProvider } from "@/hooks/usePublicProvider";
 import { ChapterDef, LinkDesc, UnlockChaptersOnAnswersType } from "@/types";
 
 
-const Chapters = ({chapters: allChapters, bookId, chapterNumbers, unlockChaptersOnAnswers, setIsChapterIndexVisible, allAnswers}:
+const Chapters = ({chapters: allChapters, bookId, chapterNumbers, unlockChaptersOnAnswers, env, setIsChapterIndexVisible, allAnswers}:
   {chapters: ChapterDef[],
     bookId: number,
     chapterNumbers: Record<number, number>,
     unlockChaptersOnAnswers: UnlockChaptersOnAnswersType,
+    env: Record<string, any>,
     setIsChapterIndexVisible: React.Dispatch<React.SetStateAction<Record<number, boolean>>>,
     allAnswers?: AnswersInBook}
 ) => {
@@ -55,6 +56,7 @@ const Chapters = ({chapters: allChapters, bookId, chapterNumbers, unlockChapters
         index={index}
         setIsChapterIndexVisible={setIsChapterIndexVisible}
         chapterNumber={chapterNumbers[index]}
+        env={env}
         allAnswers={allAnswers}
       />
     ))}
@@ -307,7 +309,7 @@ export const Book = (
             <h1 className="mb-0 font-medium">{frontmatter.title}</h1>
             <p className="subtitle">{frontmatter.subTitle}</p>
 
-            <MdxContent content={content} bookId={bookId} t={t}/>
+            <MdxContent content={content} bookId={bookId} t={t} env={frontmatter.env}/>
 
             {!frontmatter.tocInHeader && chapters.length > 1 &&
               <ContentIndexControl
@@ -321,6 +323,7 @@ export const Book = (
               bookId={bookId}
               chapterNumbers={chapterNumbers}
               unlockChaptersOnAnswers={frontmatter.unlockChaptersOnAnswers}
+              env={frontmatter.env}
               setIsChapterIndexVisible={setIsChapterIndexVisible}
               allAnswers={showAnswers && allAnswers || undefined}
               />

components/Book/Chapter.tsx

@@ -17,6 +17,7 @@ export const Chapter = ({
   index,
   setIsChapterIndexVisible,
   chapterNumber,
+  env,
   bookId,
   chapterId,
   allAnswers,
@@ -26,6 +27,7 @@ export const Chapter = ({
     React.SetStateAction<{ [key: number]: boolean }>
   >;
   chapterNumber: number;
+  env: Record<string, any>
   bookId: number;
   allAnswers?: AnswersInBook;
 }) => {
@@ -44,6 +46,7 @@ export const Chapter = ({
         bookId={bookId}
         chapterId={chapterId}
         t = {t}
+        env={env}
         allAnswers={allAnswers}
       />
     );

components/MdxContent.tsx

@@ -24,11 +24,12 @@ export interface QuestionProps extends QuizPropsBase {
   attempts?: number;
 }
 
-export const MdxContent = ({content, chapterId, bookId, t, allAnswers}: {
+export const MdxContent = ({content, chapterId, bookId, t, env, allAnswers}: {
   content: string;
   bookId?: number;
   chapterId?: number;
   t: (key: string) => string;
+  env?: Record<string, any>;
   allAnswers?: AnswersInBook;
 }) => {
   if  (!content) {
@@ -167,13 +168,17 @@ export const MdxContent = ({content, chapterId, bookId, t, allAnswers}: {
       }, [children]),
   }
 
-  const fn = new Function('mdx', content);
+  const fn = new Function('mdx', 'env',
+    (env ? `const { ${Object.keys(env).join(', ')} } = env;\n`: "")
+    + content
+  );
   const { default: Content } = fn({
     jsxs: runtime.jsxs,
     jsx: runtime.jsx,
     Fragment: runtime.Fragment,
     useMDXComponents: () => components,
-  });
+  },
+  env ?? {});
   return (
     <MDXProvider>
       <Content components={components}/>

ingest/book.ts

@@ -24,6 +24,7 @@ const bookFrontmatterDefaults: RawBookFrontmatter = {
   requireLogin: false,
   quizThreshold: 0,
   unlockChaptersOnAnswers: UnlockChaptersOnAnswersOptions[0],
+  env: {},
 } satisfies RawBookFrontmatter & Record<string, unknown>;
 
 const extraBookMatter = {
@@ -49,6 +50,8 @@ export const bookMatter = (indexMd: string, slug: string, defaults: Partial<RawB
       admins: isListOfStrings,
       unlockChaptersOnAnswers: (value) => !["none", "attempt", "correct"].includes(value)
         && `'unlockChaptersOnAnswers' must be one of 'none', 'attempt', or 'correct'`,
+      env: (value) => typeof(value) !== "object"
+        && "'env' must be a mapping"
     }
   );
 

ingest/updatePaths.ts

@@ -394,7 +394,7 @@ const insertBook = async (
     mdxContent, chapters, slug,
     frontmatter: {
       title, subTitle, public: isPublic, language, tocInHeader,
-      coverImg, requireLogin, quizThreshold, unlockChaptersOnAnswers, groups, tokens
+      coverImg, requireLogin, quizThreshold, unlockChaptersOnAnswers, env, groups, tokens
     }
   } = book;
   const content = await serializedContent(mdxContent, language, slug);
@@ -404,9 +404,9 @@ const insertBook = async (
         INSERT INTO books (lastBuildId,
                            path, title, subtitle,
                            public, language, tocInHeader,
-                           coverImg, requireLogin, quizThreshold, unlockChaptersOnAnswers,
+                           coverImg, requireLogin, quizThreshold, unlockChaptersOnAnswers, env,
                            content)
-        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
         ON CONFLICT DO UPDATE SET lastBuildId          = excluded.lastBuildId,
                                   title                = excluded.title,
                                   subtitle             = excluded.subtitle,
@@ -417,6 +417,7 @@ const insertBook = async (
                                   requireLogin         = excluded.requireLogin,
                                   quizThreshold        = excluded.quizThreshold,
                                   unlockChaptersOnAnswers = excluded.unlockChaptersOnAnswers,
+                                  env                  = excluded.env,
                                   content              = excluded.content
         RETURNING id
     `,
@@ -426,6 +427,7 @@ const insertBook = async (
       isPublic, language, tocInHeader,
       coverImg, requireLogin, quizThreshold,
       UnlockChaptersOnAnswersOptions.indexOf(unlockChaptersOnAnswers),
+      JSON.stringify(env ?? {}),
       content
     ]
   );

types/index.ts

@@ -47,6 +47,7 @@ export interface BookFrontmatterBase {
   requireLogin: boolean;
   quizThreshold?: number;
   unlockChaptersOnAnswers: UnlockChaptersOnAnswersType;
+  env: Record<string, string>;
   chapters?: string[];
 }
 

utils/db-migrations/002-add-env-to-books.sql

@@ -0,0 +1,2 @@
+ALTER TABLE books
+  ADD env TEXT;