# Glossary ## Glossary Plain-language meanings of the words used in these docs. ### Theme Words | Word | What it means | | -------------------- | ---------------------------------------------------------------------------------------------------------- | | **Astro** | The tool that turns Margo's files into a website. You don't need to learn it to edit content | | **Tailwind CSS** | The styling system. Classes like `text-ink` or `mt-8` in components set colors and spacing | | **Static site** | A website made of ready-made files, with no database or server code to run, so it is simple to host | | **Node.js** | The program that runs Astro on your computer | | **npm** | Comes with Node.js. Installs the theme's tools (`npm ci` or `npm install`) and runs its commands (`npm run dev`) | | **Terminal** | A window where you type commands. In VS Code: **Terminal → New Terminal** | | **Dev server** | The local copy of your site at `http://localhost:4321/` that updates when you save. Started with `npm run dev` | | **Build** | Turning the files into the finished website in the `dist/` folder, with `npm run build` | | **Deploy** | Putting the built site on the internet, on a host such as Netlify, Vercel, or Cloudflare Pages | | **Route** | A file in `src/pages/` that becomes a page and decides which sections it shows | | **Section** | One full-width block of a page (hero, projects, FAQ). A component plus a content file | | **Component** | A `.astro` file that draws part of the page. You rarely need to edit these | | **Content file** | A `.md` or `.mdx` file in `src/content/` that holds text and options | | **Markdown** | A simple way to format text: `**bold**`, `## heading`, `- list item` | | **MDX** | Markdown that can also use components (shortcodes) such as `` or `` | | **Shortcode** | A ready-made component you can place inside an `.mdx` file. `/components/` on your local site shows them all | | **Frontmatter** | The settings block between two `---` lines at the top of a content file, written in YAML | | **YAML** | The `key: value` format used in frontmatter. Indentation matters | | **TOML** | The `key = value` format of `config.toml`, grouped under `[tables]` | | **JSON** | The `"key": "value"` format of the menu, language, font, social, and translation files | | **Collection** | A folder of similar entries: projects, services, team members, journal posts | | **Entry** | One file in a collection, which usually becomes one page | | **Slug** | The part of the URL that names a page: `ceramic-forms` in `/projects/ceramic-forms/`. Comes from the file name, or `customSlug` | | **Id** | The file name of an entry without `.md`, such as `ceramic-forms`. Other files use it to point to that entry, for example the hero `cards` list | | **Named block** | A section's settings written inside a page's frontmatter, such as `heroSection:`, to change that section on that page only | | **Layout** | One of the looks a section can have, chosen with `options.layout`. `/elements/` previews them | | **Draft** | A page with `draft: true`. It shows on the dev server but is not built | | **i18n** | Short for "internationalization": the multi-language setup | | **RTL** | Right to left: the reading direction of languages such as Arabic. Margo's Arabic pages are mirrored | | **Schema** | The list of fields a content file may have. `npm run astro-check` and the build report mistakes in files that have one. The files in `sections/`, `contact/`, `faq/`, and `pricing/` have none, so check those pages in the browser | | **Lucide** | The free icon set Margo uses. Any name from [lucide.dev/icons](https://lucide.dev/icons/) works, for example `"PenTool"` or `"Camera"` | | **Dark mode** | The dark color scheme. Visitors switch with the light/dark button; `colorMode` in `[settings]` sets what they see first | | **Open Graph image** | The preview picture shown when a link is shared on social media or in chat apps. Margo can draw one for each page | | **Structured data** | Hidden JSON-LD in each page that tells search engines who runs the site and what each page is about | | **Sitemap** | A list of every page, for search engines (`/sitemap-index.xml`) | | **`llms.txt`** | A proposed format: a Markdown map of your site that AI assistants can read | | **Git** | A tool that saves versions of your project, so you can undo any change | | **Commit** | One saved version in git | | **Diff** | A view of exactly what changed in a file: removed lines and added lines | ### Margo Words | Word | What it means | | ---------------------- | ---------------------------------------------------------------------------------------------------- | | **Project** | One piece of work in `src/content/projects/`, with its own page under `/projects/`. A project can be a case study or a photo series | | **Case study** | A project page that tells the story of one job: a facts strip (client, year, role, services), results, a client quote, and image and text blocks. The `default` template | | **Split case** | A project page with the facts kept beside the images as you scroll. The `split` template | | **Photo series** | A set of photographs shown as a grid that opens in a full-screen viewer (a lightbox). The `gallery` template | | **Template** | The look of a project page, set with `options.layout` in the project file: `default`, `gallery`, or `split` | | **Archive** | The `/archive/` page: every project in one list | | **Journal** | Margo's blog, at `/blog/`. Posts are in `src/content/blog/`, and their authors in `src/content/author/` | | **Page header** | The title area at the top of an inner page, set with the `pageHeader` block of that page | | **Two-tone heading** | A section title in two lines, split by `\n` in the text. Both lines share the text color until you give the first line its own color in `src/styles/theme.css` (`--color-tone-1`). A word in `*stars*` is set in the italic accent font | | **Header layout** | The look of the site header: `pill`, `bar`, or `overlay` (`[settings.layout] header`, or `headerLayout` on one page) | | **Footer layout** | The look of the footer: `wordmark`, `columns`, or `email` (`[settings.layout] footer`, or `footerLayout` on one page) | | **Contact dock** | A small bar at the bottom of the screen with **Copy email** and **Book a call** buttons (`[settings.contactDock]`) | | **Availability pill** | The small label with a green dot, such as "Taking two new projects in November", in the hero and other sections | | **Aurora** | The soft color fields behind every page (`aurora` in `[settings.layout]`) | | **Frame** | The thin ruled lines at the edges of the content and the tops of sections (`frame` in `[settings.layout]`) | | **Theme credit** | One small line in every footer layout and at the end of `llms.txt`, editable in `config.toml` (`[settings.themeCredit]`) | | **Layout switcher** | A floating **Change layout** button for the theme's demo. Off by default (`[settings.layoutSwitcher] enable = false`); keep it off on your site | | **Elements page** | `/elements/`: a page that shows every layout of the sections that have more than one |