Skip to content

Commit acad879

Browse files
nsheffnsheff
committed
Publish site to GitHub Pages at dev.databio.org/onga
Serve the Astro site as a GitHub Pages project site under the databio org pages domain (databio.github.io -> dev.databio.org), so it lands at https://dev.databio.org/onga/. - astro.config.mjs: set site + base '/onga' - src/lib/url.ts: base-aware link helper (prefixes internal paths, passes external/relative through) - route every author-written internal href/src through url() across layout and pages; fix active-nav comparisons for the base path - .github/workflows/pages.yaml: build with withastro/action (path ./site, node 22) and deploy via actions/deploy-pages
1 parent 8376355 commit acad879

25 files changed

Lines changed: 201 additions & 109 deletions

File tree

‎.github/workflows/pages.yaml‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Build the Astro site (in site/) and deploy it to GitHub Pages.
2+
#
3+
# Because the databio org Pages site (databio.github.io) has the custom domain
4+
# dev.databio.org, this project-repo Pages site is served at
5+
# https://dev.databio.org/onga/ . The base path ('/onga') is set in
6+
# site/astro.config.mjs and must match the repo name.
7+
#
8+
# Pages source must be set to "GitHub Actions" (build_type: workflow) on the
9+
# repo (Settings -> Pages), not a branch.
10+
11+
on:
12+
push:
13+
branches: [master, main]
14+
workflow_dispatch:
15+
16+
name: pages
17+
18+
permissions:
19+
contents: read
20+
pages: write
21+
id-token: write
22+
23+
# Allow one concurrent deployment; let an in-progress run finish.
24+
concurrency:
25+
group: pages
26+
cancel-in-progress: false
27+
28+
jobs:
29+
build:
30+
runs-on: ubuntu-latest
31+
steps:
32+
- uses: actions/checkout@v4
33+
- name: Build with Astro
34+
uses: withastro/action@v3
35+
with:
36+
path: ./site # the Astro project lives in site/
37+
node-version: 22 # package.json engines: >=22.12.0
38+
39+
deploy:
40+
needs: build
41+
runs-on: ubuntu-latest
42+
environment:
43+
name: github-pages
44+
url: ${{ steps.deployment.outputs.page_url }}
45+
steps:
46+
- name: Deploy to GitHub Pages
47+
id: deployment
48+
uses: actions/deploy-pages@v4

‎site/astro.config.mjs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ import tailwindcss from '@tailwindcss/vite';
55

66
// https://astro.build/config
77
export default defineConfig({
8+
// Published as a GitHub Pages project site under the databio org pages domain
9+
// (databio.github.io has CNAME dev.databio.org), so it serves at
10+
// https://dev.databio.org/onga/. The base path must match the repo name.
11+
site: 'https://dev.databio.org',
12+
base: '/onga',
813
vite: {
914
plugins: [tailwindcss()]
1015
}

‎site/src/layouts/Layout.astro‎

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
import '../styles/global.css';
3+
import { url } from '../lib/url';
34
45
interface Props {
56
title: string;
@@ -18,19 +19,19 @@ const currentPath = Astro.url.pathname;
1819
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1920
<meta name="description" content={description} />
2021
<title>{title} | ONGA</title>
21-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
22+
<link rel="icon" type="image/svg+xml" href={url("/favicon.svg")} />
2223
</head>
2324
<body class="min-h-screen bg-gray-50 text-gray-900">
2425
<header class="bg-white border-b border-gray-200">
2526
<div class="max-w-6xl mx-auto px-4 py-4">
2627
<nav class="flex items-center justify-between">
2728
<div class="flex items-center gap-6">
28-
<a href="/" class="text-xl font-bold text-blue-700 hover:text-blue-900">
29+
<a href={url("/")} class="text-xl font-bold text-blue-700 hover:text-blue-900">
2930
ONGA
3031
</a>
3132
<div class="flex bg-gray-100 rounded-lg p-0.5 text-sm">
3233
<a
33-
href="/"
34+
href={url("/")}
3435
class:list={[
3536
'px-3 py-1.5 rounded-md font-medium transition-colors',
3637
side === 'browse' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'
@@ -39,7 +40,7 @@ const currentPath = Astro.url.pathname;
3940
Browse
4041
</a>
4142
<a
42-
href="/develop"
43+
href={url("/develop")}
4344
class:list={[
4445
'px-3 py-1.5 rounded-md font-medium transition-colors',
4546
side === 'develop' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'
@@ -52,42 +53,42 @@ const currentPath = Astro.url.pathname;
5253
<div class="flex items-center gap-4 text-sm">
5354
{side === 'browse' ? (
5455
<>
55-
<a href="/" class:list={['hover:text-gray-900', currentPath === '/' ? 'text-gray-900 font-medium' : 'text-gray-600']}>Home</a>
56+
<a href={url("/")} class:list={['hover:text-gray-900', currentPath === url('/') ? 'text-gray-900 font-medium' : 'text-gray-600']}>Home</a>
5657
<span class="text-gray-300">|</span>
5758
<span class="text-[11px] uppercase tracking-wide text-gray-400 font-semibold">Vocabularies</span>
58-
<a href="/data-types" class:list={['hover:text-blue-800', currentPath.startsWith('/data-types') ? 'text-blue-700 font-medium' : 'text-blue-600']}>DataTypes</a>
59-
<a href="/feature-types" class:list={['hover:text-green-800', currentPath.startsWith('/feature-types') ? 'text-green-700 font-medium' : 'text-green-600']}>FeatureTypes</a>
60-
<a href="/formats" class:list={['hover:text-teal-800', currentPath.startsWith('/formats') ? 'text-teal-700 font-medium' : 'text-teal-600']}>Formats</a>
59+
<a href={url("/data-types")} class:list={['hover:text-blue-800', currentPath.startsWith(url('/data-types')) ? 'text-blue-700 font-medium' : 'text-blue-600']}>DataTypes</a>
60+
<a href={url("/feature-types")} class:list={['hover:text-green-800', currentPath.startsWith(url('/feature-types')) ? 'text-green-700 font-medium' : 'text-green-600']}>FeatureTypes</a>
61+
<a href={url("/formats")} class:list={['hover:text-teal-800', currentPath.startsWith(url('/formats')) ? 'text-teal-700 font-medium' : 'text-teal-600']}>Formats</a>
6162
<span class="text-[10px] uppercase tracking-wide text-indigo-300 font-semibold">facets</span>
62-
<a href="/strand-orientation" class:list={['hover:text-indigo-800', currentPath.startsWith('/strand-orientation') ? 'text-indigo-700 font-medium' : 'text-indigo-500']}>Strand</a>
63-
<a href="/read-multiplicity" class:list={['hover:text-indigo-800', currentPath.startsWith('/read-multiplicity') ? 'text-indigo-700 font-medium' : 'text-indigo-500']}>ReadMultiplicity</a>
64-
<a href="/filter-status" class:list={['hover:text-indigo-800', currentPath.startsWith('/filter-status') ? 'text-indigo-700 font-medium' : 'text-indigo-500']}>FilterStatus</a>
65-
<a href="/normalization" class:list={['hover:text-indigo-800', currentPath.startsWith('/normalization') ? 'text-indigo-700 font-medium' : 'text-indigo-500']}>Normalization</a>
66-
<a href="/thresholding" class:list={['hover:text-indigo-800', currentPath.startsWith('/thresholding') ? 'text-indigo-700 font-medium' : 'text-indigo-500']}>Thresholding</a>
67-
<a href="/derivation" class:list={['hover:text-indigo-800', currentPath.startsWith('/derivation') ? 'text-indigo-700 font-medium' : 'text-indigo-500']}>Derivation</a>
68-
<a href="/reference-build-sex" class:list={['hover:text-indigo-800', currentPath.startsWith('/reference-build-sex') ? 'text-indigo-700 font-medium' : 'text-indigo-500']}>BuildSex</a>
69-
<a href="/haplotype-resolution" class:list={['hover:text-indigo-800', currentPath.startsWith('/haplotype-resolution') ? 'text-indigo-700 font-medium' : 'text-indigo-500']}>HaplotypeResolution</a>
63+
<a href={url("/strand-orientation")} class:list={['hover:text-indigo-800', currentPath.startsWith(url('/strand-orientation')) ? 'text-indigo-700 font-medium' : 'text-indigo-500']}>Strand</a>
64+
<a href={url("/read-multiplicity")} class:list={['hover:text-indigo-800', currentPath.startsWith(url('/read-multiplicity')) ? 'text-indigo-700 font-medium' : 'text-indigo-500']}>ReadMultiplicity</a>
65+
<a href={url("/filter-status")} class:list={['hover:text-indigo-800', currentPath.startsWith(url('/filter-status')) ? 'text-indigo-700 font-medium' : 'text-indigo-500']}>FilterStatus</a>
66+
<a href={url("/normalization")} class:list={['hover:text-indigo-800', currentPath.startsWith(url('/normalization')) ? 'text-indigo-700 font-medium' : 'text-indigo-500']}>Normalization</a>
67+
<a href={url("/thresholding")} class:list={['hover:text-indigo-800', currentPath.startsWith(url('/thresholding')) ? 'text-indigo-700 font-medium' : 'text-indigo-500']}>Thresholding</a>
68+
<a href={url("/derivation")} class:list={['hover:text-indigo-800', currentPath.startsWith(url('/derivation')) ? 'text-indigo-700 font-medium' : 'text-indigo-500']}>Derivation</a>
69+
<a href={url("/reference-build-sex")} class:list={['hover:text-indigo-800', currentPath.startsWith(url('/reference-build-sex')) ? 'text-indigo-700 font-medium' : 'text-indigo-500']}>BuildSex</a>
70+
<a href={url("/haplotype-resolution")} class:list={['hover:text-indigo-800', currentPath.startsWith(url('/haplotype-resolution')) ? 'text-indigo-700 font-medium' : 'text-indigo-500']}>HaplotypeResolution</a>
7071
<span class="text-gray-300">|</span>
7172
<span class="text-[11px] uppercase tracking-wide text-gray-400 font-semibold">Schemas</span>
72-
<a href="/track-format" class:list={['hover:text-amber-800', currentPath.startsWith('/track-format') ? 'text-amber-700 font-medium' : 'text-amber-600']}>Track Format</a>
73-
<a href="/track-interpretation" class:list={['hover:text-amber-800', currentPath.startsWith('/track-interpretation') ? 'text-amber-700 font-medium' : 'text-amber-600']}>Interpretation</a>
74-
<a href="/track-provenance" class:list={['hover:text-amber-800', currentPath.startsWith('/track-provenance') ? 'text-amber-700 font-medium' : 'text-amber-600']}>Provenance</a>
75-
<a href="/track-geometry" class:list={['hover:text-amber-800', currentPath.startsWith('/track-geometry') ? 'text-amber-700 font-medium' : 'text-amber-600']}>Geometry</a>
76-
<a href="/reference-genome" class:list={['hover:text-amber-800', currentPath.startsWith('/reference-genome') ? 'text-amber-700 font-medium' : 'text-amber-600']}>Reference Genome</a>
73+
<a href={url("/track-format")} class:list={['hover:text-amber-800', currentPath.startsWith(url('/track-format')) ? 'text-amber-700 font-medium' : 'text-amber-600']}>Track Format</a>
74+
<a href={url("/track-interpretation")} class:list={['hover:text-amber-800', currentPath.startsWith(url('/track-interpretation')) ? 'text-amber-700 font-medium' : 'text-amber-600']}>Interpretation</a>
75+
<a href={url("/track-provenance")} class:list={['hover:text-amber-800', currentPath.startsWith(url('/track-provenance')) ? 'text-amber-700 font-medium' : 'text-amber-600']}>Provenance</a>
76+
<a href={url("/track-geometry")} class:list={['hover:text-amber-800', currentPath.startsWith(url('/track-geometry')) ? 'text-amber-700 font-medium' : 'text-amber-600']}>Geometry</a>
77+
<a href={url("/reference-genome")} class:list={['hover:text-amber-800', currentPath.startsWith(url('/reference-genome')) ? 'text-amber-700 font-medium' : 'text-amber-600']}>Reference Genome</a>
7778
<span class="text-gray-300">|</span>
78-
<a href="/scope" class:list={['hover:text-rose-800', currentPath.startsWith('/scope') ? 'text-rose-700 font-medium' : 'text-rose-600']}>Scope</a>
79-
<a href="/mappings" class:list={['hover:text-gray-900', currentPath.startsWith('/mappings') ? 'text-gray-900 font-medium' : 'text-gray-600']}>Mappings</a>
80-
<a href="/about" class:list={['hover:text-gray-900', currentPath.startsWith('/about') ? 'text-gray-900 font-medium' : 'text-gray-600']}>About</a>
79+
<a href={url("/scope")} class:list={['hover:text-rose-800', currentPath.startsWith(url('/scope')) ? 'text-rose-700 font-medium' : 'text-rose-600']}>Scope</a>
80+
<a href={url("/mappings")} class:list={['hover:text-gray-900', currentPath.startsWith(url('/mappings')) ? 'text-gray-900 font-medium' : 'text-gray-600']}>Mappings</a>
81+
<a href={url("/about")} class:list={['hover:text-gray-900', currentPath.startsWith(url('/about')) ? 'text-gray-900 font-medium' : 'text-gray-600']}>About</a>
8182
</>
8283
) : (
8384
<>
84-
<a href="/develop" class:list={['hover:text-gray-900', currentPath === '/develop' || currentPath === '/develop/' ? 'text-gray-900 font-medium' : 'text-gray-600']}>Overview</a>
85-
<a href="/develop/merge-candidates" class:list={['hover:text-gray-900', currentPath.startsWith('/develop/merge-candidates') ? 'text-gray-900 font-medium' : 'text-gray-600']}>Merge Candidates</a>
86-
<a href="/develop/gaps" class:list={['hover:text-gray-900', currentPath.startsWith('/develop/gaps') ? 'text-gray-900 font-medium' : 'text-gray-600']}>Gaps</a>
87-
<a href="/develop/mapping-suggestions" class:list={['hover:text-gray-900', currentPath.startsWith('/develop/mapping-suggestions') ? 'text-gray-900 font-medium' : 'text-gray-600']}>Mapping Suggestions</a>
88-
<a href="/develop/quality-issues" class:list={['hover:text-gray-900', currentPath.startsWith('/develop/quality-issues') ? 'text-gray-900 font-medium' : 'text-gray-600']}>Quality Issues</a>
89-
<a href="/develop/frequency" class:list={['hover:text-gray-900', currentPath.startsWith('/develop/frequency') ? 'text-gray-900 font-medium' : 'text-gray-600']}>Usage Frequency</a>
90-
<a href="/develop/changeset" class:list={['hover:text-gray-900', currentPath.startsWith('/develop/changeset') ? 'text-gray-900 font-medium' : 'text-gray-600']}>Changeset</a>
85+
<a href={url("/develop")} class:list={['hover:text-gray-900', currentPath === url('/develop') || currentPath === url('/develop/') ? 'text-gray-900 font-medium' : 'text-gray-600']}>Overview</a>
86+
<a href={url("/develop/merge-candidates")} class:list={['hover:text-gray-900', currentPath.startsWith(url('/develop/merge-candidates')) ? 'text-gray-900 font-medium' : 'text-gray-600']}>Merge Candidates</a>
87+
<a href={url("/develop/gaps")} class:list={['hover:text-gray-900', currentPath.startsWith(url('/develop/gaps')) ? 'text-gray-900 font-medium' : 'text-gray-600']}>Gaps</a>
88+
<a href={url("/develop/mapping-suggestions")} class:list={['hover:text-gray-900', currentPath.startsWith(url('/develop/mapping-suggestions')) ? 'text-gray-900 font-medium' : 'text-gray-600']}>Mapping Suggestions</a>
89+
<a href={url("/develop/quality-issues")} class:list={['hover:text-gray-900', currentPath.startsWith(url('/develop/quality-issues')) ? 'text-gray-900 font-medium' : 'text-gray-600']}>Quality Issues</a>
90+
<a href={url("/develop/frequency")} class:list={['hover:text-gray-900', currentPath.startsWith(url('/develop/frequency')) ? 'text-gray-900 font-medium' : 'text-gray-600']}>Usage Frequency</a>
91+
<a href={url("/develop/changeset")} class:list={['hover:text-gray-900', currentPath.startsWith(url('/develop/changeset')) ? 'text-gray-900 font-medium' : 'text-gray-600']}>Changeset</a>
9192
</>
9293
)}
9394
</div>

‎site/src/lib/url.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// Base-aware link helper.
2+
//
3+
// The site is served from a sub-path (https://dev.databio.org/onga/), so every
4+
// internal link must be prefixed with import.meta.env.BASE_URL ('/onga/').
5+
// Astro auto-prefixes its own bundled assets, but NOT author-written links, so
6+
// wrap every internal href/src with url().
7+
//
8+
// External links (http(s), mailto:, protocol-relative //, in-page #anchors) and
9+
// already-relative links are passed through untouched, so url() is safe to apply
10+
// uniformly — including to dynamic values that might be external.
11+
12+
const BASE = import.meta.env.BASE_URL; // e.g. '/onga/'
13+
14+
export function url(path: string = '/'): string {
15+
if (!path.startsWith('/') || path.startsWith('//')) return path;
16+
return BASE.replace(/\/$/, '') + path;
17+
}

‎site/src/pages/data-types/[slug].astro‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
import { url } from '../../lib/url';
23
import Layout from '../../layouts/Layout.astro';
34
import dataTypes from '../../data/data-types.json';
45
import featureTypes from '../../data/feature-types.json';
@@ -33,9 +34,9 @@ function edamUrl(edamId: string): string {
3334

3435
<Layout title={term.name} description={term.description}>
3536
<nav class="text-sm text-gray-500 mb-6">
36-
<a href="/" class="hover:text-gray-700">Home</a>
37+
<a href={url("/")} class="hover:text-gray-700">Home</a>
3738
<span class="mx-2">/</span>
38-
<a href="/data-types" class="hover:text-gray-700">DataTypes</a>
39+
<a href={url("/data-types")} class="hover:text-gray-700">DataTypes</a>
3940
<span class="mx-2">/</span>
4041
<span class="text-gray-900">{term.name}</span>
4142
</nav>
@@ -65,7 +66,7 @@ function edamUrl(edamId: string): string {
6566
<div class="flex flex-wrap gap-2">
6667
{linkedFeatures.map((f: any) => (
6768
f.slug ? (
68-
<a href={`/feature-types/${f.slug}`} class="text-sm bg-green-100 text-green-800 px-3 py-1 rounded-full hover:bg-green-200">
69+
<a href={url(`/feature-types/${f.slug}`)} class="text-sm bg-green-100 text-green-800 px-3 py-1 rounded-full hover:bg-green-200">
6970
{f.name}
7071
</a>
7172
) : (
@@ -98,7 +99,7 @@ function edamUrl(edamId: string): string {
9899
<h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">Related DataTypes</h2>
99100
<div class="flex flex-wrap gap-2">
100101
{relatedTerms.map((t: any) => (
101-
<a href={`/data-types/${t.slug}`} class="text-sm bg-gray-100 text-gray-700 px-3 py-1 rounded-full hover:bg-gray-200">
102+
<a href={url(`/data-types/${t.slug}`)} class="text-sm bg-gray-100 text-gray-700 px-3 py-1 rounded-full hover:bg-gray-200">
102103
{t.name}
103104
</a>
104105
))}

‎site/src/pages/data-types/index.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
import { url } from '../../lib/url';
23
import Layout from '../../layouts/Layout.astro';
34
import dataTypes from '../../data/data-types.json';
45
import dataTypesByCategory from '../../data/data-types-by-category.json';
@@ -39,7 +40,7 @@ const categories = Object.keys(dataTypesByCategory).sort();
3940
<div class="bg-white rounded-lg shadow-sm divide-y divide-gray-100">
4041
{dataTypesByCategory[category].map((term: any) => (
4142
<a
42-
href={`/data-types/${term.slug}`}
43+
href={url(`/data-types/${term.slug}`)}
4344
class="term-item block p-4 hover:bg-gray-50"
4445
data-name={term.name.toLowerCase()}
4546
data-description={term.description.toLowerCase()}

‎site/src/pages/derivation/index.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
import { url } from '../../lib/url';
23
import Layout from '../../layouts/Layout.astro';
34
import terms from '../../data/derivation.json';
45
---
@@ -23,7 +24,7 @@ import terms from '../../data/derivation.json';
2324
is deliberately two-valued; <code class="bg-gray-100 px-1 rounded">control</code>
2425
is excluded because it denotes an experimental role or a normalization reference,
2526
not the measured-vs-model axis. Surfaced via the
26-
<a href="/track-provenance" class="text-amber-600 underline hover:text-amber-800">Track Provenance</a>
27+
<a href={url("/track-provenance")} class="text-amber-600 underline hover:text-amber-800">Track Provenance</a>
2728
schema's <code class="bg-gray-100 px-1 rounded">derivation</code> slot.
2829
Aligned with FGA-WG issue #2 (data interpretation).
2930
</p>

0 commit comments

Comments
 (0)