first commit

.gitignore

@@ -0,0 +1 @@
+/vendor/

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 hounddd / Damien MATHIEU
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,70 @@
+# Winter CMS - Blocks Theme
+Winter CMS theme that demonstrates the use of repeater groups to assemble static pages with customizable building sections and blocks.
+Each section, depending oh his type, can have one or more blocks.
+## Installation
+(let assume you're in the root of your winter installation)
+### Using composer
+Just run this command
+```
+composer require hounddd/wn-blocks-theme
+```
+
+### Cloning repo
+Clone this repo into your winter themes folder.
+
+```
+cd themes
+git clone https://github.com/liip/oc-blocks-theme.git blocks
+```
+## Usage
+NOTE: the name **blocks** is important, if you change the themes name you have to alter some files to match the path.
+ - the groups attribute in the `layouts/default.htm` repeater.
+ - the groups attribute in the `meta/sections.yaml` repeater.
+
+
+In your backend, check for the [static pages plugin](https://github.com/wintercms/wn-pages-plugin) to be installed. If you go to the "Pages" and edit home page, you now have a blocks tab where you can add different sections/blocks, enter data and even rearrange their order.
+
+![static pages example](assets/images/blocks.jpg)
+
+## Adjust to your needs
+See [Winter CMS backend forms](https://wintercms.com/docs/backend/forms) documentation to see how setting new field definitions.
+### Adding sections
+To add more section types, edit `meta/sections.yaml` file.
+
+In your field definition simply add
+```
+my-section-type:
+    name: My awesome section
+    description: display a section
+    icon: icon-table
+    content:
+        type: repeater
+        prompt: Add new block
+        style: accordion
+        groups: themes/blocks/meta/blocks.yaml
+```
+**Important**: Each section definition has a corresponding partial file named `partials/blocks/{section_name}.htm`.  The form data is passed as 'data'.
+
+![static pages example](assets/images/blocks-menus.png)
+
+### Adding blocks
+To add more block types, edit `meta/blocks.yaml` file.
+
+In your field definition simply add
+```
+text:
+    name: Simple text
+    description: simple text without html tags
+    icon: icon-file-text-o
+    fields:
+        content:
+            label: Content
+            span: left
+            type: textarea
+            size: small
+```
+**Important**: Each block definition has a corresponding partial file named `partials/blocks/content/{block_name}.htm`.  The form data is passed as 'content'.
+
+
+
+

assets/styles.css

@@ -0,0 +1,17 @@
+
+body {
+    overflow-x: hidden;
+}
+
+.full-width {
+    width: 100vw;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+}
+
+.material-icons.md-64 {
+    font-size: 64px;
+}

composer.json

@@ -0,0 +1,17 @@
+{
+    "name": "hounddd/wn-blocks-theme",
+    "type": "wn-theme",
+    "description": "Winter CMS theme that demonstrates the use of repeater groups to assemble static pages with customizable building sections and blocks.",
+    "keywords": ["winter", "cms", "demo", "theme"],
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "DamsFX - Damien MATHIEU",
+            "email": "[email protected]"
+        }
+    ],
+    "require": {
+        "php": ">=5.4",
+        "composer/installers": "~1.0"
+    }
+}

content/static-pages/index.htm

@@ -0,0 +1,104 @@
+[viewBag]
+title = "Home"
+url = "/"
+layout = "default"
+is_hidden = 0
+navigation_hidden = 0
+sections[0][show_options] = 1
+sections[0][fullScreen] = 1
+sections[0][noMargin] = 0
+sections[0][cssClasses] = "bg-gradient-to-r from-blue-100 via-blue-50 to-blue-100 text-blue-900 py-6"
+sections[0][content][0][content] = "This is just simple text with some css classes.
+Demonstrate 1 column section w/ 1 simple text block and 1 image block."
+sections[0][content][0][textSize] = "text-lg"
+sections[0][content][0][textAlign] = "text-center"
+sections[0][content][0][_group] = "text"
+sections[0][content][1][image_mode] = 0
+sections[0][content][1][image_alt] = "WinterCMS, best free CMS plateforme"
+sections[0][content][1][image] = ""
+sections[0][content][1][image_url] = "https://wintercms.com/storage/app/media/wordmark-svg.png"
+sections[0][content][1][image_css] = "max-w-lg mx-auto my-10"
+sections[0][content][1][_group] = "image"
+sections[0][_group] = "section"
+sections[1][show_options] = 0
+sections[1][fullScreen] = 0
+sections[1][noMargin] = 0
+sections[1][cssClasses] = ""
+sections[1][left][0][content] = "<h2>2 columns section</h2>
+
+<p>This section shows a \"<strong>2 columns section</strong>\" on large screens that fold on small screen in 1 column w/ 2 rows.</p>
+
+<h3>Left bloc</h3>
+
+<p>This block is an HTML block, &nbsp;where text can be <em>formated</em>.</p>
+
+<h3>Right block</h3>
+
+<p>Display an image from the media manager or from remote URL.</p>"
+sections[1][left][0][_group] = "html"
+sections[1][right][0][image_mode] = 0
+sections[1][right][0][image_alt] = ""
+sections[1][right][0][image] = ""
+sections[1][right][0][image_url] = "themes/blocks/assets/images/blocks.jpg"
+sections[1][right][0][image_css] = ""
+sections[1][right][0][_group] = "image"
+sections[1][_group] = "section-double"
+sections[2][show_options] = 0
+sections[2][fullScreen] = 0
+sections[2][noMargin] = 0
+sections[2][cssClasses] = ""
+sections[2][left][0][image_mode] = 0
+sections[2][left][0][image_alt] = ""
+sections[2][left][0][image] = ""
+sections[2][left][0][image_url] = "themes/blocks/assets/images/blocks-menus.png"
+sections[2][left][0][image_css] = ""
+sections[2][left][0][_group] = "image"
+sections[2][right][0][content] = "<h2>Play with responsive design</h2>
+
+<p>This section also displays 2 columns, but when the left block is an image block, then on small screens the order gets inverted to nicely alternate image and content blocks.</p>"
+sections[2][right][0][_group] = "html"
+sections[2][_group] = "section-double"
+sections[3][gridSizeMin] = "grid-cols-1"
+sections[3][gridSizeMax] = "grid-cols-4"
+sections[3][gridFlow] = "grid-flow-row"
+sections[3][placeItems] = "place-items-center"
+sections[3][show_options] = 1
+sections[3][fullScreen] = 1
+sections[3][noMargin] = 0
+sections[3][cssClasses] = "bg-gradient-to-r from-blue-100 via-blue-50 to-blue-100 text-indigo-900 py-6"
+sections[3][content][0][iconName] = "speed"
+sections[3][content][0][title] = "Speed"
+sections[3][content][0][cssClasses] = "bg-gradient-to-b from-blue-100 to-white text-green-500"
+sections[3][content][0][description] = "Smart system design, caching and other optimizations ensure that your projects perform well under pressure."
+sections[3][content][0][_group] = "card"
+sections[3][content][1][iconName] = "thumb_up"
+sections[3][content][1][title] = "Simplicity"
+sections[3][content][1][cssClasses] = "bg-gradient-to-b from-blue-200 to-white"
+sections[3][content][1][description] = "Build intricate websites with little more than HTML, CSS and JavaScript through a beautiful, user-friendly Backend panel."
+sections[3][content][1][_group] = "card"
+sections[3][content][2][iconName] = "timeline"
+sections[3][content][2][title] = "Stability"
+sections[3][content][2][cssClasses] = "bg-gradient-to-b from-blue-300 to-white text-green-500"
+sections[3][content][2][description] = "Careful iterations with backwards-compatibility in focus give you peace of mind that your website will function for years."
+sections[3][content][2][_group] = "card"
+sections[3][content][3][iconName] = "verified_user"
+sections[3][content][3][title] = "Security"
+sections[3][content][3][cssClasses] = "bg-gradient-to-b from-blue-400 to-white"
+sections[3][content][3][description] = "With full source code access and transparency, Winter CMS is carefully monitored. Security issues are promptly addressed."
+sections[3][content][3][_group] = "card"
+sections[3][_group] = "section-grid"
+sections[4][show_options] = 0
+sections[4][fullScreen] = 0
+sections[4][noMargin] = 0
+sections[4][cssClasses] = ""
+sections[4][content][0][content] = "<div class=\" max-w-3xl mx-auto bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative\"><strong class=\"font-bold\">Ho wait!</strong>
+	<br>This theme is built with <a href=\"https://tailwindcss.com/docs/installation#using-tailwind-via-cdn\" rel=\"noopener noreferrer\" target=\"_blank\">TailwindCSS</a> in a CDN linked version for a quick demo purpose.
+	<br><span class=\"text-red-600 font-bold\">DO NOT USE Tailwind this way in production</span>, see TailwindCSS documentation for more information.
+	<br>Tailwind is not required to manage static pages content via blocks.</div>"
+sections[4][content][0][_group] = "html"
+sections[4][_group] = "section"
+==
+<p>Hello World!</p>
+
+<p>I'm the content of the home page.
+	<br>Below this line, all is done with page variables definitions from <a href="https://github.com/wintercms/wn-pages-plugin" rel="noopener noreferrer" target="_blank">Static Pages plugin</a> for Winter CMS.</p>

layouts/default.htm

@@ -0,0 +1,50 @@
+[staticPage]
+==
+<!DOCTYPE html>
+<html lang="{{ this.page.activeLocale ?: 'en' }}">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ this.page.title }}</title>
+
+    <link href="https://unpkg.com/@tailwindcss/[email protected]/dist/typography.min.css" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+    <link rel="stylesheet" href="{{ 'assets/styles.css'|theme }}" />
+</head>
+<body>
+    {#
+     # Reapeater definitions
+     #}
+    {repeater
+        name="sections"
+        groups="themes/blocks/meta/sections.yaml"
+        tab="Blocks"
+        prompt="Add new section"
+        style="accordion"}
+        {variable name="_dummy" type="text"}{/variable}
+    {/repeater}
+
+    {% partial 'header' %}
+
+    <main class="container px-6 mx-auto">
+
+        <div class="py-6 prose max-w-none">
+        {% page %}
+        </div>
+
+        {#
+         # Rendering blocks
+         #}
+        {% for section in sections %}
+            <!-- must reside in partials/blocks/{name_of_group} -->
+            {% partial 'blocks/' ~ section._group data=section %}
+        {% endfor %}
+
+    </main>
+
+    {% partial 'footer' %}
+</body>
+</html>

meta/blocks.yaml

@@ -0,0 +1,107 @@
+
+text:
+    name: Simple text
+    description: simple text without html tags
+    icon: icon-file-text-o
+    fields:
+        content:
+            label: Content
+            span: left
+            type: textarea
+            size: small
+        textSize:
+            label: Text size
+            span: right
+            type: dropdown
+            emptyOption: -- none --
+            options:
+                'text-sm': 'tiny'
+                'text-md': 'small'
+                'text-base': 'normal'
+                'text-lg': 'huge'
+                'text-xl': 'large'
+                'text-2xl': 'larger'
+        textAlign:
+            label: Alignment
+            span: right
+            type: dropdown
+            emptyOption: -- none --
+            options:
+                'text-left': 'left'
+                'text-center': 'center'
+                'text-right': 'right'
+
+html:
+    name: HTML text
+    description: formated HTML
+    icon: icon-file-code-o
+    fields:
+        content:
+            label: HTML content
+            span: full
+            type: richeditor
+            toolbarButtons: ['paragraphFormat','paragraphStyle','quote','bold','italic','underline','strikeThrough','superscript','color','align','formatOL','formatUL','insertLink','insertHR','|','clearFormatting','html']
+
+image:
+    name: Image
+    description: simple image
+    icon: icon-file-image-o
+    fields:
+        image_mode:
+            label: Image from media
+            comment: use media manage resource
+            span: full
+            type: switch
+            default: true
+        image_alt:
+            label: Alt text
+            span: right
+        image:
+            label: Image
+            type: mediafinder
+            mode: image
+            span: left
+            imageWidth: 220
+            imageHeight: 220
+            trigger:
+                action: show
+                field: image_mode
+                condition: checked
+        image_url:
+            label: Image URL
+            comment: 'ex: https://unsplash.com/photos/DGH1u80sZik/download?w=640'
+            type: text
+            span: left
+            trigger:
+                action: show
+                field: image_mode
+                condition: unchecked
+        image_css:
+            label: Css classes
+            comment: classes to add to image
+            span: right
+
+card:
+    name: Card w/ icon
+    description: display dentered cards w/ icon
+    icon: icon-id-card-o
+    fields:
+        iconName:
+            label: Material.io icon name
+            comment: 'https://material.io/resources/icons/'
+            type: text
+            span: left
+        title:
+            label: Title
+            type: text
+            span: right
+        cssClasses:
+            label: CSS classes to apply to card
+            type: textarea
+            span: left
+            size: tiny
+        description:
+            label: Description
+            type: textarea
+            span: right
+            size: tiny