mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-06-10 21:01:41 +00:00
Code Issues Projects Releases Wiki Activity

📄 Add Detail Pages for Definitions (#75)

Browse Source 
* 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

* 💅

* 💅
This commit is contained in:
Oscar
2020-03-09 23:47:06 +01:00
committed by GitHub
parent 6050307a78
commit bd88c18fd0
67 changed files with 1155 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
11ty/_includes/components/definition-content.njk Normal file
View File

@ -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>

29
11ty/_includes/components/definition.njk
View File

@ -1,29 +0,0 @@
<article id="{{ definition.data.slug }}" class="block__word word">
{% definitionFlag definition.data.flag %}
<h3 class="word__title">
{{ definition.data.title}}
<span class="word__speech">{{ definition.data.speech}}</span>
</h3>
<div class="word__content">
{{ definition.templateContent | safe }}
{# <p>{{ definition.data.alt_words }}</p> #}
{%- if definition.data.alt_words -%}
<h4>Alt Words</h4>
<ul class="list-semicolon">
{% for word in definition.data.alt_words %}
<li>{{ word | linkIfExistsInCollection(collections.definedWords) | safe }}</li>
{% endfor %}
</ul>
{% endif %}
{%- if definition.data.reading -%}
<h4>Further Reading</h4>
<ul class="list-semicolon">
{% for link in definition.data.reading %}
<li>
<a href="{{link.href}}">{{ link.text }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</article>

5
11ty/_includes/components/defintions-list.njk
View File

@ -1,5 +0,0 @@
<div class="auto-grid">
{% for definition in collections.definedWords %}
{% include 'components/definition.njk' %}
{% endfor %}
</div>

4
11ty/_includes/components/sub-page-header.njk Normal file
View File

@ -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>

22
11ty/_includes/layouts/base.njk
View File

@ -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>

19
11ty/_includes/layouts/definition.njk Normal file
View File

@ -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 %}

10
11ty/_includes/layouts/page.njk → 11ty/_includes/layouts/documentation.njk
View File

@ -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 %}

34
11ty/_includes/layouts/index.njk
View File

@ -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 %}