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
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"
|
||||
Loading…
Add table
Add a link
Reference in a new issue