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