zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.2.9: 라이브 에디터·홈 피드·메인 커버 개선

Browse Source 
라이브 모드 코드/콜아웃/토글 편집, 슬래시 명령, 홈 Latest List·Compact·Cards 보기,
사이트 설정 메인 화면 커버(720px) 및 HomeHero 반영.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zenn
2026-05-18 16:57:30 +09:00
parent 666bd304fc
commit 3fb8a40031
34 changed files with 3823 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
pages/index.vue
View File

@@ -7,24 +7,97 @@ const { data: tags } = await useFetch('/api/tags', {
default: () => []
})
const { data: siteSettings } = await useFetch('/api/site-settings', {
default: () => ({})
})
const postFeedStyleStorageKey = 'POST_FEED_STYLE'
const postFeedStyleOpen = ref(false)
const postFeedStyle = ref('compact')
/** @typedef {'list' | 'compact' | 'cards'} PostFeedStyle */
/**
* 저장·표시용 피드 보기 방식을 정규화한다.
* @param {string|null|undefined} value - 원본 값
* @returns {PostFeedStyle}
*/
const normalizePostFeedStyle = (value) => {
if (value === 'list' || value === 'cards') {
return value
}
return 'compact'
}
/**
* Latest 피드 보기 방식을 저장한다.
* @param {'list' | 'compact' | 'cards' | 'articles'} value - 보기 방식
* @returns {void}
*/
const setPostFeedStyle = (value) => {
postFeedStyle.value = value
const nextStyle = normalizePostFeedStyle(value === 'articles' ? 'compact' : value)
postFeedStyle.value = nextStyle
if (import.meta.client) {
localStorage.setItem(postFeedStyleStorageKey, value)
localStorage.setItem(postFeedStyleStorageKey, nextStyle)
}
}
/** @type {import('vue').ComputedRef<boolean>} */
const isPostFeedCards = computed(() => postFeedStyle.value === 'cards')
/** @type {import('vue').ComputedRef<boolean>} */
const showPostFeedMedia = computed(() => postFeedStyle.value === 'list' || postFeedStyle.value === 'cards')
/**
* Latest 피드 컨테이너 클래스
* @param {PostFeedStyle} style - 보기 방식
* @returns {string}
*/
const getPostFeedContainerClass = (style) => {
if (style === 'cards') {
return 'post-feed post-feed--cards mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2'
}
return 'post-feed post-feed--stack flex flex-col divide-y divide-[var(--site-line)]'
}
/**
* Latest 게시물 카드 클래스
* @param {PostFeedStyle} style - 보기 방식
* @returns {string}
*/
const getPostFeedArticleClass = (style) => {
if (style === 'cards') {
return 'post-feed__card group relative flex flex-col rounded-[10px] border border-[var(--site-line)] bg-[var(--site-bg)] p-3'
}
if (style === 'compact') {
return 'post-feed__item post-feed__item--compact group relative flex flex-row gap-3 py-3'
}
return 'post-feed__item post-feed__item--list group relative flex flex-row gap-3 py-4'
}
/**
* 요약 줄 수 클래스
* @param {PostFeedStyle} style - 보기 방식
* @returns {string}
*/
const getPostFeedExcerptClass = (style) => {
if (style === 'list') {
return 'line-clamp-3'
}
if (style === 'compact') {
return 'line-clamp-1'
}
return 'line-clamp-2'
}
const closePostFeedStyleMenu = () => {
postFeedStyleOpen.value = false
}
@@ -163,9 +236,7 @@ onMounted(() => {
}
const storedStyle = localStorage.getItem(postFeedStyleStorageKey)
if (storedStyle === 'list' || storedStyle === 'compact' || storedStyle === 'cards' || storedStyle === 'articles') {
postFeedStyle.value = storedStyle
}
postFeedStyle.value = normalizePostFeedStyle(storedStyle)
document.addEventListener('pointerdown', onDocumentPointerDown)
})
@@ -211,26 +282,12 @@ const scrollFeatured = (direction) => {
<template>
<MainColumn>
<section class="py-6 px-6 md:py-8">
<div class="mx-auto flex max-w-[720px] flex-col-reverse gap-6">
<div class="z-[2] flex flex-col items-center justify-center gap-2 text-center">
<h1 class="text-xl font-semibold leading-[1.125] md:text-2xl">
Ideas <em>published</em> for meaningful conversation, <em>discussed</em> and shaped by the community
</h1>
<p class="max-w-md text-base leading-snug site-muted">
A modern Ghost theme for curated, community-driven publishing, where members join the conversation.
</p>
<form class="group relative mt-1 flex w-full max-w-xs flex-col items-start">
<fieldset class="flex w-full flex-wrap gap-2 text-sm">
<legend class="sr-only">Personal information</legend>
<input class="site-input flex-[2] rounded-[10px] px-3 py-1.5 text-sm" type="email" placeholder="Your email" aria-label="Your email">
<button class="site-button flex-1 cursor-pointer rounded-[10px] border border-[var(--site-invert)] bg-gradient-to-b from-[rgba(17,17,17,0.75)] to-[rgba(17,17,17,0.95)] px-3 py-1.5 font-medium text-[var(--site-invert-text)] hover:opacity-90" type="button">
Subscribe
</button>
</fieldset>
</form>
</div>
</div>
<section v-if="siteSettings?.homeCoverImageUrl" class="home-page__hero px-6 pb-2 pt-6 md:pt-8">
<HomeHero
:image-url="siteSettings.homeCoverImageUrl"
:title="siteSettings.homeCoverTitle"
:text="siteSettings.homeCoverText"
/>
</section>
<section v-if="featuredPosts.length" class="py-4 px-6">
@@ -326,13 +383,6 @@ const scrollFeatured = (direction) => {
<path d="M4 16a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2" />
</svg>
</span>
<span class="pointer-events-none" v-show="postFeedStyle === 'articles'">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3.06 13a9 9 0 1 0 .49-4.087" />
<path d="M3 4.001v5h5" />
<path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />
</svg>
</span>
<span class="pointer-events-none opacity-75">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
@@ -386,7 +436,7 @@ const scrollFeatured = (direction) => {
</button>
</li>
<li class="w-full">
<button class="flex w-full cursor-pointer items-center gap-1.5 rounded-[10px] px-2 py-1 hover:bg-[var(--site-panel)]" type="button" @click="setPostFeedStyle('articles'); closePostFeedStyleMenu()">
<button class="flex w-full cursor-pointer items-center gap-1.5 rounded-[10px] px-2 py-1 hover:bg-[var(--site-panel)]" type="button" @click="setPostFeedStyle('compact'); closePostFeedStyleMenu()">
<span class="pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M3.06 13a9 9 0 1 0 .49-4.087" />
@@ -400,47 +450,33 @@ const scrollFeatured = (direction) => {
</menu>
</div>
</div>
<div class="mb-8 flex flex-col">
<div class="post-feed-section mb-8 flex flex-col">
<div
class="flex flex-col divide-y divide-[var(--site-line)]"
:class="postFeedStyle === 'cards' ? 'divide-y-0 gap-4 sm:grid sm:grid-cols-2 sm:gap-4' : ''"
class="post-feed-section__list"
data-post-feed="latest"
:class="getPostFeedContainerClass(postFeedStyle)"
>
<article
v-for="post in latestPosts"
:key="post.to"
class="group relative overflow-hidden"
:class="postFeedStyle === 'cards' ? 'rounded-[10px] border border-[var(--site-line)] p-3' : 'flex flex-row gap-3 py-4'"
data-post-card
:data-featured="post.isFeatured ? '' : undefined"
:class="getPostFeedArticleClass(postFeedStyle)"
>
<NuxtLink
<PostCardMedia
v-if="showPostFeedMedia"
:to="post.to"
class="relative flex-1"
:class="postFeedStyle === 'cards' ? 'mb-3 block aspect-video w-full' : 'aspect-square min-w-16 sm:aspect-video'"
>
<figure class="overflow-hidden rounded-[10px]">
<img
v-if="post.featuredImage"
:src="post.featuredImage"
:alt="post.title"
class="w-full rounded-[inherit] object-cover transition-opacity duration-200 group-hover:opacity-90"
:class="postFeedStyle === 'cards' ? 'aspect-video' : 'aspect-square sm:aspect-video'"
loading="lazy"
>
<div
v-else
class="w-full rounded-[inherit] bg-[linear-gradient(135deg,#253444,#8f9dad)]"
:class="postFeedStyle === 'cards' ? 'aspect-video' : 'aspect-square sm:aspect-video'"
/>
</figure>
</NuxtLink>
:title="post.title"
:featured-image="post.featuredImage"
:link-class="isPostFeedCards ? 'post-feed__media post-feed__media--cards mb-3 block aspect-video w-full' : 'post-feed__media post-feed__media--list relative flex-1 aspect-square min-w-16 sm:aspect-video'"
:aspect-class="isPostFeedCards ? 'aspect-video' : 'aspect-square sm:aspect-video'"
/>
<div
class="relative"
:class="postFeedStyle === 'cards' ? '' : 'flex-[3] md:flex-[4]'"
class="post-feed__content relative min-w-0"
:class="isPostFeedCards ? 'flex flex-col' : 'flex flex-[3] flex-col gap-1.5 md:flex-[4]'"
>
<div
class="flex h-full flex-col gap-1.5"
:class="postFeedStyle === 'cards' ? '' : ''"
>
<div class="post-feed__content-inner flex min-h-0 flex-1 flex-col gap-1.5">
<h2 class="max-w-[90%] text-sm font-medium leading-tight">
<NuxtLink :to="post.to" class="flex items-center transition-opacity duration-200 hover:opacity-75">
<span v-if="post.isFeatured" class="post-feed__featured-icon mr-1 inline-flex h-4 w-4 items-center justify-center text-[var(--site-accent)]">
@@ -453,8 +489,8 @@ const scrollFeatured = (direction) => {
</h2>
<p
class="flex-1 text-[0.8rem] leading-tight site-muted"
:class="postFeedStyle === 'list' ? 'line-clamp-3' : postFeedStyle === 'articles' ? 'line-clamp-4' : 'line-clamp-2'"
class="flex-1 text-[0.8rem] leading-tight site-muted text-[#6E6661]"
:class="getPostFeedExcerptClass(postFeedStyle)"
>
{{ post.excerpt }}
</p>
@@ -482,7 +518,7 @@ const scrollFeatured = (direction) => {
<button
class="absolute top-0 right-0 flex cursor-pointer items-center gap-1 hover:opacity-75"
:class="postFeedStyle === 'cards' ? '' : 'md:top-auto md:right-0 md:bottom-0 md:invisible md:opacity-0 md:transition-[opacity,visibility] md:duration-200 md:group-hover:visible md:group-hover:opacity-100'"
:class="isPostFeedCards ? '' : 'md:top-auto md:right-0 md:bottom-0 md:invisible md:opacity-0 md:transition-[opacity,visibility] md:duration-200 md:group-hover:visible md:group-hover:opacity-100'"
type="button"
aria-label="Share this post"
>