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

new HP design + content, new references, fixed styles, fixed i18n

Browse source
This commit is contained in:
Nico 2023-07-20 15:35:04 +02:00
parent 407cdf9099
commit 3ff4ad3b17
64 changed files with 445 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/components/CardEditorial.astro
View file

@ -9,35 +9,33 @@ const isReference = routeName === t("references.slug");
---
<div class:list={["card", { "card--link": !isReference }]}>
<div>
<h3>
{
!isReference ? (
<a
class="clean-link card__link"
href={`${l(`/${routeName}`)}/${item.slug}`}
>
{item.data.title}
</a>
) : (
<span>{item.data.title}</span>
)
}
</h3>
<h4>{item.data.subtitle}</h4>
<ListTags list={item.data.tags} />
<h3>
{
isReference && (
<a href={item.data.url} rel="noopener noreferer">
{t("references.cta")}
<span class="sr-only"> {item.data.title}</span>
!isReference ? (
<a
class="clean-link card__link"
href={`${l(`/${routeName}`)}/${item.data.permalink}`}
>
{item.data.title}
</a>
) : (
<span>{item.data.title}</span>
)
}
</div>
</h3>
<h4>{item.data.subtitle}</h4>
<ListTags list={item.data.tags} />
{
isReference && (
<a href={item.data.url} rel="noopener noreferer">
{t("references.cta")}
<span class="sr-only"> {item.data.title}</span>
</a>
)
}
</div>
<style scoped>
<style define:vars={{ permalink: item.data.permalink }}>
.card {
padding: var(--space-s-m) var(--space-xs-s);
position: relative;
@ -125,6 +123,9 @@ const isReference = routeName === t("references.slug");
.card::after {
transition: opacity ease 0.2s, transform ease 0.2s;
}
.card--link {
view-transition-name: var(--permalink);
}
h3 a {
transition: color ease 0.2s;
}

22
src/components/EditorialContent.astro
View file

@ -1,19 +1,17 @@
---
import { renderContent } from "astro-i18n";
// import { renderContent } from "astro-i18n";
import MetaDate from "./MetaDate.astro";
import TOC from "./TOC.astro";
const { content } = Astro.props;
// const { Content, headings } = await content.render();
const { html, headings } = await renderContent(Astro, content);
const { Content, headings } = await content.render();
// const { html, headings } = await renderContent(Astro, content);
const toc = headings.map((heading) => {
return heading;
});
if (content.data.code) {
import "../styles/vendor/one-dark-pro.css";
}
import "../styles/vendor/one-dark-pro.css";
---
<div class="sidebar region">
@ -22,13 +20,17 @@ if (content.data.code) {
<h1>{content.data.title}</h1>
<p class="h3">{content.data.subtitle}</p>
<MetaDate item={content.data} />
<div class="flow content" set:html={html}>
<!-- <Content /> -->
</div>
<!-- <div class="flow content" set:html={html}> -->
<Content />
</article>
</div>
<style>
<style define:vars={{ permalink: content.data.permalink }}>
@media (prefers-reduced-motion: no-preference) {
article {
view-transition-name: var(--permalink);
}
}
.sidebar {
--gutter: var(--space-xs-m);
}

17
src/components/Head.astro Normal file
View file

@ -0,0 +1,17 @@
---
import { t } from "astro-i18n";
const { pageTitle } = Astro.props;
---
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{pageTitle} - Nicolas Arduin</title>
<meta name="description" content={t("seo.meta.description")} />
<meta name="robots" content="index,follow." />
<meta name="author" content="Nicolas Arduin" />
<meta name="subject" content="Développement de sites web, accessibilité." />
<meta name="view-transition" content="same-origin" />
</head>

2
src/components/QuickAccessCard.astro
View file

@ -34,7 +34,7 @@ const { item } = Astro.props;
text-align: center;
gap: var(--space-xs);
cursor: pointer;
background-color: var(--color-light-blue);
background-color: var(--color-white);
transform: translateY(0);
}
.card:focus-within {