From 4783b5edee9dd8164498a8f26db3869bf9175ad2 Mon Sep 17 00:00:00 2001
From: carsakiller <carsakiller@gmail.com>
Date: Mon, 15 Jul 2024 15:56:48 +0000
Subject: [PATCH 1/4] refactor: refresh wiki index page
---
src/content/wiki/faq.mdx | 1 -
src/pages/wiki/index.astro | 215 +++++++++++++++++++++++++++----------
src/scss/main.scss | 1 +
3 files changed, 157 insertions(+), 60 deletions(-)
diff --git a/src/content/wiki/faq.mdx b/src/content/wiki/faq.mdx
index bb0d560..6e9cfdd 100644
--- a/src/content/wiki/faq.mdx
+++ b/src/content/wiki/faq.mdx
@@ -1,7 +1,6 @@
---
title: FAQ
description: Answers for frequently asked questions
-getting-started: true
---
import Accordion from "~/components/common/Accordion.astro";
diff --git a/src/pages/wiki/index.astro b/src/pages/wiki/index.astro
index 88925e2..3796b1b 100644
--- a/src/pages/wiki/index.astro
+++ b/src/pages/wiki/index.astro
@@ -20,6 +20,11 @@ await Promise.all(
})
)
);
+const articleCount = allWikiArticles.length;
+const wordCount = allWikiArticles.reduce(
+ (x, article) => x + Array.from(article.body.matchAll(/\w+/g)).length,
+ 0
+);
const gettingStartedArticles = allWikiArticles.filter(
(article) => article.data["getting-started"] === true
);
@@ -73,7 +78,19 @@ if (!contributors) {
<Layout title="Wiki">
<main>
- <h1>Welcome to the wiki!</h1>
+ <h1>Welcome To The Wiki!</h1>
+ <div id="quick-links">
+ <a href="/#install">
+ <Icon name="download" group="solid" class="icon" />
+ <h2>Install</h2>
+ <p>Install instructions for the Lua Language Server.</p>
+ </a>
+ <a href="/wiki/faq/">
+ <Icon name="question" group="solid" class="icon" />
+ <h2>FAQ</h2>
+ <p>Frequently asked questions and answers to them.</p>
+ </a>
+ </div>
<div class="grid">
<section id="get-started">
<h2>Get Started</h2>
@@ -81,12 +98,6 @@ if (!contributors) {
Below are some good articles for those new to the Lua Language Server
</p>
<div class="grid">
- <div class="article">
- <a href="/#install" target="_blank">
- Install
- <p>Installation instructions</p>
- </a>
- </div>
{
gettingStartedArticles.map((article) => (
<div class="article">
@@ -99,6 +110,46 @@ if (!contributors) {
}
</div>
</section>
+ <section id="all-articles">
+ <h2>All Wiki Articles</h2>
+ <div class="subtitle">
+ <p class="tip">
+ <i
+ ><b>Tip:</b> You can press <code>/</code> to search the wiki</i
+ >
+ </p>
+ <div class="sorts">
+ <Tooltip content="Sort Method">
+ <Icon group="solid" name="sort" />
+ </Tooltip>
+ <select name="sort" id="sort">
+ <option value="alphabetical">A-Z</option>
+ <option value="last-modified">Last Modified</option>
+ <option value="length">Length</option>
+ </select>
+ </div>
+ </div>
+ <div class="grid">
+ {
+ allWikiArticles.map((article) => (
+ <div
+ class="article"
+ data-last-modified={article.data.lastModified}
+ data-length={article.body.length}
+ >
+ <a href={`/wiki/${article.slug}/`}>
+ <div class="name">{article.data.title}</div>
+ <p class="description">{article.data.description}</p>
+ </a>
+ </div>
+ ))
+ }
+ </div>
+ <div class="stats">
+ <span><b>{articleCount}</b> Articles</span>
+ <span><b>{wordCount}</b> Words</span>
+ </div>
+ </section>
<section id="contributors">
<h2>Top Contributors</h2>
<p>
@@ -107,12 +158,6 @@ if (!contributors) {
group="solid"
color="red"
/>
- <br />
- <ExternalLink
- url="https://github.com/LuaLS/LuaLS.github.io/blob/main/docs/CONTRIBUTING.md"
- >
- Contribute today!
- </ExternalLink>
</p>
<div class="grid">
{
@@ -143,35 +188,13 @@ if (!contributors) {
))
}
</div>
- </section>
- <section id="all-articles">
- <h2>All Wiki Articles</h2>
- <div class="sorts">
- <Tooltip content="Sort Method">
- <Icon group="solid" name="sort" />
- </Tooltip>
- <select name="sort" id="sort">
- <option value="alphabetical">A-Z</option>
- <option value="last-modified">Last Modified</option>
- <option value="length">Length</option>
- </select>
- </div>
- <div class="grid">
- {
- allWikiArticles.map((article) => (
- <div
- class="article"
- data-last-modified={article.data.lastModified}
- data-length={article.body.length}
- >
- <a href={`/wiki/${article.slug}/`}>
- <div class="name">{article.data.title}</div>
- <p class="description">{article.data.description}</p>
- </a>
- </div>
- ))
- }
- </div>
+ <p>
+ <ExternalLink
+ url="https://github.com/LuaLS/LuaLS.github.io/blob/main/docs/CONTRIBUTING.md"
+ >
+ Contribute today!
+ </ExternalLink>
+ </p>
</section>
</div>
</main>
@@ -226,27 +249,71 @@ if (!contributors) {
</script>
<style lang="scss">
+ #quick-links {
+ display: flex;
+ justify-content: center;
+ gap: 5vw 5vw;
+ margin: 0px 1em;
+
+ & > a {
+ color: white;
+ border: solid #0084ff 0.1em;
+ box-shadow: #0084ff 0px 0px 0.2em 0.1em;
+ // background-color: #0d2842;
+ border-radius: 0.5em;
+ padding: 0.5em 1em;
+ gap: 0px 0.75em;
+
+ :global(.icon) {
+ font-size: 2.5em;
+ display: inline-block;
+ }
+
+ h2 {
+ display: inline-block;
+ width: fit-content;
+ margin: 0px 0px 0px 0.5em;
+ font-size: 2em;
+ }
+
+ p {
+ margin: 0px 0px;
+ }
+ }
+ }
+
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
- margin: 1em;
& > section {
- background-color: #163d62;
+ border: solid #0084ff 0.1em;
+ box-shadow: #0084ff 0px 0px 0.2em 0.1em;
padding: 1em;
border-radius: 0.5em;
h2 {
margin: 0px;
+ width: fit-content;
}
- }
- p {
- text-align: center;
+ p {
+ &:first-of-type {
+ margin: 0px 0px 1em 0px;
+ }
+ &:nth-of-type(2) {
+ text-align: center;
+ margin-bottom: 0px;
+ }
+ }
}
}
+ main > .grid {
+ margin: 2em 1em;
+ }
+
div.article {
a {
font-size: 1.3em;
@@ -263,6 +330,10 @@ if (!contributors) {
.grid {
grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
text-align: center;
+
+ p {
+ color: #ffffffcc;
+ }
}
}
@@ -333,7 +404,8 @@ if (!contributors) {
}
section#all-articles {
- grid-column: 1 / span 2;
+ grid-column: 2 / 3;
+ grid-row: 1 / 3;
.grid {
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
@@ -344,21 +416,41 @@ if (!contributors) {
flex-direction: column;
justify-content: space-between;
gap: 0.2em 0px;
+
+ p {
+ color: #ffffffcc;
+ }
}
}
- .sorts {
- width: fit-content;
- margin-left: auto;
+ .stats {
+ display: flex;
+ gap: 1em;
+ justify-content: right;
+ }
- select#sort {
- background: transparent;
- border: none;
- border-bottom: #276cae solid 0.2em;
- color: white;
+ .subtitle {
+ display: flex;
+ flex-wrap: wrap;
- option {
- color: black;
+ p.tip {
+ font-size: 0.7em;
+ opacity: 0.8;
+ margin: 0px;
+ }
+ .sorts {
+ width: fit-content;
+ margin-left: auto;
+
+ select#sort {
+ background: transparent;
+ border: none;
+ border-bottom: #276cae solid 0.2em;
+ color: white;
+
+ option {
+ color: black;
+ }
}
}
}
@@ -370,7 +462,8 @@ if (!contributors) {
}
section#all-articles {
- grid-column: 1;
+ grid-column: unset;
+ grid-row: 3 / 3;
}
}
@@ -378,5 +471,9 @@ if (!contributors) {
#contributors div.grid {
grid-template-columns: repeat(auto-fill, minmax(5em, 1fr));
}
+
+ #quick-links {
+ flex-wrap: wrap;
+ }
}
</style>
diff --git a/src/scss/main.scss b/src/scss/main.scss
index f3ccc30..4f5bcfc 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -42,6 +42,7 @@ h6 {
text-align: center;
word-wrap: break-word;
white-space: normal;
+ font-weight: 500;
}
h1 {
From 296cd0765ee59e4563afce6f78767aab79c4161e Mon Sep 17 00:00:00 2001
From: carsakiller <carsakiller@gmail.com>
Date: Mon, 15 Jul 2024 16:43:16 +0000
Subject: [PATCH 2/4] refactor: further wiki index page improvements
---
src/pages/wiki/index.astro | 27 +++++++++++++++++++++++----
1 file changed, 23 insertions(+), 4 deletions(-)
diff --git a/src/pages/wiki/index.astro b/src/pages/wiki/index.astro
index 3796b1b..3def2e3 100644
--- a/src/pages/wiki/index.astro
+++ b/src/pages/wiki/index.astro
@@ -95,7 +95,7 @@ if (!contributors) {
<section id="get-started">
<h2>Get Started</h2>
<p>
- Below are some good articles for those new to the Lua Language Server
+ Below are some good articles for those new to the Lua Language Server.
</p>
<div class="grid">
{
@@ -115,7 +115,7 @@ if (!contributors) {
<div class="subtitle">
<p class="tip">
<i
- ><b>Tip:</b> You can press <code>/</code> to search the wiki</i
+ ><b>Tip:</b> You can press <code>/</code> to search the wiki!</i
>
</p>
<div class="sorts">
@@ -192,7 +192,7 @@ if (!contributors) {
<ExternalLink
url="https://github.com/LuaLS/LuaLS.github.io/blob/main/docs/CONTRIBUTING.md"
>
- Contribute today!
+ Help Contribute To The Wiki!
</ExternalLink>
</p>
</section>
@@ -259,11 +259,15 @@ if (!contributors) {
color: white;
border: solid #0084ff 0.1em;
box-shadow: #0084ff 0px 0px 0.2em 0.1em;
- // background-color: #0d2842;
+ transition: box-shadow 0.25s ease-in-out;
border-radius: 0.5em;
padding: 0.5em 1em;
gap: 0px 0.75em;
+ &:hover {
+ box-shadow: #178fff 0px 0px 0.4em 0.3em;
+ }
+
:global(.icon) {
font-size: 2.5em;
display: inline-block;
@@ -334,6 +338,13 @@ if (!contributors) {
p {
color: #ffffffcc;
}
+
+ a {
+ transition: color 0.25s ease-in-out;
+ &:hover {
+ color: #ffb700;
+ }
+ }
}
}
@@ -420,6 +431,13 @@ if (!contributors) {
p {
color: #ffffffcc;
}
+
+ a {
+ transition: color 0.25s ease-in-out;
+ &:hover {
+ color: #ffb700;
+ }
+ }
}
}
@@ -432,6 +450,7 @@ if (!contributors) {
.subtitle {
display: flex;
flex-wrap: wrap;
+ margin-bottom: 0.5em;
p.tip {
font-size: 0.7em;
From 8073cd7fdc553ecb07c2db5fa812576ac7af048c Mon Sep 17 00:00:00 2001
From: carsakiller <carsakiller@gmail.com>
Date: Mon, 15 Jul 2024 16:44:26 +0000
Subject: [PATCH 3/4] fix: semantic markup of wiki article layout
---
src/layouts/WikiArticle.astro | 20 ++++++++++----------
1 file changed, 10 insertions(+), 10 deletions(-)
diff --git a/src/layouts/WikiArticle.astro b/src/layouts/WikiArticle.astro
index f4f3b4c..4470b3a 100644
--- a/src/layouts/WikiArticle.astro
+++ b/src/layouts/WikiArticle.astro
@@ -31,10 +31,10 @@ export interface Props {
<Layout title="Wiki" transition={true} displayFooter={false}>
<div class="columns">
- <div id="article-browser" class="sidebar">
+ <aside id="article-browser" class="sidebar">
<button class="open"><Icon name="newspaper" group="solid" /></button>
<button class="close"><Icon name="x" group="solid" /></button>
- <div class="title">Articles</div>
+ <h2 class="title">Articles</h2>
<div class="content">
<nav>
{
@@ -52,7 +52,7 @@ export interface Props {
}
</nav>
</div>
- </div>
+ </aside>
<div class="center">
<main>
<article>
@@ -90,10 +90,10 @@ export interface Props {
</main>
<Footer />
</div>
- <div id="outline" class="sidebar">
+ <aside id="outline" class="sidebar">
<button class="open"><Icon name="list" group="solid" /></button>
<button class="close"><Icon name="x" group="solid" /></button>
- <div class="title">Outline</div>
+ <h2 class="title">Outline</h2>
<nav class="content">
<ol>
<li><a href={`#${titleSlug}`}>{article.data.title}</a></li>
@@ -106,14 +106,14 @@ export interface Props {
}
</ol>
</nav>
- </div>
+ </aside>
</div>
</Layout>
<script>
import * as utils from "~/util/DOM";
- const sidebars = utils.assertElements(".sidebar");
+ const sidebars = utils.assertElements("aside.sidebar");
for (const sidebar of sidebars) {
const openButton = utils.assertElement("button.open", sidebar);
@@ -238,7 +238,7 @@ export interface Props {
}
}
- .sidebar {
+ aside.sidebar {
--sidebar-width: 20em;
background-color: #081f34;
height: 100%;
@@ -474,7 +474,7 @@ export interface Props {
display: none;
}
- .sidebar {
+ aside.sidebar {
position: static;
z-index: 0;
width: 100%;
@@ -491,7 +491,7 @@ export interface Props {
}
@media screen and (max-width: 800px) {
- .sidebar {
+ aside.sidebar {
--sidebar-width: 70%;
}
From b6d250952564718256cfea83cb3e2d494ecbbb75 Mon Sep 17 00:00:00 2001
From: carsakiller <carsakiller@gmail.com>
Date: Mon, 15 Jul 2024 16:54:19 +0000
Subject: [PATCH 4/4] add: better a11y for header icons
---
src/components/common/Icon.astro | 7 ++++---
src/components/layout/Header.astro | 6 +++---
2 files changed, 7 insertions(+), 6 deletions(-)
diff --git a/src/components/common/Icon.astro b/src/components/common/Icon.astro
index 0ed4edb..7a711fc 100644
--- a/src/components/common/Icon.astro
+++ b/src/components/common/Icon.astro
@@ -1,10 +1,10 @@
---
const { group, name, class: className, color } = Astro.props;
-const displayName = name.replaceAll("-", " ");
-
const styles = color ? `color: ${color}` : null;
+const ariaLabel = Astro.props.ariaLabel ?? name.replaceAll("-", " ");
+
export interface Props {
/** The group that the icon belongs to. */
group: "brands" | "solid";
@@ -14,12 +14,13 @@ export interface Props {
class?: string;
/** The colour of the icon. */
color?: string;
+ ariaLabel?: string;
}
---
<i
class:list={[`fa-${group}`, `fa-${name}`, className]}
- aria-label={displayName}
+ aria-label={ariaLabel}
style={styles}
>
</i>
diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
index f41bd7c..df3af7b 100644
--- a/src/components/layout/Header.astro
+++ b/src/components/layout/Header.astro
@@ -14,13 +14,13 @@ const { class: className } = Astro.props;
<nav>
<a href="/" class="home">
<Tooltip content="Home">
- <Icon name="house" group="solid" />
+ <Icon name="house" group="solid" ariaLabel="Home"/>
</Tooltip>
</a>
<div>
<a href="/wiki/">
<Tooltip content="Wiki">
- <Icon name="book-open" group="solid" />
+ <Icon name="book-open" group="solid" ariaLabel="Wiki"/>
</Tooltip>
</a>
</div>
@@ -29,7 +29,7 @@ const { class: className } = Astro.props;
allowHTML
>
<button class="site-search-icon" aria-keyshortcuts="/">
- <Icon name="search" group="solid" />
+ <Icon name="search" group="solid" ariaLabel="Search"/>
</button>
</Tooltip>
<span class="github">