mirror of https://github.com/sveltejs/svelte
Rich Harris
6 years ago
committed by
GitHub
parent
196ecf1298
commit
85b1850b77
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 828 B |
|
Before Width: | Height: | Size: 3.9 KiB |
@ -1,279 +0,0 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import Icon from './Icon.svelte';
|
||||
import { stores } from '@sapper/app';
|
||||
|
||||
export let segment;
|
||||
|
||||
let open = false;
|
||||
let visible = true;
|
||||
|
||||
const { page } = stores();
|
||||
|
||||
// hide nav whenever we navigate
|
||||
page.subscribe(() => {
|
||||
open = false;
|
||||
});
|
||||
|
||||
// TODO remove this post-https://github.com/sveltejs/svelte/issues/1914
|
||||
let ul;
|
||||
onMount(() => {
|
||||
function handler(event) {
|
||||
if (!open) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
open = true;
|
||||
}
|
||||
}
|
||||
|
||||
ul.addEventListener('touchstart', handler, {
|
||||
capture: true
|
||||
});
|
||||
|
||||
return () => {
|
||||
ul.removeEventListener('touchstart', handler, {
|
||||
capture: true
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
// Prevents navbar to show/hide when clicking in docs sidebar
|
||||
let hash_changed = false;
|
||||
function handle_hashchange() {
|
||||
hash_changed = true;
|
||||
}
|
||||
|
||||
let last_scroll = 0;
|
||||
function handle_scroll() {
|
||||
const scroll = window.pageYOffset;
|
||||
if (!hash_changed) {
|
||||
visible = (scroll < 50 || scroll < last_scroll);
|
||||
}
|
||||
|
||||
last_scroll = scroll;
|
||||
hash_changed = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100vw;
|
||||
height: var(--nav-h);
|
||||
padding: 0 var(--side-nav);
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
box-shadow: 0 -0.4rem 0.9rem 0.2rem rgba(0,0,0,.5);
|
||||
font-family: var(--font);
|
||||
z-index: 100;
|
||||
user-select: none;
|
||||
transform: translate(0,calc(-100% - 1rem));
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
header.visible {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: var(--nav-h);
|
||||
padding: 0 var(--side-nav) 0 var(--side-nav);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: transparent;
|
||||
transform: none;
|
||||
transition: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.primary {
|
||||
list-style: none;
|
||||
font-family: var(--font);
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
display: none;
|
||||
}
|
||||
|
||||
li.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
padding: 0 3rem 0 0;
|
||||
background: url(/icons/chevron.svg) calc(100% - 1em) 0.05em no-repeat;
|
||||
background-size: 1em 1em;
|
||||
}
|
||||
|
||||
ul::after {
|
||||
/* prevent clicks from registering if nav is closed */
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
ul.open {
|
||||
padding: 0 0 1em 0;
|
||||
background: white;
|
||||
border-left: 1px solid #eee;
|
||||
border-right: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-radius: 0 0 var(--border-r) var(--border-r);
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
ul.open li {
|
||||
display: block;
|
||||
text-align: right
|
||||
}
|
||||
|
||||
ul.open::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul li a {
|
||||
font-size: var(--h5);
|
||||
padding: 0 .8rem;
|
||||
}
|
||||
|
||||
ul.open li a {
|
||||
padding: 1.5rem 3.7rem 1.5rem 4rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.open li:first-child a {
|
||||
padding-top: 2.3rem;
|
||||
}
|
||||
|
||||
.primary :global(svg) {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.home {
|
||||
position: relative;
|
||||
top: -.1rem;
|
||||
width: 18rem;
|
||||
height: 4.2rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
background: url(/svelte-logo-horizontal.svg) 0 50% no-repeat;
|
||||
background-size: auto 100%;
|
||||
/* z-index: 11; */
|
||||
}
|
||||
|
||||
.active {
|
||||
color: var(--prime)
|
||||
}
|
||||
|
||||
.modal-background {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
border-bottom: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
li:not(.active) a:hover {
|
||||
color: var(--flash);
|
||||
}
|
||||
|
||||
@media (min-width: 840px) {
|
||||
ul {
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
ul.open {
|
||||
padding: 0;
|
||||
background: white;
|
||||
border: none;
|
||||
align-self: initial;
|
||||
}
|
||||
|
||||
ul.open li {
|
||||
display: inline;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
ul.open li a {
|
||||
font-size: var(--h5);
|
||||
padding: 0 .8rem;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
ul::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
.hide-if-desktop {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:window on:hashchange={handle_hashchange} on:scroll={handle_scroll} />
|
||||
|
||||
<header class:visible="{visible || open}">
|
||||
<nav>
|
||||
<a rel="prefetch" href='.' class="home" title='Homepage'></a>
|
||||
|
||||
{#if open}
|
||||
<div class="modal-background hide-if-desktop" on:click="{() => open = false}"></div>
|
||||
{/if}
|
||||
|
||||
<ul
|
||||
bind:this={ul}
|
||||
class="primary"
|
||||
class:open
|
||||
on:mouseenter="{() => open = true}"
|
||||
on:mouseleave="{() => open = false}"
|
||||
>
|
||||
<li class="hide-if-desktop" class:active="{!segment}"><a rel="prefetch" href=".">Home</a></li>
|
||||
<li class:active="{segment === 'tutorial'}"><a rel="prefetch" href="tutorial">Tutorial</a></li>
|
||||
<li class:active="{segment === 'docs'}"><a rel="prefetch" href="docs">API Docs</a></li>
|
||||
<li class:active="{segment === 'examples'}"><a rel="prefetch" href="examples">Examples</a></li>
|
||||
<li class:active="{segment === 'repl'}"><a rel="prefetch" href="repl">REPL</a></li>
|
||||
<li class:active="{segment === 'blog'}"><a rel="prefetch" href="blog">Blog</a></li>
|
||||
<li><a href="https://sapper.svelte.dev">Sapper</a></li>
|
||||
|
||||
<li>
|
||||
<a href="https://discord.gg/yy75DKs" title="Discord Chat">
|
||||
<Icon name="message-square" />
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://github.com/sveltejs/svelte" title="Github Repo">
|
||||
<Icon name="github" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
@ -1,28 +0,0 @@
|
||||
<!--
|
||||
-----------------------------------------------
|
||||
svg svelte-logo 1.0
|
||||
- style doesn't like var(--xxx)???
|
||||
-----------------------------------------------
|
||||
-->
|
||||
|
||||
<script>
|
||||
export let outer = '';
|
||||
export let inner = '';
|
||||
export let size;
|
||||
</script>
|
||||
|
||||
<svg class='logo' viewBox='0 0 103 124' width={size} height={size}>
|
||||
<path style='{outer === "none" ? "fill:none; stroke:none;" : outer || "fill:var(--prime)"}' d='M96.33,20.61C85.38,4.93,63.74.28,48.09,10.25L20.61,27.77A31.46,31.46,0,0,0,6.37,48.88,33.22,33.22,0,0,0,9.64,70.2,31.52,31.52,0,0,0,4.93,82a33.61,33.61,0,0,0,5.73,25.41c11,15.68,32.6,20.33,48.25,10.36l27.48-17.52a31.48,31.48,0,0,0,14.24-21.11A33.22,33.22,0,0,0,97.36,57.8,31.52,31.52,0,0,0,102.07,46a33.57,33.57,0,0,0-5.74-25.41' />
|
||||
<path style='{(inner === "none") ? "fill:none; stroke:none;" : inner || "fill:white"}' d='M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45' />
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
.logo {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
stroke-miterlimit: 10;
|
||||
stroke-width: 3.5;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
</style>
|
||||
@ -1,68 +0,0 @@
|
||||
<script>
|
||||
export let style;
|
||||
let show = false;
|
||||
|
||||
$: if (typeof document !== 'undefined') {
|
||||
if (show) document.body.classList.add('css-debug')
|
||||
else document.body.classList.remove('css-debug')
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--
|
||||
-----------------------------------------------
|
||||
simple css-debug
|
||||
-----------------------------------------------
|
||||
-->
|
||||
|
||||
<label {style}>
|
||||
<input type="checkbox" bind:checked={show}> grid
|
||||
</label>
|
||||
|
||||
{#if show}
|
||||
<div class='guide horizontal' style='top: calc(var(--nav-h) + var(--top-offset))' />
|
||||
<div class='guide vertical' style='left: var(--side-page)' />
|
||||
<div class='guide vertical' style='right: var(--side-page)' />
|
||||
<div class='guide vertical' style='left: var(--side-nav)' />
|
||||
<div class='guide vertical' style='right: var(--side-nav)' />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
label {
|
||||
position: fixed;
|
||||
padding: 0.3rem 1rem;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
opacity: 0.5;
|
||||
font: 300 1rem/1.7 var(--font-ui);
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
label:hover {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
input {
|
||||
display: none
|
||||
}
|
||||
|
||||
.guide {
|
||||
position: fixed;
|
||||
opacity: .5;
|
||||
z-index: 30
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
width: 100%;
|
||||
height: 0
|
||||
}
|
||||
|
||||
.vertical {
|
||||
width: 0;
|
||||
height: 100vh
|
||||
}
|
||||
|
||||
:global(.css-debug *) {
|
||||
outline: 1px solid rgba(73, 177, 238, 0.25);
|
||||
}
|
||||
</style>
|
||||
@ -1,28 +0,0 @@
|
||||
<!--
|
||||
-----------------------------------------------
|
||||
svg svelte-isometry 1.0
|
||||
- first simple try to simplify iso-grafics
|
||||
-----------------------------------------------
|
||||
-->
|
||||
|
||||
<script>
|
||||
export let style = '';
|
||||
export let size = '';
|
||||
</script>
|
||||
|
||||
<svg class='svelte-iso' viewBox='0 0 128 128' width={size} height={size}>
|
||||
<polygon {style} points="107.94 92 107.94 36 64.01 8 20.06 35.99 20.06 92.01 64 120 107.94 92" />
|
||||
<polyline {style} points="107.94 36 64.01 64 64 120" />
|
||||
<line {style} x1="64.01" y1="64" x2="20.06" y2="35.99" />
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
.svelte-iso {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
stroke-miterlimit: 10;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
</style>
|
||||
@ -1,81 +0,0 @@
|
||||
<!--
|
||||
NOTE
|
||||
from time to time <input type="color"> is crashing on chrome!
|
||||
no idea why?
|
||||
even with all extensions off
|
||||
-->
|
||||
{#if color}
|
||||
<input ref:prop class="color" on:input="change(this)" type="color" name={color} /> {/if}
|
||||
|
||||
{#if text}
|
||||
<input ref:prop on:input="change(this)" type="text" name={text} />
|
||||
{/if}
|
||||
|
||||
|
||||
<style>
|
||||
input,
|
||||
input:active,
|
||||
input:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
border: .1rem solid var(--text);
|
||||
padding: .8rem 1.4rem;
|
||||
font: 300 var(--code-fs)/1.7 var(--font-mono);
|
||||
color: var(--second);
|
||||
text-indent: 0;
|
||||
transition: all .2s var(--out-back);
|
||||
}
|
||||
|
||||
input[type=text]:focus {
|
||||
border-color: var(--flash);
|
||||
color: var(--flash);
|
||||
text-indent: .8rem;
|
||||
}
|
||||
|
||||
.color {
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* input-color-reset */
|
||||
::-webkit-color-swatch {
|
||||
border: none
|
||||
}
|
||||
|
||||
::-webkit-color-swatch-wrapper {
|
||||
padding: 0
|
||||
}
|
||||
|
||||
::-moz-color-swatch,
|
||||
::-moz-focus-inner {
|
||||
border: none
|
||||
}
|
||||
|
||||
::-moz-focus-inner {
|
||||
padding: 0
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import CustomProps from '../utils/css-custom-properties.js';
|
||||
|
||||
export default {
|
||||
oncreate() {
|
||||
this.cssprop = new CustomProps();
|
||||
let prop = this.refs.prop;
|
||||
prop.value = this.cssprop.get(prop.name);
|
||||
},
|
||||
|
||||
methods: {
|
||||
change(prop) {
|
||||
return this.cssprop.set(prop.name, prop.value)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,49 +0,0 @@
|
||||
<button class='toast' on:click='reload()'>
|
||||
Site has been updated — tap to reload
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.toast {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
background-color: var(--prime);
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
padding: 3.2rem 4rem;
|
||||
text-align: left;
|
||||
font: 300 var(--h6) var(--font-ui);
|
||||
z-index: 99;
|
||||
animation: slide-up 0.4s ease-out;
|
||||
}
|
||||
@keyframes slide-up {
|
||||
0% {
|
||||
transform: translate(0, 100%);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
reload() {
|
||||
window.location.reload();
|
||||
}
|
||||
},
|
||||
setup(Toast) {
|
||||
Toast.show = () => {
|
||||
const target = document.createDocumentFragment();
|
||||
new Toast({ target });
|
||||
|
||||
document.body.appendChild(target);
|
||||
Toast.show = () => {};
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,52 @@
|
||||
<script>
|
||||
import { Section } from '@sveltejs/site-kit';
|
||||
import IntersectionObserver from '../../components/IntersectionObserver.svelte';
|
||||
import ReplWidget from '../../components/Repl/ReplWidget.svelte';
|
||||
|
||||
export let id;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.example {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.example :global(a) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.example > :global(p) {
|
||||
margin: 4.4rem 2.4rem 2.4rem 0;
|
||||
}
|
||||
|
||||
.repl-container {
|
||||
width: 100%;
|
||||
height: 420px;
|
||||
border-radius: var(--border-r);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 920px) {
|
||||
.example {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
grid-gap: 0.5em;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<Section>
|
||||
<div class="example">
|
||||
<slot></slot>
|
||||
|
||||
<div class="repl-container">
|
||||
<IntersectionObserver once let:intersecting top={400}>
|
||||
{#if intersecting}
|
||||
<!-- <Lazy this={loadReplWidget} example={id}/> -->
|
||||
<ReplWidget example={id}/>
|
||||
{/if}
|
||||
</IntersectionObserver>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
@ -1,61 +0,0 @@
|
||||
import * as fleece from 'golden-fleece';
|
||||
|
||||
export function extract_frontmatter(markdown) {
|
||||
const match = /---\r?\n([\s\S]+?)\r?\n---/.exec(markdown);
|
||||
const frontMatter = match[1];
|
||||
const content = markdown.slice(match[0].length);
|
||||
|
||||
const metadata = {};
|
||||
frontMatter.split('\n').forEach(pair => {
|
||||
const colonIndex = pair.indexOf(':');
|
||||
metadata[pair.slice(0, colonIndex).trim()] = pair
|
||||
.slice(colonIndex + 1)
|
||||
.trim();
|
||||
});
|
||||
|
||||
return { metadata, content };
|
||||
}
|
||||
|
||||
export function extract_metadata(line, lang) {
|
||||
try {
|
||||
if (lang === 'html' && line.startsWith('<!--') && line.endsWith('-->')) {
|
||||
return fleece.evaluate(line.slice(4, -3).trim());
|
||||
}
|
||||
|
||||
if (
|
||||
lang === 'js' ||
|
||||
(lang === 'json' && line.startsWith('/*') && line.endsWith('*/'))
|
||||
) {
|
||||
return fleece.evaluate(line.slice(2, -2).trim());
|
||||
}
|
||||
} catch (err) {
|
||||
// TODO report these errors, don't just squelch them
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// map lang to prism-language-attr
|
||||
export const langs = {
|
||||
bash: 'bash',
|
||||
html: 'markup',
|
||||
sv: 'markup',
|
||||
js: 'javascript',
|
||||
css: 'css'
|
||||
};
|
||||
|
||||
|
||||
// links renderer
|
||||
export function link_renderer (href, title, text) {
|
||||
let target_attr = '';
|
||||
let title_attr = '';
|
||||
|
||||
if (href.startsWith("http")) {
|
||||
target_attr = ' target="_blank"';
|
||||
}
|
||||
|
||||
if (title !== null) {
|
||||
title_attr = ` title="${title}"`;
|
||||
}
|
||||
|
||||
return `<a href="${href}"${target_attr}${title_attr}>${text}</a>`;
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export const getFragment = () => window.location.hash.slice(1);
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.7 KiB |
Loading…
Reference in new issue