Skip to content

Commit

Permalink
πŸ”’ feat: add a Content Security Policy to the docs site.
Browse files Browse the repository at this point in the history
This CSP using a hash to allow a few specific inline scripts and
styles.
  • Loading branch information
bryanbraun committed Aug 10, 2021
1 parent 3c98543 commit b351b48
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 9 deletions.
68 changes: 67 additions & 1 deletion docs/css/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,25 @@
--demo-option-border-thickness: 4px;
}

/* latin-ext */
@font-face {
font-family: 'Blinker';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/blinker/v4/cIf9MaFatEE-VTaP9CChYUsEkIpdQQ.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Blinker';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/blinker/v4/cIf9MaFatEE-VTaP9C6hYUsEkIo.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
box-sizing: border-box;
font-size: 16px;
Expand Down Expand Up @@ -79,7 +98,6 @@ h1,h2,h3,h4,h5,h6 {
font-family: var(--cbl-display-font);
}


/* basic component styles */

.page {
Expand Down Expand Up @@ -267,6 +285,13 @@ h3.demo-title { /* we're using this element selector for additional specificity
margin: 8px 0 0;
}

/* Constraining images */
.cb-16x16 {
width: 16px;
height: 16px;
vertical-align: middle;
}

/* Mouse-users see the normal color when clicking on an option instead of the focus-color */
.no-focus .demobox input[type="radio"]:checked:focus + label {
border: var(--demo-option-border-thickness) solid var(--checkbox-blue);
Expand Down Expand Up @@ -321,3 +346,44 @@ h3.demo-title { /* we're using this element selector for additional specificity
color: #61ae24;
text-decoration: none;
}

/* Github corner styles */
.github-corner svg {
fill: #151513;
color:#fff;
position: absolute;
top: 0;
border: 0;
right: 0;
}

.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
.octo-arm {
transform-origin: 130px 106px;
}

@keyframes octocat-wave {
0%,
100% {
transform: rotate(0);
}
20%,
60% {
transform: rotate(-25deg);
}
40%,
80% {
transform: rotate(10deg);
}
}

@media (max-width:500px) {
.github-corner:hover .octo-arm {
animation: none;
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
}
9 changes: 9 additions & 0 deletions docs/js/vendor/anchor.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

34 changes: 26 additions & 8 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,9 @@
<meta property="og:type" content="website">
<meta property="og:image" content="https://bryanbraun.com/checkboxland/docs/img/checkboxland-logo.png">

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'sha256-D0c+hzoDMMxO+ZYOgA6FKzW2ZJnDBo9Qnm0gGo4Kxsg='; style-src 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='; font-src data: fonts.gstatic.com;">

<link rel="icon" type="image/png" sizes="16x16" href="docs/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Blinker:400&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="docs/css/styles.css" />
<link rel="stylesheet" type="text/css" href="docs/css/cbl-normalize-size.css" />
</head>
Expand Down Expand Up @@ -232,16 +233,16 @@ <h2 id="an-example">An Example</h2>

<small><p><em>(note: you can <a href="https://codepen.io/bryanbraun/pen/YzwoxpB">play with this example on Codepen</a> and fork it to build your own demos)</em></p></small>

<p><img src="docs/img/checkbox-heart.png" style="width:115px; height:102px" alt="a grid of checkboxes displaying the shape of a heart" /></p>
<p><img src="docs/img/checkbox-heart.png" width="115" height="102" alt="a grid of checkboxes displaying the shape of a heart" /></p>

<p>So what happened?</p>

<p>We created a JavaScript matrix (an array of arrays) to represent the grid. Each location in the matrix represents a checkbox, where:</p>

<ul>
<li>0 = <img src="docs/img/unchecked.png" style="width:16px; height:16px; vertical-align: middle;" alt="a single, unchecked, checkbox" /> (unchecked)</li>
<li>1 = <img src="docs/img/checked.png" style="width:16px; height:16px; vertical-align: middle;" alt="a single, checked, checkbox" /> (checked)</li>
<li>2 = <img src="docs/img/indeterminate.png" style="width:16px; height:16px; vertical-align: middle;" alt="a single, indeterminate, checkbox" /> (indeterminate)</li>
<li>0 = <img src="docs/img/unchecked.png" class="cb-16x16" alt="a single, unchecked, checkbox" /> (unchecked)</li>
<li>1 = <img src="docs/img/checked.png" class="cb-16x16" alt="a single, checked, checkbox" /> (checked)</li>
<li>2 = <img src="docs/img/indeterminate.png" class="cb-16x16" alt="a single, indeterminate, checkbox" /> (indeterminate)</li>
</ul>

<p>By passing this matrix to our <code>setData()</code> method, we update the checkbox grid on the page.</p>
Expand Down Expand Up @@ -647,10 +648,27 @@ <h3 id="an-example-plugin">An Example</h3>
</main>
</div>

<a href="https://github.com/bryanbraun/checkboxland" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.2.2/anchor.min.js"></script>
<a href="https://github.com/bryanbraun/checkboxland" class="github-corner" aria-label="View source on GitHub">
<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a>
<script src="docs/js/vendor/anchor.min.js"></script>
<script type="module" src="docs/js/index.js"></script>
<script>
console.log(' βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ ');
console.log('βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“');
console.log('βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“');
console.log('βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“');
console.log('βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“');
console.log('βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“');
console.log('βœ“ βœ“ βœ“ βœ“ βœ“ βœ“');
console.log('βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“');
console.log('βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“');
console.log(' βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ βœ“ ');
</script>
</body>

</html>

0 comments on commit b351b48

Please sign in to comment.