add source codes
This commit is contained in:
parent
9da3d1044d
commit
1a26f0aaf4
55 changed files with 2774 additions and 0 deletions
11
src/routes/(DefaultStyle)/[slug]/+page.server.ts
Normal file
11
src/routes/(DefaultStyle)/[slug]/+page.server.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import Metas from '$lib/server/Metadatas';
|
||||
|
||||
export async function load({params}){
|
||||
const pageNo = Number(params.slug)
|
||||
const postList = await Metas()
|
||||
|
||||
const posts = postList.slice(pageNo*12, (pageNo+1)*12);
|
||||
const lastPage = Math.ceil(postList.length/12)-1;
|
||||
|
||||
return {posts, pageNo, lastPage}
|
||||
}
|
||||
74
src/routes/(DefaultStyle)/[slug]/+page.svelte
Normal file
74
src/routes/(DefaultStyle)/[slug]/+page.svelte
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<script lang="ts">
|
||||
const { data } = $props();
|
||||
import Postgrid from './grid.svelte'
|
||||
|
||||
import { base } from '$app/paths';
|
||||
import { PUBLIC_HOSTNAME } from '$env/static/public';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>記事一覧 | moris.day Blog</title>
|
||||
<link rel="canonical" href="https://{PUBLIC_HOSTNAME}{base}/" />
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<div class='contain'>
|
||||
<div class="posts">
|
||||
{#each data.posts as post}
|
||||
<div class="post" class:unpublished={!post.metadata.published}>
|
||||
<a style='text-decoration: none;' href="../post/{post.postId}" tabindex="0">
|
||||
<Postgrid id={post.postId} {...post.metadata}></Postgrid>
|
||||
</a>
|
||||
</div>
|
||||
{/each}
|
||||
{#if data.posts.length%4}
|
||||
{#each Array(4-data.posts.length%4) as i}
|
||||
<div class="blank"></div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class='paging'>
|
||||
<a href={data.pageNo==0? "":`../${Number(data.pageNo)-1}`} style:visibility={data.pageNo==0? 'hidden':''}>＜</a>
|
||||
<span>{data.pageNo}</span><span>/</span><span>{data.lastPage}</span>
|
||||
<a href={data.pageNo==data.lastPage? "":`../${Number(data.pageNo)+1}`} style:visibility={data.pageNo==data.lastPage? 'hidden':''}>＞</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.contain {
|
||||
margin: 3vw;
|
||||
}
|
||||
|
||||
.posts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
grid-template-rows: max-content;
|
||||
gap: 25px;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
max-width: 1599px;
|
||||
}
|
||||
.post {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 6px #0001;
|
||||
|
||||
&.unpublished {
|
||||
border: solid red 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.paging {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
column-gap: 8px;
|
||||
margin: 20px;
|
||||
font-size: 1.5em;
|
||||
font-weight: 550;
|
||||
& a {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
117
src/routes/(DefaultStyle)/[slug]/grid.svelte
Normal file
117
src/routes/(DefaultStyle)/[slug]/grid.svelte
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
<script lang="ts">
|
||||
export let title: string;
|
||||
export let description: string;
|
||||
export let thumbnail: string;
|
||||
export let emoji: string;
|
||||
export let date: Date;
|
||||
export let category: string;
|
||||
export let id: string;
|
||||
|
||||
let twemoji = async (url: string)=>{
|
||||
let res = await (await fetch(url)).text()
|
||||
return res
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class='grid'>
|
||||
<div class='thumbnail'>
|
||||
{#if thumbnail }
|
||||
<img src="{thumbnail}" alt='thumbnail' style='view-transition-name: {id}'/>
|
||||
{:else if emoji}
|
||||
{#await twemoji(emoji)}
|
||||
<div></div>
|
||||
{:then emojisvg}
|
||||
<div class="emoji">
|
||||
{@html emojisvg}
|
||||
</div>
|
||||
{/await}
|
||||
<!-- <div class='emoji'><img class='svg' src="{emoji}" alt="thumbnail" style='view-transition-name: {id}'/></div> -->
|
||||
{:else}
|
||||
<img src='data:image/svg+xml,{encodeURIComponent('<svg fill="#aaa" version="1.1" viewBox="0 -960 96 96" xmlns="http://www.w3.org/2000/svg"><path d="m41-903q-0.8 0-1.4-0.6t-0.6-1.4v-14q0-0.8 0.6-1.4t1.4-0.6h14q0.8 0 1.4 0.6t0.6 1.4v14q0 0.8-0.6 1.4t-1.4 0.6zm0-2h14v-14h-14zm1-2h12l-3.8-5-3 4-2.25-3zm-1 2v-14z"/></svg>')}' alt="fallback"/>
|
||||
{/if}
|
||||
|
||||
<div class="tag date">{date.toLocaleDateString('sv-SE')}</div>
|
||||
<div class="tag category">{category}</div>
|
||||
</div>
|
||||
<div class='label'>
|
||||
<div class='title'>{title}</div>
|
||||
<div class='description'>{description}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.grid {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
background-color: var(--grid-color);
|
||||
transition: background-color 1s;
|
||||
&:hover {
|
||||
img {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
.title{
|
||||
text-decoration-line: underline;
|
||||
text-decoration-color: var(--font-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
aspect-ratio: 1/0.6;
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
|
||||
& img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
margin: 0 auto;
|
||||
transition: transform .3s ease-out;
|
||||
}
|
||||
& div.emoji {
|
||||
height: 70%;
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
& .tag{
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
padding:2px;
|
||||
color: var(--font-color);
|
||||
background-color: var(--back-color);
|
||||
border-radius: 3px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
& .date {
|
||||
right:5px;
|
||||
}
|
||||
& .category {
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: var(--font-color);
|
||||
|
||||
& .title {
|
||||
font-size: 1.17em;
|
||||
font-weight: bold;
|
||||
margin: 4px 8px;
|
||||
}
|
||||
|
||||
& .description {
|
||||
margin:8px;
|
||||
font-size: .9em;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue