The official end-user documentation for the FluentCommunity WordPress plugin, built with VitePress.
This is a content repository, not an application. Almost every change here is writing or editing a Markdown article, adding screenshots, and wiring the page into the sidebar.
If you're looking for developer-facing API documentation instead, that lives at dev.fluentcommunity.co.
You'll need Node.js 20 or newer.
git clone https://github.com/WPManageNinja/fluent-community-user-docs.git
cd fluent-community-user-docs
npm install
npm run docs:devThe dev server starts at http://localhost:5173 with hot reload.
| Command | What it does |
|---|---|
npm run docs:dev |
Start the local dev server with hot reload. |
npm run docs:build |
Build the production site to .vitepress/dist. |
npm run docs:preview |
Serve the built site locally to check the production output. |
npm run featured:generate |
Render a branded 1200×630 social-share card for any page that doesn't have one yet. |
npm run featured:regenerate |
Re-render every card (use after changing the generator's design). |
There are no tests or linters in this repo.
npm run docs:buildis the correctness check — VitePress fails the build on dead internal links, so always run it before opening a pull request.
.
├── .vitepress/
│ ├── config.mts # Site config + the hand-maintained sidebar
│ └── theme/ # Brand colors and custom CSS
├── docs/ # All content (srcDir)
│ ├── index.md # Homepage (layout: home)
│ ├── getting-started/
│ ├── community-hub/
│ ├── ... # One folder per sidebar section
│ └── public/images/ # Screenshots, served at /images/...
├── CLAUDE.md # Guidance for AI coding agents
└── package.json
| Section | Folder | Articles |
|---|---|---|
| Getting Started | docs/getting-started/ |
6 |
| Community Hub | docs/community-hub/ |
28 |
| Gamification (Pro) | docs/gamification-(pro)/ |
3 |
| Courses & Learning (Pro) | docs/courses-&-learning-(pro)/ |
10 |
| Files & Media Storage | docs/files-&-media-storage/ |
8 |
| Portal Settings | docs/portal-settings/ |
16 |
| Monetization | docs/monetization/ |
4 |
| Integrations | docs/integrations/ |
14 |
| Migration | docs/migration/ |
2 |
| Help & Resources | docs/help-&-resources/ |
3 |
| For Developers | docs/for-developers/ |
1 |
| Changelog | docs/changelog/ |
1 |
Adding an article is always a two-step job. A file without a sidebar entry is effectively orphaned — reachable only by direct URL.
-
Create the Markdown file in the right section folder, with
titleanddescriptionfrontmatter:--- title: Your Page Title description: One sentence describing the page. This feeds the SEO meta description. --- # Your Page Title Your content here.
-
Add its sidebar entry to the
themeConfig.sidebararray in.vitepress/config.mts:{ text: 'Your Page Title', link: '/your-page-title' },
-
Add screenshots to
docs/public/images/<section>/<article-slug>/as.webp. -
Run
npm run featured:generateto create the page's social-share card, and commit the PNG it writes todocs/public/images/featured/. -
Run
npm run docs:buildto confirm nothing is broken.
Read these before writing — they're easy to get wrong and they break the build.
cleanUrls is on and a rewrites function strips the category folder from every URL. A file at docs/portal-settings/general-settings.md is served at /general-settings, not /portal-settings/general-settings. Sidebar link values and in-page links both use the flattened, root-absolute form without the .md extension.
Article filenames are kebab-case and deliberately keep &, (, ) so they match the sidebar link values exactly:
add-custom-links-(pro).md
space-settings-&-privacy.md
courses-&-learning-(pro)/
Screenshots go in docs/public/images/<section>/<article-slug>/ as .webp and are referenced by root-absolute path (VitePress serves public/ at /):
Convert screenshots before committing — for example cwebp -q 82 -resize 1600 0 shot.png -o shot.webp.
Every page gets its own link-preview card — the image Slack, X, LinkedIn and Facebook show when someone shares a docs URL. Cards are generated, not designed by hand: scripts/generate-featured-images.mjs renders a branded 1200×630 PNG carrying the page's title and its section name into docs/public/images/featured/<slug>.png, and .vitepress/config.mts points each page's og:image / twitter:image at it. A page with no card falls back to default.png.
- Run
npm run featured:generateafter adding a page. It only renders missing cards, so it's safe to run any time; commit the new PNG alongside the page. - If you rename or retitle a page, delete its old card first (
rm docs/public/images/featured/<old-slug>.png) and run the generator again — it skips existing files and only reports orphans, it never deletes them. - The card is named after the page's flat URL slug (the file basename). That rule is written in both the script and the config, so a change to one must be mirrored in the other.
Use VitePress containers for asides:
::: tip
Helpful suggestion.
:::
::: warning
Something to watch out for.
:::Many existing pages also use blockquote callouts (> **Use Case:** …, > **✨ Note:** …). Match whichever style the surrounding page already uses.
Features that require the FluentCommunity Pro plan are labeled (Pro) consistently — in the filename, the frontmatter title, the # H1, and the sidebar text.
VitePress runs Markdown through Vue, so {{ double braces }} are parsed as template interpolation even inside inline code — and an unparseable expression is a hard build failure. When documenting smartcodes or placeholders, wrap them:
::: v-pre
`{{site_name_with_url}}` — replaced with your site name.
:::Branding is centralized in .vitepress/theme/custom.css, loaded via .vitepress/theme/index.js (which extends the VitePress default theme). The brand color is #5145e6, set through --vp-c-brand-* CSS variables with a .dark override. Prefer editing those variables over hardcoding colors.
- Branch off
master. - Make your content changes, following the conventions above.
- Run
npm run docs:buildand confirm it completes with no dead-link warnings. - Open a pull request describing which pages you added or changed.
When restructuring — renaming, moving, or deleting a page — keep four things in sync: the Markdown file, its image folder, the sidebar entry in .vitepress/config.mts, and every inbound link from other pages.
- Plugin website — fluentcommunity.co
- Developer docs — dev.fluentcommunity.co
- VitePress docs — vitepress.dev