Skip to content

Commit 2c2ff56

Browse files
protocolstardustprotocolstardust
committed
(docs) Improvements to hero page
1 parent a786574 commit 2c2ff56

2 files changed

Lines changed: 234 additions & 74 deletions

File tree

‎docs/docs/content/get-started/overview.md‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,40 @@
11
# Overview
22

3-
<!-- TODO: Add content -->
3+
Welcome to the RayforceDB VS Code Extension! This extension provides a complete development environment for RayforceDB, right inside VS Code.
44

5+
## Installation
6+
7+
### VS Code Marketplace
8+
9+
The easiest way to install. Search for "Rayforce" in the VS Code extensions panel or click the button below.
10+
11+
[Open VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=RayforceDB.rayforce-vscode){ .md-button .md-button--primary }
12+
13+
### OpenVSX Registry
14+
15+
For VSCodium, Theia, Gitpod, and other open-source editors compatible with OpenVSX.
16+
17+
[Open OpenVSX Registry](https://open-vsx.org/extension/RayforceDB/rayforce-vscode){ .md-button .md-button--primary }
18+
19+
### Quick Open
20+
21+
Use VS Code Quick Open (Ctrl+P / Cmd+P) and paste the following command:
22+
23+
```bash
24+
ext install RayforceDB.rayforce-vscode
25+
```
26+
27+
### Command Line
28+
29+
Install directly from the terminal using the VS Code CLI:
30+
31+
```bash
32+
code --install-extension RayforceDB.rayforce-vscode
33+
```
34+
35+
## Features
36+
37+
- **Instance Manager**: View and connect to running local and remote RayforceDB instances
38+
- **Interactive REPL**: Send prompts and execute code via an integrated REPL panel
39+
- **Environment Inspector**: Introspect environment variables in your connected instance
40+
- **Rayfall Language Support**: Full syntax highlighting, autocomplete, and file icons for `.rfl` and `.rf` files

‎docs/docs/home.html‎

Lines changed: 197 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -382,10 +382,18 @@
382382
padding: 5rem 2rem;
383383
background: var(--bg-white);
384384
width: 100%;
385+
border-top: 1px solid rgba(0, 0, 0, 0.08);
386+
margin-top: 2rem;
387+
}
388+
389+
.features:first-of-type {
390+
border-top: none;
391+
margin-top: 0;
385392
}
386393

387394
[data-theme="dark"] .features {
388395
background: #021828;
396+
border-top-color: rgba(255, 255, 255, 0.1);
389397
}
390398

391399
.features-inner {
@@ -507,6 +515,8 @@
507515
background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-navy-light) 100%);
508516
color: white;
509517
width: 100%;
518+
border-top: 2px solid rgba(233, 160, 51, 0.3);
519+
margin-top: 2rem;
510520
}
511521

512522
.installation-inner {
@@ -679,6 +689,131 @@
679689
color: #8be9fd;
680690
}
681691

692+
/* Footer */
693+
.footer {
694+
padding: 80px 0 40px;
695+
background: var(--primary-navy);
696+
color: rgba(255, 255, 255, 0.8);
697+
width: 100%;
698+
margin-top: 0;
699+
border-top: 1px solid rgba(255, 255, 255, 0.1);
700+
}
701+
702+
[data-theme="dark"] .footer {
703+
background: #021828;
704+
}
705+
706+
.footer .container {
707+
max-width: 1200px;
708+
margin: 0 auto;
709+
padding: 0 24px;
710+
}
711+
712+
.footer-content {
713+
display: grid;
714+
grid-template-columns: 1fr auto;
715+
gap: 64px;
716+
margin-bottom: 48px;
717+
}
718+
719+
@media (max-width: 768px) {
720+
.footer-content {
721+
grid-template-columns: 1fr;
722+
gap: 40px;
723+
}
724+
}
725+
726+
.footer-brand {
727+
max-width: 300px;
728+
}
729+
730+
.footer-links {
731+
justify-self: end;
732+
}
733+
734+
@media (max-width: 768px) {
735+
.footer-links {
736+
justify-self: start;
737+
}
738+
}
739+
740+
.footer-logo {
741+
height: 36px;
742+
width: auto;
743+
margin-bottom: 16px;
744+
filter: brightness(0) invert(1);
745+
}
746+
747+
.footer-brand p {
748+
color: rgba(255, 255, 255, 0.6);
749+
line-height: 1.6;
750+
margin: 0;
751+
}
752+
753+
.footer-links {
754+
display: grid;
755+
grid-template-columns: repeat(3, 1fr);
756+
gap: 32px;
757+
}
758+
759+
@media (max-width: 600px) {
760+
.footer-links {
761+
grid-template-columns: 1fr 1fr;
762+
}
763+
}
764+
765+
.footer-column h4 {
766+
color: #ffffff;
767+
font-size: 0.9rem;
768+
font-weight: 700;
769+
text-transform: uppercase;
770+
letter-spacing: 0.5px;
771+
margin-bottom: 20px;
772+
}
773+
774+
.footer-column {
775+
display: flex;
776+
flex-direction: column;
777+
}
778+
779+
.footer-column a {
780+
display: block;
781+
color: rgba(255, 255, 255, 0.6);
782+
margin-bottom: 12px;
783+
text-decoration: none;
784+
transition: color 0.15s ease;
785+
}
786+
787+
.footer-column a:hover {
788+
color: var(--accent-golden);
789+
}
790+
791+
.footer-bottom {
792+
padding-top: 32px;
793+
border-top: 1px solid rgba(255, 255, 255, 0.1);
794+
text-align: center;
795+
}
796+
797+
.footer-bottom p {
798+
color: rgba(255, 255, 255, 0.5);
799+
font-size: 0.9rem;
800+
margin: 0;
801+
}
802+
803+
.footer-bottom .partnership {
804+
margin-top: 8px;
805+
}
806+
807+
.footer-bottom a {
808+
color: var(--accent-golden);
809+
text-decoration: none;
810+
transition: opacity 0.15s ease;
811+
}
812+
813+
.footer-bottom a:hover {
814+
opacity: 0.8;
815+
}
816+
682817
/* Responsive */
683818
@media screen and (max-width: 968px) {
684819
.hero-container {
@@ -770,28 +905,14 @@ <h2>Everything you need to <strong>develop faster</strong></h2>
770905
<i class="fas fa-server"></i>
771906
</div>
772907
<h3>Instance Manager</h3>
773-
<p>View and connect to running local and remote RayforceDB instances. Manage multiple connections from the sidebar.</p>
774-
</div>
775-
<div class="feature-card">
776-
<div class="feature-icon">
777-
<i class="fas fa-chart-line"></i>
778-
</div>
779-
<h3>Process Monitoring</h3>
780-
<p>Real-time CPU and memory usage monitoring for local instances. Keep track of resource consumption at a glance.</p>
908+
<p>View and connect to running local and remote RayforceDB instances. Organise saved connections into folders at the sidebar.</p>
781909
</div>
782910
<div class="feature-card">
783911
<div class="feature-icon">
784912
<i class="fas fa-terminal"></i>
785913
</div>
786914
<h3>Interactive REPL</h3>
787-
<p>Send selected commands directly from opened file to connected instances via an integrated REPL panel.</p>
788-
</div>
789-
<div class="feature-card">
790-
<div class="feature-icon">
791-
<i class="fas fa-code"></i>
792-
</div>
793-
<h3>Syntax Highlighting</h3>
794-
<p>Full syntax highlighting for <code>.rfl</code> and <code>.rf</code> files. Rayfall code has never looked better.</p>
915+
<p>Send prompts and selected file rows directly from opened file to connected instances via an integrated REPL panel.</p>
795916
</div>
796917
<div class="feature-card">
797918
<div class="feature-icon">
@@ -804,77 +925,80 @@ <h3>Environment Inspector</h3>
804925
</div>
805926
</section>
806927

807-
<section class="installation" id="installation">
808-
<div class="installation-inner">
809-
<h2>Get started in <strong>seconds</strong></h2>
810-
<div class="install-methods">
811-
<div class="install-method">
812-
<h3><i class="fas fa-store"></i> VS Code Marketplace</h3>
813-
<p>The easiest way to install. Search for "Rayforce" in the VS Code extensions panel or click the button below.</p>
814-
<a href="https://marketplace.visualstudio.com/items?itemName=RayforceDB.rayforce-vscode" class="btn btn-primary" target="_blank">
815-
<i class="fas fa-external-link-alt"></i> Open Marketplace
816-
</a>
817-
</div>
818-
<div class="install-method">
819-
<h3><i class="fas fa-cube"></i> OpenVSX Registry</h3>
820-
<p>For VSCodium, Theia, Gitpod, and other open-source editors compatible with OpenVSX.</p>
821-
<a href="https://open-vsx.org/extension/RayforceDB/rayforce-vscode" class="btn btn-primary" target="_blank">
822-
<i class="fas fa-external-link-alt"></i> Open Registry
823-
</a>
928+
<section class="features" id="syntax">
929+
<div class="features-inner">
930+
<div class="section-header">
931+
<h2><strong>Rayfall </strong>language support</h2>
932+
<p>Full language support for Rayfall programming language with syntax highlighting, autocomplete, and file icons.</p>
933+
</div>
934+
<div class="features-grid">
935+
<div class="feature-card">
936+
<div class="feature-icon">
937+
<i class="fas fa-file-code"></i>
938+
</div>
939+
<h3>File icons for .rfl files</h3>
940+
<p>Custom icons for <code>.rfl</code> and <code>.rf</code> files to easily identify Rayfall source files in your project.</p>
824941
</div>
825-
<div class="install-method">
826-
<h3><i class="fas fa-keyboard"></i> Quick Open</h3>
827-
<p>Use VS Code Quick Open (Ctrl+P) and paste the following command:</p>
828-
<div class="install-code">
829-
<code>ext install RayforceDB.rayforce-vscode</code>
942+
<div class="feature-card">
943+
<div class="feature-icon">
944+
<i class="fas fa-magic"></i>
830945
</div>
946+
<h3>Rayfall Syntax autocomplete</h3>
947+
<p>Intelligent autocomplete with built-in functions, keywords, and types. Get suggestions as you type with full documentation.</p>
831948
</div>
832-
<div class="install-method">
833-
<h3><i class="fas fa-terminal"></i> Command Line</h3>
834-
<p>Install directly from the terminal using the VS Code CLI:</p>
835-
<div class="install-code">
836-
<code>code --install-extension RayforceDB.rayforce-vscode</code>
949+
<div class="feature-card">
950+
<div class="feature-icon">
951+
<i class="fas fa-code"></i>
837952
</div>
953+
<h3>Rayfall syntax highlight</h3>
954+
<p>Full syntax highlighting for <code>.rfl</code> and <code>.rf</code> files. Rayfall code has never looked better.</p>
838955
</div>
839956
</div>
840957
</div>
841958
</section>
842959

843-
<section class="syntax" id="syntax">
844-
<div class="syntax-inner">
845-
<div class="section-header">
846-
<h2>Beautiful <strong>syntax highlighting</strong></h2>
847-
<p>Write Rayfall code with full language support for .rfl and .rf files.</p>
960+
<section class="installation" id="installation">
961+
<div class="installation-inner">
962+
<h2>Get started in <strong>seconds</strong></h2>
963+
<p style="font-size: 1.1rem; margin-bottom: 2rem; opacity: 0.9;">Learn how to install and configure the extension to start developing with RayforceDB.</p>
964+
<div style="text-align: center;">
965+
<a href="content/get-started/overview.html" class="btn btn-primary" style="font-size: 1.1rem; padding: 1rem 2rem;">
966+
<i class="fas fa-rocket"></i> Get Started
967+
</a>
848968
</div>
849-
<div class="syntax-demo-single">
850-
<div class="syntax-card">
851-
<div class="syntax-card-header">
852-
<i class="fas fa-file-code"></i> example.rfl
969+
</div>
970+
</section>
971+
972+
<footer class="footer">
973+
<div class="container">
974+
<div class="footer-content">
975+
<div class="footer-brand">
976+
<img src="assets/logo_light_full.svg" alt="RayforceDB" class="footer-logo">
977+
<p>High-performance columnar vector database</p>
978+
</div>
979+
<div class="footer-links">
980+
<div class="footer-column">
981+
<h4>Projects</h4>
982+
<a href="https://core.rayforcedb.com/" target="_blank">rayforce</a>
983+
<a href="https://py.rayforcedb.com/" target="_blank">rayforce-py</a>
984+
<a href="https://wasm.rayforcedb.com/" target="_blank">rayforce-wasm</a>
985+
<a href="https://vscode.rayforcedb.com" target="_blank">rayforce-vscode</a>
986+
<a href="https://rs.rayforcedb.com" target="_blank">rayforce-rs</a>
987+
</div>
988+
<div class="footer-column">
989+
<h4>Community</h4>
990+
<a href="https://github.com/RayforceDB" target="_blank">GitHub</a>
991+
<a href="https://x.com/RayforceDB" target="_blank">X (Twitter)</a>
992+
<a href="https://www.reddit.com/r/rayforcedb/" target="_blank">Reddit</a>
993+
<a href="https://rayforcedb.zulipchat.com/join/l33sichu4vp7nf77hgdul4om/" target="_blank">Zulip Chat</a>
853994
</div>
854-
<pre><span class="comment">; Create a table</span>
855-
(<span class="keyword">set</span> employees (<span class="func">table</span> [name dept salary]
856-
(<span class="func">list</span>
857-
(<span class="func">list</span> <span class="string">"Alice"</span> <span class="string">"Bob"</span> <span class="string">"Charlie"</span>)
858-
[<span class="symbol">'IT</span> <span class="symbol">'HR</span> <span class="symbol">'IT</span>]
859-
[<span class="number">75000</span> <span class="number">65000</span> <span class="number">85000</span>])))
860-
861-
<span class="comment">; Query with filtering</span>
862-
(<span class="keyword">select</span> {
863-
name: name
864-
salary: salary
865-
from: employees
866-
where: (<span class="func">></span> salary <span class="number">70000</span>)})
867-
868-
<span class="comment">; Aggregate by department</span>
869-
(<span class="keyword">select</span> {
870-
avg_salary: (<span class="func">avg</span> salary)
871-
headcount: (<span class="func">count</span> name)
872-
from: employees
873-
by: dept})</pre>
874995
</div>
875996
</div>
997+
<div class="footer-bottom">
998+
<p>&copy; 2025 RayforceDB. All rights reserved.</p>
999+
</div>
8761000
</div>
877-
</section>
1001+
</footer>
8781002

8791003
<header class="mkdocs-header">
8801004
<div class="mkdocs-header__inner">

0 commit comments

Comments
 (0)