Skip to content

Commit 2337804

Browse files
beeezalbeeezal
committed
refact: use the base layout as template for every page
rename alias of base layout in config file to be correctly used. And introduced better bordering of the content using CSS
1 parent 3989a6e commit 2337804

File tree

5 files changed

+50
-42
lines changed

5 files changed

+50
-42
lines changed

‎.eleventy.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function(eleventyConfig) {
77
eleventyConfig.addPassthroughCopy('src/assets');
88

99
// Layouts alias
10-
eleventyConfig.addLayoutAlias('base', 'base.html');
10+
eleventyConfig.addLayoutAlias('base', 'layouts/base.html');
1111

1212
// Add Markdown-it plugins
1313
eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(markdownItSup));

‎src/_includes/layouts/base.html‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,20 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title> {{ title }} </title>
7+
8+
{% block style %}
9+
<link rel="stylesheet" type="text/css" href="{{ '/assets/cssStyle/generic.css' | url }}">
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" defer></script>
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js" defer></script>
13+
{% endblock %}
14+
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
716
</head>
17+
818
<body>
9-
{% block content %}{% endblock %}
19+
{% block content %}
20+
{{ content | safe }}
21+
{% endblock %}
1022
</body>
1123
</html>

‎src/assets/cssStyle/generic.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ html{
44
}
55

66
body {
7-
margin: 0;
7+
margin: 0 auto;
88
padding: 0 3rem;
9-
max-width: 1400px;
9+
width: 100%;
10+
box-sizing: border-box;
1011
}
1112

1213
h1 {

‎src/chapter0/index.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
---
2+
tags: [main, intro]
3+
title: Introduction
4+
layout: 'base'
5+
---
6+
17
# Chapter 0
28

39
# Getting Started

‎src/chapter2/index.html‎

Lines changed: 27 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,30 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Random Walker</title>
1+
---
2+
tags: [main, random-walker]
3+
title: Random Walker
4+
layout: 'base'
5+
---
76

8-
<link rel="stylesheet" type="text/css" href="{{ '/assets/cssStyle/generic.css' | url }}">
9-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
10-
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" defer></script>
11-
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js" defer></script>
12-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
13-
</head>
14-
<body style="margin:10px">
15-
<h1>Chapter 2</h1>
16-
<h1>Random Walker</h1>
17-
<hr>
18-
19-
<!-- Shared utility function for pausing and resuming any sketch -->
20-
<script>
21-
let pauseButtonToggle = function (button, sketch) {
22-
if (sketch.isLooping()) {
23-
button.innerText = "Play";
24-
sketch.noLoop();
25-
} else {
26-
button.innerText = "Pause";
27-
sketch.loop();
28-
}
7+
<h1>Chapter 2</h1>
8+
<h1>Random Walker</h1>
9+
<hr>
10+
<!-- Shared utility function for pausing and resuming any sketch -->
11+
<script>
12+
let pauseButtonToggle = function (button, sketch) {
13+
if (sketch.isLooping()) {
14+
button.innerText = "Play";
15+
sketch.noLoop();
16+
} else {
17+
button.innerText = "Pause";
18+
sketch.loop();
2919
}
30-
</script>
31-
32-
{% for section in collections.chap2 %}
33-
{{ section.templateContent | safe }}
34-
{% endfor %}
20+
}
21+
</script>
22+
23+
{% for section in collections.chap2 %}
24+
{{ section.templateContent | safe }}
25+
{% endfor %}
3526

36-
<!-- Auto-load section scripts -->
37-
{% for section in collections.chap2 %}
38-
<script src="{{ section.data.script | url }}"></script>
39-
{% endfor %}
40-
</body>
41-
</html>
27+
<!-- Auto-load section scripts -->
28+
{% for section in collections.chap2 %}
29+
<script src="{{ section.data.script | url }}"></script>
30+
{% endfor %}

0 commit comments

Comments
 (0)