Skip to content
This repository was archived by the owner on Jul 11, 2025. It is now read-only.

Commit 1d7dcc5

Browse files
Update theme and pages
1 parent fb593e6 commit 1d7dcc5

File tree

5 files changed

+317
-2
lines changed

5 files changed

+317
-2
lines changed

docs/src/.vitepress/config.mts

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { defineConfig } from 'vitepress'
2+
import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
3+
import mathjax3 from "markdown-it-mathjax3";
4+
import footnote from "markdown-it-footnote";
5+
6+
// https://vitepress.dev/reference/site-config
7+
export default defineConfig({
8+
base: '/ReefGuideAPI.jl/',// TODO: replace this in makedocs!
9+
title: 'ReefGuideAPI.jl',
10+
description: 'An API for Reef Guidance',
11+
lastUpdated: true,
12+
cleanUrls: true,
13+
outDir: '../final_site', // This is required for MarkdownVitepress to work correctly...
14+
15+
ignoreDeadLinks: true,
16+
17+
markdown: {
18+
math: true,
19+
config(md) {
20+
md.use(tabsMarkdownPlugin),
21+
md.use(mathjax3),
22+
md.use(footnote)
23+
},
24+
theme: {
25+
light: "github-light",
26+
dark: "github-dark"
27+
}
28+
},
29+
themeConfig: {
30+
outline: 'deep',
31+
32+
search: {
33+
provider: 'local',
34+
options: {
35+
detailedView: true
36+
}
37+
},
38+
nav: [
39+
{ text: 'Home', link: '/' },
40+
{ text: 'Getting Started', link: '/getting_started' },
41+
{ text: 'Docker', link: '/docker' },
42+
{ text: 'API', link: '/api' }
43+
]
44+
,
45+
sidebar: [
46+
47+
]
48+
,
49+
editLink: { pattern: "https://github.com/open-AIMS/ReefGuideAPI.jl/edit/main/docs/src/:path" },
50+
socialLinks: [
51+
{ icon: 'github', link: 'https://github.com/open-AIMS/ReefGuideAPI.jl' }
52+
],
53+
footer: {
54+
message: 'Made with <a href="https://luxdl.github.io/DocumenterVitepress.jl/dev/" target="_blank"><strong>DocumenterVitepress.jl</strong></a><br>',
55+
copyright: `© Copyright ${new Date().getUTCFullYear()}.`
56+
}
57+
}
58+
})

docs/src/.vitepress/theme/index.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// .vitepress/theme/index.ts
2+
import { h } from 'vue'
3+
import type { Theme } from 'vitepress'
4+
import DefaultTheme from 'vitepress/theme'
5+
// import AsideTrustees from '../../components/AsideTrustees.vue'
6+
7+
import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
8+
import './style.css'
9+
10+
export default {
11+
extends: DefaultTheme,
12+
Layout() {
13+
return h(DefaultTheme.Layout, null, {
14+
// 'home-hero-info-after': () => h(HomeTrustees),
15+
// 'aside-ads-before': () => h(AsideTrustees),
16+
})
17+
},
18+
enhanceApp({ app, router, siteData }) {
19+
enhanceAppWithTabs(app)
20+
}
21+
} satisfies Theme

docs/src/.vitepress/theme/style.css

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
@import url(https://fonts.googleapis.com/css?family=Space+Mono:regular,italic,700,700italic);
2+
@import url(https://fonts.googleapis.com/css?family=Space+Grotesk:regular,italic,700,700italic);
3+
4+
/* Customize default theme styling by overriding CSS variables:
5+
https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
6+
*/
7+
8+
/* Layouts */
9+
10+
/*
11+
:root {
12+
--vp-layout-max-width: 1440px;
13+
} */
14+
15+
.VPHero .clip {
16+
white-space: pre;
17+
max-width: 500px;
18+
}
19+
20+
/* Fonts */
21+
22+
:root {
23+
/* Typography */
24+
--vp-font-family-base: "Barlow", "Inter var experimental", "Inter var",
25+
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
26+
Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
27+
28+
/* Code Snippet font */
29+
--vp-font-family-mono: "Space Mono", Menlo, Monaco, Consolas, "Courier New",
30+
monospace;
31+
}
32+
33+
/* Colors */
34+
/**
35+
* Colors
36+
* -------------------------------------------------------------------------- */
37+
38+
:root {
39+
--c-yellow-1: #ffd859;
40+
--c-yellow-2: #f7d336;
41+
--c-yellow-3: #dec96e;
42+
--c-yellow-soft-1: #ecb732;
43+
--c-yellow-soft-2: #c99513;
44+
45+
--c-teal: #086367;
46+
--c-teal-light: #33898d;
47+
48+
--c-white-dark: #f8f8f8;
49+
--c-black-darker: #0d121b;
50+
--c-black: #111827;
51+
--c-black-light: #161f32;
52+
--c-black-lighter: #262a44;
53+
54+
--c-green-1: #52ce63;
55+
--c-green-2: #8ae99c;
56+
--c-green-3: #51a256;
57+
--c-green-soft: #316334;
58+
59+
/* light theme is a bit different */
60+
--vp-c-brand-1: var(--vp-c-green-1);
61+
--vp-c-brand-2: var(--vp-c-green-2);
62+
--vp-c-brand-3: var(--vp-c-green-3);
63+
--vp-c-brand-soft: var(--vp-c-green-soft);
64+
65+
--c-text-dark-1: #d9e6eb;
66+
--c-text-dark-2: #c4dde6;
67+
--c-text-dark-3: #abc4cc;
68+
--c-text-light-1: #2c3e50;
69+
--c-text-light-2: #476582;
70+
--c-text-light-3: #90a4b7;
71+
72+
--vp-c-brand-dark: var(--c-green-soft);
73+
--vp-c-brand-darker: var(--c-green-soft);
74+
--vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
75+
--vp-c-brand-text: var(--c-text-light-1);
76+
--c-bg-accent: var(--c-white-dark);
77+
--code-bg-color: var(--c-white-dark);
78+
--code-inline-bg-color: var(--c-white-dark);
79+
--code-font-family: 'dm', source-code-pro, Menlo, Monaco, Consolas,
80+
'Courier New', monospace;
81+
--code-font-size: 16px;
82+
83+
--vp-code-block-bg: var(--vp-c-bg-alt);
84+
--vp-code-line-highlight-color: rgba(0, 0, 0, 0.075);
85+
--vp-code-color: var(--vp-text-color);
86+
}
87+
88+
html.dark:root {
89+
/* --c-black: #ffffff;
90+
--c-white: #000000; */
91+
/* --c-divider-light: rgba(60, 60, 67, 0.12);
92+
--c-divider-dark: rgba(84, 84, 88, 0.48); */
93+
/* --c-brand-light: var(--c-yellow-light); */
94+
95+
--vp-c-brand-1: var(--c-yellow-1);
96+
--vp-c-brand-2: var(--c-yellow-2);
97+
--vp-c-brand-3: var(--c-yellow-3);
98+
99+
--vp-c-bg-alpha-with-backdrop: rgba(20, 25, 36, 0.7);
100+
--vp-c-bg-alpha-without-backdrop: rgba(20, 25, 36, 0.9);
101+
102+
--vp-code-line-highlight-color: rgba(0, 0, 0, 0.5);
103+
104+
--vp-c-text-1: var(--c-text-dark-1);
105+
--vp-c-brand-text: var(--c-text-light-1);
106+
--c-text-light: var(--c-text-dark-2);
107+
--c-text-lighter: var(--c-text-dark-3);
108+
--c-divider: var(--c-divider-dark);
109+
--c-bg-accent: var(--c-black-light);
110+
/* --vp-code-inline-bg: var(--vp-c-black-light); */
111+
112+
--vp-c-bg: var(--c-black);
113+
--vp-c-bg-soft: var(--c-black-light);
114+
--vp-c-bg-soft-up: var(--c-black-lighter);
115+
--vp-c-bg-mute: var(--c-black-light);
116+
--vp-c-bg-soft-mute: var(--c-black-lighter);
117+
--vp-c-bg-alt: #0d121b;
118+
--vp-c-bg-elv: var(--vp-c-bg-soft);
119+
--vp-c-bg-elv-mute: var(--vp-c-bg-soft-mute);
120+
--vp-c-mute: var(--vp-c-bg-mute);
121+
--vp-c-mute-dark: var(--c-black-lighter);
122+
--vp-c-mute-darker: var(--c-black-darker);
123+
124+
--vp-home-hero-name-background: -webkit-linear-gradient(78deg,
125+
var(--c-yellow-2) 30%,
126+
var(--c-green-3));
127+
}
128+
129+
html.dark .DocSearch {
130+
--docsearch-hit-active-color: var(--c-text-light-1);
131+
}
132+
133+
/**
134+
* Component: Button
135+
* -------------------------------------------------------------------------- */
136+
137+
:root {
138+
--vp-button-brand-border: var(--c-yellow-soft-1);
139+
--vp-button-brand-text: var(--c-black);
140+
--vp-button-brand-bg: var(--c-yellow-1);
141+
--vp-button-brand-hover-border: var(--c-yellow-2);
142+
--vp-button-brand-hover-text: var(--c-black-darker);
143+
--vp-button-brand-hover-bg: var(--c-yellow-2);
144+
--vp-button-brand-active-border: var(--c-yellow-soft-1);
145+
--vp-button-brand-active-text: var(--c-black-darker);
146+
--vp-button-brand-active-bg: var(--vp-button-brand-bg);
147+
}
148+
149+
/**
150+
* Component: Home
151+
* -------------------------------------------------------------------------- */
152+
153+
:root {
154+
--vp-home-hero-name-color: transparent;
155+
--vp-home-hero-name-background: linear-gradient(292deg,
156+
var(--c-text-light-2) 50%,
157+
var(--c-green-2));
158+
--vp-home-hero-image-background-image: linear-gradient(15deg,
159+
var(--c-yellow-2) 35%,
160+
var(--c-text-light-2) 15%);
161+
--vp-home-hero-image-filter: blur(40px);
162+
}
163+
164+
.VPHero .VPImage.image-src {
165+
max-height: 192px;
166+
}
167+
168+
@media (min-width: 640px) {
169+
:root {
170+
--vp-home-hero-image-filter: blur(56px);
171+
}
172+
173+
.VPHero .VPImage.image-src {
174+
max-height: 256px;
175+
}
176+
}
177+
178+
@media (min-width: 960px) {
179+
:root {
180+
--vp-home-hero-image-filter: blur(72px);
181+
}
182+
183+
.VPHero .VPImage.image-src {
184+
max-height: 320px;
185+
}
186+
}
187+
188+
.become-sponsor {
189+
font-size: 0.9em;
190+
font-weight: 700;
191+
width: auto;
192+
text-align: center;
193+
background-color: transparent;
194+
padding: 0.75em 2em;
195+
border-radius: 2em;
196+
transition: all 0.15s ease;
197+
box-sizing: border-box;
198+
border: 2px solid var(--c-yellow-2);
199+
}
200+
201+
.become-sponsor:hover {
202+
background-color: var(--c-yellow-1);
203+
text-decoration: none;
204+
border-color: var(--c-yellow-1);
205+
color: var(--c-text-light-1);
206+
}
207+
208+
.vp-doc a {
209+
text-decoration: none;
210+
}
211+
212+
.vp-doc a:hover {
213+
text-decoration: underline;
214+
}
215+
216+
.sponsors-top .become-sponsor {
217+
font-size: 0.75em;
218+
padding: 0.2em;
219+
width: auto;
220+
max-width: 150px;
221+
}
222+
223+
kbd {
224+
display: inline-block;
225+
padding: 3px 5px;
226+
font-size: 0.65em;
227+
color: var(--vp-c-text-1);
228+
vertical-align: middle;
229+
background-color: var(--vp-c-bg-mute);
230+
border: solid 1px var(--vp-c-bg-soft-mute);
231+
border-radius: 6px;
232+
box-shadow: inset 0 -1px 0 var(--vp-c-bg-soft-mute);
233+
line-height: 0.95em;
234+
}

docs/src/docker.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
# Docker build and run
22

3-
The ReefGuideAPI.jl package has an associated `Dockerfile` and build/publish process. This means you can run an instance of the ReefGuideAPI.jl package without needing to compile/build it with a local `Julia` installation. You will be able to view the latest published versions of the Docker image on the repository packages page.
3+
The ReefGuideAPI.jl package has an associated `Dockerfile` and build/publish process. This
4+
means you can run an instance of the ReefGuideAPI.jl package without needing to
5+
compile/build it with a local `Julia` installation. You will be able to view the latest
6+
published versions of the Docker image on the repository packages page.
47

58
## Mounting files and required data
69

docs/src/getting_started.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
# Getting Started
22

3-
43
## Setup
54

65
Initialize the project the usual way:

0 commit comments

Comments
 (0)