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.8 rem 1.8 rem ;
276+ padding : 0.75 rem 1.25 rem ;
275277 border-radius : 50px ;
276- font-size : 1 rem ;
278+ font-size : 0.9 rem ;
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 {
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 {
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 ;
638663 margin-right : auto;
639664 }
640665
641- .hero-buttons {
642- justify-content : center;
643- }
644-
645666 .hero-socials {
646667 justify-content : center;
647668 }
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 ;
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 >
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