silentsilas/playground
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

buncha of styling changes/fixes, add more projects and refine the mobile experience, add opengraph metadata, add footer that links to source code

Browse Source
This commit is contained in:
Silas
2024-06-04 22:49:05 -04:00
parent 1e5eba3d46
commit 7c9b327a36
29 changed files with 670 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/routes/(app)/+layout.svelte
View File

@@ -2,6 +2,7 @@
import '../../app.css';
import SearchResults from '$lib/components/SearchResults.svelte';
import NavBar from '$lib/components/NavBar.svelte';
import Footer from '$lib/components/Footer.svelte';
</script>
<NavBar>
@@ -9,4 +10,8 @@
<slot />
<SearchResults />
</div>
<slot name="footer">
<Footer />
</slot>
</NavBar>

31
src/routes/(app)/+page.svelte
View File

@@ -73,12 +73,12 @@
<div class="justify-center items-center text-center m-10">
{#if visible && currentGreeting}
<div transition:fade={{ duration: 1200 }}>
<span class="font-bold">{currentGreeting.greeting}</span>
<span class="font-bold text-primary">{currentGreeting.greeting}</span>
{#if currentGreeting.romanisation}
<span class="text-gray-500">( {currentGreeting.romanisation} )</span>
{/if}
</div>
<p class="mt-2 text-gray-700" transition:fade={{ delay: 400, duration: 400 }}>
<p class="mt-2 text-gray-300" transition:fade={{ delay: 400, duration: 400 }}>
That's {currentGreeting.language} for hello!
</p>
{/if}
@@ -87,27 +87,28 @@
<p>
The name's Silas. I write code for a living, and sometimes for fun. I use <a
href="https://elixir-lang.org/"
target="_blank">Elixir</a
target="_blank"
class="link-primary">Elixir</a
>
at my day job, and recently have been messing around with
<a href="https://elixir-lang.org/" target="_blank">Rust</a>,
<a href="https://kit.svelte.dev/" target="_blank">Svelte</a>, and
<a href="https://threejs.org/" target="_blank">three.js</a>
<a href="https://elixir-lang.org/" target="_blank" class="link-primary">Rust</a>,
<a href="https://kit.svelte.dev/" target="_blank" class="link-primary">Svelte</a>, and
<a href="https://threejs.org/" target="_blank" class="link-primary">three.js</a>
</p>
<p>
Here you can browse my shower <a href="/thoughts" class="link">thoughts</a> and bad
<a href="/poetry" class="link">poetry</a>. Opinions are personally mine and not endorsed by
my employer.
Here you can browse my shower <a href="/thoughts" class="link-primary">thoughts</a> and bad
<a href="/poetry" class="link-primary">poetry</a>. Opinions are personally mine and not
endorsed by my employer.
</p>
<p>
I tend to start a lot of <a href="/projects" class="link">projects</a>, but I'm trying to
finish more. I also like to toy with weird web technologies and will host the
<a href="/experiments" class="link">experiments</a> here.
I tend to start a lot of <a href="/projects" class="link-primary">projects</a>, but I'm
trying to finish more. I also like to toy with weird web technologies and will host the
<a href="/experiments" class="link-primary">experiments</a> here.
</p>
<p>
I self-host a lot of <a href="/services" class="link">services</a> I find useful. None of them
run any analytics or log your activity, but the software/servers may be outdated, so use at your
own risk.
I self-host a lot of <a href="/services" class="link-primary">services</a> I find useful. None
of them run any analytics or log your activity, but the software/servers may be outdated, so
use at your own risk.
</p>
<p>Shalom.</p>
</div>

4
src/routes/(app)/poetry/+page.svelte
View File

@@ -58,7 +58,7 @@
{#each posts as post}
<li class="py-4">
<h3 class="pb-1">
<a class="link" href={post.path}>
<a class="link-primary" href={post.path}>
{post.meta.title}
</a>
</h3>
@@ -74,7 +74,7 @@
on:click={() => navigate(currentPage - 1)}
disabled={currentPage === 1}>Prev</button
>
<button class="join-item btn btn-outline">{currentPage} of {totalPages}</button>
<div class="join-item content-center px-10">{currentPage} of {totalPages}</div>
<button
class="join-item btn btn-primary btn-outline"
on:click={() => navigate(currentPage + 1)}

2
src/routes/(app)/poetry/[slug]/+page.svelte
View File

@@ -21,6 +21,6 @@
<div class="container mx-auto flex flex-col items-center prose px-4">
<h1 class="py-6 mb-0">{title}</h1>
<Content />
<a href="/poetry" class="link py-10">Back to Poetry</a>
<a href="/poetry" class="link-primary py-10">Back to Poetry</a>
</div>
{/if}

4
src/routes/(app)/services/+page.svelte
View File

@@ -19,7 +19,7 @@
title: 'PrivateBin',
url: 'https://bin.silentsilas.com',
description:
"A pastebin service, useful for sending quick text snippets or sharing sensitive data with Burn After Reading. It doesn't require an account, but I do log the IP addresses of visitors for security purposes. None of the data entered is stored on the server thanks to E2E encryption."
"A pastebin service, useful for sending quick text snippets or sharing sensitive data with Burn After Reading. It doesn't require an account, but I do log the IP addresses of visitors for security purposes. None of the data entered is stored on the server itself; it is E2E-encrypted and contained in URLs it generates."
},
{
title: 'FreshRSS',
@@ -43,7 +43,7 @@
title: 'Jellyfin',
url: 'https://jellyfin.silentsilas.com',
description:
'A self-hosted media server that I use to stream movies, shows, and music to my devices. It may or may not be available, as its dependent on the availability of my home PC.'
"A self-hosted media server that I use to stream movies, shows, and music to my devices. It may or may not be available, as it's dependent on the availability of my home PC or may temporarily be accessible on my home network."
}
];
</script>

4
src/routes/(app)/thoughts/+page.svelte
View File

@@ -58,7 +58,7 @@
{#each posts as post}
<li class="py-4">
<h3 class="pb-1">
<a class="link" href={post.path}>
<a class="link-primary" href={post.path}>
{post.meta.title}
</a>
</h3>
@@ -74,7 +74,7 @@
on:click={() => navigate(currentPage - 1)}
disabled={currentPage === 1}>Prev</button
>
<button class="join-item btn btn-outline">{currentPage} of {totalPages}</button>
<div class="join-item content-center px-10">{currentPage} of {totalPages}</div>
<button
class="join-item btn btn-primary btn-outline"
on:click={() => navigate(currentPage + 1)}

2
src/routes/(app)/thoughts/[slug]/+page.svelte
View File

@@ -21,6 +21,6 @@
<div class="container mx-auto flex flex-col items-center prose px-4">
<h1 class="pt-10">{title}</h1>
<Content />
<a href="/thoughts" class="link py-10">Back to Thoughts</a>
<a href="/thoughts" class="link-primary py-10">Back to Thoughts</a>
</div>
{/if}

2
src/routes/projects/+layout.svelte
View File

@@ -1,4 +1,5 @@
<script lang="ts">
import Footer from '$lib/components/Footer.svelte';
import NavBar from '$lib/components/NavBar.svelte';
import SearchResults from '$lib/components/SearchResults.svelte';
</script>
@@ -7,3 +8,4 @@
<slot />
<SearchResults />
</NavBar>
<Footer />

105
src/routes/projects/+page.svelte
View File

@@ -6,8 +6,11 @@
import type { SearchResult } from '$lib/utils/search';
import { searchResults } from '$lib/store';
import Overlay from '$lib/components/scenes/app/Overlay.svelte';
let results: SearchResult[] = [];
let open = false;
let selected = -1;
searchResults.subscribe((value: SearchResult[]) => {
results = value ? value : [];
@@ -16,31 +19,121 @@
type Project = {
title: string;
path: string;
source: string;
position: [number, number, number];
description: string;
};
const projects: Project[] = [
{
title: 'Visions',
path: 'https://visions.silentsilas.com',
position: [0, -4, 0]
source: 'https://github.com/silentsilas/visions',
position: [0, -4, 0],
description:
'An experiment with vector math for a rudimentary simulation of gravity. You can change the strength of the gravity in the Controls menu.'
},
{
title: 'Animation Editor',
path: '/editor',
position: [0, 4, 0]
source:
'https://git.silentsilas.com/silentsilas/playground/src/branch/main/src/routes/editor',
position: [4, 0, -4],
description:
'A 3D animation editor via Theatre.js. This is used internally by me for other ThreeJS projects.'
},
{
title: 'Headbang',
path: 'https://smash.silentsilas.com',
source: '#',
position: [-4, 0, 4],
description:
"Bash in the heads of my ol' coworkers to the sounds of Rezz. I don't own the copyright to the music. And I also lost the source code. Epilepsy warning."
},
{
title: 'Intended Link',
path: 'https://intended.link',
source: 'https://git.silentsilas.com/silentsilas/Entendu',
position: [-4, 4, -4],
description:
'Similar to Sure Dog, this is a service to securely share information to others without needing an account. Instead, you say which social media account can access the link, and only that account will be able to view what the link contains using the magic of OAuth.'
},
{
title: 'Who Am I?',
path: 'https://viz.silentsilas.com/',
source: 'https://git.silentsilas.com/silentsilas/audio-visualizer',
position: [4, 4, 4],
description:
'An audiovisual exhibit of a poem by the same name. I recorded myself reciting the poem, and parsed a subtitle track to sync it with the audio.'
},
{
title: 'Sure Dog',
path: 'https://sure.dog/',
source: 'https://git.silentsilas.com/silentsilas/sure',
position: [0, 8, 0],
description:
'Similar to Intended Link, this is a service to securely share information to others without needing an account. Instead, you send a link to whom you wish to request information from, and they can send back a link with the information you requested that only your device can view thanks to the magic of Public Key Cryptography.'
}
];
const handleMenuClick = (index: number) => {
open = true;
selected = index;
};
const isExternal = (url: string) => {
return url.startsWith('http');
};
</script>
{#if results.length <= 0}
<CanvasContainer>
<App>
{#each projects as project, i}
<MenuItem position={project.position} htmlContent={project.title} href={project.path} />
<MenuItem
clickHandler={() => handleMenuClick(i)}
position={project.position}
active={i === selected}>{project.title}</MenuItem
>
{/each}
</App>
</CanvasContainer>
{#if open}
<Overlay>
<button
type="button"
class="close-button p-4 m-4 btn btn-outline"
on:click={() => {
open = false;
selected = -1;
}}>X</button
>
<div class="p-6">
<h2 class="mt-0">{projects[selected].title}</h2>
<p>{projects[selected].description}</p>
<div class="flex justify-evenly">
{#if projects[selected].source === '#'}
<button class="btn btn-primary sm:btn-sm md:btn-wide" disabled
>Source Code Unavailable</button
>
{:else}
<a
href={projects[selected].source}
target={isExternal(projects[selected].source) ? '_blank' : ''}
>
<button class="btn btn-primary sm:btn-sm md:btn-wide">Source Code</button>
</a>
{/if}
<a
href={projects[selected].path}
target={isExternal(projects[selected].path) ? '_blank' : ''}
>
<button class="btn btn-primary sm:btn-sm md:btn-wide">Visit</button></a
>
</div>
</div>
</Overlay>
{/if}
{/if}
<style>
@@ -57,4 +150,10 @@
justify-content: center;
align-items: center;
}
.close-button {
position: absolute;
top: 0;
right: 0;
}
</style>