[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>
|
||||
</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="section">
|
||||
<h1 class="header-snowpack">Snowpack</h1>
|
||||
|
|
|
|||
|
|
@ -1,84 +1,130 @@
|
|||
<nav class="snow-toc">
|
||||
<ol class="snow-toc-contents">
|
||||
<li class="snow-toc-section">
|
||||
<span class="snow-toc-section-header">Concepts</span>
|
||||
<ol class="snow-toc-section-items">
|
||||
<li>
|
||||
<a class="snow-toc-link" href="/concepts/how-snowpack-works">How Snowpack Works</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="snow-toc-link" href="/concepts/dev-server">The Dev Server</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="snow-toc-link" href="/concepts/build-pipeline">The Build Pipeline</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="snow-toc-link" href="/concepts/hot-module-replacement">Fast Refresh & HMR</a>
|
||||
</li>
|
||||
<style type="text/scss">
|
||||
@use '../../public/css/var' as *;
|
||||
|
||||
.toc {
|
||||
transition: padding 0.2s ease-out, opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.contents {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.8;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.section {
|
||||
+ .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;
|
||||
}
|
||||
|
||||
.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>
|
||||
</li>
|
||||
|
||||
<li class="snow-toc-section">
|
||||
<span class="snow-toc-section-header">Getting Started</span>
|
||||
<ol class="snow-toc-section-items">
|
||||
<li>
|
||||
<a class="snow-toc-link" href="/tutorials/quick-start">Quick Start</a>
|
||||
</li>
|
||||
<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>
|
||||
<li class="section">
|
||||
<span class="header">Getting Started</span>
|
||||
<ol class="items">
|
||||
<li><a class="link" href="/tutorials/quick-start">Quick Start</a></li>
|
||||
<li><a class="link" href="/tutorials/getting-started">Getting Started</a></li>
|
||||
<li><a class="link" href="/tutorials/react">React</a></li>
|
||||
<li><a class="link" href="/tutorials/svelte">Svelte</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
|
||||
<li class="snow-toc-section">
|
||||
<a class="snow-toc-link" href="/guides">
|
||||
<span class="snow-toc-section-header">Guides</span></a>
|
||||
<li class="section">
|
||||
<a class="link" href="/guides"><span class="header">Guides</span></a>
|
||||
</li>
|
||||
|
||||
<li class="snow-toc-section">
|
||||
<span class="snow-toc-section-header">Reference</span>
|
||||
<ol class="snow-toc-section-items">
|
||||
<li>
|
||||
<a class="snow-toc-link" href="/reference/configuration">snowpack.config.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="snow-toc-link" href="/reference/cli-command-line-interface">Command Line API</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="snow-toc-link" href="/reference/javascript-interface">JavaScript API</a>
|
||||
</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>
|
||||
<li class="section">
|
||||
<span class="header">Reference</span>
|
||||
<ol class="items">
|
||||
<li><a class="link" href="/reference/configuration">snowpack.config.js</a></li>
|
||||
<li><a class="link" href="/reference/cli-command-line-interface">Command Line API</a></li>
|
||||
<li><a class="link" href="/reference/javascript-interface">JavaScript API</a></li>
|
||||
<li><a class="link" href="/reference/plugins">Plugin API</a></li>
|
||||
<li><a class="link" href="/reference/environment-variables">Environment Variables</a></li>
|
||||
<li><a class="link" href="/reference/hot-module-replacement">HMR API</a></li>
|
||||
<li><a class="link" href="/reference/supported-files">Supported Files</a></li>
|
||||
<li><a class="link" href="/reference/common-error-details">Common Errors</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
|
||||
<li class="snow-toc-section">
|
||||
<a class="snow-toc-link" href="/plugins">
|
||||
<span class="snow-toc-section-header">Plugin Catalog</span></a>
|
||||
<li class="section">
|
||||
<a class="link" href="/plugins"><span class="section-header">Plugin Catalog</span></a>
|
||||
</li>
|
||||
|
||||
<li class="snow-toc-section">
|
||||
<a class="snow-toc-link" href="/news">
|
||||
<span class="snow-toc-section-header">Community & News</span></a>
|
||||
<li class="section">
|
||||
<a class="link" href="/news"><span class="section-header">Community & News</span></a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,230 @@
|
|||
<script astro>
|
||||
export let props: {version: string};
|
||||
export let props: { version: string };
|
||||
</script>
|
||||
|
||||
<nav class="snow-nav">
|
||||
<button id="toc-drawer-button" class="snow-nav-mobile-open" type="button" aria-expanded="false"
|
||||
<style type="text/scss">
|
||||
@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">
|
||||
<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>
|
||||
|
|
@ -12,7 +233,7 @@
|
|||
</path>
|
||||
</svg>
|
||||
</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"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g transform="translate(-1.000000, 0.000000)" fill-rule="nonzero">
|
||||
|
|
@ -21,12 +242,12 @@
|
|||
id="Shape"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="snow-logo-type">Snowpack</span>
|
||||
<span class="logo-type">Snowpack</span>
|
||||
</a>
|
||||
<div class="search-form">
|
||||
<div class="search">
|
||||
<input type="text" name="search" placeholder="Search documentation..." class="search-form-input"
|
||||
id="search-form-input">
|
||||
<span class="search-form-hint">
|
||||
id="search-input">
|
||||
<span class="search-hint">
|
||||
<span class="sr-only">Press </span>
|
||||
<kbd class="font-sans"><abbr title="Command" style="text-decoration: none;">⌘</abbr></kbd>
|
||||
<span class="sr-only"> and </span>
|
||||
|
|
@ -35,10 +256,10 @@
|
|||
</span>
|
||||
</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}`}
|
||||
</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"
|
||||
xmlns="http://www.w3.org/2000/svg" viewbox="0 0 496 512">
|
||||
<path fill="currentColor"
|
||||
|
|
@ -46,7 +267,7 @@
|
|||
</path>
|
||||
</svg>
|
||||
</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"
|
||||
xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
|
||||
<path fill="currentColor"
|
||||
|
|
@ -54,7 +275,7 @@
|
|||
</path>
|
||||
</svg>
|
||||
</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"
|
||||
xmlns="http://www.w3.org/2000/svg" viewbox="0 0 210 240">
|
||||
<path
|
||||
|
|
@ -64,6 +285,7 @@
|
|||
</svg>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
function handleMobileNav(evt) {
|
||||
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 {useEffect, useState} from 'preact/hooks';
|
||||
import './PluginSearchPage.css';
|
||||
import { h, Fragment } from 'preact';
|
||||
import { useEffect, useState } from 'preact/hooks';
|
||||
import * as Styles from './PluginSearchPage.css';
|
||||
|
||||
async function searchPlugins(val) {
|
||||
const params3 = new URLSearchParams([
|
||||
|
|
@ -15,37 +15,33 @@ async function searchPlugins(val) {
|
|||
}
|
||||
|
||||
function Card({ result }) {
|
||||
const updatedAtFormatted = Intl.DateTimeFormat('en', {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
}).format(Date.parse(result.updatedAt));
|
||||
return (
|
||||
<li class="card">
|
||||
<img class="plugin-icon" src="/img/plug-light.svg" />
|
||||
<header class="card-header">
|
||||
<h3 class="card-name">
|
||||
<a
|
||||
href="https://www.npmjs.com/package/{result.name}"
|
||||
target="_blank"
|
||||
>
|
||||
<span itemprop="name">{result.name}</span>
|
||||
</a>
|
||||
</h3>
|
||||
</header>
|
||||
<p class="card-descr" itemprop="description">
|
||||
{result.description.split('. ')[0]}
|
||||
</p>
|
||||
<p class="card-subtitle">
|
||||
Updated
|
||||
<time class="" datetime={result.updatedAt}>
|
||||
{updatedAtFormatted}
|
||||
</time>
|
||||
</p>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
const updatedAtFormatted = Intl.DateTimeFormat('en', {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
}).format(Date.parse(result.updatedAt));
|
||||
return (
|
||||
<li class={Styles.Card}>
|
||||
<img class={Styles.Icon__Plugin} src="/img/plug-light.svg" />
|
||||
<header class={Styles.CardHeader}>
|
||||
<h3 class={Styles.CardName}>
|
||||
<a href="https://www.npmjs.com/package/{result.name}" target="_blank">
|
||||
<span itemprop="name">{result.name}</span>
|
||||
</a>
|
||||
</h3>
|
||||
</header>
|
||||
<p class={Styles.CardDesc} itemprop="description">
|
||||
{result.description.split('. ')[0]}
|
||||
</p>
|
||||
<p class={Styles.CardSubtitle}>
|
||||
Updated
|
||||
<time class="" datetime={result.updatedAt}>
|
||||
{updatedAtFormatted}
|
||||
</time>
|
||||
</p>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default function PluginSearchPage() {
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
|
|
@ -69,16 +65,16 @@ export default function PluginSearchPage() {
|
|||
setResults(await searchPlugins(formula));
|
||||
return false;
|
||||
}
|
||||
// if (document.getElementById('loading-message')) {
|
||||
// document.getElementById('loading-message').style.display = 'none';
|
||||
// }
|
||||
// if (document.getElementById('loading-message')) {
|
||||
// document.getElementById('loading-message').style.display = 'none';
|
||||
// }
|
||||
|
||||
return (
|
||||
<>
|
||||
<form
|
||||
name="myform"
|
||||
id="myform"
|
||||
class="pluginPage-search"
|
||||
class={Styles.Form}
|
||||
action="https://www.npmjs.com/search"
|
||||
method="GET"
|
||||
onSubmit={onFormSubmit}
|
||||
|
|
@ -88,23 +84,36 @@ export default function PluginSearchPage() {
|
|||
name="q"
|
||||
defaultValue={searchQuery}
|
||||
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
|
||||
</button>
|
||||
</form>
|
||||
<div class="pluginPage-count" id="total-result-count">
|
||||
{!searchQuery && results && results.length > 50 && `${results.length}+ plugins available!`}
|
||||
<div class={Styles.Count} id="total-result-count">
|
||||
{!searchQuery &&
|
||||
results &&
|
||||
results.length > 50 &&
|
||||
`${results.length}+ plugins available!`}
|
||||
</div>
|
||||
<section id="search-results" style="max-width: 600px;">
|
||||
{!results && <div id="loading-message">Loading...</div>}
|
||||
{results && results.length === 0 && <ul class="cards">
|
||||
<li style="margin: 1rem; text-align: center;">No results found.</li>
|
||||
</ul>}
|
||||
{results && results.length > 0 && <ul class="cards">
|
||||
{results.map((r) => <Card result={r} />)}
|
||||
</ul>}
|
||||
<section id="search-results" class={Styles.Results}>
|
||||
{!results && (
|
||||
<div id="loading-message" class={Styles.Loading}>
|
||||
Loading...
|
||||
</div>
|
||||
)}
|
||||
{results && results.length === 0 && (
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
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>
|
||||
export let props: {
|
||||
title: string,
|
||||
inputPath: string,
|
||||
headers: { text: string, slug: string }[]
|
||||
export let props: {
|
||||
title: string,
|
||||
inputPath: string,
|
||||
headers: { text: string, slug: string }[]
|
||||
};
|
||||
</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>
|
||||
<aside class="snow-toc snow-toc__subnav snow-view-subnav">
|
||||
<h2 class="content-title">
|
||||
{props.title}
|
||||
</h2>
|
||||
<aside class="subnav">
|
||||
{props.headers.length > 0 && (
|
||||
<div>
|
||||
<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="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>
|
||||
<h4 class="header">Suggest a change</h4>
|
||||
<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) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.grid-body {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.grid-body-header h1 {
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.markdown-body,
|
||||
.fbody-header {
|
||||
max-width: 840px;
|
||||
|
|
@ -67,7 +55,6 @@
|
|||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
|
||||
.markdown-body,
|
||||
.toc {
|
||||
padding: 1em;
|
||||
|
|
@ -75,7 +62,6 @@
|
|||
}
|
||||
|
||||
@media (max-width: 740px) {
|
||||
|
||||
.markdown-body img,
|
||||
.markdown-body iframe {
|
||||
max-width: 108%;
|
||||
|
|
@ -87,18 +73,17 @@
|
|||
padding: 20px 0 0 0;
|
||||
}
|
||||
|
||||
.header-snowpack {
|
||||
font-size: 3.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.header-snowpack {
|
||||
font-size: 3.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.markdown-body h1 {
|
||||
font-size: 3.5em;
|
||||
}
|
||||
.markdown-body h1 {
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
.markdown-body h3 .header-link {
|
||||
opacity: 1;
|
||||
}
|
||||
.markdown-body h3 .header-link {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -138,4 +123,4 @@
|
|||
<article class="markdown-body">
|
||||
<slot></slot>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,18 +4,63 @@
|
|||
|
||||
export const layout = 'layouts/base.hmx';
|
||||
export function setup({ context }) {
|
||||
return {}
|
||||
return {};
|
||||
}
|
||||
</script>
|
||||
|
||||
<astro:head>
|
||||
<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>
|
||||
<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">
|
||||
|
||||
<aside id="nav-primary" class="snow-view-nav">
|
||||
<Menu></Menu>
|
||||
</aside>
|
||||
|
|
@ -23,21 +68,36 @@
|
|||
<article class="snow-view-main">
|
||||
<div class="content">
|
||||
<article class="grid-body">
|
||||
<a 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
|
||||
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>
|
||||
|
||||
<div class="content markdown-body feature-list">
|
||||
<div class="feature-list-top">
|
||||
<p>
|
||||
<strong>Snowpack is a lightning-fast frontend build tool, designed for the modern web.</strong>
|
||||
It is an alternative to heavier, more complex bundlers like 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.
|
||||
<strong
|
||||
>Snowpack is a lightning-fast frontend build tool, designed
|
||||
for the modern web.</strong
|
||||
>
|
||||
It is an alternative to heavier, more complex bundlers like
|
||||
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>Once you try it, it's impossible to go back to anything else.</p>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list-bullets">
|
||||
|
|
@ -49,23 +109,28 @@
|
|||
</li>
|
||||
<li class="feature-list-bullet">
|
||||
<h3>Build once, cache forever</h3>
|
||||
Snowpack never builds the same file twice. Powered by JavaScript’s native module system (ESM) in the
|
||||
browser.
|
||||
Snowpack never builds the same file twice. Powered by
|
||||
JavaScript’s native module system (ESM) in the browser.
|
||||
</li>
|
||||
<li class="feature-list-bullet">
|
||||
<h3>HMR feat. Fast Refresh</h3>
|
||||
No refresh required. See changes reflected instantly in the browser with
|
||||
<a href="/concepts/hot-module-replacement">HMR + Fast Refresh</a>
|
||||
No refresh required. See changes reflected instantly in the
|
||||
browser with
|
||||
<a href="/concepts/hot-module-replacement"
|
||||
>HMR + Fast Refresh</a
|
||||
>
|
||||
for React, Preact & Svelte.
|
||||
</li>
|
||||
<li class="feature-list-bullet">
|
||||
<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>
|
||||
</li>
|
||||
<li class="feature-list-bullet">
|
||||
<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 class="feature-list-bullet">
|
||||
<h3>Plugins? Plugins!</h3>
|
||||
|
|
@ -77,17 +142,27 @@
|
|||
</ul>
|
||||
|
||||
<div class="feature-list-buttons">
|
||||
<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>
|
||||
<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>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
import news from '../data/news.json';
|
||||
import users from '../data/users.json';
|
||||
import PluginSearchPage from '../components/PluginSearchPage.jsx';
|
||||
|
||||
export const layout = 'layouts/main.hmx';
|
||||
|
|
@ -7,20 +49,22 @@
|
|||
return {
|
||||
context: {
|
||||
title: 'The Snowpack Plugin Catalog',
|
||||
description: 'Snowpack plugins allow for configuration-minimal tooling integration.',
|
||||
}
|
||||
description:
|
||||
'Snowpack plugins allow for configuration-minimal tooling integration.',
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<h2 class="content-title">
|
||||
{ context.title }
|
||||
</h2>
|
||||
<h2 class="content-title">{ context.title }</h2>
|
||||
|
||||
<h3 class="pluginPage-subheading">Customize Snowpack with optimized build plugins.</h3>
|
||||
<p class="pluginPage-intro">To learn more about our plugin system, check out the
|
||||
<h3 class="pluginPage-subheading">
|
||||
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">Creating your own plugin is easy!</a>
|
||||
</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",
|
||||
"version": "3.0.0",
|
||||
"scripts": {
|
||||
"start": "astro dev .",
|
||||
"start": "nodemon -w ../../lib -x 'astro dev .'",
|
||||
"build": "astro build",
|
||||
"test": "jest /__test__/",
|
||||
"format": "prettier --write \"src/**/*.js\" && yarn format:css",
|
||||
"format:css": "stylelint 'src/**/*.scss' --fix",
|
||||
"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": {
|
||||
"@material-ui/core": "^4.11.3",
|
||||
"astro": "file:../../",
|
||||
"date-fns": "^2.19.0",
|
||||
"deepmerge": "^4.2.2",
|
||||
"docsearch.js": "^2.6.3",
|
||||
|
|
@ -48,5 +22,32 @@
|
|||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"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';
|
||||
|
||||
// Components
|
||||
@use './components/button';
|
||||
@use './components/card-grid';
|
||||
@use './components/container';
|
||||
@use './components/hero';
|
||||
@use './components/icon';
|
||||
@use './components/logo';
|
||||
@use './components/nav';
|
||||
@use './components/old';
|
||||
@use './components/toc';
|
||||
@use './components/view';
|
||||
@use './components/search';
|
||||
@use './components/feature-list';
|
||||
@use './components/button';
|
||||
@use './components/copy-button';
|
||||
@use './components/card-grid';
|
||||
|
||||
// Pages
|
||||
@use './pages/plugins';
|
||||
|
||||
@import 'docsearch.js/dist/cdn/docsearch.min.css';
|
||||
// @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_',
|
||||
},
|
||||
plugins: [
|
||||
[
|
||||
'@snowpack/plugin-sass', { compilerOptions: { style: 'compressed' } },
|
||||
],
|
||||
['@snowpack/plugin-sass', { compilerOptions: { style: 'compressed' } }],
|
||||
'@snowpack/plugin-svelte',
|
||||
'@snowpack/plugin-vue'
|
||||
'@snowpack/plugin-vue',
|
||||
],
|
||||
packageOptions: {
|
||||
external: [
|
||||
'node-fetch'
|
||||
]
|
||||
},
|
||||
devOptions: {
|
||||
// Eleventy updates multiple files at once, so add a 1000ms delay before we trigger a browser update
|
||||
hmrDelay: 1000,
|
||||
},
|
||||
buildOptions: {
|
||||
out: '_site',
|
||||
},
|
||||
|
|
|
|||
64
package-lock.json
generated
64
package-lock.json
generated
|
|
@ -527,7 +527,8 @@
|
|||
"big-integer": {
|
||||
"version": "1.6.48",
|
||||
"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": {
|
||||
"version": "5.2.2",
|
||||
|
|
@ -565,6 +566,7 @@
|
|||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.1.1.tgz",
|
||||
"integrity": "sha1-1g1dzCDLptx+HymbNdPh+V2vuuY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"big-integer": "^1.6.7"
|
||||
}
|
||||
|
|
@ -746,9 +748,10 @@
|
|||
"dev": true
|
||||
},
|
||||
"cli-spinners": {
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.5.0.tgz",
|
||||
"integrity": "sha512-PC+AmIuK04E6aeSs/pUccSujsTzBhu4HzC2dL+CfJB/Jcc2qTRbEwZQDfIUpt2Xl8BodYBEq8w4fc0kU2I9DjQ=="
|
||||
"version": "2.6.0",
|
||||
"resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.0.tgz",
|
||||
"integrity": "sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q==",
|
||||
"dev": true
|
||||
},
|
||||
"cliui": {
|
||||
"version": "7.0.4",
|
||||
|
|
@ -1002,6 +1005,7 @@
|
|||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-2.0.0.tgz",
|
||||
"integrity": "sha1-AezONxpx6F8VoXF354YwR+c9vn0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"bplist-parser": "^0.1.0",
|
||||
"pify": "^2.3.0",
|
||||
|
|
@ -1012,6 +1016,7 @@
|
|||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/untildify/-/untildify-2.1.0.tgz",
|
||||
"integrity": "sha1-F+soB5h/dpUunASF/DEdBqgmouA=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"os-homedir": "^1.0.0"
|
||||
}
|
||||
|
|
@ -1167,9 +1172,10 @@
|
|||
"integrity": "sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA=="
|
||||
},
|
||||
"esbuild": {
|
||||
"version": "0.8.57",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.8.57.tgz",
|
||||
"integrity": "sha512-j02SFrUwFTRUqiY0Kjplwjm1psuzO1d6AjaXKuOR9hrY0HuPsT6sV42B6myW34h1q4CRy+Y3g4RU/cGJeI/nNA=="
|
||||
"version": "0.9.6",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.9.6.tgz",
|
||||
"integrity": "sha512-F6vASxU0wT/Davt9aj2qtDwDNSkQxh9VbyO56M7PDWD+D/Vgq/rmUDGDQo7te76W5auauVojjnQr/wTu3vpaUA==",
|
||||
"dev": true
|
||||
},
|
||||
"escalade": {
|
||||
"version": "3.1.1",
|
||||
|
|
@ -1484,6 +1490,12 @@
|
|||
"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": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
|
||||
|
|
@ -1537,7 +1549,8 @@
|
|||
"function-bind": {
|
||||
"version": "1.1.1",
|
||||
"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": {
|
||||
"version": "1.0.1",
|
||||
|
|
@ -1685,6 +1698,7 @@
|
|||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"function-bind": "^1.1.1"
|
||||
}
|
||||
|
|
@ -1868,6 +1882,7 @@
|
|||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
|
||||
"integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has": "^1.0.3"
|
||||
}
|
||||
|
|
@ -1880,7 +1895,8 @@
|
|||
"is-docker": {
|
||||
"version": "2.1.1",
|
||||
"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": {
|
||||
"version": "0.1.1",
|
||||
|
|
@ -1954,6 +1970,7 @@
|
|||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
|
||||
"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-docker": "^2.0.0"
|
||||
}
|
||||
|
|
@ -2380,6 +2397,7 @@
|
|||
"version": "7.4.2",
|
||||
"resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
|
||||
"integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-docker": "^2.0.0",
|
||||
"is-wsl": "^2.1.1"
|
||||
|
|
@ -2402,7 +2420,8 @@
|
|||
"os-homedir": {
|
||||
"version": "1.0.2",
|
||||
"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": {
|
||||
"version": "1.1.0",
|
||||
|
|
@ -2494,7 +2513,8 @@
|
|||
"path-parse": {
|
||||
"version": "1.0.6",
|
||||
"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": {
|
||||
"version": "4.0.0",
|
||||
|
|
@ -2510,7 +2530,8 @@
|
|||
"pify": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
||||
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
|
||||
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
|
||||
"dev": true
|
||||
},
|
||||
"postcss": {
|
||||
"version": "8.2.8",
|
||||
|
|
@ -2792,6 +2813,7 @@
|
|||
"version": "1.20.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
|
||||
"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-core-module": "^2.2.0",
|
||||
"path-parse": "^1.0.6"
|
||||
|
|
@ -2828,9 +2850,10 @@
|
|||
}
|
||||
},
|
||||
"rollup": {
|
||||
"version": "2.41.4",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.41.4.tgz",
|
||||
"integrity": "sha512-f9IHfMO8p2Y8OdisI7Oj3oKkPuaQ6cgSwYqAi0TDvP3w2p+oX1VejX/w28a1h8WTnrapzfO5d4Uqhww+gL0b0g==",
|
||||
"version": "2.42.3",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.42.3.tgz",
|
||||
"integrity": "sha512-JjaT9WaUS5vmjy6xUrnPOskjkQg2cN4WSACNCwbOvBz8VDmbiKVdmTFUoMPRqTud0tsex8Xy9/boLbDW9HKD1w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fsevents": "~2.3.1"
|
||||
}
|
||||
|
|
@ -2950,14 +2973,17 @@
|
|||
}
|
||||
},
|
||||
"snowpack": {
|
||||
"version": "3.1.0-pre.13",
|
||||
"resolved": "https://registry.npmjs.org/snowpack/-/snowpack-3.1.0-pre.13.tgz",
|
||||
"integrity": "sha512-hvLMf+u5/T2sfrh8tIA+QkLwkqlUmvWEGuW3SccOB2yrKrY+4J9S+qOj8goJF62RrDRw567UyS8N3OQBKXdLqw==",
|
||||
"version": "3.1.0-pre.14",
|
||||
"resolved": "https://registry.npmjs.org/snowpack/-/snowpack-3.1.0-pre.14.tgz",
|
||||
"integrity": "sha512-NJm+XOMHryrDPWkqpqqBjQLZcSrs8WzW84H0vs3m10kFD1vvOBqPrD5ECH3fRVre314wA3arOgZbWGhY27A29w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cli-spinners": "^2.5.0",
|
||||
"default-browser-id": "^2.0.0",
|
||||
"esbuild": "^0.8.7",
|
||||
"esbuild": "^0.9.3",
|
||||
"fdir": "^5.0.0",
|
||||
"fsevents": "^2.2.0",
|
||||
"micromatch": "^4.0.2",
|
||||
"open": "^7.0.4",
|
||||
"resolve": "^1.20.0",
|
||||
"rollup": "^2.34.0"
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
"dev": "concurrently 'tsc --watch' 'npm run copy-js:watch'",
|
||||
"format": "prettier -w 'src/**/*.{js,ts}'",
|
||||
"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"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
@ -50,7 +50,6 @@
|
|||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"sass": "^1.32.8",
|
||||
"snowpack": "^3.1.0-pre.13",
|
||||
"svelte": "^3.35.0",
|
||||
"vue": "^3.0.7",
|
||||
"yargs-parser": "^20.2.7"
|
||||
|
|
@ -73,6 +72,7 @@
|
|||
"preact": "^10.5.12",
|
||||
"preact-render-to-string": "^5.1.14",
|
||||
"prettier": "^2.2.1",
|
||||
"snowpack": "^3.1.0-pre.14",
|
||||
"typescript": "^4.2.3",
|
||||
"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 selectedPageUrl = `/_hmx/pages/${selectedPage}.js`;
|
||||
|
||||
// Non-hmx pages
|
||||
// Non-hmx pages (file resources)
|
||||
if (!existsSync(selectedPageLoc) && !existsSync(selectedPageMdLoc)) {
|
||||
try {
|
||||
const result = await snowpack.loadUrl(reqPath);
|
||||
|
||||
// success
|
||||
return {
|
||||
statusCode: 200,
|
||||
...result,
|
||||
};
|
||||
} catch (err) {
|
||||
return {
|
||||
statusCode: 404,
|
||||
error: err,
|
||||
};
|
||||
// build error
|
||||
if (err.failed) {
|
||||
return { statusCode: 500, type: 'unknown', error: err };
|
||||
}
|
||||
|
||||
// not found
|
||||
return { statusCode: 404, error: err };
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue