Static Site Generator

1with open('template/page.html', 'r') as template:
2    templatedata = template.read()
3
4with open('content/content.txt', 'r') as content:
5    contentdata = content.read()
6
7pagedata = templatedata.replace('!PlaceholderContent!', contentdata)
8
9with open('www/content.html', 'w') as output:
10        output.write(pagedata)
11import os
12

1with open('template/page.html', 'r') as template:
2    templatedata = template.read()
3
4with open('content/content.txt', 'r') as content:
5    contentdata = content.read()
6
7pagedata = templatedata.replace('!PlaceholderContent!', contentdata)
8
9with open('www/content.html', 'w') as output:
10        output.write(pagedata)
11import os
12path_to_template_dir = 'template/'
13template_files = os.listdir(path_to_template_dir)
14print(template_files)   
15# Outputs : ['page.html']
16

1with open('template/page.html', 'r') as template:
2    templatedata = template.read()
3
4with open('content/content.txt', 'r') as content:
5    contentdata = content.read()
6
7pagedata = templatedata.replace('!PlaceholderContent!', contentdata)
8
9with open('www/content.html', 'w') as output:
10        output.write(pagedata)
11import os
12path_to_template_dir = 'template/'
13template_files = os.listdir(path_to_template_dir)
14print(template_files)   
15# Outputs : ['page.html']
16path_to_output_dir = 'www/'
17try : 
18    os.mkdir(path_to_output_dir)
19except FileExistsError as e:
20    print('Directory exists:', path_to_output_dir)
21

1with open('template/page.html', 'r') as template:
2    templatedata = template.read()
3
4with open('content/content.txt', 'r') as content:
5    contentdata = content.read()
6
7pagedata = templatedata.replace('!PlaceholderContent!', contentdata)
8
9with open('www/content.html', 'w') as output:
10        output.write(pagedata)
11import os
12path_to_template_dir = 'template/'
13template_files = os.listdir(path_to_template_dir)
14print(template_files)   
15# Outputs : ['page.html']
16path_to_output_dir = 'www/'
17try : 
18    os.mkdir(path_to_output_dir)
19except FileExistsError as e:
20    print('Directory exists:', path_to_output_dir)
21path_to_output_file = path_to_output_dir + 'content.html'
22
23with open(path_to_output_file, 'w') as output:
24    output.write('Content')
25

1with open('template/page.html', 'r') as template:
2    templatedata = template.read()
3
4with open('content/content.txt', 'r') as content:
5    contentdata = content.read()
6
7pagedata = templatedata.replace('!PlaceholderContent!', contentdata)
8
9with open('www/content.html', 'w') as output:
10        output.write(pagedata)
11import os
12path_to_template_dir = 'template/'
13template_files = os.listdir(path_to_template_dir)
14print(template_files)   
15# Outputs : ['page.html']
16path_to_output_dir = 'www/'
17try : 
18    os.mkdir(path_to_output_dir)
19except FileExistsError as e:
20    print('Directory exists:', path_to_output_dir)
21path_to_output_file = path_to_output_dir + 'content.html'
22
23with open(path_to_output_file, 'w') as output:
24    output.write('Content')
25for template_file in template_files:
26    path_to_template_file = path_to_template_dir + template_file
27    with open(path_to_template_file, 'r') as template:
28        print(template.read())
29

1`
2/*======================CONTENT========================*/
3
4.content {
5  padding: 110px 30px;
6  overflow: hidden;
7}
8
9.content__inner {
10  display: grid;
11  grid-template-columns: 1fr 2fr;
12  column-gap: 50px;
13  margin: 80px 0 0;
14  color: var(--blue-two);
15}
16
17.content__title {
18  font-size: 59px;
19  font-weight: 500;
20  color: var(--blue-two);
21  text-align: center;
22}
23
24.card {
25  font-size: 23px;
26  line-height: 1.5;
27  text-align: left;
28  padding: 22.5px;
29}
30
31.card:first-child {
32  background-color: var(--white-two);
33  border-radius: 5px;
34}
35
36.card:first-child .card__title {
37  color: var(--blue-one);
38}
39
40.card__subtitle {
41  font-weight: 300;
42}
43
44.content__img {
45  width: 130%;
46  border-radius: 5px;
47  margin: auto 0;
48}
49
50
51/*======================TOOLS========================*/
52
53.tools {
54  background-color: var(--white-two);
55  padding: 110px;
56  border: 1px solid red;
57}
58
59.container {
60  border: 1px solid blue;
61}
62
63.tools__inner {
64  display: grid;
65  grid-template-columns: 2fr 1fr;
66  column-gap: 50px;
67  margin: 80px 0 0;
68  border: 1px solid green;
69}
70
71.tools__img {
72  width: 100%;
73}
74
75.tools__text {
76  text-align: left;
77}
78
79.tools__title {
80  font-size: 49px;
81  color: #e56134;
82  margin: 0 0 16px;
83}
84
85.tools__subtitle {
86  font-weight: 300;
87  font-size: 23px;
88  line-height: 1.5;
89  margin: 0 0 32px;
90}
91
92.tools__logos {
93  margin: 10px 0 0;
94}
95
96``============CONTENT SECTION===============
97<section class="content">
98  <div class="container">
99    <div class="content__title">Content management <br> for the whole team</div>
100    <div class="content__inner">
101
102      <div class="content-cards">`enter code here`
103        <div class="card">
104          <div class="card__title">Collaborate</div>
105          <div class="card__subtitle">Invite your client or team to create and edit content. Set them as Admin, Publisher, or Writer.
106          </div>
107        </div>
108        <div class="card">
109          <div class="card__title">Preview before you publish</div>
110          <div class="card__subtitle">Preview changes before they go live. Then publish with one click whenever you’re ready.
111          </div>
112        </div>
113        <div class="card">
114          <div class="card__title">Smart text editor</div>
115          <div class="card__subtitle">Choose between a visual editor or just plain Markdown. Drag and drop images or even entire text files.
116          </div>
117        </div>
118        <div class="card">
119          <div class="card__title">Powerful content</div>
120          <div class="card__subtitle">Customize your site with document collections, advanced metadata, and custom permalinks.
121          </div>
122        </div>
123      </div>
124
125      <img src="img/content__pic1.jpg" alt="" class="content__img">
126
127    </div>
128  </div>
129</section>
130
131============TOOLS SECTION===============
132<section class="tools">
133  <div class="container">
134    <div class="content__title">Develop with tools you <br> already love</div>
135
136    <div class="tools__inner">
137      <img src="img/tools_pic1.jpg" alt="tools1" class="tools__img">
138      <div class="tools__text">
139        <div class="tools__title">Built on open source</div>
140        <div class="tools__subtitle">Siteleaf is compatible with Jekyll, the static site generator for over half a million websites running on GitHub Pages.
141        </div>
142        <div class="tools__subtitle">
143          Benefit from a large open source community. Use any existing Jekyll theme, or write your own using Liquid, Sass, and CoffeeScript. Develop locally and even offline.
144        </div>
145        <img src="img/tools__logos.svg" alt="logos" class="tools__logos">
146      </div>
147    </div>
148  </div>
149</section>// index.html
150<div class="img-container">
151    <img src="your-image.png"/>
152</div>
153

1`
2/*======================CONTENT========================*/
3
4.content {
5  padding: 110px 30px;
6  overflow: hidden;
7}
8
9.content__inner {
10  display: grid;
11  grid-template-columns: 1fr 2fr;
12  column-gap: 50px;
13  margin: 80px 0 0;
14  color: var(--blue-two);
15}
16
17.content__title {
18  font-size: 59px;
19  font-weight: 500;
20  color: var(--blue-two);
21  text-align: center;
22}
23
24.card {
25  font-size: 23px;
26  line-height: 1.5;
27  text-align: left;
28  padding: 22.5px;
29}
30
31.card:first-child {
32  background-color: var(--white-two);
33  border-radius: 5px;
34}
35
36.card:first-child .card__title {
37  color: var(--blue-one);
38}
39
40.card__subtitle {
41  font-weight: 300;
42}
43
44.content__img {
45  width: 130%;
46  border-radius: 5px;
47  margin: auto 0;
48}
49
50
51/*======================TOOLS========================*/
52
53.tools {
54  background-color: var(--white-two);
55  padding: 110px;
56  border: 1px solid red;
57}
58
59.container {
60  border: 1px solid blue;
61}
62
63.tools__inner {
64  display: grid;
65  grid-template-columns: 2fr 1fr;
66  column-gap: 50px;
67  margin: 80px 0 0;
68  border: 1px solid green;
69}
70
71.tools__img {
72  width: 100%;
73}
74
75.tools__text {
76  text-align: left;
77}
78
79.tools__title {
80  font-size: 49px;
81  color: #e56134;
82  margin: 0 0 16px;
83}
84
85.tools__subtitle {
86  font-weight: 300;
87  font-size: 23px;
88  line-height: 1.5;
89  margin: 0 0 32px;
90}
91
92.tools__logos {
93  margin: 10px 0 0;
94}
95
96``============CONTENT SECTION===============
97<section class="content">
98  <div class="container">
99    <div class="content__title">Content management <br> for the whole team</div>
100    <div class="content__inner">
101
102      <div class="content-cards">`enter code here`
103        <div class="card">
104          <div class="card__title">Collaborate</div>
105          <div class="card__subtitle">Invite your client or team to create and edit content. Set them as Admin, Publisher, or Writer.
106          </div>
107        </div>
108        <div class="card">
109          <div class="card__title">Preview before you publish</div>
110          <div class="card__subtitle">Preview changes before they go live. Then publish with one click whenever you’re ready.
111          </div>
112        </div>
113        <div class="card">
114          <div class="card__title">Smart text editor</div>
115          <div class="card__subtitle">Choose between a visual editor or just plain Markdown. Drag and drop images or even entire text files.
116          </div>
117        </div>
118        <div class="card">
119          <div class="card__title">Powerful content</div>
120          <div class="card__subtitle">Customize your site with document collections, advanced metadata, and custom permalinks.
121          </div>
122        </div>
123      </div>
124
125      <img src="img/content__pic1.jpg" alt="" class="content__img">
126
127    </div>
128  </div>
129</section>
130
131============TOOLS SECTION===============
132<section class="tools">
133  <div class="container">
134    <div class="content__title">Develop with tools you <br> already love</div>
135
136    <div class="tools__inner">
137      <img src="img/tools_pic1.jpg" alt="tools1" class="tools__img">
138      <div class="tools__text">
139        <div class="tools__title">Built on open source</div>
140        <div class="tools__subtitle">Siteleaf is compatible with Jekyll, the static site generator for over half a million websites running on GitHub Pages.
141        </div>
142        <div class="tools__subtitle">
143          Benefit from a large open source community. Use any existing Jekyll theme, or write your own using Liquid, Sass, and CoffeeScript. Develop locally and even offline.
144        </div>
145        <img src="img/tools__logos.svg" alt="logos" class="tools__logos">
146      </div>
147    </div>
148  </div>
149</section>// index.html
150<div class="img-container">
151    <img src="your-image.png"/>
152</div>
153// index.css
154.img-container {
155    display: flex;
156    justify-content: end;
157}
158
159

1<section id="tags-number-of-posts">
2  {% for tag2, posts2 in collections | dictsort %}
3  {% set tag2Url %}/tags/{{ tag2 | slug }}/{% endset %}
4   <a href="{{ tag2Url | url }}">{{ tag2 }} ({{ posts2 | length }})</a><br/>
5  {% endfor %}
6</section>
7// .eleventy.js
8module.exports = function (eleventyConfig) {
9  // ...
10
11  // addCollection receives the new collection's name and a
12  // callback that can return any arbitrary data (since v0.5.3)
13  eleventyConfig.addCollection('bySize', (collectionApi) => {
14    // see https://www.11ty.dev/docs/collections/#getall()
15    const allPosts = collectionApi.getAll()
16
17    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
18    const countPostsByTag = new Map()
19    allPosts.forEach((post) => {
20      // short circuit eval sets tags to an empty array if there are no tags set
21      const tags = post.data.tags || []
22      tags.forEach((tag) => {
23        const count = countPostsByTag.get(tag) || 0
24        countPostsByTag.set(tag, count + 1)
25      })
26    })
27
28    // Maps are iterators so we spread it into an array to sort
29    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/entries
30    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
31    const sortedArray = [...countPostsByTag].sort((a, b) => b[1] - a[1])
32    
33    // this function returns an array of [tag, count] pairs sorted by count
34    // [['bonfires', 4], ['books', 3], ['boats', 2], ...]
35    return sortedArray
36  })
37  })
38
39  return {
40    // ...
41  }
42}
43

1<section id="tags-number-of-posts">
2  {% for tag2, posts2 in collections | dictsort %}
3  {% set tag2Url %}/tags/{{ tag2 | slug }}/{% endset %}
4   <a href="{{ tag2Url | url }}">{{ tag2 }} ({{ posts2 | length }})</a><br/>
5  {% endfor %}
6</section>
7// .eleventy.js
8module.exports = function (eleventyConfig) {
9  // ...
10
11  // addCollection receives the new collection's name and a
12  // callback that can return any arbitrary data (since v0.5.3)
13  eleventyConfig.addCollection('bySize', (collectionApi) => {
14    // see https://www.11ty.dev/docs/collections/#getall()
15    const allPosts = collectionApi.getAll()
16
17    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
18    const countPostsByTag = new Map()
19    allPosts.forEach((post) => {
20      // short circuit eval sets tags to an empty array if there are no tags set
21      const tags = post.data.tags || []
22      tags.forEach((tag) => {
23        const count = countPostsByTag.get(tag) || 0
24        countPostsByTag.set(tag, count + 1)
25      })
26    })
27
28    // Maps are iterators so we spread it into an array to sort
29    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/entries
30    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
31    const sortedArray = [...countPostsByTag].sort((a, b) => b[1] - a[1])
32    
33    // this function returns an array of [tag, count] pairs sorted by count
34    // [['bonfires', 4], ['books', 3], ['boats', 2], ...]
35    return sortedArray
36  })
37  })
38
39  return {
40    // ...
41  }
42}
43<section id="tags-number-of-posts">
44    {# we can still destructure the tag name and count even though it's an array #}
45    {% for tag, count in collections.bySize %}
46        {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
47        <a href="{{ tagUrl | url }}">{{ tag }} ({{ count }})</a><br/>
48    {% endfor %}
49</section>
50

1<!DOCTYPE html>
2<html lang="en-NL">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Example</title>
7  <style type="text/css">
8    body {
9    font-family: helvetica;
10    padding: 20px;
11    font-size:11pt;
12}
13
14header {
15    max-width: 800px;
16}
17
18main {
19    max-width: 800px;
20}
21
22section {
23    padding-left: 15px;
24    border-left: 1px solid rgb(223, 223, 223);
25    border-radius: 5px;
26}
27
28footer {
29    max-width: 800px;
30}
31
32
33div.gallery {
34  padding: 0px;
35}
36
37div.gallery img {
38  width: 98%;
39  height: auto;
40  display: block;
41  margin-left: auto;
42  margin-right: auto;
43}
44
45div.desc {
46  padding: 2px;
47  padding-bottom: 5px;
48  text-align: center;
49  color: gray;
50  font-size: 85%;
51}
52
53* {
54  box-sizing: border-box;
55}
56
57.responsivefour {
58  padding: 0 6px;
59  float: left;
60  width: 24.99999%;
61}
62
63.responsivethree {
64  padding: 0 6px;
65  float: left;
66  width: 33.32%;
67}
68
69.responsivetwo {
70  padding: 0 6px;
71  float: left;
72  width: 49.9988%;
73}
74
75@media only screen and (max-width: 700px) {
76  .responsivefour {
77    width: 49.99999%;
78    margin: 6px 0;
79  }
80}
81
82@media only screen and (max-width: 500px) {
83  .responsivefour {
84    width: 100%;
85  }
86  .responsivethree {
87    width: 100%;
88  }
89  .responsivetwo {
90    width: 100%;
91  }
92}
93
94.clearfix:after {
95  content: "";
96  display: table;
97  clear: both;
98}
99  </style>
100</head>
101<body>
102<!-- #################################################################### -->
103<header  id="top">
104    <h1>Header</h1>
105</header>
106<!-- #################################################################### -->
107<main>
108<article id="test">
109    <h2>bla</h2>
110    <section>
111        <p>
112            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper. 
113        </p>
114        <div class="responsivethree">
115            <div class="gallery">
116                <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 1">
117          <div class="desc">--- short description ---</div>
118            </div>
119        </div>
120        <div class="responsivethree">
121            <div class="gallery">
122            <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 2" >
123              <div class="desc">--- Very, utterly, super uber mega long description, don't you think, geeeeeez! ---</div>
124            </div>
125        </div>
126        <div class="responsivethree">
127            <div class="gallery">
128            <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 3" >
129              <div class="desc">--- stuff ---</div>
130            </div>
131      </div>
132        <p>
133            <b>This is my problem...</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
134        </p>
135    </section>
136</article>
137</main>
138<!-- #################################################################### -->
139<footer>
140    <p style="text-align: center;">footer tooter</p>
141</footer>
142<!-- #################################################################### -->
143</body>
144</html><!DOCTYPE html>
145<html lang="en-NL">
146<head>
147  <meta charset="UTF-8">
148  <meta name="viewport" content="width=device-width, initial-scale=1.0">
149  <title>Example</title>
150  <style type="text/css">
151    body {
152    font-family: helvetica;
153    padding: 20px;
154    font-size:11pt;
155}
156
157header {
158    max-width: 800px;
159}
160
161main {
162    max-width: 800px;
163}
164
165section {
166    padding-left: 15px;
167    border-left: 1px solid rgb(223, 223, 223);
168    border-radius: 5px;
169}
170
171footer {
172    max-width: 800px;
173}
174
175
176div.gallery {
177  padding: 0px;
178}
179
180div.gallery img {
181  width: 98%;
182  height: auto;
183  display: block;
184  margin-left: auto;
185  margin-right: auto;
186}
187
188div.desc {
189  padding: 2px;
190  padding-bottom: 5px;
191  text-align: center;
192  color: gray;
193  font-size: 85%;
194}
195
196* {
197  box-sizing: border-box;
198}
199
200.responsivefour {
201  padding: 0 6px;
202  float: left;
203  width: 24.99999%;
204}
205
206.responsivethree {
207  padding: 0 6px;
208  float: left;
209  width: 33.32%;
210}
211
212.responsivetwo {
213  padding: 0 6px;
214  float: left;
215  width: 49.9988%;
216}
217
218@media only screen and (max-width: 700px) {
219  .responsivefour {
220    width: 49.99999%;
221    margin: 6px 0;
222  }
223}
224
225@media only screen and (max-width: 500px) {
226  .responsivefour {
227    width: 100%;
228  }
229  .responsivethree {
230    width: 100%;
231  }
232  .responsivetwo {
233    width: 100%;
234  }
235}
236
237.clearfix:after {
238  content: "";
239  display: table;
240  clear: both;
241}
242
243.clear {
244  clear: both;
245}
246  </style>
247</head>
248<body>
249<!-- #################################################################### -->
250<header  id="top">
251    <h1>Header</h1>
252</header>
253<!-- #################################################################### -->
254<main>
255<article id="test">
256    <h2>bla</h2>
257    <section>
258        <p>
259            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper. 
260        </p>
261        <div class="responsivethree">
262            <div class="gallery">
263                <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 1">
264          <div class="desc">--- short description ---</div>
265            </div>
266        </div>
267        <div class="responsivethree">
268            <div class="gallery">
269            <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 2" >
270              <div class="desc">--- Very, utterly, super uber mega long description, don't you think, geeeeeez! ---</div>
271            </div>
272        </div>
273        <div class="responsivethree">
274            <div class="gallery">
275            <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 3" >
276              <div class="desc">--- stuff ---</div>
277            </div>
278      </div>
279        <p class="clear">
280            <b>This is my problem...</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
281        </p>
282    </section>
283</article>
284</main>
285<!-- #################################################################### -->
286<footer>
287    <p style="text-align: center;">footer tooter</p>
288</footer>
289<!-- #################################################################### -->
290</body>
291</html>

1  <div class="col-md-4">
2        {{ range .left_side }}
3        <div class="mb-40 text-center text-md-left">
4          <i class="d-inlin-block h2 mb-10 {{ .icon }}"></i>
5          <h4 class="font-weight-bold mb-2">{{ .title | markdownify }}</h4>
6          <p>{{ .content | markdownify }}</p>
7        </div>
8        {{ end }}
9.bi {
10  font-size: 50px; /* This is only added to show the centering */
11}
12
13#testOne {
14  font-size: 30px;
15  display: flex;
16  align-items: center;
17}
18
19#testTwo {
20  font-size: 50px;
21  display: flex;
22  align-items: center;
23}

1  <div class="col-md-4">
2        {{ range .left_side }}
3        <div class="mb-40 text-center text-md-left">
4          <i class="d-inlin-block h2 mb-10 {{ .icon }}"></i>
5          <h4 class="font-weight-bold mb-2">{{ .title | markdownify }}</h4>
6          <p>{{ .content | markdownify }}</p>
7        </div>
8        {{ end }}
9.bi {
10  font-size: 50px; /* This is only added to show the centering */
11}
12
13#testOne {
14  font-size: 30px;
15  display: flex;
16  align-items: center;
17}
18
19#testTwo {
20  font-size: 50px;
21  display: flex;
22  align-items: center;
23}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
24
25<h4 id="testOne">
26  <i class="bi bi-alarm"></i>
27  Test
28</h4>
29
30<h4 id="testTwo">
31  <i class="bi bi-alarm"></i>
32  Test
33</h4>

1if (php_sapi_name() === "cli") {
2    foreach ($router->get() as $route) {
3        $out = ob_get_contents();
4        call_user_func_array($route['function'], array());
5        ob_end_clean();
6        file_put_contents("./temp/" . $route['expression'] . ".html", $out);
7    }
8}
9if (php_sapi_name() === "cli") {
10    // Start output buffering here
11    ob_start();
12    foreach ($router->get() as $route) {
13        call_user_func_array($route['function'], array());
14        // get output of `$route['function']` to $out variable
15        $out = ob_get_contents();
16        // clean buffer
17        ob_clean();
18
19        file_put_contents("./temp/" . $route['expression'] . ".html", $out);
20    }
21    // stop output buffering
22    ob_end_clean();
23}
24