Merge pull request 'staging' (#7) from staging into main
continuous-integration/drone/push Build is passing Details

Reviewed-on: #7
This commit is contained in:
Quenten 2022-07-13 13:34:07 +00:00
commit 75f3777b46
8 changed files with 170 additions and 9 deletions

View File

@ -0,0 +1,77 @@
<script>
import Galaxy from './galaxy.svelte';
</script>
<h1
class="font-roboto_slab text-center text-2xl lg:text-6xl xl:text-7xl w-auto md:w-max mt-10 lg:mt-32 mx-auto font-bold h1-shadow"
>
Galaxies
</h1>
<p class="mt-4">
Hi again, thanks for visiting another one of my pages! This one has all sorts of links to other
people their websites. Some of these people are my friends, other websites I have no idea who
maintains them. In both cases, I think they are worth sharing, so here we are!
</p>
<h2 class="font-semibold mt-5">My friends</h2>
<Galaxy link="https://forestofunix.xyz">
<span slot="title">Forest of Unix</span>
<span slot="text"
>A website made by Sebastiaan. A massive Linux fanboy, runs Gentoo on his ThinkPad. Absolutely
based. His website is written in Lisp, that's why it's often offline. That was the inspiration
for the online/offline status text.</span
>
</Galaxy>
<Galaxy link="https://nymphali.neocities.org/">
<span slot="title">Nymphali</span>
<span slot="text">
The website made by ■■■■■■, whoops Nymphali. They have an awesome minimalist website that's just
lovely.
</span>
</Galaxy>
<Galaxy link="https://kristypixel.neocities.org/">
<span slot="title">Kristypixel</span>
<span slot="text">
Website made by Kristy. Very cute website, I love it! Keep up the awesome work!
</span>
</Galaxy>
<Galaxy link="https://leftonred.neocities.org/">
<span slot="title">Left on Red</span>
<span slot="text">
Kyu made this website, he's a friend of mine as well! Still very new, but their dark mode design
is very cool!
</span>
</Galaxy>
<h2 class="font-semibold mt-5">Other cool websites</h2>
<p>
These websites are not necessarily made by people I know. They are just random websites I have
found on the internet or websites from organisations I support.
</p>
<Galaxy link="https://evillious.ylimegirl.com/">
<span slot="title">Evillious Chronicles fan guide</span>
<span slot="text">
A VERY cool website made by Ylimegirl! They wrote a whole website dedicated to Evillious
Chronicles, which is a super good Japanese light novel and vocaloid series!! Definitely look it
up!
</span>
</Galaxy>
<Galaxy link="https://www.gnu.org/">
<span slot="title">The GNU Project</span>
<span slot="text">
The official website of the GNU project. They advocate for free/libre software. This is not to
be confused with 'open source' software. I highly recommend you read about them and their
efforts.
</span>
</Galaxy>
<style>
.h1-shadow {
text-shadow: 2px 2px gray;
transition: text-shadow 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.h1-shadow:hover {
text-shadow: 5px 5px gray;
transition: text-shadow 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
}
</style>

View File

@ -0,0 +1,46 @@
<script lang="ts">
import { ApiURL } from '../misc/guestbook.svelte';
export let link = '';
async function isOnline(link: string) {
const res = await fetch(ApiURL + '/checkonline', {
method: 'POST',
body: JSON.stringify({
url: link
})
})
.then((res) => res.json())
.then((data) => {
return data;
});
if (res.status) {
return true;
}
return false;
}
</script>
<div class="rounded bg-red-100 dark:bg-slate-800 dark:ring-2 dark:ring-slate-400 mt-2 break-words">
<div class="rounded-t bg-slate-400 flex dark:bg-slate-700 min-h-fit px-3 py-1">
<div class="grow">
<a href={link} class="underline underline-offset-1 hover:underline-offset-4"><slot name="title" /></a>
</div>
<div class="w-fit">
{#await isOnline(link)}
<span class="text-yellow-300">Waiting</span>
{:then status}
{#if status}
<span class="text-green-400">Online</span>
{:else}
<span class="text-red-500">Offline</span>
{/if}
{:catch error}
<span class="text-red-500">Error</span>
{/await}
</div>
</div>
<div class="px-3 py-2">
<p class=""><slot name="text" /></p>
</div>
</div>

View File

@ -8,6 +8,7 @@
time: string;
uuid: string;
};
export const ApiURL = mode == 'production' ? 'https://api.quenten.nl/api' : 'https://api.quenten.nl/api/testing';
</script>
<script lang="ts">
@ -19,7 +20,6 @@
//const ApiURL = dev ? 'https://api.quenten.nl/api/testing' : 'https://api.quenten.nl/api';
//const ApiURL = import.meta.env.APIURL;
const ApiURL = mode == 'production' ? 'https://api.quenten.nl/api' : 'https://api.quenten.nl/api/testing';
let showError = false;
let errorTitle = 'Error';
let errorMessage = 'Error message';

View File

@ -1,6 +1,13 @@
<script lang="ts">
import type { Comment } from '../guestbook.svelte';
export let comment: Comment;
function toLink(s: string) {
if (s.startsWith("http")) {
return s;
}
return "https://" + s;
}
</script>
<div class="rounded bg-red-100 dark:bg-slate-800 dark:ring-2 dark:ring-slate-400 mt-2 break-words">
@ -15,7 +22,7 @@
{/if}
</p>
{#if comment.website != null}
<p class="text-xs col-span-2">Site: {comment.website}</p>
<p class="text-xs col-span-2">Site: <a href="{toLink(comment.website)}">{comment.website}</a></p>
{/if}
</div>
<div class="px-3 py-2">

View File

@ -20,10 +20,11 @@
<p class="text-xs">Surviving the rewriting</p>
</div>
</div>
<div class="hidden md:col-start-5 col-start-1 col-end-7 sm:grid grid-cols-6">
<nav class="h-full flex items-end md:col-start-4 md:col-span-2 col-span-7 gap-2 text-md">
<div class="hidden md:col-start-5 col-start-1 col-end-7 sm:block ">
<nav class="h-full flex items-end w-fit gap-2 md:mx-auto text-md">
<Button link="/" text="Home" />
<Button link="/about" text="About" />
<Button link="/galaxies" text="Galaxies" />
</nav>
</div>
<!-->

View File

@ -20,5 +20,6 @@
>
<Button link="/" text="Home" />
<Button link="/about" text="About" />
<Button link="/galaxies" text="Galaxies" />
</div>
{/if}

View File

@ -28,10 +28,9 @@
// Footer stuff
/**
* @type {number}
*/
* @type {number}
*/
let footerHeight;
</script>
<div class="-z-20 absolute">
@ -53,9 +52,15 @@
</div>
<!-- Footer -->
<!-- To make this stick to the bottom, actually make it absolute, instead of fixed -->
<div bind:clientHeight={footerHeight} class="bg-slate-100 dark:bg-purple-900 dark:text-pink-50 w-full h-min md:h-10 lg:pl-20 fixed bottom-0">
<div
bind:clientHeight={footerHeight}
class="bg-slate-100 dark:bg-purple-900 dark:text-pink-50 w-full h-min md:h-10 lg:pl-20 fixed bottom-0"
>
<div class="h-full">
<button on:click={onMusicToggle} class="bg-white dark:bg-[#B68BD6] dark:text-[#040033] border-black border rounded h-min w-20 mt-1">
<button
on:click={onMusicToggle}
class="bg-white dark:bg-[#B68BD6] dark:text-[#040033] border-black border rounded h-min w-20 mt-1"
>
{#if musicPaused}
<span class="font-mono"></span>
Play

View File

@ -0,0 +1,24 @@
<script>
import Content from '../components/galaxies/content.svelte';
import Maincontent from '../components/misc/maincontent.svelte';
</script>
<svelte:head>
<title>Galaxies</title>
</svelte:head>
<Maincontent>
<div
class="hidden col-start-1 col-span-1 rounded-xl ml-2 mt-10 lg:flex flex-col justify-start gap-2 p-2"
>
<!-- <Sidebar /> -->
</div>
<div class="px-5 md:px-0 md:pl-5 lg:pl-0 col-span-7 md:col-span-6 lg:col-span-5">
<Content />
</div>
<div class="hidden md:block col-start-7 mt-10 mr-2">
<!-- <Rightbar /> -->
</div>
</Maincontent>