After attempting some kind of automated code/display view I just went with hand placing a component in each file which only took 20 minutes. It took me one week to figure out the automated way, and it ended up being slow and clunky.

master
Zed A. Shaw 3 years ago
parent ca0a708076
commit 2e863b922e
  1. 2
      public/build/bundle.css
  2. 2002
      public/build/bundle.js
  3. 2
      public/build/bundle.js.map
  4. 8
      public/global.css
  5. 1
      public/index.html
  6. 24
      src/components/CodeView.svelte
  7. 10
      src/components/Modal.svelte
  8. 3
      src/demos/Google.svelte
  9. 3
      src/demos/Instagram.svelte
  10. 5
      src/demos/Login.svelte
  11. 3
      src/demos/Pinterest.svelte
  12. 15
      src/demos/Twitter.svelte
  13. 3
      src/demos/XorAcademy.svelte
  14. 3
      src/demos/XorAcademyWatch.svelte
  15. 3
      src/demos/Youtube.svelte
  16. 1
      src/demos/index.svelte

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

@ -178,7 +178,7 @@ nav ul li ul li a {
/* Typography */
code,
samp {
background-color: var(--color-accent);
background-color: var(--color-bg-secondary);
border-radius: var(--border-radius);
color: var(--color-text);
display: inline-block;
@ -186,6 +186,10 @@ samp {
padding: 0 0.5rem;
}
code {
font-size: 1.3em;
}
details {
margin: 1.3rem 0;
}
@ -219,14 +223,12 @@ p {
pre {
margin: 1rem 0;
max-width: var(--width-card-wide);
padding: 1rem 0;
}
pre code,
pre samp {
display: block;
max-width: var(--width-card-wide);
padding: 0.5rem 2rem;
white-space: pre-wrap;
}

@ -9,6 +9,7 @@
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<link rel='stylesheet' href='/prism.css'>
<script defer src='/build/bundle.js'></script>
</head>

@ -0,0 +1,24 @@
<script>
import { onMount } from 'svelte';
export let source = "";
let code = "";
onMount(() => {
fetch(source)
.then(resource => resource.text())
.then(data => code = data);
});
</script>
<style>
</style>
<pre>
<code>
{code}
</code>
</pre>

@ -18,20 +18,20 @@
bottom: 0;
z-index: 10;
background: rgba(244,244,244,0.75);
padding: 0px;
}
modal-content {
flex-direction: column;
background: white;
box-shadow: 4px 4px 4px var(--color-shadow-dark);
border: 1px solid var(--color-accent);
border-radius: 5px;
max-height: 50vh;
min-height: 50vh;
max-width: 50vh;
max-height: 75vh;
min-height: 75vh;
max-width: 75vh;
width: 100%;
z-index: 20;
padding: 0.5rem;
padding: 0px;
}
</style>

@ -1,6 +1,7 @@
<script>
import { link } from 'svelte-spa-router';
import Icon from '../components/Icon.svelte';
import CodeView from '../components/CodeView.svelte';
</script>
<style>
@ -100,3 +101,5 @@
</search>
</content>
<CodeView source="/code/Google.svelte" />

@ -1,6 +1,7 @@
<script>
import { link } from 'svelte-spa-router';
import Icon from '../components/Icon.svelte';
import CodeView from '../components/CodeView.svelte';
let posts = [1,2,3,4,5,6,7,8,9,10];
let pins = [1,2,3,4];
@ -141,3 +142,5 @@
{/each}
</posts>
</content>
<CodeView source="/code/Instagram.svelte" />

@ -1,3 +1,7 @@
<script>
import CodeView from '../components/CodeView.svelte';
</script>
<style>
content {
display: flex;
@ -22,3 +26,4 @@
</content>
<CodeView source="/code/Login.svelte" />

@ -2,6 +2,7 @@
<script>
import { link } from 'svelte-spa-router';
import Icon from '../components/Icon.svelte';
import CodeView from '../components/CodeView.svelte';
let samples = [1,2,3];
let lanes = [1,2,3,4,5];
@ -179,3 +180,5 @@ pins lane {
</pins>
{/if}
</content>
<CodeView source="/code/Pinterest.svelte" />

@ -1,13 +1,9 @@
<script>
import { link } from 'svelte-spa-router';
import Icon from '../components/Icon.svelte';
import CodeBubble from '../components/CodeBubble.svelte';
import Modal from '../components/Modal.svelte';
import { onMount } from 'svelte';
let tweets = [1,2,3,4,5];
let modal_visible = true;
const toggle_modal = () => modal_visible = !modal_visible;
import CodeView from '../components/CodeView.svelte';
</script>
<style>
@ -318,12 +314,7 @@
</ul>
</aside>
</section>
</right>
</content>
<CodeBubble url="https://git.learnjsthehardway.com/" on:click={ toggle_modal } />
<Modal visible={modal_visible} on:click={ toggle_modal }>
<h1>Hi! This is Cool!</h1>
</Modal>
<CodeView source="/code/Twitter.svelte" />

@ -2,6 +2,7 @@
<script>
import { link } from 'svelte-spa-router';
import Icon from '../components/Icon.svelte';
import CodeView from '../components/CodeView.svelte';
let posts = [1,2,3,4,5,6,7,8,9];
let related = [1,2,3,4];
@ -153,3 +154,5 @@
{/each}
</posts>
</content>
<CodeView source="/code/XorAcademy.svelte" />

@ -2,6 +2,7 @@
<script>
import { link } from 'svelte-spa-router';
import Icon from '../components/Icon.svelte';
import CodeView from '../components/CodeView.svelte';
let cards = [1,2,3,4];
</script>
@ -239,3 +240,5 @@
</lower>
</main>
</content>
<CodeView source="/code/XorAcademyWatch.svelte" />

@ -1,6 +1,7 @@
<script>
import { link } from 'svelte-spa-router';
import Icon from '../components/Icon.svelte';
import CodeView from '../components/CodeView.svelte';
let cards = [1,2,3,4];
@ -277,3 +278,5 @@
</right>
</main>
</content>
<CodeView source="/code/Youtube.svelte" />

@ -79,3 +79,4 @@
<figcaption>Pinterest</figcaption>
</figure>
</images>

Loading…
Cancel
Save