Skip to content

Commit b27e126

Browse files
wilcorreaCopilot
wilcorrea
and
Copilot
authored
docs(website): refresh site with AI workspace, docs section and improved download (#33)
* docs(website): refresh site with AI workspace, docs section and improved download - Update meta description and hero subtitle to highlight AI workspace - Rename 'Plan Review Comments' feature to 'AI Workspace' with terminal chat mockup - Add 'Multi-language' to compact features grid (5th column) - Add #docs section with accordion: CLI, Voice to Text, AI Workspace - Add 'Docs' link to nav - Add Quick Install block with Homebrew (active) + Snap, Flatpak, winget (soon) - Split macOS download into Apple Silicon and Intel buttons - Add data-asset attributes to download buttons - Fetch direct download URLs from GitHub API in site.js with fallback - Add accordion interactivity for docs section - Add install copy buttons for Quick Install Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix(website): address CodeRabbit review findings - Add ARIA attributes to accordion: aria-expanded, aria-controls and panel ids (docs-cli, docs-whisper, docs-ai) with role=region + aria-labelledby - Sync aria-expanded state in JS accordion toggle handler - Guard install copy button handler against missing .install-option / .install-cmd nodes - Fix CTA download button fallback: always resolves to releases URL when asset map lookup fails or fetch throws Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 0a4d2a4 commit b27e126

3 files changed

Lines changed: 594 additions & 36 deletions

File tree

‎website/css/site.css‎

Lines changed: 348 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ body {
8181
padding: 0 24px;
8282
}
8383

84-
#features, #download {
84+
#features, #download, #docs {
8585
scroll-margin-top: 56px;
8686
}
8787

@@ -585,7 +585,7 @@ html.dark .code-string { color: #7ee787; }
585585

586586
.compact-grid {
587587
display: grid;
588-
grid-template-columns: repeat(4, 1fr);
588+
grid-template-columns: repeat(5, 1fr);
589589
gap: 32px;
590590
}
591591

@@ -808,3 +808,349 @@ footer {
808808
#hero h1 { font-size: 1.75rem; }
809809
.compact-grid { grid-template-columns: 1fr; }
810810
}
811+
812+
/* === AI Workspace Terminal Chat Mockup === */
813+
814+
.terminal-chat {
815+
background: var(--code-bg);
816+
border-top: 1px solid var(--border);
817+
padding: 14px 16px;
818+
font-family: var(--font-mono);
819+
font-size: 12px;
820+
}
821+
822+
.terminal-msg {
823+
margin-bottom: 10px;
824+
line-height: 1.5;
825+
}
826+
827+
.terminal-msg:last-child { margin-bottom: 0; }
828+
829+
.terminal-msg.user { color: var(--text-muted); }
830+
831+
.terminal-msg.user::before {
832+
content: '❯ ';
833+
color: var(--link);
834+
font-weight: 700;
835+
}
836+
837+
.terminal-msg.agent {
838+
color: var(--text);
839+
padding-left: 4px;
840+
}
841+
842+
.agent-label {
843+
display: inline-block;
844+
background: var(--link);
845+
color: #fff;
846+
font-size: 9px;
847+
font-weight: 700;
848+
padding: 1px 6px;
849+
border-radius: 3px;
850+
margin-right: 6px;
851+
vertical-align: middle;
852+
letter-spacing: 0.04em;
853+
text-transform: uppercase;
854+
}
855+
856+
.plan-phase-badge {
857+
display: inline-block;
858+
background: var(--bg);
859+
color: var(--text-muted);
860+
font-size: 10px;
861+
padding: 1px 7px;
862+
border-radius: 3px;
863+
border: 1px solid var(--border);
864+
}
865+
866+
/* === Quick Install === */
867+
868+
.quick-install {
869+
margin-bottom: 48px;
870+
}
871+
872+
.quick-install-label {
873+
font-size: 11px;
874+
font-weight: 700;
875+
text-transform: uppercase;
876+
letter-spacing: 0.08em;
877+
color: var(--text-muted);
878+
margin-bottom: 12px;
879+
}
880+
881+
.install-options {
882+
display: flex;
883+
flex-direction: column;
884+
border: 1px solid var(--border);
885+
border-radius: 10px;
886+
overflow: hidden;
887+
}
888+
889+
.install-option {
890+
display: flex;
891+
align-items: center;
892+
gap: 12px;
893+
padding: 11px 20px;
894+
background: var(--bg);
895+
border-bottom: 1px solid var(--border);
896+
}
897+
898+
.install-option:last-child { border-bottom: none; }
899+
900+
.install-option.soon {
901+
opacity: 0.55;
902+
cursor: default;
903+
}
904+
905+
.install-os-tag {
906+
font-size: 11px;
907+
font-weight: 600;
908+
color: var(--text);
909+
min-width: 58px;
910+
flex-shrink: 0;
911+
}
912+
913+
.install-via-tag {
914+
font-size: 11px;
915+
color: var(--text-muted);
916+
background: var(--code-bg);
917+
border: 1px solid var(--border);
918+
padding: 2px 8px;
919+
border-radius: 4px;
920+
min-width: 64px;
921+
text-align: center;
922+
flex-shrink: 0;
923+
}
924+
925+
.install-cmd-row {
926+
flex: 1;
927+
display: flex;
928+
align-items: center;
929+
gap: 8px;
930+
min-width: 0;
931+
}
932+
933+
.install-cmd {
934+
font-family: var(--font-mono);
935+
font-size: 12px;
936+
color: var(--code-text);
937+
background: var(--code-bg);
938+
border: 1px solid var(--border);
939+
border-radius: 4px;
940+
padding: 5px 10px;
941+
flex: 1;
942+
overflow: hidden;
943+
text-overflow: ellipsis;
944+
white-space: nowrap;
945+
display: block;
946+
}
947+
948+
.install-copy-btn {
949+
background: none;
950+
border: 1px solid var(--border);
951+
border-radius: 4px;
952+
padding: 5px 10px;
953+
cursor: pointer;
954+
color: var(--text-muted);
955+
font-size: 11px;
956+
display: flex;
957+
align-items: center;
958+
gap: 4px;
959+
transition: background 0.15s, color 0.15s;
960+
white-space: nowrap;
961+
flex-shrink: 0;
962+
}
963+
964+
.install-copy-btn:hover { background: var(--code-bg); color: var(--text); }
965+
.install-copy-btn .icon-check { display: none; }
966+
.install-copy-btn.copied .icon-copy { display: none; }
967+
.install-copy-btn.copied .icon-check { display: block; color: #28c840; }
968+
969+
.soon-tag {
970+
font-size: 10px;
971+
font-weight: 600;
972+
color: var(--text-muted);
973+
background: var(--code-bg);
974+
border: 1px solid var(--border);
975+
border-radius: 10px;
976+
padding: 2px 10px;
977+
letter-spacing: 0.04em;
978+
flex-shrink: 0;
979+
}
980+
981+
/* === Docs Section === */
982+
983+
#docs {
984+
padding: 80px 0;
985+
border-top: 1px solid var(--border);
986+
scroll-margin-top: 56px;
987+
}
988+
989+
#docs h2 {
990+
text-align: center;
991+
font-size: 1.75rem;
992+
font-weight: 700;
993+
margin-bottom: 8px;
994+
}
995+
996+
.docs-subtitle {
997+
text-align: center;
998+
color: var(--text-muted);
999+
font-size: 1.1rem;
1000+
margin-bottom: 48px;
1001+
}
1002+
1003+
.docs-accordion {
1004+
max-width: 760px;
1005+
margin: 0 auto;
1006+
border: 1px solid var(--border);
1007+
border-radius: 12px;
1008+
overflow: hidden;
1009+
}
1010+
1011+
.docs-item { border-bottom: 1px solid var(--border); }
1012+
.docs-item:last-child { border-bottom: none; }
1013+
1014+
.docs-item-header {
1015+
width: 100%;
1016+
display: flex;
1017+
align-items: center;
1018+
gap: 14px;
1019+
padding: 20px 24px;
1020+
background: var(--bg);
1021+
border: none;
1022+
cursor: pointer;
1023+
text-align: left;
1024+
color: var(--text);
1025+
transition: background 0.15s;
1026+
}
1027+
1028+
.docs-item-header:hover { background: var(--code-bg); }
1029+
1030+
.docs-icon { color: var(--link); flex-shrink: 0; }
1031+
1032+
.docs-item-title { flex: 1; }
1033+
1034+
.docs-item-title strong {
1035+
display: block;
1036+
font-size: 1rem;
1037+
font-weight: 600;
1038+
}
1039+
1040+
.docs-item-title span {
1041+
font-size: 0.85rem;
1042+
color: var(--text-muted);
1043+
font-weight: 400;
1044+
}
1045+
1046+
.docs-chevron {
1047+
color: var(--text-muted);
1048+
transition: transform 0.2s;
1049+
flex-shrink: 0;
1050+
}
1051+
1052+
.docs-item.open .docs-chevron { transform: rotate(180deg); }
1053+
1054+
.docs-item-body {
1055+
display: none;
1056+
padding: 20px 24px 24px;
1057+
background: var(--code-bg);
1058+
border-top: 1px solid var(--border);
1059+
}
1060+
1061+
.docs-item.open .docs-item-body { display: block; }
1062+
1063+
.docs-item-body h4 {
1064+
font-size: 0.875rem;
1065+
font-weight: 600;
1066+
color: var(--text);
1067+
margin: 16px 0 6px;
1068+
}
1069+
1070+
.docs-item-body h4:first-child { margin-top: 0; }
1071+
1072+
.docs-item-body p {
1073+
font-size: 0.9rem;
1074+
color: var(--text-muted);
1075+
line-height: 1.7;
1076+
margin-bottom: 10px;
1077+
}
1078+
1079+
.docs-item-body pre {
1080+
background: var(--bg);
1081+
border: 1px solid var(--border);
1082+
border-radius: 6px;
1083+
padding: 10px 14px;
1084+
font-family: var(--font-mono);
1085+
font-size: 0.82rem;
1086+
color: var(--code-text);
1087+
overflow-x: auto;
1088+
margin-bottom: 10px;
1089+
}
1090+
1091+
.docs-item-body ul {
1092+
list-style: none;
1093+
padding: 0;
1094+
margin: 0 0 10px;
1095+
}
1096+
1097+
.docs-item-body ul li {
1098+
font-size: 0.9rem;
1099+
color: var(--text-muted);
1100+
padding: 3px 0 3px 16px;
1101+
position: relative;
1102+
}
1103+
1104+
.docs-item-body ul li::before {
1105+
content: '·';
1106+
position: absolute;
1107+
left: 4px;
1108+
color: var(--link);
1109+
font-weight: bold;
1110+
}
1111+
1112+
.docs-item-body code {
1113+
font-family: var(--font-mono);
1114+
font-size: 0.85em;
1115+
background: var(--bg);
1116+
color: var(--code-text);
1117+
padding: 0.15em 0.4em;
1118+
border-radius: 3px;
1119+
border: 1px solid var(--border);
1120+
}
1121+
1122+
.mode-grid {
1123+
display: grid;
1124+
grid-template-columns: repeat(3, 1fr);
1125+
gap: 8px;
1126+
margin-bottom: 10px;
1127+
}
1128+
1129+
.mode-card {
1130+
background: var(--bg);
1131+
border: 1px solid var(--border);
1132+
border-radius: 6px;
1133+
padding: 8px 12px;
1134+
}
1135+
1136+
.mode-name {
1137+
font-family: var(--font-mono);
1138+
font-size: 0.8rem;
1139+
font-weight: 600;
1140+
color: var(--link);
1141+
}
1142+
1143+
.mode-desc {
1144+
font-size: 0.75rem;
1145+
color: var(--text-muted);
1146+
margin-top: 2px;
1147+
line-height: 1.4;
1148+
}
1149+
1150+
@media (max-width: 768px) {
1151+
#docs { padding: 48px 0; }
1152+
.mode-grid { grid-template-columns: repeat(2, 1fr); }
1153+
.install-option { flex-wrap: wrap; gap: 8px; }
1154+
.install-cmd-row { width: 100%; }
1155+
.compact-grid { grid-template-columns: repeat(2, 1fr); }
1156+
}

0 commit comments

Comments
 (0)