gwen.works
this repo has no description
1---
2import LocalFileLink from "./LocalFileLink.astro";
3import Translated from "./Translated.astro";
4import WIPIndicator from "./WIPIndicator.astro";
5
6type Props = {
7 back?: string;
8 editButton?: string;
9 editFolderButton?: string;
10} & (
11 | { title: string; wip?: undefined }
12 | { title: { fr: string; en: string }; wip?: boolean }
13 | {
14 title: {
15 img: {
16 src: string;
17 alt: string;
18 srcset: string;
19 height: string;
20 width: string;
21 };
22 };
23 wip?: boolean;
24 }
25);
26
27const { title, wip, back, editButton, editFolderButton } = Astro.props;
28---
29
30<script></script>
31
32<header>
33 {
34 (editButton || back) && (
35 <section class="links">
36 {back && (
37 <a
38 class="back"
39 href={back}
40 onclick="if (history.length > 1) { event.preventDefault(); history.back(); }"
41 >
42 <- <i18n>back</i18n>
43 </a>
44 )}
45 {editButton && (
46 <LocalFileLink
47 keybind="e"
48 href={editButton}
49 openWith="vscode"
50 title="edit (if you're me only :3)"
51 text="/ed"
52 />
53 )}
54 {editFolderButton && (
55 <LocalFileLink
56 keybind="o"
57 href={editFolderButton}
58 openWith="vnd.gwennlbh.explorer"
59 title="open folder (if you're me only :3)"
60 text="/o"
61 />
62 )}
63 </section>
64 )
65 }
66
67 {
68 typeof title === "string" ? (
69 <h1 i18n>{title}</h1>
70 ) : "img" in title ? (
71 <h1 class="image">
72 <img {...title.img} />
73 </h1>
74 ) : (
75 <h1>
76 <Translated {...title} />
77 {wip && <WIPIndicator />}
78 </h1>
79 )
80 }
81
82 <slot />
83</header>
84
85<style>
86 header {
87 display: flex;
88 flex-direction: column;
89 font-size: 1.7rem;
90 max-width: 60rem;
91 }
92
93 .links {
94 /* Prevents h1 from encroaching on the links' click area */
95 z-index: 10;
96 }
97
98 h1 {
99 font-size: 2.8em;
100 text-wrap: balance;
101 line-height: 0.8;
102 margin-bottom: 0.25lh;
103 }
104
105 img {
106 max-width: 100%;
107 max-height: 10rem;
108 object-fit: contain;
109 object-position: 0 0;
110 }
111
112 a.back {
113 text-decoration: none;
114 }
115
116 section.links a:not(:last-child)::before {
117 margin-left: 0.5em;
118 }
119</style>