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

v0.1.40 홈 피드 및 문서 버전 정리

Browse Source 
Made-with: Cursor
This commit is contained in:
zenn
2026-04-16 12:00:28 +09:00
parent 3f01b8b808
commit f839a1fba7
26 changed files with 520 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
partials/home/hero.hbs
View File

@@ -1,15 +1,49 @@
<section class="hero home-hero" data-home-hero>
<div class="home-hero__inner">
<div class="home-hero__content">
<h1 class="hero__title">Ideas <em>published</em> for meaningful conversation, <em>discussed</em> and shaped by the community</h1>
<section class="home-hero px-5 sm:px-6 py-6 md:py-8 relative" data-home-hero="">
<div class="max-w-content mx-auto flex gap-6">
<div class="home-hero__content z-2 flex-2 flex flex-col gap-2 items-center justify-center text-center">
<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="hero__description">{{@site.description}}</p>
<p class="text-base text-balance text-typ-tone max-w-md leading-snug">{{@site.description}}</p>
{{/if}}
{{subscribe_form
placeholder="Your email"
button_class="button button--light button--subscribe"
form_class="subscribe-form subscribe-form--hero"
}}
<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>
<input data-members-email="" class="text-sm bg-bgr-tone border border-brd text-typ flex-2 py-1.5 px-3 rounded-md focus:ring-0 focus:bg-bgr" type="email" autocomplete="email" placeholder="Your email" aria-label="Your email" required="" aria-required="true">
<button class="flex-1 px-3 py-1.5 text-bgr font-medium rounded-md hover:opacity-90 bg-gradient-to-b from-typ/75 to-typ/95 border border-typ cursor-pointer" type="submit">
<span class="hidden group-[.loading]:flex items-center justify-center">
<i class="icon icon-loader size-5 [&_svg]:animate-spin stroke-2" role="presentation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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="M12 3a9 9 0 1 0 9 9"></path>
</svg>
</i>
</span>
<span class="group-[.loading]:hidden">Subscribe</span>
</button>
</fieldset>
<div data-notification="" class="absolute left-0 -bottom-16 z-50 invisible opacity-0 -translate-y-4 transition-all text-[0.8rem] text-left font-medium leading-none flex items-center w-full max-w-md rounded-md gap-2 bg-white text-black p-3 shadow-lg group-[.success]:opacity-100 group-[.success]:visible group-[.success]:translate-y-0 group-[.error]:opacity-100 group-[.error]:visible group-[.error]:translate-y-0">
<div class="hidden group-[.success]:flex items-center gap-2 flex-1">
<i class="icon icon-success size-6 text-emerald-600 fill-current" role="presentation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"></path>
</svg>
</i>
<p>Great! Check your inbox and click the link.</p>
</div>
<div class="hidden group-[.error]:flex items-center gap-2 flex-1">
<i class="icon icon-error size-6 text-red-600 fill-current" role="presentation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z"></path>
</svg>
</i>
<p>Sorry, something went wrong. Please try again.</p>
</div>
</div>
</form>
</div>
</div>
</section>
</section>

140
partials/home/tabbed-feed.hbs
View File

@@ -1,59 +1,97 @@
<section class="px-5 sm:px-6 py-4" data-tabs data-home-content>
<section class="px-5 sm:px-6 py-4" data-home-content x-data="{ activeFeed: '#latest', postFeedTypeOpen: false }">
<div class="max-w-content mx-auto">
<div class="flex gap-2 items-center justify-between border-b border-brd pb-2">
<div class="tab-row home-feed__tabs" role="tablist" aria-label="Homepage sections">
<button class="tab-row__button is-active" type="button" data-tab-trigger="latest">Latest</button>
<button class="tab-row__button" type="button" data-tab-trigger="featured">Featured</button>
<button class="tab-row__button" type="button" data-tab-trigger="updated">Updated</button>
<button class="tab-row__button" type="button" data-tab-trigger="categories">Categories</button>
<div class="flex gap-2 items-center justify-between border-b border-brd pb-2">
<ul class="hidden md:flex gap-1 text-typ-tone font-medium" data-feed-select="">
<li data-feed-select-item="latest">
<a href="#latest" class="block text-sm px-3 py-1.5 rounded-theme hover:bg-bgr-tone hover:text-typ relative" :class="activeFeed === '#latest' ? 'text-typ after:absolute after:-bottom-2 after:left-0 after:w-full after:h-0.5 after:bg-typ' : ''" @click.prevent="activeFeed = '#latest'">Latest</a>
</li>
<li data-feed-select-item="featured">
<a href="#featured" class="block text-sm px-3 py-1.5 rounded-theme hover:bg-bgr-tone hover:text-typ relative" :class="activeFeed === '#featured' ? 'text-typ after:absolute after:-bottom-2 after:left-0 after:w-full after:h-0.5 after:bg-typ' : ''" @click.prevent="activeFeed = '#featured'">Featured</a>
</li>
<li data-feed-select-item="updated">
<a href="#updated" class="block text-sm px-3 py-1.5 rounded-theme hover:bg-bgr-tone hover:text-typ relative" :class="activeFeed === '#updated' ? 'text-typ after:absolute after:-bottom-2 after:left-0 after:w-full after:h-0.5 after:bg-typ' : ''" @click.prevent="activeFeed = '#updated'">Updated</a>
</li>
<li data-feed-select-item="categories">
<a href="#categories" class="block text-sm px-3 py-1.5 rounded-theme hover:bg-bgr-tone hover:text-typ relative" :class="activeFeed === '#categories' ? 'text-typ after:absolute after:-bottom-2 after:left-0 after:w-full after:h-0.5 after:bg-typ' : ''" @click.prevent="activeFeed = '#categories'">Categories</a>
</li>
</ul>
<div class="flex flex-col gap-1 relative text-sm font-medium md:hidden">
<button class="px-3 py-1.5 pr-2 rounded-theme bg-bgr hover:bg-bgr-tone relative leading-none cursor-pointer flex gap-0.75 items-center justify-center border border-brd" @click="postFeedTypeOpen = !postFeedTypeOpen" data-feed-type-toggle="" aria-label="Select feed type">
<span class="pointer-events-none" x-show="activeFeed === '#latest'">Latest</span>
<span class="pointer-events-none" x-show="activeFeed === '#featured'">Featured</span>
<span class="pointer-events-none" x-show="activeFeed === '#updated'">Updated</span>
<span class="pointer-events-none" x-show="activeFeed === '#categories'">Categories</span>
<span class="opacity-75 pointer-events-none">
<i class="icon icon-chevron-down stroke-[2.5] size-4" role="presentation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</i>
</span>
</button>
<menu class="flex flex-col gap-0.5 absolute top-9 left-0 border border-brd bg-bgr rounded-theme p-1.5 z-10 transition-[transform,opacity,visibility] shadow" :class="postFeedTypeOpen ? 'translate-y-0 opacity-100 visible' : '-translate-y-2 opacity-0 invisible'" @click.outside="postFeedTypeOpen = false">
<li class="w-full"><a href="#latest" class="w-full px-2 py-1 flex items-center gap-1.5 hover:bg-bgr-tone rounded-theme cursor-pointer" @click.prevent="activeFeed = '#latest'; postFeedTypeOpen = false">Latest</a></li>
<li class="w-full"><a href="#featured" class="w-full px-2 py-1 flex items-center gap-1.5 hover:bg-bgr-tone rounded-theme cursor-pointer" @click.prevent="activeFeed = '#featured'; postFeedTypeOpen = false">Featured</a></li>
<li class="w-full"><a href="#updated" class="w-full px-2 py-1 flex items-center gap-1.5 hover:bg-bgr-tone rounded-theme cursor-pointer" @click.prevent="activeFeed = '#updated'; postFeedTypeOpen = false">Updated</a></li>
<li class="w-full"><a href="#categories" class="w-full px-2 py-1 flex items-center gap-1.5 hover:bg-bgr-tone rounded-theme cursor-pointer" @click.prevent="activeFeed = '#categories'; postFeedTypeOpen = false">Categories</a></li>
</menu>
</div>
</div>
<button class="view-toggle home-feed__view-toggle" type="button" aria-label="Change view">
<span class="view-toggle__grid"></span>
<span class="view-toggle__chevron">⌄</span>
</button>
</div>
<div class="flex flex-col gap-8 mb-8 is-active" data-tab-panel="latest">
{{> "lists/post-feed"}}
</div>
<div class="flex flex-col gap-8 mb-8" x-show="activeFeed === '#latest'" data-feed="latest">
{{> "lists/post-feed"}}
</div>
<div class="tab-panel" data-tab-panel="featured">
{{#get "posts" filter="featured:true" limit="8" include="authors,tags"}}
{{> "lists/post-items" posts=posts}}
{{/get}}
</div>
<div class="tab-panel" data-tab-panel="updated">
{{#get "posts" order="updated_at desc" limit="8" include="authors,tags"}}
{{> "lists/post-items" posts=posts}}
{{/get}}
</div>
<div class="tab-panel" data-tab-panel="categories">
<div class="category-overview">
{{#get "tags" limit="8" include="count.posts" order="count.posts desc"}}
{{#foreach tags}}
<section class="category-overview__row"{{#if accent_color}} style="--tag-accent: {{accent_color}};"{{/if}}>
<div class="category-overview__intro">
<h2>{{name}}</h2>
{{#if description}}
<p>{{description}}</p>
{{else}}
<p>{{plural count.posts empty="No posts yet" singular="% post in this category" plural="% posts in this category"}}</p>
{{/if}}
<a class="category-overview__link" href="{{url}}">View all ↗</a>
</div>
<ol class="category-overview__posts">
{{#get "posts" filter=(concat "tag:" slug) limit="5"}}
{{#foreach posts}}
<li><a href="{{url}}" data-number="{{@number}}. ">{{title}}</a></li>
{{/foreach}}
{{/get}}
</ol>
</section>
{{/foreach}}
<div class="tab-panel" x-show="activeFeed === '#featured'" data-feed="featured">
{{#get "posts" filter="featured:true" limit="8" include="authors,tags"}}
{{> "lists/post-items" posts=posts}}
{{/get}}
</div>
</div>
<div class="tab-panel **:data-post-card-date-updated:block **:data-post-card-date:hidden" x-show="activeFeed === '#updated'" data-feed="updated">
{{#get "posts" order="updated_at desc" limit="8" include="authors,tags"}}
{{> "lists/post-items" posts=posts}}
{{/get}}
</div>
<div class="tab-panel" x-show="activeFeed === '#categories'" data-feed="categories">
<ul class="flex flex-col">
{{#get "tags" limit="8" include="count.posts" order="count.posts desc"}}
{{#foreach tags}}
<li class="p-4 pl-5 sm:pl-6 sm:p-5 flex flex-wrap flex-col gap-2 md:flex-row border-b border-b-brd relative before:absolute before:left-0 before:top-0 before:w-0.75 before:h-full before:bg-accent"{{#if accent_color}} style="--color-accent:{{accent_color}}"{{/if}}>
<h2 class="font-medium basis-full leading-tight">{{name}}</h2>
<div class="flex-2 flex flex-col gap-1.5 border-b border-brd pb-3 mb-2 md:pb-0 md:border-b-0 md:mr-4 md:mb-0 items-start justify-between">
{{#if description}}
<p class="text-sm text-typ-tone line-clamp-4 text-ellipsis leading-snug">{{description}}</p>
{{else}}
<p class="text-sm text-typ-tone line-clamp-4 text-ellipsis leading-snug">{{plural count.posts empty="No posts yet" singular="% post in this category" plural="% posts in this category"}}</p>
{{/if}}
<a href="{{url}}" class="text-sm text-typ-tone font-semibold leading-snug flex items-center gap-1 hover:opacity-75 mt-0.5">
<span>View all</span>
<i class="icon icon-arrow-up-right size-3.5 stroke-3" role="presentation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
</a>
</div>
<ol class="flex-3 flex flex-col gap-1.5 text-sm text-typ-tone font-medium">
{{#get "posts" filter=(concat "tag:" slug) limit="5"}}
{{#foreach posts}}
<li>
<a href="{{url}}" data-number="{{@number}}. " class="line-clamp-1 text-ellipsis before:content-[attr(data-number)] before:font-bold leading-snug hover:opacity-75" title="{{title}}">{{title}}</a>
</li>
{{/foreach}}
{{/get}}
</ol>
</li>
{{/foreach}}
{{/get}}
</ul>
</div>
</div>
</section>