Skip to content

Commit 3372f58

Browse files
Update index.html
1 parent b5837f2 commit 3372f58

1 file changed

Lines changed: 65 additions & 47 deletions

File tree

docs/index.html

Lines changed: 65 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -262,23 +262,26 @@
262262
}
263263

264264
.hero-buttons {
265-
display: flex;
266-
gap: 1rem;
267-
flex-wrap: wrap;
265+
display: grid;
266+
grid-template-columns: repeat(3, 1fr);
267+
gap: 0.75rem;
268+
max-width: 520px;
268269
}
269270

270271
.btn {
271272
display: inline-flex;
272273
align-items: center;
274+
justify-content: center;
273275
gap: 0.5rem;
274-
padding: 0.8rem 1.8rem;
276+
padding: 0.75rem 1.25rem;
275277
border-radius: 50px;
276-
font-size: 1rem;
278+
font-size: 0.9rem;
277279
font-weight: 500;
278280
text-decoration: none;
279281
transition: all 0.3s ease;
280282
cursor: pointer;
281283
border: 2px solid transparent;
284+
white-space: nowrap;
282285
}
283286

284287
.btn-primary {
@@ -366,9 +369,24 @@
366369
}
367370

368371
.features-grid {
369-
display: grid;
370-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
372+
display: flex;
373+
flex-wrap: wrap;
374+
justify-content: center;
371375
gap: 2rem;
376+
max-width: 1100px;
377+
margin: 0 auto;
378+
}
379+
380+
.features-grid .feature-card {
381+
flex: 0 1 320px;
382+
max-width: 350px;
383+
}
384+
385+
@media (max-width: 640px) {
386+
.features-grid .feature-card {
387+
flex: 1 1 100%;
388+
max-width: none;
389+
}
372390
}
373391

374392
.feature-card {
@@ -508,6 +526,13 @@
508526
margin-top: 3rem;
509527
}
510528

529+
.syntax-demo-single {
530+
margin-top: 3rem;
531+
max-width: 600px;
532+
margin-left: auto;
533+
margin-right: auto;
534+
}
535+
511536
.syntax-card {
512537
background: var(--bg-white);
513538
border-radius: 12px;
@@ -638,10 +663,6 @@
638663
margin-right: auto;
639664
}
640665

641-
.hero-buttons {
642-
justify-content: center;
643-
}
644-
645666
.hero-socials {
646667
justify-content: center;
647668
}
@@ -678,6 +699,12 @@
678699
max-width: 240px;
679700
}
680701

702+
.hero-buttons {
703+
grid-template-columns: 1fr;
704+
max-width: 280px;
705+
margin: 0 auto;
706+
}
707+
681708
.section-header h2,
682709
.installation h2 {
683710
font-size: 1.8rem;
@@ -808,6 +835,9 @@
808835
<a href="#features">Features</a>
809836
<a href="#installation">Install</a>
810837
<a href="#syntax">Syntax</a>
838+
<a href="https://open-vsx.org/extension/RayforceDB/rayforce-vscode" target="_blank">
839+
<i class="fas fa-cube"></i> OpenVSX
840+
</a>
811841
<a href="https://github.com/RayforceDB/rayforce-vscode" class="github-link" target="_blank">
812842
<i class="fab fa-github"></i> GitHub
813843
</a>
@@ -826,7 +856,7 @@
826856
<img src="images/logo_dark_full.svg" alt="RayforceDB" class="hero-logo light-only">
827857
<img src="images/logo_light_full.svg" alt="RayforceDB" class="hero-logo dark-only">
828858
<h1>VS Code <strong>Extension</strong></h1>
829-
<p>Connect to running instances, monitor CPU and memory, send commands via interactive REPL, and enjoy
859+
<p>Connect to local and remote instances, monitor CPU and RAM, send queries via interactive REPL, and enjoy
830860
full syntax highlighting for Rayfall code.</p>
831861
<div class="hero-socials">
832862
<a href="https://github.com/singaraiona" target="_blank" title="GitHub"><i
@@ -843,14 +873,18 @@ <h1>VS Code <strong>Extension</strong></h1>
843873
class="btn btn-primary" target="_blank">
844874
<i class="fas fa-download"></i> Install Extension
845875
</a>
876+
<a href="https://open-vsx.org/extension/RayforceDB/rayforce-vscode"
877+
class="btn btn-secondary" target="_blank">
878+
<i class="fas fa-cube"></i> OpenVSX Registry
879+
</a>
846880
<a href="https://github.com/RayforceDB/rayforce-vscode" class="btn btn-secondary" target="_blank">
847881
<i class="fab fa-github"></i> View Source
848882
</a>
849883
</div>
850884
</div>
851885
<div class="hero-image">
852886
<img src="images/demo.png" alt="RayforceDB VS Code Extension Demo">
853-
<span class="hero-badge"><i class="fas fa-bolt"></i> v0.1.0</span>
887+
<span class="hero-badge"><i class="fas fa-bolt"></i> v0.2.0</span>
854888
</div>
855889
</div>
856890
</section>
@@ -884,8 +918,7 @@ <h3>Process Monitoring</h3>
884918
<i class="fas fa-terminal"></i>
885919
</div>
886920
<h3>Interactive REPL</h3>
887-
<p>Send commands directly to connected instances via an integrated REPL panel. Execute selections
888-
with Ctrl+Enter.</p>
921+
<p>Send selected commands directly from opened file to connected instances via an integrated REPL panel.</p>
889922
</div>
890923
<div class="feature-card">
891924
<div class="feature-icon">
@@ -900,15 +933,7 @@ <h3>Syntax Highlighting</h3>
900933
<i class="fas fa-eye"></i>
901934
</div>
902935
<h3>Environment Inspector</h3>
903-
<p>Introspect environment variables and see what's defined in your connected RayforceDB instance.
904-
</p>
905-
</div>
906-
<div class="feature-card">
907-
<div class="feature-icon">
908-
<i class="fas fa-plug"></i>
909-
</div>
910-
<h3>Remote Connections</h3>
911-
<p>Connect to remote RayforceDB instances. Add, remove, and manage remote hosts with ease.</p>
936+
<p>Introspect environment variables and see what's defined in your connected RayforceDB instance.</p>
912937
</div>
913938
</div>
914939
</div>
@@ -918,17 +943,23 @@ <h3>Remote Connections</h3>
918943
<section class="installation" id="installation">
919944
<div class="installation-inner">
920945
<h2>Get started in <strong>seconds</strong></h2>
921-
<p>Install the extension and connect to your first RayforceDB instance.</p>
922946
<div class="install-methods">
923947
<div class="install-method">
924948
<h3><i class="fas fa-store"></i> VS Code Marketplace</h3>
925-
<p>The easiest way to install. Search for "Rayforce" in the VS Code extensions panel or click the
926-
button below.</p>
949+
<p>The easiest way to install. Search for "Rayforce" in the VS Code extensions panel or click the button below.</p>
927950
<a href="https://marketplace.visualstudio.com/items?itemName=RayforceDB.rayforce-vscode"
928951
class="btn btn-primary" target="_blank" style="margin-top: 0.5rem;">
929952
<i class="fas fa-external-link-alt"></i> Open Marketplace
930953
</a>
931954
</div>
955+
<div class="install-method">
956+
<h3><i class="fas fa-cube"></i> OpenVSX Registry</h3>
957+
<p>For VSCodium, Theia, Gitpod, and other open-source editors compatible with OpenVSX.</p>
958+
<a href="https://open-vsx.org/extension/RayforceDB/rayforce-vscode"
959+
class="btn btn-primary" target="_blank" style="margin-top: 0.5rem;">
960+
<i class="fas fa-external-link-alt"></i> Open Registry
961+
</a>
962+
</div>
932963
<div class="install-method">
933964
<h3><i class="fas fa-keyboard"></i> Quick Open</h3>
934965
<p>Use VS Code Quick Open (Ctrl+P) and paste the following command:</p>
@@ -954,10 +985,10 @@ <h3><i class="fas fa-terminal"></i> Command Line</h3>
954985
<h2>Beautiful <strong>syntax highlighting</strong></h2>
955986
<p>Write Rayfall code with full language support for .rfl and .rf files.</p>
956987
</div>
957-
<div class="syntax-demo">
988+
<div class="syntax-demo-single">
958989
<div class="syntax-card">
959990
<div class="syntax-card-header">
960-
<i class="fas fa-file-code"></i> example.rf
991+
<i class="fas fa-file-code"></i> example.rfl
961992
</div>
962993
<pre><span class="comment">; Create a table</span>
963994
(<span class="keyword">set</span> employees (<span class="func">table</span> [name dept salary]
@@ -971,29 +1002,14 @@ <h2>Beautiful <strong>syntax highlighting</strong></h2>
9711002
name: name
9721003
salary: salary
9731004
from: employees
974-
where: (<span class="func">></span> salary <span class="number">70000</span>)})</pre>
975-
</div>
976-
<div class="syntax-card">
977-
<div class="syntax-card-header">
978-
<i class="fas fa-file-code"></i> queries.rfl
979-
</div>
980-
<pre><span class="comment">; Join two tables</span>
981-
(<span class="keyword">set</span> result
982-
(<span class="func">left-join</span> [order_id]
983-
trades orders))
1005+
where: (<span class="func">></span> salary <span class="number">70000</span>)})
9841006

9851007
<span class="comment">; Aggregate by department</span>
9861008
(<span class="keyword">select</span> {
9871009
avg_salary: (<span class="func">avg</span> salary)
9881010
headcount: (<span class="func">count</span> name)
9891011
from: employees
990-
by: dept})
991-
992-
<span class="comment">; Update salaries</span>
993-
(<span class="func">update</span> {
994-
salary: (<span class="func">*</span> salary <span class="number">1.1</span>)
995-
from: employees
996-
where: (<span class="func">=</span> dept <span class="symbol">'IT</span>)})</pre>
1012+
by: dept})</pre>
9971013
</div>
9981014
</div>
9991015
</div>
@@ -1010,7 +1026,9 @@ <h2>Beautiful <strong>syntax highlighting</strong></h2>
10101026
<a href="https://rayforcedb.com" target="_blank">Documentation</a>
10111027
<a href="https://github.com/RayforceDB/rayforce-vscode" target="_blank">GitHub</a>
10121028
<a href="https://marketplace.visualstudio.com/items?itemName=RayforceDB.rayforce-vscode"
1013-
target="_blank">Marketplace</a>
1029+
target="_blank">VS Code Marketplace</a>
1030+
<a href="https://open-vsx.org/extension/RayforceDB/rayforce-vscode"
1031+
target="_blank">OpenVSX Registry</a>
10141032
</div>
10151033
<div class="footer-social">
10161034
<a href="https://github.com/singaraiona" target="_blank" title="GitHub">

0 commit comments

Comments
 (0)