Public Source Viewer
비나래아카이브 개발자 포털
실제 서비스 구조를 살펴볼 수 있는 공개용 코드 뷰어입니다. 인증, 세션, 외부 연동, 토큰, 관리자 식별 등 보안상 민감한 구현은 파일 단위 또는 줄 단위로 검열됩니다.
view/hinana/main.ejs
공개 가능
1
<!doctype html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8">
5
<meta name="viewport" content="width=device-width,initial-scale=1">
6
<meta name="color-scheme" content="light dark">
7
<meta name="theme-color" content="<%= typeof theme !== 'undefined' && theme === 'dark' ? '#131923' : '#f6f8fc' %>">
8
<meta name="description" content="일상의 순간과 좋아하는 것들을 천천히 쌓아두는 작은 공간, 비나래 아카이브입니다.">
9
<meta property="og:type" content="website">
10
<meta property="og:site_name" content="비나래 아카이브">
11
<meta property="og:title" content="비나래 아카이브">
12
<meta property="og:description" content="기록하고, 쉬어가고, 좋아하는 것을 모으는 비나래의 작은 공간이에요.">
13
<meta property="og:url" content="https://hinana.moe/">
14
<meta property="og:image" content="https://hinana.moe/image/10.png">
15
<meta name="twitter:card" content="summary_large_image">
16
<meta name="twitter:title" content="비나래 아카이브">
17
<meta name="twitter:description" content="일상의 작은 기록과 좋아하는 것들이 모이는 공간.">
18
<meta name="twitter:image" content="https://hinana.moe/image/10.png">
19
<meta name="apple-mobile-web-app-title" content="비나래 아카이브">
20
<link rel="manifest" href="/manifest.json">
21
<title>비나래 아카이브</title>
22
<link rel="stylesheet" href="/css/site-ui.css?v=3">
23
<link rel="stylesheet" href="/css/site-app.css?v=1">
24
</head>
25
<body data-ui-page="main" class="ui-shell <%= typeof theme !== 'undefined' && theme === 'dark' ? 'dark-mode' : '' %>">
26
<%- include('partials/site-header', { uiPage: 'main' }) %>
27
<main id="ui-content" class="home-page" tabindex="-1">
28
<div class="home-page-heading"><div><h1>오늘도, 편안히 둘러보세요.</h1><p>일상의 작은 기록과 좋아하는 것들이 기다리고 있어요.</p></div></div>
29
<section class="home-hero" aria-labelledby="home-hero-title">
30
<div class="home-hero-copy"><div class="home-hero-eyebrow"><svg aria-hidden="true"><use href="#ui-i-spark"/></svg>ARCHIVE MY MEMORY</div><h2 id="home-hero-title">비나래 <em>아카이브</em></h2><p>일상의 순간과 좋아하는 것들을<br>천천히 쌓아두는 작은 공간이에요.</p><div class="home-hero-actions"><a class="home-button" href="/hinana/index">기록 둘러보기<svg aria-hidden="true"><use href="#ui-i-arrow"/></svg></a><a class="home-text-link" href="/hinana/lounge">라운지로 가기<svg aria-hidden="true"><use href="#ui-i-chevron"/></svg></a></div></div>
31
<div class="home-hero-visual" aria-hidden="true"><div class="home-hero-circle"></div><span class="home-hero-sticker">오늘은 뭘 해볼까요~?</span><img class="home-hero-character" src="/image/hinana_normal.png" alt="" fetchpriority="high"><span class="home-hero-dot"></span><span class="home-hero-star">✧</span></div>
32
</section>
33
<nav class="home-shortcuts" aria-label="빠른 이동">
34
<% [['/hinana/index','archive','','아카이브','일상을 담은 기록'],['/hinana/blog','book','amber','블로그','조금 더 긴 이야기'],['/hinana/lounge','cup','purple','라운지','잠깐 쉬어가는 곳'],['/hinana/gallery','image','mint','갤러리','좋아하는 장면들']].forEach(([href,icon,color,title,description])=>{ %>
35
<a class="home-shortcut" href="<%= href %>"><span class="home-tile-icon <%= color ? 'home-'+color : '' %>"><svg aria-hidden="true"><use href="#ui-i-<%= icon %>"/></svg></span><span><strong><%= title %></strong><small><%= description %></small></span><svg class="home-arrow" aria-hidden="true"><use href="#ui-i-chevron"/></svg></a>
36
<% }); %>
37
</nav>
38
<div class="home-columns">
39
<section aria-labelledby="home-recent-title"><div class="home-section-heading"><h2 id="home-recent-title">최근 기록</h2><a href="/hinana/index">전체 보기<svg aria-hidden="true"><use href="#ui-i-chevron"/></svg></a></div><div class="home-panel">
40
<% const entries = typeof recentEntries !== 'undefined' ? recentEntries : []; %>
41
<% if(!entries.length){ %><div class="home-empty"><p>아직 공개된 기록이 없어요.</p><a class="home-text-link" href="/hinana/index">아카이브 둘러보기 <svg aria-hidden="true"><use href="#ui-i-arrow"/></svg></a></div><% } %>
42
<% entries.forEach(entry=>{ %>
43
<a class="home-entry" href="<%= entry.url %>"><span class="home-entry-icon"><svg aria-hidden="true"><use href="#ui-i-<%= entry.category==='블로그'?'book':'note' %>"/></svg></span><span><span class="home-entry-category"><%= entry.category %></span><h3><%= entry.title %></h3><p><%= entry.excerpt %></p></span><% if(entry.date){ %><time datetime="<%= entry.date %>"><%= new Intl.DateTimeFormat('ko-KR',{timeZone:'Asia/Seoul',month:'2-digit',day:'2-digit'}).format(new Date(entry.date)).replace(/\s/g,'') %></time><% } %></a>
44
<% }); %>
45
</div></section>
46
<section class="home-tools" aria-labelledby="home-tools-title"><div class="home-section-heading"><h2 id="home-tools-title">자주 찾는 작은 도구</h2><a href="/hinana/lounge">라운지<svg aria-hidden="true"><use href="#ui-i-chevron"/></svg></a></div><div class="home-panel">
47
<% [['/hinana/studio','spark','Hinana Studio','영상과 소리, 이미지와 이야기를 만드는 작업실'],['/hinana/rail','train','히나나레일','승차 기록으로 모아 보는 철도 여행'],['/hinana/japanese-lounge','language','일본어 라운지','일본어와 한국어 문장을 소리로 만나요.']].forEach(([href,icon,title,description])=>{ %>
48
<a class="home-entry" href="<%= href %>"><span class="home-entry-icon"><svg aria-hidden="true"><use href="#ui-i-<%= icon %>"/></svg></span><span><h3><%= title %></h3><p><%= description %></p></span><svg class="home-arrow" aria-hidden="true"><use href="#ui-i-chevron"/></svg></a>
49
<% }); %>
50
</div></section>
51
</div>
52
<footer class="home-bottom-note"><span class="home-footer-sign"><span class="home-dot" aria-hidden="true"></span>좋아하는 것을, 나의 속도로.</span><a href="/classic">이전 현관 보기 <svg aria-hidden="true"><use href="#ui-i-chevron"/></svg></a></footer>
53
</main>
54
<script>if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js');</script>
55
</body>
56
</html>
57