Skip to content

Instantly share code, notes, and snippets.

@fuo213
Last active February 23, 2026 17:22
Show Gist options
  • Select an option

  • Save fuo213/b7649bdcd331c0867dc95beedd9ed2cd to your computer and use it in GitHub Desktop.

Select an option

Save fuo213/b7649bdcd331c0867dc95beedd9ed2cd to your computer and use it in GitHub Desktop.
name overview todos isProject
Customization Items refactor
Restructure the Customization Items docs: one top-level page with core content and a Types table, a Recipes sub-category with one page per recipe, and a shortened Access section that references State with a callout.
false

Customization Items page refactor

Current state

  • customization-items.mdx – Single page with: intro, Types (bullet list of 8 types), Configuration, Default Values, AI Customization Items, Accessing Customization Items (state path + examples), vs Prospect Details, Related.
  • recipes.mdx – One page containing three full recipes (Storefront products, Transactions/invoices, Currency conversion).
  • Navigationmeta.json lists customization-items and recipes as sibling pages under Demo Personalization.
  • State docsState Overview, Referencing State, Populating State already describe state structure and how to reference it.

1. Top-level Customization Items page

Keep customization-items.mdx as the single source for “what Customization Items are” and configuration:

  • Keep as-is: intro, Location/Config callout, “When to use” callout, Configuration (form screenshot, Properties, Default Values), “Customization Items vs Prospect Details”, Related cards.
  • Add an anchor for the AI section so the Types table can link to it, e.g. ## AI Customization Items with id #ai-customization-items (or rely on slug; confirm fumadocs heading ID behavior).
  • Do not move or duplicate the existing AI Customization Items section; the Types table will link to it.

No structural change to the AI section or the rest of the page beyond the Types and Access edits below.


2. Types as a table

Replace the current Types bullet list (lines 22–37) with a single markdown table with these columns:

Column Content
Name Type name (Plain Text, Number, JSON, Color, Image, Select Dropdown, List, JavaScript Expression).
Description Current one-line description (e.g. “Single-line text input” for Plain Text).
Example value Short example (e.g. "Air Max 270", 42, #FF5733, ["Basic","Pro"], one list item example, etc.). Use “-” or “N/A” where an example doesn’t add value.
DataGen Enabled ✓ (yes) or no per type. Note: “DataGen” does not appear in the repo; treat as “AI generation supported when creating demos.” Plain Text and List are clearly supported; others need a product/codebase decision or default to “✓ where AI Prompt is used.”
Example AI prompt Short example prompt (reuse from doc where available). Header: “Example AI prompt” with a link to the AI Customization Items heading on the same page (e.g. [Example AI prompt](#ai-customization-items) as header text or a small “(see AI Customization Items)” link next to the column header).

Use standard markdown table syntax (e.g. as in overview.mdx and window-functions.mdx).


3. Access Customization Items: reference State, keep examples, add callout

Replace the current “Accessing Customization Items” section with:

  • One short sentence: Customization Items are stored at the top level of state and can be referenced directly.
  • Keep the existing examples:
    • If DB key is productName: {{ productName }} and this.db.productName.
  • Add a callout immediately after (or before) the examples:
    “For more details, see State.”
    Optionally mention Referencing State in the same callout for syntax details.

Remove any duplicated “how state works” explanation so the section is brief and points to State docs.


4. Recipes as a sub-category with one page per recipe

New structure:

  • Create folder **content/docs/demo-personalization/recipes/**.
  • Add **meta.json** in that folder, e.g.
    {"title": "Recipes", "pages": ["storefront-products", "transactions-invoices", "currency-conversion"]}
    so the sidebar shows “Recipes” with three child pages.
  • Create three MDX files from the current recipes.mdx:
    • storefront-products.mdx – Recipe 1 (Storefront of products that changes based on the prospect): goal, what you’ll use, Steps, result, optional screenshot placeholder. Link to main Customization Items page for types/config.
    • transactions-invoices.mdx – Recipe 2 (Unique transactions or invoices): same structure.
    • currency-conversion.mdx – Recipe 3 (Currency conversion with formatted display): same structure.
  • Remove the current **content/docs/demo-personalization/recipes.mdx** (root-level file).
  • Update demo-personalization/meta.json: keep "recipes" in the pages array so the recipes folder is still the “Recipes” entry under Demo Personalization (fumadocs will resolve the folder).

Optional: Add a recipes index page (e.g. recipes.mdx inside the folder as the first page in pages) with a short intro and links to the three recipe pages; otherwise the first recipe page in pages will be the default when opening “Recipes.” Your choice based on whether you want a dedicated Recipes overview.


5. Link and reference updates

  • Customization Items page – Related: Change “Recipes and Examples” card from href="/demo-personalization/recipes" to either the new recipes overview (if you add one) or to the first recipe, e.g. href="/demo-personalization/recipes/storefront-products", or to a new /demo-personalization/recipes index.
  • Any other links to /demo-personalization/recipes (e.g. from query-parameters.mdx, overview.mdx): point to the recipes index if present, or to the first recipe page.
  • Recipes pages: Keep “For types, AI prompts, and configuration details, see Customization Items” (or equivalent) in each recipe so the main page remains the single source for types/config.

Summary diagram

flowchart LR
  subgraph before [Current]
    CI[customization-items.mdx]
    R[recipes.mdx]
  end
  subgraph after [After refactor]
    CI2[customization-items.mdx]
    subgraph recipes [Recipes folder]
      R1[storefront-products.mdx]
      R2[transactions-invoices.mdx]
      R3[currency-conversion.mdx]
    end
  end
  CI --> CI2
  R --> R1
  R --> R2
  R --> R3
Loading

Files to create: content/docs/demo-personalization/recipes/meta.json, recipes/storefront-products.mdx, recipes/transactions-invoices.mdx, recipes/currency-conversion.mdx.
Files to delete: content/docs/demo-personalization/recipes.mdx.
Files to edit: content/docs/demo-personalization/customization-items.mdx (Types table, Access section + callout, optional heading id), content/docs/demo-personalization/meta.json (no change if “recipes” stays as folder name), and any docs that link to /demo-personalization/recipes.


DataGen support for the Types table

  • DataGen Enabled = ✓: Plain Text, Number, Image, List
  • DataGen Enabled = X: JSON, Color, Select Dropdown, JavaScript Expression
  • Use this mapping for the DataGen Enabled column:

So the Types table in customization-items.mdx should use:

Name DataGen Enabled
Plain Text
Number
JSON X
Color X
Image
Select Dropdown X
List
JavaScript Expression X
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment