mirror of https://github.com/sveltejs/svelte
Richard Harris
6 years ago
commit
2e6f9c4214
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 828 B |
|
Before Width: | Height: | Size: 3.9 KiB |
@ -1,277 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import Icon from './Icon.svelte';
|
|
||||||
import { page } from '@sapper/app';
|
|
||||||
|
|
||||||
export let segment;
|
|
||||||
|
|
||||||
let open = false;
|
|
||||||
let visible = true;
|
|
||||||
|
|
||||||
// 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.technology">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 |
@ -1,15 +1,14 @@
|
|||||||
import Node from './shared/Node';
|
|
||||||
import Block from '../render-dom/Block';
|
|
||||||
import map_children from './shared/map_children';
|
import map_children from './shared/map_children';
|
||||||
|
import AbstractBlock from './shared/AbstractBlock';
|
||||||
|
|
||||||
export default class PendingBlock extends Node {
|
export default class PendingBlock extends AbstractBlock {
|
||||||
block: Block;
|
|
||||||
children: Node[];
|
|
||||||
|
|
||||||
constructor(component, parent, scope, info) {
|
constructor(component, parent, scope, info) {
|
||||||
super(component, parent, scope, info);
|
super(component, parent, scope, info);
|
||||||
this.children = map_children(component, parent, scope, info.children);
|
this.children = map_children(component, parent, scope, info.children);
|
||||||
|
|
||||||
|
if (!info.skip) {
|
||||||
this.warn_if_empty_block();
|
this.warn_if_empty_block();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -0,0 +1,25 @@
|
|||||||
|
import Block from '../../render-dom/Block';
|
||||||
|
import Component from './../../Component';
|
||||||
|
import Node from './Node';
|
||||||
|
|
||||||
|
export default class AbstractBlock extends Node {
|
||||||
|
block: Block;
|
||||||
|
children: Node[];
|
||||||
|
|
||||||
|
constructor(component: Component, parent, scope, info: any) {
|
||||||
|
super(component, parent, scope, info);
|
||||||
|
}
|
||||||
|
|
||||||
|
warn_if_empty_block() {
|
||||||
|
if (!this.children || this.children.length > 1) return;
|
||||||
|
|
||||||
|
const child = this.children[0];
|
||||||
|
|
||||||
|
if (!child || (child.type === 'Text' && !/[^ \r\n\f\v\t]/.test(child.data))) {
|
||||||
|
this.component.warn(this, {
|
||||||
|
code: 'empty-block',
|
||||||
|
message: 'Empty block'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
export function new_tail(): string {
|
||||||
|
return '%%tail_head%%';
|
||||||
|
}
|
||||||
|
|
||||||
|
export function attach_head(head: string, tail: string): string {
|
||||||
|
return tail.replace('%%tail_head%%', head);
|
||||||
|
}
|
||||||
@ -1,4 +1,6 @@
|
|||||||
export { default as compile } from './compile/index';
|
export { default as compile } from './compile/index';
|
||||||
|
export { default as parse } from './parse/index';
|
||||||
export { default as preprocess } from './preprocess/index';
|
export { default as preprocess } from './preprocess/index';
|
||||||
|
export { walk } from 'estree-walker';
|
||||||
|
|
||||||
export const VERSION = '__VERSION__';
|
export const VERSION = '__VERSION__';
|
||||||
@ -1,3 +1,3 @@
|
|||||||
{#each animals as [key, value]}
|
{#each animals as [key, value, ...rest]}
|
||||||
<p>{key}: {value}</p>
|
<p>{key}: {value}</p>
|
||||||
{/each}
|
{/each}
|
||||||
|
|||||||
@ -0,0 +1,4 @@
|
|||||||
|
<div>
|
||||||
|
<slot />
|
||||||
|
<div {...$$props}></div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div>
|
||||||
|
<input />
|
||||||
|
<div class="foo"></div>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target }) {
|
||||||
|
component.value = 'foo';
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>
|
||||||
|
<input />
|
||||||
|
<div class="foo"></div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<script>
|
||||||
|
import Nested from './Nested.svelte';
|
||||||
|
export let value = '';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Nested class="foo">
|
||||||
|
<input bind:value />
|
||||||
|
</Nested>
|
||||||
@ -1,5 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
export let value;
|
export let value;
|
||||||
|
export let value_with_default = undefined;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input bind:value>
|
<input bind:value>
|
||||||
@ -1,6 +1,7 @@
|
|||||||
<script>
|
<script>
|
||||||
export let x;
|
export let x;
|
||||||
export let y;
|
export let y;
|
||||||
|
export let z = undefined;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div>{x} {y}</div>
|
<div>{x} {y}</div>
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
animalEntries: [
|
||||||
|
{ animal: 'raccoon', class: 'mammal' },
|
||||||
|
{ animal: 'eagle', class: 'bird' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
html: `
|
||||||
|
<p class="mammal">raccoon</p>
|
||||||
|
<p class="bird">eagle</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
test({ assert, component, target }) {
|
||||||
|
component.animalEntries = [{ animal: 'cow', class: 'mammal' }];
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p class="mammal">cow</p>
|
||||||
|
`);
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
export let animalEntries;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each animalEntries as { animal, ...props } }
|
||||||
|
<p {...props}>{animal}</p>
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<p>4</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
test({ assert, component, target }) {
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>4</p>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<script>
|
||||||
|
const num = 2;
|
||||||
|
$: squared = num * num;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>{squared}</p>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
export default {
|
||||||
|
html: `0`,
|
||||||
|
|
||||||
|
async test({ assert, component, target }) {
|
||||||
|
await component.increment();
|
||||||
|
assert.htmlEqual(target.innerHTML, `1`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
import { writable } from '../../../../store.js';
|
||||||
|
|
||||||
|
const foo = writable(0);
|
||||||
|
|
||||||
|
export function increment() {
|
||||||
|
$foo++;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{$foo}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
export default {
|
||||||
|
html: `42`,
|
||||||
|
};
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
let foo = writable(0);
|
||||||
|
foo = writable(42);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{$foo}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script>
|
||||||
|
let caption = 'a foo in its natural habitat';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img src='foo.jpg' alt='a picture of a foo'>
|
||||||
|
{#if caption}
|
||||||
|
<figcaption>{caption}</figcaption>
|
||||||
|
{/if}
|
||||||
|
</figure>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
[]
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<script>
|
||||||
|
let promise;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#await promise}
|
||||||
|
<p>Loading</p>
|
||||||
|
{:then data}
|
||||||
|
<p>Data: {data}</p>
|
||||||
|
{/await}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
[]
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
let promise;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#await promise then data}
|
||||||
|
<p>Data: {data}</p>
|
||||||
|
{/await}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
[]
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
[{
|
||||||
|
"code": "comma-after-rest",
|
||||||
|
"message": "Comma is not permitted after the rest element",
|
||||||
|
"pos": 100,
|
||||||
|
"start": {
|
||||||
|
"line": 5,
|
||||||
|
"column": 53,
|
||||||
|
"character": 100
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 5,
|
||||||
|
"column": 53,
|
||||||
|
"character": 100
|
||||||
|
}
|
||||||
|
}]
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
export let animalEntries;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each animalEntries as { animal, features: { ...rest, eyes } } }
|
||||||
|
<p {...rest}>{animal} {eyes}</p>
|
||||||
|
{/each}
|
||||||
Loading…
Reference in new issue