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';
|
||||
|
||||
export async function load({ params }) {
|
||||
export async function GET({ params }) {
|
||||
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