1
0
mirror of https://github.com/typemill/typemill.git synced 2025-07-31 11:20:15 +02:00

v.2.3.4 add readymades to themes

This commit is contained in:
trendschau
2024-04-03 20:55:00 +02:00
parent 13f29ae616
commit f1212164b7
5 changed files with 221 additions and 6 deletions

View File

@@ -74,6 +74,7 @@ class ControllerWebSystem extends Controller
$extension = new Extension();
$themeDefinitions = $extension->getThemeDetails($this->settings['theme']);
$themeSettings = $extension->getThemeSettings($this->settings['themes']);
$readymades = [];
# add userroles and other datasets
foreach($themeDefinitions as $name => $definitions)
@@ -93,6 +94,11 @@ class ControllerWebSystem extends Controller
}
}
}
if(isset($definitions['readymades']))
{
$readymades[$name] = $definitions['readymades'];
}
}
$license = [];
@@ -106,9 +112,10 @@ class ControllerWebSystem extends Controller
'darkmode' => $request->getAttribute('c_darkmode'),
'mainnavi' => $mainNavigation,
'jsdata' => [
'systemnavi' => $systemNavigation,
'systemnavi' => $systemNavigation,
'settings' => $themeSettings,
'definitions' => $themeDefinitions,
'readymades' => $readymades,
'theme' => $this->settings['theme'],
'license' => $license,
'labels' => $this->c->get('translations'),

View File

@@ -88,17 +88,25 @@ app.component('component-codearea', {
</div>`,
mounted: function()
{
this.resizeCodearea();
this.highlight(this.value);
this.initialize()
eventBus.$on('codeareaupdate', this.initialize );
},
methods: {
update: function($event, name)
initialize()
{
this.$nextTick(() => {
this.highlight(this.value);
this.resizeCodearea();
});
},
update($event, name)
{
this.highlight($event.target.value);
this.resizeCodearea();
eventBus.$emit('forminput', {'name': name, 'value': $event.target.value});
},
resizeCodearea: function()
resizeCodearea()
{
let codeeditor = this.$refs["editor"];
@@ -110,7 +118,7 @@ app.component('component-codearea', {
}
});
},
highlight: function(code)
highlight(code)
{
if(code === undefined)
{

View File

@@ -35,6 +35,31 @@ const app = Vue.createApp({
</div>
</div>
<form class="w-full p-8" v-if="current == themename">
<div v-if="theme.readymades">
<fieldset class="flex flex-wrap justify-between block border-2 border-stone-200 p-4 my-8">
<legend class="text-lg font-medium">Readymades</legend>
<p class="w-full bg-stone-200 mb p-2">Readymades help you to setup your theme with prefilled settings. Load some readymades, check out the frontend and adjust the settings as needed. Find more informations about specific readymades on the <a class="text-teal-500" :href="themeurl(themename)">theme's website.</p>
<p class="w-full text-center mb-4 p-2 bg-rose-500 text-white">If you load and save a readymade, then your individual settins will be overwritten and are lost!</p>
<ul class="flex flex-wrap justify-between">
<li class="w-1/3 p-2 flex">
<div class="border-2 border-stone-200">
<button class="w-full center bg-stone-200 p-2 hover:bg-stone-300 transition duration-100" @click.prevent="loadReadymade('individual')">Load individual</button>
<div class="p-3">
<p>Load your stored individual settings.</p>
</div>
</div>
</li>
<li class="w-1/3 p-2 flex" v-for="(readysetup,readyname) in theme.readymades">
<div class="border-2 border-stone-200">
<button class="w-full center bg-stone-200 p-2 hover:bg-stone-300 transition duration-100" @click.prevent="loadReadymade(readyname)">Load {{ readysetup.name }}</button>
<div class="p-3">
<p>{{ readysetup.description }}</p>
</div>
</div>
</li>
</ul>
</fieldset>
</div>
<div v-for="(fieldDefinition, fieldname) in theme.forms.fields">
<fieldset class="flex flex-wrap justify-between border-2 border-stone-200 p-4 my-8" v-if="fieldDefinition.type == 'fieldset'">
<legend class="text-lg font-medium">{{ fieldDefinition.legend }}</legend>
@@ -89,6 +114,7 @@ const app = Vue.createApp({
current: '',
formDefinitions: data.definitions,
formData: data.settings,
readymades: data.readymades,
theme: data.theme,
license: data.license,
message: '',
@@ -140,6 +166,10 @@ const app = Vue.createApp({
});
},
methods: {
themeurl(name)
{
return 'https://themes.typemill.net/' + name;
},
deactivateThemes()
{
for (const theme in this.formData) {
@@ -212,6 +242,19 @@ const app = Vue.createApp({
{
return 'component-'+type;
},
loadReadymade(name)
{
if(this.readymades[this.current] && this.readymades[this.current].individual === undefined)
{
this.readymades[this.current].individual = { 'settings' : this.formData[this.current] };
}
if(this.readymades[this.current][name] !== undefined)
{
this.formData[this.current] = this.readymades[this.current][name].settings;
eventBus.$emit('codeareaupdate');
}
},
save()
{
this.reset();

View File

@@ -48,6 +48,7 @@
const data = {{ jsdata | json_encode() | raw }};
</script>
<script src="{{ base_url() }}/system/typemill/author/js/autosize.min.js?v={{ settings.version }}"></script>
<script src="{{ base_url() }}/system/typemill/author/js/axios.min.js?v={{ settings.version }}"></script>
<script>
const tmaxios = axios.create();

View File

@@ -40,6 +40,162 @@ settings:
footer2: '### Footer 2'
footer3: '### Footer 3'
readymades:
darkdemo:
name: 'Dark Demo'
description: 'A dark layout with a landingpage and a background animation on the startscreen.'
settings:
layoutsize: standard
blogimage: true
landingpage: 'on'
introPosition: '1'
introFullsize: true
introTitle: 'Typemill is a flat-file-cms for relevant content. Create websites and ebooks for documentations, manuals, reports, handbooks, guidelines, textbooks, and all kind of content-projects.'
introMarkdown: 'This demo website grants access to all essential features , with the exception of user and license management. It also includes additional plugins such as the ebook-plugin. The demo environment resets every 30 minutes. Log in using the credentials "demouser" and "demopass".'
introButtonLink: /tm/login
introButtonLabel: 'Login to the Demo'
introImageOpacity: '0'
introImage: true
infoPosition: '0'
infoMarkdown: "## A Flat File CMS for Publishers\n\n1. **Publishers** love Typemill, because you can create eBooks from your Typemill website with just some clicks. [Read more](/publishers)\n2. **A flat-file cms** does not need a database because it stores all content in markdown files. Want to get your content? Just download the files. [Read more](/typemill/why-flat-file)\n3. **Markdown** is an easy markup language for authors. And the visual markdown editor of Typemill makes it easy for beginners to start. [Read more](/writers/markdown)"
teaserPosition: '0'
teaser1title: Typemill
teaser1text: 'Visit the Typemill website'
teaser1link: 'https://typemill.net'
teaser1label: 'Visit Typemill'
teaser2title: Plugins
teaser2text: 'Use some cool plugins.'
teaser2link: 'https://plugins.typemill.net'
teaser2label: 'Choose Plugins'
teaser3title: Themes
teaser3text: 'Try out some beautiful themes.'
teaser3link: 'https://themes.typemill.net'
teaser3label: 'Choose Themes'
contrastPosition: '2'
contrastTitle: 'Typemill Newsletter'
contrastText: 'Every month on the 15th a new release of Typemill is published . Stay in the loop and subscribe to the newsletter.'
contrastLink: 'https://typemill.net/news'
contrastLabel: 'Visit the Newsletter'
naviPosition: '3'
naviTitle: 'Table of Contents'
naviDepth: '2'
newsPosition: '4'
newsHeadline: Blog
newsFolder: /blog
newsLabel: 'All posts'
authorPosition:
- bottom
authorIntro: Author
datePosition:
- bottom
dateIntro: 'Last updated'
dateFormat: d.m.Y
collapseNav: true
footercolumns:
- footer1
- footer2
- footer3
footer1: "### Typemill Version 2\n\nTypemill is a lightweight, flat-file CMS designed for simple, fast, and flexible website and eBook creation using Markdown. Read all about the [feature highlights of Typemill](https://typemill.net/typemill/features) version 2."
footer2: "### Resources\n\n* [Newsletter](https://typemill.net/news)\n* [Typemill on GitHub](https://github.com/typemill/typemill)\n* [Theme Directory](https://themes.typemill.net)\n* [Plugin Directory](https://plugins.typemill.net)\n* [Discussions](https://github.com/typemill/typemill/discussions)\n* [Mastodon](https://mastodon.social/@typemill)"
footer3: "### Product\n\n* [Pricing](https://typemill.net/license/buy)\n* [Terms & Conditions](https://typemill.net/license/terms-and-conditions)\n* [License Agreement](https://typemill.net/license/license-agreement)\n* [Privacy Policy](https://typemill.net/info/privacy)\n* [Trademark Policy](https://typemill.net/info/trademark-policy)\n* [Imprint](https://typemill.net/info/imprint)"
font: 'BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif'
fontheadline: 'BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif'
fontnavi: 'BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif'
brandcolorprimary: '#414248'
fontcolorprimary: '#d0cfcd'
newsbackground: '#F0EFF0'
newscolor: '#414248'
brandcolortertiary: '#414248'
fontcolortertiary: '#d0cfcd'
bordercolortertiary: '#d0cfcd'
fontcolorlink: '#007aff'
brandcolorsecondary: '#414248'
fontcolorsecondary: '#d0cfcd'
codebackground: '#d0cfcd'
codecolor: '#414248'
contentnavihoverbackground: '#F0EFF0'
contentnavihovercolor: '#414248'
thinbordercolor: '#d0cfcd'
noticecolors: true
customcss: ".landingpageintro{\n text-align:left;\n background:transparent;\n}\n.landingpageintro h1{\n font-size: 2rem;\n}\n.landingpageintro, .landingpagecontrast, .landingpagenavi, .landingpagenews, main, footer{\n border-bottom: 1px solid #6D6D6D;\n}\n.landingpagenavi li, .navigation li{\n border: 0px;\n}\n.landingpageintro::before {\n position: absolute;\n content: '';\n left: 5%;\n top: 5%;\n bottom: 5%;\n right: 5%;\n background: #38393F;\n border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;\n will-change: border-radius, transform, opacity;\n animation: sliderShape 20s linear infinite;\n display: block;\n z-index: -1;\n -webkit-animation: sliderShape 20s linear infinite;\n}\n@keyframes sliderShape{\n 0%,100%{\n border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;\n transform: translate3d(0,0,0) rotateZ(0.01deg);\n }\n 34%{\n border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;\n transform: translate3d(0,5px,0) rotateZ(0.01deg);\n }\n 50%{\n transform: translate3d(0,0,0) rotateZ(0.01deg);\n }\n 67%{\n border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;\n transform: translate3d(0,-3px,0) rotateZ(0.01deg);\n }\n}"
lightdemo:
name: 'Light Demo'
description: 'A light layout with a landingpage and a background animation on the startscreen.'
settings:
layoutsize: standard
blogimage: true
landingpage: 'on'
introPosition: '1'
introFullsize: true
introTitle: 'Typemill is a flat-file-cms for relevant content. Create websites and ebooks for documentations, manuals, reports, handbooks, guidelines, textbooks, and all kind of content-projects.'
introMarkdown: 'This demo website grants access to all essential features , with the exception of user and license management. It also includes additional plugins such as the ebook-plugin. The demo environment resets every 30 minutes. Log in using the credentials "demouser" and "demopass".'
introButtonLink: /tm/login
introButtonLabel: 'Login to the Demo'
introImageOpacity: '0'
introImage: true
infoPosition: '0'
infoMarkdown: "## A Flat File CMS for Publishers\n\n1. **Publishers** love Typemill, because you can create eBooks from your Typemill website with just some clicks. [Read more](/publishers)\n2. **A flat-file cms** does not need a database because it stores all content in markdown files. Want to get your content? Just download the files. [Read more](/typemill/why-flat-file)\n3. **Markdown** is an easy markup language for authors. And the visual markdown editor of Typemill makes it easy for beginners to start. [Read more](/writers/markdown)"
teaserPosition: '0'
teaser1title: Typemill
teaser1text: 'Visit the Typemill website'
teaser1link: 'https://typemill.net'
teaser1label: 'Visit Typemill'
teaser2title: Plugins
teaser2text: 'Use some cool plugins.'
teaser2link: 'https://plugins.typemill.net'
teaser2label: 'Choose Plugins'
teaser3title: Themes
teaser3text: 'Try out some beautiful themes.'
teaser3link: 'https://themes.typemill.net'
teaser3label: 'Choose Themes'
contrastPosition: '2'
contrastTitle: 'Typemill Newsletter'
contrastText: 'Every month on the 15th a new release of Typemill is published . Stay in the loop and subscribe to the newsletter.'
contrastLink: 'https://typemill.net/news'
contrastLabel: 'Visit the Newsletter'
naviPosition: '3'
naviTitle: 'Table of Contents'
naviDepth: '2'
newsPosition: '4'
newsHeadline: Blog
newsFolder: /blog
newsLabel: 'All posts'
authorPosition:
- bottom
authorIntro: Author
datePosition:
- bottom
dateIntro: 'Last updated'
dateFormat: d.m.Y
collapseNav: true
footercolumns:
- footer1
- footer2
- footer3
footer1: "### Typemill Version 2\n\nTypemill is a lightweight, flat-file CMS designed for simple, fast, and flexible website and eBook creation using Markdown. Read all about the [feature highlights of Typemill](https://typemill.net/typemill/features) version 2."
footer2: "### Resources\n\n* [Newsletter](https://typemill.net/news)\n* [Typemill on GitHub](https://github.com/typemill/typemill)\n* [Theme Directory](https://themes.typemill.net)\n* [Plugin Directory](https://plugins.typemill.net)\n* [Discussions](https://github.com/typemill/typemill/discussions)\n* [Mastodon](https://mastodon.social/@typemill)"
footer3: "### Product\n\n* [Pricing](https://typemill.net/license/buy)\n* [Terms & Conditions](https://typemill.net/license/terms-and-conditions)\n* [License Agreement](https://typemill.net/license/license-agreement)\n* [Privacy Policy](https://typemill.net/info/privacy)\n* [Trademark Policy](https://typemill.net/info/trademark-policy)\n* [Imprint](https://typemill.net/info/imprint)"
font: 'BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif'
fontheadline: 'BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif'
fontnavi: 'BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif'
brandcolorprimary: '#F0EFF0'
fontcolorprimary: '#414248'
newsbackground: '#d0cfcd'
newscolor: '#414248'
brandcolortertiary: '#414248'
fontcolortertiary: '#d0cfcd'
bordercolortertiary: '#d0cfcd'
fontcolorlink: '#007aff'
brandcolorsecondary: '#F0EFF0'
fontcolorsecondary: '#414248'
codebackground: '#414248'
codecolor: '#d0cfcd'
contentnavihoverbackground: '#414248'
contentnavihovercolor: '#F0EFF0'
thinbordercolor: '#d0cfcd'
noticecolors: true
customcss: ".landingpageintro{\n text-align:left;\n background:transparent;\n}\n.landingpageintro h1{\n font-size: 2rem;\n}\n.landingpageintro, .landingpagecontrast, .landingpagenavi, .landingpagenews, main, footer{\n border-bottom: 1px solid #6D6D6D;\n}\n.landingpagenavi li, .navigation li{\n border: 0px;\n}\nul.landingpagenavi, ul.navigation{\n background: #d0cfcd;\n}\n.navigation a, .navigation a:hover, .navigation a:focus, .navigation a:active{\n color: #414248;\n}\n.landingpageintro::before {\n position: absolute;\n content: '';\n left: 5%;\n top: 5%;\n bottom: 5%;\n right: 5%;\n background: #d0cfcd;\n border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;\n will-change: border-radius, transform, opacity;\n animation: sliderShape 20s linear infinite;\n display: block;\n z-index: -1;\n -webkit-animation: sliderShape 20s linear infinite;\n}\n@keyframes sliderShape{\n 0%,100%{\n border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;\n transform: translate3d(0,0,0) rotateZ(0.01deg);\n }\n 34%{\n border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;\n transform: translate3d(0,5px,0) rotateZ(0.01deg);\n }\n 50%{\n transform: translate3d(0,0,0) rotateZ(0.01deg);\n }\n 67%{\n border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;\n transform: translate3d(0,-3px,0) rotateZ(0.01deg);\n }\n}"
forms:
fields: