shortcode readme

diff --git a/README.md b/README.md
index beadba62518eecdcd3610f90508b402508c377ee..0023e3fc7c9b72662636ed709886d079225bc626 100644 (file)
--- a/README.md
+++ b/README.md
@@ -14,6 +14,7 @@
 
 ## How It Works  
 FlatMark dynamically converts Markdown files in the folder `/pages` (or `/pages-XX` for multilingual sites) into HTML pages.  
+Find the full markdown-syntax here: [www.markdownguide.org/basic-syntax](https://www.markdownguide.org/basic-syntax/)  
 
 ### URL Structure  
 
@@ -51,8 +52,9 @@ FlatMark dynamically converts Markdown files in the folder `/pages` (or `/pages-
 Set up **single** or **multi-language setup** in `index.php`:  
 
 ```php
-    // Default: multilingual setup. If your site is a single-language setup, change 'config-multilang.php' to 'config-basic.php' in the next line 
-        require 'config-multilang.php';
+// Default: multilingual setup
+// If your site is a single-language setup, change 'config-multilang.php' to 'config-basic.php' in the next line 
+require 'config-multilang.php';
 ```
 After that you can also delete the config-file which you are not using - only one of the two config-files is needed.
 

diff --git a/TODO.md b/TODO.md
index a5a24c0288f207592a1a02f81668eb5bf3195e14..09393b86ca4121c7c4d796eda8fd3da2dca353e5 100644 (file)
--- a/TODO.md
+++ b/TODO.md
@@ -1,16 +1,19 @@
 ---
-- styling of readme-page (codeblocks, numbered list, table)
-- rename/divide examples-page to shortcodes and markdown
-- other red in logo
+- styling numbered list
+- Markdown-page?
 - optimize text on examples page
 - links and buttons (shortcode) styling
 - readme: add paragraph "customisation" to readme
-- readme: add paragraph "flatmark as cms" to readme
 - more text, contact page, slick-slider-page as reference?
 - github: license MIT
 - githup: best settings for publication?
 
 ---
+x shortcode to directly include readme on a page!
+x readme: add paragraph "flatmark as cms" to readme
+x rename/divide examples-page to shortcodes and markdown
+x styling of readme-page (codeblocks, numbered list, table)
+x other red in logo
 x readme: add from allmanritter-page
 x readme: add info about shortcodes
 x readme: add paragraph about basic and multilang-configuration

diff --git a/pages-en/README.md b/pages-en/README.md
deleted file mode 100644 (file)
index d87d40d..0000000
--- a/pages-en/README.md
+++ /dev/null
@@ -1,136 +0,0 @@
-# FlatMark
-
-*A lightweight, flat-file Markdown-based site generator with optional multilingual support.*
-
-## Features  
-- Lightweight and fast
-- Easy-to-edit content, just Markdown files  
-- Just requires basic php, no database needed
-- Supports **single-language** and **multi-language** setups  
-- Auto-parses **Markdown** to HTML using [Parsedown](https://parsedown.org/)  
-- **Custom meta fields** for title, description, and robots meta tag for each site 
-- Provides simple **Shortcodes** to arrange and style your content (e.g. columns, different backgrounds)
-- Basic **Theme** which you can customize and enhance  
-
-## How It Works  
-FlatMark dynamically converts Markdown files in the folder `/pages` (or `/pages-XX` for multilingual sites) into HTML pages.  
-
-### URL Structure  
-
-| Setup           | Example URL | Maps to File          |
-|-----------------|-------------|-----------------------|
-| Single Language | `/about`    | `/pages/about.md`     |
-| Multi-Language  | `/en/about` | `/pages-en/about.md`  |
-
-### Folder Structure
-
-    /flatmark/
-    │── /files/                 # Files (images, pdfs etc.)
-    │── /pages-en/              # English pages
-    │── /pages-de/              # German pages
-    │── /theme/                 # Styles, assets and templates of the theme
-    │── config-basic.php        # Single-language setup
-    │── config-multilang.php    # Multi-language setup
-    │── index.php               # Main file
-    │── .htaccess               # URL rewriting
-    │── README.md               # Documentation
-
-
-## Requirements  
-- PHP 7.4+  
-- Apache/Nginx with mod_rewrite enabled 
-
-## Installation  
-1. **Download** the latest release of flatMark which contains a simple example-page
-2. **Upload** the files to your web server.  
-3. **Configuration** choose between single or multilanguage-setup in `index.php` (default: multi-language)
-4. **Edit content** inside `/pages` (or `/pages-XX` for multilingual sites).  
-5. Done! Your site is ready.  
-
-## Configuration  
-Set up **single** or **multi-language setup** in `index.php`:  
-
-```php
-    // Default: multilingual setup. If your site is a single-language setup, change 'config-multilang.php' to 'config-basic.php' in the next line 
-        require 'config-multilang.php';
-```
-After that you can also delete the config-file which you are not using - only one of the two config-files is needed.
-
-## Defaults: Header, Footer, Homepage, 404-page
-
-Each pages-folder must contain at least these files for the website to function:  
-
-- 01-header.md  
-Edit this file to change logo, title, subtitle of the website and the main menu. The main-menu must be a list of links to function correctly. You also have the option to add further elements like contact-details or a language-menu by wrapping them in the shortcode `{extras}` `{/extra}`. 
-
-- 02-footer.md  
-Edit this file to change the text in the footer and the footer-menu. The footer-menu must also be a list of links to function correctly. The shortcode `{year}` will display the current year. 
-
-- home.md  
-This file is the default startpoint of your website.   
-
-- 404.md  
-Edit this file to change the error-message which is shown if a page is not found. 
-
-
-## Meta Information (Title, Description & Robots)
-Each Markdown page can include optional meta information using HTML comments at the top of the file.
-These values will be automatically extracted and used in the <head> section of the generated HTML page.
-
-Example Markdown file (about.md) with meta information:
-
-    <!-- title: About Us -->
-    <!-- description: Learn more about our mission and team. -->
-    <!-- robots: index, follow -->
-
-    # Welcome to Our Company
-
-    We are committed to providing the best services...
-
-- title → Sets the `<title>` of the page. Defaults to the filename if not provided.
-- description → Used for the `<meta name="description">` tag (important for SEO). Defaults to an empty string if not set.
-- robots → Controls search engine indexing (index, follow / noindex, nofollow). Defaults to index, follow.
-
-## Shortcodes
-flatMark supports simple shortcodes for structured content. Some examples:
-
-    {columns 50-50}
-    Left column
-    {columns-seperator}
-    Right column
-    {/columns}
-
-    {background color-01}
-    This content has a colored background.
-    {/background}
-
-These shortcodes are part of the theme and are all located in the file `/theme/shortcodes.php`.
-You can edit this file to change existing shortcodes or add even more.
-
-
-## Customization
-- Themes: Modify /theme/css/style.css for styling.
-- Header/Footer: Edit 01-header.md and 02-footer.md in each language folder.
-
-## Use flatmark as a CMS
-Lets first define the requirements for a simple Content-Management-System (CMS).  
-**You would like to do the following directly in your Browser:**
-- Login via username & password
-- Edit website content in a text-editor
-- Upload/Manage files
-- Change settings
-
-Even if flatMark itself does not provide that, you might already have resources at hand which you can use to do exactly that!
-- **Webhoster**  
-Your webhoster might already provide a seperate WebFTP-Login with a build-in Text-editor.   
-Example: [all-inkl webftp](https://webftp.all-inkl.com/)
-- **Nextcloud**  
-If your are using Nextcloud and the default-plugin "External Storage", you can use that to acces your flatMark-Installation via FTP. For Markdown-files Nextcloud even provides a WYSIWYG-Editor by default.  
-Website: [Nextcloud](https://nextcloud.com/)
-- **Tinyfilemanager**  
-If you do not have none of the options above, you still can install this simple file-manager which is actually just one single php-file. Just upload it to the root-folder of your flatMark-Installation and acces it via your browser!  
-(Do not forget to change the password in that file before you upload it)  
-Website: [tinyfilemanager](https://tinyfilemanager.github.io/)
-
-## License
-FlatMark is released under the MIT License.
\ No newline at end of file

diff --git a/pages-en/home.md b/pages-en/home.md
index 79b8c744f082f86847f46044ad3d5035fac77310..a7dc3c1a7bf18ca0d939ad7ac1b6f79b6a152022 100644 (file)
--- a/pages-en/home.md
+++ b/pages-en/home.md
@@ -8,7 +8,7 @@
 {/img-rounded}
 {columns-seperator}
 # flatMark
-dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+A minimal PHP-based flat-file CMS that gives developers full control. Content is written in Markdown, enhanced with flexible shortcodes for layouts, styling, and dynamic elements. No database, no build step — just Markdown, HTML, and your creativity.
 {/background}{/columns}
 
 {columns 33-66}
@@ -17,8 +17,4 @@ dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invid
 ![Pic](/files/example-pic-03.jpg)
 {/columns}
 
-{columns 50-50}
-dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
-{columns-seperator}
-dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
-{/columns}
\ No newline at end of file
+{readme}
\ No newline at end of file

diff --git a/theme/css/style.css b/theme/css/style.css
index 9a433a94bf88dc0d52fd87cf9b4ec4444c4e3530..7add5f664b99b732e33c3cf7130cd54a79a717ad 100644 (file)
--- a/theme/css/style.css
+++ b/theme/css/style.css
@@ -171,7 +171,8 @@ header #main-nav ul a:is(:hover, :focus, .active) {background: var(--colorlight)
 main {padding: 0 var(--side-space-02) var(--space-below-01) var(--side-space-02);margin-bottom: var(--space-below-00);}
 
 main > h1 {background: var(--color-02);color: var(--colorlight);padding: var(--space-below-00) var(--side-space-01);text-align: right;}
-main ul {list-style: disc;padding-left: var(--side-space-01);}
+main ul {padding-left: var(--side-space-01);list-style: disc;}
+main ol {padding-left: var(--side-space-01);}
 main table {width: 100%;}
 main table tr {border-bottom: 1px solid var(--color-gray-01);}
 main table th,
@@ -190,6 +191,7 @@ main .background {padding: var(--space-below-01) var(--side-space-01);background
 main .background.bg-color-01 {background:var(--color-01);}
 main .background.bg-color-02 {background:var(--color-02);}
 main .background:is(.bg-color-01, .bg-color-02) * {color:var(--colorlight);}
+main .background:is(.bg-color-01, .bg-color-02) p {font-weight: 600;}
 
 main .img-rounded {aspect-ratio: 1/1;border-radius: 50%;border: var(--space-below-01) solid var(--colorlight);overflow: hidden;margin-top: calc(0px - var(--space-below-02));}
 main .img-rounded img {object-fit: cover;width: 100%;height: 100%;display: block;}
@@ -198,6 +200,9 @@ main code {font-family: courier 'Courier New', Courier, monospace;font-size: var
 
 #main pre:has(code) {word-break: normal;word-wrap: normal;overflow: scroll;background: var(--color-gray-01);padding: var(--space-below-01) var(--space-below-01);border-radius: 10px;margin-bottom: var(--space-below-01);}
 
+#main .readme h1,
+#main .readme em {display: none;}
+
 footer {display: flex;justify-content: space-between;}
 footer * {margin-bottom: 0;color: var(--colorlight);font-weight: 600;}
 footer ul {display: flex;gap: var(--gap-01);}

diff --git a/theme/shortcodes.php b/theme/shortcodes.php
index 5c1615cc02961cdb4dd8d3b3df93e2a606c7ed3d..2d1e5c49c6ed21230120c5a77e27507731f9000e 100644 (file)
--- a/theme/shortcodes.php
+++ b/theme/shortcodes.php
@@ -87,6 +87,18 @@
             return '<div class="img-rounded">' . $imgRounded . '</div>';
         }, $markdown);
 
+    // Shortcode: output readme-file
+        $pattern = '/\{readme\}/s';
+        $markdown = preg_replace_callback($pattern, function () use ($Parsedown) {
+            $readmePath = __DIR__ . '/../README.md'; // path to root folder
+            if (file_exists($readmePath)) {
+                $readmeContent = file_get_contents($readmePath);
+                return '<div class="readme">' . $Parsedown->text($readmeContent) . '</div>';
+            } else {
+                return '<div class="readme"><em>README not found.</em></div>';
+            }
+        }, $markdown);
+
 
     // Shortcode: code - Restore code blocks (so no shortcode inside was processed)
         foreach ($codeBlocks as $placeholder => $codeBlock) {