From 8179baf8f192d0677cc5ed859175723a270d9f9e Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 30 Oct 2018 17:36:25 +0100 Subject: [PATCH] Version 1.2.6: Visual Editor --- cache/lastCache.txt | 2 +- content/00-Welcome/00-Write-Content.md | 30 ++ content/00-Welcome/01-Get-Help.md | 10 + content/00-Welcome/index.txt | 1 + content/00-typemill/00-use-cases.md | 21 -- content/00-typemill/01-roadmap.md | 33 -- content/00-typemill/02-features.md | 25 -- content/00-typemill/index.md | 7 - .../00-system-requirements.md | 25 -- content/01-getting-started/01-installation.md | 61 ---- content/01-getting-started/02-settings.md | 21 -- content/01-getting-started/03-update.md | 41 --- content/01-getting-started/index.md | 3 - content/02-for-writers/00-quick start.md | 15 - content/02-for-writers/01-author panel.md | 35 -- .../02-naming files and folders.md | 24 -- content/02-for-writers/03-folder structure.md | 5 - content/02-for-writers/04-mardown.md | 63 ---- content/02-for-writers/05-google sitemap.md | 3 - content/02-for-writers/06-themes.md | 9 - content/02-for-writers/07-plugins.md | 16 - content/02-for-writers/08-forgot password.md | 21 -- content/02-for-writers/index.md | 3 - .../03-for-theme-developers/00-quick start.md | 113 ------- .../01-theme structure.md | 51 --- .../03-for-theme-developers/02-theme meta.md | 100 ------ .../03-for-theme-developers/03-asset tags.md | 44 --- content/03-for-theme-developers/04-twig.md | 215 ------------ .../05-theme variables/00-content.md | 6 - .../05-theme variables/01-title.md | 21 -- .../05-theme variables/02-description.md | 21 -- .../05-theme variables/03-image.md | 16 - .../05-theme variables/04-base url.md | 14 - .../05-theme variables/05-item.md | 311 ----------------- .../05-theme variables/06-breadcrumb.md | 11 - .../05-theme variables/07-navigation.md | 102 ------ .../05-theme variables/08-settings.md | 85 ----- .../05-theme variables/index.md | 3 - content/03-for-theme-developers/index.md | 3 - content/04-for-plugin-developers/00-intro.md | 40 --- .../01-tutorial/00-cookie consent plugin.md | 56 --- .../01-tutorial/01-write the yaml file.md | 77 ----- .../01-tutorial/02-write the php file.md | 156 --------- .../01-tutorial/03-add methods.md | 123 ------- .../01-tutorial/04-create the structure.md | 42 --- .../01-tutorial/05-add twig template.md | 61 ---- .../01-tutorial/06-add default values.md | 60 ---- .../01-tutorial/07-use variables in twig.md | 127 ------- .../01-tutorial/08-make variables editable.md | 161 --------- .../01-tutorial/index.md | 3 - .../02-documentation/00-file structure.md | 49 --- .../02-documentation/01-configuration file.md | 67 ---- .../02-documentation/02-field overview.md | 237 ------------- .../02-documentation/03-basic php file.md | 116 ------- .../02-documentation/04-event overview.md | 68 ---- .../02-documentation/05-method overview.md | 183 ---------- .../02-documentation/06-routes.md | 56 --- .../02-documentation/07-middleware.md | 50 --- .../02-documentation/index.md | 3 - content/04-for-plugin-developers/index.md | 3 - content/05-info/00-release-notes.md | 294 ---------------- content/05-info/01-usage-and-licence.md | 16 - content/05-info/02-Imprint-and-privacy.md | 12 - content/05-info/03-markdown-test.md | 319 ------------------ content/05-info/index.md | 3 - content/index.md | 5 +- content/index.txt | 1 + system/Controllers/AuthController.php | 4 +- system/Controllers/ContentApiController.php | 315 ++++++++++++++--- .../Controllers/ContentBackendController.php | 76 ++++- system/Controllers/ContentController.php | 17 +- system/Controllers/PageController.php | 2 +- system/Controllers/SettingsController.php | 3 +- system/Extensions/ParsedownExtension.php | 33 +- system/Middleware/RedirectIfAuthenticated.php | 2 +- system/Middleware/RedirectIfNoAdmin.php | 2 +- system/Models/Validation.php | 21 +- system/Routes/Api.php | 4 +- system/Routes/Web.php | 4 +- system/Settings.php | 1 + system/author/auth/welcome.twig | 2 +- system/author/css/fontello/config.json | 38 ++- .../css/fontello/css/fontello-codes.css | 14 +- .../css/fontello/css/fontello-embedded.css | 26 +- .../css/fontello/css/fontello-ie7-codes.css | 14 +- .../author/css/fontello/css/fontello-ie7.css | 14 +- system/author/css/fontello/css/fontello.css | 28 +- system/author/css/fontello/demo.html | 24 +- system/author/css/fontello/font/fontello.eot | Bin 7480 -> 8148 bytes system/author/css/fontello/font/fontello.svg | 14 +- system/author/css/fontello/font/fontello.ttf | Bin 7312 -> 7980 bytes system/author/css/fontello/font/fontello.woff | Bin 4504 -> 4944 bytes .../author/css/fontello/font/fontello.woff2 | Bin 3772 -> 4160 bytes system/author/css/style.css | 292 +++++++++++++++- system/author/editor/editor-blox.twig | 45 +++ system/author/editor/editor-raw.twig | 38 +++ system/author/editor/editor.twig | 59 ---- system/author/editor/publish-controller.twig | 26 ++ system/author/js/vue-blox.js | 303 +++++++++++++++++ system/author/js/vue-editor.js | 181 +--------- system/author/js/vue-navi.js | 35 +- system/author/js/vue-publishcontroller.js | 185 ++++++++++ system/author/layouts/layoutBlox.twig | 46 +++ system/author/layouts/layoutEditor.twig | 1 + system/author/partials/editorNavi.twig | 35 +- system/author/partials/navi.twig | 4 +- system/author/settings/system.twig | 20 +- 107 files changed, 1542 insertions(+), 4364 deletions(-) create mode 100644 content/00-Welcome/00-Write-Content.md create mode 100644 content/00-Welcome/01-Get-Help.md create mode 100644 content/00-Welcome/index.txt delete mode 100644 content/00-typemill/00-use-cases.md delete mode 100644 content/00-typemill/01-roadmap.md delete mode 100644 content/00-typemill/02-features.md delete mode 100644 content/00-typemill/index.md delete mode 100644 content/01-getting-started/00-system-requirements.md delete mode 100644 content/01-getting-started/01-installation.md delete mode 100644 content/01-getting-started/02-settings.md delete mode 100644 content/01-getting-started/03-update.md delete mode 100644 content/01-getting-started/index.md delete mode 100644 content/02-for-writers/00-quick start.md delete mode 100644 content/02-for-writers/01-author panel.md delete mode 100644 content/02-for-writers/02-naming files and folders.md delete mode 100644 content/02-for-writers/03-folder structure.md delete mode 100644 content/02-for-writers/04-mardown.md delete mode 100644 content/02-for-writers/05-google sitemap.md delete mode 100644 content/02-for-writers/06-themes.md delete mode 100644 content/02-for-writers/07-plugins.md delete mode 100644 content/02-for-writers/08-forgot password.md delete mode 100644 content/02-for-writers/index.md delete mode 100644 content/03-for-theme-developers/00-quick start.md delete mode 100644 content/03-for-theme-developers/01-theme structure.md delete mode 100644 content/03-for-theme-developers/02-theme meta.md delete mode 100644 content/03-for-theme-developers/03-asset tags.md delete mode 100644 content/03-for-theme-developers/04-twig.md delete mode 100644 content/03-for-theme-developers/05-theme variables/00-content.md delete mode 100644 content/03-for-theme-developers/05-theme variables/01-title.md delete mode 100644 content/03-for-theme-developers/05-theme variables/02-description.md delete mode 100644 content/03-for-theme-developers/05-theme variables/03-image.md delete mode 100644 content/03-for-theme-developers/05-theme variables/04-base url.md delete mode 100644 content/03-for-theme-developers/05-theme variables/05-item.md delete mode 100644 content/03-for-theme-developers/05-theme variables/06-breadcrumb.md delete mode 100644 content/03-for-theme-developers/05-theme variables/07-navigation.md delete mode 100644 content/03-for-theme-developers/05-theme variables/08-settings.md delete mode 100644 content/03-for-theme-developers/05-theme variables/index.md delete mode 100644 content/03-for-theme-developers/index.md delete mode 100644 content/04-for-plugin-developers/00-intro.md delete mode 100644 content/04-for-plugin-developers/01-tutorial/00-cookie consent plugin.md delete mode 100644 content/04-for-plugin-developers/01-tutorial/01-write the yaml file.md delete mode 100644 content/04-for-plugin-developers/01-tutorial/02-write the php file.md delete mode 100644 content/04-for-plugin-developers/01-tutorial/03-add methods.md delete mode 100644 content/04-for-plugin-developers/01-tutorial/04-create the structure.md delete mode 100644 content/04-for-plugin-developers/01-tutorial/05-add twig template.md delete mode 100644 content/04-for-plugin-developers/01-tutorial/06-add default values.md delete mode 100644 content/04-for-plugin-developers/01-tutorial/07-use variables in twig.md delete mode 100644 content/04-for-plugin-developers/01-tutorial/08-make variables editable.md delete mode 100644 content/04-for-plugin-developers/01-tutorial/index.md delete mode 100644 content/04-for-plugin-developers/02-documentation/00-file structure.md delete mode 100644 content/04-for-plugin-developers/02-documentation/01-configuration file.md delete mode 100644 content/04-for-plugin-developers/02-documentation/02-field overview.md delete mode 100644 content/04-for-plugin-developers/02-documentation/03-basic php file.md delete mode 100644 content/04-for-plugin-developers/02-documentation/04-event overview.md delete mode 100644 content/04-for-plugin-developers/02-documentation/05-method overview.md delete mode 100644 content/04-for-plugin-developers/02-documentation/06-routes.md delete mode 100644 content/04-for-plugin-developers/02-documentation/07-middleware.md delete mode 100644 content/04-for-plugin-developers/02-documentation/index.md delete mode 100644 content/04-for-plugin-developers/index.md delete mode 100644 content/05-info/00-release-notes.md delete mode 100644 content/05-info/01-usage-and-licence.md delete mode 100644 content/05-info/02-Imprint-and-privacy.md delete mode 100644 content/05-info/03-markdown-test.md delete mode 100644 content/05-info/index.md create mode 100644 content/index.txt create mode 100644 system/author/editor/editor-blox.twig create mode 100644 system/author/editor/editor-raw.twig delete mode 100644 system/author/editor/editor.twig create mode 100644 system/author/editor/publish-controller.twig create mode 100644 system/author/js/vue-blox.js create mode 100644 system/author/js/vue-publishcontroller.js create mode 100644 system/author/layouts/layoutBlox.twig diff --git a/cache/lastCache.txt b/cache/lastCache.txt index 167ae4e..a8a9e84 100644 --- a/cache/lastCache.txt +++ b/cache/lastCache.txt @@ -1 +1 @@ -1538862654 \ No newline at end of file +1540917193 \ No newline at end of file diff --git a/content/00-Welcome/00-Write-Content.md b/content/00-Welcome/00-Write-Content.md new file mode 100644 index 0000000..0e62a2e --- /dev/null +++ b/content/00-Welcome/00-Write-Content.md @@ -0,0 +1,30 @@ +# Write Content + +Typemill is a simple Flat File Content Management System (CMS). We work hard to provide the best author experience with easy and intuitive authoring tools. But Typemill is still in early development and it is likely that not everything will work perfectly out of the box. If you miss something or if you have ideas for improvement, then let me know via mail (trendschau@gmail.com) or via [GitHub](https://github.com/trendschau/typemill/issues). + +## The Navigation + +You can create, structure and reorder all pages with the navigation on the left. To structure your content, you can create new folders and files with the "add item" button. To reorder the pages, just drag an item and drop it wherever you want. Play around with it and you will notice, that it works pretty similar to the folder- and file-system of your laptop. And in fact, this is exactly what Typemill does in the background: It stores your content in files and folders on the server. + +However, there are some limitations when you try to reorder elements, for example, you cannot move a complete folder to another folder. Click on the question-mark at the top of the navigation for detailed informations. + +## The Editor + +You can create and format your content with the Markdown syntax, that is similar to the markup syntax of wikipedia. If you are not familiar with Markdown, then please read the short [Markdown-tutorial](https://typemill.net/) in the documentation of Typemill. You can learn Markdown in less than 10 minutes and there is no easier and faster way to format your webpage. You will love it! + +Typemill provides two edit modes: The **raw mode** and the **visual mode**. You can switch between the modes in the publish-bar at the bottom of each page. The **raw mode** is the most robust way to create your content, because you write raw markdown into a simple input area. The **visual mode** is experimental right now. It uses blocks and transforms each content block into a html-preview immediately, so that you can directly see the formatted result. + +By default Typemill will use the raw mode. But you can change this behavior in the system settings and use the visual editor as default mode. + +## The Publish Bar + +The publish bar of Typemill is pretty intuitiv and sticks at the bottom of the screen so that you have always full control of the status of each page. Simply play around with it and you will quickly understand how it works. In short: + +* The green button "online" indicates, that your page is published and visible for your readers. +* You can depublish a page by clicking the green button. The button turns grey with the label "offline" then. +* With the red button "Publish" you can publish either a page that is offline or you can publish still unpublished changes. +* The publish-button is grey, if the page is online and if there are no unpublished changes. +* With the red button "Save Draft" you can safe a draft. You can also work on a draft as long as you want while the old version of the page is still online. +* All buttons will change in real time, so you can always exactly see what is going on. +* To provide an easy status-overview of the whole website, Typemill marks all unpublished pages or changes red in the navigation on the left side. + diff --git a/content/00-Welcome/01-Get-Help.md b/content/00-Welcome/01-Get-Help.md new file mode 100644 index 0000000..f509b65 --- /dev/null +++ b/content/00-Welcome/01-Get-Help.md @@ -0,0 +1,10 @@ +Get Help + +If you need any help, then please read the [documentation on typemill.net](https://typemill.net/typemill) first. Some short video-tutorials are in work right now. + +If you found a bug or if you have a question, then please open a new issue on [GitHub](https://github.com/trendschau/typemill/issues). + +Typemill is open source and a one man project right now, so please understand that I cannot provide individual support. + +Contributions, donations and feedbacks are always welcome. + diff --git a/content/00-Welcome/index.txt b/content/00-Welcome/index.txt new file mode 100644 index 0000000..9cacf8b --- /dev/null +++ b/content/00-Welcome/index.txt @@ -0,0 +1 @@ +["# Welcome to Typemill","Great that you give Typemill a try!! Typemill is a small open source cms and a project in work. You will probably miss some important features, but I am working hard to add everything that is needed for a really productive little writing-system.","Before you start, please read the short introduction about \"writing content\". Or simply play around, I hope that Typemill is already quite intuitive to use..."] \ No newline at end of file diff --git a/content/00-typemill/00-use-cases.md b/content/00-typemill/00-use-cases.md deleted file mode 100644 index 2279246..0000000 --- a/content/00-typemill/00-use-cases.md +++ /dev/null @@ -1,21 +0,0 @@ -# Use Cases - -Whenever you want to publish a finished text work as a website and if you like writing with Markdown, then TYPEMILL is a smart and lightweight solution. Possible use cases are … - -- a documentation -- a manual -- a user guide -- a whitepaper -- a handbook -- a tutorial -- a study -- a book -- a drama -- a lyric collection -- a collection of articles - -If you want to create a blog, a wiki or a classic corporate website, please use a specialized CMS for that instead of TYPEMILL. - -TYPEMILL is under heavy developement and not finished right now. It has an admin panel for settings and a basic editor for existing content. More options like create new pages and manage your media-files will be added step by step in the next weeks. Also different output formats like mobi and ePup are on the roadmap, so stay tuned. - -For now, you have to use a FTP-software like FileZilla until all basic editing features are ready. Check the roadmap for more informations. \ No newline at end of file diff --git a/content/00-typemill/01-roadmap.md b/content/00-typemill/01-roadmap.md deleted file mode 100644 index 61bcb78..0000000 --- a/content/00-typemill/01-roadmap.md +++ /dev/null @@ -1,33 +0,0 @@ -# Roadmap - -There are a lot of plans for future releases of TYPEMILL, but it also follows the concept of simplicity. To prevent TYPEMILL from becomming a feature soup, it will strictly focus on the writers needs. - -Here are some **milestones** of the past: - -- Introduction of TYPEMILL (v. 1.0.0) -- Added a google sitemap (v. 1.0.1) -- Added a table of contents tag (TOC) (v. 1.0.5) -- Introduced plugins (v. 1.1.0) -- Added an author panel for configurations (v. 1.1.3) -- Added math support (mathjax/katex) (v. 1.1.5) -- Added a basic content editor to edit and delete existing pages (v. 1.2.0) -- Added a draft management for pages (v. 1.2.2) -- Re-order content pages with drag&drop (v. 1.2.3) -- Editor: Create new pages (v. 1.2.5) - -And here is the **roadmap** for this year (2018): - -- Editor: Basic WYSIWYG-Preview for markdown blocks (v. 1.2.6) -- Editor: Manage images and assets (v. 1.2.7) -- Editor: Edit meta-information (v. 1.2.8) -- Editor: Add formatting options (v. 1.3.0) -- Editor: Create the best author- and writing experience you have ever seen (1.4.0) - -Other features with lower prio: - -- Create additional output formats like mobi, epub and pdf. -- Create a clean API. -- More themes for special publications like documentations, books or lyrics. -- Create many useful plugins. - -If you miss a feature or if you found a bug, please report it on [GitHub](https://github.com/trendschau/typemill). \ No newline at end of file diff --git a/content/00-typemill/02-features.md b/content/00-typemill/02-features.md deleted file mode 100644 index 6b79a3b..0000000 --- a/content/00-typemill/02-features.md +++ /dev/null @@ -1,25 +0,0 @@ -# Features - -TYPEMILL has a limited set of features right now. It transforms a bunch of **markdown files** into a **website** and generates a list of contents for **navigation**. - -This is what you can **do with TYPEMILL**: - -- Create a website with simple files and folders. -- Use markdown for your content files. -- Use an admin panel to configure your site. -- Use the content editor to create, edit and reorder pages. -- Choose themes. -- Activate plugins. Check the [list of plugins](/writers/plugins) for that. -- Create your own theme with HTML, CSS and Twig (a template language for PHP). -- Create your own plugins with PHP. - -This is, what **TYPEMILL does** for you: - -- It creates a website based on your files and folders. -- It generates a navigation according to the structure of your files and folders. -- It adds a paging for navigation. -- It adds a breadcrumb for navigation. -- It adds hierarchic numbers to your chapters and pages. -- It generates a google sitemap, a last modified date and much more. - -Right now there is only a simple content editor to create, edit and reorder pages. There is no media management yet, so you have to upload images and media files with an FTP software like FileZilla for now. \ No newline at end of file diff --git a/content/00-typemill/index.md b/content/00-typemill/index.md deleted file mode 100644 index 9b57e2a..0000000 --- a/content/00-typemill/index.md +++ /dev/null @@ -1,7 +0,0 @@ -# Typemill - -TYPEMILL is a simple flat file CMS to create a website like this. It transforms a bunch of **text files** (Markdown) into a **website** and generates a **navigation**. - -TYPEMILL is under construction. Right now it provides only a very basic editor and a simple admin area for settings, plugins and themes. The author-experience will be improved step by step and output formats for e-books like mobi and epub are planned for the future. - -If you are a developer, you can already create your own themes and your own plugins. \ No newline at end of file diff --git a/content/01-getting-started/00-system-requirements.md b/content/01-getting-started/00-system-requirements.md deleted file mode 100644 index 9387d1e..0000000 --- a/content/01-getting-started/00-system-requirements.md +++ /dev/null @@ -1,25 +0,0 @@ -# System Requirements - -TYPEMILL is a modern and lightweight software with nearly no requirements. All you need is: - -- **A webserver (Apache)** (to host TYPEMILL) -- **PHP 7.0+** (to run TYPEMILL) -- **FTP** (to upload your images and media files) - -What you don't need: - -- **A lot of space** (TYPEMILL is lightweight with less than 5MBs) -- **A database** (TYPEMILL uses files, not a database) -- **Technical skills** (TYPEMILL is easy to use for non-technical people) - -Almost any hosting package provides a webserver with php. If you ever hosted your own website, then chances are high, that you can run TYPEMILL there without any problems. - -Typemill supports the following browsers: - -- Firefox (heavily tested) -- Chrome (tested) -- Edge (basic tests) -- IE11 (basic tests) -- Safari (not tested) - -I use Firefox and XAMPP for development. If you use another stack like Safari / OS, then try it, but I have no possibility to test or fix it. \ No newline at end of file diff --git a/content/01-getting-started/01-installation.md b/content/01-getting-started/01-installation.md deleted file mode 100644 index 35f5ce2..0000000 --- a/content/01-getting-started/01-installation.md +++ /dev/null @@ -1,61 +0,0 @@ -# Installation - -The installation of TYPEMILL is as simple as that: - -- Go to [typemill.net](http://www.typemill.net) and download the TYPEMILL files. -- Upload the files to your server. -- Go to `www.your-typemill-website.com/setup` and create an initial user. -- Login and configure your system, your themes and your plugins. - -Don't forget to make some folders and files writable (set permission to `774`): - -- `\cache` folder and files -- `\settings` folder and files -- `\content` folder and files - -All settings and users are stored in the folder `settings`. You can manually edit these files, but it is not recommended because it might crash the system if done wrong. - -You can configure your system online, but there is only a simple editor to change existing content right now. So for time beeing, you have to create new content offline with a markdown editor and upload the files with an FTP software. If your changes are not immediately visible, press `F5` to refresh the cache. - -If you need more detailed instructions, please read on. - -## Download - -There are two ways to copy TYPEMILL to your local computer: - -1. Go to [typemill.net](http://www.typemill.net), download the zip-archive and unzip it. -2. **Or** use GitHub and Composer. - -If you use GitHub, then you can find the repository of TYPEMILL on [github/trendschau/typemill](https://github/trendschau/typemill). Just open the command line (git-CLI) and type - -```` -git clone "https://github.com/trendschau/typemill.git" -```` - -TYPEMILL uses some nice frameworks and libraries, which can be found in the folder `\system\vendor`. This folder is not included in the git version. If you use the git version, you have to download all the libraries (dependencies) with composer. If you don't have composer installed yet, head over to the [composer website](https://getcomposer.org/) and install it. After that, open your command line, go to your TYPEMILL folder and type: - -```` -composer update -```` - -The exact command might vary depending on your local composer installation and configuration. If you face any problems, please check the documentation of composer. - -That's it! - -## Permissions - -The following three folders and all files and folders inside must be writable: - -- `\cache` -- `\settings` -- `\content` - -To make the folders and files writable, use your ftp programm, click on the folder, choose `permissions` and change the permission to `744`. Use the recursive permission for all containing files and folders. If `744` does not work, try `774`. - -## htaccess - -If you run your website with https (recommended) or if you want to redirect www-urls to non-www urls, then please check the htaccess file in the root folder. There are several use cases already prepared and you can simply uncomment them, if needed. - -## Run Locally - -If you are a developer and if you want to run TYPEMILL locally, then simply download TYPEMILL (zip or git) and visit your local folder like `localhost/typemill`. No additional work is required. \ No newline at end of file diff --git a/content/01-getting-started/02-settings.md b/content/01-getting-started/02-settings.md deleted file mode 100644 index 8f4f131..0000000 --- a/content/01-getting-started/02-settings.md +++ /dev/null @@ -1,21 +0,0 @@ -# Settings - -As of Version 1.1.3 you can edit all settings in the new author panel of TYPEMILL. Just visit the url `yourwebsite.com/tm/login` and go to settings after the login. There you can edit: - -* The system (basic settings). -* Themes (choose themes and configure it). -* Plugins (activate plugins and configure them). -* Users (create, update and delete). - -All settings are stored in the `\settings` folder of TYPEMILL. It is not recommended to edit the settings manually, because it might crash the system if done wrong. - -## Advanced Settings - -There are some settings that are not available via the author panel. Most of them are not really useful, but if you are a developer and if you develop a theme or a plugin locally, you probably want to display a detailed error report. To do so, simply add the following line to the settings.yaml: - - -```` -displayErrorDetails: true -```` - -Don't forget to set it back to `false` before you deploy the website live. It is not secure to show the world your internal errors and many hosters will turn off all public error reports by default. \ No newline at end of file diff --git a/content/01-getting-started/03-update.md b/content/01-getting-started/03-update.md deleted file mode 100644 index 5272d2f..0000000 --- a/content/01-getting-started/03-update.md +++ /dev/null @@ -1,41 +0,0 @@ -# Update - -If your TYPEMILL version or any plugin or theme is not up to date, you will find individual update banners in the author panel. - -## Simple Update - -To update your TYPEMILL version, simply download the latest version of TYPEMILL on [the TYPEMILL website](http://typemill.net). Then delete the old `system` folder on your server and upload the new system folder. All other files and folders can usually stay untouched. - -After you updated your installation, please login to your website and check the settings. Sometimes, there are additional features that you can find there. - -## Major Update - -TYPEMILL is in early stage and there are a lot of basic changes right now. When there are basic changes, then you should update the whole installation like this: - -* Backup your settings folder -* Keep your content folder -* Delete everything else: - * cache - * plugins - * settings - * system - * themes -* Upload the new folders -* Go to `your-typemill-website.com/setup` and create a new user. -* Setup your website again in the author panel. - -In many cases you can also use your old settings folder, so it is highly recommended to create a backup and test it. But sometimes, the new version requires a new setup of the system, so if you want to do it the clean way, just start and setup your system again. - -## GitHub and Composer - -If you work with GitHub and Composer, then make sure that you **always** make a `composer update` after you uploaded the new system-folder from GitHub. This is essential, because the GitHub-folder does NOT include the vendor folder with all the dependencies that TYPEMILL uses. If you don't update these dependencies with composer, then the system will not run. - -If you download the TYPEMILL from http://typemill.net, then you don't have to worry about this, because the vendor folder with all dependencies is included there. - -We decided to skip the vendor folder in the GitHub version because it constantly caused errors due to some missing libraries. - -## Old Settings File - -Please do not rename or leave the old settings file in the settings folder, because any files in that folder will cause errors and problems. Instead, backup your old settings file in another folder or on your local machine. - -If it is only a minor update, you can leave your settings folder untouched and change everything in the author-panel after the update. \ No newline at end of file diff --git a/content/01-getting-started/index.md b/content/01-getting-started/index.md deleted file mode 100644 index 147b7d5..0000000 --- a/content/01-getting-started/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Getting Started - -Simply download TYPEMILL and immediately start publishing. TYPEMILL runs with **php7+** on most webservers. **No database** or any other additional technology is required. \ No newline at end of file diff --git a/content/02-for-writers/00-quick start.md b/content/02-for-writers/00-quick start.md deleted file mode 100644 index 56359f7..0000000 --- a/content/02-for-writers/00-quick start.md +++ /dev/null @@ -1,15 +0,0 @@ -# Quick Start for Writers - -In earlier versions of Typemill authors had to create content files with an offline Markdown editor and upload the files to the server. Since Typemill provides an online editor to create, reorder and edit content pages, a separate offline editor is not needed anymore. - -However, if you still want to use your favourite Markdown editor to create your content files, then please follow this rules: - -- **Setup**: Login to your system and setup the system, the themes and the plugins in the author panel. -- **Content**: Organize your content in folders and markdown files and put them in the `\content` folder of TYPEMILL. -- **Markdown**: Use the Markdown syntax for your content files. Markdown Extra (e.g. tables, footnotes) is supported, too. -- **Naming conventions**: Use prefixes like `01-` or `aa_` to sort your folders and files. -- **Index files**: Add an `index.md` file to a folder to create content for the folder itself. -- **F5**: After some changes, use the `F5` key to refresh the navigation manually. -- **Lean back** and let TYPEMILL create a nice website for you. - -TYPEMILL ships with this user manual in the content folder. Check how the files are written and how the folders are organized. \ No newline at end of file diff --git a/content/02-for-writers/01-author panel.md b/content/02-for-writers/01-author panel.md deleted file mode 100644 index fe81650..0000000 --- a/content/02-for-writers/01-author panel.md +++ /dev/null @@ -1,35 +0,0 @@ -# The Author Panel - -You can login to the author panel with this url: - -```` -https://yourwebsite.net/tm/login -```` - -You can also use the url `https://yourwebsite.net/setup` that redirects to the login screen. - -## The Content Editor - -In the **content area** of the author panel you can: - -* Navigate through your existing content. -* Create new pages. -* Edit existing pages with markdown syntax. -* Re-order existing pages with simple drag&drop. -* Save drafts, publish pages, unpublish pages and delete pages. - -There are several **limitations** right now: - -* You cannot use HTML, JavaScript or any other code in the editor, only markdown-syntax is allowed. -* There is no media-management right now. - -The content editor has highest priority in the roadmap, so you can expect a lot of improvements in the next weeks. - -## Settings, Themes and Plugins - -In the **settings area** of the author panel you can: - -* Configure your **system**. -* Choose and configure a **theme**. -* Activate and configure **plugins**. -* Manage **users**. \ No newline at end of file diff --git a/content/02-for-writers/02-naming files and folders.md b/content/02-for-writers/02-naming files and folders.md deleted file mode 100644 index 4990791..0000000 --- a/content/02-for-writers/02-naming files and folders.md +++ /dev/null @@ -1,24 +0,0 @@ -# Naming your Files and Folders - -Naming conventions are not very relevant anymore since you can create new pages online with the author panel right now. If you still want to create your content offline, then please follow the rules below. - -To create a clean website with TYPEMILL, you have to follow some naming conventions for your files and folders. A typcial structure for folders and file looks like this: - -```` -/01_content_folder - 01_markdown_file.md - 02_another_markdown_file.md - index.md -/02_another_folder - 01_another_content_file.md -```` - -The rules are simple: - -- **Keep it short**: The names of the files and folders are used to create the navigation, so it is essential to keep them really short and descriptive!! -- **Use prefixes**: Please use some kind of sorting-prefix for your files and folders. You can use numbers `01-` or letters `aa-`. The part before the first separator (the prefix) is striped out by TYPEMILL. -- **Use Separators**: Please use separators like dashes `-` or underscores `_` to separate words or prefixes in your file names and folder names. **Do not use space**!!! -- **Use index.md**: TYPEMILL creates websites for the folders and users can click on folder-names exactly like they click on file-names in the navigation. Folder pages are empty by default, but you can use a file named `index.md` to create content for the folder page. -- **Avoid Language Specific Characters**: As of version 1.0.5 the character encoding has been improved, but it is still not perfect. You can try to use german, french or other character sets to name your files and folders. But if you see some errors in the navigation of the website, please use english characters instead. In the content files itself you can use all character sets of course. - -When you name your files and folders, then always keep in mind, that the names are used to generate the navigation and the table of contents. So keep it short. Otherwise it might break the layout and the design. \ No newline at end of file diff --git a/content/02-for-writers/03-folder structure.md b/content/02-for-writers/03-folder structure.md deleted file mode 100644 index a83a863..0000000 --- a/content/02-for-writers/03-folder structure.md +++ /dev/null @@ -1,5 +0,0 @@ -# Folder Structure - -You can create any kind of folder structure with TYPEMILL, as long as you follow the naming conventions for folders and files. - -However, if you create a very deep structure, then it might result in an odd design or even in usability errors. Similar to real live, it is always a good idea to keep the hierarchy as flat as possible. \ No newline at end of file diff --git a/content/02-for-writers/04-mardown.md b/content/02-for-writers/04-mardown.md deleted file mode 100644 index 6f696ea..0000000 --- a/content/02-for-writers/04-mardown.md +++ /dev/null @@ -1,63 +0,0 @@ -# Markdown - -Never heard of Markdown? Markdown is a simple syntax for text formatting and very similar to the markup used by wikipedia. Markdown uses a handful special characters like `#` of `*` to format the text. - -The big advantage for writers: They don't have to click a button to format a headline or to create a list. Instead they can format the text during the writing process without an interruption. Once you are familiar with the syntax, you can write cleaner and faster than with any common HTML editor. For a quick start with many examples, read the [markdown reference page](/info/markdown-test). - -## Markdown Example - -This is a short example for a markdown text: - -```` -# My first level headline - -This is a paragraph and now we create an unordered list: - -- Item -- Another item -- A last item -```` - -From a technical point of view, markdown is cleaner, shorter and safer than HTML. At the same time, markdown can be transformed to clean HTML easily. This is why markdown is used by a lot of technology platforms like GitHub or StackOverflow. And Markdown is also entering the non technical mainstream. The press releases of dpa are written in Markdown, for example. - -## Markdown Quick Reference - -This is a quick reference table. For a detailed reference with examples, please check the [markdown reference page](/info/markdown-test). - -| Markdown | Result | -| ------------------------------------------------------------ | --------------------------------------- | -| `[TOC]` | Table of content | -| `#` | Headline first level | -| `######` | Headline sixth level | -| simple text | Paragraph | -| `_italic_` | Italic text | -| `*italic*` | Italic text | -| `__bold__` | Bold text | -| `**bold**` | Bold text | -| `- list item` | Unordered list | -| `* list item` | Unordered list | -| `5. ordered list` | Ordered list (use any number you want). | -| `---` | Horizontal rule | -| `[link text](http://typemill.net)` | Link | -| `![alt text](/path/to/image.jpg)` | Image | -| `> interesting quote` | Blockquote | -| `footnote[^1]`
`[^1]:footnote text` | Footnote | -| `*[HTML]:Hyper Text Markup Language` | Abbreviation | -| `Apple`
`: Green thingy growing on trees` | Definition list | -| `|name |usage |`
`|-----------|-----------|`
`| My Name | For Me |` | Table | -| ` | Inline code | -| `` | Inline math expression | -| ``` | Code block | -| ```latex | Math block | - - - - - -## Write Markdown with TYPEMILL - -An online editor for TYPEMILL is on its way, but for time beeing, you have to create your markdown text-files offline and upload them with your favourite FTP software. - -You can create markdown-files with any kind of text editor. Simply create a file with the ending `.md`. You can use any code editor, a simple text editor like the standard "editor" of Microsoft, or you can use a special markdown editor like Typora. Typora is a very clean WYSIWYG-editor that is specialized on distraction free text creation. - -For a quick reference and examples for all markdown formats you can head over to the [markdown reference page](/info/markdown-test). diff --git a/content/02-for-writers/05-google sitemap.md b/content/02-for-writers/05-google sitemap.md deleted file mode 100644 index a2e788c..0000000 --- a/content/02-for-writers/05-google sitemap.md +++ /dev/null @@ -1,3 +0,0 @@ -# Google Sitemap - -As of version 1.0.1, TYPEMILL creates a google sitemap in the cache folder. You can find the url for the sitemap in the system settings (basically it is something like `https://yourwebsite.net/cache/sitemap.xml`). Simply add the url to the google search console and you are donw. The sitemap will update once a day. You can also trigger a manual update with the F5 key (Windows) that refreshs the cache of your browser and the cache of TYPEMILL. \ No newline at end of file diff --git a/content/02-for-writers/06-themes.md b/content/02-for-writers/06-themes.md deleted file mode 100644 index 3ede696..0000000 --- a/content/02-for-writers/06-themes.md +++ /dev/null @@ -1,9 +0,0 @@ -# Themes - -TYPEMILL ships with the standard theme called "Typemill". Typemill is a univeral theme the fits for documentations as well as for any other kind of text-work. There are plans to add a lot more themes for specific need s in the future. - -You can configure the theme in the settings of the author panel. You will see an update banner, if there is a new version of the theme available. - -To update a theme, simply go to the theme folder of your typemill installation, delete the old folder of your theme (e.g. `/typemill`) and upload the new folder. - -If you are a developer or web-designer, you can easily create your own theme with the template language Twig. Please read the [theme documentation](/theme-developers) for more details. \ No newline at end of file diff --git a/content/02-for-writers/07-plugins.md b/content/02-for-writers/07-plugins.md deleted file mode 100644 index 7920104..0000000 --- a/content/02-for-writers/07-plugins.md +++ /dev/null @@ -1,16 +0,0 @@ -# Plugins - -As of version 1.1.0, TYPEMILL supports plugins. You can activate and configure all plugins in the author panel of TYPEMILL. You will see a small update banner if there exists a new version of the plugin. - -To update a plugin, simply go to the plugin folder of TYPEMILL, delete the plugin and upload the new version of the plugin. Then check the plugin configuration in the settings of the author panel. - -Right now all plugins are delivered with the core version of TYPEMILL. But as the number of plugins grows, there will probably be a central place to download and install the plugins in the future. - -The core version ships with the following plugins: - -* **Cookie Consent**: Adds a cookie consent banner to your website. -* **Analytics**: Adds Matomo (Piwik) or Google Analytics to your website. -* **Highlight**: Highlights code in code-blocks (useful for developers). -* **Math**: Write math with markdown and MathJax or KaTeX. Check the [markdown reference page](/info/markdown-test). - -If you are a developer and if you want to create your own plugins, please refer to the [plugin documentation](/plugin-developers). diff --git a/content/02-for-writers/08-forgot password.md b/content/02-for-writers/08-forgot password.md deleted file mode 100644 index 2b66e01..0000000 --- a/content/02-for-writers/08-forgot password.md +++ /dev/null @@ -1,21 +0,0 @@ -# Lost Your Password? - -TYPEMILL does not provide a password recovery, but there are two ways to create a new password. - -## Is there another admin? - -If there is another user with admin rights, then contact him. He can delete your user, create a new one and tell you the new password. Change the password immediately after login. - -## No other admin? - -If you are the only admin user, then please follow these steps: - -* Connect to your website (e.g. via FTP). -* Go to the folder `/settings` and backup the file `settings.yaml`. -* Then delete the file `settings.yaml` on your server. -* Go to `yoursite.com/setup`. -* Fill out the form. This will create a new admin user and a fresh settings-file. -* Upload your old settings-file, so your old settings are active again. -* If not done before e.g. via FTP, delete the old admin-user in the user management now. - -It might look a bit uncomfortable but it makes sure, that you are the owner of the website. \ No newline at end of file diff --git a/content/02-for-writers/index.md b/content/02-for-writers/index.md deleted file mode 100644 index f9f8f39..0000000 --- a/content/02-for-writers/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Hello Writers! - -If you love **simple text files** (Markdown) and if you like **distraction free websites** without fiddly technology, then TYPEMILL is for you! \ No newline at end of file diff --git a/content/03-for-theme-developers/00-quick start.md b/content/03-for-theme-developers/00-quick start.md deleted file mode 100644 index a1db029..0000000 --- a/content/03-for-theme-developers/00-quick start.md +++ /dev/null @@ -1,113 +0,0 @@ -# Quick Start for Theme-Developers - -You are a professional web developer and don't want to read the whole documentation? No problem, this is all you need to know to create your own theme for TYPEMILL. - -## Theme Folder - -You will find all themes in the `theme` folder of TYPEMILL. You can add a new folder for your theme there. The name of your folder is the name of your theme. - -## Change Theme - -You can choose the theme in author panel of TYPEMILL. - -## Theme Structure - -There is no theme structure. There are only two files that are required: - -- `index.twig`: All content files will be rendered with this template. -- `404.twig`: This is the template for a not found message. - -There is another optional template: - -- `cover.twig`: Use this name to create a template for a special startpage with a different design. - -There are two other files that are optional, but it is strongly recommended to add them: - -* `themeName.jpg`: A preview picture of your theme with a minimal width of 800px; -* `themeName.yaml`: A configuration file with the version, the author name, licence and other informations. - -It is always a good idea to structure your files a bit more. For example, you can create a folder called `partials` with separate files for different layouts (maybe a folder and file layout?), a navigation, a header, a footer or whatever you want. But this decision is completely up to you. The same with CSS, JavaScript and other ressources: It is a good practice to create separate folders for that, but it is up to you. - -## Theme-YAML - -The `themeName.yaml` must have the same name as your theme folder. A basic file looks like this: - -```` -name: My Theme Name -version: 1.0.0 -description: Write what you want -author: Your name here -homepage: http://an-info-website-for-the-theme.com -licence: MIT -```` - -You can also add settings for your themesi in the YAML-file like this: - -```` -settings: - chapter: Chapter - start: Start -```` - -The settings are automatically merged with all other TYPEMILL settings and are available on all pages, so you can access your theme variables like this: - -```` -{{ settings.themes.typemill.chapter }} // prints out "Chapter". -```` - -Finally you can make your theme variables editable for the user in the author panel. Just add a form definition in your yaml like this: - -```` -forms: - fields: - - chapter: - type: text - label: chapter - placeholder: Add Name for Chapter - required: true - - start: - type: text - label: Start-Button - placeholder: Add Label for Start-Button - required: true -```` - -This will create input forms in the author panel. The input forms will be prefilled with the settings-values of your YAML-file. - -## Twig - -TYPEMILL uses Twig as a template language. You are probably familiar with it. If not: Twig is a widespread template language, that is very easy to learn. It is shorter and safer to use than pure PHP. - -## Template Variables - -There are exactly six template variables to fill your templates with dynamic content: - -- `navigation`: This variable is a multidimensional array of objects. Each object represents a file or a folder. You can use this variable to create a navigation with a Twig-macro. A macro in Twig is the same as a recursive function in PHP. -- `item`: This variable is an object of the actual page. It contains all the details like the name, the url, the path, the chapter as well as the next and the previous items for a pagination. And guess what? The `navigation` variable mentioned above is just an array, that holds many of these item-objects. -- `content`: This variable holds the HTML content of the markdown file. Just print it out. -- `description`: This are the first lines of the content of a page. You can use this for the meta description. - - -- `breadcrumb`: This variable is an one dimensional array. It contains the breadcrumb of the page. Just use a loop like `{% for element in breadcrumb %}` to print it out. -- `settings`: In this variable you will find all the settings like the navigation-title, the author, the theme, the theme variables or the copyright. - -You can print out each variable with the twig-tag `{{ dump(navigation) }}` and inspect the content. This is probably the easiest way to familiarize with the possibilities for themes. - -## Asset Tags - -Plugin-developers want to add their own CSS and JavaScript to your theme. You should enable plugin-developers to do so with two Twig-tags: - -* `{{ assets.renderCSS() }}`: Put this before the closing ``-tag of your theme. -* `{{ assets.renderJS() }}`: Put this before the closing ``-tag of your theme. - -## Content-Styling - -If you create a theme, make sure that all content types (headlines, paragraphs, tables) are styled properly. You can use the [markdown-test-page](/info/markdown-test) to check the styling of all content-elements. - -## Read more - -If you are not ready to start with these information, then please read the full developer manual. In less than one hour you can develop your own themes for TYPEMILL like a pro. - -Happy coding! \ No newline at end of file diff --git a/content/03-for-theme-developers/01-theme structure.md b/content/03-for-theme-developers/01-theme structure.md deleted file mode 100644 index 2e68ddb..0000000 --- a/content/03-for-theme-developers/01-theme structure.md +++ /dev/null @@ -1,51 +0,0 @@ -# Theme Structure - -TYPEMILL requires a minimal structure and a small set of mandatory files: - -```` -/myTheme -- 404.twig -- index.twig -- cover.twig -- myTheme.jpg -- myTheme.yaml -```` - -Some Details: - -- **/myTheme**: A theme folder. The name of the folder is the name of the theme. -- **404.twig**: The template for a not found page. It is mandatory. -- **index.twig**: The template for all other pages. It is mandatory. -- **cover.twig**: The template for a different startpage-design. It is optional. -- **myTheme.jpg**: A preview picture of your theme. It is mandatory. The file must be named exactly like the theme folder. Minimum width is 800px. -- **myTheme.yaml**: A configuration file for your theme with author, version number and others. This is not mandatory, but highly recommended. The file must be named exactly like the theme folder. - -That's it. - -## Recommendation - -If you want to create a more complex structure, then you can do whatever you want, as long as you follow the basic structure and conventions described above. - -However, if you don't have an idea how to start, then you can follow this example: - -- `/css` - - style.css - - another.css -- `/js` - - javascript.js -- `/img` - - icon.png - - favicon.ico - - themeLogo.jpg -- `/partials` - - `layoutStart.twig`: Layout for the static startpage, usually with the html-head, a page structure and other stuff. - - `layout.twig`: Layout for all other pages, usually with the html-head, a page structure and other stuff. - - `navigation.twig`: The content-navigation of the page. include this into your layouts. - - `header.twig`: The head-area of your page. Include this into your layouts. - - `footer.twig`: The footer-area of your page. Include this into your layouts. -- `cover.twig`: Template with the content for an individual startpage. The cover.twig extends the layoutStart.twig. -- `index.twig`: Template for all other pages. The index.twig extends the layout.twig -- `404.twig`: Template for the not found page. The 404.twig extends the layout.twig. -- `themeName.yaml`: The meta-information with version, author name and other stuff. - -In Twig, you can include and extend templates and create a template hierarchy. Read the twig-chapter to understand how this works. \ No newline at end of file diff --git a/content/03-for-theme-developers/02-theme meta.md b/content/03-for-theme-developers/02-theme meta.md deleted file mode 100644 index 229e0f9..0000000 --- a/content/03-for-theme-developers/02-theme meta.md +++ /dev/null @@ -1,100 +0,0 @@ -# Theme Meta with YAML - -It is highly recommendet to add some meta-information to your theme. This is quickly done with a small YAML-file. The YAML-file must have the same name as your theme folder. The YAML-file has up to three parts and is used for this: - -* Display basic informations in the author-panel and generate update notifications. -* Use settings (variables) for your theme if you want. -* Let users edit the settings and customize the theme in the author-panel. - -## Add Basic Informations - -The basic informations in the YAML-file look like this: - -``` -name: My Theme Name -version: 1.0.0 -description: Write what you want -author: Your name here -homepage: http://an-info-website-for-the-theme.com -licence: MIT -``` - -As you can see the YAML-syntax is simple and readable even for non-technicians. Inside TYPEMILL the YAML-files are converted to one-dimensional or multi-dimensional arrays, so you can think about YAML as a simplified array language, if that helps. - -## Use Settings - -Sometimes you want to use variables in your theme, for example to change the text of a button. With YAML you can easily do this: Just create a new block that starts with `settings` and write all your settings as simple key-value-pairs. Indent them with two spaces like this: - -``` -settings: - chapter: Chapter - start: Start -``` - -The settings are automatically merged with all other TYPEMILL settings and are available in your themes with a simple Twig tag like this: - -``` -{{ settings.themes.typemill.chapter }} // prints out "Chapter". -``` - -Replace `typemill` with the name of your theme like this: - -```` -{{ settings.themes.mytheme.chapter }} -```` - -## Make Settings Editable - -Finally you can make your theme variables editable for the user in the author panel. To do this, just add another block that starts with `forms` and `fields`. After that, you can define a wide range of input fields with YAML. It starts with the name of the field followed by the field definition. - -``` -forms: - fields: - - chapter: - type: text - label: chapter - placeholder: Add Name for Chapter - required: true - - start: - type: text - label: Start-Button - placeholder: Add Label for Start-Button - required: true -``` - -TYPEMILL will use these definitions and generate input fields for the author panel on the fly, so that the user can edit the values and customize the theme. If you have defined settings with the same name as the field name (e.g. `chapter`), then the input field in the author panel will automatically be prefilled with your settings from the YAML-file. - -If you have a lot of fields, you can even group some fields together in a fieldset like this: - -```` -forms: - fields: - - chapter: - type: text - label: chapter - placeholder: Add Name for Chapter - required: true - - MyFirstfieldset: - type: fieldset - legend: Last Modified - fields: - - modified: - type: checkbox - label: Activate Last Modified - description: Show last modified date at the end of each page? - - modifiedText: - type: text - label: Last Modified Text - placeholder: Last Updated - -```` - -The fields `modified` and `modifiedText` will then be grouped in a fieldset with the legend `Last Modified`. - -If you read the YAML-definition for input fields carefully, then you will notice that the definitions are pretty similar to HTML: You simply define types and attributes like input-type, labels and placeholders. Nearly all valid field-types and field attributes are supported. You can find a detailed list in the [documentation for plugins](/plugin-developers/documentation/field-overview). \ No newline at end of file diff --git a/content/03-for-theme-developers/03-asset tags.md b/content/03-for-theme-developers/03-asset tags.md deleted file mode 100644 index cf033d8..0000000 --- a/content/03-for-theme-developers/03-asset tags.md +++ /dev/null @@ -1,44 +0,0 @@ -# Asset Tags - -Sometimes, a plugin wants to add some CSS and JavaScript to your theme. For example, the cookieconsent-plugin. It adds a cookie-consent popup to all pages, so that users can agree to the cookie policy of your website. - -There are two Twig-tags, that allow plugins to add JavaScript and CSS. Please make sure that you add these tags to your theme, because otherwise, the plugins won't work: - -- `{{ assets.renderCSS() }}` -- `{{ assets.renderJS() }}` - -It is recommended to add the CSS tag after all your css-files and before the closing head-tag. It is also a good practice in Twig, to wrap your ressources in a block-tag. You can read more about this in the Twig-chapter. - -```` - - - title - .... - .... - {% block stylesheets %} - - - {{ assets.renderCSS() }} - - {% endblock %} - -```` - -The same for JavaScript: It is recommended to place all JavaScript at the end of the page before the closing body-tag. And you should wrap all your JavaScript in a block-element, too: - -```` - - ... - {{ content }} - ... - ... - - {% block javascripts %} - - - - {{ assets.renderJS() }} - - {% endblock %} - -```` diff --git a/content/03-for-theme-developers/04-twig.md b/content/03-for-theme-developers/04-twig.md deleted file mode 100644 index c664cdc..0000000 --- a/content/03-for-theme-developers/04-twig.md +++ /dev/null @@ -1,215 +0,0 @@ -# Templates with Twig - -Twig is a flexible, fast and secure template engine for PHP. Twig is used by many modern software projects and content management systems like CraftCMS, Statamic and even Drupal. If you have never used a template language before, then there are some good reasons to start with it today: - -- The Twig syntax is **much shorter**, so your templates look cleaner and are easier to maintain. -- Twig produces **less errors**. An unknown variable produces an error in PHP, but it does not in Twig. Twig handles most of these cases, so you skip a lot of ugly logic in your theme. -- Twig is very **widespread**, so you can work with Twig in many other cms. - -The full Twig documentation for template designers is just one page long, so just head [over to Twig](http://twig.sensiolabs.org/doc/2.x/templates.html) and read it. You can learn the most important essentials for TYPEMILL in the following list. - -[TOC] - -## Basic Twig Syntax - -In a Twig template, you can use ordinary HTML markup. Statements and expressions are written in curly brackets. - -Twig uses two curly brackets **to print out** a variable or expression: - -```` -

{{ variable }}

-```` - -Twig uses one curly bracket with a procent sign **to execute** statements such as loops: - -```` - -```` - -As you can see, the Twig syntax is cleaner and easier than pure PHP: - -- You don't need the long `` introduction. -- You don't need the `$` to mark a variable. -- You don't need the `;` to finish a statement. -- You don't need the `->` or `['foo']` notation for objects and arrays, just use a dot-notation like `element.name` for everything. -- You don't need a lot of `()` like `foreach(a as b)`. -- You don't need a syntax like `output, ENT_QUOTES, 'UTF-8') ?>` for escaping, just use a filter with a pipe notation like this `{{ element.output|e }}`. - -## References - -These are some useful examples and snippets, that you can use for your templates. - -### Simple Variable - -Set a simple variable and print it out: - -```` -{% set content = "my content" %} -{{ content }} -```` - -### Array - -Set an array and print out a value: - -```` -{% set content = ['first' => 'one value', 'second' => 'another value'] %} - -{{ content.first }} // prints out 'one value' -```` - -### Object - -Set an object and print out a value: - -```` -{% set content = {'first' : 'first value', 'second' : 'another value'} %} - -{{ content.first }} // prints out 'first value' -```` - -### Loop - -Loop over an object or array and print out the values: - -```` -{% for value in content %} - {{ value }} -{% endfor %} -```` - -Outputs: - -- first value -- another value - -### Filters - -Set the first character of the words to uppercase: - -```` - -```` - -Output: - -- First Value -- Another Value - -You can manipulate variables with filters. Filters are used after a pipe notation. See a list of all filters in the [Twig documentation](http://twig.sensiolabs.org/doc/2.x/filters/index.html). - -### Functions - -Print out content that was created in the last 30 days: - -``` -{% if date(content.created_at) > date('-30days') %} - {{ content.title }} -{% endif %} -``` - -'created_at' could be a timestamp of the content file. See a list of all functions in the [Twig documentation](https://twig.sensiolabs.org/doc/2.x/functions/index.html). - -### Include Template - -To include a template, just write: - -```` -{{ include(sidebar.twig) }} -```` - -**Example usage**: Your layout-template **includes** other templates like header.twig, footer.twig or sidebar.twig. - -### Extend Template - -To extend a template, just write: - -```` -{% extends "partials/layout.twig" %} -```` - -**Example usage:** Your content template (e.g. index.twig) **extends** your layout template. This means, index.twig is rendered within the layout.twig, and the layout.twig includes a header.twig, a footer.twig and a sidebar.twig. - -### Example: Include and Extend - -If you extend a template with another template (e.g. if you extend `layout.twig` with `index.twig`), then you have to define some content areas in the "parent" template that get overwritten with the content of the "child" template. You can use the "block" statement to define such areas. - -Your layout.twig looks like this: - -```` - - - - ... - - -
{% block content %}{% endblock %}
- - - - -```` - -Your index.twig looks like this: - -```` -{% extends "layout.twig" %} - -{% block content %} - - - -{% endblock %} -```` - -Now, your template `index.twig` extends your template `layout.twig` and the `block content` in your layout template gets replaced by the `block content` defined in your index template. At the same time the layout template includes the navigation and the footer. - -### Macros - -Macros in Twig are like functions in PHP: You can use them for repeating tasks. A typical example is a navigation, where you loop over a comlex and multi-dimensional array recursively. But you can also use macros to render forms and input fields. - -Macros are usually the most complex parts of your theme and they are mostly used for generating a navigation. You can use the macro for the navigation used in the typemill theme as a starting point. In most cases, you won't even touch it, but if you read the code in detail, it will probably pretty easy for you to costumize it for your needs. - -A typical macro code for a navigation looks like this: - - {% macro loop_over(navigation) %} - - {% import _self as macros %} - - {% for element in navigation %} -
  • - {% if element.elementType == 'folder' %} - {{ element.name|title }} - - {% else %} - {{ element.name|title }} - {% endif %} -
  • - {% endfor %} - {% endmacro %} - - {% import _self as macros %} - - -These are only some small examples, how you can use Twig to create templates and themes for TYPEMILL. In fact, you can do a lot more complex stuff with Twig. Just read the [official documentation](https://twig.sensiolabs.org/doc). - diff --git a/content/03-for-theme-developers/05-theme variables/00-content.md b/content/03-for-theme-developers/05-theme variables/00-content.md deleted file mode 100644 index e6ae456..0000000 --- a/content/03-for-theme-developers/05-theme variables/00-content.md +++ /dev/null @@ -1,6 +0,0 @@ -# Content - -The content-variable holds the whole content of your Markdown file in HTML. To print out the content of the Markdown file, simply write: - - {{ content }} -You can only use Twig filters to manipulate the content, but the possibilities are limited. Usually you should not hack into the content, but if you really need it (e.g. to display adds or to show a subscription form), then you have to create a plugin for this. diff --git a/content/03-for-theme-developers/05-theme variables/01-title.md b/content/03-for-theme-developers/05-theme variables/01-title.md deleted file mode 100644 index bcc1e57..0000000 --- a/content/03-for-theme-developers/05-theme variables/01-title.md +++ /dev/null @@ -1,21 +0,0 @@ -# Title - -The title tag returns the first `

    ` headline used in the content file. If ther is no headline, it uses the file name. - -```` -{{ title }} -```` - -You can use the title for the HTML-title like this: - -```` -{{ title }} -```` - -And you can of course manipulate the title with a Twig filter like this: - -```` -{{ title|title }} -```` - -This will display the first character of each word in uppercase. \ No newline at end of file diff --git a/content/03-for-theme-developers/05-theme variables/02-description.md b/content/03-for-theme-developers/05-theme variables/02-description.md deleted file mode 100644 index cd85f3d..0000000 --- a/content/03-for-theme-developers/05-theme variables/02-description.md +++ /dev/null @@ -1,21 +0,0 @@ -# Description - -The description variable extracts the first lines out of the content. It is usually about 300 characters long and you can use this for the meta-description, for teasers and for snippets. - - {{ description }} - -Use it for the description meta-tag like this: - -```` - -```` - -You can also manipulate the description with Twig-filters, if you want. For example the filter... - -```` -{{ description|slice(0,100) }} -```` - -... will output the first 100 characters of the description. - - diff --git a/content/03-for-theme-developers/05-theme variables/03-image.md b/content/03-for-theme-developers/05-theme variables/03-image.md deleted file mode 100644 index 74c473d..0000000 --- a/content/03-for-theme-developers/05-theme variables/03-image.md +++ /dev/null @@ -1,16 +0,0 @@ -# Image - -If present, the image tag will return the url and the alt-tag of the first image used in the article: - -```` -{{ image.img_url }} -{{ image.img_alt }} -```` - -This can be pretty handy if you want to use an header image or if you want to add meta-tags for social media networks. The Typemill standard themes uses meta-tags for twitter and facebook, so that the image get's displayed in the social media posts. It can look like this: - -```` - - -```` - diff --git a/content/03-for-theme-developers/05-theme variables/04-base url.md b/content/03-for-theme-developers/05-theme variables/04-base url.md deleted file mode 100644 index 99b7164..0000000 --- a/content/03-for-theme-developers/05-theme variables/04-base url.md +++ /dev/null @@ -1,14 +0,0 @@ -# Base Url - -Whenever you want to create some urls in your theme, you can build them with the base_url tag. The base url always returns the basic url to your application. Usually this is the domain-name, but if you develop on localhost, it can also be something like `http://localhost/your-project-folder`. - -```` -{{ base_url }} -```` - -If you develop your theme, the base url is pretty useful if you want to include some assets like CSS or JavaScript. You can reference to these files like this: - -```` - -```` - diff --git a/content/03-for-theme-developers/05-theme variables/05-item.md b/content/03-for-theme-developers/05-theme variables/05-item.md deleted file mode 100644 index 1a39be6..0000000 --- a/content/03-for-theme-developers/05-theme variables/05-item.md +++ /dev/null @@ -1,311 +0,0 @@ -# Item - -The item variable is an object. It provides informations about the actual page like the page title, the url, the slug or the next and the previous page. - -Some informations are only available for the type `folder` while some other informations are specific to the type `file`. But most informations are shared by both. - -[TOC] - -## Example of the {{ item }} variable - -This is an example of an item variable: - -```` -stdClass Object -( - [originalName] => 25-navigation.md - [elementType] => file - [fileType] => md - [order] => 25 - [name] => navigation - [slug] => navigation - [path] => \3_for-developers\05-theme-variables\25-navigation.md - [key] => 4 - [keyPath] => 3.3.4 - [keyPathArray] => Array - ( - [0] => 3 - [1] => 3 - [2] => 4 - ) - [chapter] => 4.4.5 - [urlRel] => /typemill/developers/theme-variables/navigation - [urlAbs] => http://localhost/typemill/developers/theme-variables/navigation - [active] => 1 - [modified] => 1525088781 - [thisChapter] => stdClass Object - ( - [originalName] => 05-theme-variables - [elementType] => folder - [index] => 1 - [order] => 05 - [name] => theme variables - [slug] => theme-variables - [path] => \3_for-developers\05-theme-variables - [urlRel] => /typemill/developers/theme-variables - [urlAbs] => http://localhost/typemill/developers/theme-variables - [key] => 3 - [keyPath] => 3.3 - [keyPathArray] => Array - ( - [0] => 3 - [1] => 3 - ) - - [chapter] => 4.4 - [active] => 1 - [activeParent] => 1 - ) - - [prevItem] => stdClass Object - ( - [originalName] => 15-breadcrumb.md - [elementType] => file - [fileType] => md - [order] => 15 - [name] => breadcrumb - [slug] => breadcrumb - [path] => \3_for-developers\05-theme-variables\15-breadcrumb.md - [key] => 3 - [keyPath] => 3.3.3 - [keyPathArray] => Array - ( - [0] => 3 - [1] => 3 - [2] => 3 - ) - - [chapter] => 4.4.4 - [urlRel] => /typemill/developers/theme-variables/breadcrumb - [urlAbs] => http://localhost/typemill/developers/theme-variables/breadcrumb - ) - - [nextItem] => stdClass Object - ( - [originalName] => 30-settings.md - [elementType] => file - [fileType] => md - [order] => 30 - [name] => settings - [slug] => settings - [path] => \3_for-developers\05-theme-variables\30-settings.md - [key] => 5 - [keyPath] => 3.3.5 - [keyPathArray] => Array - ( - [0] => 3 - [1] => 3 - [2] => 5 - ) - - [chapter] => 4.4.6 - [urlRel] => /typemill/developers/theme-variables/settings - [urlAbs] => http://localhost/typemill/developers/theme-variables/settings - ) - -) -```` - -## Shared properties - -The following informations (properties) are shared by folders and files. The examples are based on a simple file and folder structure like this: - -- content - - 01-my-folder - - index.md - - 04-my-content-file.md - -### {{ item.elementType }} - -The type of the item. Possible values are: - -- "file" -- "folder" - -You can check the elementType and display a folder in a different way than a content file. - -Example: `{% if item.elementType == 'folder' %}` - -### {{ item.urlRel }} - -The relative url of the item without the base url. This is useful if you want to set a link to another internal page. - -Example: `/my-folder/my-content-file` - -### {{ item.urlAbs }} - -The absolute url of the item. This is useful for cannonical links, social media links or permalinks. - -Example: `http://mydomain.com/my-folder/my-content-file` - -### {{ item.slug }} - -The slug of the file or folder. This is the last part of the url. - -Example: `/my-content-file` in the url `www.mywebsite.com/my-folder/my-content-file`. - -### {{ item.name }} - -The human readable name of the file or folder. - -Example: `my content file` for a Mardown file with a name like `01.my-content-file.md`. - -### {{ item.originalName }} - -The original name of the file or folder. You probably don't need it for your theme. - -Example: `04.my-content-file.md` or `1.my-folder`. - -### {{ item.path }} - -The physical path to the item on your server. You probably don't need that, but TYPEMILL uses this information to map the urls with the content files and folders. - -Example: `\1.my-folder\04.my-content-file.md`. - -### {{ item.order }} - -The prefix of the item for ordering. You probably don't need it for your theme. - -Example: `1` for the folder and `04` for the file. - -### {{ item.active }} - -The item.active indicates, if the item is active or not. You probably don't need it in a page content, because the current page is always an active page, too. But you will need this in another context, for example, if you create a navigation. - -### {{ item.key }} - -The key of the item within the navigation array. You probably don't need that. - -Example: `2`. - -### {{ item.keyPath }} - -The full key path of the item within the navigation array. You probably don't need that. - -Example: `1.3.2` - -### {{ item.keyPathArray }} - -The full key path of the item within the navigation array as an array instead of a string. - -Example: `array(0 => 1, 1 => 3, 2 => 2 )` - -This might be useful if you want to determine the depth of the item within the content structure. - -Example: `item.keyPathArray|length` returns `3`, so you know that the page exists in third level of the content structure. - -### {{ item.chapter }} - -The human readable key path of the item as a string. Different to the key path, it starts with `1` instead of `0`. You can use it to print out a chapter number. - -Example: `2.4.3` - -### {{ item.thisChapter }} - -The parent chapter of the current item. If the current item is 1.3.2, then the parent chapter is 1.3. - -The variable `item.thisChapter` is an item object again, so you have access to all the above informations. This way, you can display the parent chapter's name or create a link to the parent chapter on the page. - -Example: `{{ item.thisChapter.name}}` - -### {{ item.nextItem}} - -The next item. If the current item is 1.3.2, then the next item might be 1.3.3 or 1.4. - -The `item.nextItem` is an item object again, so you have access to all the informations explained above. You can use the nextItem to create a pagination. - -Example: `{{ item.nextItem.name }}` - -### {{ item.prevItem}} - -The previous item. If the current item is 1.3.2, then the previous item is 1.3.1. If the current item is 1.3, then the previous item might be 1.2.8. - -The `item.prevItem` is an item object again, so you have access to all the informations explained above. You can use the prevItem to create a pagination. - -Example: `{{ item.prevItem.name }}` - -### {{ item.modified }} - -Returns the last modified date of the file as a number. You can use this to print out the last modified date in your theme. Use the date-function of Twig to format the date. - -Example: `Last modified: {{ item.modified|date(m/d/Y) }}` - -## Specific to Folders or Files - -The following informations are specific to files or folders - -### {{ item.fileType }} - -This information is only available for **files**. The fileType is `md` for Markdown. You will probably not need it for your theme. - -Example: `{% if item.elementType == 'file' %} {{ item.fileType}} {% endif %}` - -### {{ item.index }} - -This information is only available for **folders**. It indicates, if there exits an `index.md` file in the folder or not. If there is no index file with content for the folder, then you can display an alternative content. - -The whole usecase might look like this: - -``` -{% if item.elementType == 'folder' %} - {% if item.index %} - {{ content }} - {% else %} -

    {{ item.name }}

    -

    Your alternative static content for a folder.

    - {% endif %} -{% endif %} -``` - -### {{ item.folderContent }} - -This information is only available for **folders**. It contains the whole content of that folder as a multidimensional array of item objects. You can use it to list the content of a folder. - -To do so, you have two options: - -1. Display only the first level items in the current folder. This can be done with a simple `for` loop. -2. Display all nested items and folders within the current folder recursively. You have to write a Twig macro for that. - -The simple solution with all first level items of the current folder looks like this: - -```` -{% if item.elementType == 'folder' %} - -{% endif %} -```` - -To display all items within the current folder you have to create a macro in a separate file like this first: - -```` -{% macro loop_over(folder) %} - {% for element in folder %} - {% if element.elementType == 'folder' %} - {{ element.name }} - - {% else %} - {{ element.name }} - {% endif %} - - {% endfor %} -{% endmacro %} -```` - -Then you have to import the macro into your template and call it like this: - -``` -{% import 'folderMacro.twig' as macros %} -{% if item.elementType == 'folder' %} - -{% endif %} -``` - -You will learn more about macros in the chapter about the navigation variable. - diff --git a/content/03-for-theme-developers/05-theme variables/06-breadcrumb.md b/content/03-for-theme-developers/05-theme variables/06-breadcrumb.md deleted file mode 100644 index 03c8e13..0000000 --- a/content/03-for-theme-developers/05-theme variables/06-breadcrumb.md +++ /dev/null @@ -1,11 +0,0 @@ -# Breadcrumb - -The `{{ breadcrumb }}` variable contains the breadcrumb for the page. It is a simple one dimensional array of item objects. You can loop over the breadcrumb and print the elements out like this: - - - -All informations of the items are available, so check the chapter about the item variable for more details. \ No newline at end of file diff --git a/content/03-for-theme-developers/05-theme variables/07-navigation.md b/content/03-for-theme-developers/05-theme variables/07-navigation.md deleted file mode 100644 index f88c42f..0000000 --- a/content/03-for-theme-developers/05-theme variables/07-navigation.md +++ /dev/null @@ -1,102 +0,0 @@ -# Navigation - -The variable `{{ navigation }}` represents the structure of the whole content folder and can be used to create a navigation. - -The `{{ navigation }}` variable is a multi dimensional array of item objects. With that array you have access to nearly all informations, that an item object provides. Only the following informations for the paging is not part of the item objects within the navigation variable: - -- thisChapter -- nextItem -- prevItem - -The chapter about the `{{ item }}` variable lists all informations, that are provided by the item object. Read it, if you haven't done it yet. - -## Example of the {{ navigation }} variable - -This is an example of the `{{ navigation }}` variable containing just one folder and a file: - - Array( - [0] => stdClass Object( - [originalName] => 0_about-typemill - [elementType] => folder - [index] => 1 - [order] => 0 - [name] => about typemill - [slug] => about-typemill - [path] => \0_about-typemill - [urlRel] => /about-typemill - [urlAbs] => http://localhost/about-typemill - [key] => 0 - [keyPath] => 0 - [keyPathArray] => Array - ( - [0] => 0 - ) - [chapter] => 1 - [folderContent] => Array - ( - [0] => stdClass Object( - [originalName] => 02-what-is-mardown.md - [elementType] => file - [fileType] => md - [order] => 02 - [name] => what is mardown - [slug] => what-is-mardown - [path] => \0_about-robodoc\02-what-is-mardown.md - [key] => 0 - [keyPath] => 0.0 - [keyPathArray] => Array - ( - [0] => 0 - [1] => 0 - ) - [chapter] => 1.1 - [urlRel] => /about-robodoc/what-is-mardown - [urlAbs] => http://localhost/about-robodoc/what-is-mardown - ) - ) - ) - ) - -## Create a Navigation for Your Theme - -To print out the navigation or a table of contents, you have to loop over `{{ navigation }}` recursively. In Twig, you can do this with a macro. - -In the following example, the macro is integrated in a separate template called "navigation.twig". You can also create a separate file with the macro (e.g. "navMacro.twig") and import it into your navigation template. - -The whole usecase with the macro and the navigation in one template looks like this: - - {# define the macro #} - {% macro loop_over(navigation) %} - {% import _self as macros %} - {% for item in navigation %} -
  • - {% if item.elementType == 'folder' %} - {% if item.index %} - {{ item.name }} - {% else %} - {{ item.name }} - {% endif %} - - {% else %} - {{ item.name }} - {% endif %} -
  • - {% endfor %} - {% endmacro %} - - {# import the macro and use it to create the navigation #} - {% import _self as macros %} - -Just as a recommendation for your theme-structure: Typically you create a separate file like `navigation.twig` with all the code above. Then you place this template in a folder like `partials`. You can include this navigation-file in a `layout.twig` file, so that the navigation is included in all pages of your theme. So the structure might look like this: - -- theme - - partials - - layout.twig // includes navigation - - navigation.twig - - index.twig // extends layout.twig \ No newline at end of file diff --git a/content/03-for-theme-developers/05-theme variables/08-settings.md b/content/03-for-theme-developers/05-theme variables/08-settings.md deleted file mode 100644 index 4576fe4..0000000 --- a/content/03-for-theme-developers/05-theme variables/08-settings.md +++ /dev/null @@ -1,85 +0,0 @@ -# Settings - -The `{{ settings }}` variable is a simple array. It contains all settings throughout the TYPEMILL system, in detail: - -* The user settings for the system. -* The user settings for the themes. -* The user settings for the plugins. - -All these settings are merged and managed by TYPEMILL in the background. This is pretty handy because you can use all settings within one variable. - -## Useful Settings - -The following settings might be useful for your theme: - -### {{ settings.title }} - -The title of the website. The default value is `TYPEMILL`. - -### {{ settings.author }} - -Thee author of the website. The default value is `unknown`. - -### {{ settings.copyright }} - -The copyright of the website. The default value is `copyright`. - -### {{ settings.startpage }} - -Has a separate startpage or not. Default value is `true`. - -### {{ settings.theme }} - -The name of the theme that is in use. Default value is `typemill`. - -### {{ settings.version }} - -The version of TYPEMILL that is in use. A value of the format `0.0.1`. - -## Additional Settings - -There a some more settings that are probably not very useful for your theme: - -### {{ settings.themeFolder }} - -The folder of the theme. The default value is `theme`. - -### {{ settings.contentFolder }} - -The folder of the content. The default value is `content`. - -### {{ settings.rootPath }} - -The full path to the root of the website. - -### {{ settings.themePath }} - -The full path to the theme of the website. - -### {{ settings.authorPath }} - -The full path to the author theme. This theme is actually only in use for the setup path, but might hold an admin dashboard in future. - -### {{ settings.displayErrorDetails }} - -If the error display is off or on. Default value is `false`. - -Some more informations are provided by the Slim framework, that runs under the hood of TYPEMILL. You will probably never use them. - -## Settings for Themes and Plugins - -You have also access to all plugins- and theme-settings. Simply use them like this: - -```` -{{ settings.themes.mytheme.mythemesetting }} -{{ settings.plugins.myplugin.mypluginsetting}} -```` - -You have to replace `mytheme` and `myplugin` with the name of the theme or plugin and the `mythemesettings` and `mypluginsettings` with the name of the settings. you can find the name of the settings in the YAML-file of the plugin or theme. - -For example: The standard theme of TYPEMILL is called `typemill`. And there you can edit the label of the start button displayed on the startpage. The name of the variable is `start`. So you can simply print it out like this: - -```` - -```` - diff --git a/content/03-for-theme-developers/05-theme variables/index.md b/content/03-for-theme-developers/05-theme variables/index.md deleted file mode 100644 index 6b0d0f3..0000000 --- a/content/03-for-theme-developers/05-theme variables/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Theme Variables - -TYPEMILL provides **9 variables** for your theme right now. They are easy to understand and simple to use. \ No newline at end of file diff --git a/content/03-for-theme-developers/index.md b/content/03-for-theme-developers/index.md deleted file mode 100644 index 2217991..0000000 --- a/content/03-for-theme-developers/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Hello Theme-Developers! - -If you love **lightweight systems**, stupid **simple theming** and the template language **Twig**, then TYPEMILL is for you! \ No newline at end of file diff --git a/content/04-for-plugin-developers/00-intro.md b/content/04-for-plugin-developers/00-intro.md deleted file mode 100644 index 9372012..0000000 --- a/content/04-for-plugin-developers/00-intro.md +++ /dev/null @@ -1,40 +0,0 @@ -# Introducing Plugins - -Everybody loves plugins. With plugins, users can add new functionalities to their website without the help of a developer. And developers can write and distribute their own plugins without ever touching or changing the core code of a software. Plugins are a great and widespread concept, so we introduced a plugin-system for TYPEMILL with version 1.1.0. - -## What Plugins Can Do - -With themes, developers can create an individual design for a TYPEMILL-website. With plugins, they can add individual functionality to a TYPEMILL-website. Some examples: - -* A plugin can add a cookie consent banner to your website. -* A plugin can integrate an analytics script like Piwik or Google Analytics into your website. -* With a plugin you can create a new Twig tag, that can be used by a theme developer in the frontend (similar to a shortcut in WordPress). -* A plugin can be really complex and add a complete admin area to TYPEMILL. - -## Your Assumed Knowledge - -Crafting a plugin is usually a bit more complex than crafting a theme. You can create a theme with a good knowledge of HTML, CSS, JavaScript and some basic coding skills in PHP like variables and loops. That's it. - -To create a plugin, you should have a deeper understanding of PHP development. Let's try it that way: - -* You know what objects and classes in PHP are: That's good ! -* You know what namespacing in PHP is: Great, let's start !! -* You know MVC and Controllers in PHP: Not really needed, but good to know !!! -* You already worked with the Slim PHP framework or any other PHP framework before: Fantastic !!!! -* You know how to work with events in PHP: I think you can skip this tutorial :) - -Object orientation and namespacing are really required, so if you are not familiar with that, then start to learn it today. Object orientation is standard in PHP nowadays and there are dozens of good tutorials. - -A knowledge of the Slim framework or event-driven programming in PHP is not required to start with your first TYPEMILL-plugin. You will learn as much as you need in this tutorial and in the documentation. - -## How To Learn - -If you are familiar with plugin development, flat file systems and event driven programming, than the documentation is enough to get started. TYPEMILL has its own concept, but it still works pretty similar to other modern systems like Statamic, Kirby or Grav. - -If you are new to flat file systems and plugin development, then you should start with the tutorial. In the tutorial, you will learn how to create the cookie consent plugin step by step. The tutorial is pretty basic and detailed, so that beginners have a good chance to master it. - -## Before you start - -In Version 1.1.X, the plugin system is pretty basic and still under development. You will probably have to adjust your plugins as the plugin system of TYPEMILL evoles over the time. If you miss something in the current plugin system (e.g. some events), feel free to post it on github. - -Happy coding!! diff --git a/content/04-for-plugin-developers/01-tutorial/00-cookie consent plugin.md b/content/04-for-plugin-developers/01-tutorial/00-cookie consent plugin.md deleted file mode 100644 index 9737da0..0000000 --- a/content/04-for-plugin-developers/01-tutorial/00-cookie consent plugin.md +++ /dev/null @@ -1,56 +0,0 @@ -# The Cookie Consent Plugin - -Let's get our hands dirty and look into the cookie consent plugin. The cookie consent plugin adds a little banner to each page of a website, so that the user can agree to the website's cookie policy. - -You might think, that you do not need a plugin for that. And you are right: You can simply visit the [cookieconsent website](https://cookieconsent.insites.com/), configure your cookie consent, copy the code and paste it into your theme. It is only a bit of JavaScript and CSS. The script from the cookie consent website looks like this: - -``` - - - -``` - -So what is the point to create a plugin just to add this little script to a website? - -## The Problem With Hardcoding - -To hardcode the cookie consent script manually into your TYPEMILL-theme has two downsides: - -- As a developer, I have to touch the templates of the TYPEMILL-theme and add the cookie consent script there. And each time, if I update the theme, I have to add the script again. -- As an author or admin, I cannot change the text or the color of the cookie consent in the setup area, and I cannot activate or deactivate it. Instead I have to open the template files in a code editor and work like a developer. - -Wouldn't it be much better to configure the cookie consent in the setup area of TYPEMILL and to add the cookie consent to a theme without even touching it? - -Of course, so let's try it. - -## How The Plugin Should Work - -Before we start, let's describe, how the cookie consent plugin should work: - -- The plugin should add a CSS-file into the html-head of the theme-templates. -- The plugin should add a JavaScript-file at the bottom of the theme-templates. -- After the JavaScript file, the plugin should add the initial script with the values for the colors and the content. -- And finally, the content- and color-values should be editable, so that the user can change them in the plugin settings. - -## Next: Create a File Structure - -In the next chapters, we will learn how we can add a cookie banner easily with a TYPEMILL plugin. Let's start with a file structure. \ No newline at end of file diff --git a/content/04-for-plugin-developers/01-tutorial/01-write the yaml file.md b/content/04-for-plugin-developers/01-tutorial/01-write the yaml file.md deleted file mode 100644 index 91ad2c8..0000000 --- a/content/04-for-plugin-developers/01-tutorial/01-write the yaml file.md +++ /dev/null @@ -1,77 +0,0 @@ -# Write the YAML-Configuration-File - -Every plugin should have a basic configuration file with some meta-informations like the version, the licence, and the author. - -The configuration file is located in the root-folder of your plugin and must have the same name as the plugin folder. For the cookie-consent-plugin, this looks like this: - -```` -/cookieconsent - - cookieconsent.yaml - - cookieconsent.php -```` - -The configuration file is written in simple YAML syntax. The basic YAML-file for the cookie consent plugin looks like this: - -```` -name: Cookie Consent -version: 1.0.0 -description: Enables a cookie consent for websites -author: Sebastian Schürmanns -homepage: https://cookieconsent.insites.com/ -licence: MIT -```` - -## YAML Transforms to Arrays - -If you have never heared about YAML: YAML is a simple configuration language. And with a library you can easily transform a YAML file into an array. That is why YAML is so widespread. In TYPEMILL, the basic informations are transformed into a simple one-dimensional array like this: - -```` -array ( - 'name' => 'Cookie Consent, - 'version => '1.0.0', - 'description' => Enables a cookie consent for websites', - 'author' => 'Sebastian Schürmanns', - 'homepage' => 'https://cookieconsent.insites.com/', - 'licence' => 'MIT' -) -```` - -Of course, you can also create a multi-dimensional array. This works with simple indentation. Two spaces indicate the next level. A YAML definition like this: - -```` -options: - first: yellow - second: green -```` - -Would transform to this array: - -```` -array( - 'options' => array( - 'first' => 'yellow', - 'second' => 'green - ) -) -```` - -When you write YAML, be careful and only use spaces for indentation. If you use the tab key, then the tranformation will break. - -## More Configurations - -For now, we have only some basic informations in your configuration file. But there are more possibilities and we will learn about them later. For now just remember, that a configuration file can have three parts depending on the plugin's needs: - -* Basic informations about the plugin. -* Default values for the plugin. -* Definitions for input fields, so that the user can change the default values in the setup. - -## Background - -In theory, a very simple plugin can work without a configuration file. But it is highly recommended to add a configuration file to any plugin. Here are the reasons: - -* TYPMILL uses the version number in the configuration file to check, if there exists a newer version of the plugin. So this is pretty important. -* The informations in the configuration file are displayed to the user in the setup of TYPEMILL. So this is pretty important, too. - -## Next: Basic PHP-File - -The configuration file was a pretty easy start. In the next chapter, we will get our hands dirty and write the first PHP-code. \ No newline at end of file diff --git a/content/04-for-plugin-developers/01-tutorial/02-write the php file.md b/content/04-for-plugin-developers/01-tutorial/02-write the php file.md deleted file mode 100644 index c6ced80..0000000 --- a/content/04-for-plugin-developers/01-tutorial/02-write the php file.md +++ /dev/null @@ -1,156 +0,0 @@ -# Write the Basic PHP-File - -We have our basic configuration file, so let's start with our basic php file now. As mentioned before, the basic PHP file must have the same name as the plugin folder: - -``` -/cookieconsent - - cookieconsent.yaml - - cookieconsent.php -``` - -TYPEMILL uses object oriented PHP, so let us create a class for our plugin. - -## Write The Plugin Class - -Open the `cookieconsent.php`-file and add the following code: - -``` - 'onSettingsLoaded', - 'onTwigLoaded' => 'onTwigLoaded' - ); - } -} -```` - -As you can see, the method returns a simple array. And the name `getSubscribedEvents` indicates, that this has something to do with events. So it's time to talk about events now. - -## Introducing Events - -Nearly all content management systems use events to create a plugin system. So if you know what events are, then you can create plugins for all these systems much easier. But what are events in PHP? - -If you have ever written some code in JavaScript, then you know, what events are. If not: An event system follows a pretty simple IFTTT-logic like: "If This Than That". If this happens, than do that. If that happens, then do this. - -As a plugin developer, you do exactly the same: When someone visits the URL of a TYPEMILL website, then TYPEMILL creates the page in several steps. For each step, TYPEMILL fires a special event. As a developer, you 'listen' or 'subscribe' to some of these events, and if the event happens, then you tell the system to perform an action, or more specific, to call a method within your plugin code. That is basically the whole magic. - -## Cookie Consent Event Logic - -Let us describe such and IFTTT-logic for the cookie consent plugin. It is as simple as that: - -* If the system has loaded all settings, then give me the settings. -* If the system has loaded the template engine, then - * add a CSS-file, - * add a JavaScript-file and - * inject a little sub-template with the initial JavaScript into the theme and - * read the user settings and paste the values for colors and content into the script. - -## Event Logic in an Array - -Event systems work with arrays. And it is pretty easy to describe an IFTTT-logic with an array like this: - -* "If this happens": That is the event. We use the event name as the key in our array. -* "Than do that": That is the plugin method. We use the name of the plugin method as the value in our array. - - -So when the event `onSettingsLoaded` is fired, then call the method `onSettingsLoaded` in our plugin code: - -```` -array('onSettingsLoaded' => 'onSettingsLoaded'); -```` - -You can name your method in your plugin like you want, but it is a good practice to give the method the same name as the event. - -As you can see, working with events is pretty simple. - -## Add Another Method - -To test this out, simply add a method called `onSettingsLoaded` and add some logic to the method: - -```` -class cookieconsent extends plugin -{ - public static function getSubscribedEvents()   - {   - return array('onSettingsLoaded' => 'onSettingsLoaded');   - } - - public function onSettingsLoaded() - { - die('sorry to interrupt you!'); - } -} -```` - -you can also add several to one event and you can even set the order, in which the methods should be called. This is done by a mulit-dimensional array like this: - -```` -public static function getSubscribedEvents() -{ - return array( - 'onSettingsLoaded' => array( - array('myFirstMethod', 10), - array('mySecondMethod', -10) - ) - ); -} -```` - -The method with the priority of `10` gets called first, the method with the priority of `-10` gets called last. - -Just to complete your vocabulary: In event driven programming people talk about `listening` to events or `subscribing` to events. That is why the static method has the name `getSubscribedEvents`. - -That is the whole magic with events!!! - -## Event Overview - -We will only use two events in our cookie consent plugin. But TYPEMILL fires (or "dispatches") many more events, which can be very useful if you want to create more complex plugins. You can find a list of all events in the [event overview of the documentation](/for-plugin-developers/documentation/event-overview). - -## Next: Add Methods to your Plugin - -We have subscribed to some events. Now it's time to add some logic to our plugin. Let's do this in the next chapter. - diff --git a/content/04-for-plugin-developers/01-tutorial/03-add methods.md b/content/04-for-plugin-developers/01-tutorial/03-add methods.md deleted file mode 100644 index ad66866..0000000 --- a/content/04-for-plugin-developers/01-tutorial/03-add methods.md +++ /dev/null @@ -1,123 +0,0 @@ -# Write the Methods - -Let us recap: We have our basic plugin-structure, we have your basic configuration file, we have our basic php file and in our php file we already subscribed to some events. Now let's add the IFTTT-logic, that we have described before: - -- If the system has loaded all settings, then give me the settings. -- If the system has loaded the template engine, then - - add a CSS-file, - - add a JavaScript-file and - - inject a little sub-template with the initial JavaScript into the theme and - - take the user settings and paste the values for colors and content into the script. - -## Get the Settings - -To get the settings, we only need one method and two lines of code: - -```` - 'onSettingsLoaded', - 'onTwigLoaded' => 'onTwigLoaded' - ); - } - - public function onSettingsLoaded($settings) - { - $this->settings = $settings->getData(); - } -} -```` - -What you can see here: If you subscribe to an event, then many events pass some data to your method. For example, the event `onSettingsLoaded` passes the complete settings-object of TYPEMILL to any subscriber. All events support the same methods to get and to return the data like this: - -```` -public function onAnyEvent($argument) -{ - // get the data - $data = $argument->getData(); - - // manipulate the data here - - // return the manipulated data - $argument->setData($data); -} -```` - -You can find more details in the [event overview](/for-plugin-developers/documentation/event-overview). - -So we got the settings of TYPEMILL and we stored the settings in a variable. Now let's master the next step and add some CSS and JavaScript. - -## Add Assets - -TYPEMILL provides some handy methods in the plugin class (check the [list in the documentation](/for-plugin-developers/documentation/method-overview)). Among them are methods to handel assets and to add inline CSS or JavaScript. The methods are: - -* `addCSS('url-to-ressource.css')` -* `addInlineCSS('body{ background: #000; }')` -* `addJS('url-to-ressource.js')` -* `addInlineJS('alert("hello")')` - -You have access to all these handy methods with the `$this` keyword. If you are not familiar with `$this`, then simply google it. In short: `$this` references to the current object. - -You can add assets like CSS or JavaScript in every event. But in this case, we want to use the `onTwigLoaded`-event: - -```` -public function onTwigLoaded() -{ - $this->addCSS('/cookieconsent/public/cookieconsent.min.css'); - $this->addJS('/cookieconsent/public/cookieconsent.min.js'); -} -```` - -If you want to add an internal asset like above, then use the relative path starting from your plugin folder. TYPEMILL will add the absolute path automatically. - -## Add Initial JavaScript - -In the last step, we want to add the JavaScript that initializes the cookie consent. We can do this very easily with the `addInlineJS`-method like this: - -```` -public function onTwigLoaded() -{ - $this->addCSS('/cookieconsent/public/cookieconsent.min.css'); - $this->addJS('/cookieconsent/public/cookieconsent.min.js'); - - $script = ' - window.addEventListener("load", function(){ - window.cookieconsent.initialise({ - "palette": { - "popup": { - "background": "#d48484", - "text": "#ffffff" - }, - "button": { - "background": "#362929", - "text": "#fff" - } - }, - "content": { - "message": "This website uses cookies to ensure you get the best experience on our website.", - "dismiss": "OK", - "link": "Learn more" - } - })});'; - - $this->addInlineJS($script); -} -```` - -This works fine. But it also has one downside: The user can not change the values for colors and content. So we have to find better way to add the script. - -## Next: Use a Twig Template - -In the next chapters, we will create a Twig template and use some variables, so that the user can edit the values in the user interface. \ No newline at end of file diff --git a/content/04-for-plugin-developers/01-tutorial/04-create the structure.md b/content/04-for-plugin-developers/01-tutorial/04-create the structure.md deleted file mode 100644 index e890d01..0000000 --- a/content/04-for-plugin-developers/01-tutorial/04-create the structure.md +++ /dev/null @@ -1,42 +0,0 @@ -#Create the Basic Plugin Structure - -The most simple plugin has only one folder and one file. Both **must** have the same name. So the basic file structure for our plugin looks like this: - -```` -/cookieconsent // plugin-folder -- cookieconsent.php // plugin-file -```` - -The `cookieconsent.php` contains the main logic and central entry point of our plugin. But we need some more files. Let us describe again, what our plugin should do: - -- The plugin should add a CSS-file to all templates, so we have to add this file. -- The plugin should add a JavaScript-file to all templates, so we have to add this file. -- The plugin should add the initial script with the values for the colors and the content. We will do this with a separate twig-template. -- The content- and color-values should be editable in the setup of TYPEMILL. We will do this with a plugin configuration file. - -If we simply follow this description, then the file structure of our cookie consent plugin looks like this: - -``` -/cookieconsent - - cookieconsent.php - - cookieconsent.yaml - /templates - - cookieconsent.twig - /public - - cookieconsent.min.js - - cookieconsent.min.css -``` - -As you can see, a clear description of the plugin's functionality is the key. Coding is so much easier if everything is described in clear words. - -Let us check the naming conventions again: - -* The name of the folder is the name of your plugin. -* The initial php-file must have the same name as the folder and must be located in the root of your plugin folder. -* The YAML-configuration-file must have the same name as the folder and must be located in the root of your plugin folder. - -The names and the structure of all other files and folders are a matter of taste and completely up to you. - -## Next Step: The Configuration File - -We have a structure now, so let's start with a basic configuration file before we write our first php-code for our plugin. \ No newline at end of file diff --git a/content/04-for-plugin-developers/01-tutorial/05-add twig template.md b/content/04-for-plugin-developers/01-tutorial/05-add twig template.md deleted file mode 100644 index ee29a2d..0000000 --- a/content/04-for-plugin-developers/01-tutorial/05-add twig template.md +++ /dev/null @@ -1,61 +0,0 @@ -# Create a Twig Template - -In the previous chapter we have added the initial JavaScript for the cookie consent directly with the helper method `addInlineJS()`. The downside is, that the values for colors and content are still hardcoded and cannot be edited by the user. So in the next step, we want to get rid of the hardcoded values and use variables instead. We will start with a separate twig-template for the initial JavaScript. - -If you don't understand why we do that, then you are probably in good company. Well, just proceed and everything will make sense pretty soon. - -So let us create a new folder called `template` and in that folder let us create a new twig-template called `cookieconsent.twig`. The template looks like this and yes, we still have our hardcoded values: - -```` -window.addEventListener("load", function(){ - window.cookieconsent.initialise({ - "palette": { - "popup": { - "background": "#d48484", - "text": "#ffffff" - }, - "button": { - "background": "#362929", - "text": "#fff" - } - }, - "theme": "edgeless", - "position": "bottom", - "content": { - "message": "This website uses cookies to ensure you get the best experience on our website.", - "dismiss": "OK", - "link": "Learn more" - } - }) -}); -```` - -## Use the Twig Template Engine - -Now the interesting part happens: Instead of adding the template with the JavaScript directly into the theme, we want to render it with the Twig-template-engine first. This enables us to use variables in the template later. We can use the Twig engine in our basic PHP-file like this: - -```` -public function onTwigLoaded() -{ - /* add external CSS and JavaScript */ - $this->addCSS('/cookieconsent/public/cookieconsent.min.css'); - $this->addJS('/cookieconsent/public/cookieconsent.min.js'); - - /* get Twig Instance and add the cookieconsent template-folder to the path */ - $twig = $this->getTwig(); - $loader = $twig->getLoader(); - $loader->addPath(__DIR__ . '/templates'); - - /* fetch the template, render it with twig and add it as inline-javascript */ - $this->addInlineJS($twig->fetch('/cookieconsent.twig')); -} -```` - -With `$this->getTwig()` we get the Twig template engine. With `$twig->getLoader()` we can add a new path to your template to Twig. And in the last line, we fetch the JavaScript-template and send it to Twig with `$twig->fetch('/cookieconsent.tiwg')`. And we still use the `addInlineJS`-method to add everything to the theme, after it has been rendered with Twig. - -Hurra, we just finished the hardest part of the tutorial! - -## Next: Define Variables in YAML - -This chapter was a bit complicated and you might wonder, why we did all this. The simple answer is, that Twig can render variables in the template and we can get rid of our hardcoded values now. So let us define some variables in the next chapter. And I promise, that the remaining chapters are super easy. - diff --git a/content/04-for-plugin-developers/01-tutorial/06-add default values.md b/content/04-for-plugin-developers/01-tutorial/06-add default values.md deleted file mode 100644 index e856aaa..0000000 --- a/content/04-for-plugin-developers/01-tutorial/06-add default values.md +++ /dev/null @@ -1,60 +0,0 @@ -# Add Default Values for a Plugin - -In TYPEMILL, it is totally easy to define some variables, that you can use in your plugin later. All you have to do is to add the variables in the YAML-configuration file of your plugin. - -In our cookie consent plugin, we want to use variables for the colors and for the content. So simply add them in a new block called "settings" like this: - -```` -name: Cookie Consent -version: 1.0.0 -description: Enables a cookie consent for websites -author: Sebastian Schürmanns -homepage: https://cookieconsent.insites.com/ -licence: MIT - -settings: - popup_background: '#70c1b3' - popup_text: '#ffffff' - button_background: '#66b0a3' - button_text: '#ffffff' - theme: 'edgeless' - position: 'bottom' - message: 'This website uses cookies to ensure you get the best experience on our website.' - link: 'Learn More' - dismiss: 'Got It' -```` - -Always start with the name `settings`. After that, simply add the variables and indent each line with two spaces. Once again: Do not use the tab or anything else, because it will break the file. Just indent with two spaces. - -As a recommendation: Use `my_name` instead of `my-name` or `my.name`, because key-names with dashes and other special characters are a bit harder to handle in the Twig-templates later. - -## Use the Variables - -Great news: Once you have added these default settings to your plugin configuration file, you can access the settings in your whole application. This is because TYPEMILL does a pretty smart job and merges all settings into the central settings object. All settings means: - -* The basic setting from TYPEMILL. -* All default settings from all plugins. -* All individual user settings. - -So you want to use some of theses settings in your plugin? No problem, we already did that with the `onSettingsLoaded`-event: - -```` -public function onSettingsLoaded($settings) -{ - $this->settings = $settings->getData(); -} -```` - -The plugin-settings are now included in the `$this->settings`-object. - -So you want to use these settings in a template? No problem, just use them like this: - -```` -{{ settings.plugins.cookieconsent.popup_background }} -```` - -Yes. It is really that easy. - -##Next: Use the Variables in Twig - -There is only one missing link: We have to pass the variables from the settings into the template engine of Twig to use them in our Twig-template. But good news again: This is done with a single line of code. So let us bring everything together and (nearly) finish the cookie consent plugin in the next chapter. \ No newline at end of file diff --git a/content/04-for-plugin-developers/01-tutorial/07-use variables in twig.md b/content/04-for-plugin-developers/01-tutorial/07-use variables in twig.md deleted file mode 100644 index 6e3ec1b..0000000 --- a/content/04-for-plugin-developers/01-tutorial/07-use variables in twig.md +++ /dev/null @@ -1,127 +0,0 @@ -# Use Variables in Twig - -We nearly finished our cookie consent plugin. And in this chapter we want bring all parts of the puzzle together. - -## The YAML-Configuration - -Let us start with our YAML configuration file for the cookie consent plugin. Right now we have the basic plugin informations and we have defined some variables with default values. It looks like this now: - -```` -name: Cookie Consent -version: 1.0.0 -description: Enables a cookie consent for websites -author: Sebastian Schürmanns -homepage: https://cookieconsent.insites.com/ -licence: MIT - -settings: - popup_background: '#70c1b3' - popup_text: '#ffffff' - button_background: '#66b0a3' - button_text: '#ffffff' - theme: 'edgeless' - position: 'bottom' - message: 'This website uses cookies to ensure you get the best experience on our website.' - link: 'Learn More' - dismiss: 'Got It' -```` - -## The PHP-File - -We have our basic PHP-file for our plugin with the IFTTT-logic. And we have subscribed to some events: - -* The `onSettingsLoaded`-event: We use this event to get all the settings and store them in a variable. And the great thing is, that our default-settings from our cookie consent configuration file are included, so we have access to them, now. -* The `onTwigLoaded`-event: We used this to add our JavaScript- and CSS-files. And we loaded the Twig-rendering engine there. We used the Twig rendering engine to fetch and render our little Twig-template with the little script to initialize the cookie banner in all pages. - -The last thing we will do now, is to pass all settings into the template engine of Twig. And we can simply pass the settings as an argument like this: - -```` -$this->addInlineJS($twig->fetch('/cookieconsent.twig', $this->settings)); -```` - -Totally easy. So our final PHP-file looks like this now: - -```` - 'onSettingsLoaded', - 'onTwigLoaded' => 'onTwigLoaded' - ); - } - - public function onSettingsLoaded($settings) - { - $this->settings = $settings->getData(); - } - - public function onTwigLoaded() - { - /* add external CSS and JavaScript */ - $this->addCSS('/cookieconsent/public/cookieconsent.min.css'); - $this->addJS('/cookieconsent/public/cookieconsent.min.js'); - - /* get Twig Instance and add the cookieconsent template-folder to the path */ - $twig = $this->getTwig(); - $loader = $twig->getLoader(); - $loader->addPath(__DIR__ . '/templates'); - - /* fetch the template, render it with twig and add it as inline-javascript */ - $this->addInlineJS($twig->fetch('/cookieconsent.twig', $this->settings)); - } -} -```` - -Voila. And now, we can finally use our variables in the Twig-template. - -## The Twig Template - -We have seen, that you can use all variables in Twig like this: - -```` -{{ settings.plugins.cookieconsent.popup_background }} -```` - -We are simply walking through our settings-array starting with the settings, then go to the plugins, then to the cookieconsent plugin and finally to the key `popup_background`. - -Let us add all variables to our Twig-template now: - -``` -window.addEventListener("load", function(){ - window.cookieconsent.initialise({ - "palette": { - "popup": { - "background": "{{ settings.plugins.cookieconsent.popup_background }}", - "text": "{{ settings.plugins.cookieconsent.popup_text }}" - }, - "button": { - "background": "{{ settings.plugins.cookieconsent.button_background }}", - "text": "{{ settings.plugins.cookieconsent.button_text }}" - } - }, - "theme": "{{ settings.plugins.cookieconsent.theme }}", - "position": "{{ settings.plugins.cookieconsent.position }}", - "content": { - "message": "{{ settings.plugins.cookieconsent.message }}", - "dismiss": "{{ settings.plugins.cookieconsent.dismiss }}", - "link": "{{ settings.plugins.cookieconsent.link }}" - } - }) -}); -``` - -It was a little bit complicated to get to this point, but now everything should make sense. And let's be honest: It is way easier than in many other super complex systems and it is flexible as hell. If you have done this one or two times, then you can create a plugin like this in one or two hours. - -## Final Step: Make Variables Editable - -There is still missing one part and you might think that this part is the hardest to master? Yes, you are right, we still have to create a user interface so that the user can change the value in the setup of TYPEMILL. But no, this is not the hardest part. It is the easiest one. We will do it in the next chapter. \ No newline at end of file diff --git a/content/04-for-plugin-developers/01-tutorial/08-make variables editable.md b/content/04-for-plugin-developers/01-tutorial/08-make variables editable.md deleted file mode 100644 index 34a9d5e..0000000 --- a/content/04-for-plugin-developers/01-tutorial/08-make variables editable.md +++ /dev/null @@ -1,161 +0,0 @@ -# Make Variables Editable - -In the final step, we want to make the variables for our cookie consent plugin editable, so that the user can choose his own colors and add his own content in the setup of TYPEMILL. In other words, we want to create a user interface. This might sound complicated. But it is totally easy. You don't have to write a single line of code. You just have to define the input fields in the configuration file of your plugin. So let us do this quickly. - -## Define Input Fields in YAML - -Let us remember, that the YAML-configuration file of a plugin can have up to three parts: - -* The first part defines the basic informations of a plugin like the version, the name or the author. -* The second part defines the default ``settings`` for the plugin. -* The last part defines the `forms` and `fields` for the user interface, so the user can edit the settings. - -The field-definitions always start with `forms` and `fields` in the YAML-syntax: - -```` -forms: - fields: -```` - -You can add as many fields as you need for your plugin. The rule is: The name of the field must be the name of your default setting. So if you have a default setting for "position" like this... - -```` -settings: - ... - ... - position: 'bottom' -```` - -... then you define an input field with the same name like this: - -```` -forms: - fields: - - position: - ... - ... - ... -```` - -The field definition is pretty simple. If you know how to create fields in HTML, then you also know, how to define them in YAML. - -Let's have a look at the `position`-field. It is a select-box with four values. I am pretty sure that you already guess how it is defined in YAML: - -```` -forms: - fields: - - position: - type: select - label: Position of Cookie Banner - options: - bottom: Bottom - top: Top - bottom-left: Bottom left - bottom-right: Bottom right -```` - -It is basically the same as writing HTML. You simply add the type, the label and the options. - -## Fields in the User Interface - -TYPEMILL will read all your field definitions and automatically create a user input field in the setup. So our select-box for the position looks like this now in the user interface of the TYPEMILL setup: - -![Typemill plugins in the setup]() - -TYPEMILL will also insert the default value into the field and, of course, store the user input in the settings. - -## The Complete YAML-file - -Let us check the final YAML-file for the cookie consent plugin with the basic informations, with the default settings and with the field definitions for the user interface: - -```` -name: Cookie Consent -version: 1.0.0 -description: Enables a cookie consent for websites -author: Sebastian Schürmanns -homepage: https://cookieconsent.insites.com/ -licence: MIT - -settings: - popup_background: '#70c1b3' - popup_text: '#ffffff' - button_background: '#66b0a3' - button_text: '#ffffff' - theme: 'edgeless' - position: 'bottom' - message: 'This website uses cookies to ensure you get the best experience on our website.' - link: 'Learn More' - dismiss: 'Got It' - -forms: - fields: - - theme: - type: select - label: Theme - placeholder: 'Add name of theme' - required: true - options: - edgeless: Edgeless - block: Block - classic: Classic - - position: - type: select - label: Position of Cookie Banner - options: - bottom: Bottom - top: Top - bottom-left: Bottom left - bottom-right: Bottom right - - message: - type: textarea - label: Message - placeholder: 'Message for cookie-popup' - required: true - - link: - type: text - label: Label for Link - placeholder: 'Link-Lable like More infos' - required: true - - dismiss: - type: text - label: Label for Button - placeholder: 'Got it' - required: true - - popup_background: - type: color - label: Background Color of Popup - placeholder: 'Add hex color value like #ffffff' - required: true - - popup_text: - type: color - label: Text Color of Popup - placeholder: 'Add hex color value like #ffffff' - required: true - - button_background: - type: color - label: Background Color of Button - placeholder: 'Add hex color value like #ffffff' - required: true - - button_text: - type: color - label: Text Color of Button - placeholder: 'Add hex color value like #ffffff' - required: true -```` - -If you want to learn more about the field definitions, then read the [documentation about field definitions](/for-plugin-developers/documentation/field-overview). There you can find all the possibilities that you have. - -What else to say? Well, our plugin is ready now. - -Hurra!!!! diff --git a/content/04-for-plugin-developers/01-tutorial/index.md b/content/04-for-plugin-developers/01-tutorial/index.md deleted file mode 100644 index 7877f6e..0000000 --- a/content/04-for-plugin-developers/01-tutorial/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Plugin Tutorial - -In this short tutorial we will create the **cookie consent plugin** step by step and learn about the **file structure**, about the **configuration with YAML** and about the basic **PHP-file** for the plugin. You will also learn how to register **events**, how to use your own **templates** and how to create a **user interface** for your plugin. Everything is pretty simple and the tutorial can be finished in one hour or two. \ No newline at end of file diff --git a/content/04-for-plugin-developers/02-documentation/00-file structure.md b/content/04-for-plugin-developers/02-documentation/00-file structure.md deleted file mode 100644 index b4ba686..0000000 --- a/content/04-for-plugin-developers/02-documentation/00-file structure.md +++ /dev/null @@ -1,49 +0,0 @@ -# The Structure of a Plugin - -Each plugin needs a file structure. The rules for this file structure are easy to learn important to follow. Otherwise, the plugin won't work. - -## Basic Folder And File - -A simple plugin works with one folder and one file. There are the following naming conventions: - -* The name of the folder is the name of the plugin, and -* the name of the core-php-file is name of the plugin. - -So it might look like this: - -```` -/myPlugin // folder - - myPlugin.php // file with plugin-code -```` - -## Configuration File - -However, if you want to distribute a plugin on the TYPEMILL website (not ready yet), then you **must** add a **configuration file** with YAML syntax, and this file must have the **same name** as the plugin again. This is very important, because the versioning and the update notifications, that are shown in the setup, only work with this configuration file. - -So the minimum requirement for a distributed plugin looks like this: - -```` -/myPlugin // folder - - myPlugin.php // file with plugin-code - - myPlugin.yaml // file with yaml-configuration -```` - -## Other files - -You are free to add any other files and folders into your plugin. A plugin can have assets like images, CSS or JavaScript. It can also have templates, controllers and middleware. The folder structure of a more complex plugin might look like this: - -```` -/myPlugin -- myPlugin.php -- myPlugin.yaml - /controllers - - myController.php - /middleware - - myMiddleware.php - /templates - - mytemplate.twig - /public - - mystyle.css - - myscript.js - - myimage.jpg -```` diff --git a/content/04-for-plugin-developers/02-documentation/01-configuration file.md b/content/04-for-plugin-developers/02-documentation/01-configuration file.md deleted file mode 100644 index 3bfc86b..0000000 --- a/content/04-for-plugin-developers/02-documentation/01-configuration file.md +++ /dev/null @@ -1,67 +0,0 @@ -# YAML Configuration File - -Each plugin should have a configuration file written in YAML. YAML is a widespread and easy to understand configuration language that can be transformed into an array easily. Like an array, YAML uses simple key-value pairs. Deeper levels for multidimensional arrays are indicated with indentation. Indentation is made by two spaces. Do not use tabs for indentation, because it will break the transformation. - -## Three Parts of the Configuration File - -The YAML-configuration file for TYPEMILL can have up to three parts: - -- The **first part** is mandatory and defines the basic meta-informations about a plugin like the name, the version and the author. -- The **second part** is optional and defines the default values of the plugin. It must start with `settings:`. -- The **third part** is optional and defines the input fields for the user interface. It must start with `forms:` and `fields:`. - -## The Meta-Informations - -In the first part, the following meta-informations are used by TYPEMILL and displayed in the TYPEMILL setup: - -```` -name: The name of the plugin -version: 1.0.0 -description: A short description. -author: The name of the plugin author. -homepage: a link to a website with informations about the plugin -licence: Licence like MIT or others -```` - -The version number is used by TYPEMILL to check for updates and to inform the user. Please use a valid schema for versioning, we recommend a simple system like `1.2.3 ` where position `1` is a major release, `2` is minor or feature release and `3` is a bugfix (as a rule of thumb). - -## The Default Settings - -The second part defines the default settings and always starts with `settings:` followed by simple key-value-pairs indented with two spaces: - -```` -settings: - key1: value1 - Key2: value2 - key3: value3 -```` - -The default settings are merged into the main settings of TYPEMILL and are available across the whole platform for plugins and themes. The default settings are overwritten by the individual settings of the user, if present. - -## The Field Definitions - -The third part defines the user interface for individual settings and always starts with `forms:` and `fields:`. If users should overwrite the default settings with individual settings in the interface, then the name of the defined field must be the same as the name of the default setting, that should be overwritten. For example: - -```` -settings: - position: top - - -forms: - fields: - - position: - type: select - label: Position of Element - bottom: Bottom - top: Top -```` - -This way, the user input for the field `position` will overwrite the default value for `position`. - -This is the rule if you want to bind default settings and user inputs. But you don't have to do this: - -* You can define a value with `settings:` and skip the `fields:` if you don't want, that a user can change the default value. -* You can define a `field:` and skip the `settings: ` if you don't need a default value for an input field. - -All possibilities for fields are listed in the chapter about field definitions. \ No newline at end of file diff --git a/content/04-for-plugin-developers/02-documentation/02-field overview.md b/content/04-for-plugin-developers/02-documentation/02-field overview.md deleted file mode 100644 index af235f7..0000000 --- a/content/04-for-plugin-developers/02-documentation/02-field overview.md +++ /dev/null @@ -1,237 +0,0 @@ -# Field Overview - -Field-definitions in YAML are a simple and straight forward way to define fields for user input in the frontend. You can define a wide range of input fields in the YAML-configuration file with a simple list of field-characteristics. TYPEMILL will read all your field definitions and create a user interface on the fly. - -Field definitions are part of the plugin YAML-configuration file and they always start with the keywords `forms` and `fields` followed by a list of fields: - -```` -forms: - fields: - - myfieldname: - type: text - label: My Field - - anotherfield: - type: text - label: Another Field -```` - -Fields can have a lot of characteristics like: - -* The **field type** like text, select or textarea. -* **Boolean field attributes** like required, checked or disabled. -* **Field attributes with values** like placeholder, id or pattern. -* The **field label**, which is standard for a field. -* A **field help** text, which is an optional explanation text for a field. - -The field input of a user is also **validated** in the backend automatically. The backend validation is pretty tight right now, so that you should always test the input fields intensively. If you run into unwanted validation errors, please report it in github. - -## Field Types - -Note, that field types in TYPEMILL are not equivalent to HTML field types in every case, because TYPEMILL has its own field types like a checkboxlist and textarea, which is not a HTML field type but a HTML tag. But everything will be transformed into valid HTML, of course. - -TYPEMILL accepts the following field type definitions: - -* checkbox -* checkboxlist -* color -* date -* email -* hidden -* number -* password -* radio -* select -* text -* textarea -* tel -* url -* fieldset - -A simple field definition looks like this: - -```` -forms: - fields: - - myfieldname: - type: text - label: My Label - placeholder: please insert text. -```` - -## Label and Help - -TYPEMILL supports labels and a help-text in the field definition: - -- **Label**: With the label for the field. You should always use a label. -- **Help**: This is a help-text for your field. The help-text is signaled with a question-mark at the right side of the field and the content is displayed in a box that opens on hover. - -This is an example: - -``` -website: - type: url - label: Add valid url - help: Add a valid url with a protocoll like 'https://' or 'http://'. -``` - -## Attributes - -You can add attributes to a field definition. TYPEMILL supports these boolean attributes (with value: true): - -- auto: true -- checked: true -- disabled: true -- formnovalidate: true -- multiple: true -- readonly: true -- required: true - -TYPEMILL also supports the following attributes with values: - -- id: 'myId' -- placeholder: 'my placeholder-text here' -- size: 5 -- rows: 5 -- cols: 5 -- class: 'myClass' -- pattern: '[0-9]{4}' - -So a field definition can become pretty comprehensive like this: - -``` -year: - type: text - label: Add a year - placeholder: '2018' - required: true - pattern: '[0-9]{4}' - class: 'fc-year' - id: 'app-year' -``` - -The `pattern` attribute accepts every valid regex for an input validation in the frontend. Please note, that there is also a backend validation that might conflict with your frontend validation. So please double check your validation pattern and test the input intensively. - -## Fields With Options - -TYPEMILL supports three field types with options: - -* Select -* Radio -* Checkboxlist - -The standard field type with options is a `select` field. You can add any options with the keyword `options` followed by a list of value-label-pairs like this: - -``` -theme: - type: select - label: Select A Theme - options: - edgeless: Edgeless Theme - block: Block Theme - classic: Classic Theme -``` - -The value on the left side (e.g. `edgeless`) is the value of the option, that is transported to the server. The label on the right side (e.g. `Edgeless Theme`) is the label of the option, that is visible for the user in the select-box. - -To make your live a bit easier, you can also define options for `radio` field-types and for a special field type called `checkboxlist`. A list of radio buttons can be defined like this: - -``` -Radio: - type: radio - label: Select an Option - options: - red: Red - green: Green - blue: Blue - yellow: Yellow -``` - -And a list of checkboxes can be defined like this: - -```` -Checkbox: - type: checkboxlist - label: Multiple Checkboxes - options: - first: First - second: Second - third: Third - fourth: Fourth -```` - -The downside of this kind of list-definitions is, that you cannot add other attributes like 'checked' or 'required' for now. But we will make it more flexible in future. - -So for now, if you need a checkbox or a radio button with further attributes, then you should define it in a traditional way like this: - -```` -SimpleCheckbox: - type: checkbox - label: Simple checkbox - required: true - checked: true - description: Please check me -```` - -## Using Fieldsets - -If you have a lot of fields, you can group them togeter with a fieldset like this: - -```` -forms: - fields: - - chapter: - type: text - label: chapter - placeholder: Add Name for Chapter - required: true - - MyFirstfieldset: - type: fieldset - legend: Last Modified - fields: - - modified: - type: checkbox - label: Activate Last Modified - description: Show last modified date at the end of each page? - - modifiedText: - type: text - label: Last Modified Text - placeholder: Last Updated -```` - -The fields `modified` and `modifiedText` will then be grouped in a fieldset with the legend `Last Modified`. - -## Example for a complete yaml configuration - -To sum it up, this is a complete example of a yaml configuration file for a plugin with the meta-description, a default value and a field definition for user input: - -```` -name: Example Plugin -version: 1.0.0 -description: Add a short description -author: Firstname Lastname -homepage: http://your-website.net -licence: MIT - -settings: - theme: 'edgeless' - -forms: - fields: - - theme: - type: select - label: Select a Theme - required: true - options: - edgeless: Edgeless - block: Block - classic: Classic -```` - diff --git a/content/04-for-plugin-developers/02-documentation/03-basic php file.md b/content/04-for-plugin-developers/02-documentation/03-basic php file.md deleted file mode 100644 index 5868f21..0000000 --- a/content/04-for-plugin-developers/02-documentation/03-basic php file.md +++ /dev/null @@ -1,116 +0,0 @@ -# Basic PHP File - -The PHP file contains the business logic of your plugin. The name of the php-file must be the same as the name of the plugin folder. For example: - -```` -/myplugin - - myplugin.php -```` - -The plugin system of TYPEMILL is object oriented and follows the rules of event driven development. The system uses the event dispatcher of synfony, so if you have ever used the event dispatcher, then you are familiar with the system. - -There are the following rules for the class of your plugin: - -* **Namespace**: The namespace must start with `plugins\` followed by the name of the plugin. -* **Classname**: The name of the class must be the name of the plugin. -* **Extend** The class must extend the plugin base class `\typemill\plugins`. - -The class can contain up to four parts: - -* **Event Subscribers**: Every plugin must have a public static method called ``getSubscribedEvents()`. It returns an array with events as key and plugin-methods as values. -* **Methods**: The business logic is written in methods. They get called, when an subscribed event happens. -* **Routes**: You can add new routes (urls) to TYPEMILL with your plugin. Routes are optional. -* **Middleware**: You can add new middleware to TYPEMILL with your plugin. Middleware is optional. - -## Example of a Plugin Class - -A minimum plugin class at least subscribes to one event and contains one subscriber method. So a minmum plugin class looks like this: - -``` - 'onSettingsLoaded' - ); - } - - public function onSettingsLoaded($settings) - { - // do something with the $settings - } -} -``` - -## getSubscribedEvents - -The public static function `getSubscribedEvents()` returns an array with the name of the event as key and the name of the plugin method as value. - -```` -public static function getSubscribedEvents() -{ - return array('eventName' => 'methodName'); -} -```` - -You can listen to several events in your plugin class: - -```` -public static function getSubscribedEvents() -{ - return array( - 'firstEvent' => 'firstMethod', - 'secondEvent' => 'secondMethod' - ) -} -```` - -You can also add several methods to a single event and give this method priorities: - -```` -public static function getSubscribedEvents() -{ - return array( - 'firstEvent' => array( - array('firstMethod', 10), - array('anotherMethod, 1) - ), - 'secondEvent' => 'secondMethod' - ) -} -```` - -The rule for the order is pretty simple: The higher the order, the earlier the call. You can also use negative numbers like `-10` to give a method call a really low priority. - -## Methods - -You can name your methods as you want. Many people give their methods the same name as the events. This way you can easily see which method is called by which event. But it is a matter of taste: - -```` -public static function getSubscribedEvents() -{ - return array( - 'onSettingsLoaded' => 'onSettingsLoaded' - ); -} - -public function onSettingsLoaded($settings) -{ - // do something with the $settings -} - -```` - -Within your methods you can write your business logic. What you should know: - -* **Arguments**: All events pass some arguments into your method and in many cases they also pass data that you can use or manipulate (like the $settings in the example above). You can find all the details in the [event overview](/for-plugin-developers/documentation/event-overview). -* **Helper-Methods**: The TYPEMILL plugin-class that you extend with your own class provides some useful helper methods. You can read all about these methods in the [methods overview](/for-plugin-developers/documentation/method-overview). - -If you want to add your own routes or your own middleware, please read the chapters about them in this documentation. \ No newline at end of file diff --git a/content/04-for-plugin-developers/02-documentation/04-event overview.md b/content/04-for-plugin-developers/02-documentation/04-event overview.md deleted file mode 100644 index 4a7cb75..0000000 --- a/content/04-for-plugin-developers/02-documentation/04-event overview.md +++ /dev/null @@ -1,68 +0,0 @@ -# The TYPEMILL Events - -When a user visits an url, then there are a lot of steps to generate and finally return the website. Theses steps are called the life cycle. TYPEMILL has its own lifecycle. When someone requests a page, then TYPEMILL initiates the application, loads all plugins, merges all settings, starts the template engine, scans the content folder, collects the content and finally renders the page. - -When TYPEMILL goes through this life cycle, it constantly fires events and often sends some data with these events. Developers can listen to these events, hook into the system and add own functionalities. - -This is a list of all events that TYPEMILL fires during the life cycle. The order of the events follow the life cycle. In the last column you can find the data, that each event passes to your subscriber method. - -| Event Name | Description | Data | -| -------------------- | ---------------------------------------- | ------------------------------------ | -| onPluginsLoaded | TYPEMILL has loaded all plugins. | No data | -| onSettingsLoaded | TYPEMILL has loaded and merged all settings. This includes the basic app settings, all plugin settings and the individual user settings. | Settings (a slim-object) | -| onTwigLoaded | TYPEMILL has loaded the template engine Twig. | No data | -| onPagetreeLoaded | TYPEMILL has scanned the content folder and has generated the content structure. | Content structure (array of objects) | -| onBreadcrumbLoaded | TYPEMILL has created a breadcrumb for the page. | Breadcrumb (array) | -| onItemLoaded | TYPEMILL has created the page item. | Item (object) | -| onMarkdownLoaded | TYPEMILL has loaded the page content. | Page content (markdown syntax) | -| onContentArrayLoaded | TYPEMILL has transformed the page content into an array. | Page content (array) | -| onHtmlLoaded | TYPEMILL has transformed the markdown content to HTML (with the Parsedown library). | Page content (html syntax) | -| onPageReady | TYPEMILL has collected all data for the page and will send it to the template in the next step. | All page data (array) | - -If TYPEMILL passes data to your subscriber method, then you can get the data, use the data, manipulate the data and return the data to the app. You can do this with two simple methods: `getData()` and `setData()`. - -Let's take the html-event as an example: - -```` - -class MyPlugin extends \Typemill\Plugin -{ - public static function getSubscribedEvents() - { - return array( - 'onHtmlLoaded' => 'onHtmlLoaded' - ); - } - - public function onHtmlParsed($html) - { - $data = $html->getData(); - - $data .= '

    This is a paragraph that I added at the end of the page content

    '; - - $html->setData($data); - } -} -```` - -TYPEMILL uses the symfony event dispatcher for the event system. The event dispatcher adds two other variables to each event by default: - -* The second parameter is the **name of the event**. -* The thirds parameter is the **event dispatcher** itself. - -So in each of your event methods in your plugin, you can also read the event name and you have access to the dispatcher-object itself: - -```` -public function onHtmlParsed($html, $eventName, $dispatcher) -{ - // read the $eventName - // use the $dispatcher -} -```` - -There are not many use cases to access the event-name or the dispatcher in this way. Theoretically you could fire your own events with the dispatcher object. But it is much better to access the dispatcher object within the dependency container of slim. - -The dependency container is one of the properties and methods provided by the basic plugin class of TYPEMILL. And because all plugins extend this basic plugin-class, all plugins have access to these usefull properties and methods. - -We will learn in the next chapter about it. - diff --git a/content/04-for-plugin-developers/02-documentation/05-method overview.md b/content/04-for-plugin-developers/02-documentation/05-method overview.md deleted file mode 100644 index 42b8944..0000000 --- a/content/04-for-plugin-developers/02-documentation/05-method overview.md +++ /dev/null @@ -1,183 +0,0 @@ -# Plugin Method Overview - -Each plugin extends the base class `Plugin` of TYPEMILL. This base class provides some build in methods that are useful for plugin developers. You can access all these helper methods with the keyword `$this`. The `$this` keyword simply references the object itself. For example: - -```` -public function myPluginMethod() -{ - $path = $this->getPath(); - - if($path == 'admin') - { - // do something - } -} -```` - -Here is a list of all helper methods, that the `Plugin`-class provides: - -## addJS - -With the function addJS, you can add an external or internal JavaScript ressource. - -If you want to add an external JavaScript file, then simply add the full url like this: - -```` -$this->addJS('https://some-url.com/with/path/to/javascript.js'); -```` - -If you want to add a local JavaScript file, that lives in your plugin folder, then simply add a relative url like this: - -```` -$this->addJS('/yourpluginfolder/subfolder/javascript.js'); -```` - -## addCSS - -The addCSS function works exactly in the same way like the addJS-method. You can add an external or internal ressource: - -```` -$this->addCSS('https://some-url.com/with/path/to/style.css'); -$this->addCSS('/yourpluginfolder/subfolder/style.css'); -```` - -## addInlineJS - -With this function you can add any kind of inline JavaScript to all templates. - -```` -$this->addInlineJS('alert("hello");'); -```` - -Add the plain JavaScript without the ` + + + + + + + + + \ No newline at end of file diff --git a/system/author/layouts/layoutEditor.twig b/system/author/layouts/layoutEditor.twig index 23c7851..1e1e85c 100644 --- a/system/author/layouts/layoutEditor.twig +++ b/system/author/layouts/layoutEditor.twig @@ -39,6 +39,7 @@ + diff --git a/system/author/partials/editorNavi.twig b/system/author/partials/editorNavi.twig index a87672a..09e861c 100644 --- a/system/author/partials/editorNavi.twig +++ b/system/author/partials/editorNavi.twig @@ -1,11 +1,11 @@ diff --git a/system/author/partials/navi.twig b/system/author/partials/navi.twig index 7c4b0b4..7bd4a43 100644 --- a/system/author/partials/navi.twig +++ b/system/author/partials/navi.twig @@ -1,9 +1,9 @@