メタデータをコンポーネント化
This commit is contained in:
parent
ee887860d7
commit
5503f812ec
2 changed files with 91 additions and 90 deletions
|
|
@ -4,6 +4,7 @@
|
||||||
import Toc from './toc.svelte'
|
import Toc from './toc.svelte'
|
||||||
import Share from './share.svelte'
|
import Share from './share.svelte'
|
||||||
import Profile from './profile.svelte'
|
import Profile from './profile.svelte'
|
||||||
|
import Metadata from './metadata.svelte'
|
||||||
import { base } from '$app/paths';
|
import { base } from '$app/paths';
|
||||||
import { PUBLIC_HOSTNAME, PUBLIC_POST_REPO } from '$env/static/public';
|
import { PUBLIC_HOSTNAME, PUBLIC_POST_REPO } from '$env/static/public';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
|
@ -100,28 +101,7 @@
|
||||||
<article>
|
<article>
|
||||||
<h1 class="title">{data.metadata.title}</h1>
|
<h1 class="title">{data.metadata.title}</h1>
|
||||||
|
|
||||||
<div class="meta">
|
<Metadata meta={data.metadata}/>
|
||||||
<div class="category">
|
|
||||||
<span class="txt">Category:</span>
|
|
||||||
<a class="tag" href='../../category/{data.metadata.category}'>{data.metadata.category}</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if data.metadata.tags.length}
|
|
||||||
<div class="divider"></div>
|
|
||||||
|
|
||||||
<div class="tags">
|
|
||||||
<span class="txt">Tag:</span>
|
|
||||||
{#each data.metadata.tags as tag}
|
|
||||||
<a class='tag' href='../../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>
|
|
||||||
<time datetime="{data.metadata.date.toLocaleDateString('sv-SE')}">{data.metadata.date.toLocaleDateString('sv-SE')}</time>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if thumbnail}
|
{#if thumbnail}
|
||||||
<img class="thumbnail" alt="thumbnail" src="{thumbnail}" style='view-transition-name: {data.id}'/>
|
<img class="thumbnail" alt="thumbnail" src="{thumbnail}" style='view-transition-name: {data.id}'/>
|
||||||
|
|
@ -269,72 +249,4 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta {
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: auto auto;
|
|
||||||
grid-template-columns: auto auto 1fr auto;
|
|
||||||
gap: 4px;
|
|
||||||
font-size: 0.95em;
|
|
||||||
margin: 8px 16px;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
@media(width<1000px) {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .category {
|
|
||||||
grid-area: 1 / 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .tags {
|
|
||||||
grid-area: 1 / 3;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
@media(width<1000px) {
|
|
||||||
grid-area: 2 / 1 / 3 / 5;
|
|
||||||
}
|
|
||||||
@media(width<480px){
|
|
||||||
grid-area: 1 / 3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .tag {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 1px 4px;
|
|
||||||
margin: 3px;
|
|
||||||
border-radius: 3px;
|
|
||||||
color: currentColor;
|
|
||||||
background-color: var(--theme-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
& .divider {
|
|
||||||
width: 1px;
|
|
||||||
margin: 3px 0;
|
|
||||||
background-color: currentColor;
|
|
||||||
grid-area: 1 / 2;
|
|
||||||
@media(480px<=width<1000px){
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .date{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
grid-area: 1 / 4;
|
|
||||||
@media(width<480px){
|
|
||||||
grid-area: 2 / 1 / 3 / 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
& svg{
|
|
||||||
height: 1rem;
|
|
||||||
fill: currentColor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(width<480px) {
|
|
||||||
& .txt {display: none;}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
89
src/routes/(DefaultStyle)/post/[slug]/metadata.svelte
Normal file
89
src/routes/(DefaultStyle)/post/[slug]/metadata.svelte
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
<script lang="ts">
|
||||||
|
export let meta
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="meta">
|
||||||
|
<div class="category">
|
||||||
|
<span class="txt">Category:</span>
|
||||||
|
<a class="tag" href='../../category/{meta.category}'>{meta.category}</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if meta.tags.length}
|
||||||
|
<div class="divider"></div>
|
||||||
|
|
||||||
|
<div class="tags">
|
||||||
|
<span class="txt">Tag:</span>
|
||||||
|
{#each meta.tags as tag}
|
||||||
|
<a class='tag' href='../../tag/{tag}'>{tag}</a>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="date">
|
||||||
|
<svg class="clockicon" 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>
|
||||||
|
<time datetime="{meta.date.toLocaleDateString('sv-SE')}">{meta.date.toLocaleDateString('sv-SE')}</time>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.meta {
|
||||||
|
display: grid;
|
||||||
|
grid-template: auto auto / auto auto 1fr auto;
|
||||||
|
gap: 4px;
|
||||||
|
margin: 8px 16px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category {
|
||||||
|
grid-area: 1 / 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
grid-area: 1 / 3;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
@media(width<1000px) {
|
||||||
|
grid-area: 2 / 1 / 3 / 5;
|
||||||
|
}
|
||||||
|
@media(width<480px){
|
||||||
|
grid-area: 1 / 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 4px;
|
||||||
|
margin: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: currentColor;
|
||||||
|
background-color: var(--theme-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.date {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
grid-area: 1 / 4;
|
||||||
|
@media(width<480px){
|
||||||
|
grid-area: 2 / 1 / 3 / 5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.clockicon {
|
||||||
|
height: 1em;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
width: 1px;
|
||||||
|
margin: 3px 6px;
|
||||||
|
background-color: currentColor;
|
||||||
|
grid-area: 1 / 2;
|
||||||
|
@media(480px<=width<1000px){
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(width<480px) {
|
||||||
|
.txt {display: none;}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue