📄 Add Detail Pages for Definitions (#75)

* fix: untrack definitions in dist * feat(detail pages): update item link * feat(detail pages): add layout * feat(detail pages): render whole definition content * feat(detail pages): remove definitons from homepage * 🧹 def list component * feat(layout): render site footer in all pages * feat(detail pages): rename definition root class && move css into partials * chore: abstract further css into own files * feat(detail pages): update headling level of definition content * feat(styles): set box sizing * feat(styles): add margin bottom utility * feat(styles): selection * feat(components): sub page header own component * feat(detail pages): add sections * feat(style): mian headline * feat(page layout): rename page content grid * feat(page layout): add wide content class * feat(detail pages): set document title * feat(detail pages): set uniform document title for docs and definitions * feat(page title): add comment * feat(detail pages): add meta description * feat(detail pages): wrap def header in article tag * chore: set up ava * feat(filters): move permalink function into file, add test * chore: rename _temp to _util, remove creation script * feat(detail pages): helper function to find additional definitions * chore: move helpers to single directory * feat(detail pages): create shortcode for further definition navigation * feat(detail pages): fix find defs function * feat(detail pages): shortcode for browse nav markup * chore: fix collection mock data * feat(detail pages): render browse nav * feat(detail pages): style browse nav, style improvements * feat(detail pages): test redirect * feat(detail pages): client side redirect * feat(homepage): set title * 💅 * feat(detail pages): incorporate design changes * feat(detail pages): hide browse headlines * feat(detail pages): label lists * feat(footer): add aria label * feat(detail pages): redice heading level in md * feat(detail pages): spacing in browse nav * feat(detail pages): reduce line height * feat(detail pages): set max width w/o breaking homepage * feat(detail pages): replace in-definition definition links * 🧹 * feat(detail pages): recover spacing utility * 🧹 * chore(packages): update ava * config: specify nvm version * 💅 * 💅
selfdefined · Mar 9, 2020 · bd88c18 · bd88c18
1 parent 6050307
commit bd88c18
Show file tree

Hide file tree

Showing 67 changed files with 1,153 additions and 431 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -1,5 +1,6 @@
+const definitionPermalink = require('./11ty/helpers/definitionPermalink');
+const renderDefinitionContentNextEntries = require('./11ty/shortcodes/renderDefinitionContentNextEntries');
 const findExistingDefinition = require('./11ty/filters/helpers/findExistingDefinition');
-const definitionPermalink = require('./11ty/filters/definitionPermalink');
 
 module.exports = function(config) {
   // Add a filter using the Config API
@@ -68,12 +69,17 @@ module.exports = function(config) {
       const sep = flag.text && info.text ? '—' : '';
       const text = flag.text ? [info.text, flag.text].join(sep) : info.text;
 
-      return `<p class="word__signal word__signal--${info.class}">${text}</p>`;
+      return `<p class="definition-content__signal definition-content__signal--${info.class}">${text}</p>`;
     }
 
-    return '<p class="word__signal"></p>';
+    return '<p class="definition-content__signal"></p>';
   });
 
+  config.addShortcode(
+    'renderDefinitionContentNextEntries',
+    renderDefinitionContentNextEntries
+  );
+
   // 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
   config.addCollection('tableOfContent', (collection) => {
     const allItems = collection

diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+12
diff --git a/11ty/_includes/components/definition-content.njk b/11ty/_includes/components/definition-content.njk
@@ -0,0 +1,32 @@
+<section class="definition-content">
+  <section class="u-margin-bottom-double" aria-labelledby="definition-speech">
+    <h2 id="definition-speech" class="visually-hidden">Speech</h2>
+    <p class="definition-content__speech">{{ speech }}</p>
+  </section>
+  <section class="definition-content__content">
+    {{ content | safe }}
+    {# <p>{{ alt_words }}</p> #}
+  </section>
+  {%- if alt_words -%}
+    <section class="definition-content__content">
+      <h2 id="alt-words">Alt Words</h2>
+      <ul class="list-semicolon" aria-labelledby="alt-words">
+        {% for word in alt_words %}
+          <li>{{ word | linkIfExistsInCollection(collections.definedWords) | safe }}</li>
+        {% endfor %}
+      </ul>
+    </section>
+  {% endif %}
+  {%- if reading -%}
+    <section class="definition-content__content">
+      <h2 id="further-reading">Further Reading</h2>
+      <ul class="list-semicolon" aria-labelledby="further-reading">
+        {% for link in reading %}
+          <li>
+            <a href="{{link.href}}">{{ link.text }}</a>
+          </li>
+        {% endfor %}
+      </ul>
+    </section>
+  {% endif %}
+</section>
diff --git a/11ty/_includes/components/definition.njk b/11ty/_includes/components/definition.njk
diff --git a/11ty/_includes/components/defintions-list.njk b/11ty/_includes/components/defintions-list.njk
diff --git a/11ty/_includes/components/sub-page-header.njk b/11ty/_includes/components/sub-page-header.njk
@@ -0,0 +1,4 @@
+<div id="title">
+  <a href="/">Self-Defined</a>
+  <p>A modern dictionary about us.<br>We define our words, but they don't define us.</p>
+</div>
diff --git a/11ty/_includes/layouts/base.njk b/11ty/_includes/layouts/base.njk
@@ -4,12 +4,28 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>{{ renderData.title or title or metadata.title }}</title>
-    <meta name="description" content="{{ renderData.description or description or metadata.description }}">
+    {# Use title with path, or append a space to the page title to avoid collpasing with the meta title #}
+    {% set pageTitle = titleWithPath or title + ' ' or '' %}
+    <title>{{ pageTitle + metadata.title }}</title>
+    <meta
+      name="description"
+      content="{{ renderData.description or description or metadata.description }}"
+    >
 
     <link rel="stylesheet" href="{{ '/assets/css/base.css' | url }}">
   </head>
   <body>
     {% block content %}{% endblock content %}
+    <footer class="site-footer">
+      <nav aria-label="Complimentary">
+        <ul class="navigation-list">
+          <li>
+            <a href="/documentation/">Documentation</a>
+          </li>
+        </ul>
+      </nav>
+    </footer>
+    {% block pageScript %}
+    {% endblock pageScript %}
   </body>
-</html>
+</html>
diff --git a/11ty/_includes/layouts/definition.njk b/11ty/_includes/layouts/definition.njk
@@ -0,0 +1,19 @@
+{% extends 'layouts/base.njk' %}
+{% set pageType = 'Definition' %}
+{% set titleWithPath = title + ' « Definitions « ' %}
+{% set description = 'The definition of ' + title + ' in Self-Defined, a modern dictionary about us.'%}
+
+{% block content %}
+  <div class="wide-content">
+    {% include 'components/sub-page-header.njk' %}
+    <main>
+      <article class="definition">
+        <header class="definition__header">
+          {% definitionFlag flag %}
+          <h1 class="main-headline" >{{ title }}</h1>
+        </header>
+        {% include 'components/definition-content.njk' %}
+        {% renderDefinitionContentNextEntries title, slug, collections.definedWords %}
+      </article>
+    </main>
+{% endblock %}
diff --git a/11ty/_includes/layouts/page.njk → 11ty/_includes/layouts/documentation.njk b/11ty/_includes/layouts/page.njk → 11ty/_includes/layouts/documentation.njk
@@ -1,12 +1,10 @@
 {% extends 'layouts/base.njk' %}
 {% set pageType = 'Page' %}
+{% set titleWithPath = title + ' « Documentation « ' %}
 
 {% block content %}
-  <div class="small-left-grid">
-    <div id="title">
-      <a href="/">Self-Defined</a>
-      <p>A modern dictionary about us.<br>We define our words, but they don't define us.</p>
-    </div>
+  <div class="article-content">
+    {% include 'components/sub-page-header.njk' %}
     <main class="page">
       {%- if parent -%}
         <div>
@@ -16,4 +14,4 @@
       <h1 class="title__thicc" >{{ title }}</h1>
       {{ content | safe }}
     </main>
-{% endblock %}
+  {% endblock %}
diff --git a/11ty/_includes/layouts/index.njk b/11ty/_includes/layouts/index.njk
@@ -1,19 +1,31 @@
 {% extends 'layouts/base.njk' %}
+{% set titleWithPath = 'Home « ' %}
 
 {% block content %}
   <main>
     {{ content | safe }}
     {% include 'components/table-of-content.njk' %}
-    <section>
-      <h2>Words</h2>
-      {% include 'components/defintions-list.njk' %}
-    </section>
+
   </main>
-  <footer class="site-footer">
-    <nav aria-label="">
-      <ul class="navigation-list">
-        <li><a href="/documentation/">Documentation</a></li>
-      </ul>
-    </nav>
-  </footer>
+
+{% endblock %}
+
+
+{% block pageScript%}
+<script>
+  // don't use es6+ here because it will not be transpiled
+  window.addEventListener('DOMContentLoaded', function() {
+    if (location.hash) {
+      var allLinks = Array.from(document.querySelectorAll('.toc__list-item > a'));
+
+      for (var i = 0; i < allLinks.length; i++) {
+        var link = allLinks[i]
+
+        if (link.href.includes(location.hash.replace('#', ''))) {
+          window.location = link.href
+        }
+      }
+    }
+  })
+</script>
 {% endblock %}
diff --git a/11ty/definitions/ableism.md b/11ty/definitions/ableism.md
@@ -9,11 +9,11 @@ a system that places value on people’s bodies and minds based on societally co
 
 — Talia "TL" Lewis
 
-#### Impact
+## Impact
 
 To paraphrase Lewis, ableism "leads to people and society determining who is valuable and worthy based on a person’s appearance and/or their ability to [...] produce, excel, and 'behave.'" You do not have to be disabled to experience ableism, and Disabled people can also reinforce ableism internally (manifesting as harm to themselves) and externally (harm to other disabled people).
 
-#### Further reading
+## Further reading
 
 - [Longmore Lecture: Context, Clarity & Grounding](https://www.talilalewis.com/blog/longmore-lecture-context-clarity-grounding)
 - [Ableism 2020: An Updated Definition](https://www.talilalewis.com/blog/ableism-2020-an-updated-definition)
diff --git a/11ty/definitions/barbaric.md b/11ty/definitions/barbaric.md
@@ -7,30 +7,31 @@ flag:
 defined: true
 speech: adjective
 reading:
-  - text: "is the word barbarian a slur?"
+  - text: 'is the word barbarian a slur?'
     href: https://seetobehumanityearth.wordpress.com/2015/07/16/is-the-term-barbarian-a-slur/
-  - text: "Barbarian wiki"
+  - text: 'Barbarian wiki'
     href: https://en.wikipedia.org/wiki/Barbarian
 alt_words:
   - cruel
   - vicious
   - obscene
   - feral
 ---
+
 something which is obscenely cruel; primitive; unsophisticated
 
-#### Issues
+## Issues
 
-Barbarian originates from the Greek word *bárbaros* meaning "babbler", to denote the "unintelligible sounds" (_"bar bar bar"_) made by foreign speakers.
-Similar words exist in many other languages, for the identical purpose labeling a "strange"/"foreign" person/culture. 
+Barbarian originates from the Greek word _bárbaros_ meaning "babbler", to denote the "unintelligible sounds" (_"bar bar bar"_) made by foreign speakers.
+Similar words exist in many other languages, for the identical purpose labeling a "strange"/"foreign" person/culture.
 
 In modern day usage, you can notice this rhetoric being employed almost always for the purpose of demonizing "foreign" (more often than not from the global south) cultures - cultures that need to be civilized;
-cultures that need to be colonized to rescue them from themselves. A perfect lingual weapon for warmongers and racists alike. Equally repulsive sibling of "savage". 
+cultures that need to be colonized to rescue them from themselves. A perfect lingual weapon for warmongers and racists alike. Equally repulsive sibling of "savage".
 
-#### Impact
+## Impact
 
-When you use words, that are in vogue primarily inside circles of bigots, with racist etymologies, it's a wilful act of violence, ignorance and an indication to the vilified and minoritised communities that their history of wounds and abuses are inconsequential to our words. 
+When you use words, that are in vogue primarily inside circles of bigots, with racist etymologies, it's a wilful act of violence, ignorance and an indication to the vilified and minoritised communities that their history of wounds and abuses are inconsequential to our words.
 
-#### Usage Tip
+## Usage Tip
 
-Avoid words that have obscene etymologies. There is almost always a better alternative: an inclusive and a less hurtful one. 
+Avoid words that have obscene etymologies. There is almost always a better alternative: an inclusive and a less hurtful one.
diff --git a/11ty/definitions/biromantic.md b/11ty/definitions/biromantic.md
@@ -14,8 +14,8 @@ reading:
 
 of, relating to, or characterised by being romantically attracted to more than one gender.
 
-#### Note
+## Note
 
-Biromantic does not imply any particular kind of sexual attraction, or sexual attraction at all. A biromantic person may be asexual, homosexual, heterosexual, [bisexual](#bisexual), [pansexual](#pan-sexual), etc.
+Biromantic does not imply any particular kind of sexual attraction, or sexual attraction at all. A biromantic person may be asexual, homosexual, heterosexual, [bisexual](/definitions/bisexual), [pansexual](/definitions/pan-sexual), etc.
 
-Biromantic does not preclude romantic attraction to [non-binary](#non-binary) or [transgender](#transgender) people.
+Biromantic does not preclude romantic attraction to [non-binary](/definitions/non-binary) or [transgender](/definitions/transgender) people.
diff --git a/11ty/definitions/bisexual.md b/11ty/definitions/bisexual.md
@@ -7,10 +7,10 @@ defined: true
 
 of, relating to, or characterised by being sexually attracted to more than one gender.
 
-#### Note
+## Note
 
-Bisexuality does not preclude attraction to [non-binary](#non-binary) or [transgender](#transgender) people.
+Bisexuality does not preclude attraction to [non-binary](/definitions/non-binary) or [transgender](/definitions/transgender) people.
 
-#### Further Reading
+## Further Reading
 
 [Am I Bisexual?](http://www.bisexualindex.org.uk/index.php/AmIBisexual)
diff --git a/11ty/definitions/cisgender.md b/11ty/definitions/cisgender.md
@@ -7,4 +7,4 @@ defined: true
 
 of, relating to, or characterised by being a gender that matches the gender they were assigned at birth.
 
-The opposite of [transgender](/#transgender).
+The opposite of [transgender](/definitions/transgender).
diff --git a/11ty/definitions/crazy.md b/11ty/definitions/crazy.md
@@ -27,14 +27,14 @@ alt_words:
 
 mentally deranged; demented; insane.
 
-#### Issues
+## Issues
 
 Crazy is very commonly used as an adjective to embody a vast array of ideas, often not specifically. It is used so frequently that it sometimes is a filler. Crazy can also be used in a derogatory manner for someone with mental or psychiatric disabilities.
 
-#### Impact
+## Impact
 
 By using ableist language, we are perpetuating violence against people who experience mental or psychological disabilities. Using this language perpetuates those systems and language of harm, regardless of our intent.
 
-#### Usage Tip
+## Usage Tip
 
 Be more specific. Typically we can find an alternate definition by simply reflecting on what emotion we're really feeling.
diff --git a/11ty/definitions/definitions.json b/11ty/definitions/definitions.json
@@ -0,0 +1,3 @@
+{
+  "layout": "layouts/definition.njk"
+}
diff --git a/11ty/definitions/english-as-second-language.md b/11ty/definitions/english-as-second-language.md
@@ -16,10 +16,10 @@ reading:
 
 the teaching of English to people who speak a different language and who live in a country where English is the main language spoken
 
-#### Issues
+## Issues
 
 Monolinguist, English-only speakers often refer to people who don't speak English natively as "ESL" or say they are learning a "second language". More often than not, this is not true, as many people are multi-lingual with 3 or more languages
 
-#### Impact
+## Impact
 
 It makes false assumptions about English learners, centres English as the "default" or "expected" first language, ignoring that many people learn multiple (>3), non-English languages first.
diff --git a/11ty/definitions/fatphobia.md b/11ty/definitions/fatphobia.md
@@ -13,11 +13,11 @@ reading:
 
 the fear, hatred, and stigmitasation of fat people.
 
-#### Issues
+## Issues
 
 Fatphobia is the racialised, classist, and ableist tool of oppression that codifies a “ideal” body type that centres a white, Western aesthetic, demands time and resources that people may not have, and attempts to correlate thinness and heathliness—perpetuating white supremacist violence against people of colour, perpetuates classist oppression of people living with limited resources, and the ableist idea of healthiness as an indicator of human value.
 
-#### Impact
+## Impact
 
 A history of being ignored and shamed prevents many fat people from visiting medical professionals even if they have the financial and physical means to do so. Medical professionals hold fatphobic biases and often prescribe weight loss as a default instead of listening to their fat patients' concerns.
 

diff --git a/11ty/definitions/gaslighting.md b/11ty/definitions/gaslighting.md
@@ -15,7 +15,7 @@ reading:
 
 psychological manipulation tactic used to abuse by instilling doubt in the victim's own thoughts, observations, feelings by denying, misdirecting, and lying to them; originated from the Gaslight play (1933) and film (1944), where a man changes the lights in the house, while denying her observations of the changes.
 
-#### Impact
+## Impact
 
 Gaslighting reinforces systems of power, as gaslighting abusers will tend to be in systematically dominant positions where they are intrinsically believed over their victim (e.g., white person over person of colour, man over woman, abled person over disabled person, parent over child, manager over worker, etc). Gaslighting is an abusive and oppressive behaviour and tactic.