Create a simple hero section with title, subtitle, and call-to-action
button Add a features section with icons and descriptions Include a stats section with live data Add a responsive design with modern CSS features
This commit is contained in:
Ruben
parent
f0d50ff8bf
commit
0e19040473
101 changed files with 1356 additions and 7532 deletions
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="800" height="400" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="800" height="400" fill="#f0f0f0"/>
|
||||
<circle cx="400" cy="200" r="80" fill="#6366f1" opacity="0.8"/>
|
||||
<text x="400" y="340" font-family="system-ui, sans-serif" font-size="24" fill="#333" text-anchor="middle">Cover Image Example</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 324 B |
|
|
@ -0,0 +1,39 @@
|
|||
# Cover Images and Assets
|
||||
|
||||
FolderWeb automatically detects and uses cover images for social sharing and list views.
|
||||
|
||||
## How Cover Images Work
|
||||
|
||||
Place an image named `cover.jpg`, `cover.png`, or `cover.webp` in your content folder and it's automatically:
|
||||
|
||||
- Used as the Open Graph image for social media
|
||||
- Displayed in list views (when using templates that support it)
|
||||
- Available at the same URL as your content
|
||||
|
||||
## Supported Formats
|
||||
|
||||
- `cover.jpg` or `cover.jpeg`
|
||||
- `cover.png`
|
||||
- `cover.webp`
|
||||
- `cover.gif`
|
||||
|
||||
The system checks for these in order and uses the first one found.
|
||||
|
||||
## Other Assets
|
||||
|
||||
Any file in your content folder is accessible at the same URL path:
|
||||
|
||||
- Images: `photo.jpg`, `diagram.png`
|
||||
- Documents: `download.pdf`, `report.docx`
|
||||
- Data: `data.json`, `spreadsheet.csv`
|
||||
|
||||
Just reference them in your markdown:
|
||||
|
||||
```markdown
|
||||
|
||||
[Download PDF](report.pdf)
|
||||
```
|
||||
|
||||
## This Folder
|
||||
|
||||
This folder includes a simple SVG as the cover image. Check the folder structure to see how it's organized.
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
title = "Cover Images and Assets"
|
||||
summary = "Learn how cover images and static assets work in FolderWeb"
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
# Working with Metadata
|
||||
|
||||
Metadata provides structured information about your pages and controls how they display.
|
||||
|
||||
## What is metadata.ini?
|
||||
|
||||
Every folder can have a `metadata.ini` file that defines:
|
||||
|
||||
- Title (overrides automatic title extraction)
|
||||
- Date (overrides folder-based date detection)
|
||||
- Summary (appears in list views)
|
||||
- Custom template selection
|
||||
- Other custom fields
|
||||
|
||||
## Example metadata.ini
|
||||
|
||||
```ini
|
||||
title = "My Custom Title"
|
||||
date = "2024-11-20"
|
||||
summary = "A brief description that appears in lists"
|
||||
|
||||
[settings]
|
||||
page_template = "list-grid"
|
||||
show_date = false
|
||||
```
|
||||
|
||||
## Common Use Cases
|
||||
|
||||
**Override automatic titles** – If you want a title different from the folder name.
|
||||
|
||||
**Set explicit dates** – When the folder name doesn't include a date.
|
||||
|
||||
**Add summaries** – Give context in list views without showing full content.
|
||||
|
||||
**Choose templates** – Different sections can use different list templates.
|
||||
|
||||
**Hide metadata** – Set `show_date = false` to hide dates in lists.
|
||||
|
||||
## Custom Fields
|
||||
|
||||
You can add any fields you want:
|
||||
|
||||
```ini
|
||||
author = "Jane Doe"
|
||||
category = "Tutorial"
|
||||
tags = "metadata, configuration, tutorial"
|
||||
```
|
||||
|
||||
Then access them in custom templates via `$metadata['author']`.
|
||||
|
||||
## This Page's Metadata
|
||||
|
||||
Check out `metadata.ini` in this folder to see how the title, date, and summary are defined.
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
title = "Working with Metadata"
|
||||
date = "2024-11-20"
|
||||
summary = "Learn how to use metadata.ini files to control page information and behavior"
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
# Markdown Demonstration
|
||||
|
||||
This page shows the full range of Markdown formatting available through Parsedown.
|
||||
|
||||
## Text Formatting
|
||||
|
||||
You can use **bold text**, *italic text*, and even ***bold italic***.
|
||||
|
||||
Use `inline code` for technical terms or file paths like `/app/default/templates/`.
|
||||
|
||||
## Lists
|
||||
|
||||
Unordered lists:
|
||||
|
||||
- First item
|
||||
- Second item
|
||||
- Nested item
|
||||
- Another nested item
|
||||
- Third item
|
||||
|
||||
Ordered lists:
|
||||
|
||||
1. Step one
|
||||
2. Step two
|
||||
3. Step three
|
||||
|
||||
## Links and Images
|
||||
|
||||
Here's a [link to the homepage](/).
|
||||
|
||||
Images work too (when you add them to the folder):
|
||||
|
||||
|
||||
|
||||
## Code Blocks
|
||||
|
||||
```php
|
||||
<?php
|
||||
function greet(string $name): string {
|
||||
return "Hello, {$name}!";
|
||||
}
|
||||
|
||||
echo greet('World');
|
||||
```
|
||||
|
||||
## Blockquotes
|
||||
|
||||
> This is a blockquote. Perfect for highlighting important information or quotes from other sources.
|
||||
>
|
||||
> It can span multiple paragraphs.
|
||||
|
||||
## Tables
|
||||
|
||||
| Feature | Status |
|
||||
|---------|--------|
|
||||
| Markdown | ✓ |
|
||||
| HTML | ✓ |
|
||||
| PHP | ✓ |
|
||||
| JavaScript | ✗ |
|
||||
|
||||
## Horizontal Rules
|
||||
|
||||
---
|
||||
|
||||
That line above is a horizontal rule, useful for separating sections.
|
||||
|
||||
## What You Can Do
|
||||
|
||||
- Write content in simple Markdown
|
||||
- Mix HTML when needed
|
||||
- Include images stored alongside your content
|
||||
- Use all standard Markdown features
|
||||
|
||||
The file for this page is just `index.md` in a dated folder. The date is automatically extracted and displayed.
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
# Markdown-demonstrasjon
|
||||
|
||||
Denne siden viser hele utvalget av Markdown-formatering tilgjengelig gjennom Parsedown.
|
||||
|
||||
## Tekstformatering
|
||||
|
||||
Du kan bruke **fet tekst**, *kursiv tekst*, og til og med ***fet kursiv***.
|
||||
|
||||
Bruk `inline kode` for tekniske termer eller filstier som `/app/default/templates/`.
|
||||
|
||||
## Lister
|
||||
|
||||
Uspesifiserte lister:
|
||||
|
||||
- Første element
|
||||
- Andre element
|
||||
- Nestet element
|
||||
- Enda et nestet element
|
||||
- Tredje element
|
||||
|
||||
Ordnede lister:
|
||||
|
||||
1. Steg én
|
||||
2. Steg to
|
||||
3. Steg tre
|
||||
|
||||
## Lenker og bilder
|
||||
|
||||
Her er en [lenke til forsiden](/).
|
||||
|
||||
Bilder fungerer også (når du legger dem til i mappen):
|
||||
|
||||
|
||||
|
||||
## Kodeblokker
|
||||
|
||||
```php
|
||||
<?php
|
||||
function hils(string $navn): string {
|
||||
return "Hei, {$navn}!";
|
||||
}
|
||||
|
||||
echo hils('Verden');
|
||||
```
|
||||
|
||||
## Blokksitater
|
||||
|
||||
> Dette er et blokksitat. Perfekt for å fremheve viktig informasjon eller sitater fra andre kilder.
|
||||
>
|
||||
> Det kan spenne over flere avsnitt.
|
||||
|
||||
## Tabeller
|
||||
|
||||
| Funksjon | Status |
|
||||
|---------|--------|
|
||||
| Markdown | ✓ |
|
||||
| HTML | ✓ |
|
||||
| PHP | ✓ |
|
||||
| JavaScript | ✗ |
|
||||
|
||||
## Horisontale linjer
|
||||
|
||||
---
|
||||
|
||||
Linjen over er en horisontal linje, nyttig for å skille seksjoner.
|
||||
|
||||
## Hva du kan gjøre
|
||||
|
||||
- Skriv innhold i enkel Markdown
|
||||
- Bland inn HTML når det trengs
|
||||
- Inkluder bilder lagret sammen med innholdet ditt
|
||||
- Bruk alle standard Markdown-funksjoner
|
||||
|
||||
Filen for denne siden er bare `index.no.md` i en datert mappe. Datoen blir automatisk hentet ut og vist.
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
title = "Markdown Demonstration"
|
||||
summary = "Shows all the Markdown formatting features available through Parsedown"
|
||||
52
app/default/content/examples/file-based-routing/index.md
Normal file
52
app/default/content/examples/file-based-routing/index.md
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
# File-Based Routing
|
||||
|
||||
FolderWeb's routing is beautifully simple: **your folder structure is your URL structure**. No configuration files, no route definitions, no magic strings.
|
||||
|
||||
## How It Works
|
||||
|
||||
When you visit a URL, FolderWeb looks for matching folders and files:
|
||||
|
||||
```
|
||||
/content/
|
||||
├── index.md → /
|
||||
├── about/
|
||||
│ └── index.md → /about/
|
||||
└── blog/
|
||||
├── 2024-11-01-post/
|
||||
│ └── index.md → /blog/post/
|
||||
└── index.md → /blog/
|
||||
```
|
||||
|
||||
## Automatic Features
|
||||
|
||||
**Folder names become URLs** – Create a folder called `projects` and it's instantly available at `/projects/`
|
||||
|
||||
**Date prefixes are stripped** – `2024-11-01-my-post` becomes `/my-post/` in the URL
|
||||
|
||||
**Custom slugs via metadata** – Override the default URL with `slug = "custom-url"` in `metadata.ini`
|
||||
|
||||
**Trailing slashes** – Directories always redirect to include trailing slashes for consistency
|
||||
|
||||
## Example
|
||||
|
||||
This very page demonstrates file-based routing! The path is:
|
||||
|
||||
```
|
||||
app/default/content/examples/file-based-routing/index.md
|
||||
```
|
||||
|
||||
Which renders at:
|
||||
|
||||
```
|
||||
/examples/file-based-routing/
|
||||
```
|
||||
|
||||
No routes to define. No configuration to update. Just files and folders.
|
||||
|
||||
## Benefits
|
||||
|
||||
- **Intuitive** – If you can navigate folders, you understand the routing
|
||||
- **Refactor-friendly** – Moving content means moving folders
|
||||
- **No broken links** – URLs match the filesystem
|
||||
- **Fast** – No route matching overhead, direct file lookup
|
||||
- **Predictable** – What you see is what you get
|
||||
52
app/default/content/examples/file-based-routing/index.no.md
Normal file
52
app/default/content/examples/file-based-routing/index.no.md
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
# Filbasert routing
|
||||
|
||||
FolderWebs routing er vakkert enkelt: **mappestrukturen din er URL-strukturen din**. Ingen konfigurasjonsfiler, ingen rutedefinisjon, ingen magiske strenger.
|
||||
|
||||
## Hvordan det fungerer
|
||||
|
||||
Når du besøker en URL, ser FolderWeb etter matchende mapper og filer:
|
||||
|
||||
```
|
||||
/content/
|
||||
├── index.md → /
|
||||
├── om/
|
||||
│ └── index.md → /om/
|
||||
└── blogg/
|
||||
├── 2024-11-01-innlegg/
|
||||
│ └── index.md → /blogg/innlegg/
|
||||
└── index.md → /blogg/
|
||||
```
|
||||
|
||||
## Automatiske funksjoner
|
||||
|
||||
**Mappenavn blir URL-er** – Lag en mappe kalt `prosjekter` og den er umiddelbart tilgjengelig på `/prosjekter/`
|
||||
|
||||
**Datoprefikser fjernes** – `2024-11-01-mitt-innlegg` blir `/mitt-innlegg/` i URL-en
|
||||
|
||||
**Egendefinerte slugs via metadata** – Overstyr standard URL med `slug = "egendefinert-url"` i `metadata.ini`
|
||||
|
||||
**Avsluttende skråstrek** – Kataloger omdirigerer alltid til å inkludere avsluttende skråstrek for konsistens
|
||||
|
||||
## Eksempel
|
||||
|
||||
Denne siden demonstrerer filbasert routing! Stien er:
|
||||
|
||||
```
|
||||
app/default/content/examples/file-based-routing/index.no.md
|
||||
```
|
||||
|
||||
Som rendres på:
|
||||
|
||||
```
|
||||
/examples/file-based-routing/
|
||||
```
|
||||
|
||||
Ingen ruter å definere. Ingen konfigurasjon å oppdatere. Bare filer og mapper.
|
||||
|
||||
## Fordeler
|
||||
|
||||
- **Intuitivt** – Hvis du kan navigere mapper, forstår du routingen
|
||||
- **Refaktorvennlig** – Å flytte innhold betyr å flytte mapper
|
||||
- **Ingen ødelagte lenker** – URL-er matcher filsystemet
|
||||
- **Rask** – Ingen rutematching overhead, direkte filoppslag
|
||||
- **Forutsigbar** – Det du ser er det du får
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
title = "File-Based Routing"
|
||||
summary = "Your folder structure is your URL structure—no configuration needed"
|
||||
date = "2024-11-26"
|
||||
5
app/default/content/examples/index.md
Normal file
5
app/default/content/examples/index.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
# Examples
|
||||
|
||||
This section demonstrates different content types and features you can use in FolderWeb.
|
||||
|
||||
Each example below shows a different capability. Click through to see the source and how it works.
|
||||
11
app/default/content/examples/mix-formats/00-intro.md
Normal file
11
app/default/content/examples/mix-formats/00-intro.md
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
# Mix Formats
|
||||
|
||||
FolderWeb lets you **combine different file types** in the same directory. Markdown, HTML, and PHP files can coexist and render together on a single page.
|
||||
|
||||
## Supported Formats
|
||||
|
||||
- **`.md`** – Markdown for content (this file!)
|
||||
- **`.html`** – Static HTML snippets
|
||||
- **`.php`** – Dynamic PHP components
|
||||
|
||||
All files in the same directory are rendered in **alphabetical order**. Use number prefixes (like `00-`, `01-`, `02-`) to control the sequence.
|
||||
11
app/default/content/examples/mix-formats/00-intro.no.md
Normal file
11
app/default/content/examples/mix-formats/00-intro.no.md
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
# Bland formater
|
||||
|
||||
FolderWeb lar deg **kombinere forskjellige filtyper** i samme katalog. Markdown, HTML og PHP-filer kan eksistere side om side og rendres sammen på en enkelt side.
|
||||
|
||||
## Støttede formater
|
||||
|
||||
- **`.md`** – Markdown for innhold (denne filen!)
|
||||
- **`.html`** – Statiske HTML-snippets
|
||||
- **`.php`** – Dynamiske PHP-komponenter
|
||||
|
||||
Alle filer i samme katalog rendres i **alfabetisk rekkefølge**. Bruk talprefikser (som `00-`, `01-`, `02-`) for å kontrollere sekvensen.
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<section style="background: var(--color-accent-light); padding: var(--space-m); border-radius: 0.5rem; margin-block: var(--space-m);">
|
||||
<h2 style="margin-block-start: 0;">HTML Component</h2>
|
||||
<p>This section is rendered from <code>01-html-example.html</code> – a static HTML file with inline styles.</p>
|
||||
<p>HTML files are perfect for:</p>
|
||||
<ul>
|
||||
<li>Custom-styled sections</li>
|
||||
<li>Embedded media (video, audio, iframes)</li>
|
||||
<li>Interactive elements (forms, details/summary)</li>
|
||||
<li>SVG graphics and diagrams</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<section style="background: var(--color-accent-light); padding: var(--space-m); border-radius: 0.5rem; margin-block: var(--space-m);">
|
||||
<h2 style="margin-block-start: 0;">HTML-komponent</h2>
|
||||
<p>Denne seksjonen rendres fra <code>01-html-example.no.html</code> – en statisk HTML-fil med inline stiler.</p>
|
||||
<p>HTML-filer er perfekte for:</p>
|
||||
<ul>
|
||||
<li>Egendefinerte stilte seksjoner</li>
|
||||
<li>Innebygde medier (video, lyd, iframes)</li>
|
||||
<li>Interaktive elementer (skjemaer, detaljer/sammendrag)</li>
|
||||
<li>SVG-grafikk og diagrammer</li>
|
||||
</ul>
|
||||
</section>
|
||||
41
app/default/content/examples/mix-formats/02-dynamic.no.php
Normal file
41
app/default/content/examples/mix-formats/02-dynamic.no.php
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<?php
|
||||
$currentTime = date('H:i:s');
|
||||
$serverInfo = [
|
||||
'PHP-versjon' => PHP_VERSION,
|
||||
'Servertid' => $currentTime,
|
||||
'Filer i denne katalogen' => count(glob(__DIR__ . '/*')),
|
||||
];
|
||||
?>
|
||||
|
||||
<section style="background: linear-gradient(135deg, oklch(95% 0.08 150), oklch(98% 0.04 150)); padding: var(--space-m); border-radius: 0.5rem; margin-block: var(--space-m);">
|
||||
<h2 style="margin-block-start: 0;">PHP-komponent</h2>
|
||||
<p>Denne seksjonen rendres fra <code>02-dynamic.no.php</code> – en dynamisk PHP-fil som kjører på serversiden.</p>
|
||||
|
||||
<table style="width: 100%; margin-block: var(--space-s);">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Egenskap</th>
|
||||
<th>Verdi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($serverInfo as $key => $value): ?>
|
||||
<tr>
|
||||
<td><?= htmlspecialchars($key) ?></td>
|
||||
<td><strong><?= htmlspecialchars($value) ?></strong></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>PHP-filer kan:</p>
|
||||
<ul>
|
||||
<li>Generere dynamisk innhold</li>
|
||||
<li>Spørre databaser</li>
|
||||
<li>Lese fra filer eller API-er</li>
|
||||
<li>Beregne verdier i farten</li>
|
||||
<li>Inkludere egendefinert styling og logikk</li>
|
||||
</ul>
|
||||
|
||||
<p><em>Last inn denne siden på nytt for å se servertiden oppdatere seg!</em></p>
|
||||
</section>
|
||||
41
app/default/content/examples/mix-formats/02-dynamic.php
Normal file
41
app/default/content/examples/mix-formats/02-dynamic.php
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<?php
|
||||
$currentTime = date('H:i:s');
|
||||
$serverInfo = [
|
||||
'PHP Version' => PHP_VERSION,
|
||||
'Server Time' => $currentTime,
|
||||
'Files in this directory' => count(glob(__DIR__ . '/*')),
|
||||
];
|
||||
?>
|
||||
|
||||
<section style="background: linear-gradient(135deg, oklch(95% 0.08 150), oklch(98% 0.04 150)); padding: var(--space-m); border-radius: 0.5rem; margin-block: var(--space-m);">
|
||||
<h2 style="margin-block-start: 0;">PHP Component</h2>
|
||||
<p>This section is rendered from <code>02-dynamic.php</code> – a dynamic PHP file that executes server-side.</p>
|
||||
|
||||
<table style="width: 100%; margin-block: var(--space-s);">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Property</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($serverInfo as $key => $value): ?>
|
||||
<tr>
|
||||
<td><?= htmlspecialchars($key) ?></td>
|
||||
<td><strong><?= htmlspecialchars($value) ?></strong></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>PHP files can:</p>
|
||||
<ul>
|
||||
<li>Generate dynamic content</li>
|
||||
<li>Query databases</li>
|
||||
<li>Read from files or APIs</li>
|
||||
<li>Calculate values on-the-fly</li>
|
||||
<li>Include custom styling and logic</li>
|
||||
</ul>
|
||||
|
||||
<p><em>Refresh this page to see the server time update!</em></p>
|
||||
</section>
|
||||
38
app/default/content/examples/mix-formats/03-conclusion.md
Normal file
38
app/default/content/examples/mix-formats/03-conclusion.md
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
## Why Mix Formats?
|
||||
|
||||
Different content types have different needs:
|
||||
|
||||
**Markdown** – Fast authoring, readable source, perfect for articles and documentation
|
||||
|
||||
**HTML** – Full control over structure, ideal for custom layouts and embedded media
|
||||
|
||||
**PHP** – Dynamic content, server-side logic, database queries, real-time data
|
||||
|
||||
By mixing them freely, you get the best of all worlds. Write most content in Markdown for speed, add HTML for custom sections, and use PHP when you need dynamic behavior.
|
||||
|
||||
## This Page's Structure
|
||||
|
||||
This very page demonstrates format mixing:
|
||||
|
||||
```
|
||||
/examples/mix-formats/
|
||||
├── 00-intro.md (Markdown introduction)
|
||||
├── 01-html-example.html (Static HTML component)
|
||||
├── 02-dynamic.php (Dynamic PHP component)
|
||||
├── 03-conclusion.md (Markdown conclusion)
|
||||
└── metadata.ini (Page metadata)
|
||||
```
|
||||
|
||||
All four content files render seamlessly as one cohesive page. The numbered prefixes ensure they appear in the intended order.
|
||||
|
||||
## Use Cases
|
||||
|
||||
**Blog with special sections** – Markdown posts with custom HTML callouts or PHP-generated stats
|
||||
|
||||
**Documentation with demos** – Markdown explanations with live PHP examples
|
||||
|
||||
**Landing pages** – Mix markdown content with custom HTML heroes and PHP dynamic elements
|
||||
|
||||
**Portfolio sites** – Markdown project descriptions with HTML galleries and PHP filtering
|
||||
|
||||
The flexibility is yours.
|
||||
38
app/default/content/examples/mix-formats/03-conclusion.no.md
Normal file
38
app/default/content/examples/mix-formats/03-conclusion.no.md
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
## Hvorfor blande formater?
|
||||
|
||||
Forskjellige innholdstyper har forskjellige behov:
|
||||
|
||||
**Markdown** – Rask redigering, lesbar kilde, perfekt for artikler og dokumentasjon
|
||||
|
||||
**HTML** – Full kontroll over struktur, ideelt for egendefinerte layout og innebygde medier
|
||||
|
||||
**PHP** – Dynamisk innhold, server-side logikk, databasespørringer, sanntidsdata
|
||||
|
||||
Ved å blande dem fritt, får du det beste fra alle verdener. Skriv mesteparten av innholdet i Markdown for hastighet, legg til HTML for egendefinerte seksjoner, og bruk PHP når du trenger dynamisk oppførsel.
|
||||
|
||||
## Denne sidens struktur
|
||||
|
||||
Denne siden demonstrerer formatblanding:
|
||||
|
||||
```
|
||||
/examples/mix-formats/
|
||||
├── 00-intro.no.md (Markdown-introduksjon)
|
||||
├── 01-html-example.no.html (Statisk HTML-komponent)
|
||||
├── 02-dynamic.no.php (Dynamisk PHP-komponent)
|
||||
├── 03-conclusion.no.md (Markdown-konklusjon)
|
||||
└── metadata.ini (Sidemetadata)
|
||||
```
|
||||
|
||||
Alle fire innholdsfilene rendres sømløst som én sammenhengende side. De nummererte prefiksene sikrer at de vises i ønsket rekkefølge.
|
||||
|
||||
## Bruksområder
|
||||
|
||||
**Blogg med spesialseksjoner** – Markdown-innlegg med egendefinerte HTML-callouts eller PHP-generert statistikk
|
||||
|
||||
**Dokumentasjon med demoer** – Markdown-forklaringer med live PHP-eksempler
|
||||
|
||||
**Landingssider** – Bland markdown-innhold med egendefinerte HTML-heroer og PHP-dynamiske elementer
|
||||
|
||||
**Porteføljesider** – Markdown-prosjektbeskrivelser med HTML-gallerier og PHP-filtrering
|
||||
|
||||
Fleksibiliteten er din.
|
||||
3
app/default/content/examples/mix-formats/metadata.ini
Normal file
3
app/default/content/examples/mix-formats/metadata.ini
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
title = "Mix Formats"
|
||||
summary = "Combine Markdown, HTML, and PHP files to create rich, dynamic pages"
|
||||
date = "2024-11-26"
|
||||
5
app/default/content/examples/nested/index.md
Normal file
5
app/default/content/examples/nested/index.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
# Nested Content
|
||||
|
||||
FolderWeb supports content nested as deep as you need. Your folder structure is your URL structure.
|
||||
|
||||
This section demonstrates multi-level nesting. Explore the subdirectories to see how it works.
|
||||
5
app/default/content/examples/nested/level-two/index.md
Normal file
5
app/default/content/examples/nested/level-two/index.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
# Level Two
|
||||
|
||||
This is two levels deep: `/examples/nested/level-two/`
|
||||
|
||||
You can organize content in hierarchies that make sense for your site structure.
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# Level Three
|
||||
|
||||
This is three levels deep: `/examples/nested/level-two/level-three/`
|
||||
|
||||
The URL structure automatically follows your folder organization. No routing configuration needed.
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
# Level Four
|
||||
|
||||
Four levels deep: `/examples/nested/level-two/level-three/level-four/`
|
||||
|
||||
## How Deep Can You Go?
|
||||
|
||||
As deep as your filesystem allows. Each folder can contain:
|
||||
|
||||
- Content files (`.md`, `.html`, `.php`)
|
||||
- Subdirectories (which become sub-URLs)
|
||||
- Assets (images, PDFs, etc.)
|
||||
- A `metadata.ini` file
|
||||
- A `styles.css` file for page-specific styles
|
||||
|
||||
## Navigation
|
||||
|
||||
There's no automatic breadcrumb generation in the default theme, but you can add it in a custom template by parsing the URL path.
|
||||
|
||||
## Use Cases
|
||||
|
||||
**Documentation sites** – Organize by category/subcategory/topic
|
||||
|
||||
**Photo galleries** – Year/month/album/photo
|
||||
|
||||
**Course content** – Course/module/lesson/exercise
|
||||
|
||||
**Product catalogs** – Category/subcategory/product
|
||||
|
||||
The simplicity of file-based routing means your content organization is transparent and portable.
|
||||
47
app/default/content/examples/no-build-step/index.md
Normal file
47
app/default/content/examples/no-build-step/index.md
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
# No Build Step
|
||||
|
||||
Modern web development often involves complex build pipelines: transpilers, bundlers, minifiers, watchers, and more. FolderWeb takes a different approach: **edit a file, refresh the page, see the result**.
|
||||
|
||||
## What This Means
|
||||
|
||||
**No npm install** – No package.json, no node_modules folder, no dependency hell
|
||||
|
||||
**No compilation** – Write PHP, HTML, CSS, and Markdown directly
|
||||
|
||||
**No watching** – No background processes monitoring file changes
|
||||
|
||||
**No bundling** – Files are served as-is, leveraging HTTP/2 multiplexing
|
||||
|
||||
**No transpiling** – Modern PHP 8.4+ and CSS work in all browsers
|
||||
|
||||
## The Development Flow
|
||||
|
||||
Traditional workflow:
|
||||
```
|
||||
Edit file → Save → Wait for build → Reload → See changes
|
||||
```
|
||||
|
||||
FolderWeb workflow:
|
||||
```
|
||||
Edit file → Save → Reload → See changes
|
||||
```
|
||||
|
||||
That's it. No waiting. No build errors. No cache invalidation headaches.
|
||||
|
||||
## But What About...
|
||||
|
||||
**Performance?** – PHP is fast. No JavaScript means pages load instantly. CSS is cacheable with MD5 versioning.
|
||||
|
||||
**Minification?** – HTTP/2 compression handles this. Serve from behind a CDN if needed.
|
||||
|
||||
**Modern CSS?** – CSS nesting, custom properties, oklch() colors, grid—all native, all supported.
|
||||
|
||||
**Development speed?** – Instant feedback loop beats any hot reload system.
|
||||
|
||||
## Why This Matters
|
||||
|
||||
Build steps add complexity. Every dependency is a potential breaking change. Every tool is another thing to learn, configure, and maintain.
|
||||
|
||||
FolderWeb will work the same way in 5 years, 10 years, even 20 years. Your content is just files. Your templates are just PHP. Your styles are just CSS.
|
||||
|
||||
**Simple lasts.**
|
||||
47
app/default/content/examples/no-build-step/index.no.md
Normal file
47
app/default/content/examples/no-build-step/index.no.md
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
# Uten byggesteg
|
||||
|
||||
Moderne webutvikling involverer ofte komplekse byggepipelines: transpilere, bundlere, minifisere, overvåkere og mer. FolderWeb tar en annen tilnærming: **rediger en fil, oppdater siden, se resultatet**.
|
||||
|
||||
## Hva dette betyr
|
||||
|
||||
**Ingen npm install** – Ingen package.json, ingen node_modules-mappe, ingen avhengighetshelvete
|
||||
|
||||
**Ingen kompilering** – Skriv PHP, HTML, CSS og Markdown direkte
|
||||
|
||||
**Ingen overvåkning** – Ingen bakgrunnsprosesser som overvåker filendringer
|
||||
|
||||
**Ingen bundling** – Filer serveres som de er, ved å utnytte HTTP/2-multipleksing
|
||||
|
||||
**Ingen transpilering** – Moderne PHP 8.4+ og CSS fungerer i alle nettlesere
|
||||
|
||||
## Utviklingsflyten
|
||||
|
||||
Tradisjonell arbeidsflyt:
|
||||
```
|
||||
Rediger fil → Lagre → Vent på bygg → Last inn på nytt → Se endringer
|
||||
```
|
||||
|
||||
FolderWeb-arbeidsflyt:
|
||||
```
|
||||
Rediger fil → Lagre → Last inn på nytt → Se endringer
|
||||
```
|
||||
|
||||
Det er det. Ingen venting. Ingen byggefeil. Ingen cache-invalideringshodebryet.
|
||||
|
||||
## Men hva med...
|
||||
|
||||
**Ytelse?** – PHP er rask. Ingen JavaScript betyr at sider lastes øyeblikkelig. CSS er cachebar med MD5-versjonering.
|
||||
|
||||
**Minifisering?** – HTTP/2-kompresjon håndterer dette. Server fra bak en CDN om nødvendig.
|
||||
|
||||
**Moderne CSS?** – CSS-nesting, custom properties, oklch()-farger, grid—alt native, alt støttet.
|
||||
|
||||
**Utviklingshastighet?** – Øyeblikkelig tilbakemeldingssløyfe slår ethvert hot reload-system.
|
||||
|
||||
## Hvorfor dette betyr noe
|
||||
|
||||
Byggesteg legger til kompleksitet. Hver avhengighet er en potensiell breaking change. Hvert verktøy er noe nytt å lære, konfigurere og vedlikeholde.
|
||||
|
||||
FolderWeb vil fungere på samme måte om 5 år, 10 år, til og med 20 år. Innholdet ditt er bare filer. Malene dine er bare PHP. Stilene dine er bare CSS.
|
||||
|
||||
**Enkelt varer.**
|
||||
3
app/default/content/examples/no-build-step/metadata.ini
Normal file
3
app/default/content/examples/no-build-step/metadata.ini
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
title = "No Build Step"
|
||||
summary = "Edit, save, refresh—that's it. No compilation, no bundling, no waiting"
|
||||
date = "2024-11-26"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Oldest Post
|
||||
|
||||
The oldest post in this compact list.
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Older Post
|
||||
|
||||
An older post showing date ordering.
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Recent Post
|
||||
|
||||
A recent example post.
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Compact Template
|
||||
|
||||
This section uses `list-compact.php` for a minimal, clean list view.
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
title = "Compact Template Example"
|
||||
|
||||
[settings]
|
||||
page_template = "list-compact"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Grid Template
|
||||
|
||||
This section uses `list-grid.php` to display items in a responsive grid with cards.
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Grid Item One
|
||||
|
||||
This is an example item in the grid layout.
|
||||
|
|
@ -0,0 +1 @@
|
|||
summary = "First item demonstrating grid layout"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Grid Item Three
|
||||
|
||||
A third item to show the grid layout with multiple items.
|
||||
|
|
@ -0,0 +1 @@
|
|||
summary = "Third grid item"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Grid Item Two
|
||||
|
||||
Another example showing how items appear in the grid.
|
||||
|
|
@ -0,0 +1 @@
|
|||
summary = "Second item in the grid"
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
title = "Grid Template Example"
|
||||
|
||||
[settings]
|
||||
page_template = "list-grid"
|
||||
24
app/default/content/examples/templates-demo/index.md
Normal file
24
app/default/content/examples/templates-demo/index.md
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# List Templates
|
||||
|
||||
FolderWeb includes several list templates you can use for different presentation styles.
|
||||
|
||||
This section demonstrates the different templates by using subdirectories. Each subdirectory below uses a different template via `metadata.ini`.
|
||||
|
||||
## Available Templates
|
||||
|
||||
**list.php** – Default linear list with optional cover images
|
||||
|
||||
**list-grid.php** – Grid layout with cards, great for galleries or portfolios
|
||||
|
||||
**list-compact.php** – Minimal list showing just titles and dates
|
||||
|
||||
## Choosing a Template
|
||||
|
||||
In any folder's `metadata.ini`, add:
|
||||
|
||||
```ini
|
||||
[settings]
|
||||
page_template = "list-grid"
|
||||
```
|
||||
|
||||
The three subdirectories below each use a different template. Compare them to see which fits your content best.
|
||||
Loading…
Add table
Add a link
Reference in a new issue