FrontMark is Markdown-first. Use Markdown files for content, site.config.yaml for structure, and make for local commands. The npm scripts stay implementation details behind the Makefile.

git clone https://gitea.newkube.ia86.cc/sigMAX/Image_frontmark
cd Image_frontmark
make install

make install bootstraps Ubuntu/Debian systems with apt-get and macOS with Homebrew. It installs build dependencies, ensures Node.js >=22.12.0 and npm are available, then runs npm install.

On very small Linux base images, install make first:

sudo apt-get update
sudo apt-get install -y make
make install

On macOS, install the Xcode Command Line Tools and Homebrew first if they are missing. Homebrew must be available from the shell, or installed in the standard Apple Silicon (/opt/homebrew) or Intel (/usr/local) location.

xcode-select --install
make install

On other systems, install equivalent packages before running make install: ca-certificates, curl, bash, git, make, a C/C++ build toolchain, python3, xz-utils and pkg-config.

make dev

make preview

Advanced commands for Svelte compilation, image optimization, import, upgrade, Docker and CI/CD are documented in Going further.

All structural settings live in site.config.yaml.

The most important fields to check before publishing are:

site:
  base: /frontmark
  url: https://example.com
  name: FrontMark Generator

brand:
  logo: /brand/icon.png
  logo2: /brand/logo-transparent.png # optional: transparent header logo
  favicon: /brand/favicon.ico
  heroImage: /brand/frontmark-hero.png

git:
  origin: https://yourgitinstance.example.com
  repository: sigMAX/Image_frontmark
  repositoryUrl: https://yourgitinstance.example.com/sigMAX/Image_frontmark
  branch: main

Use site.base: "" to publish at the domain root. Use a value such as /frontmark when the site is served under a prefix. When brand.logo2 is configured, the header uses it while alwaysOnTop: transparent, transparent_white_in_mini, or transparent_black_in_mini is active and the scroll position is below transparentScrollY; at the threshold it switches back to brand.logo. If logo2 is omitted, brand.logo is used in both states. Use brand.favicon with a local public path such as /brand/favicon.ico, /brand/icon.webp or a full remote URL such as https://example.com/favicon.png. When the configured local favicon ends in .ico, make favicon, make preview and make build generate it from brand.faviconSource or /brand/icon.png. brand.faviconSource can be a local public file or a remote image URL such as https://example.com/icon.webp. When the configured local favicon is a WebP or another image format, the image is used as the favicon and FrontMark also generates the matching .ico fallback next to it.

For a full-height opening section, a page can keep its header fixed and transparent near the top, then restore the active theme surface after a threshold. It can also map a downward gesture to the end of that first section:

---
layout: full
scrollonpage: true
header:
  alwaysOnTop: transparent
  transparentScrollY: 100
---

See Page shell, header and first-screen scrolling for the complete behavior and a copyable root=top example.

Use Markdown files for documentation, editorial pages and content managed through Git or Sveltia.

Use Astro files only when the page itself is application code: custom route logic, generated indexes, API endpoints, wrappers, admin routes or layouts that cannot reasonably be expressed as Markdown content.

Astro-only pages use astro.layout for their readable width:

astro:
  layout:
    mainWidth: 1120px
    contentWidth: 1100px

Use astro.pageWidth or PUBLIC_ASTRO_PAGE_WIDTH when the same width should apply to both values.

Most edits should happen in Markdown or in site-level configuration.

Do not edit generated files under dist/, .astro/, public/search/, public/admin/, public/svelte/ or public/_optimized/ by hand. They are recreated by Make commands.

Create a file such as src/content/docs/deploy-the-portal.md:

---
title: "Deploy the portal"
description: "Build and publish the FrontMark portal behind a reverse proxy."
tags:
  - "deployment"
  - "frontmark"
  - "nginx"
---

# Deploy the portal

This page explains the deployment path used by the team. Keep the source
readable: short sections, normal Markdown links, and public asset paths.

!!! tip "Before you start"
    Run a local preview before publishing so generated tags, optimized images
    and static routes are refreshed.

## Build locally

```sh
make preview
```

Open the preview URL printed by Astro and check the page navigation.

## Add a diagram

![Deployment architecture](/images/deployment/architecture.png){ width="720" }

Use public paths such as `/images/...`, `/documents/...` and `/videos/...`.
FrontMark adds the configured `site.base` during the build.

## Compare commands

| Command | Purpose |
| --- | --- |
| `make dev` | Work with hot reload. |
| `make preview` | Clean, rebuild and preview production output. |
| `make build` | Build the static site for deployment. |

=== "Static site"

    ```sh
    make build
    ```

=== "Docker image"

    ```sh
    make image IMAGE=registry.example.com/frontmark:latest
    ```

## Mount an interactive component

::: svelte { component=modal title="Release checklist" button-text="Open checklist" }
- Verify the public URL.
- Check the generated search index.
- Confirm reverse-proxy cache headers.
:::

## Link to related pages

- [Images](/docs/images-material/)
- [Svelte Components](/docs/svelte-components/)
- [Going further](/docs/going-further/)

Use these commands when a project must be emptied before a fresh import or reset to the reference branding.

make erase

make erase removes .md and .mdx files under src/content, then rebuilds the generated tag index when npm dependencies are installed. If dependencies are missing, it prints the make install && make tags recovery command instead of stopping after deletion. The default target root is controlled by CONTENT_MARKDOWN_ROOTS.

make erase-all

make erase-all removes Markdown content, resets astro.menu.links and menus.sidebar to empty lists while keeping their previous values as temporary YAML comments, restores the default brand assets from https://gitea.newkube.ia86.cc/sigMAX/Image_frontmark on the main branch, then removes demo media/assets such as local .mp4, .cast, test.svg, frontmark-hero.png, generated Svelte bundles and Supabase Svelte example sources, while keeping the emptied folders with .keep files. The next make import removes those menu comments after importing the MkDocs navigation. It rebuilds tags when npm dependencies are installed; otherwise it finishes the cleanup and prints the make install && make tags recovery command. This matters for forks: the default branding is fetched from the upstream FrontMark repository, not from the current fork origin.

After editing content, configuration or local overrides, rebuild and preview the complete site:

make preview