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

diff --git a/README.md b/README.md
index 59ef699cef0339ce0485f08fe04af8d29f84082f..beadba62518eecdcd3610f90508b402508c377ee 100644 (file)
--- 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 082bf2ed5dcf63d645066667e3493d57fe136896..1d40b7807e10e239855b15e64f1727a218026bb5 100644 (file)
--- 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 59ef699cef0339ce0485f08fe04af8d29f84082f..d87d40dcf1f984bfbdfdb89cabbef24ce8f3a250 100644 (file)
--- 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 (file)
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 (file)
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 (file)
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 950596c7f44b7c5961544d470c0bcb38facaaa6e..9a433a94bf88dc0d52fd87cf9b4ec4444c4e3530 100644 (file)
--- 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 afd66b2a19370b493926d00bcca2c70e9fd0982a..5c1615cc02961cdb4dd8d3b3df93e2a606c7ed3d 100644 (file)
--- 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);