FrontMark Preview for VS Code

Preview ordinary Markdown and FrontMark in .md and .fm files.

Requires VS Code 1.106 or newer.

• .md keeps VS Code's Markdown language mode and its existing editor features.
• .fm uses the FrontMark language mode.
• Both formats can use either FrontMark preview, from the editor title, Explorer menu, or command palette.

FrontMark project sidebar

The Activity Bar has separate monochrome icons without text or a hexagonal frame: FrontMark (flowing F), Asset Manager (stacked photo and document), and Inference (three server towers inspired by its logo, without the frame or pointed ribbons). Each interface uses its corresponding supplied colour logo. FrontMark opens these project views:

• 🚀 Pages Astro lists .md, .fm and .mdx content in src/content/astro and src/pages. Astro template files (.astro) are hidden.
• 📚 Documentation lists .md, .fm and .mdx pages in src/content/docs.
• 🧩 Composants Svelte lists the project's .svelte sources, including svelte-components and src/components.
• ⚙ Menus et réglages opens the menu editor, project configuration, site/theme/footer sections, and extension settings.

Click a file to edit it. Markdown and FrontMark entries also have a project-preview action and classic-preview context menu. Folders keep the project's hierarchy, and the lists refresh when files are added, renamed or removed. Nested projects and multi-root workspaces are grouped by their site.config.yaml configuration; dependency, generated, vendor and test directories are excluded.

The context menus for Markdown/FrontMark pages include Renommer la page and Supprimer la page. Renaming preserves VS Code's editor integration and never overwrites another file; deleting moves the selected page to the local trash after confirmation. Save pending edits first.

The settings editor has dedicated forms for Site et identité, Thème et styles, Pied de page, and a searchable Configuration complète view. Text fields, lists, numeric inputs and typed choices preserve the original YAML types. Optional settings can be reset, and drafts stay in place when switching sections. Existing advanced YAML values such as aliases remain available in the YAML editor.

The menu editor displays the Astro navigation, documentation sidebar, documentation menu selector, social links and footer links. It lets you edit entries and their order while retaining YAML comments and unrelated configuration. Menu and form changes are applied together through VS Code's editable document and undo history; save the configuration to persist them. The footer form includes its links and social networks.

Réglages de l’extension opens a separate graphical form for preview preferences. Choose user or workspace scope before applying changes; these settings are saved directly in VS Code, independently of site.config.yaml.

Mise à jour du projet… opens the settings interface with a Mettre à jour FrontMark button. It runs make upgrade with UPGRADE_REPO set to the configured source repository in the selected project's folder, using its existing Makefile and scripts/upgrade-frontmark.mjs. Progress appears in a dedicated VS Code task terminal; the interface reports completion, interruption or failure. Apply and save pending project settings before updating. Updates require a trusted workspace and saved project files; simultaneous updates of the same project are prevented.

Créer un projet FrontMark…, available in the command palette and above Menus et réglages, clones the source repository into a new working directory, then dehydrates that clone. Choose a parent directory and a new folder name; existing folders are never replaced. The new checkout is compared with its own frozen Git HEAD before common files are removed, and opens in a new VS Code window. After dehydration, the template history is removed and the application starts with one independent root commit on main. Template branches, tags and remote configuration are removed; the current application files are preserved. The template source is recorded in .git/frontmark-template.json; configure your own publishing remote when ready. No push is performed automatically. If creation fails, the created directory is kept for inspection. The Dépôt source FrontMark field in Réglages de l’extension, also available as the native frontmark.project.repositoryUrl setting, defaults to https://gitea.newkube.ia86.cc/sigMAX/Image_frontmark.git. It accepts HTTPS, SSH or an absolute local path and always applies to the user, independently of the preview settings' workspace scope. Workspace settings cannot redirect this repository.

Déshydrater le projet FrontMark… prepares a list of common files to remove from an existing project. It preserves site.config.yaml, Svelte source components, Markdown/FrontMark content, images and the two CSS override files declared by the project. Git history and configuration—including an existing project's remotes—plus .env files, untracked files and unknown local files are retained. The extension clones the configured reference repository and freezes its latest default-branch HEAD for comparison. Common files are compared with that reference's content and executable modes, so an alteration is detected even if it has already been committed locally. Any difference blocks the operation; a project using an older common core may need to be aligned with its reference first. Review the removal plan before confirming it. A restoration copy is created under .git/frontmark-dehydration/<operation-id> before deletion. Only working-tree files are removed: no files are automatically staged, committed or pushed. A failed verification removes no common files.

Dehydration removes the shared build files as well as shared application code. The remaining working directory contains the site's editable sources. The extension's bundled Markdown preview remains available, while commands that require the project's original Makefile, scripts or npm project—including the complete site test—are unavailable until those common files are restored. This feature does not implement hydration.

The sidebar and settings interface display Version locale, the number of commits reachable from the local Git HEAD, with the commit hash and branch in a tooltip. Shallow histories and parent repositories are identified; projects without Git show an unavailable version. This is a local history counter: make upgrade copies core files without creating a local commit, so this number can remain unchanged after a successful update.

Gestion de version / Version Management opens from the Git branch icon at the bottom right of VS Code, or FrontMark: Version Management in the command palette. It uses the active file’s Git repository (or lets you choose a workspace folder) and displays the full repository path. The action covers the entire repository, including files outside a nested project; a workspace opened inside a larger repository asks for confirmation before saving that parent repository.

Click Enregistrer once to save open files in that repository, stage additions, edits and deletions with git add -A, create a commit named with the local date, time and UTC offset, then push. Three indicators validate Ajout fichiers locaux, Ajout de la version, and Synchronisation distante as each operation completes. Synchronization sends the current branch to its configured upstream, or to the sole remote if it has no upstream. It never forces a push. If there are no changes, it skips creating a commit and can retry a failed push. A failed synchronization keeps the local version; configure Git identity, authentication or the remote as indicated by the error, then retry. Git repositories are not initialized automatically.

The history combines every locally available branch and known remote reference, showing dates, authors and short identifiers without requiring branch or commit-message selection. Charger la suite loads older entries. Actualiser rereads local history; it does not fetch remote changes. Shallow clones are identified as partial histories.

Revert restores the selected version’s complete content as a new local commit whose parent is the current version, including versions from other branches. This is a snapshot restoration, rather than undoing only the changes introduced by the selected commit. It preserves existing history and asks for confirmation. Save local changes first; the action refuses dirty files, pending editor/settings changes, Git operations in progress and unsupported submodule or sparse-checkout states. Click Enregistrer afterwards to synchronize the restored version. If a commit hook rejects the restoration, the restored content remains staged and the interface reports how to continue. Version management requires a trusted workspace because Git can invoke repository-configured filters even while inspecting files.

The red Réinitialiser le dépôt Git button starts a project created with FrontMark over with a single commit on main, preserving its current files. It permanently removes previous local commits, branches and tags after a native confirmation and an exact project-name check. Save files and a local version first. The action refuses remote-connected or managed SoftwareForge repositories, linked worktrees, submodules, sparse checkouts and stashes, and rechecks trust and repository state immediately before replacement. Existing projects dehydrated without this explicit action retain their Git history.

To try the sidebar from this repository, press F5, then open a FrontMark project folder in the Extension Development Host. To update the installed extension, run make install-vsix and reload VS Code.

Asset Manager

When opened through Softwareforge → Voir le projet, FrontMark inherits the current Softwareforge account automatically. There is no second sign-in or credentials form: the connection page shows the inherited account and Déconnecter toutes les applications Sigmax. Asset Manager and Inference keep their existing account permissions. The extension host obtains short-lived, parent-bound credentials from the Softwareforge broker and keeps them in memory only; it does not read or overwrite personal VS Code credentials. Parent logout, project access removal or the signed global logout invalidates the inherited session. Temporary outages stop service access and recover automatically. The managed cloud endpoints are fixed and cannot be redirected through workspace settings.

For VS Code outside the managed Softwareforge editor, the browser approval workflow remains available:

Open Asset Manager & Inference · Connexion from Menus et réglages, the account button in either service, or Gérer la connexion in Asset Manager settings. Se connecter avec Identity opens https://identity.sigmax.studio in your browser. Sign in through Authentik, compare the displayed code, and approve FrontMark. This works in desktop VS Code and in code-server: the extension host polls Identity with a one-use PKCE proof, so no loopback callback or client secret is needed. Identity grants only the account's authorized Asset Manager and Inference access. Asset Manager uses https://assetmanager.sigmax.studio; Inference uses https://inference.ia86.cc.

The resulting session is stored in VS Code SecretStorage, never in the project's YAML, workspace settings, webview state or generated Markdown. It lasts at most eight hours and is tied to the Identity browser session. Déconnecter revokes the extension session, clears its credential and opens the common sigMAX logout flow. Logout elsewhere is checked every 30 seconds and on window focus; temporary Identity outages preserve the credential while API access still fails closed. Closing or cancelling the sign-in view cancels its pending approval. A shared code-server installation must isolate its user-data directory for each user and project.

Clé API personnelle · avancé accepts an Identity sx_… key and the owner's e-mail; migrated am_… keys remain supported. Grant the key access to both services if you use both. Personal keys are independent credentials: browser logout does not revoke them; use Identity to revoke them. Leave the key field blank to reuse a saved key for the same server and account. Effacer les identifiants removes its local copy. A rejected replacement key leaves the previous connection intact. Keys are validated through /api/ai/status before saving, independently of bucket permissions. Bucket discovery still respects Asset Manager ACLs and assigned buckets. Inference access uses its own rights. Compte local · développement accepts passwords only on loopback addresses when that server explicitly reports Identity disabled; old saved cloud passwords are removed instead of reused.

Choose a bucket from the database button or Asset Manager settings. The explicit choice is remembered for the workspace across disconnections and reconnections, while it remains accessible to the account. Choose Auto to use the current FrontMark project's saved admin.DefaultBucket in site.config.yaml (exact capitalization). Auto is used when no manual selection exists and follows changes to the default or active project. An empty, missing or inaccessible default leaves the destination unset; no arbitrary bucket is chosen. In a workspace containing several projects, activate a file in the intended project to resolve its default.

Images et documents has an Images tab with large, uncropped thumbnails and a Documents tab with filenames and file types. Use Taille des images to adjust thumbnails from 96 to 256 px (160 px by default); the size and selected tab are remembered when the view is reopened. Click a resource to open its preview and metadata, or use Copier and Insérer for its Markdown link. Every image and document also has a Supprimer button that asks for confirmation before removing it from the selected remote bucket. Expand Ressources to access the native lists, their context menus and local file uploads by drag-and-drop. Lists and the gallery include a Charger la suite… action when more than 100 resources are available.

Use Trier to order by name, date added, file type (MIME), or file weight, in either direction. Filtres combines age (Aujourd’hui, last 7, 30, or 90 days), weight (Petit: below 1 MiB; Moyen: 1 to below 10 MiB; Grand: 10 MiB or more), and Tags. Select tag buttons or enter exact tag names separated by commas and click Appliquer; every selected tag must match. Tag suggestions come from loaded metadata. Today starts at local midnight; other age ranges are rolling periods. Resources without a known date remain visible without an age filter and appear last when sorted by date. Filters and alternate sorts inspect every metadata page in the category before showing results, then display 100 matches at a time. Effacer les filtres clears age, weight and tags while keeping the sort and current folder.

Enable Naviguer par dossier virtuel to display folders alongside resource cards. Click a folder to open its direct contents, and use the breadcrumb to return to a parent or the root. Folder counts include matching resources in their descendants; tags, age and weight also filter the folder contents. Navigation loads all metadata pages so folders beyond the first page remain accessible. Turn the option Off to show matching resources from every folder. The option and current path are remembered; switching bucket, server or account returns to the root.

Use Organiser on a resource (or its context menu in the compact and native views) to edit its virtual path and tags in Asset Manager. Assign a path such as /projets/photos to create a virtual folder, or leave the path empty to move the resource to the root. These folders exist through their assigned resources, so empty folders disappear. Tags accept up to 40 keywords; edited keywords follow the server's normalization of accents and punctuation. Moving a resource without changing its tags preserves their provenance. Metadata changes keep the resource's URL and content intact and refresh the views.

Choose one of three display modes:

• Compact: one 32 px row per resource with a 24 px thumbnail or document icon and its filename.
• Mini: a resizable thumbnail or document preview and its filename.
• Informations / Information / Información: a resizable thumbnail, filename, description, tags and action buttons.

The thumbnail slider adjusts Mini and Information previews from 96 to 256 px. Click to preview or drag a resource into Markdown; right-click for preview, copy, insert, organization, or deletion, and press Delete on a focused resource to request deletion. The view mode, sorting, filters and thumbnail size are remembered when the view is reopened. Previous gallery preferences migrate to Information mode.

The interface automatically follows the VS Code display language (French, English or Spanish; English for other languages). In Extension Settings, keep Automatic — VS Code language or choose Français, English, or Español. You can also open these options with FrontMark: Choose Interface Language. The frontmark.language user setting defaults to auto and updates open extension interfaces immediately. Resource names, descriptions, tags and project content are preserved. VS Code's native command and view contribution labels use its own display language (English, French or Spanish).

Image and document context menus include Renommer la ressource distante and Supprimer la ressource distante. Both operations call the authenticated Asset Manager API for the selected resource and bucket. Renaming changes the remote filename while preserving its extension, ID, content and existing URLs. Deletion asks for confirmation and removes the resource from the remote library; the API retains its physical versioned object. Lists and open previews refresh after successful changes.

Remote renaming requires the accompanying Asset Manager API update supporting PATCH /images/:id with a filename field. Rebuild and redeploy that API before using rename against the hosted instance. Older servers that silently ignore this field produce a clear error instead of a false success.

• Drag a photo by its thumbnail or filename from Asset Manager → Images et documents into a .md, .fm or .mdx editor to insert its Markdown image link at the drop position. Documents can also be dragged to insert a document link. The native Ressources tree still supports dragging multiple resources. Existing resources are not uploaded again. Dragged links use the same labels and image descriptions as Insérer; other text editors receive that Markdown as plain text. Hold Shift while dropping if VS Code would otherwise open the resource; choose Insérer les ressources FrontMark if a drop action selector appears.
• Drag local images from VS Code Explorer or your operating system into the editor to upload them to the selected bucket and insert their Markdown links at the drop position. Hold Shift while dropping when VS Code would otherwise open the file. If a drop action selector appears, choose Envoyer les images à l’Asset Manager.
• Drop images or documents onto Asset Manager → Ressources to upload them without editing the active page. The upload button, also available above the gallery, accepts multiple files.
• Use a resource's context menu to copy or insert its Markdown. Uploads report progress, can be cancelled, and reuse duplicates reported by the API. Limits are 50 MiB per file and 100 MiB per drop; the server may impose a smaller limit.

Local uploads require a trusted workspace. They begin only when the editor applies the selected drop action, not when VS Code evaluates available alternatives. If the page changes during an upload, the resources remain in the bucket and can be dragged into the page again. Private resources are previewed through the authenticated API; generated links contain no token and still require authentication when the asset or bucket is private.

Inference

Open Inference in the Activity Bar to sign in and inspect your account and usage. The account view and file assistant share the same session. The default server is https://inference.ia86.cc. Account credits and their quota are displayed separately from input/output token usage; credits are not presented as tokens.

The current account API provides a full name. Separate first and last names are displayed only when the server returns those fields; otherwise they are shown as unavailable. The extension does not infer them by splitting the full name.

Inference can edit Markdown and FrontMark (.md, .fm, .mdx), site.config.yaml, Svelte components (.svelte), and the project's CSS overrides declared under theme.cssOverrides and astro.cssOverrides (including their singular cssOverride forms). The usual two overrides are public/styles/overrides.css and public/styles/astro-overrides.css. Other CSS files are rejected before generation. Click the sparkle button at the top right of the editor, or run FrontMark: Open Inference Assistant. The assistant opens in its own view in the Secondary Side Bar, normally on the right. It uses the same VS Code area where Codex can appear, with its own interface and session; it does not require Codex or integrate into Codex's internal chat. VS Code 1.106 introduced the extension contribution used for this default location. You can move the view using VS Code's normal layout controls.

Ask for a change in the chat, then review the proposed changes in the diff before applying them. Each proposal edits one active file. Follow-up requests include recent conversation context, the complete current document (including unsaved changes), and the pending proposal while it still matches that document. You can refine a proposal before applying it. The conversation belongs to the current file and can be cleared to start again. Application updates the editable document, remains undoable with Ctrl+Z (⌘Z on macOS), and leaves the document unsaved. Continue editing and save when ready.

To understand the project, each request also includes a bundled FrontMark syntax guide derived from the extension's renderer and examples. In a trusted workspace, the extension discovers the nearest FrontMark project, provides an inventory of up to 500 supported files, and selects supporting sources such as configuration, CSS overrides, referenced Svelte components and files relevant to the request. Open editor buffers take precedence over saved versions. Additional source context is limited to 120,000 characters in total and 24,000 characters per file. Contexte du projet lists the supporting files selected for the request and identifies omitted or shortened context. The model does not automatically read every file or change several files at once; naming a component or page in the request helps select relevant context. The active file remains complete, subject to its separate 200,000-character limit.

Standalone files and untrusted workspaces use the active file and syntax guide without scanning neighboring files; CSS override editing requires a verifiable project configuration. Discovery excludes dependencies, generated files, .env files and paths outside the project. SecretStorage credentials are never project context. The selected source files, including the YAML configuration, are sent to the configured Inference service.

The chat discovers available models through the authenticated /v1/models API. Choose a model beside the message composer, or keep the first available model selected automatically; refresh the list when server availability changes. The model choice lasts for the session and is no longer a free-text setting. If discovery fails or returns no models, the chat offers a refresh instead of asking for a model identifier.

Inference Settings, available from the view's gear button or the command palette, opens VS Code's native user settings. Configure the API URL, maximum output tokens (12,000 by default), temperature (0.2), and generation timeout (120 seconds). These application settings are independent of the project's YAML; the output-token limit is separate from the account's credit quota. Refresh Inference Account updates the account and usage display.

For an Inference server using a private certificate authority or a self-signed certificate, set frontmark.inference.caCertificate in the native user settings to the path of its trusted PEM certificate file. Obtain that certificate from the server administrator. Leave the setting empty for the default trust configuration. Certificate and hostname verification remain enabled; this setting does not disable TLS verification.

Page previews and full-site testing

• FrontMark: Open Classic Preview / …to the Side — FrontMark components with the VS Code colors and a compact reading layout.
• FrontMark: Open Project Preview / …to the Side — the same renderer with the project's FrontMark theme and CSS overrides. A bundled theme is available for standalone files.

▶ Tester le site opens the complete site in your browser, including the real Astro/Starlight navigation, header, footer and project components. Find it at the top of a page preview, in the project settings toolbar, in Menus et réglages, or through the ▶ action above the project views and in the editor title. Apply any pending settings fields first; launching the test saves modified files in the selected project. A cancelled or failed save prevents startup.

The extension runs the project's npm run dev script with a loopback address and an available port, using scripts/run-node-tool.sh when available. It waits for the server before opening the configured site base URL. Install project dependencies beforehand. A trusted workspace is required because this runs the project's code. Startup output and errors appear in Output → FrontMark · Site. Repeating Tester le site reopens the existing server; the status bar shows its state, and Arrêter le test du site stops it. Each project has its own server, stopped when the extension is deactivated. Save subsequent page, menu and footer edits to let the project's development server refresh the site.

Both modes can be open for the same document. Unsaved document changes refresh the preview; configuration, CSS and asset changes are watched. Scroll position is retained across refreshes. Interactive components are recreated when the document changes.

For a project preview, the extension finds the nearest site.config.yaml, reads theme.style, theme.availableStyles, theme.cssOverrides and, for standalone Astro pages, astro.cssOverrides. Local CSS imports, images and fonts are resolved relative to their source files. The configured site base path and public/ assets are supported.

{
  "frontmark.preview.showFrontmatter": false,
  "frontmark.preview.styles": ["/styles/overrides.css"],
  "frontmark.preview.defaultMode": "classic"
}

styles adds styles to the project preview. defaultMode selects the mode of the optional FrontMark Preview custom editor in Reopen Editor With…; the named commands select their own explicit mode.

FrontMark compatibility

The extension uses the official FrontMark renderer pinned to commit cdd7a2b6577459161a75f5256f8470ca2d572661, the latest upstream revision checked for this update. The source revision is recorded in vendor/frontmark/upstream.json.

Included: GFM Markdown, YAML frontmatter, attributes, abbreviations, definitions, footnotes, icons/emojis, Critic markup, annotations, code highlighting/options, KaTeX, admonitions, nested tabs, grids/cards, the 24 container presets, masks, animations, root containers, carousels with Slick, images/lightboxes, videos, parallax, forms, hex viewers, Chart.js, Vega/Vega-Lite, Mermaid and Svelte directives. {{ page.* }}, {{ site.* }} and configuration variables are expanded outside code examples.

The extension carries small checked patches for math parsing and nested blocks, plus a webview adapter. The original upstream engine is kept intact; the build fails if an upstream change invalidates an adaptation.

Components requiring project services

• Svelte: in a trusted workspace, the preview loads the real compiled public/svelte/frontmark-svelte-components.js and matching CSS. Build these in the FrontMark project with make svelte. Components registered in that bundle run normally; arbitrary .svelte files are not compiled by the extension. Without the bundle, a message identifies the missing component.
• Mermaid: renders locally. Other Kroki diagrams can use a configured server by enabling frontmark.preview.allowRemoteDiagrams in a trusted workspace. This sends diagram source to frontmark.preview.krokiUrl; it is disabled by default.
• n8n: the workflow JSON remains viewable, copyable and downloadable offline. The external n8n service/widget is not loaded automatically.
• Forms: browser validation works; submitting in the preview does not send data.
• Protected pages: the authoring preview shows the source before publishing encryption.

The project page preview renders content and styles. ▶ Tester le site uses the real project's development server for the complete site shell. Production-only features, generated search indexes and deployment integrations still require the project's build/preview workflow.

Development and verification

npm ci
npm run check
npm test
make smoke
npm run test:browser
npm run test:settings-browser
npm run test:inference-browser
npm run test:version-control-browser
make package

The browser test needs a Playwright Chromium installation (npx playwright install chromium). FRONTMARK_BROWSER_EXECUTABLE may point to an existing Chromium executable.

Press F5 to start the Extension Development Host. Open examples/markdown.md for ordinary Markdown, examples/frontmark.md for enriched .md, or examples/demo.fm for the broader feature sample.

npm test checks rendering, project styles/assets, configuration isolation and reported regressions. The browser test exercises the actual generated webview HTML and content security policy, including interactive components. make package produces frontmark-vscode-0.5.2.vsix; make install-vsix installs it explicitly.