[wip] Add styles to Snowpack app (#13)
* Add styles to Snowpack app * Bubble up file build errors * Fix merge error
This commit is contained in:
Drew Powers
GitHub
parent
9de1e8feab
commit
1fdc1c799a
25 changed files with 1745 additions and 1164 deletions
|
|
@ -7,4 +7,4 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,115 @@
|
||||||
|
<style type="text/scss">
|
||||||
|
@use '../../public/css/var' as *;
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 50vh;
|
||||||
|
min-height: 20rem;
|
||||||
|
max-height: 30rem;
|
||||||
|
color: #111;
|
||||||
|
line-height: 1.5;
|
||||||
|
background: #2a85ca40;
|
||||||
|
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512' title='mountain' class='logo' fill='%23FFFB'%3E%3Cpath d='M634.92 462.7l-288-448C341.03 5.54 330.89 0 320 0s-21.03 5.54-26.92 14.7l-288 448a32.001 32.001 0 0 0-1.17 32.64A32.004 32.004 0 0 0 32 512h576c11.71 0 22.48-6.39 28.09-16.67a31.983 31.983 0 0 0-1.17-32.63zM320 91.18L405.39 224H320l-64 64-38.06-38.06L320 91.18z' /%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: calc(100% + 100px) calc(100% + 64px);
|
||||||
|
background-size: 50%;
|
||||||
|
border-bottom: 1px solid #0003;
|
||||||
|
//margin-top: $nav-height;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-l) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
> svg {
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.logo path {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 1rem * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-cta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 1.5rem auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-link {
|
||||||
|
padding-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
float: left;
|
||||||
|
margin: 0 -20px 0 0;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 36px;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-m) {
|
||||||
|
margin: 0 20px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 31px;
|
||||||
|
height: 31px;
|
||||||
|
margin-right: 8px;
|
||||||
|
margin-left: 2px;
|
||||||
|
padding: 0;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-snowpack {
|
||||||
|
margin: 0 auto 0.75rem;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 3.5rem;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -0.045em;
|
||||||
|
text-align: center;
|
||||||
|
opacity: 0.9;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-m) {
|
||||||
|
max-width: none;
|
||||||
|
font-size: 5.75rem;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-snowpack-subtitle {
|
||||||
|
margin: 0;
|
||||||
|
margin: auto;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-m) {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class="hero">
|
<div class="hero">
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h1 class="header-snowpack">Snowpack</h1>
|
<h1 class="header-snowpack">Snowpack</h1>
|
||||||
|
|
|
||||||
|
|
@ -1,84 +1,130 @@
|
||||||
<nav class="snow-toc">
|
<style type="text/scss">
|
||||||
<ol class="snow-toc-contents">
|
@use '../../public/css/var' as *;
|
||||||
<li class="snow-toc-section">
|
|
||||||
<span class="snow-toc-section-header">Concepts</span>
|
.toc {
|
||||||
<ol class="snow-toc-section-items">
|
transition: padding 0.2s ease-out, opacity 0.2s ease-in-out;
|
||||||
<li>
|
}
|
||||||
<a class="snow-toc-link" href="/concepts/how-snowpack-works">How Snowpack Works</a>
|
|
||||||
</li>
|
.contents {
|
||||||
<li>
|
margin: 0;
|
||||||
<a class="snow-toc-link" href="/concepts/dev-server">The Dev Server</a>
|
padding: 0;
|
||||||
</li>
|
line-height: 1.8;
|
||||||
<li>
|
list-style: none;
|
||||||
<a class="snow-toc-link" href="/concepts/build-pipeline">The Build Pipeline</a>
|
}
|
||||||
</li>
|
|
||||||
<li>
|
.section {
|
||||||
<a class="snow-toc-link" href="/concepts/hot-module-replacement">Fast Refresh & HMR</a>
|
+ .section {
|
||||||
</li>
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: rgba($white, 0.6);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: $heading;
|
||||||
|
line-height: 1.2em;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-m) {
|
||||||
|
color: $dark-grey;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.items {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link,
|
||||||
|
.subnav a {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
color: $white;
|
||||||
|
text-decoration: none;
|
||||||
|
border: none;
|
||||||
|
transition: color 0.3s;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-m) {
|
||||||
|
color: $grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
left: -19px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 1;
|
||||||
|
opacity: 0;
|
||||||
|
transition: left 0.14s ease-out;
|
||||||
|
content: '▸';
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #0c8cec;
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: -17px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<nav class="toc">
|
||||||
|
<ol class="contents">
|
||||||
|
<li class="section">
|
||||||
|
<span class="header">Concepts</span>
|
||||||
|
<ol class="items">
|
||||||
|
<li><a class="link" href="/concepts/how-snowpack-works">How Snowpack Works</a></li>
|
||||||
|
<li><a class="link" href="/concepts/dev-server">The Dev Server</a></li>
|
||||||
|
<li><a class="link" href="/concepts/build-pipeline">The Build Pipeline</a></li>
|
||||||
|
<li><a class="link" href="/concepts/hot-module-replacement">Fast Refresh & HMR</a></li>
|
||||||
</ol>
|
</ol>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="snow-toc-section">
|
<li class="section">
|
||||||
<span class="snow-toc-section-header">Getting Started</span>
|
<span class="header">Getting Started</span>
|
||||||
<ol class="snow-toc-section-items">
|
<ol class="items">
|
||||||
<li>
|
<li><a class="link" href="/tutorials/quick-start">Quick Start</a></li>
|
||||||
<a class="snow-toc-link" href="/tutorials/quick-start">Quick Start</a>
|
<li><a class="link" href="/tutorials/getting-started">Getting Started</a></li>
|
||||||
</li>
|
<li><a class="link" href="/tutorials/react">React</a></li>
|
||||||
<li>
|
<li><a class="link" href="/tutorials/svelte">Svelte</a></li>
|
||||||
<a class="snow-toc-link" href="/tutorials/getting-started">Getting Started</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="snow-toc-link" href="/tutorials/react">React</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="snow-toc-link" href="/tutorials/svelte">Svelte</a>
|
|
||||||
</li>
|
|
||||||
</ol>
|
</ol>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="snow-toc-section">
|
<li class="section">
|
||||||
<a class="snow-toc-link" href="/guides">
|
<a class="link" href="/guides"><span class="header">Guides</span></a>
|
||||||
<span class="snow-toc-section-header">Guides</span></a>
|
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="snow-toc-section">
|
<li class="section">
|
||||||
<span class="snow-toc-section-header">Reference</span>
|
<span class="header">Reference</span>
|
||||||
<ol class="snow-toc-section-items">
|
<ol class="items">
|
||||||
<li>
|
<li><a class="link" href="/reference/configuration">snowpack.config.js</a></li>
|
||||||
<a class="snow-toc-link" href="/reference/configuration">snowpack.config.js</a>
|
<li><a class="link" href="/reference/cli-command-line-interface">Command Line API</a></li>
|
||||||
</li>
|
<li><a class="link" href="/reference/javascript-interface">JavaScript API</a></li>
|
||||||
<li>
|
<li><a class="link" href="/reference/plugins">Plugin API</a></li>
|
||||||
<a class="snow-toc-link" href="/reference/cli-command-line-interface">Command Line API</a>
|
<li><a class="link" href="/reference/environment-variables">Environment Variables</a></li>
|
||||||
</li>
|
<li><a class="link" href="/reference/hot-module-replacement">HMR API</a></li>
|
||||||
<li>
|
<li><a class="link" href="/reference/supported-files">Supported Files</a></li>
|
||||||
<a class="snow-toc-link" href="/reference/javascript-interface">JavaScript API</a>
|
<li><a class="link" href="/reference/common-error-details">Common Errors</a></li>
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="snow-toc-link" href="/reference/plugins">Plugin API</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="snow-toc-link" href="/reference/environment-variables">Environment Variables</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="snow-toc-link" href="/reference/hot-module-replacement">HMR API</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="snow-toc-link" href="/reference/supported-files">Supported Files</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="snow-toc-link" href="/reference/common-error-details">Common Errors</a>
|
|
||||||
</li>
|
|
||||||
</ol>
|
</ol>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="snow-toc-section">
|
<li class="section">
|
||||||
<a class="snow-toc-link" href="/plugins">
|
<a class="link" href="/plugins"><span class="section-header">Plugin Catalog</span></a>
|
||||||
<span class="snow-toc-section-header">Plugin Catalog</span></a>
|
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="snow-toc-section">
|
<li class="section">
|
||||||
<a class="snow-toc-link" href="/news">
|
<a class="link" href="/news"><span class="section-header">Community & News</span></a>
|
||||||
<span class="snow-toc-section-header">Community & News</span></a>
|
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,230 @@
|
||||||
<script astro>
|
<script astro>
|
||||||
export let props: {version: string};
|
export let props: { version: string };
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<nav class="snow-nav">
|
<style type="text/scss">
|
||||||
<button id="toc-drawer-button" class="snow-nav-mobile-open" type="button" aria-expanded="false"
|
@use '../../public/css/var' as *;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Top nav
|
||||||
|
* The thing at the top
|
||||||
|
*/
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: map-get($map: $layers, $key: 'nav');
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas:
|
||||||
|
'mobile logo version'
|
||||||
|
'search search search';
|
||||||
|
grid-template-rows: $nav-height $nav-height;
|
||||||
|
grid-template-columns: 1fr 2fr 1fr;
|
||||||
|
align-items: center;
|
||||||
|
height: $nav-height;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
padding-left: 0.625rem;
|
||||||
|
color: $white;
|
||||||
|
background-color: $dark-blue;
|
||||||
|
|
||||||
|
body.is-nav-open & {
|
||||||
|
height: $nav-height * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-m) {
|
||||||
|
display: flex;
|
||||||
|
height: $nav-height;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.5em;
|
||||||
|
color: $white;
|
||||||
|
font-weight: 500;
|
||||||
|
text-decoration: none;
|
||||||
|
opacity: 0.7;
|
||||||
|
transition: opacity 150ms linear;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__desktop {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-m) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
grid-area: logo;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.5rem;
|
||||||
|
color: $white;
|
||||||
|
font-size: 24px;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-m) {
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 0.5rem 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-open {
|
||||||
|
display: flex;
|
||||||
|
grid-area: mobile;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
padding: 0;
|
||||||
|
color: $white;
|
||||||
|
font-size: 16px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
appearance: none;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-m) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1000;
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
grid-area: search;
|
||||||
|
margin: 0 6px;
|
||||||
|
> * {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-m) {
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $breakpoint-m - 1) {
|
||||||
|
& {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
body.is-nav-open & {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .sr-only {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-hint {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
display: none;
|
||||||
|
padding: 6px 12px;
|
||||||
|
color: #c2ced9;
|
||||||
|
font-size: 16px;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
& * {
|
||||||
|
font-family: $code;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1px;
|
||||||
|
height: 1.5em;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
vertical-align: -35%;
|
||||||
|
background-color: rgba($white, 0.25);
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-m) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
flex-grow: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
overflow: visible;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 100%;
|
||||||
|
font-family: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
background-color: #446e8f;
|
||||||
|
border-color: rgba($white, 0.25);
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
outline: 0;
|
||||||
|
transition-timing-function: ease-in-out;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
transition-property: border-color, color;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
color: white;
|
||||||
|
border-color: rgba($white, 0.75);
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: rgba($white, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&::placeholder {
|
||||||
|
color: #c2ced9;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__desktop {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-m) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.version {
|
||||||
|
grid-area: version;
|
||||||
|
margin-left: 0.5em;
|
||||||
|
font-size: 0.8em;
|
||||||
|
font-family: $code;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-m) {
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1px;
|
||||||
|
height: 1.5em;
|
||||||
|
margin-left: 0.5em;
|
||||||
|
vertical-align: -25%;
|
||||||
|
background-color: rgba($white, 0.25);
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<nav class="nav">
|
||||||
|
<button id="toc-drawer-button" class="mobile-open" type="button" aria-expanded="false"
|
||||||
aria-controls="nav-primary">
|
aria-controls="nav-primary">
|
||||||
<svg focusable="false" class="snow-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512">
|
<svg focusable="false" class="snow-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512">
|
||||||
<title>Toggle mobile menu</title>
|
<title>Toggle mobile menu</title>
|
||||||
|
|
@ -12,7 +233,7 @@
|
||||||
</path>
|
</path>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<a class="snow-nav-logo snow-logo" href="/">
|
<a class="logo snow-logo" href="/">
|
||||||
<svg class="snow-logo-icon" viewbox="0 0 640 512" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
<svg class="snow-logo-icon" viewbox="0 0 640 512" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
<g transform="translate(-1.000000, 0.000000)" fill-rule="nonzero">
|
<g transform="translate(-1.000000, 0.000000)" fill-rule="nonzero">
|
||||||
|
|
@ -21,12 +242,12 @@
|
||||||
id="Shape"></path>
|
id="Shape"></path>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<span class="snow-logo-type">Snowpack</span>
|
<span class="logo-type">Snowpack</span>
|
||||||
</a>
|
</a>
|
||||||
<div class="search-form">
|
<div class="search">
|
||||||
<input type="text" name="search" placeholder="Search documentation..." class="search-form-input"
|
<input type="text" name="search" placeholder="Search documentation..." class="search-form-input"
|
||||||
id="search-form-input">
|
id="search-input">
|
||||||
<span class="search-form-hint">
|
<span class="search-hint">
|
||||||
<span class="sr-only">Press </span>
|
<span class="sr-only">Press </span>
|
||||||
<kbd class="font-sans"><abbr title="Command" style="text-decoration: none;">⌘</abbr></kbd>
|
<kbd class="font-sans"><abbr title="Command" style="text-decoration: none;">⌘</abbr></kbd>
|
||||||
<span class="sr-only"> and </span>
|
<span class="sr-only"> and </span>
|
||||||
|
|
@ -35,10 +256,10 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="flex-grow: 1"></div>
|
<div style="flex-grow: 1"></div>
|
||||||
<a href="https://github.com/snowpackjs/snowpack/releases" target="_blank" class="snow-nav-link snow-nav-version">
|
<a href="https://github.com/snowpackjs/snowpack/releases" target="_blank" class="link version">
|
||||||
{`v${props.version}`}
|
{`v${props.version}`}
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/snowpackjs/snowpack" target="_blank" class="snow-nav-link snow-nav-link__desktop">
|
<a href="https://github.com/snowpackjs/snowpack" target="_blank" class="link link__desktop">
|
||||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="snow-icon" role="img"
|
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="snow-icon" role="img"
|
||||||
xmlns="http://www.w3.org/2000/svg" viewbox="0 0 496 512">
|
xmlns="http://www.w3.org/2000/svg" viewbox="0 0 496 512">
|
||||||
<path fill="currentColor"
|
<path fill="currentColor"
|
||||||
|
|
@ -46,7 +267,7 @@
|
||||||
</path>
|
</path>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://twitter.com/snowpackjs" target="_blank" class="snow-nav-link snow-nav-link__desktop">
|
<a href="https://twitter.com/snowpackjs" target="_blank" class="link link__desktop">
|
||||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="snow-icon" role="img"
|
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="snow-icon" role="img"
|
||||||
xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
|
xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
|
||||||
<path fill="currentColor"
|
<path fill="currentColor"
|
||||||
|
|
@ -54,7 +275,7 @@
|
||||||
</path>
|
</path>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://discord.gg/snowpack" target="_blank" class="snow-nav-link snow-nav-link__desktop">
|
<a href="https://discord.gg/snowpack" target="_blank" class="link link__desktop">
|
||||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="discord" class="snow-icon" role="img"
|
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="discord" class="snow-icon" role="img"
|
||||||
xmlns="http://www.w3.org/2000/svg" viewbox="0 0 210 240">
|
xmlns="http://www.w3.org/2000/svg" viewbox="0 0 210 240">
|
||||||
<path
|
<path
|
||||||
|
|
@ -64,6 +285,7 @@
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function handleMobileNav(evt) {
|
function handleMobileNav(evt) {
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
|
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
|
|
||||||
#loading-message {
|
|
||||||
margin: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.cards {
|
|
||||||
list-style: none;
|
|
||||||
max-width: 600px;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
.plugin-icon {
|
|
||||||
height: 52px;
|
|
||||||
width: 52px;
|
|
||||||
opacity: .5;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
/* background: radial-gradient(to top,red,blue); */
|
|
||||||
position: absolute;
|
|
||||||
top: 13px;
|
|
||||||
left: -15px;
|
|
||||||
}
|
|
||||||
.card:nth-child(3n+2) .plugin-icon {
|
|
||||||
filter: hue-rotate(-60deg);
|
|
||||||
}
|
|
||||||
.card:nth-child(3n+3) .plugin-icon {
|
|
||||||
filter: hue-rotate(-120deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
margin: 0.5rem 0.25em;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 0.5rem 0.5rem 0.5rem 48px;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.card-name {
|
|
||||||
font-weight: 500;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.card-header {
|
|
||||||
font-size: 1.1447rem;
|
|
||||||
}
|
|
||||||
.card-descr {
|
|
||||||
line-height: 1.25;
|
|
||||||
margin-top: 0.25em;
|
|
||||||
margin-bottom: 0.25em;
|
|
||||||
max-width: 80ch;
|
|
||||||
}
|
|
||||||
.card-subtitle {
|
|
||||||
margin: 0;
|
|
||||||
color: #7986a5;
|
|
||||||
font-size: 0.8735804647362989em;
|
|
||||||
}
|
|
||||||
.sky-form {
|
|
||||||
display: flex;
|
|
||||||
padding: 0.5rem;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.sky-btn {
|
|
||||||
background: #2e5e82;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 0 2px 2px 0;
|
|
||||||
font-weight: 500;
|
|
||||||
padding: 0.5rem;
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import {h, Fragment} from 'preact';
|
import { h, Fragment } from 'preact';
|
||||||
import {useEffect, useState} from 'preact/hooks';
|
import { useEffect, useState } from 'preact/hooks';
|
||||||
import './PluginSearchPage.css';
|
import * as Styles from './PluginSearchPage.css';
|
||||||
|
|
||||||
async function searchPlugins(val) {
|
async function searchPlugins(val) {
|
||||||
const params3 = new URLSearchParams([
|
const params3 = new URLSearchParams([
|
||||||
|
|
@ -15,37 +15,33 @@ async function searchPlugins(val) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function Card({ result }) {
|
function Card({ result }) {
|
||||||
const updatedAtFormatted = Intl.DateTimeFormat('en', {
|
const updatedAtFormatted = Intl.DateTimeFormat('en', {
|
||||||
month: 'long',
|
month: 'long',
|
||||||
day: 'numeric',
|
day: 'numeric',
|
||||||
year: 'numeric',
|
year: 'numeric',
|
||||||
}).format(Date.parse(result.updatedAt));
|
}).format(Date.parse(result.updatedAt));
|
||||||
return (
|
return (
|
||||||
<li class="card">
|
<li class={Styles.Card}>
|
||||||
<img class="plugin-icon" src="/img/plug-light.svg" />
|
<img class={Styles.Icon__Plugin} src="/img/plug-light.svg" />
|
||||||
<header class="card-header">
|
<header class={Styles.CardHeader}>
|
||||||
<h3 class="card-name">
|
<h3 class={Styles.CardName}>
|
||||||
<a
|
<a href="https://www.npmjs.com/package/{result.name}" target="_blank">
|
||||||
href="https://www.npmjs.com/package/{result.name}"
|
<span itemprop="name">{result.name}</span>
|
||||||
target="_blank"
|
</a>
|
||||||
>
|
</h3>
|
||||||
<span itemprop="name">{result.name}</span>
|
</header>
|
||||||
</a>
|
<p class={Styles.CardDesc} itemprop="description">
|
||||||
</h3>
|
{result.description.split('. ')[0]}
|
||||||
</header>
|
</p>
|
||||||
<p class="card-descr" itemprop="description">
|
<p class={Styles.CardSubtitle}>
|
||||||
{result.description.split('. ')[0]}
|
Updated
|
||||||
</p>
|
<time class="" datetime={result.updatedAt}>
|
||||||
<p class="card-subtitle">
|
{updatedAtFormatted}
|
||||||
Updated
|
</time>
|
||||||
<time class="" datetime={result.updatedAt}>
|
</p>
|
||||||
{updatedAtFormatted}
|
</li>
|
||||||
</time>
|
);
|
||||||
</p>
|
}
|
||||||
</li>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export default function PluginSearchPage() {
|
export default function PluginSearchPage() {
|
||||||
const searchParams = new URLSearchParams(window.location.search);
|
const searchParams = new URLSearchParams(window.location.search);
|
||||||
|
|
@ -69,16 +65,16 @@ export default function PluginSearchPage() {
|
||||||
setResults(await searchPlugins(formula));
|
setResults(await searchPlugins(formula));
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
// if (document.getElementById('loading-message')) {
|
// if (document.getElementById('loading-message')) {
|
||||||
// document.getElementById('loading-message').style.display = 'none';
|
// document.getElementById('loading-message').style.display = 'none';
|
||||||
// }
|
// }
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<form
|
<form
|
||||||
name="myform"
|
name="myform"
|
||||||
id="myform"
|
id="myform"
|
||||||
class="pluginPage-search"
|
class={Styles.Form}
|
||||||
action="https://www.npmjs.com/search"
|
action="https://www.npmjs.com/search"
|
||||||
method="GET"
|
method="GET"
|
||||||
onSubmit={onFormSubmit}
|
onSubmit={onFormSubmit}
|
||||||
|
|
@ -88,23 +84,36 @@ export default function PluginSearchPage() {
|
||||||
name="q"
|
name="q"
|
||||||
defaultValue={searchQuery}
|
defaultValue={searchQuery}
|
||||||
placeholder="search Sass, sitemaps, image optimization..."
|
placeholder="search Sass, sitemaps, image optimization..."
|
||||||
class="pluginPage-search-input"
|
class={Styles.Input}
|
||||||
/>
|
/>
|
||||||
<button type="submit" class="pluginPage-search-submit">
|
<button type="submit" class={Styles.Submit}>
|
||||||
Search
|
Search
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
<div class="pluginPage-count" id="total-result-count">
|
<div class={Styles.Count} id="total-result-count">
|
||||||
{!searchQuery && results && results.length > 50 && `${results.length}+ plugins available!`}
|
{!searchQuery &&
|
||||||
|
results &&
|
||||||
|
results.length > 50 &&
|
||||||
|
`${results.length}+ plugins available!`}
|
||||||
</div>
|
</div>
|
||||||
<section id="search-results" style="max-width: 600px;">
|
<section id="search-results" class={Styles.Results}>
|
||||||
{!results && <div id="loading-message">Loading...</div>}
|
{!results && (
|
||||||
{results && results.length === 0 && <ul class="cards">
|
<div id="loading-message" class={Styles.Loading}>
|
||||||
<li style="margin: 1rem; text-align: center;">No results found.</li>
|
Loading...
|
||||||
</ul>}
|
</div>
|
||||||
{results && results.length > 0 && <ul class="cards">
|
)}
|
||||||
{results.map((r) => <Card result={r} />)}
|
{results && results.length === 0 && (
|
||||||
</ul>}
|
<ul class={Styles.CardList}>
|
||||||
|
<li style="margin: 1rem; text-align: center;">No results found.</li>
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
{results && results.length > 0 && (
|
||||||
|
<ul class={Styles.CardList}>
|
||||||
|
{results.map((r) => (
|
||||||
|
<Card result={r} />
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
</section>
|
</section>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
121
examples/snowpack/astro/components/PluginSearchPage.module.css
Normal file
121
examples/snowpack/astro/components/PluginSearchPage.module.css
Normal file
|
|
@ -0,0 +1,121 @@
|
||||||
|
.Card {
|
||||||
|
margin: 0.5rem 0.25em;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 0.5rem 0.5rem 0.5rem 48px;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Card:nth-child(3n + 2) .Icon__Plugin {
|
||||||
|
filter: hue-rotate(-60deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Card:nth-child(3n + 3) .Icon__Plugin {
|
||||||
|
filter: hue-rotate(-120deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.CardList {
|
||||||
|
list-style: none;
|
||||||
|
max-width: 600px;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CardName {
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CardHeader {
|
||||||
|
font-size: 1.1447rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CardDesc {
|
||||||
|
max-width: 80ch;
|
||||||
|
margin-top: 0.25em;
|
||||||
|
margin-bottom: 0.25em;
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CardSubtitle {
|
||||||
|
margin: 0;
|
||||||
|
color: #7986a5;
|
||||||
|
font-size: 0.8735804647362989em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Count {
|
||||||
|
max-width: 600px;
|
||||||
|
min-height: 24px;
|
||||||
|
margin: 0.5rem 0 1rem;
|
||||||
|
color: rgba(black, 0.6);
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 1em;
|
||||||
|
font-style: italic;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Form {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Icon__Plugin {
|
||||||
|
height: 52px;
|
||||||
|
width: 52px;
|
||||||
|
opacity: 0.5;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
/* background: radial-gradient(to top,red,blue); */
|
||||||
|
position: absolute;
|
||||||
|
top: 13px;
|
||||||
|
left: -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Loading {
|
||||||
|
margin: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Input {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0.25em 0.75em;
|
||||||
|
font-size: 1em;
|
||||||
|
border-width: 1px 0 1px 1px;
|
||||||
|
border-radius: 4px 0 0 4px;
|
||||||
|
box-shadow: 0 0 0 2px rgba(46, 94, 130, 0);
|
||||||
|
transition: box-shadow 150ms linear;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Input:focus {
|
||||||
|
border-color: #2e5e82;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 2px rgba(46, 94, 130, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Input:focus + .Submit {
|
||||||
|
box-shadow: 0 0 0 2px rgba(46, 94, 130, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Results {
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Submit {
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
color: white;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1em;
|
||||||
|
font-family: 'Overpass', sans-serif;
|
||||||
|
background-color: #2e5e82;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0 4px 4px 0;
|
||||||
|
box-shadow: 0 0 0 2px rgba(46, 94, 130, 0);
|
||||||
|
transition: box-shadow 150ms linear;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
@ -1,29 +1,78 @@
|
||||||
<script astro>
|
<script astro>
|
||||||
export let props: {
|
export let props: {
|
||||||
title: string,
|
title: string,
|
||||||
inputPath: string,
|
inputPath: string,
|
||||||
headers: { text: string, slug: string }[]
|
headers: { text: string, slug: string }[]
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style type="text/scss">
|
||||||
|
@use "../../public/css/var" as *;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: rgba($white, 0.6);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: $heading;
|
||||||
|
line-height: 1.2em;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-m) {
|
||||||
|
color: $dark-grey;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subnav {
|
||||||
|
position: static;
|
||||||
|
z-index: 1;
|
||||||
|
padding-top: 2rem;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
color: $dark-grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
display: block;
|
||||||
|
height: 1px;
|
||||||
|
margin: 1rem 0;
|
||||||
|
background-color: $light-grey;
|
||||||
|
border: none;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $grey;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<script type="module" defer src="/js/index.js"></script>
|
<script type="module" defer src="/js/index.js"></script>
|
||||||
<aside class="snow-toc snow-toc__subnav snow-view-subnav">
|
<aside class="subnav">
|
||||||
<h2 class="content-title">
|
{props.headers.length > 0 && (
|
||||||
{props.title}
|
<div>
|
||||||
</h2>
|
<h4 class="header">On this page</h4>
|
||||||
|
<nav class="toc">
|
||||||
|
<ol>
|
||||||
|
{props.headers.map((heading) => {
|
||||||
|
return <li><a href={"#" + heading.slug}>{heading.text}</a></li>
|
||||||
|
})}
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{props.headers.length > 0 && <div>
|
<h4 class="header">Suggest a change</h4>
|
||||||
<h4 class="snow-toc-section-header">On this page</h4>
|
|
||||||
<nav class="toc">
|
|
||||||
<ol>
|
|
||||||
{props.headers.map((heading) => {
|
|
||||||
return <li><a href={"#" + heading.slug}>{heading.text}</a></li>
|
|
||||||
})}
|
|
||||||
</ol>
|
|
||||||
</nav>
|
|
||||||
<hr />
|
|
||||||
</div>}
|
|
||||||
|
|
||||||
<h4 class="snow-toc-section-header">Suggest a change</h4>
|
|
||||||
<a href="https://github.com/snowpackjs/snowpack/blob/main/www/{props.inputPath}">Edit this page on GitHub</a>
|
<a href="https://github.com/snowpackjs/snowpack/blob/main/www/{props.inputPath}">Edit this page on GitHub</a>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
|
||||||
|
|
@ -36,22 +36,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.markdown-body table td:nth-child(1) {
|
.markdown-body table td:nth-child(1) {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-body {
|
|
||||||
padding: 4rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-body-header h1 {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-body,
|
.markdown-body,
|
||||||
.fbody-header {
|
.fbody-header {
|
||||||
max-width: 840px;
|
max-width: 840px;
|
||||||
|
|
@ -67,7 +55,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 860px) {
|
@media (max-width: 860px) {
|
||||||
|
|
||||||
.markdown-body,
|
.markdown-body,
|
||||||
.toc {
|
.toc {
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
|
|
@ -75,7 +62,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 740px) {
|
@media (max-width: 740px) {
|
||||||
|
|
||||||
.markdown-body img,
|
.markdown-body img,
|
||||||
.markdown-body iframe {
|
.markdown-body iframe {
|
||||||
max-width: 108%;
|
max-width: 108%;
|
||||||
|
|
@ -87,18 +73,17 @@
|
||||||
padding: 20px 0 0 0;
|
padding: 20px 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-snowpack {
|
.header-snowpack {
|
||||||
font-size: 3.5rem;
|
font-size: 3.5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-body h1 {
|
.markdown-body h1 {
|
||||||
font-size: 3.5em;
|
font-size: 3.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-body h3 .header-link {
|
.markdown-body h3 .header-link {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
@ -138,4 +123,4 @@
|
||||||
<article class="markdown-body">
|
<article class="markdown-body">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -4,18 +4,63 @@
|
||||||
|
|
||||||
export const layout = 'layouts/base.hmx';
|
export const layout = 'layouts/base.hmx';
|
||||||
export function setup({ context }) {
|
export function setup({ context }) {
|
||||||
return {}
|
return {};
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<astro:head>
|
<astro:head>
|
||||||
<meta charset="AAA" />
|
<meta charset="AAA" />
|
||||||
|
<style type="text/scss">
|
||||||
|
@use '../../public/css/var' as *;
|
||||||
|
|
||||||
|
.top {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bullets {
|
||||||
|
display: grid;
|
||||||
|
grid-row-gap: 1em;
|
||||||
|
grid-column-gap: 2em;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
margin: 2.5em 0 !important;
|
||||||
|
padding: 0.1em !important;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin: 0 0 0.25em 0;
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bullet {
|
||||||
|
display: list-item;
|
||||||
|
padding: 0.25em;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
margin-right: 6px;
|
||||||
|
color: green !important;
|
||||||
|
content: '✅';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
margin: 2em 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-button {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0.5em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</astro:head>
|
</astro:head>
|
||||||
<Hero bar={context.title}></Hero>
|
<Hero bar="{context.title}"></Hero>
|
||||||
|
|
||||||
<div foo={context.title} class="container" style="margin: 0 auto">
|
<div foo="{context.title}" class="container" style="margin: 0 auto">
|
||||||
<section class="snow-view__docs is-full is-home">
|
<section class="snow-view__docs is-full is-home">
|
||||||
|
|
||||||
<aside id="nav-primary" class="snow-view-nav">
|
<aside id="nav-primary" class="snow-view-nav">
|
||||||
<Menu></Menu>
|
<Menu></Menu>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
@ -23,21 +68,36 @@
|
||||||
<article class="snow-view-main">
|
<article class="snow-view-main">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<article class="grid-body">
|
<article class="grid-body">
|
||||||
<a class="img-banner" href="https://osawards.com/javascript/2020" target="_blank" rel="noopener noreferrer">
|
<a
|
||||||
<img src="/img/JSAwardWinner.png" alt="2020 JavaScript Open Source Award Winner banner" />
|
class="img-banner"
|
||||||
|
href="https://osawards.com/javascript/2020"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/img/JSAwardWinner.png"
|
||||||
|
alt="2020 JavaScript Open Source Award Winner banner"
|
||||||
|
/>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div class="content markdown-body feature-list">
|
<div class="content markdown-body feature-list">
|
||||||
<div class="feature-list-top">
|
<div class="feature-list-top">
|
||||||
<p>
|
<p>
|
||||||
<strong>Snowpack is a lightning-fast frontend build tool, designed for the modern web.</strong>
|
<strong
|
||||||
It is an alternative to heavier, more complex bundlers like webpack or Parcel in your development
|
>Snowpack is a lightning-fast frontend build tool, designed
|
||||||
workflow. Snowpack leverages JavaScript's native module system (<a
|
for the modern web.</strong
|
||||||
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">known
|
>
|
||||||
as
|
It is an alternative to heavier, more complex bundlers like
|
||||||
ESM</a>) to avoid unnecessary work and stay fast no matter how big your project grows.
|
webpack or Parcel in your development workflow. Snowpack
|
||||||
|
leverages JavaScript's native module system (<a
|
||||||
|
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import"
|
||||||
|
>known as ESM</a
|
||||||
|
>) to avoid unnecessary work and stay fast no matter how big
|
||||||
|
your project grows.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Once you try it, it's impossible to go back to anything else.
|
||||||
</p>
|
</p>
|
||||||
<p>Once you try it, it's impossible to go back to anything else.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="feature-list-bullets">
|
<ul class="feature-list-bullets">
|
||||||
|
|
@ -49,23 +109,28 @@
|
||||||
</li>
|
</li>
|
||||||
<li class="feature-list-bullet">
|
<li class="feature-list-bullet">
|
||||||
<h3>Build once, cache forever</h3>
|
<h3>Build once, cache forever</h3>
|
||||||
Snowpack never builds the same file twice. Powered by JavaScript’s native module system (ESM) in the
|
Snowpack never builds the same file twice. Powered by
|
||||||
browser.
|
JavaScript’s native module system (ESM) in the browser.
|
||||||
</li>
|
</li>
|
||||||
<li class="feature-list-bullet">
|
<li class="feature-list-bullet">
|
||||||
<h3>HMR feat. Fast Refresh</h3>
|
<h3>HMR feat. Fast Refresh</h3>
|
||||||
No refresh required. See changes reflected instantly in the browser with
|
No refresh required. See changes reflected instantly in the
|
||||||
<a href="/concepts/hot-module-replacement">HMR + Fast Refresh</a>
|
browser with
|
||||||
|
<a href="/concepts/hot-module-replacement"
|
||||||
|
>HMR + Fast Refresh</a
|
||||||
|
>
|
||||||
for React, Preact & Svelte.
|
for React, Preact & Svelte.
|
||||||
</li>
|
</li>
|
||||||
<li class="feature-list-bullet">
|
<li class="feature-list-bullet">
|
||||||
<h3>Out-of-the-box support</h3>
|
<h3>Out-of-the-box support</h3>
|
||||||
Enjoy Snowpack's built-in support for JSX, TypeScript, React, Preact, CSS Modules
|
Enjoy Snowpack's built-in support for JSX, TypeScript, React,
|
||||||
|
Preact, CSS Modules
|
||||||
<a href="/reference/supported-files">and more.</a>
|
<a href="/reference/supported-files">and more.</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="feature-list-bullet">
|
<li class="feature-list-bullet">
|
||||||
<h3>Optimize for production</h3>
|
<h3>Optimize for production</h3>
|
||||||
Build for production with built-in optimizations and plugin support for your favorite bundlers.
|
Build for production with built-in optimizations and plugin
|
||||||
|
support for your favorite bundlers.
|
||||||
</li>
|
</li>
|
||||||
<li class="feature-list-bullet">
|
<li class="feature-list-bullet">
|
||||||
<h3>Plugins? Plugins!</h3>
|
<h3>Plugins? Plugins!</h3>
|
||||||
|
|
@ -77,17 +142,27 @@
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div class="feature-list-buttons">
|
<div class="feature-list-buttons">
|
||||||
<a href="/tutorials/quick-start" class="button button-primary feature-list-button">Get started</a>
|
<a
|
||||||
<a href="/concepts/how-snowpack-works" class="button feature-list-button">Learn more</a>
|
href="/tutorials/quick-start"
|
||||||
|
class="button button-primary feature-list-button"
|
||||||
|
>Get started</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="/concepts/how-snowpack-works"
|
||||||
|
class="button feature-list-button"
|
||||||
|
>Learn more</a
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Place this tag in your head or just before your close body tag. -->
|
<!-- Place this tag in your head or just before your close body tag. -->
|
||||||
<script async="async" defer="defer" src="https://buttons.github.io/buttons.js"></script>
|
<script
|
||||||
|
async="async"
|
||||||
|
defer="defer"
|
||||||
|
src="https://buttons.github.io/buttons.js"
|
||||||
|
></script>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,46 @@
|
||||||
|
<style type="text/scss">
|
||||||
|
.intro {
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #2e5e82;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subheading {
|
||||||
|
margin-top: -2.5rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
color: #2e5e82;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1em;
|
||||||
|
font-family: 'Overpass', sans-serif;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zero-heading {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.4em;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<script astro>
|
<script astro>
|
||||||
|
import news from '../data/news.json';
|
||||||
|
import users from '../data/users.json';
|
||||||
import PluginSearchPage from '../components/PluginSearchPage.jsx';
|
import PluginSearchPage from '../components/PluginSearchPage.jsx';
|
||||||
|
|
||||||
export const layout = 'layouts/main.hmx';
|
export const layout = 'layouts/main.hmx';
|
||||||
|
|
@ -7,20 +49,22 @@
|
||||||
return {
|
return {
|
||||||
context: {
|
context: {
|
||||||
title: 'The Snowpack Plugin Catalog',
|
title: 'The Snowpack Plugin Catalog',
|
||||||
description: 'Snowpack plugins allow for configuration-minimal tooling integration.',
|
description:
|
||||||
}
|
'Snowpack plugins allow for configuration-minimal tooling integration.',
|
||||||
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h2 class="content-title">
|
<h2 class="content-title">{ context.title }</h2>
|
||||||
{ context.title }
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<h3 class="pluginPage-subheading">Customize Snowpack with optimized build plugins.</h3>
|
<h3 class="pluginPage-subheading">
|
||||||
<p class="pluginPage-intro">To learn more about our plugin system, check out the
|
Customize Snowpack with optimized build plugins.
|
||||||
|
</h3>
|
||||||
|
<p class="pluginPage-intro">
|
||||||
|
To learn more about our plugin system, check out the
|
||||||
<a href="/reference/plugins">Plugin API.</a><br />Can't find what you need?
|
<a href="/reference/plugins">Plugin API.</a><br />Can't find what you need?
|
||||||
<a href="/reference/plugins">Creating your own plugin is easy!</a>
|
<a href="/reference/plugins">Creating your own plugin is easy!</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<PluginSearchPage:dynamic />
|
<PluginSearchPage:dynamic />
|
||||||
|
|
|
||||||
930
examples/snowpack/package-lock.json
generated
930
examples/snowpack/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -2,41 +2,15 @@
|
||||||
"name": "snowpack-www",
|
"name": "snowpack-www",
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "astro dev .",
|
"start": "nodemon -w ../../lib -x 'astro dev .'",
|
||||||
"build": "astro build",
|
"build": "astro build",
|
||||||
"test": "jest /__test__/",
|
"test": "jest /__test__/",
|
||||||
"format": "prettier --write \"src/**/*.js\" && yarn format:css",
|
"format": "prettier --write \"src/**/*.js\" && yarn format:css",
|
||||||
"format:css": "stylelint 'src/**/*.scss' --fix",
|
"format:css": "stylelint 'src/**/*.scss' --fix",
|
||||||
"lint": "prettier --check \"src/**/*.js\""
|
"lint": "prettier --check \"src/**/*.js\""
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
|
||||||
"@11ty/eleventy": "^0.11.0",
|
|
||||||
"@11ty/eleventy-plugin-rss": "^1.0.9",
|
|
||||||
"@11ty/eleventy-plugin-syntaxhighlight": "^3.0.4",
|
|
||||||
"@contentful/rich-text-html-renderer": "^14.1.2",
|
|
||||||
"@contentful/rich-text-types": "^14.1.2",
|
|
||||||
"@snowpack/plugin-postcss": "^1.0.7",
|
|
||||||
"@snowpack/plugin-run-script": "^2.3.0",
|
|
||||||
"@snowpack/plugin-sass": "^1.1.1",
|
|
||||||
"@snowpack/plugin-svelte": "^3.5.2",
|
|
||||||
"@snowpack/plugin-vue": "^2.3.0",
|
|
||||||
"eleventy-plugin-nesting-toc": "^1.2.0",
|
|
||||||
"luxon": "^1.25.0",
|
|
||||||
"markdown-it": "^12.0.2",
|
|
||||||
"markdown-it-anchor": "^6.0.0",
|
|
||||||
"postcss-cli": "^8.3.0",
|
|
||||||
"postcss-preset-env": "^6.7.0",
|
|
||||||
"prettier": "^2.0.5",
|
|
||||||
"snowpack": "^3.1.0-pre.11",
|
|
||||||
"stylelint": "^13.8.0",
|
|
||||||
"stylelint-config-prettier": "^8.0.2",
|
|
||||||
"stylelint-config-rational-order": "^0.1.2",
|
|
||||||
"stylelint-config-standard": "^20.0.0",
|
|
||||||
"svelte": "^3.35.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@material-ui/core": "^4.11.3",
|
"@material-ui/core": "^4.11.3",
|
||||||
"astro": "file:../../",
|
|
||||||
"date-fns": "^2.19.0",
|
"date-fns": "^2.19.0",
|
||||||
"deepmerge": "^4.2.2",
|
"deepmerge": "^4.2.2",
|
||||||
"docsearch.js": "^2.6.3",
|
"docsearch.js": "^2.6.3",
|
||||||
|
|
@ -48,5 +22,32 @@
|
||||||
"react": "^17.0.1",
|
"react": "^17.0.1",
|
||||||
"react-dom": "^17.0.1",
|
"react-dom": "^17.0.1",
|
||||||
"vue": "^3.0.7"
|
"vue": "^3.0.7"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@11ty/eleventy": "^0.11.0",
|
||||||
|
"@11ty/eleventy-plugin-rss": "^1.0.9",
|
||||||
|
"@11ty/eleventy-plugin-syntaxhighlight": "^3.0.4",
|
||||||
|
"@contentful/rich-text-html-renderer": "^14.1.2",
|
||||||
|
"@contentful/rich-text-types": "^14.1.2",
|
||||||
|
"@snowpack/plugin-postcss": "^1.0.7",
|
||||||
|
"@snowpack/plugin-run-script": "^2.3.0",
|
||||||
|
"@snowpack/plugin-sass": "^1.3.1",
|
||||||
|
"@snowpack/plugin-svelte": "^3.5.2",
|
||||||
|
"@snowpack/plugin-vue": "^2.3.0",
|
||||||
|
"astro": "file:../../",
|
||||||
|
"eleventy-plugin-nesting-toc": "^1.2.0",
|
||||||
|
"luxon": "^1.25.0",
|
||||||
|
"markdown-it": "^12.0.2",
|
||||||
|
"markdown-it-anchor": "^6.0.0",
|
||||||
|
"nodemon": "^2.0.7",
|
||||||
|
"postcss-cli": "^8.3.0",
|
||||||
|
"postcss-preset-env": "^6.7.0",
|
||||||
|
"prettier": "^2.0.5",
|
||||||
|
"snowpack": "^3.1.0-pre.14",
|
||||||
|
"stylelint": "^13.8.0",
|
||||||
|
"stylelint-config-prettier": "^8.0.2",
|
||||||
|
"stylelint-config-rational-order": "^0.1.2",
|
||||||
|
"stylelint-config-standard": "^20.0.0",
|
||||||
|
"svelte": "^3.35.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,21 +11,12 @@
|
||||||
@use './_typography';
|
@use './_typography';
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
|
@use './components/button';
|
||||||
|
@use './components/card-grid';
|
||||||
@use './components/container';
|
@use './components/container';
|
||||||
@use './components/hero';
|
|
||||||
@use './components/icon';
|
@use './components/icon';
|
||||||
@use './components/logo';
|
@use './components/logo';
|
||||||
@use './components/nav';
|
|
||||||
@use './components/old';
|
@use './components/old';
|
||||||
@use './components/toc';
|
|
||||||
@use './components/view';
|
@use './components/view';
|
||||||
@use './components/search';
|
|
||||||
@use './components/feature-list';
|
|
||||||
@use './components/button';
|
|
||||||
@use './components/copy-button';
|
|
||||||
@use './components/card-grid';
|
|
||||||
|
|
||||||
// Pages
|
// @import 'docsearch.js/dist/cdn/docsearch.min.css';
|
||||||
@use './pages/plugins';
|
|
||||||
|
|
||||||
@import 'docsearch.js/dist/cdn/docsearch.min.css';
|
|
||||||
|
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
@use '../var' as *;
|
|
||||||
@use '../animations' as *;
|
|
||||||
|
|
||||||
.copy-button {
|
|
||||||
display: flex;
|
|
||||||
flex: none;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
min-width: 292px;
|
|
||||||
padding: 0.75rem 1.25rem;
|
|
||||||
padding-bottom: 0.75rem;
|
|
||||||
font-size: 100%;
|
|
||||||
font-family: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas,
|
|
||||||
Liberation Mono, Courier New, monospace;
|
|
||||||
line-height: 1.5rem;
|
|
||||||
background-color: white;
|
|
||||||
border: 1px solid #0006;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
@include animation-copy-button;
|
|
||||||
|
|
||||||
svg,
|
|
||||||
.faded {
|
|
||||||
color: #ccc;
|
|
||||||
transition: color 0.1s ease-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// I don't think this is used
|
|
||||||
.copy-button.active {
|
|
||||||
animation: pulse 0.5s;
|
|
||||||
animation-iteration-count: 1;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0% {
|
|
||||||
color: #2a85ca;
|
|
||||||
border-color: #2a85ca;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
@use '../var' as *;
|
|
||||||
// A long feature list in columns
|
|
||||||
.feature-list {
|
|
||||||
|
|
||||||
&-top {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-bullets {
|
|
||||||
display: grid;
|
|
||||||
grid-row-gap: 1em;
|
|
||||||
grid-column-gap: 2em;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
||||||
margin: 2.5em 0 !important;
|
|
||||||
padding: .1em !important;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 0 0 .25em 0;
|
|
||||||
font-size: 1.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
&-bullet {
|
|
||||||
display: list-item;
|
|
||||||
padding: 0.25em;
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
margin-right: 6px;
|
|
||||||
color: green !important;
|
|
||||||
content: '✅';
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&-buttons {
|
|
||||||
margin: 2em 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
&-button {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,108 +0,0 @@
|
||||||
@use '../var' as *;
|
|
||||||
|
|
||||||
.hero {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 50vh;
|
|
||||||
min-height: 20rem;
|
|
||||||
max-height: 30rem;
|
|
||||||
color: #111;
|
|
||||||
line-height: 1.5;
|
|
||||||
background: #2a85ca40;
|
|
||||||
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512' title='mountain' class='logo' fill='%23FFFB'%3E%3Cpath d='M634.92 462.7l-288-448C341.03 5.54 330.89 0 320 0s-21.03 5.54-26.92 14.7l-288 448a32.001 32.001 0 0 0-1.17 32.64A32.004 32.004 0 0 0 32 512h576c11.71 0 22.48-6.39 28.09-16.67a31.983 31.983 0 0 0-1.17-32.63zM320 91.18L405.39 224H320l-64 64-38.06-38.06L320 91.18z' /%3E%3C/svg%3E");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: calc(100% + 100px) calc(100% + 64px);
|
|
||||||
background-size: 50%;
|
|
||||||
border-bottom: 1px solid #0003;
|
|
||||||
//margin-top: $nav-height;
|
|
||||||
|
|
||||||
@media (min-width: $breakpoint-l) {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
> svg {
|
|
||||||
display: block;
|
|
||||||
margin: auto;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.logo path {
|
|
||||||
fill: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
padding: 1rem * 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-cta {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 1.5rem auto 0;
|
|
||||||
}
|
|
||||||
.header-link {
|
|
||||||
padding-left: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
float: left;
|
|
||||||
margin: 0 -20px 0 0;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 36px;
|
|
||||||
line-height: 1;
|
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
|
||||||
margin: 0 20px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 31px;
|
|
||||||
height: 31px;
|
|
||||||
margin-right: 8px;
|
|
||||||
margin-left: 2px;
|
|
||||||
padding: 0;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-snowpack {
|
|
||||||
margin: 0 auto 0.75rem;
|
|
||||||
font-weight: 900;
|
|
||||||
font-size: 3.5rem;
|
|
||||||
line-height: 1;
|
|
||||||
letter-spacing: -0.045em;
|
|
||||||
text-align: center;
|
|
||||||
opacity: 0.9;
|
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
|
||||||
max-width: none;
|
|
||||||
font-size: 5.75rem;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-snowpack-subtitle {
|
|
||||||
margin: 0;
|
|
||||||
margin: auto;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 2rem;
|
|
||||||
line-height: 1;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,118 +0,0 @@
|
||||||
@use '../var' as *;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Top nav
|
|
||||||
* The thing at the top
|
|
||||||
*/
|
|
||||||
|
|
||||||
.snow-nav {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: map-get($map: $layers, $key: 'nav');
|
|
||||||
display: grid;
|
|
||||||
grid-template-areas:
|
|
||||||
'mobile logo version'
|
|
||||||
'search search search';
|
|
||||||
grid-template-rows: $nav-height $nav-height;
|
|
||||||
grid-template-columns: 1fr 2fr 1fr;
|
|
||||||
align-items: center;
|
|
||||||
height: $nav-height;
|
|
||||||
padding-right: 0.5rem;
|
|
||||||
padding-left: 0.625rem;
|
|
||||||
color: $white;
|
|
||||||
background-color: $dark-blue;
|
|
||||||
|
|
||||||
body.is-nav-open & {
|
|
||||||
height: $nav-height * 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
|
||||||
display: flex;
|
|
||||||
height: $nav-height;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------
|
|
||||||
// Components
|
|
||||||
// -----------
|
|
||||||
|
|
||||||
&-link {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.5em;
|
|
||||||
color: $white;
|
|
||||||
font-weight: 500;
|
|
||||||
text-decoration: none;
|
|
||||||
opacity: 0.7;
|
|
||||||
transition: opacity 150ms linear;
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__desktop {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-logo {
|
|
||||||
display: flex;
|
|
||||||
grid-area: logo;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0.5rem;
|
|
||||||
color: $white;
|
|
||||||
font-size: 24px;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
|
||||||
justify-content: flex-start;
|
|
||||||
padding: 0.5rem 1.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-mobile-open {
|
|
||||||
display: flex;
|
|
||||||
grid-area: mobile;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
padding: 0;
|
|
||||||
color: $white;
|
|
||||||
font-size: 16px;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
appearance: none;
|
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-version {
|
|
||||||
grid-area: version;
|
|
||||||
margin-left: 0.5em;
|
|
||||||
font-size: 0.8em;
|
|
||||||
font-family: $code;
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1px;
|
|
||||||
height: 1.5em;
|
|
||||||
margin-left: 0.5em;
|
|
||||||
vertical-align: -25%;
|
|
||||||
background-color: rgba($white, 0.25);
|
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,119 +0,0 @@
|
||||||
@use '../var' as *;
|
|
||||||
|
|
||||||
.search-form {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1000;
|
|
||||||
display: flex;
|
|
||||||
flex-grow: 1;
|
|
||||||
grid-area: search;
|
|
||||||
margin: 0 6px;
|
|
||||||
> * {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $breakpoint-m - 1) {
|
|
||||||
& {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
body.is-nav-open & {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .sr-only {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-hint {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
display: none;
|
|
||||||
padding: 6px 12px;
|
|
||||||
color: #c2ced9;
|
|
||||||
font-size: 16px;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
& * {
|
|
||||||
font-family: $code;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1px;
|
|
||||||
height: 1.5em;
|
|
||||||
margin-right: 0.5em;
|
|
||||||
vertical-align: -35%;
|
|
||||||
background-color: rgba($white, 0.25);
|
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-input {
|
|
||||||
flex-grow: 1;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding-top: 0.5rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
padding-left: 1rem;
|
|
||||||
overflow: visible;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 100%;
|
|
||||||
font-family: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
background-color: #446e8f;
|
|
||||||
border-color: rgba($white, 0.25);
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 1px;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
outline: 0;
|
|
||||||
transition-timing-function: ease-in-out;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
transition-property: border-color, color;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
color: white;
|
|
||||||
border-color: rgba($white, 0.75);
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: rgba($white, 0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&::placeholder {
|
|
||||||
color: #c2ced9;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__desktop {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.algolia-autocomplete .ds-dropdown-menu {
|
|
||||||
@media (max-width: $breakpoint-m - 1) {
|
|
||||||
width: 100%;
|
|
||||||
min-width: inherit;
|
|
||||||
max-width: inherit;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.algolia-autocomplete .ds-dropdown-menu::before {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
@ -1,132 +0,0 @@
|
||||||
@use '../var' as *;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Table of Contents (toc)
|
|
||||||
* The left-hand sidebar
|
|
||||||
*/
|
|
||||||
|
|
||||||
$top-padding: 24px;
|
|
||||||
|
|
||||||
%toc-link {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
color: $white;
|
|
||||||
text-decoration: none;
|
|
||||||
border: none;
|
|
||||||
transition: color 0.3s;
|
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
|
||||||
color: $grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
top: -2px;
|
|
||||||
left: -19px;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 26px;
|
|
||||||
line-height: 1;
|
|
||||||
opacity: 0;
|
|
||||||
transition: left .14s ease-out;
|
|
||||||
content: "▸";
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: #0c8cec;
|
|
||||||
text-decoration: underline;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
left: -17px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.snow-toc {
|
|
||||||
transition: padding 0.2s ease-out, opacity 0.2s ease-in-out;
|
|
||||||
|
|
||||||
// -----------
|
|
||||||
// Components
|
|
||||||
// -----------
|
|
||||||
|
|
||||||
&-contents {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
line-height: 1.8;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-link {
|
|
||||||
@extend %toc-link;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-section {
|
|
||||||
+ .snow-toc-section {
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-header {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: rgba($white, 0.6);
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 20px;
|
|
||||||
font-family: $heading;
|
|
||||||
line-height: 1.2em;
|
|
||||||
|
|
||||||
@media (min-width: $breakpoint-m) {
|
|
||||||
color: $dark-grey;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-items {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ----------
|
|
||||||
// Modifiers
|
|
||||||
// ----------
|
|
||||||
|
|
||||||
&__subnav {
|
|
||||||
position: static;
|
|
||||||
z-index: 1;
|
|
||||||
padding-top: 2rem;
|
|
||||||
|
|
||||||
.snow-toc-section-header {
|
|
||||||
color: $dark-grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
display: block;
|
|
||||||
height: 1px;
|
|
||||||
margin: 1rem 0;
|
|
||||||
background-color: $light-grey;
|
|
||||||
border: none;
|
|
||||||
appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
line-height: 1.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
@extend %toc-link;
|
|
||||||
|
|
||||||
color: $grey;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,97 +0,0 @@
|
||||||
.pluginPage {
|
|
||||||
&-count {
|
|
||||||
max-width: 600px;
|
|
||||||
min-height: 24px;
|
|
||||||
margin: 0.5rem 0 1rem;
|
|
||||||
color: rgba(black, 0.6);
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 1em;
|
|
||||||
font-style: italic;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
@media (min-width: 600px) {
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-intro {
|
|
||||||
margin-top: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #2e5e82;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-search {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 600px;
|
|
||||||
|
|
||||||
&-input {
|
|
||||||
flex-grow: 1;
|
|
||||||
flex-shrink: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0.25em 0.75em;
|
|
||||||
font-size: 1em;
|
|
||||||
border-width: 1px 0 1px 1px;
|
|
||||||
border-radius: 4px 0 0 4px;
|
|
||||||
box-shadow: 0 0 0 2px rgba(#2e5e82, 0);
|
|
||||||
transition: box-shadow 150ms linear;
|
|
||||||
appearance: none;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-color: #2e5e82;
|
|
||||||
outline: none;
|
|
||||||
box-shadow: 0 0 0 2px rgba(#2e5e82, 1);
|
|
||||||
|
|
||||||
+ .pluginPage-search-submit {
|
|
||||||
box-shadow: 0 0 0 2px rgba(#2e5e82, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-submit {
|
|
||||||
padding: 0.5em 1em;
|
|
||||||
color: white;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1em;
|
|
||||||
font-family: 'Overpass', sans-serif;
|
|
||||||
background-color: #2e5e82;
|
|
||||||
border: none;
|
|
||||||
border-radius: 0 4px 4px 0;
|
|
||||||
box-shadow: 0 0 0 2px rgba(#2e5e82, 0);
|
|
||||||
transition: box-shadow 150ms linear;
|
|
||||||
appearance: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-subheading {
|
|
||||||
margin-top: -2.5rem;
|
|
||||||
margin-bottom: 0;
|
|
||||||
color: #2e5e82;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 1em;
|
|
||||||
font-family: 'Overpass', sans-serif;
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
@media (min-width: 600px) {
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-zero-heading {
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1.4em;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
@media (min-width: 600px) {
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -6,21 +6,15 @@ module.exports = {
|
||||||
//src: '/_dist_',
|
//src: '/_dist_',
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
[
|
['@snowpack/plugin-sass', { compilerOptions: { style: 'compressed' } }],
|
||||||
'@snowpack/plugin-sass', { compilerOptions: { style: 'compressed' } },
|
|
||||||
],
|
|
||||||
'@snowpack/plugin-svelte',
|
'@snowpack/plugin-svelte',
|
||||||
'@snowpack/plugin-vue'
|
'@snowpack/plugin-vue',
|
||||||
],
|
],
|
||||||
packageOptions: {
|
packageOptions: {
|
||||||
external: [
|
external: [
|
||||||
'node-fetch'
|
'node-fetch'
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
devOptions: {
|
|
||||||
// Eleventy updates multiple files at once, so add a 1000ms delay before we trigger a browser update
|
|
||||||
hmrDelay: 1000,
|
|
||||||
},
|
|
||||||
buildOptions: {
|
buildOptions: {
|
||||||
out: '_site',
|
out: '_site',
|
||||||
},
|
},
|
||||||
|
|
|
||||||
64
package-lock.json
generated
64
package-lock.json
generated
|
|
@ -527,7 +527,8 @@
|
||||||
"big-integer": {
|
"big-integer": {
|
||||||
"version": "1.6.48",
|
"version": "1.6.48",
|
||||||
"resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.48.tgz",
|
"resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.48.tgz",
|
||||||
"integrity": "sha512-j51egjPa7/i+RdiRuJbPdJ2FIUYYPhvYLjzoYbcMMm62ooO6F94fETG4MTs46zPAF9Brs04OajboA/qTGuz78w=="
|
"integrity": "sha512-j51egjPa7/i+RdiRuJbPdJ2FIUYYPhvYLjzoYbcMMm62ooO6F94fETG4MTs46zPAF9Brs04OajboA/qTGuz78w==",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"big.js": {
|
"big.js": {
|
||||||
"version": "5.2.2",
|
"version": "5.2.2",
|
||||||
|
|
@ -565,6 +566,7 @@
|
||||||
"version": "0.1.1",
|
"version": "0.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.1.1.tgz",
|
||||||
"integrity": "sha1-1g1dzCDLptx+HymbNdPh+V2vuuY=",
|
"integrity": "sha1-1g1dzCDLptx+HymbNdPh+V2vuuY=",
|
||||||
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"big-integer": "^1.6.7"
|
"big-integer": "^1.6.7"
|
||||||
}
|
}
|
||||||
|
|
@ -746,9 +748,10 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"cli-spinners": {
|
"cli-spinners": {
|
||||||
"version": "2.5.0",
|
"version": "2.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.0.tgz",
|
||||||
"integrity": "sha512-PC+AmIuK04E6aeSs/pUccSujsTzBhu4HzC2dL+CfJB/Jcc2qTRbEwZQDfIUpt2Xl8BodYBEq8w4fc0kU2I9DjQ=="
|
"integrity": "sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q==",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"cliui": {
|
"cliui": {
|
||||||
"version": "7.0.4",
|
"version": "7.0.4",
|
||||||
|
|
@ -1002,6 +1005,7 @@
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-2.0.0.tgz",
|
||||||
"integrity": "sha1-AezONxpx6F8VoXF354YwR+c9vn0=",
|
"integrity": "sha1-AezONxpx6F8VoXF354YwR+c9vn0=",
|
||||||
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"bplist-parser": "^0.1.0",
|
"bplist-parser": "^0.1.0",
|
||||||
"pify": "^2.3.0",
|
"pify": "^2.3.0",
|
||||||
|
|
@ -1012,6 +1016,7 @@
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/untildify/-/untildify-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/untildify/-/untildify-2.1.0.tgz",
|
||||||
"integrity": "sha1-F+soB5h/dpUunASF/DEdBqgmouA=",
|
"integrity": "sha1-F+soB5h/dpUunASF/DEdBqgmouA=",
|
||||||
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"os-homedir": "^1.0.0"
|
"os-homedir": "^1.0.0"
|
||||||
}
|
}
|
||||||
|
|
@ -1167,9 +1172,10 @@
|
||||||
"integrity": "sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA=="
|
"integrity": "sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA=="
|
||||||
},
|
},
|
||||||
"esbuild": {
|
"esbuild": {
|
||||||
"version": "0.8.57",
|
"version": "0.9.6",
|
||||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.8.57.tgz",
|
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.9.6.tgz",
|
||||||
"integrity": "sha512-j02SFrUwFTRUqiY0Kjplwjm1psuzO1d6AjaXKuOR9hrY0HuPsT6sV42B6myW34h1q4CRy+Y3g4RU/cGJeI/nNA=="
|
"integrity": "sha512-F6vASxU0wT/Davt9aj2qtDwDNSkQxh9VbyO56M7PDWD+D/Vgq/rmUDGDQo7te76W5auauVojjnQr/wTu3vpaUA==",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"escalade": {
|
"escalade": {
|
||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
|
|
@ -1484,6 +1490,12 @@
|
||||||
"reusify": "^1.0.4"
|
"reusify": "^1.0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"fdir": {
|
||||||
|
"version": "5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/fdir/-/fdir-5.0.0.tgz",
|
||||||
|
"integrity": "sha512-cteqwWMA43lEmgwOg5HSdvhVFD39vHjQDhZkRMlKmeoNPtSSgUw1nUypydiY2upMdGiBFBZvNBDbnoBh0yCzaQ==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"file-entry-cache": {
|
"file-entry-cache": {
|
||||||
"version": "6.0.1",
|
"version": "6.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
|
||||||
|
|
@ -1537,7 +1549,8 @@
|
||||||
"function-bind": {
|
"function-bind": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
|
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"functional-red-black-tree": {
|
"functional-red-black-tree": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
|
|
@ -1685,6 +1698,7 @@
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||||
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
|
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
|
||||||
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"function-bind": "^1.1.1"
|
"function-bind": "^1.1.1"
|
||||||
}
|
}
|
||||||
|
|
@ -1868,6 +1882,7 @@
|
||||||
"version": "2.2.0",
|
"version": "2.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
|
||||||
"integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
|
"integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
|
||||||
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"has": "^1.0.3"
|
"has": "^1.0.3"
|
||||||
}
|
}
|
||||||
|
|
@ -1880,7 +1895,8 @@
|
||||||
"is-docker": {
|
"is-docker": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.1.1.tgz",
|
||||||
"integrity": "sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw=="
|
"integrity": "sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw==",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"is-extendable": {
|
"is-extendable": {
|
||||||
"version": "0.1.1",
|
"version": "0.1.1",
|
||||||
|
|
@ -1954,6 +1970,7 @@
|
||||||
"version": "2.2.0",
|
"version": "2.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
|
||||||
"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
|
"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
|
||||||
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"is-docker": "^2.0.0"
|
"is-docker": "^2.0.0"
|
||||||
}
|
}
|
||||||
|
|
@ -2380,6 +2397,7 @@
|
||||||
"version": "7.4.2",
|
"version": "7.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
|
"resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
|
||||||
"integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
|
"integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
|
||||||
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"is-docker": "^2.0.0",
|
"is-docker": "^2.0.0",
|
||||||
"is-wsl": "^2.1.1"
|
"is-wsl": "^2.1.1"
|
||||||
|
|
@ -2402,7 +2420,8 @@
|
||||||
"os-homedir": {
|
"os-homedir": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
|
||||||
"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
|
"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"p-cancelable": {
|
"p-cancelable": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
|
|
@ -2494,7 +2513,8 @@
|
||||||
"path-parse": {
|
"path-parse": {
|
||||||
"version": "1.0.6",
|
"version": "1.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
|
||||||
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
|
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"path-type": {
|
"path-type": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
|
|
@ -2510,7 +2530,8 @@
|
||||||
"pify": {
|
"pify": {
|
||||||
"version": "2.3.0",
|
"version": "2.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
||||||
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
|
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"postcss": {
|
"postcss": {
|
||||||
"version": "8.2.8",
|
"version": "8.2.8",
|
||||||
|
|
@ -2792,6 +2813,7 @@
|
||||||
"version": "1.20.0",
|
"version": "1.20.0",
|
||||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
|
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
|
||||||
"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
|
"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
|
||||||
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"is-core-module": "^2.2.0",
|
"is-core-module": "^2.2.0",
|
||||||
"path-parse": "^1.0.6"
|
"path-parse": "^1.0.6"
|
||||||
|
|
@ -2828,9 +2850,10 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"rollup": {
|
"rollup": {
|
||||||
"version": "2.41.4",
|
"version": "2.42.3",
|
||||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.41.4.tgz",
|
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.42.3.tgz",
|
||||||
"integrity": "sha512-f9IHfMO8p2Y8OdisI7Oj3oKkPuaQ6cgSwYqAi0TDvP3w2p+oX1VejX/w28a1h8WTnrapzfO5d4Uqhww+gL0b0g==",
|
"integrity": "sha512-JjaT9WaUS5vmjy6xUrnPOskjkQg2cN4WSACNCwbOvBz8VDmbiKVdmTFUoMPRqTud0tsex8Xy9/boLbDW9HKD1w==",
|
||||||
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"fsevents": "~2.3.1"
|
"fsevents": "~2.3.1"
|
||||||
}
|
}
|
||||||
|
|
@ -2950,14 +2973,17 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"snowpack": {
|
"snowpack": {
|
||||||
"version": "3.1.0-pre.13",
|
"version": "3.1.0-pre.14",
|
||||||
"resolved": "https://registry.npmjs.org/snowpack/-/snowpack-3.1.0-pre.13.tgz",
|
"resolved": "https://registry.npmjs.org/snowpack/-/snowpack-3.1.0-pre.14.tgz",
|
||||||
"integrity": "sha512-hvLMf+u5/T2sfrh8tIA+QkLwkqlUmvWEGuW3SccOB2yrKrY+4J9S+qOj8goJF62RrDRw567UyS8N3OQBKXdLqw==",
|
"integrity": "sha512-NJm+XOMHryrDPWkqpqqBjQLZcSrs8WzW84H0vs3m10kFD1vvOBqPrD5ECH3fRVre314wA3arOgZbWGhY27A29w==",
|
||||||
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"cli-spinners": "^2.5.0",
|
"cli-spinners": "^2.5.0",
|
||||||
"default-browser-id": "^2.0.0",
|
"default-browser-id": "^2.0.0",
|
||||||
"esbuild": "^0.8.7",
|
"esbuild": "^0.9.3",
|
||||||
|
"fdir": "^5.0.0",
|
||||||
"fsevents": "^2.2.0",
|
"fsevents": "^2.2.0",
|
||||||
|
"micromatch": "^4.0.2",
|
||||||
"open": "^7.0.4",
|
"open": "^7.0.4",
|
||||||
"resolve": "^1.20.0",
|
"resolve": "^1.20.0",
|
||||||
"rollup": "^2.34.0"
|
"rollup": "^2.34.0"
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
"dev": "concurrently 'tsc --watch' 'npm run copy-js:watch'",
|
"dev": "concurrently 'tsc --watch' 'npm run copy-js:watch'",
|
||||||
"format": "prettier -w 'src/**/*.{js,ts}'",
|
"format": "prettier -w 'src/**/*.{js,ts}'",
|
||||||
"copy-js": "copyfiles -u 1 src/*.js lib/",
|
"copy-js": "copyfiles -u 1 src/*.js lib/",
|
||||||
"copy-js:watch": "nodemon -w src --ext js --exec 'npm run copy-js'",
|
"copy-js:watch": "nodemon -w src --ext js -x 'npm run copy-js'",
|
||||||
"test": "uvu test -i fixtures -i test-utils.js"
|
"test": "uvu test -i fixtures -i test-utils.js"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
@ -50,7 +50,6 @@
|
||||||
"react": "^17.0.1",
|
"react": "^17.0.1",
|
||||||
"react-dom": "^17.0.1",
|
"react-dom": "^17.0.1",
|
||||||
"sass": "^1.32.8",
|
"sass": "^1.32.8",
|
||||||
"snowpack": "^3.1.0-pre.13",
|
|
||||||
"svelte": "^3.35.0",
|
"svelte": "^3.35.0",
|
||||||
"vue": "^3.0.7",
|
"vue": "^3.0.7",
|
||||||
"yargs-parser": "^20.2.7"
|
"yargs-parser": "^20.2.7"
|
||||||
|
|
@ -73,6 +72,7 @@
|
||||||
"preact": "^10.5.12",
|
"preact": "^10.5.12",
|
||||||
"preact-render-to-string": "^5.1.14",
|
"preact-render-to-string": "^5.1.14",
|
||||||
"prettier": "^2.2.1",
|
"prettier": "^2.2.1",
|
||||||
|
"snowpack": "^3.1.0-pre.14",
|
||||||
"typescript": "^4.2.3",
|
"typescript": "^4.2.3",
|
||||||
"uvu": "^0.5.1"
|
"uvu": "^0.5.1"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -39,20 +39,24 @@ async function load(config: RuntimeConfig, rawPathname: string | undefined): Pro
|
||||||
const selectedPageMdLoc = new URL(`./pages/${selectedPage}.md`, hmxRoot);
|
const selectedPageMdLoc = new URL(`./pages/${selectedPage}.md`, hmxRoot);
|
||||||
const selectedPageUrl = `/_hmx/pages/${selectedPage}.js`;
|
const selectedPageUrl = `/_hmx/pages/${selectedPage}.js`;
|
||||||
|
|
||||||
// Non-hmx pages
|
// Non-hmx pages (file resources)
|
||||||
if (!existsSync(selectedPageLoc) && !existsSync(selectedPageMdLoc)) {
|
if (!existsSync(selectedPageLoc) && !existsSync(selectedPageMdLoc)) {
|
||||||
try {
|
try {
|
||||||
const result = await snowpack.loadUrl(reqPath);
|
const result = await snowpack.loadUrl(reqPath);
|
||||||
|
|
||||||
|
// success
|
||||||
return {
|
return {
|
||||||
statusCode: 200,
|
statusCode: 200,
|
||||||
...result,
|
...result,
|
||||||
};
|
};
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
return {
|
// build error
|
||||||
statusCode: 404,
|
if (err.failed) {
|
||||||
error: err,
|
return { statusCode: 500, type: 'unknown', error: err };
|
||||||
};
|
}
|
||||||
|
|
||||||
|
// not found
|
||||||
|
return { statusCode: 404, error: err };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue