Skip to content

Commit 1dd1027

Browse files
tatianamactatianamac
authored
Merge pull request #31 from ovlb/feature/eleventy-build
👷‍♀️ Add Build Process for Definitions YAY
2 parents 5890e2e + 82f2595 commit 1dd1027

File tree

203 files changed

+10850
-3005
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

203 files changed

+10850
-3005
lines changed

‎.eleventy.js‎

Lines changed: 138 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,157 @@
1+
const makeItemLink = (slug) => `#${slug}`
2+
const findExistingDefinition = (word, collection) => collection.find(item => item.data.title === word)
3+
14
module.exports = function (config) {
25
// Add a filter using the Config API
3-
config.addFilter('linkTarget', (slug) => `#${slug}`);
6+
config.addFilter('linkTarget', makeItemLink);
7+
8+
config.addFilter('linkIfExistsInCollection', (word, collection) => {
9+
const existingDefinition = findExistingDefinition(word, collection)
10+
11+
if (existingDefinition) {
12+
return `<a href="${makeItemLink(existingDefinition.data.slug)}">${word}</a>`
13+
}
14+
15+
return word
16+
})
17+
18+
config.addFilter('linkSubTermIfDefined', (subTermData, collection) => {
19+
const existingDefinition = findExistingDefinition(subTermData.full_title, collection)
20+
21+
if (existingDefinition) {
22+
return `<a href="${makeItemLink(existingDefinition.data.slug)}" aria-label="${subTermData.full_title}">${subTermData.text}</a>`
23+
}
24+
25+
return subTermData.text
26+
})
427

28+
// just a debug filter to lazily inspect the content of anything in a template
529
config.addFilter('postInspect', function (post) {
630
console.log(post);
7-
831
})
932

10-
config.addPassthroughCopy({'_site/css/': 'assets/css/'})
33+
config.addPassthroughCopy({'assets/css/': 'assets/css/'})
1134

12-
// Add collections here
13-
config.addCollection('definitions', collection => {
14-
return [
15-
...collection
16-
.getFilteredByGlob('./11ty/definitions/*.md')
17-
.sort((a, b) => {
18-
// `toLowerCase()` is just a safety measure, slugs should be lower case anyway
19-
// `localeCompare()` is super cool: http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
20-
return a.data.slug.toLowerCase().localeCompare(b.data.slug.toLowerCase())
21-
})]
35+
config.addShortcode('definitionFlag', (flag) => {
36+
const cleanText = new Map([
37+
['avoid', {
38+
class: 'avoid',
39+
text: 'Avoid'
40+
}],
41+
['better-alternative', {
42+
class: 'better',
43+
text: 'Better alternate'
44+
}],
45+
['tool', {
46+
class: 'tool',
47+
text: ''
48+
}]
49+
])
50+
51+
if (flag) {
52+
const info = cleanText.get(flag.level)
53+
54+
const sep = flag.text && info.text ? '—' : ''
55+
const text = flag.text ? [info.text, flag.text].join(sep) : info.text
56+
57+
return `<p class="word__signal word__signal--${info.class}">${text}</p>`
58+
}
59+
60+
return '<p class="word__signal"></p>'
61+
});
62+
63+
64+
// NOTE (ovlb): this will not be remembered as the best code i’ve written. if anyone seeing this has a better solution then the following to achieve sub groups of the definitions: i am happy to get rid of it
65+
config.addCollection('tableOfContent', collection => {
66+
const allItems = collection
67+
.getFilteredByGlob('./11ty/definitions/*.md')
68+
.filter(word => !word.data.skip_in_table_of_content)
69+
.sort((a, b) => {
70+
const { title: firstTitle } = a.data
71+
const { title: secondTitle } = b.data
72+
const sortA = firstTitle.toLowerCase().replace(/^-/, '')
73+
const sortB = secondTitle.toLowerCase().replace(/^-/, '')
74+
75+
// `localeCompare()` is super cool: http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
76+
return sortA.localeCompare(sortB)
77+
})
78+
79+
const split = {
80+
notLetters: {
81+
title: '#',
82+
definitions: []
83+
},
84+
aToE: {
85+
title: 'A–E',
86+
definitions: []
87+
},
88+
fToL: {
89+
title: 'F–L',
90+
definitions: []
91+
},
92+
mToS: {
93+
title: 'M–S',
94+
definitions: []
95+
},
96+
tToZ: {
97+
title: 'T–Z',
98+
definitions: []
99+
}
100+
}
101+
102+
allItems.forEach(word => {
103+
const { title } = word.data
104+
const { notLetters, aToE, fToL, mToS, tToZ } = split
105+
const sortableTitle = title.replace(/^-/, '')
106+
107+
if (/^[a-e]/gmi.test(sortableTitle)) {
108+
return aToE.definitions.push(word)
109+
}
110+
111+
if (/^[f-l]/i.test(sortableTitle)) {
112+
return fToL.definitions.push(word)
113+
}
114+
115+
if (/^[m-s]/i.test(sortableTitle)) {
116+
return mToS.definitions.push(word)
117+
}
118+
119+
if (/^[t-z]/i.test(sortableTitle)) {
120+
return tToZ.definitions.push(word)
121+
}
122+
123+
// no reg ex as the fallback to avoid testing for emojis and numbers
124+
notLetters.definitions.push(word)
125+
})
126+
127+
return Object.keys(split).map(key => {
128+
const { title, definitions } = split[key]
129+
130+
return { title, definitions }
131+
})
22132
})
23133

24-
config.addCollection('definedDefinitions', collection => {
25-
return [
26-
...collection
134+
config.addCollection('definedWords', collection => {
135+
return collection
27136
.getFilteredByGlob('./11ty/definitions/*.md')
28137
.filter(word => word.data.defined)
29138
.sort((a, b) => {
30-
// `toLowerCase()` is just a safety measure, slugs should be lower case anyway
31139
// `localeCompare()` is super cool: http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
32-
return a.data.slug.toLowerCase().localeCompare(b.data.slug.toLowerCase())
33-
})]
140+
return a.data.title.toLowerCase().localeCompare(b.data.title.toLowerCase())
141+
})
34142
})
35143

144+
const mdIt = require('markdown-it')({
145+
html: true
146+
})
147+
const prism = require('markdown-it-prism')
148+
const anchor = require('markdown-it-anchor')
149+
150+
mdIt.use(prism)
151+
mdIt.use(anchor)
152+
153+
config.setLibrary('md', mdIt);
154+
36155
// You can return your Config object (optional).
37156
return {
38157
dir: {

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
.DS_Store
22
node_modules
33
dist
4-
config.codekit3
4+
config.codekit3

‎.sassrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"includePaths": ["node_modules"]
3+
}

‎11ty/_data/metadata.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"title": "selfdefined",
2+
"title": "Self-Defined",
33
"url": "https://www.selfdefined.app/",
4-
"description": "A modern dictionary about us.",
4+
"description": "A modern dictionary about us. We define our words, but they don't define us.",
55
"author": {
66
"name": "Tatiana & the Crew",
77
"email": "[email protected]"

‎11ty/_includes/components/definition.njk‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,29 @@
1-
<article id={{ definition.data.slug }} class="block__word word">
1+
<article id="{{ definition.data.slug }}" class="block__word word">
2+
{% definitionFlag definition.data.flag %}
23
<h3 class="word__title">
34
{{ definition.data.title}}
45
<span class="word__speech">{{ definition.data.speech}}</span>
56
</h3>
6-
{{ definition.templateContent | safe }}
7-
{# <p>{{ definition.data.alt_words }}</p> #}
8-
{%- if definition.data.alt_words -%}
9-
<h4>Alt words</h4>
10-
<ul class="list-semicolon">
11-
{% for word in definition.data.alt_words %}
12-
<li>{{ word }}</li>
13-
{% endfor %}
14-
</ul>
15-
{% endif %}
7+
<div class="word__content">
8+
{{ definition.templateContent | safe }}
9+
{# <p>{{ definition.data.alt_words }}</p> #}
10+
{%- if definition.data.alt_words -%}
11+
<h4>Alt Words</h4>
12+
<ul class="list-semicolon">
13+
{% for word in definition.data.alt_words %}
14+
<li>{{ word | linkIfExistsInCollection(collections.definedWords) | safe }}</li>
15+
{% endfor %}
16+
</ul>
17+
{% endif %}
18+
{%- if definition.data.reading -%}
19+
<h4>Further Reading</h4>
20+
<ul class="list-semicolon">
21+
{% for link in definition.data.reading %}
22+
<li>
23+
<a href="{{link.href}}">{{ link.text }}</a>
24+
</li>
25+
{% endfor %}
26+
</ul>
27+
{% endif %}
28+
</div>
1629
</article>

‎11ty/_includes/components/defintions-list.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="auto-grid">
2-
{% for definition in collections.definedDefinitions %}
2+
{% for definition in collections.definedWords %}
33
{% include 'components/definition.njk' %}
44
{% endfor %}
55
</div>

‎11ty/_includes/components/table-of-content-item.njk‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<li>
2+
{{ definition.data.title | linkIfExistsInCollection(collections.definedWords) | safe }}
3+
{%- if
4+
definition.data.flag and
5+
definition.data.flag.text and
6+
(definition.data.flag.level == 'avoid') -%}
7+
<span class="flag__red">{{ definition.data.flag.text }}</span>
8+
{% endif %}
9+
{%- if definition.data.sub_terms -%}
10+
<ul class="sub-terms">
11+
{% for term in definition.data.sub_terms %}
12+
<li
13+
class="subterm"
14+
>{{ term | linkSubTermIfDefined(collections.definedWords) | safe }}</li>
15+
{% endfor %}
16+
</ul>
17+
{% endif %}
18+
</li>

‎11ty/_includes/components/table-of-content.njk‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<section>
2+
<nav class="" aria-label="Definitions">
3+
<ol class="multi-column u-no-padding-left list">
4+
{% for section in collections.tableOfContent %}
5+
<li>
6+
<span class="sub-headline">{{ section.title }}</span>
7+
<ol>
8+
{% for definition in section.definitions %}
9+
{% include 'components/table-of-content-item.njk' %}
10+
{% endfor %}
11+
</ol>
12+
</li>
13+
{% endfor %}
14+
</ol>
15+
</nav>
16+
</section>

‎11ty/_includes/layouts/base.njk‎

Lines changed: 4 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -15,40 +15,11 @@
1515

1616
<link
1717
rel="stylesheet"
18-
href="{{ 'assets/css/base.css' | url }}"
18+
href="{{ '/assets/css/base.css' | url }}"
1919
>
2020
</head>
2121
<body>
22-
<main>
23-
{{ content | safe }}
24-
<section>
25-
<h2>Table of Content</h2>
26-
<div class="auto-grid list">
27-
<ul>
28-
{% for definition in collections.definitions %}
29-
{% set renderedName %}
30-
{{ definition.data.title}}
31-
{%- if definition.data.flag and (definition.data.flag.level == 'avoid') -%}
32-
<span class="flag__red">{{ definition.data.flag.type }}</span>
33-
{% endif %}
34-
{% endset %}
35-
<li>
36-
{%- if definition.data.defined -%}
37-
<a
38-
href={{ definition.data.slug | linkTarget | url }}
39-
class="word__link"
40-
>{{ renderedName | safe }}</a>
41-
{%- else -%}
42-
{{ renderedName | safe }}
43-
{% endif %}
44-
</li>
45-
{% endfor %}
46-
</ul>
47-
</div>
48-
</section>
49-
<section>
50-
<h2>Words</h2>
51-
{% include 'components/defintions-list.njk' %}
52-
</section>
53-
</main>
22+
{% block content %}
23+
{% endblock content %}
5424
</body>
25+
</html>

‎11ty/_includes/layouts/index.njk‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{% extends 'layouts/base.njk' %}
2+
3+
{% block content %}
4+
<main>
5+
{{ content | safe }}
6+
{% include 'components/table-of-content.njk' %}
7+
<section>
8+
<h2>Words</h2>
9+
{% include 'components/defintions-list.njk' %}
10+
</section>
11+
</main>
12+
<footer class="site-footer">
13+
<nav aria-label="">
14+
<ul class="navigation-list">
15+
<li><a href="/documentation/">Documentation
16+
</ul>
17+
</nav>
18+
</footer>
19+
{% endblock %}

0 commit comments

Comments
 (0)