mirror of https://github.com/sveltejs/svelte
Rich Harris
2 years ago
parent
362a7aede9
commit
12bcb25755
@ -1,128 +0,0 @@
|
|||||||
<!-- FIXME sometimes it adds a trailing slash when landing -->
|
|
||||||
<script>
|
|
||||||
// @ts-check
|
|
||||||
import { navigating } from '$app/stores';
|
|
||||||
import ScreenToggle from '$lib/components/ScreenToggle.svelte';
|
|
||||||
import Repl from '@sveltejs/repl';
|
|
||||||
import { theme } from '@sveltejs/site-kit/components';
|
|
||||||
import { mapbox_setup, svelteUrl } from '../../../config';
|
|
||||||
import TableOfContents from './TableOfContents.svelte';
|
|
||||||
|
|
||||||
export let data;
|
|
||||||
|
|
||||||
/** @type {number} */
|
|
||||||
let width;
|
|
||||||
let offset = 1;
|
|
||||||
/** @type {import('@sveltejs/repl').default} */
|
|
||||||
let repl;
|
|
||||||
|
|
||||||
const clone = (file) => ({
|
|
||||||
name: file.name.replace(/.\w+$/, ''),
|
|
||||||
type: file.type,
|
|
||||||
source: file.content
|
|
||||||
});
|
|
||||||
|
|
||||||
$: mobile = width < 768; // note: same as per media query below
|
|
||||||
/** @type {'columns' | 'rows'} */
|
|
||||||
$: replOrientation = mobile || width > 1080 ? 'columns' : 'rows';
|
|
||||||
|
|
||||||
$: repl && repl.set({ files: data.example.files.map(clone) });
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<svelte:head>
|
|
||||||
<title>{data.example?.title} {data.example?.title ? '•' : ''} Svelte Examples</title>
|
|
||||||
|
|
||||||
<meta name="twitter:title" content="Svelte examples" />
|
|
||||||
<meta name="twitter:description" content="Cybernetically enhanced web apps" />
|
|
||||||
<meta name="Description" content="Interactive example Svelte apps" />
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
<h1 class="visually-hidden">Examples</h1>
|
|
||||||
<div class="examples-container" bind:clientWidth={width}>
|
|
||||||
<div class="viewport offset-{offset}">
|
|
||||||
<TableOfContents
|
|
||||||
sections={data.examples_list}
|
|
||||||
active_section={data.example?.slug}
|
|
||||||
isLoading={!!$navigating}
|
|
||||||
/>
|
|
||||||
<div class="repl-container" class:loading={$navigating}>
|
|
||||||
<Repl
|
|
||||||
bind:this={repl}
|
|
||||||
{svelteUrl}
|
|
||||||
orientation={replOrientation}
|
|
||||||
fixed={mobile}
|
|
||||||
relaxed
|
|
||||||
injectedJS={mapbox_setup}
|
|
||||||
previewTheme={$theme.current}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{#if mobile}
|
|
||||||
<ScreenToggle bind:offset labels={['index', 'input', 'output']} />
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.examples-container {
|
|
||||||
position: relative;
|
|
||||||
height: calc(100vh - var(--sk-nav-height));
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0 0 42px 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.viewport {
|
|
||||||
display: grid;
|
|
||||||
width: 300%;
|
|
||||||
height: 100%;
|
|
||||||
grid-template-columns: 33.333% 66.666%;
|
|
||||||
transition: transform 0.3s;
|
|
||||||
grid-auto-rows: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.repl-container.loading {
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* temp fix for #2499 and #2550 while waiting for a fix for https://github.com/sveltejs/svelte-repl/issues/8 */
|
|
||||||
|
|
||||||
.repl-container :global(.tab-content),
|
|
||||||
.repl-container :global(.tab-content.visible) {
|
|
||||||
pointer-events: all;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.repl-container :global(.tab-content) {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
.repl-container :global(.tab-content.visible) {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.offset-1 {
|
|
||||||
transform: translate(-33.333%, 0);
|
|
||||||
}
|
|
||||||
.offset-2 {
|
|
||||||
transform: translate(-66.666%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.examples-container {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.viewport {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: grid;
|
|
||||||
/* TODO */
|
|
||||||
grid-template-columns: 36rem auto;
|
|
||||||
grid-auto-rows: 100%;
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.offset-1,
|
|
||||||
.offset-2 {
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { redirect } from '@sveltejs/kit';
|
import { redirect } from '@sveltejs/kit';
|
||||||
|
|
||||||
export async function load({ params }) {
|
export async function GET({ params }) {
|
||||||
throw redirect(308, `/repl/${params.slug}`);
|
throw redirect(308, `/repl/${params.slug}`);
|
||||||
}
|
}
|
||||||
@ -1,123 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
|
|
||||||
export let sections = [];
|
|
||||||
export let active_section = null;
|
|
||||||
export let isLoading = false;
|
|
||||||
|
|
||||||
let active_el;
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
active_el.scrollIntoView({ block: 'center' });
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<ul class="examples-toc">
|
|
||||||
{#each sections as section}
|
|
||||||
<!-- Avoid embeds -->
|
|
||||||
{#if section.title !== 'Embeds'}
|
|
||||||
<li>
|
|
||||||
<span class="section-title">{section.title}</span>
|
|
||||||
|
|
||||||
{#each section.examples as example}
|
|
||||||
<div class="row" class:active={example.slug === active_section} class:loading={isLoading}>
|
|
||||||
<a
|
|
||||||
href="/examples/{example.slug}"
|
|
||||||
class="row"
|
|
||||||
class:active={example.slug === active_section}
|
|
||||||
class:loading={isLoading}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="thumbnail"
|
|
||||||
alt="{example.title} thumbnail"
|
|
||||||
src="/examples/thumbnails/{example.slug}.jpg"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<span>{example.title}</span>
|
|
||||||
</a>
|
|
||||||
{#if example.slug === active_section}
|
|
||||||
<a bind:this={active_el} href="/repl/{example.slug}" class="repl-link">REPL</a>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</li>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.examples-toc {
|
|
||||||
overflow-y: auto;
|
|
||||||
height: 100%;
|
|
||||||
border-right: 1px solid var(--sk-back-4);
|
|
||||||
background-color: var(--sk-back-3);
|
|
||||||
color: var(--sk-text-2);
|
|
||||||
padding: 3rem 3rem 0 3rem;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.examples-toc li {
|
|
||||||
display: block;
|
|
||||||
line-height: 1.2;
|
|
||||||
margin: 0 0 4.8rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
display: block;
|
|
||||||
padding: 0 0 0.8rem 0;
|
|
||||||
font: 400 var(--sk-text-xs) var(--sk-font);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.12em;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
div {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
padding: 0.2rem 3rem;
|
|
||||||
margin: 0 -3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.active {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.active.loading {
|
|
||||||
background: rgba(0, 0, 0, 0.1) calc(100% - 3rem) 47% no-repeat url(/icons/loading.svg);
|
|
||||||
background-size: 1em 1em;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: flex;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
position: relative;
|
|
||||||
color: var(--sk-text-2);
|
|
||||||
border-bottom: none;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: start;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: var(--sk-text-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.repl-link {
|
|
||||||
flex: 0 1 auto;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-right: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumbnail {
|
|
||||||
background-color: #fff;
|
|
||||||
object-fit: contain;
|
|
||||||
width: 5rem;
|
|
||||||
height: 5rem;
|
|
||||||
border-radius: 2px;
|
|
||||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.13);
|
|
||||||
margin: 0.2em 0.5em 0.2em 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in new issue