📄 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

* 💅

* 💅
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

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>

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

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

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