diff --git a/content/00-welcome/00-setup.md b/content/00-welcome/00-setup.md index f30d915..8edd144 100644 --- a/content/00-welcome/00-setup.md +++ b/content/00-welcome/00-setup.md @@ -1,12 +1,10 @@ # Setup -Congratulations! If you see this page, then the setup of the system has worked successfully!! You can now setup and configure your system, your themes and your plugins in the [settings-area](/tm/settings). - -Anyway, if you read this file in the source code and if you did not manage to setup the system successfully, then try the following. +Congratulations! If you see this page, then the setup of the system has worked successfully!! You can now login (/tm/login) and configure your system, your themes and your plugins. You will find all settings in the settings-area (/tm/settings). ## If it does not work -If you face any problems, then please make sure, that your system supports these features: +If you face any problems during the installation, then please make sure, that your system supports these features: - PHP version 7+. - Apache server. diff --git a/content/00-welcome/01-write-content.md b/content/00-welcome/01-write-content.md index 140d0d7..e0f0da7 100644 --- a/content/00-welcome/01-write-content.md +++ b/content/00-welcome/01-write-content.md @@ -4,7 +4,7 @@ Typemill is a simple Flat File Content Management System (CMS). We (the communit ## 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. +You can create, structure and reorder all pages with the navigation on the left side. 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, because this would change all the urls of the pages inside that folder, which is a nightmare for readers and search engines. @@ -24,15 +24,15 @@ By default Typemill will use the **visual mode**. 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 "online" button. The button turns grey with the label "offline" then. -* With the green button "Publish" you can either publish a page that is offline or you can publish some unpublished changes of the page. -* The publish-button is grey, if the page is online and if there are no unpublished changes. +* You can depublish a page by clicking the green "online" button. The button will turn gray with the label "offline" and the page is not visible for your readers anymore. +* With the green button "Publish" you can either publish a page that is offline or you can publish some unpublished changes on your page. +* The publish-button is gray and disabled, if the page is online and if there are no unpublished changes. * 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 pages in the navigation on the left side as published (green), changed (orange) and unpublished (red). ## Working with Drafts -Ever tried to revise a published article in WordPress? Yes, it works, but if you click on "save", then all your changes are directly live. Typemill is much more flexible here and allows you to keep your original version live while you work on a **drafted Version** in the background. This is how Typemill handles it: +Ever tried to revise a published article in WordPress? Yes, it works, but if you click on "save", then all your changes are directly live. Typemill is much more flexible here and allows you to keep your original version live while you work on a **drafted version** in the background. This is how Typemill handles it: * In **visual mode**: Typemill stores your changes in a new draft automatically as soon as you save any content-block. * In **raw mode**: To store changes in a new draft, simply click on the "save draft"-button in the publish controller. diff --git a/content/00-welcome/index.md b/content/00-welcome/index.md index 9509085..3dc32d6 100644 --- a/content/00-welcome/index.md +++ b/content/00-welcome/index.md @@ -1,4 +1,4 @@ # Welcome -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 handy and productive writing-system. +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 we are working hard to add everything that is needed for a handy and productive writing-system. diff --git a/content/01-cyanine-theme/00-landingpage.md b/content/01-cyanine-theme/00-landingpage.md new file mode 100644 index 0000000..dcee802 --- /dev/null +++ b/content/01-cyanine-theme/00-landingpage.md @@ -0,0 +1,13 @@ +# The Landingpage + +Cyanine provides an optional landingpage with six segments: + +* **Intro** with the content of the home page and an additional link/button. +* **Info** with individual markdown content. +* **Teaser** with two elements. Each element has a headline, a text and a link/button. +* **Contrast** with a headline, text-input and a link/button. The colors are inverted. +* **Navigation** with the whole content of the website. You can change the depth of the navigation. +* **News** with a link to a news-folder. It will display the three latest news in a card-design. Add a hero-image to each news-entry to show a teaser image. + +You can activate or deactivate the whole landingpage, order all elements and enable/disable each element individually. + diff --git a/content/01-cyanine-theme/00-landingpage.yaml b/content/01-cyanine-theme/00-landingpage.yaml new file mode 100644 index 0000000..f81abb9 --- /dev/null +++ b/content/01-cyanine-theme/00-landingpage.yaml @@ -0,0 +1,8 @@ +meta: + title: 'The Landingpage' + description: "Cyanine provides an optional landingpage with six segments: \nIntro with the content of the home page and an additional link/button.\nInfo with individual markdown content.\nTeaser with two elements. Each element has a headline, a text and a button/link.\nContrast with a headline, text-input and a" + author: trendschau + created: '2020-06-11' + time: 20-05-35 + navtitle: landingpage + modified: '2020-06-11' diff --git a/content/01-cyanine-theme/01-footer.md b/content/01-cyanine-theme/01-footer.md new file mode 100644 index 0000000..f480191 --- /dev/null +++ b/content/01-cyanine-theme/01-footer.md @@ -0,0 +1,4 @@ +# 3-Column Footer + +Cyanine provides a three column footer at the bottom of each page. You can use markdown for each column. Make sure that you use the correct headline-level (we suggest a headline level 3 or level 4 to keep the logical headline hierarchy in the document). You can, of course, also add link-lists or other elements. Check the website of [Typemill](https://typemill.net) for an example. + diff --git a/content/01-cyanine-theme/01-footer.yaml b/content/01-cyanine-theme/01-footer.yaml new file mode 100644 index 0000000..65afd0a --- /dev/null +++ b/content/01-cyanine-theme/01-footer.yaml @@ -0,0 +1,8 @@ +meta: + title: '3-Column Footer' + description: 'Cyanine provides a three column footer at the bottom of each page. You can use markdown for each column. Make sure that you use the correct headline-level (we suggest a headline level 3 or level 4 to keep the logical headline hierarchy in the document). You can, of course, also add link-lists or' + author: trendschau + created: '2020-06-11' + time: 21-00-20 + navtitle: footer + modified: '2020-06-11' diff --git a/content/01-cyanine-theme/02-colors-and-fonts.md b/content/01-cyanine-theme/02-colors-and-fonts.md new file mode 100644 index 0000000..223a3bb --- /dev/null +++ b/content/01-cyanine-theme/02-colors-and-fonts.md @@ -0,0 +1,36 @@ +# Colors and Fonts + +First of all cyanine supports individual logos. If you want to use our logo, then please upload it in the system settings. Cyanine will automatically replace the title text with your logo. You can also upload your own favicon in the system settings. + +Cyanine allows you to change many colors. Please make sure that your color-combinations are readable and accessible. The following colors are editable: + +* **Primary Theme Color**: used for the body background and borders. +* **Secondary Theme Color**: used for content background, font-colors on hover and more. +* **Primary Font Color**: used for main text. +* **Secondary Font Color**: used as contrast color for hovers in navigation and buttons. +* **Link Color**: used for text-links. Keep accessibility in mind. +* **Thin Border Color**: used for thin borders in navigations and tables. + +You can also change the font-family for + +* headlines +* text +* buttons and navigations + +Cyanine uses wide spread system fonts with fallbacks: + +* serif +* sans-serif +* courier +* helvetica +* avenir +* athelas +* georgia +* times +* bodoni +* calisto +* garamond +* baskerville + +If the color- and font-settings are not enough for your purpose, then you can always overwrite the theme-css with your own styles in the theme settings. + diff --git a/content/01-cyanine-theme/02-colors-and-fonts.yaml b/content/01-cyanine-theme/02-colors-and-fonts.yaml new file mode 100644 index 0000000..ea61fa2 --- /dev/null +++ b/content/01-cyanine-theme/02-colors-and-fonts.yaml @@ -0,0 +1,8 @@ +meta: + title: 'Colors and Fonts' + description: 'First of all cyanine supports individual logos. If you want to use our logo, then please upload it in the system settings. Cyanine will automatically replace the title text with your logo. ' + author: trendschau + created: '2020-06-11' + time: 20-37-12 + navtitle: 'colors and fonts' + modified: '2020-06-11' diff --git a/content/01-cyanine-theme/03-content-elements.md b/content/01-cyanine-theme/03-content-elements.md new file mode 100644 index 0000000..a3e7c38 --- /dev/null +++ b/content/01-cyanine-theme/03-content-elements.md @@ -0,0 +1,11 @@ +# Content Elements + +Cyanine provides a lot of other settings for your content area. For example: + +* Add an edit-button for github, gitlab or other plattforms. +* Show the author. +* Show the publish date. +* Show the chapter numbers in the navigation. + +The Cyanine theme supports all content elements like tables, images, notices or downloads. It also supports anchor-links next to headlines, so you can deep link to certain content sections of your page. You can activate the anchors in the system settings of Typemill. + diff --git a/content/01-cyanine-theme/03-content-elements.yaml b/content/01-cyanine-theme/03-content-elements.yaml new file mode 100644 index 0000000..cf490a6 --- /dev/null +++ b/content/01-cyanine-theme/03-content-elements.yaml @@ -0,0 +1,8 @@ +meta: + title: 'Content Elements' + description: "There are a lot of other settings for your content area. For example: \nAdd an edit-button for github, gitlab or other plattforms.\nShow the author.\nShow the publish date.\nShow the chapter numbers in the navigation.\n" + author: trendschau + created: '2020-06-11' + time: 21-05-02 + navtitle: 'content elements' + modified: '2020-06-11' diff --git a/content/01-cyanine-theme/index.md b/content/01-cyanine-theme/index.md new file mode 100644 index 0000000..d7e9dec --- /dev/null +++ b/content/01-cyanine-theme/index.md @@ -0,0 +1,6 @@ +# The Cyanine Theme + +Cyanine is the modern, lightweight and flexible standard theme for Typemill. You can activate a landingpage, setup different content sections for the landingpage and order them like you want. You can also change the colors, fonts and other details. To configure the theme, login to the system (/tm/login), go to the theme settings (/tm/themes) and choose the theme "Cyanine". + +If Cyanine does not fit to your needs, then you can also choose another theme in the [theme store](https://themes.typemill.net) of Typemill. + diff --git a/content/01-cyanine-theme/index.yaml b/content/01-cyanine-theme/index.yaml new file mode 100644 index 0000000..9826e63 --- /dev/null +++ b/content/01-cyanine-theme/index.yaml @@ -0,0 +1,8 @@ +meta: + title: 'The Theme Cyanine' + description: 'Cyanine is the new standard theme for Typemill. It is modern, lightweight and very flexible. You can activate a landingpage, setup different landing-page sections and order them like you want. You can also change the colors, fonts and other details.' + author: trendschau + created: '2020-06-11' + time: 19-58-04 + navtitle: cyanine + modified: '2020-06-11' diff --git a/content/index.md b/content/index.md index 0d8f3d5..2b2a9ed 100644 --- a/content/index.md +++ b/content/index.md @@ -1,4 +1,4 @@ # Typemill -Typemill is a user-friendly and lightweight open source CMS for publishing text-works like prose, lyrics, manuals, documentations, studies and more. Just download and start. +The open-source flat-file cms for text-driven websites. Create handbooks, documentations, manuals, web-novels, traditional websites, and more. diff --git a/system/author/css/style.css b/system/author/css/style.css index 3107c50..5e37db2 100644 --- a/system/author/css/style.css +++ b/system/author/css/style.css @@ -1832,19 +1832,11 @@ button.hdown{ font-weight: 700; border: 0px solid #fff; border-right: 1px solid #fff; -// background: #f9f8f6; -// color: #66b0a3; } button.hdown.headline{ color: #f9f8f6; background: #66b0a3; } -/* -button.hdown:hover,button.hdown:focus,button.hdown:active{ - color: #f9f8f6; - background: #66b0a3; -} -*/ .blox-editor .contenttype { position: absolute; top: 15px; diff --git a/system/author/js/vue-blox.js b/system/author/js/vue-blox.js index 2f673b8..81119fa 100644 --- a/system/author/js/vue-blox.js +++ b/system/author/js/vue-blox.js @@ -735,6 +735,7 @@ const quoteComponent = Vue.component('quote-component', { '', data: function(){ return { + prefix: '> ', quote: '' } }, @@ -742,24 +743,100 @@ const quoteComponent = Vue.component('quote-component', { this.$refs.markdown.focus(); if(this.compmarkdown) { - var quote = this.compmarkdown.replace("> ", ""); - quote = this.compmarkdown.replace(">", "").trim(); - this.quote = quote; + var lines = this.compmarkdown.match(/^.*([\n\r]+|$)/gm); + for (var i = 0; i < lines.length; i++) { + lines[i] = lines[i].replace(/(^[\> ]+)/mg, ''); + } + + this.quote = lines.join(''); } this.$nextTick(function () { autosize(document.querySelectorAll('textarea')); - }); + }); }, methods: { updatemarkdown: function(value) { this.quote = value; - var quote = '> ' + value; + + var lines = value.match(/^.*([\n\r]|$)/gm); + + var quote = this.prefix + lines.join(this.prefix); + this.$emit('updatedMarkdown', quote); }, }, }) +const noticeComponent = Vue.component('notice-component', { + props: ['compmarkdown', 'disabled'], + template: '
' + + '' + + '
' + + '' + + '' + + '' + + '' + + '
', + data: function(){ + return { + prefix: '! ', + notice: '', + noteclass: 'note1' + } + }, + mounted: function(){ + this.$refs.markdown.focus(); + if(this.compmarkdown) + { + this.prefix = this.getNoticePrefix(this.compmarkdown); + + var lines = this.compmarkdown.match(/^.*([\n\r]+|$)/gm); + for (var i = 0; i < lines.length; i++) { + lines[i] = lines[i].replace(/(^[\! ]+)/mg, ''); + } + + this.notice = lines.join(''); + this.noteclass = 'note'+this.prefix.length; + } + this.$nextTick(function () { + autosize(document.querySelectorAll('textarea')); + }); + }, + methods: { + noticedown: function() + { + this.prefix = this.getNoticePrefix(this.compmarkdown); + this.prefix += "! "; + if(this.prefix.length > 4) + { + this.prefix = "! "; + } + this.noteclass = 'note' + (this.prefix.length-1); + this.updatemarkdown(this.notice); + }, + getNoticePrefix: function(str) + { + var prefix = ''; + for(var i = 0; i < str.length; i++){ + if(str[i] != '!'){ return prefix } + prefix += '!'; + } + return prefix+' '; + }, + updatemarkdown: function(value) + { + this.notice = value; + + var lines = value.match(/^.*([\n\r]|$)/gm); + + var notice = this.prefix + lines.join(this.prefix); + + this.$emit('updatedMarkdown', notice); + }, + }, +}) + const ulistComponent = Vue.component('ulist-component', { props: ['compmarkdown', 'disabled'], template: '
' + @@ -834,77 +911,6 @@ const olistComponent = Vue.component('olist-component', { }, }) - -const noticeComponent = Vue.component('notice-component', { - props: ['compmarkdown', 'disabled'], - template: '
' + - '' + - '
' + - '' + - '' + - '' + - '' + - '
', - data: function(){ - return { - prefix: '! ', - notice: '', - noteclass: 'note1' - } - }, - mounted: function(){ - this.$refs.markdown.focus(); - if(this.compmarkdown) - { - this.prefix = this.getNoticePrefix(this.compmarkdown); - - var lines = this.compmarkdown.match(/^.*([\n\r]+|$)/gm); - for (var i = 0; i < lines.length; i++) { - lines[i] = lines[i].replace(/(^[\! ]+)/mg, ''); - } - - this.notice = lines.join(''); - this.noteclass = 'note'+this.prefix.length; - } - this.$nextTick(function () { - autosize(document.querySelectorAll('textarea')); - }); - }, - methods: { - noticedown: function() - { - this.prefix = this.getNoticePrefix(this.compmarkdown); - this.prefix += "! "; - if(this.prefix.length > 4) - { - this.prefix = "! "; - } - this.noteclass = 'note' + (this.prefix.length-1); - this.updatemarkdown(this.notice); - }, - getNoticePrefix: function(str) - { - var prefix = ''; - for(var i = 0; i < str.length; i++){ - if(str[i] != '!'){ return prefix } - prefix += '!'; - } - return prefix+' '; - }, - updatemarkdown: function(value) - { - this.notice = value; - - var lines = value.match(/^.*([\n\r]|$)/gm); - - var notice = this.prefix + lines.join(this.prefix); - - this.$emit('updatedMarkdown', notice); - }, - }, -}) - - const headlineComponent = Vue.component('headline-component', { props: ['compmarkdown', 'disabled'], template: '
' + @@ -1345,6 +1351,7 @@ const imageComponent = Vue.component('image-component', { imglink: '', imgclass: 'center', imgid: '', + imgattr: '', imgfile: '', } }, @@ -1404,6 +1411,10 @@ const imageComponent = Vue.component('image-component', { { this.imgid = imgattr[i].slice(1); } + else + { + this.imgattr += ' ' + imgattr[i]; + } } } @@ -1484,7 +1495,11 @@ const imageComponent = Vue.component('image-component', { errors = 'Maximum size of image class is 100 characters'; } } - if(this.imgid != '' || this.imgclass != '') + if(this.imgattr != '') + { + imgattr += this.imgattr; + } + if(imgattr != '') { imgmarkdown = imgmarkdown + '{' + imgattr + '}'; } @@ -2144,7 +2159,8 @@ const medialib = Vue.component('medialib', { this.$parent.showmedialib = false; - this.$parent.updatemarkdown(imgmarkdown, image.src_live); + this.$parent.createmarkdown(); +/* this.$parent.updatemarkdown(imgmarkdown, image.src_live); */ } if(this.parentcomponent == 'files') { @@ -2177,7 +2193,8 @@ const medialib = Vue.component('medialib', { this.$parent.showmedialib = false; - this.$parent.updatemarkdown(imgmarkdown, file.url); + this.$parent.createmarkdown(); +/* this.$parent.updatemarkdown(imgmarkdown, file.url);*/ } if(this.parentcomponent == 'files') { diff --git a/system/author/languages/de.yaml b/system/author/languages/de.yaml index 45315a6..cc6c258 100644 --- a/system/author/languages/de.yaml +++ b/system/author/languages/de.yaml @@ -200,12 +200,12 @@ VISIT_THE_AUTHOR_PANEL_AND_SETUP_YOUR_NEW_WEBSITE__YOU_CAN_CONFIGURE_THE_SYSTEM_ GET_HELP: Hilfe erhalten IF_YOU_HAVE_ANY_QUESTIONS__PLEASE_READ_THE: Wenn du Fragen hast, lies bitte die DOCS: Dokumentation -OR_OPEN_A_NEW_ISSUE_ON: oder öffne ein neues Issue +OR_OPEN_A_NEW_ISSUE_ON: oder erstelle ein neues Issue auf CODED_WITH: Entwickelt mit BY_THE: von der COMMUNITY: Community TRENDSCHAU_DIGITAL: Trendschau Digital -CONFIGURE_YOUR_WEBSITE: Richte deine Seite ein. -GIVE_YOUR_NEW_WEBSITE_A_NAME__ADD_THE_AUTHOR_AND_CHOOSE_A_COPYRIGHT_: Gib deiner neuen Seite einen Namen, füge Autoren hinzu und wähle ein Copyright. +CONFIGURE_YOUR_WEBSITE: Zur Autorenoberfläche +GIVE_YOUR_NEW_WEBSITE_A_NAME__ADD_THE_AUTHOR_AND_CHOOSE_A_COPYRIGHT_: Konfiguriere das System. CHOOSE_A_THEME_FOR_YOUR_WEBSITE_AND_CONFIGURE_THE_THEME_DETAILS_: Richte ein Theme für deine Webseite ein. ADD_NEW_FEATURES_TO_YOUR_WEBSITE_WITH_PLUGINS_AND_CONFIGURE_THEM_: Füge mit Plugins neue Funktionen hinzu. diff --git a/themes/cyanine/cyanine.yaml b/themes/cyanine/cyanine.yaml index 5fdba8a..b92fb98 100644 --- a/themes/cyanine/cyanine.yaml +++ b/themes/cyanine/cyanine.yaml @@ -9,7 +9,11 @@ amount: 25 settings: landingpage: on - landingpageIntro: on + landingpageIntro: 1 + landingpageNavi: 2 + naviTitle: Get Started + fontheadline: sans-serif + fontnavi: sans-serif forms: fields: @@ -107,7 +111,7 @@ forms: landingpageNavi: type: fieldset - legend: Landingpage Contrast Segment + legend: Landingpage Navigation Segment fields: landingpageNavi: type: number @@ -203,6 +207,15 @@ forms: label: Text/label for edit link placeholder: edit on github + fieldsetChapters: + type: fieldset + legend: Navigations and Chapters + fields: + chapnum: + type: checkbox + label: Show Chapter Numbers + checkboxlabel: Count chapters in navigation? + fieldsetfooter: type: fieldset legend: Footer columns diff --git a/themes/cyanine/partials/navigation.twig b/themes/cyanine/partials/navigation.twig index 0aec349..9bd8b3e 100644 --- a/themes/cyanine/partials/navigation.twig +++ b/themes/cyanine/partials/navigation.twig @@ -1,4 +1,4 @@ -{% macro loop_over(navigation) %} +{% macro loop_over(navigation,chapnum) %} {% import _self as macros %} @@ -15,14 +15,14 @@ {% endif %} {% if (element.elementType == 'folder') %} - {{ element.name }} + {% if chapnum %}{{ element.chapter }}. {% endif %}{{ element.name }} {% if (element.folderContent|length > 0) and (element.contains == 'pages') %} {% endif %} {% else %} - {{ element.name }} + {% if chapnum %}{{ element.chapter }} {% endif %}{{ element.name }} {% endif %} {% endfor %} @@ -30,6 +30,6 @@ {% import _self as macros %} -