194 lines
8.1 KiB
Vue
194 lines
8.1 KiB
Vue
<script setup>
|
|
const followLinks = [
|
|
{ id: 'facebook', label: 'Facebook', href: 'https://facebook.com', icon: 'facebook' },
|
|
{ id: 'x', label: 'X', href: 'https://x.com', icon: 'x' },
|
|
{ id: 'github', label: 'Github', href: 'https://github.com', icon: 'github' },
|
|
{ id: 'instagram', label: 'Instagram', href: 'https://instagram.com', icon: 'instagram' },
|
|
{ id: 'linkedin', label: 'Linkedin', href: 'https://linkedin.com', icon: 'linkedin' },
|
|
{ id: 'rss', label: 'RSS', href: '/rss/', icon: 'rss' }
|
|
]
|
|
|
|
const { data: siteSettings } = await useFetch('/api/site-settings', {
|
|
default: () => ({
|
|
title: 'sori.studio',
|
|
description: 'sori.studio 개인 블로그',
|
|
logoText: '井',
|
|
logoUrl: '',
|
|
copyrightText: '©2026 sori.studio'
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<aside class="right-sidebar site-sidebar flex w-full flex-col overflow-hidden border-[var(--site-line)] max-lg:border-l-0 max-lg:border-t max-lg:px-4 max-lg:pb-10 lg:sticky lg:top-[57px] lg:z-10 lg:h-[calc(100vh-57px)] lg:max-h-[calc(100vh-57px)] lg:w-[287px] lg:self-start lg:border-l lg:border-t-0 lg:px-0">
|
|
<div class="right-sidebar__scroll site-sidebar-scroll min-h-0 flex-1">
|
|
<div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0 max-lg:px-0">
|
|
<div class="right-sidebar__profile flex items-center gap-3">
|
|
<div class="right-sidebar__logo grid h-12 w-12 place-items-center overflow-hidden rounded-2xl bg-[var(--site-invert)] text-2xl font-bold text-[var(--site-invert-text)]">
|
|
<img
|
|
v-if="siteSettings.logoUrl"
|
|
class="h-full w-full object-cover"
|
|
:src="siteSettings.logoUrl"
|
|
:alt="siteSettings.title"
|
|
>
|
|
<span v-else>{{ siteSettings.logoText }}</span>
|
|
</div>
|
|
<div>
|
|
<p class="right-sidebar__title font-semibold">
|
|
{{ siteSettings.title }}
|
|
</p>
|
|
<p class="right-sidebar__description text-sm site-muted">
|
|
{{ siteSettings.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<form class="right-sidebar__subscribe mt-4 flex flex-col gap-2 sm:flex-row sm:items-stretch">
|
|
<input class="right-sidebar__input min-w-0 w-full flex-1 rounded-lg px-3 py-2 text-sm site-input sm:min-w-0" placeholder="Your email">
|
|
<button class="right-sidebar__button shrink-0 rounded-lg px-4 py-2 text-sm font-semibold site-button sm:self-auto" type="button">
|
|
Subscribe
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
|
|
<div class="right-sidebar__row flex items-center justify-between">
|
|
<p class="right-sidebar__eyebrow text-xs font-semibold uppercase site-muted">
|
|
Follow
|
|
</p>
|
|
<nav class="right-sidebar__social relative z-10 flex flex-wrap items-center gap-1 text-sm text-[var(--site-text)]">
|
|
<a
|
|
v-for="item in followLinks"
|
|
:key="item.id"
|
|
class="site-interactive p-0.5 hover:opacity-75"
|
|
:href="item.href"
|
|
:aria-label="item.label"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<svg
|
|
v-if="item.icon === 'facebook'"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="h-4 w-4"
|
|
>
|
|
<path d="M7 10v4h3v7h4v-7h3l1-4h-4V8a1 1 0 0 1 1-1h3V3h-3a5 5 0 0 0-5 5v2z" />
|
|
</svg>
|
|
<svg
|
|
v-else-if="item.icon === 'x'"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="h-4 w-4"
|
|
>
|
|
<path d="M4 4l11.733 16H20L8.267 4z" />
|
|
<path d="M4 20l6.768-6.768m2.46-2.46L20 4" />
|
|
</svg>
|
|
<svg
|
|
v-else-if="item.icon === 'github'"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="h-4 w-4"
|
|
>
|
|
<path d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0c-2.4-1.6-3.5-1.3-3.5-1.3a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21" />
|
|
</svg>
|
|
<svg
|
|
v-else-if="item.icon === 'instagram'"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="h-4 w-4"
|
|
>
|
|
<rect x="4" y="4" width="16" height="16" rx="4" />
|
|
<circle cx="12" cy="12" r="3" />
|
|
<line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
|
|
</svg>
|
|
<svg
|
|
v-else-if="item.icon === 'linkedin'"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="h-4 w-4"
|
|
>
|
|
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
|
|
<rect x="2" y="9" width="4" height="12" />
|
|
<circle cx="4" cy="4" r="2" />
|
|
</svg>
|
|
<svg
|
|
v-else
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="h-4 w-4"
|
|
>
|
|
<circle cx="5" cy="19" r="1" />
|
|
<path d="M4 4a16 16 0 0 1 16 16" />
|
|
<path d="M4 11a9 9 0 0 1 9 9" />
|
|
</svg>
|
|
<span class="sr-only">{{ item.label }}</span>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
|
|
<div class="right-sidebar__row flex items-center justify-between">
|
|
<p class="right-sidebar__eyebrow text-xs font-semibold uppercase site-muted">
|
|
Recommended
|
|
</p>
|
|
<span>↗</span>
|
|
</div>
|
|
<div class="right-sidebar__links mt-4 grid gap-3 text-sm">
|
|
<NuxtLink class="right-sidebar__link site-interactive font-semibold" to="/post/hello-sori-studio">
|
|
sori.studio 첫 글과 방향
|
|
</NuxtLink>
|
|
<NuxtLink class="right-sidebar__link site-interactive font-semibold" to="/pages/projects">
|
|
Projects and services
|
|
</NuxtLink>
|
|
<NuxtLink class="right-sidebar__link site-interactive font-semibold" to="/pages/links">
|
|
Links and portal
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
|
|
<p class="right-sidebar__about text-sm leading-6 site-muted">
|
|
{{ siteSettings.description }}
|
|
</p>
|
|
<NuxtLink class="right-sidebar__about-button mt-4 inline-flex rounded-lg px-4 py-2 text-sm font-semibold site-accent-button" to="/pages/about">
|
|
About {{ siteSettings.title }}
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="right-sidebar__footer shrink-0 py-4 pl-5 pr-3 text-xs site-muted max-lg:px-0">
|
|
{{ siteSettings.copyrightText }}
|
|
</footer>
|
|
</aside>
|
|
</template>
|