From 8784621e43df8d64379cfef410c7d99dc7b578a7 Mon Sep 17 00:00:00 2001 From: Luccas Mateus de Medeiros Gomes Date: Thu, 20 Jul 2023 11:11:35 -0300 Subject: [PATCH] [site][xs] - fix accessbiility --- site/content/docs/index.md | 6 +-- site/lib/markdown.mjs | 75 +++++++++++++++++++++----------------- site/styles/globals.css | 4 +- 3 files changed, 46 insertions(+), 39 deletions(-) diff --git a/site/content/docs/index.md b/site/content/docs/index.md index 7a1b9482..588d8d96 100644 --- a/site/content/docs/index.md +++ b/site/content/docs/index.md @@ -38,7 +38,7 @@ Let's check it's working and what we have! Open http://localhost:3000 from your You should see a page like this when you access http://localhost:3000. This is the starter template page which shows the most simple data portal you could have: a simple README plus csv file. - +Basic example ### Editing the Page @@ -51,8 +51,8 @@ Let’s try editing the starter page. After refreshing the page, you should see the new text: - +Editing base example -Congratulations! The app is up and running and you learned how to edit a page. In the next lesson, you are going to learn how to create new datasets. +Congratulations! The app is up and running and you learned how to edit a page. In the next lesson, you are going to learn how to create new datasets. diff --git a/site/lib/markdown.mjs b/site/lib/markdown.mjs index f2dfedf8..c889cba6 100644 --- a/site/lib/markdown.mjs +++ b/site/lib/markdown.mjs @@ -1,21 +1,21 @@ -import { h } from "hastscript"; -import matter from "gray-matter"; -import mdxmermaid from "mdx-mermaid"; -import remarkCallouts from "@portaljs/remark-callouts"; -import remarkEmbed from "@portaljs/remark-embed"; -import remarkGfm from "remark-gfm"; -import remarkMath from "remark-math"; -import remarkSmartypants from "remark-smartypants"; -import remarkToc from "remark-toc"; -import remarkWikiLink, { getPermalinks } from "@portaljs/remark-wiki-link"; -import rehypeAutolinkHeadings from "rehype-autolink-headings"; -import rehypeKatex from "rehype-katex"; -import rehypeSlug from "rehype-slug"; -import rehypePrismPlus from "rehype-prism-plus"; -import { serialize } from "next-mdx-remote/serialize"; +import { h } from 'hastscript'; +import matter from 'gray-matter'; +import mdxmermaid from 'mdx-mermaid'; +import remarkCallouts from '@portaljs/remark-callouts'; +import remarkEmbed from '@portaljs/remark-embed'; +import remarkGfm from 'remark-gfm'; +import remarkMath from 'remark-math'; +import remarkSmartypants from 'remark-smartypants'; +import remarkToc from 'remark-toc'; +import remarkWikiLink, { getPermalinks } from '@portaljs/remark-wiki-link'; +import rehypeAutolinkHeadings from 'rehype-autolink-headings'; +import rehypeKatex from 'rehype-katex'; +import rehypeSlug from 'rehype-slug'; +import rehypePrismPlus from 'rehype-prism-plus'; +import { serialize } from 'next-mdx-remote/serialize'; -import * as tw from "../tailwind.config"; -import { siteConfig } from "../config/siteConfig"; +import * as tw from '../tailwind.config'; +import { siteConfig } from '../config/siteConfig'; /** * Parse a markdown or MDX file to an MDX source form + front matter data @@ -36,14 +36,14 @@ const parse = async function (source, format, scope) { remarkPlugins: [ remarkEmbed, remarkGfm, - [remarkSmartypants, { quotes: false, dashes: "oldschool" }], + [remarkSmartypants, { quotes: false, dashes: 'oldschool' }], remarkMath, remarkCallouts, - [remarkWikiLink, { permalinks, pathFormat: "obsidian-short" }], + [remarkWikiLink, { permalinks, pathFormat: 'obsidian-short' }], [ remarkToc, { - heading: "Table of contents", + heading: 'Table of contents', tight: true, }, ], @@ -54,29 +54,36 @@ const parse = async function (source, format, scope) { [ rehypeAutolinkHeadings, { - properties: { className: "heading-link" }, + properties: { className: 'heading-link' }, test(element) { return ( - ["h2", "h3", "h4", "h5", "h6"].includes(element.tagName) && - element.properties?.id !== "table-of-contents" && - element.properties?.className !== "blockquote-heading" + ['h2', 'h3', 'h4', 'h5', 'h6'].includes(element.tagName) && + element.properties?.id !== 'table-of-contents' && + element.properties?.className !== 'blockquote-heading' ); }, - content() { + content(node) { return [ h( - "svg", + 'span.invisible.block.h-0.w-0', + { ariaLabel: node.properties.id }, + 'Read the “', + node.properties.id, + '” section' + ), + h( + 'svg', { - xmlns: "http:www.w3.org/2000/svg", + xmlns: 'http:www.w3.org/2000/svg', fill: tw.theme.extend.colors.secondary.DEFAULT, - viewBox: "0 0 20 20", - className: "w-5 h-5", + viewBox: '0 0 20 20', + className: 'w-5 h-5', }, [ - h("path", { - fillRule: "evenodd", - clipRule: "evenodd", - d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z", + h('path', { + fillRule: 'evenodd', + clipRule: 'evenodd', + d: 'M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z', }), ] ), @@ -84,7 +91,7 @@ const parse = async function (source, format, scope) { }, }, ], - [rehypeKatex, { output: "mathml" }], + [rehypeKatex, { output: 'mathml' }], [rehypePrismPlus, { ignoreMissing: true }], ], format, diff --git a/site/styles/globals.css b/site/styles/globals.css index dcc38b2c..0875331c 100644 --- a/site/styles/globals.css +++ b/site/styles/globals.css @@ -1,4 +1,4 @@ -@import "@portaljs/remark-callouts/styles.css"; +@import '@portaljs/remark-callouts/styles.css'; @import './prism.css'; html, @@ -31,7 +31,7 @@ html { /* tooltip fade-out clip */ .tooltip-body::after { - content: ""; + content: ''; position: absolute; right: 0; top: 3.6rem; /* multiple of $line-height used on the tooltip body (defined in tooltipBodyStyle) */