User guide (2/2): documentation content

packages/web/custom.d.ts

@@ -10,6 +10,11 @@ declare module "*.png" {
     export default src;
 }
 
+declare module "*.jpg" {
+    const src: string;
+    export default src;
+}
+
 declare module "*.css" {
     const classes: { [key: string]: string };
     export default classes;

packages/web/src/components/UserGuide/content/index.ts

@@ -1,9 +1,36 @@
+// Content is split into per-section files to keep each file focused and reviewable.
+// To add a new page: add its entry to the relevant section file.
+
 export type { NavigationGroup, Page } from "./types";
 
+import { ABOUT_CONTENT } from "./about";
+import { APP_INFORMATION_CONTENT } from "./app-information";
+import { GETTING_STARTED_CONTENT } from "./getting-started";
 import { OTHER_RESOURCES_CONTENT } from "./other-resources";
+import { REAL_WORLD_USE_CASES_CONTENT } from "./real-world-use-cases";
 import { GroupSlug, NavigationGroup } from "./types";
 
 export const CONTENT: NavigationGroup[] = [
+    {
+        slug: GroupSlug.About,
+        title: "About",
+        pages: ABOUT_CONTENT,
+    },
+    {
+        slug: GroupSlug.RealWorldUseCases,
+        title: "Real world use",
+        pages: REAL_WORLD_USE_CASES_CONTENT,
+    },
+    {
+        slug: GroupSlug.AppInformation,
+        title: "App information",
+        pages: APP_INFORMATION_CONTENT,
+    },
+    {
+        slug: GroupSlug.GettingStarted,
+        title: "Getting started",
+        pages: GETTING_STARTED_CONTENT,
+    },
     {
         slug: GroupSlug.OtherResources,
         title: "Other resources",

packages/web/webpack/webpack.config.js

@@ -87,7 +87,7 @@ module.exports = ({ analyze, production } = {}) => ({
                 ],
             },
             {
-                test: /\.png/,
+                test: /\.(png|jpe?g)/,
                 type: "asset/resource",
             },
         ],