@carlonicora/nextjs-jsonapi 1.109.0 → 1.111.0

package/src/features/help/components/__tests__/HelpHint.spec.tsx

@@ -1,50 +1,50 @@
-import { describe, it, expect, beforeEach } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
 import { configureJsonApi } from "../../../../client/config";
 import { HelpProvider } from "../../contexts/HelpContext";
 import { HelpHint } from "../HelpHint";
+import { HowToService } from "../../../how-to/data/HowToService";
+
+vi.mock("../../../how-to/data/HowToService", () => ({
+  HowToService: { findPublished: vi.fn() },
+}));
 
 const article = {
   id: "1",
   slug: "x",
-  mode: "how-to",
-  title: "X",
+  howToType: "how-to",
+  name: "X",
   summary: "S",
-  order: 1,
-  tags: [],
   contextualKeys: ["npc.editor"],
-  aiIndexed: true,
   draft: false,
-  contentHash: "h",
-  path: "how-to/x.mdx",
-  headings: [],
-  relatedSlugs: [],
-  lastUpdated: "2026-01-01T00:00:00Z",
-};
+} as any;
 
 beforeEach(() => {
+  vi.clearAllMocks();
+  vi.mocked(HowToService.findPublished).mockResolvedValue([article]);
   configureJsonApi({
     apiUrl: "http://localhost",
-    helpContent: { manifest: [article], namespaceUuid: "00000000-0000-5000-8000-000000000000" },
+    helpContent: { brand: { label: "narr8" } },
   });
 });
 
 describe("HelpHint", () => {
-  it("renders null when no article matches the contextKey", () => {
+  it("renders null when no published article matches the contextKey", async () => {
     const { container } = render(
       <HelpProvider>
         <HelpHint contextKey="nope.absent" />
       </HelpProvider>,
     );
+    await waitFor(() => expect(HowToService.findPublished).toHaveBeenCalled());
     expect(container.querySelector("button")).toBeNull();
   });
 
-  it("renders the trigger when at least one article matches", () => {
+  it("renders the trigger when at least one published article matches", async () => {
     render(
       <HelpProvider>
         <HelpHint contextKey="npc.editor" />
       </HelpProvider>,
     );
-    expect(screen.getByLabelText(/help on this|hint/i)).toBeTruthy();
+    expect(await screen.findByLabelText(/help on this|hint/i)).toBeTruthy();
   });
 });

package/src/features/help/components/__tests__/HelpSearchResultRow.spec.tsx

@@ -1,37 +1,34 @@
-import { describe, it, expect, beforeEach } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
 import { Command, CommandList } from "../../../../shadcnui";
 import { configureJsonApi } from "../../../../client/config";
 import { HelpProvider } from "../../contexts/HelpContext";
 import { HelpSearchResultRow } from "../HelpSearchResultRow";
+import { HowToService } from "../../../how-to/data/HowToService";
+
+vi.mock("../../../how-to/data/HowToService", () => ({
+  HowToService: { findOne: vi.fn() },
+}));
 
 const article = {
   id: "abc",
   slug: "x",
-  mode: "how-to" as const,
-  title: "X title",
+  howToType: "how-to",
+  name: "X title",
   summary: "S",
-  order: 1,
-  tags: [],
-  contextualKeys: [],
-  aiIndexed: true,
-  draft: false,
-  contentHash: "h",
-  path: "how-to/x.mdx",
-  headings: [],
-  relatedSlugs: [],
-  lastUpdated: "2026-01-01T00:00:00Z",
-};
+} as any;
 
 beforeEach(() => {
+  vi.clearAllMocks();
   configureJsonApi({
     apiUrl: "http://localhost",
-    helpContent: { manifest: [article], namespaceUuid: "00000000-0000-5000-8000-000000000000" },
+    helpContent: { brand: { label: "narr8" } },
   });
 });
 
 describe("HelpSearchResultRow", () => {
-  it("renders the article title when manifest contains the id", () => {
+  it("renders the article title when the service returns the how-to", async () => {
+    vi.mocked(HowToService.findOne).mockResolvedValue(article);
     render(
       <HelpProvider>
         <Command>
@@ -41,10 +38,11 @@ describe("HelpSearchResultRow", () => {
         </Command>
       </HelpProvider>,
     );
-    expect(screen.getByText("X title")).toBeTruthy();
+    expect(await screen.findByText("X title")).toBeTruthy();
   });
 
-  it("renders disabled removed-state row when id is missing", () => {
+  it("renders disabled removed-state row when the service has no how-to", async () => {
+    vi.mocked(HowToService.findOne).mockRejectedValue(new Error("not found"));
     render(
       <HelpProvider>
         <Command>
@@ -54,6 +52,7 @@ describe("HelpSearchResultRow", () => {
         </Command>
       </HelpProvider>,
     );
+    await waitFor(() => expect(HowToService.findOne).toHaveBeenCalledWith({ id: "ghost" }));
     expect(screen.queryByText("X title")).toBeNull();
   });
 });

package/src/features/help/components/__tests__/HelpSideNav.spec.tsx

@@ -1,50 +1,48 @@
-import { describe, it, expect, beforeEach } from "vitest";
+import { describe, it, expect, beforeEach, vi } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
 import { configureJsonApi } from "../../../../client/config";
 import { HelpProvider } from "../../contexts/HelpContext";
 import { HelpSideNav } from "../HelpSideNav";
 
-const base = {
-  tags: [],
-  contextualKeys: [],
-  aiIndexed: true,
-  draft: false,
-  contentHash: "h",
-  headings: [],
-  relatedSlugs: [],
-  lastUpdated: "2026-01-01T00:00:00Z",
-};
+// HelpSideNav now sources its list from the public API via
+// HowToService.findPublished() (Plan 3b) instead of the help manifest, so the
+// test mocks the service rather than seeding the manifest.
+vi.mock("../../../how-to/data/HowToService", () => ({
+  HowToService: { findPublished: vi.fn() },
+}));
+import { HowToService } from "../../../how-to/data/HowToService";
+
+const published = [
+  { id: "a", name: "Alpha", summary: "s", tags: [], howToType: "how-to", slug: "a", order: 1, draft: false },
+  { id: "b", name: "Beta", summary: "s", tags: [], howToType: "how-to", slug: "b", order: 2, draft: false },
+];
 
 beforeEach(() => {
   configureJsonApi({
     apiUrl: "http://localhost",
-    helpContent: {
-      manifest: [
-        { ...base, id: "a", slug: "a", mode: "how-to", title: "Alpha", summary: "s", order: 1, path: "how-to/a.mdx" },
-        { ...base, id: "b", slug: "b", mode: "how-to", title: "Beta", summary: "s", order: 2, path: "how-to/b.mdx" },
-      ],
-      namespaceUuid: "00000000-0000-5000-8000-000000000000",
-    },
+    helpContent: { brand: { label: "narr8" } },
   });
+  (HowToService.findPublished as ReturnType<typeof vi.fn>).mockResolvedValue(published as any);
 });
 
 describe("HelpSideNav", () => {
-  it("lists every non-draft article", () => {
+  it("lists every non-draft article", async () => {
     render(
       <HelpProvider>
         <HelpSideNav />
       </HelpProvider>,
     );
-    expect(screen.getByText("Alpha")).toBeTruthy();
-    expect(screen.getByText("Beta")).toBeTruthy();
+    expect(await screen.findByText("Alpha")).toBeTruthy();
+    expect(await screen.findByText("Beta")).toBeTruthy();
   });
 
-  it("filters by query", () => {
+  it("filters by query", async () => {
     render(
       <HelpProvider>
         <HelpSideNav />
       </HelpProvider>,
     );
+    await screen.findByText("Alpha");
     fireEvent.change(screen.getByPlaceholderText(/filter/i), { target: { value: "Bet" } });
     expect(screen.queryByText("Alpha")).toBeNull();
     expect(screen.getByText("Beta")).toBeTruthy();

package/src/features/help/contexts/HelpContext.spec.tsx

@@ -6,8 +6,6 @@ import { HelpProvider, useHelp } from "./HelpContext";
 
 describe("HelpProvider / useHelp", () => {
   const cfg = {
-    manifest: [],
-    namespaceUuid: "00000000-0000-5000-8000-000000000000",
     brand: { logo: "/logo.png", label: "Test", appHref: "/" },
   };
 
@@ -18,8 +16,8 @@ describe("HelpProvider / useHelp", () => {
   it("exposes the configured helpContent via useHelp()", () => {
     const wrapper = ({ children }: { children: ReactNode }) => <HelpProvider>{children}</HelpProvider>;
     const { result } = renderHook(() => useHelp(), { wrapper });
-    expect(result.current.manifest).toBe(cfg.manifest);
     expect(result.current.brand?.label).toBe("Test");
+    expect(result.current.brand?.appHref).toBe("/");
   });
 
   it("throws when useHelp() is called outside HelpProvider", () => {

package/src/features/help/index.ts

@@ -2,11 +2,11 @@
 // Consumed via `@carlonicora/nextjs-jsonapi/help`. Tsup adds a top-level
 // "use client" directive to the bundled output via clientEntries.
 //
-// Pair this with `@carlonicora/nextjs-jsonapi/help/server` (server) for the
-// pure server utilities (serializeHelpArticle, generate*StaticParams, etc.).
+// Pair this with `@carlonicora/nextjs-jsonapi/help/server` for the server-safe
+// HELP_MODES constant + article types (imported by server-component pages).
 // Consumers compose page shells themselves: import the client primitives below
 // (HelpProvider, HelpHeader, HelpSideNav, HelpArticleBody, HelpTOC, etc.) and
-// the server utilities from /help/server, then assemble pages in app routes.
+// assemble pages in app routes.
 
 export { HelpProvider, useHelp } from "./contexts/HelpContext";
 export { HelpHeader } from "./components/HelpHeader";
@@ -16,9 +16,6 @@ export { HelpTOC } from "./components/HelpTOC";
 export { HelpHint } from "./components/HelpHint";
 export { HelpAskAi } from "./components/HelpAskAi";
 export { HelpSearchResultRow } from "./components/HelpSearchResultRow";
-export { MDX_COMPONENTS } from "./components/mdx/mdxComponents";
-export { useHelpManifest } from "./hooks/useHelpManifest";
-export { useHelpArticle } from "./hooks/useHelpArticle";
 export { useHelpFilter } from "./hooks/useHelpFilter";
 export { articleUrl, modeUrl } from "./utils/articleUrl";
 export { HELP_I18N_KEYS } from "./i18n-keys";

package/src/features/help/interfaces/help-content-config.interface.ts

@@ -1,5 +1,3 @@
-import type { HelpArticle, HelpRedirect } from "../types/help-article.types";
-
 export interface HelpBrandConfig {
   /** URL of the brand logo image (served by the consuming app). */
   logo?: string;
@@ -10,8 +8,5 @@ export interface HelpBrandConfig {
 }
 
 export interface HelpContentConfig {
-  manifest: readonly HelpArticle[];
-  namespaceUuid: string;
-  redirects?: readonly HelpRedirect[];
   brand?: HelpBrandConfig;
 }

package/src/features/help/server-entry.ts

@@ -1,20 +1,11 @@
-// Server-only public barrel for the help feature.
+// Server-safe public barrel for the help feature.
 // Consumed via `@carlonicora/nextjs-jsonapi/help/server`. Must NOT receive a
-// "use client" directive.
+// "use client" directive — server components (e.g. the /help index + mode pages)
+// import HELP_MODES/HelpMode from here without pulling the client bundle.
 //
-// This barrel exposes only server-safe utilities (no React components). The
-// React Server Component / Client Component boundary is enforced by tsup-level
-// bundle splitting: server containers cannot directly import client components
-// without leaking client-only modules (react-dom/client, hook usage at module
-// init) into server scopes. Consumers therefore compose the page shells in
-// their own route files, importing client primitives from
-// `@carlonicora/nextjs-jsonapi/help` and server utilities from here.
+// Now that help articles are served from the API (HowTo) rather than the MDX
+// manifest, this barrel exposes only the shared mode constant + article types.
+// Client primitives live in `@carlonicora/nextjs-jsonapi/help`.
 
-export { getHelpContent } from "./server/getHelpContent";
-export { renderHelpArticle, serializeHelpArticle } from "./server/serializeHelpArticle";
-export { generateHelpArticleStaticParams, generateHelpArticleMetadata, generateHelpModeStaticParams } from "./server";
-export { findHelpArticle, prevNextWithinMode, buildHelpNav } from "./utils/helpNavigation";
-export { setHelpReader } from "../../core/registry/helpStore";
-export type { HelpContentConfig, HelpBrandConfig } from "./interfaces/help-content-config.interface";
 export { HELP_MODES } from "./types/help-article.types";
 export type { HelpArticle, HelpHeading, HelpMode, HelpRedirect } from "./types/help-article.types";

package/src/features/help/types/help-article.types.ts

@@ -1,7 +1,6 @@
 /**
- * Local copy of the help-article types to keep this published frontend library
- * decoupled from `@carlonicora/nestjs-neo4jsonapi`. Must stay in sync with
- * `packages/nestjs-neo4jsonapi/src/foundations/help-content-sync/interfaces/help-article.interface.ts`.
+ * Help-article types for the frontend help feature. Self-contained — the
+ * published frontend library stays decoupled from `@carlonicora/nestjs-neo4jsonapi`.
  */
 
 export const HELP_MODES = ["tutorial", "how-to", "reference", "explanation"] as const;
@@ -24,7 +23,6 @@ export interface HelpArticle {
   contextualKeys: readonly string[];
   aiIndexed: boolean;
   draft: boolean;
-  contentHash: string;
   path: string;
   headings: readonly HelpHeading[];
   relatedSlugs: readonly string[];

package/src/features/how-to/HowToModule.ts

@@ -12,7 +12,20 @@ export const HowToModule = (factory: ModuleFactory) =>
     icon: LifeBuoyIcon,
     inclusions: {
       lists: {
-        fields: [createJsonApiInclusion("howtos", [`name`, `description`, `pages`, `helpContentSlug`])],
+        fields: [
+          createJsonApiInclusion("howtos", [
+            "name",
+            "description",
+            "pages",
+            "howToType",
+            "slug",
+            "order",
+            "summary",
+            "tags",
+            "contextualKeys",
+            "draft",
+          ]),
+        ],
       },
     },
   });

package/src/features/how-to/components/forms/HowToEditor.tsx

@@ -3,12 +3,12 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PlusIcon, SearchIcon, XIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { ReactNode, useCallback, useMemo, useState } from "react";
+import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { v4 } from "uuid";
 import { z } from "zod";
 
-import { EditorSheet, FormInput } from "../../../../components";
+import { EditorSheet, FormInput, FormSelect, FormTextarea, FormCheckbox } from "../../../../components";
 import { BlockNoteEditorContainer } from "../../../../components";
 import { ModuleRegistry, Modules } from "../../../../core";
 import { useI18nRouter } from "../../../../hooks";
@@ -27,6 +27,9 @@ import {
 import { HowTo } from "../../data/HowTo";
 import { HowToInput, HowToInterface } from "../../data/HowToInterface";
 import { HowToService } from "../../data/HowToService";
+import HowToMultiSelector from "./HowToMultiSelector";
+
+const HOW_TO_TYPES = ["tutorial", "how-to", "reference", "explanation"] as const;
 
 function PageSelector({
   value,
@@ -140,6 +143,14 @@ function HowToEditorInternal({
         name: z.string().min(1, { message: t(`howto.fields.name.error`) }),
         description: z.any(),
         pages: z.array(z.string()),
+        howToType: z.enum(HOW_TO_TYPES),
+        slug: z.string().min(1, { message: t(`howto.fields.slug.error`) }),
+        order: z.number().int().min(0),
+        summary: z.string().optional(),
+        tags: z.string().optional(),
+        contextualKeys: z.string().optional(),
+        draft: z.boolean().optional(),
+        relatedArticles: z.array(z.object({ id: z.string().uuid(), name: z.string() })).optional(),
       }),
     [t],
   );
@@ -150,6 +161,14 @@ function HowToEditorInternal({
       name: howTo?.name || "",
       description: howTo?.description || [],
       pages: HowTo.parsePagesFromString(howTo?.pages),
+      howToType: (howTo?.howToType as (typeof HOW_TO_TYPES)[number]) ?? "how-to",
+      slug: howTo?.slug ?? "",
+      order: howTo?.order ?? 0,
+      summary: howTo?.summary ?? "",
+      tags: (howTo?.tags ?? []).join(", "),
+      contextualKeys: (howTo?.contextualKeys ?? []).join(", "),
+      draft: howTo?.draft ?? false,
+      relatedArticles: [] as { id: string; name: string }[],
     }),
     [howTo],
   );
@@ -159,6 +178,26 @@ function HowToEditorInternal({
     defaultValues: getDefaultValues(),
   });
 
+  const initialRelatedIds = useRef<string[]>([]);
+  useEffect(() => {
+    if (!howTo?.howToType || !howTo?.slug) return;
+    let active = true;
+    HowToService.findRelated({ howToType: howTo.howToType, slug: howTo.slug })
+      .then((list) => {
+        if (!active) return;
+        initialRelatedIds.current = list.map((r) => r.id);
+        form.setValue(
+          "relatedArticles",
+          list.map((r) => ({ id: r.id, name: r.name })),
+          { shouldDirty: false },
+        );
+      })
+      .catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, [howTo, form]);
+
   const handleDescriptionChange = useCallback(
     (content: any) => {
       form.setValue("description", content, { shouldDirty: true });
@@ -191,17 +230,40 @@ function HowToEditorInternal({
       propagateChanges={propagateChanges}
       size="lg"
       onSubmit={async (values) => {
+        const toList = (s?: string) =>
+          (s ?? "")
+            .split(",")
+            .map((x) => x.trim())
+            .filter(Boolean);
+
         const payload: HowToInput = {
           id: values.id,
           name: values.name,
           authorId: "",
           description: values.description,
           pages: HowTo.serializePagesToString(values.pages),
+          howToType: values.howToType,
+          slug: values.slug,
+          order: values.order,
+          summary: values.summary,
+          tags: toList(values.tags),
+          contextualKeys: toList(values.contextualKeys),
+          draft: values.draft ?? false,
         };
 
-        const updatedHowTo = howTo ? await HowToService.update(payload) : await HowToService.create(payload);
+        const saved = howTo ? await HowToService.update(payload) : await HowToService.create(payload);
 
-        return updatedHowTo;
+        const desired = new Set((values.relatedArticles ?? []).map((r) => r.id));
+        const current = new Set(initialRelatedIds.current);
+        for (const relatedId of desired) {
+          if (!current.has(relatedId)) await HowToService.addRelated({ howToId: values.id, relatedId });
+        }
+        for (const relatedId of current) {
+          if (!desired.has(relatedId)) await HowToService.removeRelated({ howToId: values.id, relatedId });
+        }
+        initialRelatedIds.current = Array.from(desired);
+
+        return saved;
       }}
       onReset={() => {
         return getDefaultValues();
@@ -222,6 +284,28 @@ function HowToEditorInternal({
           placeholder={t(`howto.fields.name.placeholder`)}
           isRequired
         />
+        <FormSelect
+          form={form}
+          id="howToType"
+          name={t(`howto.fields.howToType.label`)}
+          placeholder={t(`howto.fields.howToType.placeholder`)}
+          values={HOW_TO_TYPES.map((m) => ({ id: m, text: t(`howto.howToType.${m}` as any) }))}
+          isRequired
+        />
+        <FormInput
+          form={form}
+          id="slug"
+          name={t(`howto.fields.slug.label`)}
+          placeholder={t(`howto.fields.slug.placeholder`)}
+          isRequired
+        />
+        <FormInput form={form} id="order" name={t(`howto.fields.order.label`)} type="number" />
+        <FormTextarea
+          form={form}
+          id="summary"
+          name={t(`howto.fields.summary.label`)}
+          placeholder={t(`howto.fields.summary.placeholder`)}
+        />
         <div className="space-y-2">
           <Label>{t(`howto.fields.description.label`)}</Label>
           <div className="max-h-80 overflow-y-auto rounded-md border">
@@ -260,6 +344,26 @@ function HowToEditorInternal({
             </Button>
           </div>
         </div>
+        <FormInput
+          form={form}
+          id="tags"
+          name={t(`howto.fields.tags.label`)}
+          placeholder={t(`howto.fields.tags.placeholder`)}
+        />
+        <FormInput
+          form={form}
+          id="contextualKeys"
+          name={t(`howto.fields.contextualKeys.label`)}
+          placeholder={t(`howto.fields.contextualKeys.placeholder`)}
+        />
+        <HowToMultiSelector
+          id="relatedArticles"
+          form={form}
+          currentHowTo={howTo}
+          label={t(`howto.fields.relatedArticles.label`)}
+          placeholder={t(`howto.fields.relatedArticles.placeholder`)}
+        />
+        <FormCheckbox form={form} id="draft" name={t(`howto.fields.draft.label`)} />
       </div>
     </EditorSheet>
   );

package/src/features/how-to/data/HowTo.spec.ts

@@ -0,0 +1,43 @@
+import { beforeAll, describe, it, expect } from "vitest";
+import { ApiRequestDataTypeInterface } from "../../../core/interfaces/ApiRequestDataTypeInterface";
+import { ModuleRegistry } from "../../../core/registry/ModuleRegistry";
+import { HowTo } from "./HowTo";
+
+// createJsonApi reads Modules.HowTo.name (resolved lazily via ModuleRegistry),
+// so the module must be registered before the model serialises — mirrors the
+// AssistantMessage.spec setup convention in this package.
+const howToModule: ApiRequestDataTypeInterface = {
+  name: "howtos",
+  model: HowTo,
+} as any;
+
+beforeAll(() => {
+  ModuleRegistry.register("HowTo", howToModule);
+});
+
+describe("HowTo.createJsonApi", () => {
+  it("serialises the new attributes", () => {
+    const res = new HowTo().createJsonApi({
+      id: "11111111-1111-4111-8111-111111111111",
+      name: "Add an NPC",
+      authorId: "",
+      description: [{ type: "paragraph", content: [] }],
+      howToType: "how-to",
+      slug: "add-an-npc",
+      order: 30,
+      summary: "Create a Non-Player Character.",
+      tags: ["world"],
+      contextualKeys: ["npc.editor"],
+      draft: false,
+    });
+    const a = res.data.attributes;
+    expect(a.howToType).toBe("how-to");
+    expect(a.slug).toBe("add-an-npc");
+    expect(a.order).toBe(30);
+    expect(a.summary).toBe("Create a Non-Player Character.");
+    expect(a.tags).toEqual(["world"]);
+    expect(a.contextualKeys).toEqual(["npc.editor"]);
+    expect(a.draft).toBe(false);
+    expect(typeof a.description).toBe("string"); // existing: BlockNote JSON stringified
+  });
+});

package/src/features/how-to/data/HowTo.ts

@@ -5,7 +5,13 @@ import { HowToInput, HowToInterface } from "./HowToInterface";
 export class HowTo extends Content implements HowToInterface {
   private _description?: any;
   private _pages?: string;
-  private _helpContentSlug?: string;
+  private _howToType?: string;
+  private _slug?: string;
+  private _order?: number;
+  private _summary?: string;
+  private _tags?: string[];
+  private _contextualKeys?: string[];
+  private _draft?: boolean;
 
   /**
    * Parse pages from backend JSON string (handles legacy single string + JSON array)
@@ -37,8 +43,32 @@ export class HowTo extends Content implements HowToInterface {
     return this._pages;
   }
 
-  get helpContentSlug(): string | undefined {
-    return this._helpContentSlug;
+  get howToType(): string | undefined {
+    return this._howToType;
+  }
+
+  get slug(): string | undefined {
+    return this._slug;
+  }
+
+  get order(): number | undefined {
+    return this._order;
+  }
+
+  get summary(): string | undefined {
+    return this._summary;
+  }
+
+  get tags(): string[] {
+    return this._tags ?? [];
+  }
+
+  get contextualKeys(): string[] {
+    return this._contextualKeys ?? [];
+  }
+
+  get draft(): boolean {
+    return this._draft ?? false;
   }
 
   rehydrate(data: JsonApiHydratedDataInterface): this {
@@ -60,7 +90,13 @@ export class HowTo extends Content implements HowToInterface {
       this._description = rawDescription;
     }
     this._pages = data.jsonApi.attributes.pages;
-    this._helpContentSlug = data.jsonApi.attributes.helpContentSlug;
+    this._howToType = data.jsonApi.attributes.howToType;
+    this._slug = data.jsonApi.attributes.slug;
+    this._order = data.jsonApi.attributes.order;
+    this._summary = data.jsonApi.attributes.summary;
+    this._tags = data.jsonApi.attributes.tags ?? [];
+    this._contextualKeys = data.jsonApi.attributes.contextualKeys ?? [];
+    this._draft = data.jsonApi.attributes.draft ?? false;
 
     return this;
   }
@@ -81,6 +117,13 @@ export class HowTo extends Content implements HowToInterface {
 
     if (data.description !== undefined) response.data.attributes.description = JSON.stringify(data.description);
     if (data.pages !== undefined) response.data.attributes.pages = data.pages;
+    if (data.howToType !== undefined) response.data.attributes.howToType = data.howToType;
+    if (data.slug !== undefined) response.data.attributes.slug = data.slug;
+    if (data.order !== undefined) response.data.attributes.order = data.order;
+    if (data.summary !== undefined) response.data.attributes.summary = data.summary;
+    if (data.tags !== undefined) response.data.attributes.tags = data.tags;
+    if (data.contextualKeys !== undefined) response.data.attributes.contextualKeys = data.contextualKeys;
+    if (data.draft !== undefined) response.data.attributes.draft = data.draft;
 
     return response;
   }