Initial Commit
This commit is contained in:
@@ -0,0 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import type { Post } from '@/types/dredge.types';
|
||||
import PostCard from './PostCard.vue';
|
||||
|
||||
const posts = ref<Post[]>([]);
|
||||
const loading = ref(true);
|
||||
const error = ref<string | null>(null);
|
||||
|
||||
async function fetchPosts() {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/posts');
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to load posts');
|
||||
}
|
||||
|
||||
posts.value = await response.json();
|
||||
} catch (e) {
|
||||
error.value = 'Could not load your feed. Please try again.';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onLike(id: string) {
|
||||
console.log('like', id);
|
||||
}
|
||||
|
||||
onMounted(fetchPosts);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="feed" >
|
||||
<p v-if="loading">Loading your feed…</p>
|
||||
<p v-else-if="error" role="alert">{{ error }}</p>
|
||||
<p v-else-if="posts.length === 0">No posts to show yet.</p>
|
||||
|
||||
<PostCard
|
||||
v-for="post in posts"
|
||||
v-else
|
||||
:key="post.id"
|
||||
:post="post"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.feed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.75rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,353 @@
|
||||
<script setup lang="ts">
|
||||
import Avatar from '@/components/dredge/Avatar.vue';
|
||||
import type { Post } from '@/types/dredge.types';
|
||||
import { usePauseOffscreen } from '@/composables/usePauseOffScreen';
|
||||
import { ComponentPublicInstance, ref } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
post: Post;
|
||||
}>();
|
||||
|
||||
const displayCaption =
|
||||
props.post.caption ?? props.post.accessibility_caption ?? '';
|
||||
|
||||
const imageAlt =
|
||||
props.post.accessibility_caption ??
|
||||
(props.post.caption
|
||||
? `Post by ${props.post.username}: ${props.post.caption}`
|
||||
: `Photo posted by ${props.post.username}`);
|
||||
|
||||
const carouselSlides =
|
||||
props.post.is_carousel && props.post.carousel_images
|
||||
? props.post.carousel_images.map((item, i) => ({
|
||||
...item,
|
||||
alt:
|
||||
item.accessibility_caption ??
|
||||
`Slide ${i + 1} of ${props.post.carousel_images!.length} from ${props.post.username}`,
|
||||
}))
|
||||
: [];
|
||||
|
||||
const videoRefs = ref<HTMLVideoElement[]>([]);
|
||||
function registerVideo(el: Element | ComponentPublicInstance | null) {
|
||||
if (el instanceof HTMLVideoElement) {
|
||||
videoRefs.value.push(el);
|
||||
}
|
||||
}
|
||||
usePauseOffscreen(videoRefs);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article class="card">
|
||||
<header class="card__head">
|
||||
<Avatar
|
||||
size="md"
|
||||
:src="post.profile_pic_url"
|
||||
:alt="`${post.username}'s profile picture`"
|
||||
/>
|
||||
<div class="card__who">
|
||||
<span class="card__handle">{{ post.username }}</span>
|
||||
<span v-if="post.taken_at" class="card__depth">{{
|
||||
post.taken_at_date
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<a
|
||||
v-if="post.permalink"
|
||||
:href="post.permalink"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="icon-btn icon-btn--ghost"
|
||||
aria-label="Open on Instagram"
|
||||
>
|
||||
<v-icon icon="mdi-open-in-new" size="18" />
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<div class="card__specimen">
|
||||
<!-- Carousel: multiple images/videos -->
|
||||
<v-carousel
|
||||
v-if="post.is_carousel && carouselSlides.length"
|
||||
height="500"
|
||||
hide-delimiter-background
|
||||
:show-arrows="carouselSlides.length > 1"
|
||||
:cycle="false"
|
||||
:continuous="false"
|
||||
color="#fff"
|
||||
:style="{ '--slide-count': carouselSlides.length }"
|
||||
>
|
||||
<v-carousel-item v-for="(slide, i) in carouselSlides" :key="i">
|
||||
<video
|
||||
v-if="slide.video_url"
|
||||
:src="slide.video_url"
|
||||
:aria-label="slide.alt"
|
||||
:ref="registerVideo"
|
||||
controls
|
||||
preload="metadata"
|
||||
playsinline
|
||||
class="card__video"
|
||||
>
|
||||
Your browser doesn't support video playback.
|
||||
</video>
|
||||
<v-img
|
||||
v-else-if="slide.url"
|
||||
:src="slide.url"
|
||||
:alt="slide.alt"
|
||||
contain
|
||||
height="100%"
|
||||
width="100%"
|
||||
>
|
||||
<template #placeholder>
|
||||
<div class="card__scan" />
|
||||
</template>
|
||||
<template #error>
|
||||
<div class="card__img-fallback">
|
||||
<v-icon
|
||||
icon="mdi-image-broken-variant"
|
||||
size="32"
|
||||
/>
|
||||
<span>Image unavailable</span>
|
||||
</div>
|
||||
</template>
|
||||
</v-img>
|
||||
<div v-else class="card__scan" />
|
||||
</v-carousel-item>
|
||||
</v-carousel>
|
||||
|
||||
<!-- Single video -->
|
||||
<video
|
||||
v-else-if="post.is_video && post.video_url"
|
||||
:src="post.video_url"
|
||||
:aria-label="imageAlt"
|
||||
:ref="registerVideo"
|
||||
:poster="post.image_url ?? undefined"
|
||||
controls
|
||||
preload="metadata"
|
||||
playsinline
|
||||
class="card__video"
|
||||
>
|
||||
Your browser doesn't support video playback.
|
||||
</video>
|
||||
|
||||
<!-- Single image -->
|
||||
<v-img
|
||||
v-else-if="post.image_url"
|
||||
:src="post.image_url"
|
||||
:alt="imageAlt"
|
||||
contain
|
||||
height="100%"
|
||||
width="100%"
|
||||
>
|
||||
<template #placeholder>
|
||||
<div class="card__scan" />
|
||||
</template>
|
||||
<template #error>
|
||||
<div class="card__img-fallback">
|
||||
<v-icon icon="mdi-image-broken-variant" size="32" />
|
||||
<span>Image unavailable</span>
|
||||
</div>
|
||||
</template>
|
||||
</v-img>
|
||||
|
||||
<div v-else class="card__scan" />
|
||||
|
||||
<v-chip
|
||||
v-if="post.is_carousel && carouselSlides.length"
|
||||
class="card__badge"
|
||||
size="small"
|
||||
prepend-icon="mdi-image-multiple"
|
||||
:aria-label="`This post has ${carouselSlides.length} items`"
|
||||
>
|
||||
{{ carouselSlides.length }}
|
||||
</v-chip>
|
||||
</div>
|
||||
|
||||
<footer class="card__foot">
|
||||
<p v-if="post.like_count" class="card__likes">
|
||||
{{ post.like_count }}
|
||||
{{ post.like_count === 1 ? 'like' : 'likes' }}
|
||||
</p>
|
||||
|
||||
<p v-if="displayCaption" class="card__caption">
|
||||
<span class="card__handle">{{ post.username }}</span>
|
||||
{{ displayCaption }}
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
</template>
|
||||
<style scoped>
|
||||
.card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
padding: 0.85rem 1rem;
|
||||
}
|
||||
.card__who {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.25;
|
||||
flex: 1;
|
||||
}
|
||||
.card__handle {
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
color: var(--sediment);
|
||||
}
|
||||
.card__depth {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.7rem;
|
||||
color: var(--haze);
|
||||
}
|
||||
.card__specimen {
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(76, 224, 210, 0.05) 0px,
|
||||
rgba(76, 224, 210, 0.05) 1px,
|
||||
transparent 1px,
|
||||
transparent 4px
|
||||
),
|
||||
linear-gradient(160deg, #163041, #081722 65%);
|
||||
position: relative;
|
||||
}
|
||||
.card__scan {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent,
|
||||
rgba(76, 224, 210, 0.12),
|
||||
transparent
|
||||
);
|
||||
background-size: 100% 260%;
|
||||
animation: scan 6s linear infinite;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.card__scan {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@keyframes scan {
|
||||
0% {
|
||||
background-position: 0 -60%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 160%;
|
||||
}
|
||||
}
|
||||
.card__img-fallback {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
color: var(--haze);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.card__badge {
|
||||
position: absolute;
|
||||
top: 0.6rem;
|
||||
right: 0.6rem;
|
||||
}
|
||||
.card__foot {
|
||||
padding: 0.85rem 1rem 1.1rem;
|
||||
}
|
||||
|
||||
.card__likes {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--sediment);
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.card__caption {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
color: var(--sediment-dim);
|
||||
}
|
||||
.card__caption .card__handle {
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
.icon-btn {
|
||||
width: 2.1rem;
|
||||
height: 2.1rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--midwater);
|
||||
color: var(--sediment);
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
border-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
}
|
||||
.icon-btn:hover,
|
||||
.icon-btn:focus-visible {
|
||||
border-color: var(--bioluminum);
|
||||
color: var(--bioluminum);
|
||||
}
|
||||
.icon-btn:focus-visible {
|
||||
outline: 2px solid var(--bioluminum);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.icon-btn--ghost {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.card__video {
|
||||
width: 100%;
|
||||
max-height: 600px;
|
||||
object-fit: contain;
|
||||
background: #000;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Delimiter row: allow it to fit or scroll instead of clipping */
|
||||
:deep(.v-carousel__controls) {
|
||||
background: transparent;
|
||||
padding: 4px 10px;
|
||||
gap: 10px;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
justify-content: safe center; /* was: flex-start */
|
||||
scrollbar-width: none;
|
||||
}
|
||||
:deep(.v-carousel__controls)::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Shrink dots as slide count grows, so 20 items fit without scrolling */
|
||||
:deep(.v-carousel__controls__item) {
|
||||
width: clamp(6px, calc(220px / var(--slide-count, 1)), 10px) !important;
|
||||
height: clamp(6px, calc(220px / var(--slide-count, 1)), 10px) !important;
|
||||
min-width: 0 !important;
|
||||
margin: 0 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Inactive dots: much higher contrast than Vuetify's default */
|
||||
:deep(.v-carousel__controls__item .v-icon) {
|
||||
color: var(--sediment) !important;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* Active dot: full opacity + accent color (via the color prop above) */
|
||||
:deep(.v-carousel__controls__item.v-btn--active .v-icon),
|
||||
:deep(.v-carousel__controls__item[aria-pressed='true'] .v-icon) {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user