0ct0pu5/typemill
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Version 1.3.7. Fix image attributes

Browse source
This commit is contained in:
trendschau 2020-06-12 21:21:49 +02:00
parent 8d052e785f
commit 2b6a1552ff
19 changed files with 239 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
content/00-welcome/00-setup.md
View file

@ -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.

10
content/00-welcome/01-write-content.md
View file

@ -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.

2
content/00-welcome/index.md
View file

@ -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.

13
content/01-cyanine-theme/00-landingpage.md Normal file
View file

@ -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.

8
content/01-cyanine-theme/00-landingpage.yaml Normal file
View file

@ -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'

4
content/01-cyanine-theme/01-footer.md Normal file
View file

@ -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.

8
content/01-cyanine-theme/01-footer.yaml Normal file
View file

@ -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'

36
content/01-cyanine-theme/02-colors-and-fonts.md Normal file
View file

@ -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.

8
content/01-cyanine-theme/02-colors-and-fonts.yaml Normal file
View file

@ -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'

11
content/01-cyanine-theme/03-content-elements.md Normal file
View file

@ -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.

8
content/01-cyanine-theme/03-content-elements.yaml Normal file
View file

@ -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'

6
content/01-cyanine-theme/index.md Normal file
View file

@ -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.

8
content/01-cyanine-theme/index.yaml Normal file
View file

@ -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'

2
content/index.md
View file

@ -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.

8
system/author/css/style.css
View file

@ -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;

175
system/author/js/vue-blox.js
View file

@ -735,6 +735,7 @@ const quoteComponent = Vue.component('quote-component', {
'</div>',
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: '<div>' +
'<input type="hidden" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown" />' +
'<div class="contenttype"><svg class="icon icon-exclamation-circle"><use xlink:href="#icon-exclamation-circle"></use></svg></div>' +
'<button class="hdown" :class="noteclass" @click.prevent="noticedown" v-html="prefix"></button>' +
'<inline-formats>' +
'<textarea class="mdcontent pl-notice" ref="markdown" v-model="notice" :disabled="disabled" @input="updatemarkdown(event.target.value)"></textarea>' +
'</inline-formats>' +
'</div>',
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: '<div>' +
@ -834,77 +911,6 @@ const olistComponent = Vue.component('olist-component', {
},
})
const noticeComponent = Vue.component('notice-component', {
props: ['compmarkdown', 'disabled'],
template: '<div>' +
'<input type="hidden" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown" />' +
'<div class="contenttype"><svg class="icon icon-exclamation-circle"><use xlink:href="#icon-exclamation-circle"></use></svg></div>' +
'<button class="hdown" :class="noteclass" @click.prevent="noticedown" v-html="prefix"></button>' +
'<inline-formats>' +
'<textarea class="mdcontent pl-notice" ref="markdown" v-model="notice" :disabled="disabled" @input="updatemarkdown(event.target.value)"></textarea>' +
'</inline-formats>' +
'</div>',
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: '<div>' +
@ -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')
{

6
system/author/languages/de.yaml
View file

@ -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.

17
themes/cyanine/cyanine.yaml
View file

@ -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

12
themes/cyanine/partials/navigation.twig
View file

@ -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') %}
<a class="link dib w-100 relative fw9 pv2 pr2 indent-l-{{depth}} margin-bottom-1 arrow-after hover-bg-primary f-primary hover-f-secondary" href="{{ element.urlAbs }}">{{ element.name }}</a>
<a class="link dib w-100 relative fw9 pv2 pr2 indent-l-{{depth}} margin-bottom-1 arrow-after hover-bg-primary f-primary hover-f-secondary" href="{{ element.urlAbs }}">{% if chapnum %}{{ element.chapter }}. {% endif %}{{ element.name }}</a>
{% if (element.folderContent|length > 0) and (element.contains == 'pages') %}
<ul class="list pa0">
{{ macros.loop_over(element.folderContent) }}
{{ macros.loop_over(element.folderContent, chapnum) }}
</ul>
{% endif %}
{% else %}
<a class="link dib w-100 relative fw3 pv2 pr2 indent-l-{{depth}} margin-bottom-1 arrow-after hover-bg-primary f-primary hover-f-secondary" href="{{ element.urlAbs }}">{{ element.name }}</a>
<a class="link dib w-100 relative fw3 pv2 pr2 indent-l-{{depth}} margin-bottom-1 arrow-after hover-bg-primary f-primary hover-f-secondary" href="{{ element.urlAbs }}">{% if chapnum %}{{ element.chapter }} {% endif %}{{ element.name }}</a>
{% endif %}
</li>
{% endfor %}
@ -30,6 +30,6 @@
{% import _self as macros %}
<ul class="list pa0 menu {{ settings.themes.cyanine.fontnavi}}">
{{ macros.loop_over(navigation) }}
<ul class="list pa0 menu {{ settings.themes.cyanine.fontnavi }}">
{{ macros.loop_over(navigation, settings.themes.cyanine.chapnum ) }}
</ul>