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