2024-06-27 04:22:58 +00:00
|
|
|
import { asset } from "../assets.ts";
|
|
|
|
import { Article } from "./article.tsx";
|
2024-06-24 16:55:39 +00:00
|
|
|
|
2024-06-24 17:31:11 +00:00
|
|
|
const Header = () => (
|
2024-06-24 16:55:39 +00:00
|
|
|
<header class="index-header">
|
|
|
|
<div style={{ flex: 1 }}>
|
|
|
|
<h1>Adædra</h1>
|
|
|
|
Software developer
|
|
|
|
<br />
|
|
|
|
Rust, Ruby, TypeScript, Linux
|
|
|
|
<br />
|
|
|
|
Paris, France
|
|
|
|
</div>
|
|
|
|
<img src={asset("cariboudev.avif")} alt="Adaedra's mascot" />
|
|
|
|
</header>
|
|
|
|
);
|
|
|
|
|
2024-06-24 17:31:11 +00:00
|
|
|
type Props = {
|
2024-06-26 02:21:31 +00:00
|
|
|
articles: Article[];
|
2024-06-24 16:55:39 +00:00
|
|
|
};
|
|
|
|
|
2024-06-24 17:31:11 +00:00
|
|
|
const Articles = ({ articles }: Props) => (
|
2024-06-24 16:55:39 +00:00
|
|
|
<>
|
|
|
|
<h2>Latest articles</h2>
|
|
|
|
<ul class="index-list">
|
2024-06-26 02:21:31 +00:00
|
|
|
{articles.map(({ slug, date, document }) => (
|
2024-06-24 16:55:39 +00:00
|
|
|
<li>
|
|
|
|
{date.toISODate()}
|
|
|
|
<a
|
|
|
|
href={`/${slug}/`}
|
|
|
|
dangerouslySetInnerHTML={{
|
2024-06-26 02:21:31 +00:00
|
|
|
__html: document.getDocumentTitle() as string,
|
2024-06-24 16:55:39 +00:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</li>
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
|
|
|
const SOCIALS: [string, string, string][] = [
|
|
|
|
["Gitea", "https://gitea.adaedra.eu", "git"],
|
2024-07-06 21:00:59 +00:00
|
|
|
["Mastodon", "https://nerdculture.de/@adaedra", "mastodon-logo"],
|
|
|
|
["LinkedIn", "https://www.linkedin.com/in/thibault-hamel/", "linkedin-logo"],
|
2024-06-24 16:55:39 +00:00
|
|
|
];
|
|
|
|
|
|
|
|
const Socials = () => (
|
|
|
|
<>
|
|
|
|
<h2>Find me elsewhere</h2>
|
|
|
|
<ul class="index-list">
|
|
|
|
{SOCIALS.map(([name, url, svgId]) => (
|
|
|
|
<li>
|
|
|
|
<a href={url} target="_blank" rel="noopener">
|
|
|
|
<svg
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
2024-07-06 21:00:59 +00:00
|
|
|
viewBox="0 0 256 256"
|
2024-06-24 16:55:39 +00:00
|
|
|
aria-label={`${name} Logo`}
|
|
|
|
>
|
|
|
|
<use href={`/logos.svg#${svgId}`} />
|
|
|
|
</svg>
|
|
|
|
{name}
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
2024-07-01 17:46:18 +00:00
|
|
|
const Footer = () => {
|
|
|
|
const Link = ({ name, url }: { name: string; url: string }) => (
|
|
|
|
<a href={url} target="_blank" rel="noopener">{name}</a>
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<footer class="index-footer">
|
|
|
|
Mascot drawn by
|
|
|
|
<Link name="CutePencilCase" url="https://linktr.ee/cutepencilcase" />
|
|
|
|
<br />
|
|
|
|
Font
|
|
|
|
<Link name="Iosevka" url="https://github.com/be5invis/Iosevka" />
|
|
|
|
• Color theme
|
|
|
|
<Link name="Gruvbox" url="https://github.com/morhetz/gruvbox-contrib" />
|
2024-07-06 21:00:59 +00:00
|
|
|
• Icons
|
|
|
|
<Link name="Phosphor" url="https://phosphoricons.com/" />
|
2024-07-01 17:46:18 +00:00
|
|
|
<br />
|
|
|
|
<Link name="Source Code" url="https://gitea.adaedra.eu/adaedra/blog" />
|
|
|
|
</footer>
|
|
|
|
);
|
|
|
|
};
|
2024-06-24 16:55:39 +00:00
|
|
|
|
2024-06-24 17:31:11 +00:00
|
|
|
export default (props: Props) => (
|
2024-06-24 16:55:39 +00:00
|
|
|
<>
|
2024-06-24 17:31:11 +00:00
|
|
|
<Header />
|
|
|
|
<Articles {...props} />
|
2024-06-24 16:55:39 +00:00
|
|
|
<Socials />
|
|
|
|
<Footer />
|
|
|
|
</>
|
|
|
|
);
|