shadowfacts
/
shadowfacts.net
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Change fancy links to use non-pseudo elements 

Pseudo elements cannot be hidden from screen readers,
using spans allows aria-hidden to be set
This commit is contained in:
Shadowfacts 2019-01-04 21:44:55 -05:00
parent ce219d972f
commit 167e60d852
Signed by: shadowfacts
GPG Key ID: 94A5AB95422746E5
10 changed files with 53 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/generate/paginated.ts
View File

@ -30,7 +30,8 @@ export default async function generatePaginted(posts: Page[], basePath: string,
prevLink: pageNum == 1 ? "" : pageNum == 2 ? basePath : path.join(basePath, (pageNum - 1).toString()), prevLink: pageNum == 1 ? "" : pageNum == 2 ? basePath : path.join(basePath, (pageNum - 1).toString()),
nextLink: pageNum == chunks.length ? "" : path.join(basePath, (pageNum + 1).toString()) nextLink: pageNum == chunks.length ? "" : path.join(basePath, (pageNum + 1).toString())
}, },
formatDate formatDate,
fancyLink: util.fancyLink
}; };
if (extraData) data = {...data, ...extraData}; if (extraData) data = {...data, ...extraData};

6
lib/generate/tutorials.ts
View File

@ -73,7 +73,8 @@ async function generateTutorialsAndIndex(group: string, title: string): Promise<
page.text = ejs.render(page.text, { page.text = ejs.render(page.text, {
tutorials, tutorials,
metadata: page.metadata, metadata: page.metadata,
formatDate formatDate,
fancyLink: util.fancyLink
}, { }, {
filename: "site/tutorial-series.html.ejs" filename: "site/tutorial-series.html.ejs"
}); });
@ -95,7 +96,8 @@ async function generateIndex(allSeries: TutorialSeries[]) {
page.text = ejs.render(page.text, { page.text = ejs.render(page.text, {
allSeries, allSeries,
formatDate formatDate,
fancyLink: util.fancyLink
}, { }, {
filename: "site/tutorials.html.ejs" filename: "site/tutorials.html.ejs"
}); });

4
lib/layout.ts
View File

@ -3,6 +3,7 @@ import ejs from "ejs";
import formatDate from "date-fns/format"; import formatDate from "date-fns/format";
import * as metadata from "./metadata"; import * as metadata from "./metadata";
import { Metadata } from "./metadata"; import { Metadata } from "./metadata";
import * as util from "./util";
export default async function layout(text: string, pageMetadata: Metadata, layoutPath: string): Promise<string> { export default async function layout(text: string, pageMetadata: Metadata, layoutPath: string): Promise<string> {
const layoutFile = path.join("site/layouts", layoutPath); const layoutFile = path.join("site/layouts", layoutPath);
@ -10,7 +11,8 @@ export default async function layout(text: string, pageMetadata: Metadata, layou
text = ejs.render(layoutPage.text, { text = ejs.render(layoutPage.text, {
content: text, content: text,
metadata: pageMetadata, metadata: pageMetadata,
formatDate formatDate,
fancyLink: util.fancyLink
}, { }, {
filename: layoutFile, filename: layoutFile,
}); });

9
lib/util.ts
View File

@ -32,4 +32,13 @@ export function chunk<T>(array: T[], size: number): Chunk<T>[] {
} }
return chunks; return chunks;
}
export function fancyLink(text: string, href: string, meta?: string): string {
return `
<a href="${href}" class="fancy-link" ${meta || ""}>
<span aria-hidden="true">{</span>
${text}
<span aria-hidden="true">}</span>
</a>`;
} }

4
site/category.html.ejs
View File

@ -11,9 +11,7 @@ metadata.layout = "default.html.ejs"
<% for (const post of posts) { %> <% for (const post of posts) { %>
<article itemscope itemtype="https://schema.org/BlogPosting"> <article itemscope itemtype="https://schema.org/BlogPosting">
<h2 class="article-title" itemprop="headline"> <h2 class="article-title" itemprop="headline">
<a href="<%= post.metadata.permalink %>" class="fancy-link" itemprop="url mainEntityOfPage"> <%- fancyLink(post.metadata.title, post.metadata.permalink, `itemprop="url mainEntityOfPage"`) %>
<%= post.metadata.title %>
</a>
</h2> </h2>
<%- include("includes/article-meta.html.ejs", { metadata: post.metadata }) %> <%- include("includes/article-meta.html.ejs", { metadata: post.metadata }) %>
<div class="article-content" itemprop="description"> <div class="article-content" itemprop="description">

32
site/css/main.scss
View File

@ -149,36 +149,32 @@ a {
text-decoration: none; text-decoration: none;
transition: 0.3s ease all; transition: 0.3s ease all;
&::before, &::after { > span {
position: absolute; position: absolute;
transition: 0.3s ease all; transition: 0.3s ease all;
font-family: $monospace; font-family: $monospace;
color: transparent; color: transparent;
}
&::before { &:first-child {
content: "{"; left: 0.5em;
left: 0.5em; }
} &:last-child {
right: 0.5em;
&::after { }
content: "}";
right: 0.5em;
} }
&:hover { &:hover {
color: var(--accent-color); color: var(--accent-color);
&::before, &::after { > span {
color: var(--accent-color); color: var(--accent-color);
}
&::before { &:first-child {
left: -0.75em; left: -0.75em;
} }
&:last-child {
&::after { right: -0.75em;
right: -0.75em; }
} }
} }
} }

14
site/index.html.ejs
View File

@ -7,9 +7,7 @@ metadata.layout = "default.html.ejs"
<% for (const post of posts) { %> <% for (const post of posts) { %>
<article itemscope itemtype="https://schema.org/BlogPosting"> <article itemscope itemtype="https://schema.org/BlogPosting">
<h2 class="article-title" itemprop="headline"> <h2 class="article-title" itemprop="headline">
<a href="<%= post.metadata.permalink %>" class="fancy-link" itemprop="url mainEntityOfPage"> <%- fancyLink(post.metadata.title, post.metadata.permalink, `itemprop="url mainEntityOfPage"`) %>
<%= post.metadata.title %>
</a>
</h2> </h2>
<%- include("includes/article-meta.html.ejs", { metadata: post.metadata }) %> <%- include("includes/article-meta.html.ejs", { metadata: post.metadata }) %>
<div class="article-content" itemprop="description"> <div class="article-content" itemprop="description">
@ -22,25 +20,25 @@ metadata.layout = "default.html.ejs"
<% } %> <% } %>
</div> </div>
<div class="pagination"> <div class="pagination" role="navigation">
<p> <p>
<span class="pagination-link"> <span class="pagination-link">
<% if (pagination.prevLink) { %> <% if (pagination.prevLink) { %>
<a href="<%= pagination.prevLink %>"> <a href="<%= pagination.prevLink %>">
<span class="arrow arrow-left"></span> <span>Previous</span> <span class="arrow arrow-left" aria-hidden="true"></span> <span>Previous</span>
</a> </a>
<% } else { %> <% } else { %>
<span class="arrow arrow-left"></span> <span>Previous</span> <span class="arrow arrow-left" aria-hidden="true"></span> <span>Previous</span>
<% } %> <% } %>
</span> </span>
Page <%= pagination.current %> of <%= pagination.total %> Page <%= pagination.current %> of <%= pagination.total %>
<span class="pagination-link"> <span class="pagination-link">
<% if (pagination.nextLink) { %> <% if (pagination.nextLink) { %>
<a href="<%= pagination.nextLink %>"> <a href="<%= pagination.nextLink %>">
<span>Next</span> <span class="arrow arrow-right"></span> <span>Next</span> <span class="arrow arrow-right" aria-hidden="true"></span>
</a> </a>
<% } else { %> <% } else { %>
<span>Next</span> <span class="arrow arrow-right"></span> <span>Next</span> <span class="arrow arrow-right" aria-hidden="true"></span>
<% } %> <% } %>
</span> </span>
</p> </p>

24
site/layouts/default.html.ejs
View File

@ -46,20 +46,20 @@
<body itemscope itemtype="https://schema.org/Blog"> <body itemscope itemtype="https://schema.org/Blog">
<header class="site-header"> <header class="site-header">
<div class="container"> <div class="container">
<h1 class="site-title"><a href="/" class="fancy-link">Shadowfacts</a></h1> <h1 class="site-title"><%- fancyLink("Shadowfacts", "/") %></h1>
<p class="site-description">The outper part of a shadow is called the penumbra.</p> <p class="site-description">The outper part of a shadow is called the penumbra.</p>
<nav class="site-nav"> <nav class="site-nav" role="navigation">
<ul> <ul>
<li><a href="https://mememachine.shadowfacts.net" class="fancy-link">Meme Machine</a></li> <li><%- fancyLink("Meme Machine", "https://mememachine.shadowfacts.net") %></li>
<li><a href="https://rtfm.shadowfacts.net" class="fancy-link">RTFM</a></li> <li><%- fancyLink("RTFM", "https://rtfm.shadowfacts.net") %></li>
<li><a href="https://type.shadowfacts.net" class="fancy-link">Type</a></li> <li><%- fancyLink("Type", "https://type.shadowfacts.net") %></li>
<li><a href="/tutorials/" class="fancy-link">Tutorials</a></li> <li><%- fancyLink("Tutorials", "/tutorials/") %></li>
</ul> </ul>
</nav> </nav>
</div> </div>
</header> </header>
<div class="container"> <div class="container" role="main">
<%- content %> <%- content %>
</div> </div>
@ -74,11 +74,11 @@
</div> </div>
<nav class="social-links"> <nav class="social-links">
<ul> <ul>
<li><a href="mailto:me@shadowfacts.net" class="fancy-link">Email</a></li> <li><%- fancyLink("Email", "mailto:me@shadowfacts.net") %></li>
<li><a href="/feed.xml" class="fancy-link">RSS</a></li> <li><%- fancyLink("RSS", "/feed.xml") %></li>
<li><a href="https://github.com/shadowfacts" class="fancy-link">GitHub</a></li> <li><%- fancyLink("GitHub", "https://github.com/shadowfacts") %></li>
<li><a href="https://twitter.com/ShadowfactsDev" class="fancy-link">Twitter</a></li> <li><%- fancyLink("Twitter", "https://twitter.com/ShadowfactsDev") %></li>
<li><a href="https://social.shadowfacts.net/users/shadowfacts" class="fancy-link">Mastodon</a></li> <li><%- fancyLink("Mastodon", "https://social.shadowfacts.net/users/shadowfacts") %></li>
</ul> </ul>
</nav> </nav>
</div> </div>

4
site/tutorial-series.html.ejs
View File

@ -11,9 +11,7 @@ metadata.layout = "default.html.ejs";
<% for (const tutorial of tutorials) { %> <% for (const tutorial of tutorials) { %>
<article> <article>
<h2 class="article-title"> <h2 class="article-title">
<a href="<%= tutorial.metadata.permalink %>" class="fancy-link"> <%- fancyLink(tutorial.metadata.title, tutorial.metadata.permalink) %>
<%= tutorial.metadata.title %>
</a>
</h2> </h2>
<%- include("includes/article-meta.html.ejs", { metadata: tutorial.metadata }) %> <%- include("includes/article-meta.html.ejs", { metadata: tutorial.metadata }) %>
</article> </article>

4
site/tutorials.html.ejs
View File

@ -6,9 +6,7 @@ metadata.layout = "default.html.ejs"
<% for (const series of allSeries) { %> <% for (const series of allSeries) { %>
<article> <article>
<h2 class="article-title"> <h2 class="article-title">
<a href="<%= series.index.metadata.permalink %>" class="fancy-link"> <%- fancyLink(series.index.metadata.title, series.index.metadata.permalink) %>
<%= series.index.metadata.title %>
</a>
</h2> </h2>
<p class="article-meta"> <p class="article-meta">
last updated on last updated on