Nicolas/website-astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added TOC and editorial content

Browse source
This commit is contained in:
Nico 2022-12-26 23:15:27 +01:00
parent 346c154259
commit bf2221b9a9
25 changed files with 363 additions and 275 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/CardEditorial.astro
View file

@ -1,15 +1,19 @@
---
import { l } from "astro-i18n";
const { item, routeName } = Astro.props;
---
<div class="card">
<div>
<h3>
<a class="card__link" href={`${routeName}/${item.frontmatter.slug}`}
>{item.frontmatter.title}</a
<a class="card__link" href={`${routeName}/${item.slug}`}
>{item.data.title}</a
>
</h3>
<h4>{item.frontmatter.subtitle}</h4>
<pre>
{item.slug}
</pre>
<!-- <h4>{item.data.subtitle}</h4> -->
<!-- <tags-list list={item.tags}></tags-list> -->
</div>
</div>

32
src/components/EditorialContent.astro Normal file
View file

@ -0,0 +1,32 @@
---
import TOC from "./TOC.astro";
const { content } = Astro.props;
const { Content, headings } = await content.render();
const toc = headings.map((heading) => {
return heading;
});
---
<div class="sidebar region">
<TOC toc={toc} />
<article class="flow editorial">
<h1>{content.data.title}</h1>
<p class="h2">{content.data.subtitle}</p>
<div class="flow content">
<Content />
</div>
</article>
</div>
<style>
h1 {
font-size: var(--size-4);
}
.editorial :global(h2),
.editorial :global(.h2) {
font-size: var(--size-3);
color: var(--color-blue);
}
</style>

9
src/components/Header.astro
View file

@ -7,7 +7,9 @@ import Navigation from "../components/Navigation.astro";
<header role="banner">
<a href="#skip-content" class="skip-link"> {t("header.skipLink")}</a>
<div class="container">
<a href={l("/")} class="logo" aria-label={t("header.homeLink")}>nardu.in</a>
<a href={l("/")} class="logo clean-link" aria-label={t("header.homeLink")}
>nardu.in</a
>
<Navigation />
</div>
</header>
@ -31,11 +33,6 @@ import Navigation from "../components/Navigation.astro";
justify-content: space-between;
}
}
:global(a) {
color: var(--color-dark);
font-weight: normal;
text-decoration: none;
}
.skip-link {
position: absolute;
top: 20px;

7
src/components/LangSwitcher.astro
View file

@ -14,7 +14,12 @@ const currentRoute = Astro.url.pathname;
// create a list of available alternative locale
availableLocales.map((locale) => (
<li>
<a href={l(currentRoute as any, {}, locale as any)}>{locale}</a>
<a
href={l(currentRoute as any, {}, locale as any)}
class="clean-link nice-link"
>
{locale}
</a>
</li>
))
}

19
src/components/Navigation.astro
View file

@ -6,25 +6,25 @@ import LanguageSwitcher from "./LangSwitcher.astro";
<nav role="navigation" aria-label={t("header.mainNav")}>
<ul class="main-nav" role="list">
<li>
<a href={l("/articles")}>{t("article.titre")}</a>
<a href={l("/articles")} class="clean-link nice-link"
>{t("article.titre")}</a
>
<span aria-hidden="true">&middot;</span>
</li>
<li>
<a href={l("/")}>{t("projet.titre")}</a>
<a href={l("/")} class="clean-link nice-link">{t("projet.titre")}</a>
<span aria-hidden="true">&middot;</span>
</li>
<li>
<a href={}>{t("fragments.titre")}</a>
<a href={l("/")} class="clean-link nice-link">{t("fragments.titre")}</a>
<span aria-hidden="true">&middot;</span>
</li>
<li>
<a
href="mailto:contact@nardu.in"
class="nice-link"
title={t("contact.email")}
>{t("contact.title")}
</a>
<span aria-hidden="true">&#x7C;</span>
class="clean-link nice-link"
title={t("contact.email")}>{t("contact.title")}</a
><span aria-hidden="true">&nbsp;&#x7C;</span>
</li>
<li>
<LanguageSwitcher />
@ -39,7 +39,4 @@ import LanguageSwitcher from "./LangSwitcher.astro";
gap: var(--space-2xs);
justify-content: center;
}
a {
text-decoration: none;
}
</style>

86
src/components/TOC.astro Normal file
View file

@ -0,0 +1,86 @@
---
import { t } from "astro-i18n";
const { toc } = Astro.props;
---
<aside class="table-of-content">
<details open="true">
<summary>{t("toc")}</summary>
<nav role="navigation" aria-label={t("toc")}>
<ul class="table-of-content__list" role="list">
{
// loop over the toc
toc.map((heading) =>
// if h2, set as a li
heading.depth === 2 ? (
<li>
<a href={`#${heading.slug}`} class="toc-2">
{heading.text}
</a>
</li>
) : // if h3, set as inner ul > li
heading.depth === 3 ? (
<ul role="list">
<li>
<a href={`#${heading.slug}`} class="toc-3">
{heading.text}
</a>
</li>
</ul>
) : null
)
}
</ul>
</nav>
</details>
</aside>
<style>
/* Table of content */
.table-of-content {
margin: 0;
padding: 0;
position: relative;
display: block;
font-size: var(--size--1);
}
.table-of-content details {
position: sticky;
top: var(--space-m);
}
.table-of-content__list {
padding-bottom: 2rem;
}
.table-of-content__list a {
position: relative;
display: inline-block;
font-weight: normal;
color: var(--color-grey);
text-decoration: none;
}
.table-of-content__list a::before {
content: "·";
position: absolute;
top: 0;
left: 0;
transform: translate(-1rem, 0);
color: var(--color-grey);
}
.table-of-content__list a:visited::before {
color: white;
}
.table-of-content__list a:focus,
.table-of-content__list a:hover {
color: var(--color-violet);
text-decoration: underline;
}
.toc-2 {
margin: 0.8rem 0 0.3rem;
}
.toc-3 {
margin-left: 1rem;
margin-top: 0.4rem;
}
</style>