docs(code blocks): improve contents and styles

ThainBBdL · Mar 3, 2022 · 8e514a0 · 8e514a0
1 parent 14711f3
commit 8e514a0
Show file tree

Hide file tree

Showing 20 changed files with 454 additions and 463 deletions.
diff --git a/a11y.css.js b/a11y.css.js
@@ -4,7 +4,7 @@ const showdown = require('showdown')
 const fm = require('front-matter')
 const prism = require('prismjs')
 const loadLanguages = require('prismjs/components/');
-loadLanguages(['scss']);
+loadLanguages(['scss', 'css-extras']);
 const postcss = require('postcss')
 const atImport = require('postcss-import')
 const uglify = require('uglify-es')
@@ -138,29 +138,29 @@ const parseSassComment = comment => {
   htmlContent = String(htmlContent).replace(/(&lt;)+/g, '<')
   htmlContent = htmlContent.replace(/(&gt;)+/g, '>')
   let processedHTML = prism.highlight(htmlContent, prism.languages.html, 'html')
-  processedContent = processedContent.replace(markupRegex, `<div class="pre"><div>${htmlContent}</div><pre><code class="html language-html">${processedHTML}</code></pre></div>`)
+  processedContent = processedContent.replace(markupRegex, `<div class="pre"><div>${htmlContent}</div><pre><code class="html language-html" data-language="Example">${processedHTML}</code></pre></div>`)
 
   // CSS code blocks
   const stylesRegex = /((<pre><code class="css language-css">)(.[\s\S]+?)(\/code><\/pre>))/gm
   const cssRegex = /((?<=<code class="css language-css">)(.[\s\S]+?)(?=<\/code>))/gm
   let cssContent = processedContent.match(cssRegex)
-  let processedCSS = prism.highlight(String(cssContent), prism.languages.css, 'css')
-  processedContent = processedContent.replace(stylesRegex, `<div class="pre"><pre><code class="css language-css">${processedCSS}</code></pre></div>`)
+  let processedCSS = prism.highlight(String(cssContent), prism.languages.css, 'css-extras')
+  processedContent = processedContent.replace(stylesRegex, `<div class="pre"><pre><code class="css language-css" data-language="CSS">${processedCSS}</code></pre></div>`)
 
   // SCSS code blocks
   const scssBlockRegex = /((<pre><code class="scss language-scss">)(.[\s\S]+?)(\/code><\/pre>))/gm
   const scssRegex = /((?<=<code class="scss language-scss">)(.[\s\S]+?)(?=<\/code>))/gm
   let scssContent = processedContent.match(scssRegex)
   scssContent = String(scssContent).replace(/(&amp;)+/g, '&')
   let processedSCSS = prism.highlight(String(scssContent), prism.languages.scss, 'scss')
-  processedContent = processedContent.replace(scssBlockRegex, `<div class="pre"><pre><code class="scss language-scss">${processedSCSS}</code></pre></div>`)
+  processedContent = processedContent.replace(scssBlockRegex, `<div class="pre"><pre><code class="scss language-scss" data-language="Sass">${processedSCSS}</code></pre></div>`)
 
   // Sass code blocks
   const sassBlockRegex = /((<pre><code class="sass language-sass">)(.[\s\S]+?)(\/code><\/pre>))/gm
   const sassRegex = /((?<=<code class="sass language-sass">)(.[\s\S]+?)(?=<\/code>))/gm
   const sassContent = processedContent.match(sassRegex)
   let processedSASS = prism.highlight(String(sassContent), prism.languages.scss, 'scss')
-  processedContent = processedContent.replace(sassBlockRegex, `<div class="pre"><pre><code class="scss language-scss">${processedSASS}</code></pre></div>`)
+  processedContent = processedContent.replace(sassBlockRegex, `<div class="pre"><pre><code class="scss language-scss" data-language="Sass">${processedSASS}</code></pre></div>`)
 
   return {
     attributes: content.attributes,

diff --git a/docs/advices.html b/docs/advices.html
diff --git a/docs/docs.html b/docs/docs.html
diff --git a/docs/errors.html b/docs/errors.html
diff --git a/docs/index.html b/docs/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Documentation | a11y.css</title>
+    <title>a11y.css’ documentation | a11y.css</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="description"
           content="This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.">
@@ -117,7 +117,7 @@
 
     <main role="main">
 
-  <h1>Documentation</h1>
+  <h1>a11y.css’ documentation</h1>
 
       <h2>Introduction</h2>
 <p>Pronounced &quot;Alix&quot;.</p>

diff --git a/docs/obsoletes.html b/docs/obsoletes.html
@@ -159,7 +159,7 @@ <h3>References</h3>
 <li><a href="https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-8-2">https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-8-2</a></li>
 </ul>
 <h3>Selector</h3>
-<div class="pre"><pre><code class="css language-css">applet<span class="token punctuation">,</span>
+<div class="pre"><pre><code class="css language-css" data-language="CSS">applet<span class="token punctuation">,</span>
 acronym<span class="token punctuation">,</span>
 bgsound<span class="token punctuation">,</span>
 dir<span class="token punctuation">,</span>
@@ -192,7 +192,7 @@ <h3>Selector</h3>
 </code></pre></div>
 <h3>Test</h3>
 <div class="pre"><div><acronym title="World Wide Web Consortium">W3C</acronym>
-</div><pre><code class="html language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>acronym</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>World Wide Web Consortium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>W3C<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>acronym</span><span class="token punctuation">></span></span>
+</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>acronym</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>World Wide Web Consortium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>W3C<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>acronym</span><span class="token punctuation">></span></span>
 </code></pre></div>
         </article>
 
@@ -209,7 +209,7 @@ <h3>References</h3>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta</a></li>
 </ul>
 <h3>Selector</h3>
-<div class="pre"><pre><code class="css language-css">[dropzone]<span class="token punctuation">,</span>
+<div class="pre"><pre><code class="css language-css" data-language="CSS">[dropzone]<span class="token punctuation">,</span>
 a[charset]<span class="token punctuation">,</span> link[charset]<span class="token punctuation">,</span>
 a[coords]<span class="token punctuation">,</span>
 a[shape]<span class="token punctuation">,</span>
@@ -292,7 +292,7 @@ <h3>Selector</h3>
 </code></pre></div>
 <h3>Test</h3>
 <div class="pre"><div><h3 align="right">I'm using [align]!</h3>
-</div><pre><code class="html language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm using [align]!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
+</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm using [align]!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
 </code></pre></div>
         </article>
 

diff --git a/docs/static/docs.css b/docs/static/docs.css
@@ -146,6 +146,7 @@ h1 {
 h2[id] {
   background-color: #fcf9e9;
   counter-increment: titles;
+  display: inline-block;
   font-size: 3em;
   line-height: 1;
   margin: 1em 0 .5em;
@@ -282,7 +283,7 @@ pre {
   color: #032c36;
   direction: ltr;
   font-family: monospace;
-  font-size: small;
+  font-size: 1em;
   -webkit-hyphens: none;
       -ms-hyphens: none;
           hyphens: none;
@@ -550,7 +551,7 @@ aside img {
 
 /* Code blocks */
 
-pre {
+.pre {
   background: #fffef9;
   border: 1px solid #e5dec8;
   border-radius: .25rem;
@@ -568,7 +569,7 @@ pre {
 
 .pre > div {
   background: #fff;
-  margin: 2em 0;
+  margin: 2.5em 0;
   padding: 1em;
 }
 
@@ -583,15 +584,15 @@ pre {
 
 .pre pre:only-child code {
   display: block;
-  margin: 2em 0 0;
+  margin: 2.5em 0 0;
 }
 
 .pre code::before {
   background: #fcf9e9;
   border: 1px solid #e5dec8;
   border-radius: .25rem 0 .25rem 0;
   color: #7b6e50;
-  content: "Example";
+  content: attr(data-language);
   font-family: var(--font-stack);
   font-style: italic;
   left: -1px;
@@ -600,19 +601,11 @@ pre {
   top: -1px;
 }
 
-.pre code[class*="css"]::before {
-  content: "CSS";
-}
-
-.pre code[class*="scss"]::before {
-  content: "Sass";
-}
-
 /* Footer */
 
 .builtWith {
   border-top: 0;
-  margin: -2rem 0 0 auto;
+  margin: -2rem 2rem 0 auto;
   padding: 1rem;
   width: -webkit-fit-content;
   width: -moz-fit-content;