Skip to content

Commit 35f3d96

Browse files
berntpoppclaude
berntpopp
and
claude
committed
feat: redesign setup checklist and update project idea references
Replace plain markdown task list in setup page "Ready to Go" section with an interactive preflight checklist featuring gradient header, custom checkboxes, and required/optional grouping. Update ideas page: add AlphaGenome Viewer as no-code alternative for variant prediction, add VarLens as reference implementation for the data management dashboard. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 449f0c9 commit 35f3d96

3 files changed

Lines changed: 197 additions & 18 deletions

File tree

‎docs/.vitepress/theme/style.css‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -254,3 +254,145 @@
254254
border-color: var(--vp-c-brand-1);
255255
color: var(--vp-c-brand-1);
256256
}
257+
258+
/* === Setup Page: Pre-flight Checklist === */
259+
260+
.preflight {
261+
border-radius: 16px;
262+
overflow: hidden;
263+
margin: 1.5rem 0;
264+
border: 1px solid var(--vp-c-divider);
265+
background: var(--vp-c-bg-alt);
266+
}
267+
268+
.preflight-header {
269+
background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
270+
padding: 1.25rem 1.75rem;
271+
display: flex;
272+
flex-direction: column;
273+
gap: 0.25rem;
274+
}
275+
.preflight-title {
276+
font-size: 1.15rem;
277+
font-weight: 700;
278+
color: #fff;
279+
}
280+
.preflight-subtitle {
281+
font-size: 0.85rem;
282+
color: rgba(255, 255, 255, 0.8);
283+
}
284+
285+
.preflight-body {
286+
padding: 1.25rem 1.75rem;
287+
display: flex;
288+
flex-direction: column;
289+
gap: 1.25rem;
290+
}
291+
292+
.preflight-group {
293+
display: flex;
294+
flex-direction: column;
295+
gap: 0.25rem;
296+
}
297+
298+
.preflight-group-label {
299+
font-size: 0.75rem;
300+
font-weight: 700;
301+
text-transform: uppercase;
302+
letter-spacing: 0.08em;
303+
margin-bottom: 0.35rem;
304+
padding-left: 0.25rem;
305+
}
306+
.preflight-label-required {
307+
color: var(--vp-c-brand-1);
308+
}
309+
.preflight-label-optional {
310+
color: var(--vp-c-text-3);
311+
}
312+
313+
.preflight-row {
314+
display: flex;
315+
align-items: center;
316+
gap: 0.85rem;
317+
padding: 0.6rem 0.85rem;
318+
border-radius: 10px;
319+
cursor: pointer;
320+
border: 1px solid transparent;
321+
transition:
322+
background-color 0.15s,
323+
border-color 0.15s;
324+
}
325+
.preflight-row:hover {
326+
background: var(--vp-c-bg-soft);
327+
border-color: var(--vp-c-divider);
328+
}
329+
330+
.preflight-row input[type='checkbox'] {
331+
appearance: none;
332+
-webkit-appearance: none;
333+
flex-shrink: 0;
334+
width: 1.35rem;
335+
height: 1.35rem;
336+
border: 2px solid var(--vp-c-brand-1);
337+
border-radius: 6px;
338+
cursor: pointer;
339+
position: relative;
340+
background: transparent;
341+
transition:
342+
background-color 0.2s,
343+
border-color 0.2s,
344+
box-shadow 0.2s;
345+
}
346+
.preflight-row input[type='checkbox']:hover {
347+
box-shadow: 0 0 0 3px var(--vp-c-brand-soft);
348+
}
349+
.preflight-row input[type='checkbox']:checked {
350+
background: var(--vp-c-brand-1);
351+
border-color: var(--vp-c-brand-1);
352+
}
353+
.preflight-row input[type='checkbox']:checked::after {
354+
content: '';
355+
position: absolute;
356+
left: 4px;
357+
top: 1px;
358+
width: 6px;
359+
height: 11px;
360+
border: solid #fff;
361+
border-width: 0 2.5px 2.5px 0;
362+
transform: rotate(45deg);
363+
}
364+
365+
.preflight-text {
366+
font-size: 0.95rem;
367+
color: var(--vp-c-text-1);
368+
transition:
369+
color 0.2s,
370+
opacity 0.2s;
371+
}
372+
.preflight-row input[type='checkbox']:checked ~ .preflight-text {
373+
color: var(--vp-c-text-3);
374+
text-decoration: line-through;
375+
}
376+
377+
.preflight-row-optional input[type='checkbox'] {
378+
border-color: var(--vp-c-text-3);
379+
border-width: 1.5px;
380+
}
381+
.preflight-row-optional input[type='checkbox']:hover {
382+
box-shadow: 0 0 0 3px rgba(138, 138, 158, 0.15);
383+
}
384+
.preflight-row-optional input[type='checkbox']:checked {
385+
background: var(--vp-c-text-3);
386+
border-color: var(--vp-c-text-3);
387+
}
388+
.preflight-row-optional .preflight-text {
389+
color: var(--vp-c-text-2);
390+
}
391+
392+
.preflight-footer {
393+
padding: 1rem 1.75rem;
394+
font-size: 0.9rem;
395+
color: var(--vp-c-text-2);
396+
border-top: 1px solid var(--vp-c-divider);
397+
background: var(--vp-c-bg-soft);
398+
}

‎docs/ideas.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,14 @@ Looking to explore something different? These ideas come from fellow participant
3131

3232
### Genomic Variant Effect Prediction
3333

34-
Use Google DeepMind's AlphaGenome API to predict how patient variants affect gene expression and chromatin accessibility.
34+
Use Google DeepMind's AlphaGenome to predict how patient variants affect gene expression, chromatin accessibility, and histone modifications.
3535

36-
This project starts from a Colab notebook, so you can run it entirely in your browser without installing anything locally. You'll learn how to call external APIs, handle genomic coordinate systems, and interpret AI predictions for clinical variants.
36+
The right starting point depends on your question. For a visual, no-code exploration, try [AlphaGenome Viewer](https://github.com/Abrar-Abir/alphagenome-viewer) - a web app that lets you query interval predictions, compare reference vs. alternate alleles, and score variants with point-and-click controls. For custom analyses or batch processing, the official [Colab notebooks](https://www.alphagenomedocs.com/colabs/) let you script against the AlphaGenome SDK directly.
3737

3838
<div class="card-badges">
39+
<span class="card-badge">AlphaGenome</span>
3940
<span class="card-badge">Python</span>
40-
<span class="card-badge">Google Colab</span>
41-
<span class="card-badge card-badge-accent">API Integration</span>
41+
<span class="card-badge card-badge-accent">Variant Analysis</span>
4242
</div>
4343

4444
</div>
@@ -49,7 +49,7 @@ This project starts from a Colab notebook, so you can run it entirely in your br
4949

5050
Build a desktop app that handles data entry, stores everything in a local database, runs automated analysis, and displays results in visual dashboards.
5151

52-
Perfect if you work with structured research data and want a custom solution for your lab's workflow. You'll learn how to build cross-platform desktop apps, work with databases, and create interactive visualizations.
52+
Perfect if you work with structured research data and want a custom solution for your lab's workflow. For a reference implementation with a very similar stack, see [VarLens](https://github.com/berntpopp/varlens) - an offline-first Electron + Vue + SQLite app for clinical variant analysis. You'll learn how to build cross-platform desktop apps, work with databases, and create interactive visualizations.
5353

5454
<div class="card-badges">
5555
<span class="card-badge">Electron</span>
@@ -155,7 +155,7 @@ Describe what you want to show, and AI can suggest plot types and generate the c
155155

156156
## Project-Specific Resources
157157

158-
- **AlphaGenome:** [Documentation](https://www.alphagenomedocs.com/) | [Colab Notebooks](https://www.alphagenomedocs.com/colabs/) | [GitHub](https://github.com/google-deepmind/alphagenome)
158+
- **AlphaGenome:** [Documentation](https://www.alphagenomedocs.com/) | [Colab Notebooks](https://www.alphagenomedocs.com/colabs/) | [GitHub](https://github.com/google-deepmind/alphagenome) | [AlphaGenome Viewer](https://github.com/Abrar-Abir/alphagenome-viewer)
159159
- **Electron/Vue:** [Electron Docs](https://www.electronjs.org/docs) | [Vue.js Guide](https://vuejs.org/guide/introduction)
160160
- **Zotero:** [Documentation](https://www.zotero.org/support/)
161161
- **AI Detection:** [QuillBot](https://quillbot.com/) | [GPTZero](https://gptzero.me/)

‎docs/setup.md‎

Lines changed: 49 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -379,17 +379,54 @@ If any command says "not found", try closing and reopening your terminal. Someti
379379

380380
## Ready to Go
381381

382-
Here's your final checklist:
383-
384-
- [ ] VS Code installed and opens
385-
- [ ] Git installed and `git --version` works
386-
- [ ] Git configured with your name and email
387-
- [ ] GitHub account created
388-
- [ ] (Optional) GitHub Education Pack applied for Copilot access
389-
- [ ] (Optional) Node.js installed
390-
- [ ] (Optional) Google account ready for Gemini CLI
391-
- [ ] (Optional) AI subscription login tested (Claude, ChatGPT, etc.)
392-
393-
If everything checks out, you're all set for the workshop! If you run into any issues, don't worry - **we'll have time at the start of the event to help with setup**.
382+
<div class="preflight">
383+
<div class="preflight-header">
384+
<span class="preflight-title">Pre-Workshop Checklist</span>
385+
<span class="preflight-subtitle">Tick each item as you complete it</span>
386+
</div>
387+
<div class="preflight-body">
388+
<div class="preflight-group">
389+
<div class="preflight-group-label preflight-label-required">Required</div>
390+
<label class="preflight-row">
391+
<input type="checkbox" />
392+
<span class="preflight-text"><strong>VS Code</strong> installed and opens</span>
393+
</label>
394+
<label class="preflight-row">
395+
<input type="checkbox" />
396+
<span class="preflight-text"><strong>Git</strong> installed and <code>git --version</code> works</span>
397+
</label>
398+
<label class="preflight-row">
399+
<input type="checkbox" />
400+
<span class="preflight-text"><strong>Git config</strong> set with your name and email</span>
401+
</label>
402+
<label class="preflight-row">
403+
<input type="checkbox" />
404+
<span class="preflight-text"><strong>GitHub</strong> account created</span>
405+
</label>
406+
</div>
407+
<div class="preflight-group">
408+
<div class="preflight-group-label preflight-label-optional">Optional extras</div>
409+
<label class="preflight-row preflight-row-optional">
410+
<input type="checkbox" />
411+
<span class="preflight-text">GitHub Education Pack for Copilot access</span>
412+
</label>
413+
<label class="preflight-row preflight-row-optional">
414+
<input type="checkbox" />
415+
<span class="preflight-text">Node.js installed (<code>node --version</code>)</span>
416+
</label>
417+
<label class="preflight-row preflight-row-optional">
418+
<input type="checkbox" />
419+
<span class="preflight-text">Google account ready for Gemini CLI</span>
420+
</label>
421+
<label class="preflight-row preflight-row-optional">
422+
<input type="checkbox" />
423+
<span class="preflight-text">AI subscription login tested (Claude, ChatGPT, etc.)</span>
424+
</label>
425+
</div>
426+
</div>
427+
<div class="preflight-footer">
428+
Don't worry if something isn't working yet - <strong>we'll have time at the start of the event to help with setup</strong>.
429+
</div>
430+
</div>
394431

395432
**Next step:** Check the [agenda](/agenda) to see what the evening looks like.

0 commit comments

Comments
 (0)