add a webring component to the site

this is for the solarpunk.moe webring.
This commit is contained in:
Fries 2023-07-05 02:11:14 -07:00
parent 8cde083875
commit cfa234d723
11 changed files with 1157 additions and 620 deletions

View file

@ -1,4 +1,8 @@
import { defineConfig } from 'astro/config';
import svelte from "@astrojs/svelte";
// https://astro.build/config
export default defineConfig({});
export default defineConfig({
integrations: [svelte()]
});

View file

@ -10,7 +10,9 @@
"astro": "astro"
},
"dependencies": {
"@astrojs/svelte": "^3.1.0",
"@fontsource/atkinson-hyperlegible": "^4.5.11",
"astro": "^2.1.0"
"astro": "^2.7.3",
"svelte": "^4.0.0"
}
}

File diff suppressed because it is too large Load diff

View file

@ -1,3 +1,7 @@
---
import Webring from "./Webring.svelte";
---
<footer aria-label="my websites footer">
<a href="https://git.solarpunk.moe/fries/fries-website">Source Code</a>
</footer>

View file

@ -9,7 +9,6 @@
#nav-container {
display: flex;
flex-direction: row;
font-size: 20px;
justify-content: center;
flex-wrap: wrap;
gap: 20px;

View file

@ -0,0 +1,33 @@
<section class="webring-box" aria-label="the solarpunk.moe webring">
<a id="previous" href={`${api_url}/previous?source_url=${site_url}`}>
<p class="no-margin"></p>
<p class="no-margin" id="previous-text">Previous</p>
</a>
<h2 class="no-margin">solarpunk.moe</h2>
<h2 class="no-margin">webring</h2>
<a id="next" href={`${api_url}/next?source_url=${site_url}`}>
<p class="no-margin" id="next-text">Next</p>
<p class="no-margin"></p>
</a>
</section>
<style>
.webring-box {
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
word-break: break-all;
}
.no-margin {
margin: 0px;
}
</style>
<script lang="ts">
import {main} from '../scripts/Webring';
let api_url = import.meta.env.PUBLIC_API_URL;
let site_url = import.meta.env.PUBLIC_SITE_URL;
main();
</script>

View file

@ -8,6 +8,7 @@ import '@fontsource/atkinson-hyperlegible';
import Footer from "../components/Footer.astro";
import Navigation from "../components/Navigation.astro";
import "../styles/global.css";
import Webring from '../components/Webring.svelte';
---
<!DOCTYPE html>
@ -23,6 +24,8 @@ import "../styles/global.css";
<hr>
<slot />
<hr>
<Webring client:load />
<hr>
<Footer />
</body>
</html>

View file

@ -3,6 +3,7 @@ import Layout from "../layouts/Layout.astro";
import Header from "../components/Header.astro";
import Introduction from "../components/Introduction.astro";
import Links from "../components/Links.astro";
import Webring from "../components/Webring.svelte";
---
<Layout title="fries gay place">

19
src/scripts/Webring.ts Normal file
View file

@ -0,0 +1,19 @@
type Names = {
previous_site_name: string
next_site_name: string
};
export async function main() {
if (import.meta.env.SSR) return;
let api_url = import.meta.env.PUBLIC_API_URL;
let site_url = import.meta.env.PUBLIC_SITE_URL;
let previous_text = document.getElementById("previous-text") as HTMLParagraphElement;
let next_text = document.getElementById("next-text") as HTMLParagraphElement;
const request = await fetch(`${api_url}/name?source_url=${site_url}`);
const names: Names = await request.json();
previous_text.textContent = names.previous_site_name;
next_text.textContent = names.next_site_name;
}

5
svelte.config.js Normal file
View file

@ -0,0 +1,5 @@
import { vitePreprocess } from '@astrojs/svelte';
export default {
preprocess: vitePreprocess(),
};

View file

@ -1,3 +1,6 @@
{
"extends": "astro/tsconfigs/strict"
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable"]
}
}