adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

moved home components

Browse Source
This commit is contained in:
Adam French
2026-02-09 14:41:28 +00:00
parent 5de67fdf58
commit 505509a4d2
11 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
nginx/vue/src/components/home/Collage.vue
View File

@@ -1,70 +0,0 @@
<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import { Transition } from "vue";
import Header from "@/components/text/Header.vue";
const images = [
{ url: "/img/memes/pidgeon.gif", comment: "鸟" },
//{ url: "/img/memes/no_slip.png" },
//{ url: "/img/memes/epic.jpeg" },
{ url: "/img/bedroom/img2.png", comment: "办公桌" },
{ url: "/img/bedroom/img1.png", comment: "床" },
];
const currentIndex = ref(0);
const currentComment = computed(() => images[currentIndex.value].comment);
const currentUrl = computed(() => images[currentIndex.value].url);
let nextId;
function nextImage() {
clearTimeout(nextId);
let newIndex;
do {
newIndex = Math.floor(Math.random() * images.length);
} while (newIndex === currentIndex.value);
currentIndex.value = newIndex;
nextId = setTimeout(nextImage, 10000);
}
onMounted(() => {
nextId = setTimeout(nextImage, 10000);
});
onUnmounted(() => {
clearTimeout(nextId);
});
</script>
<template>
<Transition name="fade" mode="out-in">
<div class="image-viewer" @click="nextImage" :key="currentIndex">
<Header v-if="currentComment">
{{ currentComment }}
</Header>
<img :src="currentUrl" alt="Image Viewer" />
</div>
</Transition>
</template>
<style scoped>
.image-viewer {
width: 100%;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>

18
nginx/vue/src/components/home/Consumption.vue
View File

@@ -1,18 +0,0 @@
<script setup>
import AutoScroll from "@/components/util/AutoScroll.vue";
import OptionalLinkTable from "@/components/util/OptionalLinkTable.vue";
import Header from "@/components/text/Header.vue";
import { useActivityStore } from "@/stores/activity";
const activityStore = useActivityStore();
</script>
<template>
<div class="flex flex-col items-center">
<Header>Consumption</Header>
<AutoScroll class="flex-1 w-full">
<OptionalLinkTable class="w-full" :data="activityStore.activity" />
</AutoScroll>
</div>
</template>

21
nginx/vue/src/components/home/Favorites.vue
View File

@@ -1,21 +0,0 @@
<script setup>
import Header from "@/components/text/Header.vue";
import OptionalLinkTable from "@/components/util/OptionalLinkTable.vue";
import AutoScroll from "@/components/util/AutoScroll.vue";
import { useFavoritesStore } from "@/stores/favorites";
const favoritesStore = useFavoritesStore();
</script>
<template>
<div class="flex flex-col items-center">
<Header>favs</Header>
<AutoScroll class="w-full flex-1">
<OptionalLinkTable
class="w-full"
:data="favoritesStore.favorites"
/>
</AutoScroll>
</div>
</template>

72
nginx/vue/src/components/home/Feed.vue
View File

@@ -1,72 +0,0 @@
<script setup>
import Button from "@/components/input/Button.vue";
import Markdown from "@/components/util/Markdown.vue";
import Header from "@/components/text/Header.vue";
import { ref, computed, onBeforeMount } from "vue";
import { useAuthStore } from "@/stores/auth";
import { usePostsStore } from "@/stores/posts";
const authStore = useAuthStore();
const postsStore = usePostsStore();
const idx = ref(0);
const leftCap = computed(() => idx.value === 0);
const rightCap = computed(() => idx.value === postsStore.postsCount - 1);
const post = computed(() => postsStore.posts[idx.value]);
const userOwnsPost = computed(
() => post.value.author.username == authStore.user.username,
);
function nextPost() {
if (idx.value < postsStore.postsCount - 1) {
idx.value++;
}
}
function prevPost() {
if (idx.value > 0) {
idx.value--;
}
}
function deletePost() {
postsStore.deletePost(post.value);
}
</script>
<template>
<div
class="flex flex-col p-1 overflow-scroll text-left items-start justify-start"
>
<Header>{{ post.title }}</Header>
<small
>Created at: {{ new Date(post.createdAt).toLocaleString() }}</small
>
<small>By: {{ post.author.username }}</small>
<Markdown class="flex-1 border-box text-wrap" :source="post.content" />
<div class="flex flex-row w-full">
<Button class="flex-1 border-box" v-if="!leftCap" @click="prevPost">
Prev
</Button>
<Button
class="flex-1 border-box"
v-if="!rightCap"
@click="nextPost"
>
Next
</Button>
</div>
<Button class="w-full" v-if="userOwnsPost" @click="deletePost"
>Delete</Button
>
</div>
</template>
<style scoped>
img {
width: 100%;
}
</style>

26
nginx/vue/src/components/home/Gym.vue
View File

@@ -1,26 +0,0 @@
<script setup>
import Header from "@/components/text/Header.vue";
import OptionalLinkTable from "@/components/util/OptionalLinkTable.vue";
const gym = [
{ name: "Row", type: "30 min" },
{ name: "Run", type: "5k" },
{ name: "Pushup & Squat", type: "50" },
];
</script>
<template>
<div class="flex flex-col place-content-between items-center">
<Header>Gym</Header>
<p>I'm not a gym geek</p>
<p>4/7 days I do:</p>
<div class="overflow-scroll w-full border-box">
<OptionalLinkTable class="w-full" :data="gym" />
</div>
</div>
</template>
<style scoped>
img {
width: 100%;
}
</style>

37
nginx/vue/src/components/home/Intro.vue
View File

@@ -1,37 +0,0 @@
<script setup>
import Header from "@/components/text/Header.vue";
import Paragraph from "@/components/text/Paragraph.vue";
</script>
<template>
<div
class="flex-1 border-box flex flex-col p-1 text-left items-start justify-start"
>
<Header>Intro</Header>
<Paragraph>
Hi, I'm Adam, thank you for visiting my website. I'm currently a 20
something graduate looking for work. I like to game, listen to lots
of music and occasionally watch anime.
</Paragraph>
<Header>Getting around</Header>
<Paragraph>
Pages available can be traversed through links below. I am hoping to
add some shrines, code-walkthoughs, live chat and page transitions
at a later date.
</Paragraph>
<Header>Contact</Header>
<Paragraph>
Please email me <a href="mailto:adam.a.french@outlook.com">here</a>,
or contact me though any of the social medias linked.
</Paragraph>
<Header>A Quote</Header>
<!-- <p>
What makes me a good demoman? If I were a bad demoman, I wouldn't be
sittin' here discussin' it with you, now would I?!
</p> -->
<Paragraph>
One crossed wire, one wayward pinch of potassium chlorate, one
errant twitch, and KA-BLOOIE!
</Paragraph>
</div>
</template>

30
nginx/vue/src/components/home/Links.vue
View File

@@ -1,30 +0,0 @@
<script setup>
import RouterTable from "@/components/util/RouterTable.vue";
import LinkTable from "@/components/util/LinkTable.vue";
import Markdown from "@/components/util/Markdown.vue";
const site_links = [
{ name: "CV", link: "/cv" },
{ name: "Bookmarks", link: "/bookmarks" },
{ name: "Notes", link: "/notes/Index.md" },
{ name: "Admin", link: "/admin" },
{ name: "Shrines", link: "/shrines" },
];
const social_links = [
{ name: "Steam", link: "https://steamcommunity.com/id/SteveThePug" },
{ name: "Github", link: "https://github.com/SteveThePug" },
{ name: "Spotify", link: "https://open.spotify.com/user/stevethepug" },
];
</script>
<template>
<div class="flex flex-col justify-between">
<div class="flex flex-col gap-1">
<RouterTable :linkArr="site_links" />
</div>
<div class="flex flex-col gap-1">
<LinkTable :linkArr="social_links" />
</div>
</div>
</template>

71
nginx/vue/src/components/home/Listening.vue
View File

@@ -1,71 +0,0 @@
<script setup>
import Header from "@/components/text/Header.vue";
import { ref, computed, onMounted, onUnmounted } from "vue";
import { useSongsStore } from "@/stores/songs";
const songsStore = useSongsStore();
const idx = ref(0);
const song = computed(() => songsStore.songs[idx.value]);
let nextId = null;
let refreshId = null;
function nextSong() {
clearTimeout(nextId);
nextId = setTimeout(nextSong, 5000);
idx.value = (idx.value + 1) % songsStore.songsCount;
}
onMounted(() => {
songsStore.fetchSongs();
nextId = setTimeout(nextSong, 5000);
refreshId = setInterval(songsStore.fetchSongs, 120000);
});
onUnmounted(() => {
clearTimeout(nextId);
clearInterval(refreshId);
});
</script>
<template>
<Transition name="fade" mode="out-in">
<div
@click="nextSong"
:key="song.track.id"
class="flex flex-col items-center"
>
<Header>Listening To</Header>
<img :src="song.track.album.images[0].url" />
<p class="text-center">
<strong>Song:</strong> {{ song.track.name }}
</p>
<p class="text-center">
<strong>Artist:</strong> {{ song.track.artists[0].name }}
</p>
</div>
</Transition>
</template>
<style scoped>
img {
width: 70%;
}
p {
width: 100%;
margin: 0 auto;
}
.fade-enter-active {
transition: opacity 0.5s ease;
}
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from {
opacity: 0;
}
.fade-leave-to {
opacity: 0;
}
</style>

48
nginx/vue/src/components/home/Stamps.vue
View File

@@ -1,48 +0,0 @@
<script setup>
import { ref } from "vue";
import Touchscreen from "@/components/util/Touchscreen.vue";
import { shuffleArray } from "@/js/utils.js";
let srcs = [
"/img/stamps/portal.gif",
"/img/stamps/miku.gif",
"/img/stamps/utau.gif",
"/img/stamps/teto.webp",
"/img/stamps/3ds.jpg",
"/img/stamps/fry.png",
"/img/stamps/ai.png",
"/img/stamps/rei.png",
"/img/stamps/tetris.gif",
"/img/stamps/tf2.gif",
"/img/stamps/demo.gif",
];
shuffleArray(srcs);
</script>
<template>
<Touchscreen>
<div class="flex flex-wrap tst">
<a href="https://www.adam-french.co.uk">
<img src="https://www.adam-french.co.uk/img/stamps/mine.gif" />
</a>
<a href="https://jacobbarron.xyz">
<img
src="https://jacobbarron.xyz/Banneh.gif"
alt="jacobbarron.xyz"
/>
</a>
<img v-for="src in srcs" :src="src" />
</div>
</Touchscreen>
</template>
<style scoped>
img {
width: 89px;
height: 59px;
}
.tst {
width: calc(89px * 4);
}
</style>