From e23b6209a5d8016474ff0149823eb9127af65966 Mon Sep 17 00:00:00 2001 From: elektrischerwalfisch Date: Fri, 11 Apr 2025 18:53:58 +0200 Subject: [PATCH] add paragraph about CMS, split example-pages, shortcode codeblock-adjustments --- README.md | 24 +++++++++++-- pages-en/01-header.md | 3 +- pages-en/README.md | 21 +++++++++-- pages-en/markdown.md | 45 +++++++++++++++++++++++ pages-en/{examples.md => shortcodes.md} | 48 ++----------------------- theme/css/style.css | 8 +++-- theme/shortcodes.php | 2 +- 7 files changed, 95 insertions(+), 56 deletions(-) create mode 100644 pages-en/markdown.md rename pages-en/{examples.md => shortcodes.md} (88%) 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/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 `
` + +
+ diff --git a/pages-en/examples.md b/pages-en/shortcodes.md similarity index 88% rename from pages-en/examples.md rename to pages-en/shortcodes.md index 08ecd95..0c18d76 100644 --- a/pages-en/examples.md +++ b/pages-en/shortcodes.md @@ -1,50 +1,6 @@ -# Examples +# Shortcodes -## 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 `
` - -Find the full syntax here: [www.markdownguide.org/basic-syntax](https://www.markdownguide.org/basic-syntax/) -
- -## Shortcodes - -These shortcodes are available in the default flatMark-theme: +These shortcodes are available by default in the flatMark-theme: {code} {columns} 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] = '
' . htmlspecialchars($matches[1]) . '
'; + $codeBlocks[$placeholder] = '
' . htmlspecialchars($matches[1]) . '
'; return $placeholder; }, $markdown); -- 2.47.3