Skip to content

Commit 717fce3

Browse files
tanikitaniki
committed
refactor + margin notes support
1 parent 694d25d commit 717fce3

File tree

5 files changed

+175
-99
lines changed

5 files changed

+175
-99
lines changed

‎.eleventy.js

+3-98
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,3 @@
1-
function sidenote(md){
2-
var parseLinkLabel = md.helpers.parseLinkLabel,
3-
isSpace = md.utils.isSpace;
4-
5-
function render_footnote_ref (tokens, idx, options, env, slf){
6-
var id = tokens[idx].meta.id
7-
8-
var label = `<label for="sn-${id}" class="margin-toggle sidenote-number"></label>`
9-
var input = `<input type="checkbox" id="sn-${id}" class="margin-toggle"/>`
10-
var sidenote = `<span class="sidenote">${tokens}</span>`
11-
return `${label}${input}`
12-
}
13-
14-
function render_sidenote(tokens, idx, options, env, slf){
15-
var content = tokens[idx].content
16-
var sidenote = `<span class="sidenote">${ md.renderInline(content) }</span>`
17-
return sidenote
18-
}
19-
20-
function render_sidenote_open(tokens, idx, options, env, slf){
21-
return '<span class="sidenote">'
22-
}
23-
24-
function render_sidenote_close(tokens, idx, options, env, slf){
25-
return '</span>'
26-
}
27-
28-
md.renderer.rules.footnote_ref = render_footnote_ref;
29-
md.renderer.rules.sidenote = render_sidenote;
30-
md.renderer.rules.sidenote_open = render_sidenote_open;
31-
md.renderer.rules.sidenote_close = render_sidenote_close;
32-
33-
function footnote_inline(state, silent) {
34-
var labelStart,
35-
labelEnd,
36-
footnoteId,
37-
token,
38-
tokens,
39-
max = state.posMax,
40-
start = state.pos;
41-
42-
if (start + 2 >= max) { return false; }
43-
if (state.src.charCodeAt(start) !== 0x5E/* ^ */) { return false; }
44-
if (state.src.charCodeAt(start + 1) !== 0x5B/* [ */) { return false; }
45-
46-
labelStart = start + 2;
47-
labelEnd = parseLinkLabel(state, start + 1);
48-
49-
// parser failed to find ']', so it's not a valid note
50-
if (labelEnd < 0) { return false; }
51-
52-
// We found the end of the link, and know for a fact it's a valid link;
53-
// so all that's left to do is to call tokenizer.
54-
//
55-
if (!silent) {
56-
if (!state.env.footnotes) { state.env.footnotes = {}; }
57-
if (!state.env.footnotes.list) { state.env.footnotes.list = []; }
58-
footnoteId = state.env.footnotes.list.length;
59-
60-
state.md.inline.parse(
61-
state.src.slice(labelStart, labelEnd),
62-
state.md,
63-
state.env,
64-
tokens = []
65-
);
66-
67-
token = state.push('footnote_ref', '', 0);
68-
token.meta = { id: footnoteId };
69-
70-
token = state.push('sidenote', '', 0);
71-
token.content = state.src.slice(labelStart, labelEnd)
72-
token.children = tokens
73-
74-
// token = state.push('sidenote_open', '', 1);
75-
// token.meta = { id: footnoteId };
76-
//
77-
// var t = new state.Token('html_inline', '', 0);
78-
// t.content = state.src.slice(labelStart, labelEnd)
79-
// t.children = tokens
80-
//
81-
// state.tokens.push(t)
82-
//
83-
// console.log(tokens)
84-
//
85-
// token = state.push('sidenote_close', '', -1);
86-
}
87-
88-
state.pos = labelEnd + 1;
89-
state.posMax = max;
90-
return true;
91-
}
92-
93-
md.inline.ruler.after('image', 'footnote_inline', footnote_inline);
94-
}
95-
96-
97-
981
module.exports = function(eleventyConfig) {
992
eleventyConfig.setTemplateFormats([
1003
"pug",
@@ -105,7 +8,9 @@ module.exports = function(eleventyConfig) {
1058

1069
let markdownIt = require("markdown-it")
10710
let markdownItFootnote = require("markdown-it-footnote")
108-
let md = markdownIt({debug: true}).use(sidenote)
11+
let md = markdownIt({debug: true})
12+
.use(require('./md-tufte/sidenote'))
13+
.use(require('./md-tufte/marginnote'))
10914

11015
// md.renderer.rules.footnote_ref = (tokens, idx, options, env, slf) => {
11116
// var id = slf.rules.footnote_anchor_name(tokens, idx, options, env, slf);

‎journal/test.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,11 @@ Phaethon in [male ignescere](http://plenumpraetemptat.org/sidera-quae.html): diu
1212
hic evincitque.
1313

1414
Coniunx erat *rotarum virum* sed harenas *vulnere* gladium commissa ante arma
15-
monte artus dolorque, malo. Cur utque, vox terras tecta Medusaei numina, qua
15+
monte artus dolorque, malo. +[ok boomer] Cur utque, vox terras tecta Medusaei numina, qua
1616
erat magnanimus tantum.
1717

18+
![Coniunx erat *rotarum virum* sed harenas *vulnere* gladium commissa](https://i.picsum.photos/id/1084/536/354.jpg?grayscale)
19+
1820
## Vina innocuae
1921

2022
Virgine^[Pikachu vs Palpatine] Haec non Vulcania uror illa stabant, expresso urbes: corpora in solverat

‎md-tufte/image.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = {}

‎md-tufte/marginnote.js

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
function marginnote(md){
2+
var parseLinkLabel = md.helpers.parseLinkLabel,
3+
isSpace = md.utils.isSpace;
4+
5+
function render_footnote_ref (tokens, idx, options, env, slf){
6+
var id = tokens[idx].meta.id
7+
8+
var label = `<label for="mn-${ id }" class="margin-toggle">⊕<div></div></label>`
9+
var input = `<input type="checkbox" id="mn-${ id }" class="margin-toggle"/>`
10+
return `${label}${input}`
11+
}
12+
13+
function render_sidenote(tokens, idx, options, env, slf){
14+
var content = tokens[idx].content
15+
var sidenote = `<span class="marginnote">${ md.renderInline(content) }</span>`
16+
return sidenote
17+
}
18+
19+
md.renderer.rules.marginnote_ref = render_footnote_ref;
20+
md.renderer.rules.marginnote = render_sidenote;
21+
22+
function footnote_inline(state, silent) {
23+
var labelStart,
24+
labelEnd,
25+
footnoteId,
26+
token,
27+
tokens,
28+
max = state.posMax,
29+
start = state.pos;
30+
31+
if (start + 2 >= max) { return false; }
32+
if (state.src.charCodeAt(start) !== 0x2B /* ^ */) { return false; }
33+
if (state.src.charCodeAt(start + 1) !== 0x5B/* [ */) { return false; }
34+
35+
labelStart = start + 2;
36+
labelEnd = parseLinkLabel(state, start + 1);
37+
38+
// parser failed to find ']', so it's not a valid note
39+
if (labelEnd < 0) { return false; }
40+
41+
// We found the end of the link, and know for a fact it's a valid link;
42+
// so all that's left to do is to call tokenizer.
43+
//
44+
if (!silent) {
45+
if (!state.env.marginnotes) { state.env.marginnotes = {}; }
46+
if (!state.env.marginnotes.list) { state.env.marginnotes.list = []; }
47+
footnoteId = state.env.marginnotes.list.length;
48+
49+
state.md.inline.parse(
50+
state.src.slice(labelStart, labelEnd),
51+
state.md,
52+
state.env,
53+
tokens = []
54+
);
55+
56+
// token = state.push('marginnote_ref', '', 0);
57+
// token.meta = { id: footnoteId };
58+
59+
token = state.push('marginnote', '', 0);
60+
token.content = state.src.slice(labelStart, labelEnd)
61+
token.children = tokens
62+
}
63+
64+
state.pos = labelEnd + 1;
65+
state.posMax = max;
66+
return true;
67+
}
68+
69+
md.inline.ruler.after('image', 'marginnote_inline', footnote_inline);
70+
}
71+
72+
module.exports = marginnote

‎md-tufte/sidenote.js

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
function sidenote(md){
2+
var parseLinkLabel = md.helpers.parseLinkLabel,
3+
isSpace = md.utils.isSpace;
4+
5+
function render_footnote_ref (tokens, idx, options, env, slf){
6+
var id = tokens[idx].meta.id
7+
8+
var label = `<label for="sn-${id}" class="margin-toggle sidenote-number"></label>`
9+
var input = `<input type="checkbox" id="sn-${id}" class="margin-toggle"/>`
10+
var sidenote = `<span class="sidenote">${tokens}</span>`
11+
return `${label}${input}`
12+
}
13+
14+
function render_sidenote(tokens, idx, options, env, slf){
15+
var content = tokens[idx].content
16+
var sidenote = `<span class="sidenote">${ md.renderInline(content) }</span>`
17+
return sidenote
18+
}
19+
20+
function render_sidenote_open(tokens, idx, options, env, slf){
21+
return '<span class="sidenote">'
22+
}
23+
24+
function render_sidenote_close(tokens, idx, options, env, slf){
25+
return '</span>'
26+
}
27+
28+
md.renderer.rules.footnote_ref = render_footnote_ref;
29+
md.renderer.rules.sidenote = render_sidenote;
30+
md.renderer.rules.sidenote_open = render_sidenote_open;
31+
md.renderer.rules.sidenote_close = render_sidenote_close;
32+
33+
function footnote_inline(state, silent) {
34+
var labelStart,
35+
labelEnd,
36+
footnoteId,
37+
token,
38+
tokens,
39+
max = state.posMax,
40+
start = state.pos;
41+
42+
if (start + 2 >= max) { return false; }
43+
if (state.src.charCodeAt(start) !== 0x5E/* ^ */) { return false; }
44+
if (state.src.charCodeAt(start + 1) !== 0x5B/* [ */) { return false; }
45+
46+
labelStart = start + 2;
47+
labelEnd = parseLinkLabel(state, start + 1);
48+
49+
// parser failed to find ']', so it's not a valid note
50+
if (labelEnd < 0) { return false; }
51+
52+
// We found the end of the link, and know for a fact it's a valid link;
53+
// so all that's left to do is to call tokenizer.
54+
//
55+
if (!silent) {
56+
if (!state.env.footnotes) { state.env.footnotes = {}; }
57+
if (!state.env.footnotes.list) { state.env.footnotes.list = []; }
58+
footnoteId = state.env.footnotes.list.length;
59+
60+
state.md.inline.parse(
61+
state.src.slice(labelStart, labelEnd),
62+
state.md,
63+
state.env,
64+
tokens = []
65+
);
66+
67+
token = state.push('footnote_ref', '', 0);
68+
token.meta = { id: footnoteId };
69+
70+
token = state.push('sidenote', '', 0);
71+
token.content = state.src.slice(labelStart, labelEnd)
72+
token.children = tokens
73+
74+
// token = state.push('sidenote_open', '', 1);
75+
// token.meta = { id: footnoteId };
76+
//
77+
// var t = new state.Token('html_inline', '', 0);
78+
// t.content = state.src.slice(labelStart, labelEnd)
79+
// t.children = tokens
80+
//
81+
// state.tokens.push(t)
82+
//
83+
// console.log(tokens)
84+
//
85+
// token = state.push('sidenote_close', '', -1);
86+
}
87+
88+
state.pos = labelEnd + 1;
89+
state.posMax = max;
90+
return true;
91+
}
92+
93+
md.inline.ruler.after('image', 'footnote_inline', footnote_inline);
94+
}
95+
96+
module.exports = sidenote

0 commit comments

Comments
 (0)