added content
This commit is contained in:
Nico
parent
bf2221b9a9
commit
9b91b02d90
79 changed files with 3053 additions and 284 deletions
|
|
@ -6,9 +6,9 @@ const { src, alt, width, height, ...attrs } = Astro.props;
|
|||
|
||||
<Picture
|
||||
src={src}
|
||||
widths={[320, 640, 768, attrs.width]}
|
||||
widths={[320, 640, 768]}
|
||||
aspectRatio={`${width}:${height}`}
|
||||
sizes={`(max-width: ${attrs.width}px) 100vw, ${attrs.width}px`}
|
||||
sizes={`(max-inline-size: ${width}px) 100vw, ${width}px`}
|
||||
formats={["avif", "webp"]}
|
||||
alt={alt ? alt : ""}
|
||||
{...attrs}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,30 @@
|
|||
---
|
||||
import { l } from "astro-i18n";
|
||||
import ListTags from "./ListTags.astro";
|
||||
const { item, routeName } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<div>
|
||||
<h3>
|
||||
<a class="card__link" href={`${routeName}/${item.slug}`}
|
||||
<a class="clean-link card__link" href={`${routeName}/${item.data.slug}`}
|
||||
>{item.data.title}</a
|
||||
>
|
||||
</h3>
|
||||
<pre>
|
||||
{item.slug}
|
||||
</pre>
|
||||
<!-- <h4>{item.data.subtitle}</h4> -->
|
||||
<!-- <tags-list list={item.tags}></tags-list> -->
|
||||
<h4>{item.data.subtitle}</h4>
|
||||
<ListTags list={item.data.tags} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
padding: 2.4rem 1.6rem;
|
||||
padding: var(--space-s-m) var(--space-xs-s);
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-elevation-medium);
|
||||
background-color: var(--white);
|
||||
background-color: white;
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-elevation-high);
|
||||
|
|
@ -34,14 +32,31 @@ const { item, routeName } = Astro.props;
|
|||
.card:focus-within {
|
||||
box-shadow: var(--shadow-elevation-high);
|
||||
}
|
||||
.card:hover h3::after,
|
||||
.card:focus-within h3::after {
|
||||
.card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inline-size: 30px;
|
||||
block-size: 30px;
|
||||
top: var(--space-m);
|
||||
right: var(--space-s);
|
||||
opacity: 0;
|
||||
background-image: url("/assets/svg/arrow-right.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
transform: translateX(1rem);
|
||||
}
|
||||
.card:hover::after,
|
||||
.card:focus-within::after {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
.card:hover h3,
|
||||
.card:focus-within h3 {
|
||||
color: var(--brique);
|
||||
.card:hover h3 a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.card:hover h3 a,
|
||||
.card:focus-within h3 a {
|
||||
color: var(--color-brique);
|
||||
}
|
||||
.card::before {
|
||||
content: "";
|
||||
|
|
@ -49,11 +64,11 @@ const { item, routeName } = Astro.props;
|
|||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
block-size: 100%;
|
||||
inline-size: 2px;
|
||||
transform: scaleY(0);
|
||||
transform-origin: bottom;
|
||||
background-color: var(--brique);
|
||||
background-color: var(--color-brique);
|
||||
}
|
||||
.card:hover::before,
|
||||
.card:focus-within::before {
|
||||
|
|
@ -62,20 +77,18 @@ const { item, routeName } = Astro.props;
|
|||
}
|
||||
|
||||
h3 {
|
||||
padding-right: 3rem;
|
||||
position: relative;
|
||||
font-size: clamp(2.4rem, 2.2222rem + 0.5556vw, 2.8rem);
|
||||
padding-inline-end: var(--space-s-m);
|
||||
font-size: var(--size-2);
|
||||
font-weight: bold;
|
||||
text-transform: none;
|
||||
}
|
||||
h3::after {
|
||||
content: url("~assets/svg/arrow-right.svg");
|
||||
.card__link {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
.card__link::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(1rem);
|
||||
inset: 0;
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.card {
|
||||
|
|
@ -84,33 +97,33 @@ const { item, routeName } = Astro.props;
|
|||
.card::before {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
h3 {
|
||||
transition: color ease 0.2s;
|
||||
}
|
||||
h3::after {
|
||||
.card::after {
|
||||
transition: opacity ease 0.2s, transform ease 0.2s;
|
||||
}
|
||||
h3 a {
|
||||
transition: color ease 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
.card h4 {
|
||||
margin-top: 0.8rem;
|
||||
font-size: 2rem;
|
||||
margin-block-start: var(--space-2xs);
|
||||
font-size: var(--size-0);
|
||||
font-weight: 500;
|
||||
color: var(--darkBlue);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
/* @media screen and (min-width: 768px) {
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.8rem;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: var(--space-2xs);
|
||||
}
|
||||
.card {
|
||||
padding: 3.2rem 2.4rem;
|
||||
padding: var(--space-xs-s) var(--space-2xs-xs);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1060px) {
|
||||
.card {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
const { title, url } = Astro.props;
|
||||
---
|
||||
|
||||
<a href={url}>{title}</a>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
---
|
||||
import MetaDate from "./MetaDate.astro";
|
||||
import TOC from "./TOC.astro";
|
||||
|
||||
const { content } = Astro.props;
|
||||
|
|
@ -7,13 +8,18 @@ const { Content, headings } = await content.render();
|
|||
const toc = headings.map((heading) => {
|
||||
return heading;
|
||||
});
|
||||
|
||||
if (content.data.code) {
|
||||
import "../styles/vendor/one-dark-pro.css";
|
||||
}
|
||||
---
|
||||
|
||||
<div class="sidebar region">
|
||||
<TOC toc={toc} />
|
||||
<article class="flow editorial">
|
||||
<h1>{content.data.title}</h1>
|
||||
<p class="h2">{content.data.subtitle}</p>
|
||||
<p class="h3">{content.data.subtitle}</p>
|
||||
<MetaDate item={content.data} />
|
||||
<div class="flow content">
|
||||
<Content />
|
||||
</div>
|
||||
|
|
@ -21,6 +27,15 @@ const toc = headings.map((heading) => {
|
|||
</div>
|
||||
|
||||
<style>
|
||||
.sidebar {
|
||||
--gutter: var(--space-xs-m);
|
||||
}
|
||||
.sidebar > :global(:first-child) {
|
||||
--sidebar-target-width: 16rem;
|
||||
}
|
||||
.sidebar > :global(:last-child) {
|
||||
--sidebar-content-min-width: 60%;
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--size-4);
|
||||
}
|
||||
|
|
@ -29,4 +44,9 @@ const toc = headings.map((heading) => {
|
|||
font-size: var(--size-3);
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
.editorial :global(img),
|
||||
.editorial :global(picture) {
|
||||
margin: var(--space-s-m) 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
38
src/components/Footer.astro
Normal file
38
src/components/Footer.astro
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
import { l, t } from "astro-i18n";
|
||||
---
|
||||
|
||||
<footer class="footer" role="contentinfo">
|
||||
<section class="flow">
|
||||
<p>Nicolas Arduin</p>
|
||||
<p>{t("tagline")}</p>
|
||||
<ul class="flow" role="list">
|
||||
<li>
|
||||
<a href="mailto:contact@nardu.in" title={t("contact.email")}
|
||||
>contact@nardu.in</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="tel:+33749464239" title={t("contact.tel")}>+337 49 46 42 39</a>
|
||||
</li>
|
||||
<li><a href={l("/plan-du-site")}>{t("sitemap")}</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
--flow-space: var(--space-xs-s);
|
||||
inline-size: 100%;
|
||||
margin: 0 auto;
|
||||
margin-block-start: var(--space-m-l);
|
||||
padding: var(--space-s-m);
|
||||
text-align: center;
|
||||
border-top: solid 2px var(--color-dark-blue);
|
||||
}
|
||||
|
||||
.footer a {
|
||||
font-weight: 500;
|
||||
color: var(--color-blue);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -37,8 +37,8 @@ import Navigation from "../components/Navigation.astro";
|
|||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
block-size: 1px;
|
||||
inline-size: 1px;
|
||||
-webkit-clip: rect(0 0 0 0);
|
||||
clip: rect(0 0 0 0);
|
||||
overflow: hidden;
|
||||
|
|
@ -50,8 +50,8 @@ import Navigation from "../components/Navigation.astro";
|
|||
-webkit-clip: auto;
|
||||
clip: auto;
|
||||
overflow: visible;
|
||||
width: auto;
|
||||
height: auto;
|
||||
inline-size: auto;
|
||||
block-size: auto;
|
||||
}
|
||||
.logo {
|
||||
font-size: var(--size-1);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const { list, routeName } = Astro.props;
|
|||
import CardEditorial from "./CardEditorial.astro";
|
||||
---
|
||||
|
||||
<ul role="list">
|
||||
<ul class="list" role="list">
|
||||
{
|
||||
list.map((item) => (
|
||||
<li class="list__item">
|
||||
|
|
@ -13,3 +13,14 @@ import CardEditorial from "./CardEditorial.astro";
|
|||
))
|
||||
}
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
|
||||
gap: var(--space-m-l);
|
||||
}
|
||||
.list > * {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
25
src/components/ListTags.astro
Normal file
25
src/components/ListTags.astro
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
---
|
||||
const { list } = Astro.props;
|
||||
---
|
||||
|
||||
<ul class="tags-list" role="list">
|
||||
{
|
||||
list.map((tag, index) => (
|
||||
<li>
|
||||
{tag}{index + 1 < list.length && <span>, </span>}
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
.tags-list {
|
||||
margin: var(--space-2xs) 0;
|
||||
}
|
||||
.tags-list li {
|
||||
display: inline;
|
||||
font-size: var(--size--1);
|
||||
font-weight: 500;
|
||||
color: var(--color-blue);
|
||||
}
|
||||
</style>
|
||||
44
src/components/MetaDate.astro
Normal file
44
src/components/MetaDate.astro
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
---
|
||||
import { t, astroI18n } from "astro-i18n";
|
||||
astroI18n.init(Astro);
|
||||
|
||||
const { item } = Astro.props;
|
||||
|
||||
function formatDate(date) {
|
||||
const options = { year: "numeric", month: "long", day: "numeric" };
|
||||
return new Date(date).toLocaleDateString(astroI18n.langCode, options);
|
||||
}
|
||||
|
||||
// Needed because browser will transform the value to a readable english date in 'datetime' if not forced
|
||||
// see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#attr-datetime for valid formats
|
||||
function rawDate(date) {
|
||||
return new Date(date).toISOString();
|
||||
}
|
||||
---
|
||||
|
||||
<div class="meta">
|
||||
<p class="meta__date">
|
||||
{t("meta.publication")} :
|
||||
<time datetime={rawDate(item.createdAt)}>{formatDate(item.createdAt)}</time>
|
||||
</p>
|
||||
{
|
||||
formatDate(item.createdAt) != formatDate(item.updatedAt) &&
|
||||
!!item.updatedAt && (
|
||||
<p class="meta__date">
|
||||
{t("meta.modification")} :
|
||||
<time datetime={rawDate(item.createdAt)}>
|
||||
{formatDate(item.updatedAt)}
|
||||
</time>
|
||||
</p>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.meta {
|
||||
font-size: var(--size--1);
|
||||
}
|
||||
.meta__date {
|
||||
margin: var(--space-3xs) 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,7 +16,9 @@ import LanguageSwitcher from "./LangSwitcher.astro";
|
|||
<span aria-hidden="true">·</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href={l("/")} class="clean-link nice-link">{t("fragments.titre")}</a>
|
||||
<a href={l("/fragments")} class="clean-link nice-link"
|
||||
>{t("fragments.titre")}</a
|
||||
>
|
||||
<span aria-hidden="true">·</span>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -39,4 +41,7 @@ import LanguageSwitcher from "./LangSwitcher.astro";
|
|||
gap: var(--space-2xs);
|
||||
justify-content: center;
|
||||
}
|
||||
.main-nav a {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@ 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">
|
||||
<summary>{t("index.toc")}</summary>
|
||||
<nav role="navigation" aria-label={t("index.toc")}>
|
||||
<ol class="table-of-content__list" role="list">
|
||||
{
|
||||
// loop over the toc
|
||||
toc.map((heading) =>
|
||||
|
|
@ -18,19 +18,19 @@ const { toc } = Astro.props;
|
|||
{heading.text}
|
||||
</a>
|
||||
</li>
|
||||
) : // if h3, set as inner ul > li
|
||||
) : // if h3, set as inner ol > li
|
||||
heading.depth === 3 ? (
|
||||
<ul role="list">
|
||||
<ol role="list">
|
||||
<li>
|
||||
<a href={`#${heading.slug}`} class="toc-3">
|
||||
{heading.text}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</ol>
|
||||
) : null
|
||||
)
|
||||
}
|
||||
</ul>
|
||||
</ol>
|
||||
</nav>
|
||||
</details>
|
||||
</aside>
|
||||
|
|
@ -48,8 +48,16 @@ const { toc } = Astro.props;
|
|||
position: sticky;
|
||||
top: var(--space-m);
|
||||
}
|
||||
summary {
|
||||
padding: var(--space-2xs-xs);
|
||||
font-size: var(--size-0);
|
||||
font-weight: 500;
|
||||
background-color: var(--color-soft-blue);
|
||||
}
|
||||
.table-of-content__list {
|
||||
padding-bottom: 2rem;
|
||||
padding: 0 var(--space-2xs);
|
||||
padding-block-end: var(--space-2xs);
|
||||
border: 2px solid var(--color-soft-blue);
|
||||
}
|
||||
.table-of-content__list a {
|
||||
position: relative;
|
||||
|
|
@ -64,7 +72,7 @@ const { toc } = Astro.props;
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(-1rem, 0);
|
||||
transform: translate(-6px, 0);
|
||||
color: var(--color-grey);
|
||||
}
|
||||
.table-of-content__list a:visited::before {
|
||||
|
|
@ -80,7 +88,7 @@ const { toc } = Astro.props;
|
|||
margin: 0.8rem 0 0.3rem;
|
||||
}
|
||||
.toc-3 {
|
||||
margin-left: 1rem;
|
||||
margin-top: 0.4rem;
|
||||
margin-inline-start: 1rem;
|
||||
margin-block-start: 0.4rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue