diff --git a/.gitignore b/.gitignore index 725e068..0ccd09d 100644 --- a/.gitignore +++ b/.gitignore @@ -368,4 +368,7 @@ FodyWeavers.xsd *.zip *.rar +*.scss +*.css.map + tutorial.md diff --git a/README.md b/README.md index d46dfa5..97858d1 100644 --- a/README.md +++ b/README.md @@ -47,6 +47,8 @@ you do not need to know any other frameworks. MakiSei does not give any ready la have to modify for your needs what would be difficult when your layout needs to be very different from the provided. +Generated website can be manually published to the traditional hosting services. + ## Framework The data and the templates need to be organized in the two folders: _global and _main. @@ -312,15 +314,28 @@ end }}"> {{ page.title }} - Great Cooking + + + {{- load_page page_file 'stylesheets' ~}} -
Great Cooking
-
- {{- load_page page_file 'main' ~}} -
- +
+
Great Cooking
+
+ {{- load_page page_file 'main' ~}} +
+ +
``` @@ -363,6 +378,9 @@ is the name of the section defined in the page template. ```global``` global object which store information different across the language versions but always the same in all pages of the specific language version. +```load_lang_page_url 'pl'``` call renders the URL leading to the same page in Polish language +whose code is 'pl'. Similar call in line below renders the same URL in English language. + ### Language version variable global data files Number of such files determine number of language versions of the same website and one of them always @@ -442,19 +460,24 @@ Many pages may contain components having the same HTML tag structure and they ca partial templates. Create ```recipes``` folder in ```_main``` folder and create three page templates: ```fizzy.html```, ```sandwich.html``` and ```orange_rice.html```. Fill each of them with HTML code: -```ruby +```html +{{~ if section == 'stylesheets'}} + +{{~ end -}} {{~ if section == 'main' load_partial (global_path + '/_recipe') page uni_page end ~}} ``` Why has every file exactly the same content? It is because the page uses ```_recipe``` HTML partial -template which needs to be placed in ```global``` folder whose path is stored in ```global_path``` +template which needs to be placed in ```_global``` folder whose path is stored in ```global_path``` global variable. Partial is processed and loaded by ```load_partial``` function which passes three parameters: path to the partial template, ```page``` global object and ```uni_page``` global object which unlike ```page``` object, it stores information used in all language versions but still exclusive to currently processed page. Data stored in these objects will be put to the partial. +These pages use additional stylesheet and that's why ```stylesheets``` section is included here. + ### Partial templates Create ```_recipe.html``` partial template in the ```_global``` folder. @@ -463,7 +486,7 @@ in the partial file name to avoid confusion with page templates. Fill this file ```html

{{ model.header }}

-illustration +{{ partial.illustration }}

{{ partial.ingredientsHeader }}

+ + - \ No newline at end of file + diff --git a/demo/output/pl/recipes/sandwich.html b/demo/output/pl/recipes/sandwich.html index dfdc6ba..2797d01 100644 --- a/demo/output/pl/recipes/sandwich.html +++ b/demo/output/pl/recipes/sandwich.html @@ -5,10 +5,17 @@ Kanapka z serem i pomidorami - Great Cooking - + + + + + + -
Great Cooking

Kanapka z serem i pomidorami

-illustration +
+
Great Cooking
+

Kanapka z serem i pomidorami

+ilustracja

Składniki

    @@ -26,6 +33,16 @@

    Kroki

  • Powtórz dwa poprzednie kroki dla pozostałych kanapek.
    • -
Wszelkie Prawa Zastrzeżone
+
+ +
- \ No newline at end of file + diff --git a/demo/output/recipes.html b/demo/output/recipes.html index 1ee478e..fca34a7 100644 --- a/demo/output/recipes.html +++ b/demo/output/recipes.html @@ -5,12 +5,18 @@ Recipes - Great Cooking - + + + + + -
Great Cooking
+
+
Great Cooking
+

Recipes

-

There are most popular recipes available on the website

-
+ +
- \ No newline at end of file + diff --git a/demo/output/recipes/fizzy.html b/demo/output/recipes/fizzy.html index fda5ef5..a6d3ff4 100644 --- a/demo/output/recipes/fizzy.html +++ b/demo/output/recipes/fizzy.html @@ -5,10 +5,17 @@ Fizzy drink - Great Cooking - + + + + + + -
Great Cooking

Fizzy drink from powder

-illustration +
+
Great Cooking
+

Fizzy drink from powder

+illustration

Ingredients

    @@ -25,6 +32,16 @@

    Steps

  • Put the powdered drink to the water and mix well.
    • -
All Rights Reserved
+
+ +
- \ No newline at end of file + diff --git a/demo/output/recipes/orange_rice.html b/demo/output/recipes/orange_rice.html index 8e39c4f..458b7be 100644 --- a/demo/output/recipes/orange_rice.html +++ b/demo/output/recipes/orange_rice.html @@ -5,10 +5,17 @@ Puffed Rice - Great Cooking - + + + + + + -
Great Cooking

Puffed Rice with Orange Syrup

-illustration +
+
Great Cooking
+

Puffed Rice with Orange Syrup

+illustration

Ingredients

    @@ -25,6 +32,16 @@

    Steps

  • Mix the rice with the syrup well.
    • -
All Rights Reserved
+
+ +
- \ No newline at end of file + diff --git a/demo/output/recipes/recipes.css b/demo/output/recipes/recipes.css new file mode 100644 index 0000000..3c024e8 --- /dev/null +++ b/demo/output/recipes/recipes.css @@ -0,0 +1,17 @@ +h2 { + font-size: 1.6em; +} + +ul, ol { + margin-bottom: 0.4em; + margin-left: 2em; + margin-right: 2em; +} +ul li, ol li { + text-align: left; +} + +img { + width: 300px; + height: auto; +}/*# sourceMappingURL=recipes.css.map */ \ No newline at end of file diff --git a/demo/output/recipes/sandwich.html b/demo/output/recipes/sandwich.html index f97e8c3..5f0d61e 100644 --- a/demo/output/recipes/sandwich.html +++ b/demo/output/recipes/sandwich.html @@ -5,10 +5,17 @@ Sandwich with cheese and tomatoes - Great Cooking - + + + + + + -
Great Cooking

Sandwich with cheese and tomatoes

-illustration +
+
Great Cooking
+

Sandwich with cheese and tomatoes

+illustration

Ingredients

    @@ -26,6 +33,16 @@

    Steps

  • Repeat two previous steps for remaining sandwiches.
    • -
All Rights Reserved
+
+ +
- \ No newline at end of file + diff --git a/demo/output/style.css b/demo/output/style.css new file mode 100644 index 0000000..51f7644 --- /dev/null +++ b/demo/output/style.css @@ -0,0 +1,97 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "DynaPuff", cursive; + font-size: 21px; + scroll-behavior: smooth; + color: green; + text-align: center; +} + +body { + background-color: aquamarine; +} + +#main { + margin: 0 auto; + max-width: 1000px; + border-left: 3px double #333; + border-right: 3px double #333; + background-color: aliceblue; +} + +header { + text-transform: uppercase; + letter-spacing: 20px; + font-size: 3rem; + padding: 0.5em; + background-color: #2499ff; + border-bottom: 2px dotted black; + color: snow; +} + +h1 { + font-size: 2em; + padding: 0.5em; +} + +main { + padding: 0 3em; +} + +p { + text-align: justify; + padding: 0.5em 0; +} + +a { + text-decoration: none; + color: royalblue; +} +a:hover { + color: #6d7fb5; +} + +footer { + padding: 0.7em; + background-color: #57b1ff; + border-top: 1px dotted black; + margin-top: 1.2em; +} +footer p { + text-align: center; + font-size: 1.3rem; +} + +.lang-menu ul { + display: flex; + flex-direction: row; + justify-content: center; +} +.lang-menu ul li { + list-style: none; + margin-left: 0.5em; +} +.lang-menu ul li a { + font-size: 1.2rem; +} + +ul.recipe-list > li { + list-style: none; + margin: 0.2em 0; + border: 3px solid blue; + border-radius: 5px; +} +ul.recipe-list > li a { + display: block; + width: auto; + height: -moz-max-content; + height: max-content; + padding: 1em; + font-size: 1.2em; + background-color: antiquewhite; +} +ul.recipe-list > li a:hover { + background-color: #fdf6ee; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file