Skip to content

Commit

Permalink
Top page layout
Browse files Browse the repository at this point in the history 
トップページのレイアウトを変更（まだ動作が重い可能性あり）
投稿を取得するロジックを最適化
  • Loading branch information
@Liry24
Liry24 committed Sep 12, 2024
1 parent 8da0e59 commit 265e79e
Show file tree
Hide file tree
Showing 8 changed files with 227 additions and 38 deletions.
77 changes: 53 additions & 24 deletions components/item/setup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,11 @@
const props = withDefaults(
defineProps<{
name: string;
avatar: number;
author: string;
avatar_name: string;
avatar_thumbnail: string;
author_id: string;
author_name: string;
author_avatar: string | null;
createdAt: string;
image: string | null;
noHero?: boolean;
Expand All @@ -21,40 +24,45 @@ const dateLocale = date.toLocaleString("ja-JP", {
day: "2-digit",
});
const fetchAvatar = ref<BoothItem | null>();
// const fetchAvatar = ref<BoothItem | null>();
const fetchImage = ref();
const fetchAuthorAvatar = ref();
const loading = ref(true);
onMounted(async () => {
fetchAvatar.value = await useFetchBooth({ id: props.avatar, url: null });
// fetchAvatar.value = await useFetchBooth({ id: props.avatar, url: null });
if (!fetchAvatar.value) {
console.log("avatar not found");
// TODO: アバターがリンク切れの場合のハンドリング
}
// if (!fetchAvatar.value) {
// console.log("avatar not found");
// // TODO: アバターがリンク切れの場合のハンドリング
// }
if (props.image) {
fetchImage.value = await useGetImage(props.image);
} else {
fetchImage.value = null;
}
if (props.author_avatar) {
fetchAuthorAvatar.value = await useGetImage(props.author_avatar);
} else {
fetchAuthorAvatar.value = null;
}
loading.value = false;
});
</script>

<template>
<ItemBase>
<template #hero>
<div v-if="props.image && !fetchImage" class="h-[190px]"></div>
<div
v-if="fetchImage && !noHero"
class="p-1.5 h-[190px] overflow-clip"
>
<NuxtImg
:src="fetchImage"
class="size-full rounded-lg overflow-clip object-cover"
/>
<div v-if="fetchImage && !noHero" class="px-1.5 pt-1.5 pb-0.5">
<div class="max-h-80 rounded-lg overflow-hidden">
<NuxtImg
:src="fetchImage"
class="size-full rounded-lg object-cover"
/>
</div>
</div>
</template>
<template #thumbnail>
Expand All @@ -71,7 +79,7 @@ onMounted(async () => {

<div v-if="!fetchImage" class="py-1.5 pl-1.5 flex-shrink-0">
<NuxtImg
:src="fetchAvatar?.thumbnail"
:src="props.avatar_thumbnail"
:alt="props.name"
class="h-14 rounded-lg overflow-clip"
/>
Expand All @@ -91,11 +99,7 @@ onMounted(async () => {
<p
class="text-sm text-neutral-500 dark:text-neutral-400 break-all line-clamp-1"
>
{{
fetchAvatar?.avatar_details
? fetchAvatar.avatar_details.short_ja
: fetchAvatar?.name
}}
{{ props.avatar_name }}
</p>
<div class="flex items-center gap-2">
<ATooltip :text="dateLocale">
Expand All @@ -105,7 +109,32 @@ onMounted(async () => {
{{ useDateElapsed(date) }}
</p>
</ATooltip>
<AUser :user="props.author" size="sm" />
<ATooltip :text="props.author_name">
<NuxtLink
:to="{
name: 'user-id',
params: { id: props.author_id },
}"
class="flex flex-row gap-2 items-center"
>
<UAvatar
v-if="fetchAuthorAvatar"
size="xs"
:src="fetchAuthorAvatar"
:alt="props.author_name"
/>
<div
v-else
class="flex items-center justify-center size-[25px] rounded-full flex-shrink-0 bg-neutral-200 dark:bg-neutral-500"
>
<Icon
name="lucide:user-round"
size="14"
class="text-neutral-600 dark:text-neutral-300"
/>
</div>
</NuxtLink>
</ATooltip>
</div>
</div>
</div>
Expand Down
13 changes: 13 additions & 0 deletions composables/setup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,19 @@ export interface Setup {
created_at: string;
}

export interface SetupSimple {
id: number;
name: string;
description: string | null;
avatar_name: string;
avatar_thumbnail: string;
author_id: string;
author_name: string;
author_avatar: string;
created_at: string;
image: string | null;
}

export const usePublishSetup = async (
setup: {
name: string;
Expand Down
19 changes: 16 additions & 3 deletions composables/state.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,35 @@ export const useBoothItems = defineStore("boothItems", () => {
export const useSetupIndex = defineStore("setupIndex", () => {
const user = useSupabaseUser();

const setupsIndex = ref<Setup[]>([]);
type SetupData = {
id: number;
name: string;
description: string;
author: { id: string; name: string; avatar: string };
avatar: { name: string; thumbnail: string };
image: string;
created_at: string;
};
const setupsIndex = ref<SetupData[]>([]);

async function GetSetupIndex() {
const client = await useSBClient();
if (user.value) {
const { data } = await client
.from("setups")
.select("id, created_at, name, author, avatar, image")
.select(
"id, description, name, author(id, name, avatar), avatar(name, thumbnail), image, created_at"
)
.neq("author", user.value.id)
.order("created_at", { ascending: false })
.range(0, 20);
setupsIndex.value = data;
} else {
const { data } = await client
.from("setups")
.select("id, created_at, name, author, avatar, image")
.select(
"id, description, name, author(id, name, avatar), avatar(name, thumbnail), image, created_at"
)
.order("created_at", { ascending: false })
.range(0, 20);
setupsIndex.value = data;
Expand Down
2 changes: 1 addition & 1 deletion nuxt.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
ssr: false,
// ssr: false,

routeRules: {
"/": { swr: true },
Expand Down
35 changes: 35 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
},
"dependencies": {
"@vercel/edge-config": "^1.2.1",
"@yeger/vue-masonry-wall": "^5.0.15",
"budoux": "0.6.2",
"date-fns": "3.6.0",
"marked": "14.1.1",
Expand Down
Loading

0 comments on commit 265e79e

Please sign in to comment.