# Guider

> Produkt A · 2026-10-30 · https://groovy.simplo.dev/produkt-a/guider

Fördjupande guider för att bygga ut dokumentationen.

Praktiska guider för att skriva sidor, bygga navigation och konfigurera sök.

> [!SUBPAGES 2 descriptions]
> I den här sektionen

## Skriva sidor

Riktlinjer för att skriva dokumentationssidor i Markdown.

### Grundstruktur

Varje sida är en Markdown-fil med YAML-frontmatter högst upp. Titeln sätts i
frontmatter och blir sidans `h1`.

#### Rubriker

Använd `h2` och `h3` för att strukturera innehållet — dessa dyker automatiskt
upp i högerspaltens innehållsförteckning.

```markdown
---
title: Min sida
---

## Första avsnittet
Innehåll här.
```

### Kodblock

Kodblock med språkangivelse får syntax enligt Markdown-standard och en
kopieringsknapp vid hovring.

```php
function hello(): string
{
    return 'Hej världen';
}
```

### Tabeller

| Kolumn A | Kolumn B | Kolumn C |
| --- | --- | --- |
| Ett | Två | Tre |
| Fyra | Fem | Sex |

### Callouts

Använd GitHub-stilens varningsblock för att lyfta fram viktig information.

> [!NOTE]
> Detta är en informativ notering som inte kräver åtgärd.

> [!WARNING]
> Detta är en varning — läsaren bör vara uppmärksam innan de går vidare.

Se även [navigation](https://groovy.simplo.dev/produkt-a/guider/navigation) för hur sidor grupperas i menyn.

## Navigation

Så byggs vänstermenyn upp från sidträdet.

### Ordning och synlighet

Sidor med numeriskt prefix i mappnamnet, till exempel `01.installation`,
räknas som synliga och sorteras enligt numret.

```text
03.komma-igang/
  01.installation/
  02.konfiguration/
```

#### Dölja en sida

En sida utan numeriskt prefix visas inte i menyn men är fortfarande nåbar via
direktlänk om den är routbar.

![Alternativ text](https://groovy.simplo.dev/produkt-a/guider/navigation/ibm.svg?classes=docs-w-75,docs-right)

### Gruppetiketter

En sida kan markeras som gruppetikett i sina inställningar (fliken **Docs** i
Admin). Då visas den som en icke-klickbar rubrik och dess undersidor listas
under den.

[En länk till en annan sida](https://groovy.simplo.dev/produkt-a/produkt/v3)

[En länk till SVG](https://groovy.simplo.dev/produkt-a/guider/navigation/ibm.svg)

[En länk till en PDF](https://groovy.simplo.dev/produkt-a/guider/navigation/testdokument.pdf)

[En länk till en youtube-video](https://www.youtube.com/watch?v=YZPXdO2zT3w)

[En länk till en lokal MP4-video](https://groovy.simplo.dev/produkt-a/guider/navigation/sample-5s.mp4)

#### Inbäddat

[Video](https://www.youtube.com/watch?v=bUVhHzE67I4 "embed 90%")

[En inbäddad youtube-video](https://www.youtube.com/watch?v=YZPXdO2zT3w "embed 90%")

[En inbäddad lokal video](https://groovy.simplo.dev/produkt-a/guider/navigation/sample-5s.mp4 "embed 90%")

[En inbäddad PDF, 500 px hög, till höger](https://groovy.simplo.dev/produkt-a/guider/navigation/testdokument.pdf "embed 500 right")

[En inbäddad Vimeo-video, halv bredd](https://vimeo.com/76979871 "embed 50%")

![En bild i halv bredd](https://groovy.simplo.dev/produkt-a/guider/navigation/ibm.svg?classes=docs-w-50)

![En bild i en tredjedels bredd, till höger](https://groovy.simplo.dev/produkt-a/guider/navigation/ibm.svg?classes=docs-w-33,docs-right)

> [!TIP]
> Gruppetiketter är praktiska för att dela upp stora sektioner utan att skapa
> en egen landningssida.

### Aktiv gren

Menyn fäller automatiskt ut den gren som innehåller den aktuella sidan, och
den aktiva sidan markeras visuellt.

[testdokument.pdf](https://groovy.simplo.dev/produkt-a/guider/navigation/testdokument.pdf "embed 300")

| Tillstånd | Beskrivning |
| --- | --- |
| `active` | Sidan som visas just nu |
| `activeChild` | En förälder till den aktiva sidan |

### This is a story

Läs vidare om [sökfunktionen](https://groovy.simplo.dev/produkt-a/guider/sok).

## Sök

Hur klientsidessöket fungerar och hur du triggar det.

### Öppna sökrutan!

Tryck `Cmd+K` (macOS) eller `Ctrl+K` (Windows/Linux) för att öppna
sökrutan, eller klicka på sökknappen i toppmenyn.

```js
window.addEventListener('keydown', (e) => {
  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
    // öppna sökrutan
  }
});
```

#### Sökindex

Temat exponerar ett JSON-index på `/search-index.json` som innehåller titel,
url, sektion, rubriker och en avkortad textversion av varje sida.

### Poängsättning

Träffar rankas efter var sökordet matchar.

| Träfftyp | Poäng |
| --- | --- |
| Titel | 10 |
| Rubrik | 5 |
| Brödtext | 1 |

> [!NOTE]
> Sökindexet hämtas lat, det vill säga först när sökrutan öppnas för första
> gången per sidladdning.

> [!WARNING]
> Sökindexet innehåller inte innehåll från opublicerade eller dolda sidor.

Se [referensavsnittet](https://groovy.simplo.dev/produkt-a/referens) för fler tekniska detaljer.

## Heroes

En banner överst på sidan eller nere i texten, med färdiga bakgrunder eller en egen bild.

Den här sidans hero ligger i sidans frontmatter (`hero:`) och bär sidans titel och beskrivning. Den ställs in under *Page settings* i redigeringsläget.

### I texten

En hero i texten skrivs som en callout av typen `HERO`. I editorn är det blocket *Hero*.

> [!HERO ocean]
> ## Kom igång på fem minuter
>
> Installera temat, skapa din första sida och publicera.
>
> [Läs guiden](https://groovy.simplo.dev/produkt-a/komma-igang)

Med en egen bild ur sidans mapp, hög och centrerad:

> [!HERO night tall center]
> ## Egen bild som bakgrund
>
> En mörk ton läggs över bilden så att texten går att läsa.
>
> ![](https://groovy.simplo.dev/produkt-a/guider/heroes/landskap.png)

Mörk text, accentfärgad stor knapp och kontur:

> [!HERO mint dark-text button-accent button-large]
> ## Prova själv
>
> [Öppna editorn](https://groovy.simplo.dev/produkt-a/guider/skriva-sidor)

> [!HERO ember button-outline]
> ## Konturknapp
>
> [Läs mer](https://groovy.simplo.dev/produkt-a/referens)

Egen färg (`#5c3d2e`), textfärgen följer:

> [!HERO #5c3d2e]
> ## Egen färg
>
> Skriv `#rrggbb` som ord, eller välj i färgväljaren.

Sajtens egna heroes `brand` (en gradient) och `skyline` (bakgrund, bild och ton), ur temainställningarna → Content — heroes:

> [!HERO brand]
> ## Sajtens egen gradient
>
> Bakgrunden `brand` kommer ur temainställningarna.

> [!HERO skyline tall]
> ## Sajtens egen bild
>
> Bild, ton och textfärg följer med namnet `skyline`; höjden är sidans.

> [!HERO sand compact]
> ## sand

Kompakt, i en ljus färg:

> [!HERO dawn compact]
> ## Nyheter i version 2
>
> Tre saker som är värda att känna till.

### Alla bakgrunder

> [!HERO gray compact]
> ## gray

> [!HERO blue compact]
> ## blue

> [!HERO teal compact]
> ## teal

> [!HERO yellow compact]
> ## yellow

> [!HERO pink compact]
> ## pink

> [!HERO ink compact]
> ## ink

> [!HERO indigo compact]
> ## indigo

> [!HERO ocean compact]
> ## ocean

> [!HERO twilight compact]
> ## twilight

> [!HERO berry compact]
> ## berry

> [!HERO ember compact]
> ## ember

> [!HERO forest compact]
> ## forest

> [!HERO night compact]
> ## night

> [!HERO dawn compact]
> ## dawn

> [!HERO mist compact]
> ## mist

> [!HERO mint compact]
> ## mint

## Office-filer

Word, PowerPoint och Excel visade direkt i sidan.

En länk till en Word-, PowerPoint- eller Excel-fil på sidan, med titeln `embed` och ensam i sitt stycke, visas som dokumentet självt. Allt ritas i läsarens webbläsare; ingenting skickas till någon tjänst. Ikonen i hörnet öppnar filen i en större vy, med *Download*.

### Word

[Rutin för månadsavstämning](https://groovy.simplo.dev/produkt-a/guider/office-filer/rutin.docx "embed")

### PowerPoint

[Kvartalsgenomgång](https://groovy.simplo.dev/produkt-a/guider/office-filer/kvartal.pptx "embed")

### Excel

[Budget](https://groovy.simplo.dev/produkt-a/guider/office-filer/budget.xlsx "embed 420")

### Bredd och sida

Samma titel som för andra inbäddningar: `"embed 60% right"`.

[Kvartalsgenomgång, 60 % till höger](https://groovy.simplo.dev/produkt-a/guider/office-filer/kvartal.pptx "embed 60% right")

### Som vanlig länk

En vanlig länk öppnar filen i samma vy som ikonen: [rutin.docx](https://groovy.simplo.dev/produkt-a/guider/office-filer/rutin.docx), [kvartal.pptx](https://groovy.simplo.dev/produkt-a/guider/office-filer/kvartal.pptx), [budget.xlsx](https://groovy.simplo.dev/produkt-a/guider/office-filer/budget.xlsx).

## Sajtlista

En lista över sajterna i installationen, med titel och beskrivning.

En sida kan lista installationens sajter med blocket `SITES`. Varje besökare ser bara de sajter hon får läsa. Den sajt man står på är markerad och saknar länk.

> [!SITES]
> Dokumentationerna

Med gemensamma taggar på grupperas listan per tagg, som i sajtväljaren. I en sajt utan subsajter ritar blocket ingenting.