Add stylesheets and images

Update README.md
ranger-turtle · Apr 12, 2023 · 2ecf2ea · 2ecf2ea
1 parent 8ebf336
commit 2ecf2ea
Show file tree

Hide file tree

Showing 25 changed files with 405 additions and 67 deletions.
diff --git 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
@@ -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 }}">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>{{ page.title }} - Great Cooking</title>
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=DynaPuff:wght@400;600&display=swap" rel="stylesheet">
 	<link rel="stylesheet" href="/style.css">
 	{{- load_page page_file 'stylesheets' ~}}
 </head>
 <body>
-	<header>Great Cooking</header>
-	<main>
-	{{- load_page page_file 'main' ~}}
-	</main>
-	<footer>{{ global.copyright }}</footer>
+	<div id="main">
+			<header>Great Cooking</header>
+			<main>
+			{{- load_page page_file 'main' ~}}
+			</main>
+			<footer>
+				<p style="margin-bottom: 0.4em;">{{ global.copyright }}</p>
+				<div class="lang-menu">
+					<ul>
+						<li><a href="{{ load_lang_page_url 'pl' }}" >PL</a></li>
+						<li><a href="{{ load_lang_page_url 'default' }}" >EN</a></li>
+					</ul>
+				</div>
+			</footer>
+		</div>
 </body>
 </html>
 ```
@@ -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'}}
+	<link rel="stylesheet" href="/recipes/recipes.css">
+{{~ 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
 <h1>{{ model.header }}</h1>
-<img src="img/{{ uni_model.image }}.jpg" alt="illustration" loading="lazy">
+<img src="/img/{{ uni_model.image }}.jpg" alt="{{ partial.illustration }}" loading="lazy">
 <section>
 	<h2>{{ partial.ingredientsHeader }}</h2>
 	<ul class="ingredients">
@@ -593,6 +616,7 @@ Create file ```_recipe.default.json``` in the same folder as ```_partial``` and
 
 ```json
 {
+	"illustration": "ilustracja",
 	"ingredientsHeader": "Ingredients",
 	"stepsHeader": "Steps"
 }
@@ -605,14 +629,14 @@ Create file ```recipes.html``` in ```_main``` folder and fill it with this code:
 ```html
 {{~ if section == 'main'}}
 <h1>{{ page.title }}</h1>
-<p>{{ page.description }}</p>
-<ul>
+<p>{{ page.description }}:</p>
+<ul class="recipe-list">
 	{{ for $link in uni_page.links
 	$recipeData = load_model main_path + '/recipes/' + $link }}
 	<li><a href="recipes/{{ $link }}.html">{{ $recipeData.title }}</a></li>
 	{{ end }}
 </ul>
-{{ end }}
+{{~ end }}
 ```
 
 And create such data files:
@@ -656,6 +680,11 @@ All data files with Polish language content are stored in ```*.pl.json``` files.
 They differ from ```*.default.json``` files only with language of the values and they are stored in the
 same folder. You can copy them from demo which you can download from repository.
 
+### CSS stylesheets and scripts
+
+MakiSei is designed to handle HTML code only and therefore, you need to put stylesheets and scripts
+manually to the output. Fortunately, you can copy stylesheets from demo.
+
 ### Generating the website
 
 Now the website is ready for generation! Only things you need to do is to launch MakiSei, click Search

diff --git a/demo/_global/_recipe.default.json b/demo/_global/_recipe.default.json
@@ -1,4 +1,5 @@
 {
+	"illustration": "illustration",
 	"ingredientsHeader": "Ingredients",
 	"stepsHeader": "Steps"
 }
diff --git a/demo/_global/_recipe.html b/demo/_global/_recipe.html
@@ -1,5 +1,5 @@
 <h1>{{ model.header }}</h1>
-<img src="img/{{ uni_model.image }}.jpg" alt="illustration" loading="lazy">
+<img src="/img/{{ uni_model.image }}.jpg" alt="{{ partial.illustration }}" loading="lazy">
 <section>
 	<h2>{{ partial.ingredientsHeader }}</h2>
 	<ul class="ingredients">

diff --git a/demo/_global/_recipe.pl.json b/demo/_global/_recipe.pl.json
@@ -1,4 +1,5 @@
 {
+	"illustration": "ilustracja",
 	"ingredientsHeader": "Składniki",
 	"stepsHeader": "Kroki"
 }
diff --git a/demo/_main/recipes.html b/demo/_main/recipes.html
@@ -1,10 +1,10 @@
 {{~ if section == 'main'}}
 <h1>{{ page.title }}</h1>
-<p>{{ page.description }}</p>
-<ul>
+<p>{{ page.description }}:</p>
+<ul class="recipe-list">
 	{{ for $link in uni_page.links
 	$recipeData = load_model main_path + '/recipes/' + $link }}
 	<li><a href="recipes/{{ $link }}.html">{{ $recipeData.title }}</a></li>
 	{{ end }}
 </ul>
-{{ end }}
+{{~ end }}
diff --git a/demo/_main/recipes/fizzy.html b/demo/_main/recipes/fizzy.html
@@ -1,3 +1,6 @@
+{{~ if section == 'stylesheets'}}
+	<link rel="stylesheet" href="/recipes/recipes.css">
+{{~ end -}}
 {{~ if section == 'main'
 load_partial (global_path + '/_recipe') page uni_page
 end ~}}
diff --git a/demo/_main/recipes/orange_rice.html b/demo/_main/recipes/orange_rice.html
@@ -1,3 +1,6 @@
+{{~ if section == 'stylesheets'}}
+	<link rel="stylesheet" href="/recipes/recipes.css">
+{{~ end -}}
 {{~ if section == 'main'
 load_partial (global_path + '/_recipe') page uni_page
 end ~}}
diff --git a/demo/_main/recipes/sandwich.html b/demo/_main/recipes/sandwich.html
@@ -1,3 +1,6 @@
+{{~ if section == 'stylesheets'}}
+	<link rel="stylesheet" href="/recipes/recipes.css">
+{{~ end -}}
 {{~ if section == 'main'
 load_partial (global_path + '/_recipe') page uni_page
 end ~}}
diff --git a/demo/_skeleton.html b/demo/_skeleton.html
@@ -9,12 +9,27 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>{{ page.title }} - Great Cooking</title>
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=DynaPuff:wght@400;600&display=swap" rel="stylesheet">
 	<link rel="stylesheet" href="/style.css">
 	{{- load_page page_file 'stylesheets' ~}}
 </head>
 <body>
-	<header>Great Cooking</header>
-	{{- load_page page_file 'main' ~}}
-	<footer>{{ global.copyright }}</footer>
+	<div id="main">
+			<header>Great Cooking</header>
+			<main>
+			{{- load_page page_file 'main' ~}}
+			</main>
+			<footer>
+				<p style="margin-bottom: 0.4em;">{{ global.copyright }}</p>
+				<div class="lang-menu">
+					<ul>
+						<li><a href="{{ load_lang_page_url 'pl' }}" >PL</a></li>
+						<li><a href="{{ load_lang_page_url 'default' }}" >EN</a></li>
+					</ul>
+				</div>
+			</footer>
+		</div>
 </body>
-</html>
+</html>
diff --git a/demo/output/img/fizzy.jpg b/demo/output/img/fizzy.jpg
diff --git a/demo/output/img/rice.jpg b/demo/output/img/rice.jpg
diff --git a/demo/output/img/sandwich.jpg b/demo/output/img/sandwich.jpg
diff --git a/demo/output/index.html b/demo/output/index.html
@@ -5,11 +5,26 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Home Page - Great Cooking</title>
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=DynaPuff:wght@400;600&display=swap" rel="stylesheet">
 	<link rel="stylesheet" href="/style.css"></head>
 <body>
-	<header>Great Cooking</header>	<h1>Welcome to Great Cooking!</h1>
+	<div id="main">
+			<header>Great Cooking</header>
+			<main>	<h1>Welcome to Great Cooking!</h1>
 	<p>Here you find some quick'n'easy dish recipes!</p>
 	<p>For most popular recipes,  <a href="recipes.html">go here</a></p>
-	<footer>All Rights Reserved</footer>
+			</main>
+			<footer>
+				<p style="margin-bottom: 0.4em;">All Rights Reserved</p>
+				<div class="lang-menu">
+					<ul>
+						<li><a href="/pl\index.html" >PL</a></li>
+						<li><a href="\index.html" >EN</a></li>
+					</ul>
+				</div>
+			</footer>
+		</div>
 </body>
-</html>
+</html>
diff --git a/demo/output/pl/index.html b/demo/output/pl/index.html
@@ -5,11 +5,26 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Strona Główna - Great Cooking</title>
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=DynaPuff:wght@400;600&display=swap" rel="stylesheet">
 	<link rel="stylesheet" href="/style.css"></head>
 <body>
-	<header>Great Cooking</header>	<h1>Witajcie w Great Cooking!</h1>
+	<div id="main">
+			<header>Great Cooking</header>
+			<main>	<h1>Witajcie w Great Cooking!</h1>
 	<p>Tutaj znajdziesz przepisy na łatwe i szybkie rzeczy!</p>
 	<p>Aby zobaczyć najpopularniejsze przepisy,  <a href="recipes.html">kliknij tutaj</a></p>
-	<footer>Wszelkie Prawa Zastrzeżone</footer>
+			</main>
+			<footer>
+				<p style="margin-bottom: 0.4em;">Wszelkie Prawa Zastrzeżone</p>
+				<div class="lang-menu">
+					<ul>
+						<li><a href="/pl\index.html" >PL</a></li>
+						<li><a href="\index.html" >EN</a></li>
+					</ul>
+				</div>
+			</footer>
+		</div>
 </body>
-</html>
+</html>
diff --git a/demo/output/pl/recipes.html b/demo/output/pl/recipes.html
@@ -5,12 +5,18 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Przepisy - Great Cooking</title>
-	<link rel="stylesheet" href="/style.css"></head>
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=DynaPuff:wght@400;600&display=swap" rel="stylesheet">
+	<link rel="stylesheet" href="/style.css">
+</head>
 <body>
-	<header>Great Cooking</header>
+	<div id="main">
+			<header>Great Cooking</header>
+			<main>
 <h1>Przepisy</h1>
-<p>Tu są najpopularniejsze przepisy na witrynie</p>
-<ul>
+<p>Tu są najpopularniejsze przepisy na witrynie:</p>
+<ul class="recipe-list">
 
 		<li><a href="recipes/fizzy.html">Oranżadka</a></li>
 
@@ -19,6 +25,17 @@ <h1>Przepisy</h1>
 		<li><a href="recipes/orange_rice.html">Ryż preparowany</a></li>
 
 </ul>
-	<footer>Wszelkie Prawa Zastrzeżone</footer>
+
+			</main>
+			<footer>
+				<p style="margin-bottom: 0.4em;">Wszelkie Prawa Zastrzeżone</p>
+				<div class="lang-menu">
+					<ul>
+						<li><a href="/pl\recipes.html" >PL</a></li>
+						<li><a href="\recipes.html" >EN</a></li>
+					</ul>
+				</div>
+			</footer>
+		</div>
 </body>
-</html>
+</html>
diff --git a/demo/output/pl/recipes/fizzy.html b/demo/output/pl/recipes/fizzy.html
@@ -5,10 +5,17 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Oranżadka - Great Cooking</title>
-	<link rel="stylesheet" href="/style.css"></head>
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=DynaPuff:wght@400;600&display=swap" rel="stylesheet">
+	<link rel="stylesheet" href="/style.css">
+	<link rel="stylesheet" href="/recipes/recipes.css">
+</head>
 <body>
-	<header>Great Cooking</header><h1>Oranżadka z proszku</h1>
-<img src="img/fizzy.jpg" alt="illustration" loading="lazy">
+	<div id="main">
+			<header>Great Cooking</header>
+			<main><h1>Oranżadka z proszku</h1>
+<img src="/img/fizzy.jpg" alt="ilustracja" loading="lazy">
 <section>
 	<h2>Składniki</h2>
 	<ul class="ingredients">
@@ -25,6 +32,16 @@ <h2>Kroki</h2>
 				<li>Wsyp oranżadę w proszku do szklanki.</li>
 
 	</ol>
-</section>	<footer>Wszelkie Prawa Zastrzeżone</footer>
+</section>			</main>
+			<footer>
+				<p style="margin-bottom: 0.4em;">Wszelkie Prawa Zastrzeżone</p>
+				<div class="lang-menu">
+					<ul>
+						<li><a href="/pl\recipes\fizzy.html" >PL</a></li>
+						<li><a href="\recipes\fizzy.html" >EN</a></li>
+					</ul>
+				</div>
+			</footer>
+		</div>
 </body>
-</html>
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -368,4 +368,7 @@ FodyWeavers.xsd @@
     *.zip
     *.rar
+    *.scss
+    *.css.map
     tutorial.md