Skip to content

Commit 466dfce

Browse files
carsakillercarsakiller
committed
refactor: new layout for wiki articles
1 parent f64a89a commit 466dfce

File tree

3 files changed

+118
-118
lines changed

3 files changed

+118
-118
lines changed

‎src/components/common/Time.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
const { datetime, relative } = Astro.props;
33
44
export interface Props {
5-
datetime: string;
5+
datetime?: string;
66
relative?: boolean;
77
}
88
---

‎src/layouts/WikiArticle.astro‎

Lines changed: 116 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ import Remark from "~/components/common/Remark.astro";
88
import Footer from "~/components/layout/Footer.astro";
99
import type { MarkdownHeading } from "astro";
1010
import path from "path";
11+
import dayjs from "~/services/time";
12+
import Tooltip from "~/components/common/Tooltip.astro";
13+
import Time from "~/components/common/Time.astro";
1114
1215
const articles = await getCollection("wiki");
1316
@@ -18,15 +21,20 @@ export const getStaticPaths = async () => {
1821
});
1922
};
2023
21-
const { article, headings } = Astro.props;
24+
const { article, headings, lastModified } = Astro.props;
2225
2326
const titleSlug = article.data.title.toLowerCase().replaceAll(" ", "-");
2427
const hereSlug = path.basename(Astro.url.pathname);
2528
2629
export interface Props {
2730
article: CollectionEntry<"wiki">;
2831
headings: MarkdownHeading[];
32+
lastModified: string;
2933
}
34+
35+
const modifiedTime = lastModified
36+
? dayjs(lastModified).utc().format("HH:mm:ss D MMMM, YYYY UTC")
37+
: "Not committed yet";
3038
---
3139

3240
<Layout title="Wiki" transition={true} displayFooter={false}>
@@ -68,37 +76,53 @@ export interface Props {
6876
<div class="center">
6977
<main>
7078
<article>
79+
<div class="title" id={article.id}>
80+
<div class="topbar">
81+
<div class="modified">
82+
<Tooltip content={modifiedTime} placement="bottom">
83+
<Icon name="clock-rotate-left" group="solid" />
84+
<Time datetime={article.data.lastModified}
85+
>{modifiedTime}</Time
86+
>
87+
</Tooltip>
88+
</div>
89+
<div class="options">
90+
<Tooltip content="Edit page" placement="bottom">
91+
<a
92+
class="edit-page"
93+
target="_blank"
94+
href={`https://github.com/LuaLS/LuaLS.github.io/tree/main/src/content/wiki/${article.id}.mdx`}
95+
>
96+
<Icon name="pencil" group="solid" />
97+
</a>
98+
</Tooltip>
99+
<Tooltip content="Report issue with page" placement="bottom">
100+
<a
101+
class="open-issue"
102+
target="_blank"
103+
href={`https://github.com/LuaLS/LuaLS.github.io/issues/new?title=${encodeURIComponent(
104+
`Issue with wiki page "${article.id}"`
105+
)}`}
106+
>
107+
<Icon name="circle-exclamation" group="solid" />
108+
</a>
109+
</Tooltip>
110+
</div>
111+
</div>
112+
<h1 id={titleSlug}>{article.data.title}</h1>
113+
<p>{article.data.description}</p>
114+
</div>
71115
{
72116
article.data.incomplete && (
73117
<Remark type="WIP" display="compact">
74118
<p>This article is incomplete and info may be missing.</p>
75119
</Remark>
76120
)
77121
}
78-
<div class="article-metadata">
79-
<h1 id={titleSlug}>{article.data.title}</h1>
80-
<p>{article.data.description}</p>
122+
<div class="content">
123+
<slot />
81124
</div>
82-
<slot />
83125
</article>
84-
<div class="article-footer-links">
85-
<a
86-
class="edit-page"
87-
target="_blank"
88-
href={`https://github.com/LuaLS/LuaLS.github.io/tree/main/src/content/wiki/${article.id}.mdx`}
89-
>
90-
<Icon name="pencil" group="solid" /> Edit this page
91-
</a>
92-
<a
93-
class="open-issue"
94-
target="_blank"
95-
href={`https://github.com/LuaLS/LuaLS.github.io/issues/new?title=${encodeURIComponent(
96-
`Issue with wiki page "${article.id}"`
97-
)}`}
98-
>
99-
<Icon name="circle-dot" group="solid" /> Open Issue
100-
</a>
101-
</div>
102126
</main>
103127
<Footer />
104128
</div>
@@ -161,7 +185,6 @@ export interface Props {
161185
init = false;
162186

163187
// Flush debounced outline scroll functions when scrollend is fired (if browser supports it)
164-
document.addEventListener("scrollend", () => scrollOutline.flush());
165188
centerColumn.addEventListener("scrollend", () => scrollOutline.flush());
166189
}
167190

@@ -170,7 +193,7 @@ export interface Props {
170193
behavior: smooth === false ? "instant" : "smooth",
171194
});
172195
},
173-
200,
196+
50,
174197
{ leading: false, trailing: true }
175198
);
176199

@@ -192,7 +215,7 @@ export interface Props {
192215

193216
// Watch headings for intersections
194217
utils
195-
.assertElements("article .heading,.article-metadata h1")
218+
.assertElements("article .heading,.title h1")
196219
.forEach((heading) => intersectionObserver.observe(heading));
197220

198221
// Watch for article scrolling to scroll outline
@@ -208,45 +231,25 @@ export interface Props {
208231
</script>
209232

210233
<style lang="scss">
234+
$fade-height: 5vh;
235+
$header-height: 3.5em;
236+
211237
html {
212238
scroll-behavior: smooth;
213239
overscroll-behavior-block: none;
214240
}
215241

216-
.article-footer-links {
217-
margin: 1em auto;
218-
display: flex;
219-
justify-content: center;
220-
gap: 1em;
221-
222-
a {
223-
display: inline-block;
224-
box-sizing: border-box;
225-
padding: 0.15em 0.5em;
226-
border-radius: 0.33em;
227-
color: white;
228-
229-
:global(i) {
230-
margin-right: 0.25em;
231-
}
232-
233-
&.edit-page {
234-
background-color: #1e5c97;
235-
}
236-
&.open-issue {
237-
background-color: #008a2c;
238-
}
239-
}
240-
}
241-
242242
aside.sidebar {
243+
--sidebar-padding: 0.5em;
243244
--sidebar-width: 20em;
245+
244246
background-color: #081f34;
245247
position: fixed;
246-
padding-bottom: 1em;
247-
top: 3.5em;
248-
width: var(--sidebar-width);
248+
top: $header-height;
249+
width: calc(var(--sidebar-width) - var(--sidebar-padding) * 2);
250+
padding: 0px var(--sidebar-padding) 1em var(--sidebar-padding);
249251
z-index: 25;
252+
height: calc(100% - 1em);
250253

251254
h2 {
252255
margin: 0.4em 0px 0.1em 0px;
@@ -263,6 +266,7 @@ export interface Props {
263266
}
264267

265268
button.open {
269+
top: 5em;
266270
position: fixed;
267271
background-color: #0e3e6b;
268272
padding: 0.25em 0.5em;
@@ -310,7 +314,6 @@ export interface Props {
310314

311315
button.open {
312316
left: 0px;
313-
top: 4em;
314317
border-radius: 0px 0.5em 0.5em 0px;
315318
transition: left ease-in-out 0.5s;
316319
}
@@ -319,7 +322,7 @@ export interface Props {
319322
left: 0px;
320323

321324
button.open {
322-
left: -2.2em;
325+
left: -2.3em;
323326
}
324327
}
325328

@@ -341,7 +344,6 @@ export interface Props {
341344

342345
button.open {
343346
right: 0px;
344-
top: 4em;
345347
border-radius: 0.5em 0px 0px 0.5em;
346348
transition: right ease-in-out 0.5s;
347349
}
@@ -350,7 +352,7 @@ export interface Props {
350352
right: 0px;
351353

352354
button.open {
353-
right: -2.2em;
355+
right: -2.3em;
354356
}
355357
}
356358

@@ -390,18 +392,62 @@ export interface Props {
390392
}
391393
}
392394

393-
article {
394-
padding: 1em 4em;
395+
div.columns,
396+
div.columns > div.center {
397+
height: 100%;
398+
}
395399

396-
div.article-metadata {
400+
div.columns > div.center {
401+
display: flex;
402+
flex-direction: column;
403+
justify-content: space-between;
404+
}
405+
406+
article {
407+
div.title {
397408
text-align: center;
409+
background-color: #071521;
410+
display: block;
411+
z-index: 5;
412+
padding: 0px 0.5em 0.5em 0.5em;
413+
398414
h1 {
399-
margin-bottom: 0px;
415+
margin: 0px;
400416
}
401417
p {
402-
margin: 0px 0px 3em 0px;
418+
margin: 0px 0px 1em 0px;
403419
color: #ffffffaa;
404420
}
421+
422+
div.topbar {
423+
display: flex;
424+
align-items: center;
425+
justify-content: space-between;
426+
padding: 0.6em 0.25em 0em 0.25em;
427+
}
428+
429+
div.modified {
430+
font-size: 0.8em;
431+
color: #ffffff80;
432+
}
433+
434+
div.options {
435+
z-index: 5;
436+
display: flex;
437+
justify-content: center;
438+
gap: 1em;
439+
440+
a {
441+
display: inline-block;
442+
box-sizing: border-box;
443+
border-radius: 0.33em;
444+
color: #ffffff80;
445+
}
446+
}
447+
}
448+
449+
div.content {
450+
padding: 1em 3em 4em 3em;
405451
}
406452

407453
:global(img) {
@@ -444,23 +490,9 @@ export interface Props {
444490
}
445491
}
446492

447-
:global(div.modified-timestamp) {
448-
text-align: center;
449-
margin: 3em auto 0px auto;
450-
451-
:global(p) {
452-
opacity: 0.6;
453-
margin: 0px;
454-
}
455-
}
456-
457493
@media screen and (min-width: 1600px) {
458-
html {
459-
max-height: 100%;
460-
overflow-y: hidden;
461-
}
462-
.columns {
463-
height: calc(100% - 3.5em);
494+
div.columns {
495+
height: calc(100% - $header-height);
464496
display: grid;
465497
grid-template-columns: 20% 60% 20%;
466498
grid-template-rows: 100%;
@@ -482,41 +514,28 @@ export interface Props {
482514
aside.sidebar {
483515
position: static;
484516
z-index: 0;
485-
width: 100%;
517+
width: calc(100% - var(--sidebar-padding) * 2);
486518

487519
button.open,
488520
button.close {
489521
display: none;
490522
}
491523

492524
.content {
493-
max-height: calc(100% - 3.5em);
525+
max-height: calc(100% - $header-height);
494526
}
495527
}
496528
}
497529

498530
@media screen and (max-width: 800px) {
499-
aside.sidebar {
500-
--sidebar-width: 70%;
501-
}
502-
503-
article {
531+
article > div.content {
504532
padding: 1em 1.5em;
505533
}
506534
}
507535

508536
@media screen and (max-width: 400px) {
509-
article {
537+
article > div.content {
510538
padding: 1em;
511539
}
512540
}
513-
514-
article > div.metadata h1 {
515-
font-family: "Prompt";
516-
margin: 0.25em auto 0.25em auto;
517-
}
518-
article > div.metadata p {
519-
margin: 0px auto 3em auto;
520-
text-align: center;
521-
}
522541
</style>

0 commit comments

Comments
 (0)