From: elektrischerwalfisch <mail@elektrischerwalfisch.de>
Date: Fri, 11 Apr 2025 16:53:58 +0000 (+0200)
Subject: add paragraph about CMS, split example-pages, shortcode codeblock-adjustments
X-Git-Url: https://skyeroc.xyz/gitweb/?a=commitdiff_plain;h=e23b6209a5d8016474ff0149823eb9127af65966;p=flatmark

add paragraph about CMS, split example-pages, shortcode codeblock-adjustments
---

diff --git a/README.md b/README.md
index 59ef699..beadba6 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# FlatMark
+# flatMark
 
-*A lightweight, flat-file Markdown-based site generator with optional multilingual support.*
+*A lightweight, flat-file Markdown-based site generator*
 
 ## Features  
 - Lightweight and fast
@@ -106,6 +106,7 @@ flatMark supports simple shortcodes for structured content. Some examples:
 
 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.
+An example-page with all shortcodes is provided with the installation: `/pages-en/shortcodes.md`
 
 
 ## Customization
@@ -113,7 +114,24 @@ You can edit this file to change existing shortcodes or add even more.
 - Header/Footer: Edit 01-header.md and 02-footer.md in each language folder.
 
 ## flatmark as 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/01-header.md b/pages-en/01-header.md
index 082bf2e..1d40b78 100644
--- a/pages-en/01-header.md
+++ b/pages-en/01-header.md
@@ -9,5 +9,6 @@
 A lightweight, flat-file Markdown-based website generator
 
 - [Home](/en/home)
-- [Examples](/en/examples)
+- [Shortcodes](/en/shortcodes)
+- [Markdown](/en/markdown)
 - [Contact](/en/contact)
\ No newline at end of file
diff --git a/pages-en/README.md b/pages-en/README.md
index 59ef699..d87d40d 100644
--- a/pages-en/README.md
+++ b/pages-en/README.md
@@ -112,8 +112,25 @@ You can edit this file to change existing shortcodes or add even more.
 - Themes: Modify /theme/css/style.css for styling.
 - Header/Footer: Edit 01-header.md and 02-footer.md in each language folder.
 
-## flatmark as CMS
-...
+## 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/examples.md b/pages-en/examples.md
deleted file mode 100644
index 08ecd95..0000000
--- a/pages-en/examples.md
+++ /dev/null
@@ -1,144 +0,0 @@
-# Examples
-
-## Markdown Basics
-
-{columns 50-50}
-
-**Code:**
-
-{code} 
-## headline 2
-### headline 3
-**bold text** 
-
-- List item one
-- List item two
-- List item three
-
----
-[Linktext](http://www.domain.de)  
-{/code}
-
-{columns-seperator}
-
-**Output:**
-
-## headline 2
-### headline 3
-**bold text**
-
-- List item one
-- List item two
-- List item three  
-
----
-[Linktext](http://www.domain.de)  
-
-{/columns}  
-
-For a simple line-break just add two empty spaces after the last word in the line.  
-For a second empty line add `<br>` 
-
-Find the full syntax here: [www.markdownguide.org/basic-syntax](https://www.markdownguide.org/basic-syntax/)  
-<br>
-
-## Shortcodes
-
-These shortcodes are available in the default flatMark-theme:
-
-{code}
-{columns}
-    Content of first column
-{columns-seperator}
-    Content of second column
-{/columns}
-
-{background}
-    Content with backgrond-color
-{/background}
-
-{img-rounded}
-    Picture with rounded border
-{/img-rounded}
-
-{extras}
-    Extra content in 01-header.md (e. g. language-switch, phone, e-mail etc.)
-{/extras}
-
-{year}
-    Output of the current year (Can be used for copyright in 02-footer.md)
-
-{/code}
-
-### Additional values
-The shortcodes for columns and background accept additional values which are rendered as classes so that the output can be styled directly by css. In the default flatMark-theme these additional values are already styled:
-{code}
-{columns 50-50}
-{columns 33-66}
-{columns 66-33}
-{columns 33-33-33}
-
-{background color-01}
-{background color-02}
-{/code}  
-<br>  
-
-### Shortcode-Examples
-
-{columns 50-50}
-**columns 50-50** Lorem ipsum 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, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 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, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-{columns-seperator}
-Lorem ipsum 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, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 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, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-{/columns}  
- <br>
-
-{columns 33-66}
-**columns 33-66** Lorem ipsum 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, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
-{columns-seperator}
-![Pic](/files/example-pic-03.jpg)
-{/columns}
- <br>
-
-{columns 66-33}
-**columns 66-33** Lorem ipsum 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, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-
-Lorem ipsum 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, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
-{columns-seperator}
-![Pic](/files/example-pic-02.jpg)
-{/columns}
- <br>
-
-{columns 33-33-33}
-**columns 33-33-33** Lorem ipsum 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, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. 
-{columns-seperator}
-![Pic](/files/example-pic-01.jpg)
-{columns-seperator}
-![Pic](/files/example-pic-01.jpg)
-{/columns}
- <br>
-
-{columns 33-66}
-{img-rounded}
-![Pic](/files/example-pic-01.jpg)
-{/img-rounded}
-{columns-seperator}
-**img-rounded** inside **columns 33-66** 
-Lorem ipsum 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, no sea takimata sanctus est Lorem ipsum dolor sit amet.  
-{/columns}
-<br>
-
-{background color-01}
-**background color-01** Lorem ipsum 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.
-{/background}
- <br>
-
-{background color-02}
-**background color-02** Lorem ipsum 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.
-{/background}
-
-
-
-
-
-
-
diff --git a/pages-en/markdown.md b/pages-en/markdown.md
new file mode 100644
index 0000000..8904e49
--- /dev/null
+++ b/pages-en/markdown.md
@@ -0,0 +1,45 @@
+# Examples
+
+Find the full markdown-syntax here: [www.markdownguide.org/basic-syntax](https://www.markdownguide.org/basic-syntax/)  
+
+Some basic examples:
+
+{columns 50-50}
+
+**Code:**
+
+{code} 
+## headline 2
+### headline 3
+**bold text** 
+
+- List item one
+- List item two
+- List item three
+
+---
+[Linktext](http://www.domain.de)  
+{/code}
+
+{columns-seperator}
+
+**Html-output:**
+
+## headline 2
+### headline 3
+**bold text**
+
+- List item one
+- List item two
+- List item three  
+
+---
+[Linktext](http://www.domain.de)  
+
+{/columns}  
+
+For a simple line-break just add two empty spaces after the last word in the line.  
+For a second empty line add `<br>` 
+
+<br>
+
diff --git a/pages-en/shortcodes.md b/pages-en/shortcodes.md
new file mode 100644
index 0000000..0c18d76
--- /dev/null
+++ b/pages-en/shortcodes.md
@@ -0,0 +1,100 @@
+# Shortcodes
+
+These shortcodes are available by default in the flatMark-theme:
+
+{code}
+{columns}
+    Content of first column
+{columns-seperator}
+    Content of second column
+{/columns}
+
+{background}
+    Content with backgrond-color
+{/background}
+
+{img-rounded}
+    Picture with rounded border
+{/img-rounded}
+
+{extras}
+    Extra content in 01-header.md (e. g. language-switch, phone, e-mail etc.)
+{/extras}
+
+{year}
+    Output of the current year (Can be used for copyright in 02-footer.md)
+
+{/code}
+
+### Additional values
+The shortcodes for columns and background accept additional values which are rendered as classes so that the output can be styled directly by css. In the default flatMark-theme these additional values are already styled:
+{code}
+{columns 50-50}
+{columns 33-66}
+{columns 66-33}
+{columns 33-33-33}
+
+{background color-01}
+{background color-02}
+{/code}  
+<br>  
+
+### Shortcode-Examples
+
+{columns 50-50}
+**columns 50-50** Lorem ipsum 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, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 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, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+{columns-seperator}
+Lorem ipsum 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, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 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, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+{/columns}  
+ <br>
+
+{columns 33-66}
+**columns 33-66** Lorem ipsum 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, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
+{columns-seperator}
+![Pic](/files/example-pic-03.jpg)
+{/columns}
+ <br>
+
+{columns 66-33}
+**columns 66-33** Lorem ipsum 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, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+
+Lorem ipsum 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, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
+{columns-seperator}
+![Pic](/files/example-pic-02.jpg)
+{/columns}
+ <br>
+
+{columns 33-33-33}
+**columns 33-33-33** Lorem ipsum 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, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. 
+{columns-seperator}
+![Pic](/files/example-pic-01.jpg)
+{columns-seperator}
+![Pic](/files/example-pic-01.jpg)
+{/columns}
+ <br>
+
+{columns 33-66}
+{img-rounded}
+![Pic](/files/example-pic-01.jpg)
+{/img-rounded}
+{columns-seperator}
+**img-rounded** inside **columns 33-66** 
+Lorem ipsum 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, no sea takimata sanctus est Lorem ipsum dolor sit amet.  
+{/columns}
+<br>
+
+{background color-01}
+**background color-01** Lorem ipsum 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.
+{/background}
+ <br>
+
+{background color-02}
+**background color-02** Lorem ipsum 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.
+{/background}
+
+
+
+
+
+
+
diff --git a/theme/css/style.css b/theme/css/style.css
index 950596c..9a433a9 100644
--- a/theme/css/style.css
+++ b/theme/css/style.css
@@ -137,7 +137,7 @@ h1 {font-size: var(--fontsize-xxl); font-weight: 800;color: var(--colordark);mar
 h2 {font-size: var(--fontsize-xl); font-weight: 800;color: var(--color-01);}
 h3 {font-size: var(--fontsize-l); font-weight: 700;}
 
-h2, h3, p, ul, ol {margin-bottom: var(--space-below-01);}
+h2, h3, p, ul, ol, table {margin-bottom: var(--space-below-01);}
 
 a {color: var(--color-02); text-decoration: underline;}
 a:hover {text-decoration: none;outline: 0;}
@@ -173,8 +173,9 @@ main {padding: 0 var(--side-space-02) var(--space-below-01) var(--side-space-02)
 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 table {width: 100%;}
+main table tr {border-bottom: 1px solid var(--color-gray-01);}
 main table th,
-main table td {text-align: left;border: none;min-width: 100px;vertical-align: top;padding-bottom: var(--space-below-01);}
+main table td {text-align: left;border: none;min-width: 100px;vertical-align: top;padding: var(--space-below-00) 0;}
 main table tr > td:first-child {font-weight: 600;}
 
 main .columns {display: grid;grid-template-rows: auto;gap: var(--gap-01);box-sizing: border-box;}
@@ -194,7 +195,8 @@ main .img-rounded {aspect-ratio: 1/1;border-radius: 50%;border: var(--space-belo
 main .img-rounded img {object-fit: cover;width: 100%;height: 100%;display: block;}
 
 main code {font-family: courier 'Courier New', Courier, monospace;font-size: var(--fontsize-m);background: var(--color-gray-01);color: var(--colordark);}
-main div.code code {display: block;white-space: pre-wrap;margin-bottom: var(--space-below-01);padding: var(--space-below-01) var(--space-below-01);border-radius: 10px;}
+
+#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);}
 
 footer {display: flex;justify-content: space-between;}
 footer * {margin-bottom: 0;color: var(--colorlight);font-weight: 600;}
diff --git a/theme/shortcodes.php b/theme/shortcodes.php
index afd66b2..5c1615c 100644
--- a/theme/shortcodes.php
+++ b/theme/shortcodes.php
@@ -17,7 +17,7 @@
             // Generate a unique placeholder
             $placeholder = '[[[CODEBLOCK_' . count($codeBlocks) . ']]]';
             // Store the raw code block content
-            $codeBlocks[$placeholder] = '<div class="code"><code>' . htmlspecialchars($matches[1]) . '</code></div>';
+            $codeBlocks[$placeholder] = '<pre><code>' . htmlspecialchars($matches[1]) . '</code></pre>';
             return $placeholder;
         }, $markdown);