feat(styles): article icon
This commit is contained in:
parent
a00d8f26a6
commit
2c498e9da2
|
@ -6,7 +6,8 @@ export const collections = {
|
|||
schema: z.object({
|
||||
title: z.string(),
|
||||
date: z.date(),
|
||||
tags: z.array(z.string()).optional(),
|
||||
icon: z.string().optional(),
|
||||
desc: z.string().optional(),
|
||||
})
|
||||
}),
|
||||
slides: defineCollection({
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Breaking apart the Haskell type class
|
||||
date: 2023-11-02T17:28:25.466Z
|
||||
tags: [haskell]
|
||||
icon: haskell
|
||||
desc: >
|
||||
Type classes are perhaps the most distinctive feature of Haskell.
|
||||
I’ve found them pretty confusing, but in reality they are an incredibly
|
||||
|
|
|
@ -11,6 +11,7 @@ interface Props {
|
|||
headings?: MarkdownHeading[];
|
||||
frontmatter: {
|
||||
title: string;
|
||||
icon?: string;
|
||||
};
|
||||
slug?: string;
|
||||
tree?: PageTree;
|
||||
|
@ -36,6 +37,13 @@ const headings = Maybe.fromNullable(Astro.props.headings);
|
|||
const pages = Astro.url.pathname.startsWith("/wiki/")
|
||||
? await constructWikiTree(Astro.props.tree)
|
||||
: Maybe.empty();
|
||||
|
||||
const {title, icon} = frontmatter || {};
|
||||
|
||||
const classlist = [
|
||||
'wiki-article',
|
||||
...icon ? ['has-icon', `icon-${icon}`] : []
|
||||
];
|
||||
---
|
||||
|
||||
<Base title={frontmatter.title}>
|
||||
|
@ -52,9 +60,9 @@ const pages = Astro.url.pathname.startsWith("/wiki/")
|
|||
<Tree heading="Personal Wiki" pages={pages} headings={headings} />
|
||||
</aside>
|
||||
|
||||
<article class="wiki-article">
|
||||
<article class:list={classlist}>
|
||||
<heading class="markdown" >
|
||||
<h1 id="top">{frontmatter?.title}</h1>
|
||||
<h1 id="top">{title}</h1>
|
||||
</heading>
|
||||
<section class="wiki-article__markdown markdown">
|
||||
<slot />
|
||||
|
|
|
@ -102,4 +102,14 @@ $bp-l: 80rem;
|
|||
&__markdown {
|
||||
max-width: calc(100vw - 2em);
|
||||
}
|
||||
|
||||
&.has-icon {
|
||||
background-position: top right;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20% auto;
|
||||
|
||||
&.icon-haskell {
|
||||
background-image: url("/static/sketch/haskell.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue