315 lines
No EOL
7.3 KiB
Svelte
315 lines
No EOL
7.3 KiB
Svelte
<script lang="ts">
|
|
const { data } = $props();
|
|
|
|
import Toc from './toc.svelte'
|
|
import Share from './share.svelte'
|
|
import Profile from './profile.svelte'
|
|
import { base } from '$app/paths';
|
|
import { PUBLIC_HOSTNAME, PUBLIC_POST_REPO } from '$env/static/public';
|
|
import { onMount } from 'svelte';
|
|
|
|
import '$lib/components/rainbow.css';
|
|
import '$lib/components/Markdown.css';
|
|
|
|
const baseURL = `https://${PUBLIC_HOSTNAME}${base}`
|
|
|
|
onMount(()=>{
|
|
let toggleHide = function(e:MessageEvent){
|
|
if (e.data.message === 'toggleHide') {
|
|
let iframes = document.querySelectorAll('.markdown iframe')
|
|
|
|
for ( let i = 0; i < iframes.length; i++ ){
|
|
let frame = iframes[i]
|
|
|
|
if (frame instanceof HTMLIFrameElement && new URL(frame.src).origin === window.origin && frame.contentWindow?.name == e.data.id){
|
|
iframes[i].classList.toggle('hide')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
window.addEventListener('message', toggleHide)
|
|
|
|
|
|
document.getElementById('blog')?.addEventListener('click',(e:MouseEvent)=>{
|
|
if (e.target instanceof HTMLElement && e.target.matches('pre')) {
|
|
let code = e.target.textContent || '';
|
|
navigator.clipboard.writeText(code)
|
|
}
|
|
})
|
|
|
|
// リスナ解除
|
|
return ()=>{window.removeEventListener('message', toggleHide)}
|
|
})
|
|
</script>
|
|
|
|
|
|
<svelte:head>
|
|
<title>{data.metadata.title} | moris.day Blog</title>
|
|
<meta name="description" content="{data.metadata.description}"/>
|
|
|
|
<meta property="og:url" content="{baseURL}/post/{data.id}"/>
|
|
<meta property="og:title" content="{data.metadata.title}"/>
|
|
<meta property="og:description" content="{data.metadata.description}"/>
|
|
<meta property="og:type" content="article"/>
|
|
<meta property="og:locale" content="ja_JP"/>
|
|
{#if data.metadata.thumbnail && data.metadata.thumbnail.endsWith('.svg')}
|
|
<meta property="og:image" content="{data.metadata.thumbnail}"/>
|
|
{:else}
|
|
<meta property="og:image" content="https://moris.day/apple-touch-icon.png"/>
|
|
{/if}
|
|
|
|
{#if !data.metadata.index}
|
|
<meta name="robots" content="noindex"/>
|
|
{/if}
|
|
</svelte:head>
|
|
|
|
|
|
<div id='blog'>
|
|
<article>
|
|
<h1 class="title">{data.metadata.title}</h1>
|
|
|
|
<div class="meta">
|
|
<div class="category">
|
|
<span class="txt">Category:</span>
|
|
<a class="tag" href='/blog/category/{data.metadata.category}'>{data.metadata.category}</a>
|
|
</div>
|
|
|
|
{#if data.metadata.tags.length}
|
|
<div class="divider"></div>
|
|
|
|
<div class="tags">
|
|
<span class="txt">Tags:</span>
|
|
{#each data.metadata.tags as tag}
|
|
<a class='tag' href='/blog/tag/{tag}'>{tag}</a>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="date">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z"/></svg>
|
|
<span>{data.metadata.date.toLocaleDateString('sv-SE')}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{#if data.metadata.thumbnail}
|
|
<img class="thumbnail" alt="thumbnail" src="{data.metadata.thumbnail}" style='view-transition-name: {data.id}'>
|
|
{:else if data.metadata.emoji}
|
|
<div class='thumbnail emoji'><img class="emoji" alt="thumbnail" src="{data.metadata.emoji}" style='view-transition-name: {data.id}'></div>
|
|
{/if}
|
|
|
|
<div class='markdown'>
|
|
{@html data.post}
|
|
</div>
|
|
|
|
<div class="data">
|
|
{#if PUBLIC_POST_REPO}
|
|
<div><a target="_blank" href="{PUBLIC_POST_REPO}/commits/branch/main/Posts/{data.id}.md">History</a></div>
|
|
<div class="spacer"></div>
|
|
{/if}
|
|
<div><a target="_blank" href="raw.md">Raw file</a></div>
|
|
</div>
|
|
</article>
|
|
|
|
<aside>
|
|
<div id='side'>
|
|
<div>
|
|
<Profile></Profile>
|
|
</div>
|
|
<div>
|
|
<Share share={{url:`${baseURL}/post/${data.id}`, title:data.metadata.title}} />
|
|
</div>
|
|
{#if data.heading.length!=0}
|
|
<div id='toc'>
|
|
<Toc toclist={data.heading}></Toc>
|
|
</div>
|
|
{/if}
|
|
<div class="mi-posts js">
|
|
<!-- <iframe src="https://mi.moris.day/embed/user-timeline/9w7bhjzt2b5z0001?maxHeight=320&rounded=false&border=false" title="moris's posts" loading="lazy" style="border:none; width:100%; height:100%;"></iframe> -->
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
|
|
<style>
|
|
#blog {
|
|
display: flex;
|
|
margin: 25px 2.5%;
|
|
gap: 20px;
|
|
}
|
|
aside {
|
|
min-width: 280px;
|
|
max-width: 320px;
|
|
|
|
@media (width<1000px) {
|
|
display: none;
|
|
}
|
|
|
|
& #side {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 20px;
|
|
position: sticky;
|
|
top: 70px;
|
|
}
|
|
& #side>* {
|
|
background-color: var(--grid-color);
|
|
transition: background-color 1s;
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 6px #1111;
|
|
overflow: hidden;
|
|
}
|
|
|
|
& .mi-posts {
|
|
height: 320px;
|
|
@media(prefers-color-scheme: dark) {
|
|
border: solid #444 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
article {
|
|
min-width: 0;
|
|
max-width: 60rem;
|
|
margin: 0 auto;
|
|
flex-grow: 1;
|
|
padding: 0 20px;
|
|
border-radius: 8px;
|
|
@media(width<480px){
|
|
padding: 0;
|
|
}
|
|
|
|
& .title {
|
|
font-size: 2em;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
padding: 5px;
|
|
border-bottom: 1px solid;
|
|
@media(width<480px) {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
& .thumbnail {
|
|
display: block;
|
|
margin: 0 auto;
|
|
max-height: 50vh;
|
|
}
|
|
& img.thumbnail {
|
|
height: 35vh;
|
|
max-width: 100%;
|
|
object-fit: contain;
|
|
}
|
|
& .emoji.thumbnail {
|
|
width: 30%;
|
|
max-width: 30vh;
|
|
aspect-ratio: 1;
|
|
@media(width<480px) {
|
|
width: 50%;
|
|
}
|
|
& img {
|
|
margin: 15%;
|
|
}
|
|
}
|
|
& .markdown {
|
|
margin: 25px 0;
|
|
@media (width<480px) {
|
|
margin: 8px;
|
|
}
|
|
}
|
|
& .data {
|
|
display: flex;
|
|
padding: 8px;
|
|
border-top: solid 1px;
|
|
font-weight: 200;
|
|
font-size: 1.2em;
|
|
& .spacer {
|
|
width: 1px;
|
|
background-color: var(--font-color);
|
|
box-sizing: border-box;
|
|
margin: 2px 6px;
|
|
}
|
|
& a {
|
|
margin: 4px;
|
|
color: var(--font-color);
|
|
text-decoration-thickness: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.meta {
|
|
display: grid;
|
|
grid-template-rows: auto auto;
|
|
grid-template-columns: auto auto 1fr auto;
|
|
gap: 8px;
|
|
font-size: 0.95em;
|
|
margin: 8px;
|
|
white-space: nowrap;
|
|
|
|
@media(width<1000px) {
|
|
flex-direction: column;
|
|
}
|
|
|
|
& .category {
|
|
grid-row: 1;
|
|
grid-column: 1;
|
|
}
|
|
|
|
& .tags {
|
|
grid-row: 1;
|
|
grid-column: 3;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
@media(width<1000px) {
|
|
grid-row: 2;
|
|
grid-column: 1 / 5;
|
|
}
|
|
@media(width<480px){
|
|
display: inline-block;
|
|
grid-row: 1;
|
|
grid-column: 3;
|
|
}
|
|
}
|
|
|
|
& .tag {
|
|
display: inline-block;
|
|
background-color: var(--theme-color);
|
|
color: var(--font-color);
|
|
border-radius: 3px;
|
|
padding: 0 4px 1px 4px;
|
|
margin: 3px;
|
|
}
|
|
|
|
& .divider {
|
|
display: inline-block;
|
|
width: 1px;
|
|
margin: 3px 0;
|
|
background-color: var(--font-color);
|
|
grid-row: 1;
|
|
grid-column: 2;
|
|
@media(480px<width<1000px){
|
|
display: none;
|
|
}
|
|
}
|
|
& .date{
|
|
display: flex;
|
|
grid-row: 1;
|
|
grid-column: 4;
|
|
vertical-align: middle;
|
|
align-items: center;
|
|
@media(width<480px){
|
|
display: inline-block;
|
|
grid-row: 2;
|
|
grid-column: 1 / 5;
|
|
}
|
|
}
|
|
& .date svg{
|
|
height: 1rem;
|
|
fill: var(--font-color);
|
|
vertical-align: middle;
|
|
}
|
|
@media(width<480px) {
|
|
& .txt {display: none;}
|
|
}
|
|
}
|
|
</style> |