Skip to content

Commit

Permalink
Fixed some load priority issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@addisonbeck
addisonbeck committed Sep 26, 2023
1 parent 43852ae commit 88e77c9
Show file tree
Hide file tree
Showing 7 changed files with 141 additions and 103 deletions.
1 change: 1 addition & 0 deletions src/lib/assets/themetoggle.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/lib/assets/tslogo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 13 additions & 4 deletions src/lib/components/Header.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
<script lang="ts">
import Nav from './Nav.svelte';
import ThemeToggle from './ThemeToggle.svelte';
async function load() {
const themeToggle = (await import(`$lib/assets/themetoggle.svg?raw`)).default;
return themeToggle;
}
</script>

<header>
<div class="header">
<Nav />
<div class="theme-toggle-section">
<ThemeToggle />
</div>
{#await load() then themeSvg}
<Nav />
<div class="theme-toggle-section">
<ThemeToggle svg={themeSvg}/>
</div>
{/await}
</div>
</header>

Expand All @@ -24,5 +31,7 @@
border-bottom: 1px solid var(--header-border-color);
display: grid;
grid-template-columns: 1fr auto;
min-height: 36px;
align-items: center;
}
</style>
58 changes: 39 additions & 19 deletions src/lib/components/SiteSummary.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,46 @@
import SiteTools from './SiteTools.svelte'
import name from '$lib/data/Name'
import urls from '$lib/data/Urls'
</script>
async function load() {
const svelteLogo = await import(`$lib/assets/sveltelogo.svg?raw`);
const typescriptLogo = await import('$lib/assets/tslogo.svg?raw');
const htmlLogo = await import('$lib/assets/htmllogo.svg?raw');
const cssLogo = await import('$lib/assets/csslogo.svg?raw');
const doLogo = await import ('$lib/assets/dologo.svg?raw');
const storybookLogo = await import('$lib/assets/storybooklogo.svg?raw');
const tools: { title: string, href: string, purpose: string, svg: string}[] = [
{ title: "Svelte", href: "https://svelte.dev", purpose: "As a front-end component framework", svg: svelteLogo.default },
{ title: "Typescript", href: "https://www.typescriptlang.org", purpose: "To make Javascript more fun to write", svg: typescriptLogo.default},
{ title: "HTML", href: "https://html.spec.whatwg.org", purpose: "For obvious reasons", svg: htmlLogo.default},
{ title: "CSS with CSS Grid", href: "https://www.w3schools.com/css/css_grid.asp", purpose: "Also for obvious reasons", svg: cssLogo.default},
{ title: "Digital Ocean", href: "https://www.digitalocean.com/", purpose: "As a hosting platform", svg: doLogo.default},
{ title: "Storybook", href: "https://storybook.js.org", purpose: "During development as a component library", svg: storybookLogo.default},
]
return tools;
}
</script>
<div class="site-summary">
<div class="site-summary-heading">
<h2>Hi, I'm {name.first}</h2>
</div>
<div class="site-summary-body">
<p>
I've been a software engineer for almost a decade.
I've written code used by millions of people.
This site in particular is built using:
</p>
<SiteTools />
<p>
You can check out the source code on <a href="{urls.githubProjectRepo.full}" target="_blank">GitHub</a>.
PR's are welcome 🤠
</p>
<p>
If you want to read more about me you can grab my resume <a class="self-summary-link" href="/resume">here</a>. If you want to skip straight to sending over an offer you can get in touch with me <a class="self-summary-link" href="/contact">here</a>.
</p>
</div>
{#await load() then tools}
<div class="site-summary-heading">
<h2>Hi, I'm {name.first}</h2>
</div>
<div class="site-summary-body">
<p>
I've been a software engineer for almost a decade.
I've written code used by millions of people.
This site in particular is built using:
</p>
<SiteTools {tools}/>
<p>
You can check out the source code on <a href="{urls.githubProjectRepo.full}" target="_blank">GitHub</a>.
PR's are welcome 🤠
</p>
<p>
If you want to read more about me you can grab my resume <a class="self-summary-link" href="/resume">here</a>. If you want to skip straight to sending over an offer you can get in touch with me <a class="self-summary-link" href="/contact">here</a>.
</p>
</div>
{/await}
</div>

<style>
Expand All @@ -32,6 +51,7 @@
grid-template-rows: auto 1fr;
grid-template-columns: 1fr 90% 1fr;
border: 1px solid;
min-height: 650px;
}
.site-summary-heading {
Expand Down
81 changes: 5 additions & 76 deletions src/lib/components/SiteTools.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,6 @@
<script lang="ts">
import svelteLogo from '$lib/assets/sveltelogo.svg';
import typescriptLogo from '$lib/assets/tslogo.svg';
import htmlLogo from '$lib/assets/htmllogo.svg';
import cssLogo from '$lib/assets/csslogo.svg';
import doLogo from '$lib/assets/dologo.svg';
import storybookLogo from '$lib/assets/storybooklogo.svg';
export let tools: { title: string, href: string, purpose: string, svg: string}[] = [
{ title: "Svelte", href: "https://svelte.dev", purpose: "As a front-end component framework", svg: svelteLogo },
{ title: "Typescript", href: "https://www.typescriptlang.org", purpose: "To make Javascript more fun to write", svg: typescriptLogo},
{ title: "HTML", href: "https://html.spec.whatwg.org", purpose: "For obvious reasons", svg: htmlLogo},
{ title: "CSS with CSS Grid", href: "https://www.w3schools.com/css/css_grid.asp", purpose: "Also for obvious reasons", svg: cssLogo},
{ title: "Digital Ocean", href: "https://www.digitalocean.com/", purpose: "As a hosting platform", svg: doLogo},
{ title: "Storybook", href: "https://storybook.js.org", purpose: "During development as a component library", svg: storybookLogo},
]
import './sitetools.css';
export let tools: { title: string, href: string, purpose: string, svg: string }[];
</script>

<div class="site-tools">
Expand All @@ -25,7 +12,9 @@
{#each tools as tool}
<div class="site-tools-item">
<div class="site-tools-item-link cell left-cell">
<img class="site-tools-item-link-svg" src="{tool.svg}" alt="{tool.title} logo">
<div class="site-tools-item-link-svg">
{@html tool.svg}
</div>
<a href="{tool.href}" target="_blank">{tool.title}</a>
</div>
<div class="cell right-cell">
Expand All @@ -36,63 +25,3 @@
</div>
</div>

<style>
.site-tools {
display: grid;
grid-template-rows: auto 1fr;
}
.site-tools-heading {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid;
text-align: center;
font-weight: 700;
}
.site-tools-body {
display: grid;
grid-auto-flow: row;
}
.site-tools-item {
display: grid;
grid-template-columns: 1fr 1fr;
}
.cell {
padding: 10px;
}
.left-cell {
border: 1px solid;
border-right: 0;
border-top: 0;
}
.right-cell {
border: 1px solid;
border-top: 0;
}
.site-tools-item-link {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 20px;
}
.site-tools-item-link-svg {
height: 1em;
width: auto;
}
@media (max-width: 400px) {
.site-tools-item-link {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
align-items: center;
justify-items: center;
}
}
</style>
20 changes: 17 additions & 3 deletions src/lib/components/ThemeToggle.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,27 @@
<script>
<script lang="ts">
import Button from "./Button.svelte"
export let svg: string;
let config = {
id: "themeToggle",
type: "round"
}
function click() {
const isDark = localStorage.getItem('theme') === "dark" || (!('theme' in localStorage) && preference === 'dark')
if (isDark) {
localStorage.setItem('theme', 'light');
document.documentElement.classList.remove('dark');
document.documentElement.classList.add('light');
} else {
localStorage.setItem('theme', 'dark');
document.documentElement.classList.remove('light');
document.documentElement.classList.add('dark');
}
}
</script>
<div class="theme-toggle-container">
<Button bind:id={config.id} bind:type={config.type}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M7.5 2c-1.79 1.15-3 3.18-3 5.5s1.21 4.35 3.03 5.5C4.46 13 2 10.54 2 7.5A5.5 5.5 0 0 1 7.5 2m11.57 1.5l1.43 1.43L4.93 20.5L3.5 19.07L19.07 3.5m-6.18 2.43L11.41 5L9.97 6l.42-1.7L9 3.24l1.75-.12l.58-1.65L12 3.1l1.73.03l-1.35 1.13l.51 1.67m-3.3 3.61l-1.16-.73l-1.12.78l.34-1.32l-1.09-.83l1.36-.09l.45-1.29l.51 1.27l1.36.03l-1.05.87l.4 1.31M19 13.5a5.5 5.5 0 0 1-5.5 5.5c-1.22 0-2.35-.4-3.26-1.07l7.69-7.69c.67.91 1.07 2.04 1.07 3.26m-4.4 6.58l2.77-1.15l-.24 3.35l-2.53-2.2m4.33-2.7l1.15-2.77l2.2 2.54l-3.35.23m1.15-4.96l-1.14-2.78l3.34.24l-2.2 2.54M9.63 18.93l2.77 1.15l-2.53 2.19l-.24-3.34Z"/></svg>
<Button bind:id={config.id} bind:type={config.type} on:click={click}>
{@html svg}
</Button>
</div>

Expand Down
65 changes: 65 additions & 0 deletions src/lib/components/sitetools.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
.site-tools {
display: grid;
grid-template-rows: auto 1fr;
}

.site-tools-heading {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid;
text-align: center;
font-weight: 700;
}

.site-tools-body {
display: grid;
grid-auto-flow: row;
}

.site-tools-item {
display: grid;
grid-template-columns: 1fr 1fr;
}

.cell {
padding: 10px;
}

.left-cell {
border: 1px solid;
border-right: 0;
border-top: 0;
}

.right-cell {
border: 1px solid;
border-top: 0;
}

.site-tools-item-link {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 20px;
}

.site-tools-item-link-svg {
display: grid;
grid-template-rows: 1fr;
align-items: center;
justify-items: center;
}

.site-tools-item-link-svg svg {
height: 1em;
width: auto;
}

@media (max-width: 400px) {
.site-tools-item-link {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
align-items: center;
justify-items: center;
}
}

0 comments on commit 88e77c9

Please sign in to comment.