199 lines
7.0 KiB
Plaintext
199 lines
7.0 KiB
Plaintext
---
|
|
import { getCollection } from 'astro:content';
|
|
import MainGridLayout from "../../layouts/MainGridLayout.astro";
|
|
import ImageBox from "../../components/misc/ImageBox.astro";
|
|
import {Icon} from "astro-icon/components";
|
|
import PostMetadata from "../../components/PostMetadata.astro";
|
|
import Button from "../../components/control/Button.astro";
|
|
import {i18n} from "../../i18n/translation";
|
|
import I18nKey from "../../i18n/i18nKey";
|
|
import {getPostUrlBySlug} from "../../utils/url-utils";
|
|
import License from "../../components/misc/License.astro";
|
|
import {licenseConfig} from "../../config";
|
|
|
|
export async function getStaticPaths() {
|
|
const blogEntries = await getCollection('posts');
|
|
return blogEntries.map(entry => ({
|
|
params: { slug: entry.slug }, props: { entry },
|
|
}));
|
|
}
|
|
|
|
const { entry } = Astro.props;
|
|
const { Content } = await entry.render();
|
|
|
|
const { remarkPluginFrontmatter } = await entry.render();
|
|
|
|
---
|
|
<MainGridLayout banner={entry.data.image} title={entry.data.title}>
|
|
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
|
|
<div class:list={["card-base z-10 px-4 md:px-9 pt-6 pb-4 relative w-full ",
|
|
{}
|
|
]}>
|
|
<!-- word count and reading time -->
|
|
<div class="flex flex-row text-black/30 dark:text-white/30 gap-5 mb-3 transition">
|
|
<div class="flex flex-row items-center">
|
|
<div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
|
|
<Icon name="material-symbols:notes-rounded"></Icon>
|
|
</div>
|
|
<div class="text-sm">{remarkPluginFrontmatter.words} {" " + i18n(I18nKey.wordsCount)}</div>
|
|
</div>
|
|
<div class="flex flex-row items-center">
|
|
<div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
|
|
<Icon name="material-symbols:schedule-outline-rounded"></Icon>
|
|
</div>
|
|
<div class="text-sm">{remarkPluginFrontmatter.minutes} {" " + i18n(I18nKey.minutesCount)}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- title -->
|
|
<div class="relative">
|
|
<div
|
|
class="transition w-full block font-bold mb-3
|
|
text-3xl md:text-[40px]/[44px]
|
|
text-black/90 dark:text-white/90
|
|
md:before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
|
|
before:absolute before:top-[12px] before:left-[-18px]
|
|
">
|
|
{entry.data.title}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- metadata -->
|
|
<PostMetadata
|
|
class="mb-5"
|
|
published={entry.data.published}
|
|
tags={entry.data.tags}
|
|
categories={entry.data.categories}
|
|
></PostMetadata>
|
|
|
|
<!-- always show cover as long as it has one -->
|
|
|
|
{entry.data.image &&
|
|
<ImageBox src={entry.data.image} class="mb-8 rounded-xl"/>
|
|
}
|
|
|
|
{!entry.data.image && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}
|
|
|
|
<div class="mb-6 prose dark:prose-invert prose-sm md:prose-base max-w-none custom-md
|
|
">
|
|
<!--<div class="prose dark:prose-invert max-w-none custom-md">-->
|
|
<!--<div class="max-w-none custom-md">-->
|
|
<Content />
|
|
</div>
|
|
|
|
{licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl"></License>}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full">
|
|
<a href={getPostUrlBySlug(entry.data.nextSlug)} class="w-full font-bold overflow-hidden active:scale-95">
|
|
{entry.data.nextSlug && <Button class="w-full max-w-full h-10 px-4 rounded-2xl flex items-center justify-start gap-4" card height="60px">
|
|
<Icon name="material-symbols:chevron-left-rounded" size={32} class="text-[var(--primary)]" />
|
|
<div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75">
|
|
{entry.data.nextTitle}
|
|
</div>
|
|
</Button>}
|
|
</a>
|
|
|
|
<a href={getPostUrlBySlug(entry.data.prevSlug)} class="w-full font-bold overflow-hidden active:scale-95">
|
|
{entry.data.prevSlug && <Button class="w-full max-w-full h-10 px-4 rounded-2xl flex items-center justify-end gap-4" card height="60px">
|
|
<div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75">
|
|
{entry.data.prevTitle}
|
|
</div>
|
|
<Icon name="material-symbols:chevron-right-rounded" size={32} class="text-[var(--primary)]" />
|
|
</Button>}
|
|
</a>
|
|
</div>
|
|
|
|
</MainGridLayout>
|
|
|
|
<style lang="stylus" is:global>
|
|
.custom-md
|
|
a
|
|
position: relative
|
|
background: none
|
|
margin: -4px
|
|
padding: 4px
|
|
border-radius: 6px
|
|
color: var(--primary)
|
|
text-decoration-line: none;
|
|
/*&:after*/
|
|
/* content: ''*/
|
|
/* position: absolute*/
|
|
/* left: 2px*/
|
|
/* right: 2px*/
|
|
/* bottom: 4px*/
|
|
/* height: 6px*/
|
|
/* border-radius: 3px*/
|
|
/* background: var(--link-hover)*/
|
|
/* transition: background 0.15s ease-in-out;*/
|
|
/* z-index: -1;*/
|
|
&:hover
|
|
background: var(--link-hover)
|
|
&:active
|
|
background: var(--link-active)
|
|
/*&:after*/
|
|
/* background: var(--link-active)*/
|
|
code
|
|
font-family: monospace
|
|
background: var(--inline-code-bg)
|
|
color: var(--inline-code-color)
|
|
padding: 2px 4px
|
|
border-radius: 4px
|
|
overflow: hidden
|
|
&:before
|
|
content: none
|
|
&:after
|
|
content: none
|
|
pre
|
|
background: var(--codeblock-bg) !important
|
|
border-radius: 12px
|
|
padding-left: 20px
|
|
padding-right: 20px
|
|
code
|
|
padding: 0
|
|
background: none
|
|
::selection
|
|
background: var(--codeblock-selection)
|
|
span.br::selection
|
|
background: var(--codeblock-selection)
|
|
ul
|
|
li
|
|
&::marker
|
|
color: var(--primary)
|
|
ol
|
|
li
|
|
&::marker
|
|
color: var(--primary)
|
|
blockquote
|
|
font-style: normal
|
|
border-left-color: rgba(0,0,0,0)
|
|
position: relative;
|
|
&:before
|
|
content: ''
|
|
position: absolute
|
|
left: -0.25rem
|
|
display: block
|
|
transition: background 0.15s ease-in-out;
|
|
background: var(--btn-regular-bg)
|
|
height: 100%
|
|
width: 0.25rem
|
|
border-radius: 1rem
|
|
p
|
|
&:before
|
|
content: none
|
|
&:after
|
|
content: none
|
|
img
|
|
border-radius: 12px
|
|
hr
|
|
border-color: var(--line-divider)
|
|
border-style: dashed
|
|
iframe
|
|
border-radius: 12px
|
|
margin-left: auto
|
|
margin-right: auto
|
|
max-width: 100%
|
|
|
|
</style> |