Skip to content

Commit 868d37b

Browse files
carsakillercarsakiller
authored
refactor: homepage (#32)
* refactor: change wiki icon to open book * refactor: homepage layout * refactor: replace demo video * fix: responsive sizing
1 parent 0b7f2c9 commit 868d37b

File tree

4 files changed

+168
-107
lines changed

4 files changed

+168
-107
lines changed

‎public/videos/vscode-demo.mp4

93.6 KB
Binary file not shown.

‎public/videos/vscode-demo.webm

144 KB
Binary file not shown.

‎src/components/layout/Header.astro

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const { class: className } = Astro.props;
2020
<div>
2121
<a href="/wiki/">
2222
<Tooltip content="Wiki">
23-
<Icon name="book" group="solid" />
23+
<Icon name="book-open" group="solid" />
2424
</Tooltip>
2525
</a>
2626
</div>

‎src/pages/index.astro

+167-106
Original file line numberDiff line numberDiff line change
@@ -17,38 +17,53 @@ const annotationCount = annotationsPage
1717
<ScrollSnapLayout title="Home">
1818
<main>
1919
<section id="intro">
20-
<h1>Lua Language Server</h1>
21-
<p>
22-
The Lua Language Server uses the <ExternalLink
23-
url="https://microsoft.github.io/language-server-protocol/"
24-
>
25-
Language Server Protocol
26-
</ExternalLink> to provide various features for <ExternalLink
27-
url="https://www.lua.org/"
28-
>
29-
Lua
30-
</ExternalLink> in your <ExternalLink
31-
url="https://microsoft.github.io/language-server-protocol/implementors/tools/"
32-
>
33-
favourite code editors
34-
</ExternalLink>, making development easier and faster!
35-
</p>
36-
37-
<div id="statistics">
38-
<Tooltip content="Unique installs in Visual Studio Code">
39-
<span class="stat installs">
40-
<b>~1M</b>
41-
<Icon name="download" group="solid" />
42-
</span>
43-
</Tooltip>
44-
<Tooltip content="Stars on GitHub">
45-
<span class="stat stars">
46-
<b>-</b>
47-
<Icon name="star" group="solid" color="#ffcb00" />
48-
</span>
49-
</Tooltip>
20+
<div class="description">
21+
<h1>Lua Language Server</h1>
22+
23+
<div id="statistics">
24+
<Tooltip content="Unique installs in Visual Studio Code">
25+
<span class="stat installs">
26+
<b>1M+</b>
27+
<img src="/images/vscode.svg" alt="Visual Studio Code installs" />
28+
</span>
29+
</Tooltip>
30+
<Tooltip content="Stars on GitHub">
31+
<span class="stat stars">
32+
<b>3K+</b>
33+
<Icon name="star" group="solid" color="#ffcb00" />
34+
</span>
35+
</Tooltip>
36+
</div>
37+
38+
<p>
39+
The Lua Language Server uses the <ExternalLink
40+
url="https://microsoft.github.io/language-server-protocol/"
41+
>
42+
Language Server Protocol
43+
</ExternalLink> to provide various <a href="#features">features</a> for
44+
<ExternalLink url="https://www.lua.org/">Lua</ExternalLink> in your <ExternalLink
45+
url="https://microsoft.github.io/language-server-protocol/implementors/tools/"
46+
>
47+
favourite code editors
48+
</ExternalLink>, making development easier, safer, and faster!
49+
</p>
50+
51+
<p>It's time that Lua gets proper support in your editor!</p>
52+
53+
<div class="quick-links">
54+
<a href="#install">
55+
Install <Icon name="arrow-down" group="solid" /></a
56+
>
57+
</div>
5058
</div>
59+
<video autoplay loop muted>
60+
<source src="/videos/vscode-demo.webm" type="video/webm" />
61+
<source src="/videos/vscode-demo.mp4" type="video/mp4" />
62+
</video>
63+
</section>
5164

65+
<section id="features">
66+
<h2>Features</h2>
5267
<div class="grid">
5368
<div>
5469
<Icon name="at" group="solid" />
@@ -139,32 +154,6 @@ const annotationCount = annotationsPage
139154
</div>
140155
</section>
141156

142-
<section id="demo" class="simple">
143-
<p>It's time that Lua gets proper support in your editor!</p>
144-
{/* Landscape only */}
145-
<video autoplay loop muted class="demo">
146-
<source src="/videos/vscode-demo.webm" type="video/webm" />
147-
<source src="/videos/vscode-demo.mp4" type="video/mp4" />
148-
</video>
149-
{/* Portrait only */}
150-
<div class="demo">
151-
<CodeBlock language="lua">
152-
<pre>---@class Vehicle
153-
---@field speed number
154-
---@field weight number
155-
---@field passengers Player[]
156-
---@field health number
157-
local Vehicle = &#123;&#125;
158-
159-
---@class Player
160-
---@field id integer
161-
---@field name string
162-
---@field health number
163-
local Player = &#123;&#125;</pre>
164-
</CodeBlock>
165-
</div>
166-
</section>
167-
168157
<section id="install">
169158
<h2>Install for...</h2>
170159
<div class="install-tabs">
@@ -320,6 +309,15 @@ exec &quot;&lt;path-to-directory&gt;/bin/lua-language-server&quot; &quot;$@&quot
320309
</div>
321310
</div>
322311
</section>
312+
313+
<section id="next-steps">
314+
<h2>Next Steps</h2>
315+
<p>Check out the wiki to learn more about the language server.</p>
316+
<a href="/wiki/">
317+
Wiki
318+
<Icon name="arrow-right" group="solid" />
319+
</a>
320+
</section>
323321
</main>
324322
</ScrollSnapLayout>
325323

@@ -375,7 +373,6 @@ exec &quot;&lt;path-to-directory&gt;/bin/lua-language-server&quot; &quot;$@&quot
375373
installElement.textContent = numberFormatter.format(installs as number);
376374
} catch (e) {
377375
console.error("Failed to get install count", e);
378-
installElement.textContent = "~1M";
379376
}
380377
} else {
381378
installElement.textContent = numberFormatter.format(installs);
@@ -470,6 +467,7 @@ exec &quot;&lt;path-to-directory&gt;/bin/lua-language-server&quot; &quot;$@&quot
470467
height: 100%;
471468
scroll-snap-type: y mandatory;
472469
overflow-y: scroll;
470+
scroll-behavior: smooth;
473471
}
474472

475473
section {
@@ -485,30 +483,37 @@ exec &quot;&lt;path-to-directory&gt;/bin/lua-language-server&quot; &quot;$@&quot
485483
&:nth-of-type(2n) {
486484
background-color: #0c2e4d;
487485
}
488-
}
489486

490-
section.simple {
491-
p {
492-
font-size: 3.5em;
493-
font-family: "Prompt";
494-
font-weight: 700;
495-
line-height: 1.1em;
496-
margin: 0.5em auto 0em auto;
497-
width: fit-content;
498-
text-align: center;
487+
* {
488+
box-sizing: border-box;
499489
}
500490
}
501491

502492
section#intro {
503-
h1 {
504-
margin: 0px;
505-
padding-bottom: 1rem;
493+
display: grid;
494+
grid-template-columns: 50% 50%;
495+
margin: auto 0.5em;
496+
gap: 1em 1em;
497+
498+
.description {
499+
height: 60%;
500+
font-size: 1em;
501+
502+
h1 {
503+
font-size: 3em;
504+
margin: 0px;
505+
padding-bottom: 1rem;
506+
}
507+
p {
508+
font-size: 1.3em;
509+
}
506510
}
507511

508512
#statistics {
509-
font-size: 2em;
513+
font-size: 2.25em;
510514
display: flex;
511-
gap: 1em;
515+
justify-content: center;
516+
gap: 1em 2em;
512517

513518
.stat {
514519
display: flex;
@@ -518,28 +523,60 @@ exec &quot;&lt;path-to-directory&gt;/bin/lua-language-server&quot; &quot;$@&quot
518523
& :not(:first-child) {
519524
font-size: 0.8em;
520525
}
526+
527+
img {
528+
width: 1.4em;
529+
}
530+
}
531+
}
532+
533+
.quick-links {
534+
margin-top: 2em;
535+
grid-column: 1/3;
536+
display: flex;
537+
justify-content: space-evenly;
538+
539+
a {
540+
text-align: center;
541+
color: white;
542+
font-size: 1.5em;
543+
padding: 0.1em 0.5em;
521544
}
522545
}
523546

547+
video {
548+
background-color: #232a2f;
549+
border-radius: 0.5em;
550+
width: 100%;
551+
padding: 0.25em;
552+
box-sizing: border-box;
553+
}
554+
}
555+
556+
section#features {
557+
justify-content: flex-start;
558+
559+
h2 {
560+
font-size: 3em;
561+
margin-top: 0px;
562+
}
524563
.grid {
525564
display: grid;
526-
grid-template-columns: repeat(auto-fill, minmax(24em, 1fr));
565+
grid-template-columns: repeat(auto-fill, minmax(23em, 1fr));
527566
width: 100%;
528567
margin: 0.5rem;
529568
justify-items: stretch;
530569
overflow-y: auto;
531570
max-height: 100%;
532571

533572
& > div {
534-
--glow-color: #00b3ff;
535573
text-align: center;
536-
padding: 1em 0.5em;
574+
padding: 0.5em 0.5em;
537575
border-radius: 1em;
538-
border: var(--glow-color) solid 0.2em;
539-
box-shadow: var(--glow-color) 0px 0px 0.3em 0.1em,
576+
box-shadow:
577+
var(--glow-color) 0px 0px 0.3em 0.1em,
540578
var(--glow-color) 0px 0px 0.3em 0.1em inset;
541579
box-sizing: border-box;
542-
margin: 0.5em;
543580

544581
:global(i) {
545582
display: block;
@@ -559,27 +596,7 @@ exec &quot;&lt;path-to-directory&gt;/bin/lua-language-server&quot; &quot;$@&quot
559596
}
560597
}
561598

562-
section#demo {
563-
& > video.demo {
564-
box-shadow: #00b3ff 0px 0px 20px 5px;
565-
display: block;
566-
max-width: 80%;
567-
height: auto;
568-
margin: 5em auto;
569-
border-radius: 0.5em;
570-
}
571-
572-
& > div.demo {
573-
display: none;
574-
max-height: 100%;
575-
margin: 5em auto;
576-
width: 100%;
577-
}
578-
}
579-
580599
section#install {
581-
background-color: #020910;
582-
583600
h2 {
584601
margin: 0px;
585602
margin-bottom: 0.5em;
@@ -591,6 +608,7 @@ exec &quot;&lt;path-to-directory&gt;/bin/lua-language-server&quot; &quot;$@&quot
591608
justify-items: center;
592609
position: relative;
593610
width: 100%;
611+
margin-bottom: 1em;
594612
z-index: 1;
595613

596614
button {
@@ -599,7 +617,7 @@ exec &quot;&lt;path-to-directory&gt;/bin/lua-language-server&quot; &quot;$@&quot
599617
border-radius: 99em;
600618
padding: 0.3em;
601619
aspect-ratio: 1;
602-
font-size: 3em;
620+
font-size: 4vh;
603621
display: flex;
604622
align-items: center;
605623
gap: 0.3em;
@@ -696,19 +714,62 @@ exec &quot;&lt;path-to-directory&gt;/bin/lua-language-server&quot; &quot;$@&quot
696714
}
697715
}
698716

699-
@media screen and (orientation: portrait) {
700-
section#demo {
701-
& > video.demo {
717+
section#next-steps {
718+
font-size: 1.75em;
719+
720+
h2 {
721+
margin-top: 0px;
722+
}
723+
724+
a {
725+
color: white;
726+
}
727+
}
728+
729+
@media screen and (max-width: 1200px) {
730+
section#intro {
731+
display: flex;
732+
flex-direction: column;
733+
734+
video {
735+
height: 100%;
736+
}
737+
}
738+
}
739+
740+
@media screen and (max-width: 700px) {
741+
section#intro {
742+
.description {
743+
font-size: 0.85em;
744+
}
745+
746+
video {
702747
display: none;
703748
}
704749

705-
& > div.demo {
706-
display: block;
750+
.grid {
751+
grid-template-columns: 1fr;
707752
}
708753
}
709754

710-
section#intro .grid {
711-
grid-template-columns: 1fr;
755+
section#install {
756+
ol {
757+
padding-left: 1em;
758+
}
759+
}
760+
}
761+
762+
@media screen and (max-width: 400px) {
763+
section#intro {
764+
.description {
765+
font-size: 0.7em;
766+
}
767+
}
768+
}
769+
770+
@media screen and (orientation: portrait) {
771+
section#demo video {
772+
display: none;
712773
}
713774
}
714775
</style>

0 commit comments

Comments
 (0)