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

v0.1.41 theme: 홈/사이드바/추천 모달 동작 정리

Browse Source 
Made-with: Cursor
This commit is contained in:
zenn
2026-04-16 15:39:45 +09:00
parent b380820bb6
commit 4ca64abfa7
16 changed files with 213 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
partials/home/hero.hbs
View File

@@ -4,9 +4,7 @@
<h1 class="text-xl md:text-2xl font-semibold text-balance leading-[1.125]">
Ideas <em>published</em> for meaningful conversation, <em>discussed</em> and shaped by the community
</h1>
{{#if @site.description}}
<p class="text-base text-balance text-typ-tone max-w-md leading-snug">{{@site.description}}</p>
{{/if}}
<p class="text-base text-balance text-typ-tone max-w-md leading-snug">A modern Ghost theme for curated, community-driven publishing, where members join the conversation.</p>
<form class="group relative flex w-full max-w-xs flex-col items-start mt-1" data-members-form="subscribe">
<fieldset class="w-full flex gap-2 flex-wrap text-sm">
<legend class="sr-only">Personal information</legend>

2
partials/lists/post-feed.hbs
View File

@@ -29,7 +29,7 @@
<div class="overflow-hidden mt-4">
<div class="featured-slider flex gap-4 sm:gap-5 overflow-x-auto snap-x snap-mandatory scroll-smooth" data-featured-track style="scrollbar-width: none; -ms-overflow-style: none;">
{{#foreach posts}}
<a href="{{url}}" class="featured-slider__item relative bg-bgr-tone block group shrink-0 snap-start basis-[78%] sm:basis-[58%] lg:basis-[38%]">
<a href="{{url}}" class="featured-slider__item relative block group shrink-0 snap-start basis-[78%] sm:basis-[58%] lg:basis-[38%]">
{{#if feature_image}}
<figure class="relative block rounded-theme overflow-hidden contrast-125 brightness-75 group-hover:contrast-110 group-hover:brightness-90 transition-all" role="none">
<img class="w-full aspect-video object-cover rounded-[inherit]" src="{{img_url feature_image size="m"}}" alt="{{title}}">

19
partials/lists/post-items.hbs
View File

@@ -10,7 +10,7 @@
<span class="block w-full aspect-square sm:aspect-video rounded-lg bg-bgr-tone text-typ-tone text-xs text-center p-4">{{title}}</span>
{{/if}}
</a>
<div class="relative min-w-0 flex-3 md:flex-4 flex flex-col gap-1.5 justify-between " data-post-card-content>
<div class="relative min-w-0 flex-3 md:flex-4 flex flex-col gap-0.5 justify-between h-full self-stretch" data-post-card-content>
<h2 class="text-sm font-medium leading-tight flex flex-wrap gap-y-0.5 gap-x-1.5 items-end max-w-[90%]" data-post-card-title>
<a href="{{url}}" class="hover:opacity-75 flex items-start gap-1.5">
{{#if featured}}
@@ -23,10 +23,13 @@
<span>{{title}}</span>
</a>
</h2>
{{#if excerpt}}
<p class="text-[0.8rem] text-typ-tone leading-tight line-clamp-2 text-ellipsis flex-1" data-post-card-excerpt>{{excerpt words="24"}}</p>
{{/if}}
<div class="flex flex-wrap gap-2 sm:gap-1.5 items-center text-xs text-typ-tone *:after:content-['/'] *:after:ml-2 sm:*:after:ml-1.5 *:after:text-brd *:last:after:hidden!" data-post-card-info>
<p class="text-[0.8rem] text-typ-tone leading-tight line-clamp-2 text-ellipsis flex-1 min-h-[2.2rem]" data-post-card-excerpt>
{{#if excerpt}}
{{excerpt words="24"}}
{{/if}}
</p>
<div class="flex flex-wrap gap-2 sm:gap-1.5 items-center text-xs text-typ-tone [&>*:not(:last-child)]:after:content-['/'] [&>*:not(:last-child)]:after:ml-2 sm:[&>*:not(:last-child)]:after:ml-1.5 [&>*:not(:last-child)]:after:text-brd" data-post-card-info>
<time data-post-card-date datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D"}}</time>
{{#primary_author}}
<a data-post-card-author href="{{url}}" class="hover:opacity-75">{{name}}</a>
@@ -41,8 +44,10 @@
{{#unless access}}
<span class="font-medium">Members</span>
{{/unless}}
<a data-post-card-comments class="flex gap-0.5 items-center hover:opacity-75" href="{{url}}#ghost-comments">
<img class="size-3.5 -mt-px pointer-events-none" src="{{asset "icons/chat_bubble.svg"}}" alt="">
<a data-post-card-comments class="flex gap-1 items-center hover:opacity-75" href="{{url}}#ghost-comments">
<i class="icon icon-comments size-3.5 stroke-2 -mt-px pointer-events-none" role="presentation">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-message-circle"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1"></path></svg>
</i>
<span class="pointer-events-none">{{#if comments}}{{comment_count empty="0" singular="" plural="" autowrap="false"}}{{else}}0{{/if}}</span>
</a>
</div>

14
partials/recommendations.hbs Normal file
View File

@@ -0,0 +1,14 @@
{{#if recommendations}}
<ul class="flex flex-col gap-1 rounded-theme overflow-hidden" data-recommendations="">
{{#each recommendations as |rec|}}
<li>
<a class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75" href="{{rec.url}}" data-recommendation="{{rec.id}}" target="_blank" rel="noopener">
{{#if rec.favicon}}
<img class="w-[18px] h-[18px] rounded-[8px] aspect-square object-cover" src="{{rec.favicon}}" alt="" loading="lazy" onerror="this.style.display='none'">
{{/if}}
<h3 class="font-medium line-clamp-1 text-ellipsis overflow-hidden" title="{{rec.title}}">{{rec.title}}</h3>
</a>
</li>
{{/each}}
</ul>
{{/if}}

5
partials/site/sidebar-left.hbs
View File

@@ -78,7 +78,8 @@
</div>
</section>
<section class="sidebar-card sidebar-card--authors border-b border-brd px-5 sm:px-6 py-4 sm:py-5 xl:pl-0 pr-3 sm:pr-3 flex flex-col gap-1.5" x-data="{ authorsOpen: window.innerWidth >= 1024 }" x-init="window.addEventListener('resize', () => { authorsOpen = window.innerWidth >= 1024 })" data-sidebar-authors>
{{!-- 작가 목록 섹션 (주석으로 유지) --}}
{{!-- <section class="sidebar-card sidebar-card--authors border-b border-brd px-5 sm:px-6 py-4 sm:py-5 xl:pl-0 pr-3 sm:pr-3 flex flex-col gap-1.5" x-data="{ authorsOpen: window.innerWidth >= 1024 }" x-init="window.addEventListener('resize', () => { authorsOpen = window.innerWidth >= 1024 })" data-sidebar-authors>
<button class="sidebar-card__trigger flex items-center gap-1 justify-between cursor-pointer pr-2 hover:opacity-75" type="button" @click="authorsOpen = !authorsOpen" :aria-expanded="authorsOpen.toString()">
<span class="sidebar-card__eyebrow uppercase font-medium text-xs">Authors</span>
<span class="sidebar-card__chevron" aria-hidden="true">
@@ -108,7 +109,7 @@
{{/foreach}}
{{/get}}
</ul>
</section>
</section> --}}
<span class="flex-1"></span>

70
partials/site/sidebar-right.hbs
View File

@@ -47,43 +47,55 @@
<h2 class="uppercase font-medium text-xs text-typ-tone">Follow</h2>
<nav class="relative flex flex-wrap items-center gap-1 text-typ text-sm z-10">
{{!-- {{#if @site.facebook}}<a href="{{social_url type="facebook"}}" class="hover:opacity-75 p-0.5" aria-label="Facebook">f</a>{{/if}} --}}
{{#if @site.twitter}}<a href="{{social_url type="twitter"}}" class="w-5 h-5 hover:opacity-75 p-0.5" aria-label="X">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-x" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
<path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
</svg>
</a>{{/if}}
{{#if @site.twitter}}
<a href="https://x.com/ghost" class="hover:opacity-75 p-0.5" aria-label="Twitter">
<i class="icon icon-brand-x size-4 stroke-2" role="presentation">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-x" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
<path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
</svg>
</i><span class="hidden">Twitter</span></a>
{{/if}}
<a href="{{@site.url}}/rss/" class="hover:w-5 h-5 opacity-75 p-0.5" aria-label="RSS">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rss" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="5" cy="19" r="1"></circle>
<path d="M4 4a16 16 0 0 1 16 16"></path>
<path d="M4 11a9 9 0 0 1 9 9"></path>
</svg>
<i class="icon icon-rss size-4 stroke-2" role="presentation">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rss" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="5" cy="19" r="1"></circle>
<path d="M4 4a16 16 0 0 1 16 16"></path>
<path d="M4 11a9 9 0 0 1 9 9"></path>
</svg>
</i>
</a>
</nav>
</section>
<section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-1.5 border-b border-brd">
<div class="flex items-center justify-between gap-2 mb-2">
<h2 class="uppercase font-medium text-xs text-typ-tone">Recommended</h2>
<button class="text-sm font-medium flex items-center gap-1 rounded-btn group bg-bgr text-typ hover:text-typ-tone cursor-pointer gh-portal-close">↗</button>
<h2 class="uppercase font-bold text-xs text-typ-tone">발견하기</h2>
<button data-portal="recommendations" data-portal-title="발견하기" data-portal-description="회원님이 좋아하실 만한 다른 사이트들이에요." class="text-sm font-medium flex items-center gap-1 rounded-btn group bg-bgr text-typ hover:text-typ-tone cursor-pointer gh-portal-close">
<span class="sr-only">모두 보기</span>
<i class="icon icon-arrow-up-right size-4 stroke-2" role="presentation">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M17 7l-10 10"></path>
<path d="M8 7l9 0l0 9"></path>
</svg>
</i>
</button>
</div>
<ul class="flex flex-col gap-1 rounded-theme overflow-hidden">
{{#get "posts" filter="featured:true" limit="3" include="tags"}}
{{#foreach posts}}
<li><a href="{{url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75">{{title}}</a></li>
{{/foreach}}
{{else}}
<li><a href="{{@site.url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75">{{@site.title}}</a></li>
{{/get}}
</ul>
</section>
<section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-2.5 border-b border-brd">
<p class="text-sm white-space: pre-wrap;">{{@site.title}} is a thoughtfully designed Ghost theme inspired by editorial communities, with flexible settings that let you shape it to your publication.</p>
<a class="button button--accent" href="{{@site.url}}">About {{@site.title}}</a>
{{#match @site.recommendations_enabled}}
{{recommendations limit="4"}}
{{else}}
<ul class="flex flex-col gap-1 rounded-theme overflow-hidden">
<li>
<a href="{{@site.url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75">
<h3 class="font-medium line-clamp-1 text-ellipsis overflow-hidden">{{@site.title}}</h3>
</a>
</li>
</ul>
{{/match}}
</section>
{{#is "post"}}