Skip to content

Commit 171b4e1

Browse files
mathertelmathertel
committed
css updates, refactoring
1 parent 9a1077a commit 171b4e1

38 files changed

+505
-996
lines changed

‎.eleventy.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,30 @@ module.exports = function(eleventyConfig) {
6464
"css" // css is not yet a recognized template extension in Eleventy
6565
]);
6666

67+
68+
// Modify all URLs pointing to .md files in all .htm output in your project
69+
eleventyConfig.htmlTransformer.addUrlTransform(
70+
"htm",
71+
72+
/**
73+
* transform internal links to markdown fils to the final url using the htm format.
74+
* @this {object}
75+
* @param {string} url given url in the document
76+
*/
77+
(url) => {
78+
let lUrl = url.toLowerCase();
79+
if ((! lUrl.startsWith('http')) && (lUrl.endsWith('.md'))) {
80+
return(url.substring(0, url.length-2) + 'htm');
81+
}
82+
return (url);
83+
},
84+
85+
{
86+
priority: -1, // run last (especially after PathToUrl transform)
87+
}
88+
);
89+
90+
6791
eleventyConfig.addTransform("insp", function(content) {
6892
// console.log( this.inputPath, this.outputPath );
6993
// note that this.outputPath is `false` for serverless templates

‎.myMarkdown.js‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
// .myMarkdown.js
22
// local plugin implementation to enrich the markdown with
3-
// - replace-link -- patch all internal *.md links
43
// - containers: excerpt, board, element, sensor
54

65
// https://v0-5-1.11ty.dev/docs/languages/markdown/
76
// https://www.11ty.dev/docs/languages/markdown/
8-
// https://www.npmjs.com/package/markdown-it-replace-link5
97
// https://github.com/markdown-it/markdown-it-footnote
108

119

1210
const markdownIt = require('markdown-it');
1311
const mdContainer = require('markdown-it-container');
14-
const mdReplaceLink = require('markdown-it-replace-link');
1512
const mdFootnotes = require('markdown-it-footnote');
1613
const mdTaskLists = require('markdown-it-task-lists');
1714
const mdItAttrs = require('markdown-it-attrs');
@@ -26,15 +23,9 @@ module.exports = {
2623
html: true,
2724
breaks: false,
2825
linkify: true,
29-
typographer: true,
30-
replaceLink: function(link, env) {
31-
// console.log("--", link);
32-
link = link.replace(/(^\/[^.]*)\.md$/, "$1.htm");
33-
return (link);
34-
}
26+
typographer: true
3527
});
3628

37-
markdown.use(mdReplaceLink);
3829
markdown.use(mdTaskLists, { enabled: true, label: true });
3930
markdown.use(mdItAttrs);
4031
markdown.use(mdFootnotes, { backref: false });

‎_includes/homepage.njk‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,20 +24,25 @@ permalink: "{{ page.filePathStem }}.htm"
2424
<meta property="og:image" content="homeding.png">
2525
</head>
2626

27-
<body class="sitelayout" style="--content-width:800px">
27+
<body class="sitelayout">
2828

2929
<div class="navbar">
30-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="menuButton" class="button" style="height:1.4rem">
31-
<path fill="white" d="M0 8h48v6H0zm0 13h48v6H0zm0 13h48v6H0z" />
32-
</svg>
33-
30+
<button id="menu" popovertarget="my-menu">
31+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
32+
<path fill="white" d="M0 8h48v6H0zm0 13h48v6H0zm0 13h48v6H0z" />
33+
</svg>
34+
</button>
3435
<a href="/index.htm" class="button">Home</a>
3536
<a href="/elements/index.htm" class="button">Elements</a>
3637
<a href="/boards/index.htm" class="button">Boards</a>
3738
<a href="/recipes/index.htm" class="button">Recipes</a>
39+
{# <span class="gap"></span>
40+
<svg id="themebutton" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
41+
<path fill="white" d="M24 1c-13 0-23 10-23 23s10 23 23 23s23-11 23-23s-11-23-23-23z M24 43V5c10 0 19 10 19 19s-9 19-19 19z" />
42+
</svg> #}
3843
</div>
3944

40-
<nav class="menu"></nav>
45+
<nav popover='auto' id='my-menu' class='menu'></nav>
4146

4247
<main>
4348
<h1>{{title}}</h1>
@@ -71,13 +76,24 @@ permalink: "{{ page.filePathStem }}.htm"
7176
</main>
7277

7378
<script>
74-
var mbObj = document.querySelector('#menuButton');
79+
{# function setTheme(lightMode) {
80+
const theme = lightMode ? 'light' : 'dark';
81+
document.querySelector(':root').style.colorScheme = theme;
82+
}
83+
84+
let isLightTheme = window.matchMedia('(prefers-color-scheme: light)').matches;
85+
console.log('prefersLightTheme', isLightTheme);
86+
setTheme(isLightTheme);
87+
88+
document.querySelector('#themebutton').addEventListener('click', function(e) {
89+
isLightTheme = !isLightTheme;
90+
setTheme(isLightTheme);
91+
}); #}
92+
7593
var navObj = document.querySelector('nav');
76-
mbObj.addEventListener('click', function (e) {
77-
navObj.classList.toggle('open');
78-
});
7994
lazyLoadHTM('nav', '/toc.htm');
8095
</script>
96+
8197
</body>
8298

8399
</html>

‎_includes/macros.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ u-carousel {
138138
<button class="next" onclick="document.querySelector('.entries').scrollBy(100, 0)" ></button>
139139
<ul class="entries" tabindex="0">
140140
{% for i in images %}
141-
<li><img src="{{i.file}}" alt="{{i.text}}" title="" draggable="false"></li>
141+
<li><img src="{{i.file}}" title="" draggable="false"></li>
142142
{% endfor %}
143143
</ul>
144144
</u-carousel>

‎_includes/memo.txt‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
macros.njk -- macros
2+
3+
homepage.njk -- used for /index.md only
4+
toc.njk -- used for toc only i partial page only.
5+
page.njk -- used for all other content
6+
7+
default.njk -- removed.

‎_includes/page.njk‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,24 @@ permalink: "{{ page.filePathStem }}.htm"
1919
<meta name="msvalidate.01" content="7FC9C7BCD4002EBD89AAC2EF63D7B353"/>
2020
</head>
2121

22-
<body class="sitelayout" style="--content-width:800px">
22+
<body class="sitelayout">
2323
<div class="navbar">
24-
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48" id="menuButton" class="button" style="height:1.4rem">
25-
<path fill="white" d="M0 8h48v6H0zm0 13h48v6H0zm0 13h48v6H0z"/>
26-
</svg>
24+
<button id="menu" popovertarget="my-menu">
25+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
26+
<path fill="white" d="M0 8h48v6H0zm0 13h48v6H0zm0 13h48v6H0z" />
27+
</svg>
28+
</button>
2729
<a href="/index.htm" class="button">Home</a>
2830
<a href="/elements/index.htm" class="button">Elements</a>
2931
<a href="/boards/index.htm" class="button">Boards</a>
3032
<a href="/recipes/index.htm" class="button">Recipes</a>
33+
{# <span class="gap"></span>
34+
<svg id="themebutton" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
35+
<path fill="white" d="M24 1c-13 0-23 10-23 23s10 23 23 23s23-11 23-23s-11-23-23-23z M24 43V5c10 0 19 10 19 19s-9 19-19 19z" />
36+
</svg> #}
3137
</div>
3238

33-
<nav class="menu"></nav>
39+
<nav popover='auto' id='my-menu' class='menu'></nav>
3440

3541
<main>
3642
<h1>{{ title }}</h1>
@@ -63,11 +69,21 @@ permalink: "{{ page.filePathStem }}.htm"
6369
</main>
6470

6571
<script>
66-
var mbObj = document.querySelector('#menuButton');
72+
{# function setTheme(lightMode) {
73+
const theme = lightMode ? 'light' : 'dark';
74+
document.querySelector(':root').style.colorScheme = theme;
75+
}
76+
77+
let isLightTheme = window.matchMedia('(prefers-color-scheme: light)').matches;
78+
console.log('prefersLightTheme', isLightTheme);
79+
setTheme(isLightTheme);
80+
81+
document.querySelector('#themebutton').addEventListener('click', function(e) {
82+
isLightTheme = !isLightTheme;
83+
setTheme(isLightTheme);
84+
}); #}
85+
6786
var navObj = document.querySelector('nav');
68-
mbObj.addEventListener('click', function (e) {
69-
navObj.classList.toggle('open');
70-
});
7187
lazyLoadHTM('nav', '/toc.htm');
7288
</script>
7389

‎boards/devices/bulb.md‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Light emitting devices like bulbs with ESP chip are supported by the HomeDing li
1616
There are many different bulb devices that use RGB and white LED variants. The bulbs that use GPIOs with PWM or the chips
1717
like MY9231, MY9291.
1818

19-
![WiFi Bulb](/boards/devices/bulb.jpg "w200")
19+
![WiFi Bulb](/boards/devices/bulb.jpg){ style="width: 400px" }
2020

2121
The biggest challenge with these bulbs is that there is usually no easy way to get to the serial port without destroying the housing.
2222

@@ -152,12 +152,12 @@ These bulbs are internally of this type:
152152

153153
Here are some picture from a disassembly of a bulb:
154154

155-
![bulb](/boards/devices/bulb.jpg "w200")
156-
![bulb](/boards/devices/bulbparts.jpg "w200")
157-
![bulb](/boards/devices/bulb01.jpg "w200")
158-
![bulb](/boards/devices/bulb02.jpg "w200")
159-
![bulb](/boards/devices/bulb03.jpg "w200")
160-
![bulb](/boards/devices/bulb04.jpg "w200")
155+
![bulb](/boards/devices/bulb.jpg){ style="width: 200px" }
156+
![bulb](/boards/devices/bulbparts.jpg){ style="width: 200px" }
157+
![bulb](/boards/devices/bulb01.jpg){ style="width: 200px" }
158+
![bulb](/boards/devices/bulb02.jpg){ style="width: 200px" }
159+
![bulb](/boards/devices/bulb03.jpg){ style="width: 200px" }
160+
![bulb](/boards/devices/bulb04.jpg){ style="width: 200px" }
161161

162162
It is almost impossible to open this kind of a bulb and get access to the programming signals without breaking the housing.
163163

@@ -172,7 +172,7 @@ Many bulbs are using the PWM signals from the ESP8266 chip with some power switc
172172
These can be controlled using the [Light Element](/elements/light/light.md) that can create 4-channels of PWM signals from a color value.
173173
It supports RGB and WRGB color values, a general brightness and enable switch.
174174

175-
![bulb](/boards/devices/bulbrgb.jpg "w200")
175+
![bulb](/boards/devices/bulbrgb.jpg){ style="width: 200px" }
176176

177177
**config.json**
178178

@@ -216,11 +216,11 @@ These bulbs are internally of this type:
216216

217217
Here are some picture from a disassembly of a broken bulb:
218218

219-
![bulb](/boards/devices/bulbrgb01.jpg "w200")
220-
![bulb](/boards/devices/bulbrgb02.jpg "w200")
221-
![bulb](/boards/devices/bulbrgb03.jpg "w200")
222-
![bulb](/boards/devices/bulbrgb04.jpg "w200")
223-
![bulb](/boards/devices/bulbrgb05.jpg "w200")
219+
![bulb](/boards/devices/bulbrgb01.jpg){ style="width: 200px" }
220+
![bulb](/boards/devices/bulbrgb02.jpg){ style="width: 200px" }
221+
![bulb](/boards/devices/bulbrgb03.jpg){ style="width: 200px" }
222+
![bulb](/boards/devices/bulbrgb04.jpg){ style="width: 200px" }
223+
![bulb](/boards/devices/bulbrgb05.jpg){ style="width: 200px" }
224224

225225
It is possible to open this bulb by gently pulling off the transparent cap. There are 2 small boards visible.
226226
The one with the processor has some good soldering pads for RX, TX and GPIO0. The VCC and GND signals are available on the connectors.

‎boards/esp32/ttgogallery.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ It is built using a ESP32 Wrover-B Module, digital audio output using the I2S bu
1414

1515
The [WebRadio example](/examples/webradio.md) is based on using this board.
1616

17-
![ttogallery front](/boards/esp32/ttgogallery.jpg "w400")
17+
![ttogallery front](/boards/esp32/ttgogallery.jpg){ style="width: 400px" }
1818

19-
![ttogallery back](/boards/esp32/ttgogallery-back.jpg "w400")
19+
![ttogallery back](/boards/esp32/ttgogallery-back.jpg){ style="width: 400px" }
2020

2121

2222
## Sketch uploading

‎boards/esp32c3/core.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -153,8 +153,8 @@ The following configuration can be used for the Shield:
153153

154154
## Pictures
155155

156-
![core-esp32c3 board with pins](/boards/esp32c3/core-soldered.jpg "w200")
157-
![core-esp32c3 on breadboard](/boards/esp32c3/core-stacked.jpg "w200")
156+
![core-esp32c3 board with pins](/boards/esp32c3/core-soldered.jpg){ style="width: 200px" }
157+
![core-esp32c3 on breadboard](/boards/esp32c3/core-stacked.jpg){ style="width: 200px" }
158158

159159

160160
## See also

‎boards/mini/d1miniesp32.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ tags:
1010
The D1 mini ESP32 boards use a ESP32 MCU and 4 MByte flash memory chip.
1111

1212
{{ carousel([
13-
{ "file": "d1miniesp32.jpg", "text": "w200"},
14-
{ "file": "d1miniesp32.png", "text": "w200"},
15-
{ "file": "d1miniesp32-1.jpg", "text": "w200"}
13+
{ "file": "d1miniesp32.jpg"},
14+
{ "file": "d1miniesp32.png"},
15+
{ "file": "d1miniesp32-1.jpg"}
1616
]) }}
1717

1818
A similar board the [D1 mini (ESP8266)](/boards/mini/d1mini.md) exists

0 commit comments

Comments
 (0)