andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix stripping of doctype declaration

Browse Source
This commit is contained in:
atomiks
2018-02-28 18:14:41 +10:00
parent 76f6f4f48a
commit 506a73f175
4 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/4d4edbda57043aeeabeac31d2dd12d0d.js
View File

File diff suppressed because one or more lines are too long

2
docs/index.html
View File

@ -1,4 +1,4 @@
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>30 Seconds of CSS</title> <link rel="icon" type="image/png" sizes="32x32" href="cf2ed1ce6be4ba59eed1079db594cc6e.png"> <script src="4d4edbda57043aeeabeac31d2dd12d0d.js" defer=""></script> <script async="" defer="" src="https://buttons.github.io/buttons.js"></script> <link rel="stylesheet" href="4d4edbda57043aeeabeac31d2dd12d0d.css"></head> <body> <button class="back-to-top-button" aria-label="back to top">↑</button> <nav class="sidebar" aria-label="Table of Contents"> <button class="hamburger hamburger--spin sidebar__menu" type="button" aria-label="Menu"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> <div class="sidebar__links"> <a class="sidebar__link" href="#clearfix">Clearfix</a> <a class="sidebar__link" href="#constant-width-to-height-ratio">Constant width to height ratio</a> <a class="sidebar__link" href="#custom-text-selection">Custom text selection</a> <a class="sidebar__link" href="#easing-variables">Easing variables</a> <a class="sidebar__link" href="#etched-text">Etched text</a> <a class="sidebar__link" href="#gradient-text">Gradient text</a> <a class="sidebar__link" href="#hairline-border">Hairline border</a> <a class="sidebar__link" href="#horizontal-and-vertical-centering">Horizontal and vertical centering</a> <a class="sidebar__link" href="#mouse-cursor-gradient-tracking">Mouse cursor gradient tracking</a> <a class="sidebar__link" href="#overflow-scroll-gradient">Overflow scroll gradient</a> <a class="sidebar__link" href="#popout-menu">Popout menu</a> <a class="sidebar__link" href="#pretty-text-underline">Pretty text underline</a> <a class="sidebar__link" href="#shape-separator">Shape separator</a> <a class="sidebar__link" href="#system-font-stack">System font stack</a> <a class="sidebar__link" href="#triangle">Triangle</a> <a class="sidebar__link" href="#truncate-text">Truncate text</a> </div> </nav> <div class="content-wrapper"> <header class="header"> <div class="container"> <img class="header__logo" draggable="false" src="76f3fcef6c36c4d7c29fc6fcd102dfe3.png"> <h1 class="header__heading">30 Seconds of <strong class="header__css">CSS</strong></h1> <p class="header__description"> A curated collection of useful CSS snippets you can understand in 30 seconds or less. </p> <a class="github-button header__github-button" href="https://github.com/atomiks/30-seconds-of-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star atomiks/30-seconds-of-css on GitHub">Star</a> </div> </header> <main class="main" id="main"> <div class="container"> <div class="snippet"> <h3 id="clearfix">Clearfix</h3> <p>Ensures that an element self-clears its children.</p> <h6 data-type="Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.">Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.</h6> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="clearfix"&gt;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>30 Seconds of CSS</title> <link rel="icon" type="image/png" sizes="32x32" href="cf2ed1ce6be4ba59eed1079db594cc6e.png"> <script src="4d4edbda57043aeeabeac31d2dd12d0d.js" defer=""></script> <script async="" defer="" src="https://buttons.github.io/buttons.js"></script> <link rel="stylesheet" href="4d4edbda57043aeeabeac31d2dd12d0d.css"></head> <body> <button class="back-to-top-button" aria-label="back to top">↑</button> <nav class="sidebar" aria-label="Table of Contents"> <button class="hamburger hamburger--spin sidebar__menu" type="button" aria-label="Menu"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> <div class="sidebar__links"> <a class="sidebar__link" href="#clearfix">Clearfix</a> <a class="sidebar__link" href="#constant-width-to-height-ratio">Constant width to height ratio</a> <a class="sidebar__link" href="#custom-text-selection">Custom text selection</a> <a class="sidebar__link" href="#easing-variables">Easing variables</a> <a class="sidebar__link" href="#etched-text">Etched text</a> <a class="sidebar__link" href="#gradient-text">Gradient text</a> <a class="sidebar__link" href="#hairline-border">Hairline border</a> <a class="sidebar__link" href="#horizontal-and-vertical-centering">Horizontal and vertical centering</a> <a class="sidebar__link" href="#mouse-cursor-gradient-tracking">Mouse cursor gradient tracking</a> <a class="sidebar__link" href="#overflow-scroll-gradient">Overflow scroll gradient</a> <a class="sidebar__link" href="#popout-menu">Popout menu</a> <a class="sidebar__link" href="#pretty-text-underline">Pretty text underline</a> <a class="sidebar__link" href="#shape-separator">Shape separator</a> <a class="sidebar__link" href="#system-font-stack">System font stack</a> <a class="sidebar__link" href="#triangle">Triangle</a> <a class="sidebar__link" href="#truncate-text">Truncate text</a> </div> </nav> <div class="content-wrapper"> <header class="header"> <div class="container"> <img class="header__logo" draggable="false" src="76f3fcef6c36c4d7c29fc6fcd102dfe3.png"> <h1 class="header__heading">30 Seconds of <strong class="header__css">CSS</strong></h1> <p class="header__description"> A curated collection of useful CSS snippets you can understand in 30 seconds or less. </p> <a class="github-button header__github-button" href="https://github.com/atomiks/30-seconds-of-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star atomiks/30-seconds-of-css on GitHub">Star</a> </div> </header> <main class="main" id="main"> <div class="container"> <div class="snippet"> <h3 id="clearfix">Clearfix</h3> <p>Ensures that an element self-clears its children.</p> <h6 data-type="Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.">Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.</h6> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="clearfix"&gt;
&lt;div class="floated"&gt;float a&lt;/div&gt;
&lt;div class="floated"&gt;float b&lt;/div&gt;
&lt;div class="floated"&gt;float c&lt;/div&gt;

2
index.html
View File

@ -1,3 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

8
scripts/build.js
View File

@ -67,4 +67,10 @@ for (const snippetFile of fs.readdirSync(SNIPPETS_PATH)) {
)
}
fs.writeFileSync('./index.html', pretty(document.documentElement.outerHTML, { ocd: true }))
// doctype declaration gets stripped, add it back in
const html = `
<!DOCTYPE html>
${pretty(document.documentElement.outerHTML, { ocd: true })}
`
fs.writeFileSync('./index.html', html)