moved home components
This commit is contained in:
70
nginx/vue/src/views/home/Collage.vue
Normal file
70
nginx/vue/src/views/home/Collage.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<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/views/home/Consumption.vue
Normal file
18
nginx/vue/src/views/home/Consumption.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<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/views/home/Favorites.vue
Normal file
21
nginx/vue/src/views/home/Favorites.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<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/views/home/Feed.vue
Normal file
72
nginx/vue/src/views/home/Feed.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<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/views/home/Gym.vue
Normal file
26
nginx/vue/src/views/home/Gym.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<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>
|
||||
127
nginx/vue/src/views/home/Home.vue
Normal file
127
nginx/vue/src/views/home/Home.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<script setup>
|
||||
import Timer from "@/components/util/Timer.vue";
|
||||
import Time from "@/components/util/Time.vue";
|
||||
import Chat from "@/components/util/Chat.vue";
|
||||
import MusicPlayer from "@/components/util/MusicPlayer.vue";
|
||||
|
||||
import Intro from "./Intro.vue";
|
||||
import Stamps from "./Stamps.vue";
|
||||
import Listening from "./Listening.vue";
|
||||
import Links from "./Links.vue";
|
||||
import Feed from "./Feed.vue";
|
||||
import Collage from "./Collage.vue";
|
||||
import Favorites from "./Favorites.vue";
|
||||
import Gym from "./Gym.vue";
|
||||
import Consumption from "./Consumption.vue";
|
||||
|
||||
import UtenaFrame from "@/components/borders/UtenaFrame.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="halftone justify-center flex flex-row w-full h-full">
|
||||
<div class="h-fit flex flex-row m-32">
|
||||
<div class="a4page-portrait homeGrid relative bdr-1">
|
||||
<Intro class="intro" />
|
||||
<Listening class="listening" />
|
||||
<Stamps class="stamps" />
|
||||
<Feed class="feed" />
|
||||
<Links class="links" />
|
||||
<Collage class="collage" />
|
||||
<Consumption class="consumption" />
|
||||
<Favorites class="favorites" />
|
||||
<Gym class="gym" />
|
||||
</div>
|
||||
<div
|
||||
class="sidebar border-primary place-content-between flex-1 flex flex-col m-10 w-60"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<Time />
|
||||
<Timer />
|
||||
<!-- <Chat class="bdr-2 bg-bg_primary" /> -->
|
||||
<!-- <MusicPlayer /> -->
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="/img/memes/fire-woman.gif"
|
||||
class="border-tertiary border"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.homeGrid > * {
|
||||
border: 2px solid var(--quaternary);
|
||||
border-color: var(--quaternary);
|
||||
background-color: var(--bg_primary);
|
||||
}
|
||||
|
||||
.homeGrid {
|
||||
display: grid;
|
||||
grid-gap: 5px;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
grid-template-rows: repeat(10, 1fr);
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
.homeGrid {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.tr,
|
||||
.br,
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.intro {
|
||||
grid-column: 1 / span 6;
|
||||
grid-row: 1 / span 4;
|
||||
}
|
||||
|
||||
.listening {
|
||||
grid-column: 7 / span 4;
|
||||
grid-row: 1 / span 3;
|
||||
}
|
||||
|
||||
.stamps {
|
||||
grid-column: 7 / span 4;
|
||||
grid-row: 4 / span 1;
|
||||
}
|
||||
|
||||
.feed {
|
||||
grid-column: 1 / span 3;
|
||||
grid-row: 5 / span 4;
|
||||
}
|
||||
|
||||
.links {
|
||||
grid-column: 4 / span 2;
|
||||
grid-row: 5 / span 4;
|
||||
}
|
||||
|
||||
.collage {
|
||||
grid-column: 6 / span 5;
|
||||
grid-row: 5 / span 4;
|
||||
}
|
||||
|
||||
.consumption {
|
||||
grid-column: span 4;
|
||||
grid-row: span 2;
|
||||
}
|
||||
.gym {
|
||||
grid-column: span 3;
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.favorites {
|
||||
grid-column: span 3;
|
||||
grid-row: span 2;
|
||||
}
|
||||
</style>
|
||||
37
nginx/vue/src/views/home/Intro.vue
Normal file
37
nginx/vue/src/views/home/Intro.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<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/views/home/Links.vue
Normal file
30
nginx/vue/src/views/home/Links.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<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/views/home/Listening.vue
Normal file
71
nginx/vue/src/views/home/Listening.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<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/views/home/Stamps.vue
Normal file
48
nginx/vue/src/views/home/Stamps.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user