Skip to content

Commit f333e9e

Browse files
authored
Begin docs website (#875)
- **bump: version 0.1.11** - **clarify `courseware` package responsibilities** - **wip - vitepress docs** - **checkpoint: working import from MR...** - **add target imports** - **test: use a local import. works.** - **add todo imports** - **import ViewData from common... works!** - **add common-ui composable imports... working** - **add FallingLettersQuesion import... working** - **add vue imports... working** - **add vitepress vendored docs...** - **rm testComponent** - **"working" render of fallingLetters component.** - **rm FallingLettersWrapper** - **simplify usage of FallingLetters** - **add logo + brand color css** - **branding for gradient defs** - **tmp: add existing vitepress template comonents...** - **add custom HERO template...** - **add docs deploy workflow**
2 parents bb88c9a + 1f6697b commit f333e9e

File tree

204 files changed

+20311
-188
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

204 files changed

+20311
-188
lines changed

.github/workflows/docs-deploy.yml

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# Sample workflow for building and deploying a VitePress site to GitHub Pages
2+
#
3+
name: Deploy VitePress site to Pages
4+
5+
on:
6+
# Runs on pushes targeting the `main` branch. Change this to `master` if you're
7+
# using the `master` branch as the default branch.
8+
push:
9+
branches: [master]
10+
11+
# Allows you to run this workflow manually from the Actions tab
12+
workflow_dispatch:
13+
14+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
15+
permissions:
16+
contents: read
17+
pages: write
18+
id-token: write
19+
20+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
21+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
22+
concurrency:
23+
group: pages
24+
cancel-in-progress: false
25+
26+
jobs:
27+
# Build job
28+
build:
29+
runs-on: ubuntu-latest
30+
steps:
31+
- name: Checkout
32+
uses: actions/checkout@v4
33+
with:
34+
fetch-depth: 0 # Not needed if lastUpdated is not enabled
35+
# - uses: pnpm/action-setup@v3 # Uncomment this block if you're using pnpm
36+
# with:
37+
# version: 9 # Not needed if you've set "packageManager" in package.json
38+
# - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
39+
- name: Setup Node
40+
uses: actions/setup-node@v4
41+
with:
42+
node-version: 22
43+
cache: npm # or pnpm / yarn
44+
- name: Setup Pages
45+
uses: actions/configure-pages@v4
46+
- name: Install dependencies
47+
run: npm ci # or pnpm install / yarn install / bun install
48+
- name: Build with VitePress
49+
run: npm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
50+
- name: Upload artifact
51+
uses: actions/upload-pages-artifact@v3
52+
with:
53+
path: docs/.vitepress/dist
54+
55+
# Deployment job
56+
deploy:
57+
environment:
58+
name: github-pages
59+
url: ${{ steps.deployment.outputs.page_url }}
60+
needs: build
61+
runs-on: ubuntu-latest
62+
name: Deploy
63+
steps:
64+
- name: Deploy to GitHub Pages
65+
id: deployment
66+
uses: actions/deploy-pages@v4

.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,8 @@ ignore
4747

4848
# node pouchdb userdbs that get popped by `db` package sometimes. nuisance.
4949
userdb-Guest
50+
51+
# vitepress docs build/dev output
52+
53+
docs/.vitepress/dist
54+
docs/.vitepress/cache
Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import { createRequire } from 'module'
2+
import { defineAdditionalConfig, type DefaultTheme } from 'vitepress'
3+
4+
const require = createRequire(import.meta.url)
5+
const pkg = require('vitepress/package.json')
6+
7+
export default defineAdditionalConfig({
8+
lang: 'en-US',
9+
description: 'Vite & Vue powered static site generator.',
10+
11+
themeConfig: {
12+
nav: nav(),
13+
14+
sidebar: {
15+
'/guide/': { base: '/guide/', items: sidebarGuide() },
16+
'/reference/': { base: '/reference/', items: sidebarReference() }
17+
},
18+
19+
editLink: {
20+
pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
21+
text: 'Edit this page on GitHub'
22+
},
23+
24+
footer: {
25+
message: 'Released under the MIT License.',
26+
copyright: 'Copyright © 2019-present Evan You'
27+
}
28+
}
29+
})
30+
31+
function nav(): DefaultTheme.NavItem[] {
32+
return [
33+
{
34+
text: 'Guide',
35+
link: '/guide/what-is-vitepress',
36+
activeMatch: '/guide/'
37+
},
38+
{
39+
text: 'Reference',
40+
link: '/reference/site-config',
41+
activeMatch: '/reference/'
42+
},
43+
{
44+
text: pkg.version,
45+
items: [
46+
{
47+
text: 'Changelog',
48+
link: 'https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md'
49+
},
50+
{
51+
text: 'Contributing',
52+
link: 'https://github.com/vuejs/vitepress/blob/main/.github/contributing.md'
53+
}
54+
]
55+
}
56+
]
57+
}
58+
59+
function sidebarGuide(): DefaultTheme.SidebarItem[] {
60+
return [
61+
{
62+
text: 'Introduction',
63+
collapsed: false,
64+
items: [
65+
{ text: 'What is VitePress?', link: 'what-is-vitepress' },
66+
{ text: 'Getting Started', link: 'getting-started' },
67+
{ text: 'Routing', link: 'routing' },
68+
{ text: 'Deploy', link: 'deploy' }
69+
]
70+
},
71+
{
72+
text: 'Writing',
73+
collapsed: false,
74+
items: [
75+
{ text: 'Markdown Extensions', link: 'markdown' },
76+
{ text: 'Asset Handling', link: 'asset-handling' },
77+
{ text: 'Frontmatter', link: 'frontmatter' },
78+
{ text: 'Using Vue in Markdown', link: 'using-vue' },
79+
{ text: 'Internationalization', link: 'i18n' }
80+
]
81+
},
82+
{
83+
text: 'Customization',
84+
collapsed: false,
85+
items: [
86+
{ text: 'Using a Custom Theme', link: 'custom-theme' },
87+
{
88+
text: 'Extending the Default Theme',
89+
link: 'extending-default-theme'
90+
},
91+
{ text: 'Build-Time Data Loading', link: 'data-loading' },
92+
{ text: 'SSR Compatibility', link: 'ssr-compat' },
93+
{ text: 'Connecting to a CMS', link: 'cms' }
94+
]
95+
},
96+
{
97+
text: 'Experimental',
98+
collapsed: false,
99+
items: [
100+
{ text: 'MPA Mode', link: 'mpa-mode' },
101+
{ text: 'Sitemap Generation', link: 'sitemap-generation' }
102+
]
103+
},
104+
{ text: 'Config & API Reference', base: '/reference/', link: 'site-config' }
105+
]
106+
}
107+
108+
function sidebarReference(): DefaultTheme.SidebarItem[] {
109+
return [
110+
{
111+
text: 'Reference',
112+
items: [
113+
{ text: 'Site Config', link: 'site-config' },
114+
{ text: 'Frontmatter Config', link: 'frontmatter-config' },
115+
{ text: 'Runtime API', link: 'runtime-api' },
116+
{ text: 'CLI', link: 'cli' },
117+
{
118+
text: 'Default Theme',
119+
base: '/reference/default-theme-',
120+
items: [
121+
{ text: 'Overview', link: 'config' },
122+
{ text: 'Nav', link: 'nav' },
123+
{ text: 'Sidebar', link: 'sidebar' },
124+
{ text: 'Home Page', link: 'home-page' },
125+
{ text: 'Footer', link: 'footer' },
126+
{ text: 'Layout', link: 'layout' },
127+
{ text: 'Badge', link: 'badge' },
128+
{ text: 'Team Page', link: 'team-page' },
129+
{ text: 'Prev / Next Links', link: 'prev-next-links' },
130+
{ text: 'Edit Link', link: 'edit-link' },
131+
{ text: 'Last Updated Timestamp', link: 'last-updated' },
132+
{ text: 'Search', link: 'search' },
133+
{ text: 'Carbon Ads', link: 'carbon-ads' }
134+
]
135+
}
136+
]
137+
}
138+
]
139+
}
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# Asset Handling
2+
3+
## Referencing Static Assets
4+
5+
All Markdown files are compiled into Vue components and processed by [Vite](https://vitejs.dev/guide/assets.html). You can, **and should**, reference any assets using relative URLs:
6+
7+
```md
8+
![An image](./image.png)
9+
```
10+
11+
You can reference static assets in your markdown files, your `*.vue` components in the theme, styles and plain `.css` files either using absolute public paths (based on project root) or relative paths (based on your file system). The latter is similar to the behavior you are used to if you have used Vite, Vue CLI, or webpack's `file-loader`.
12+
13+
Common image, media, and font filetypes are detected and included as assets automatically.
14+
15+
::: tip Linked files are not treated as assets
16+
PDFs or other documents referenced by links within markdown files are not automatically treated as assets. To make linked files accessible, you must manually place them within the [`public`](#the-public-directory) directory of your project.
17+
:::
18+
19+
All referenced assets, including those using absolute paths, will be copied to the output directory with a hashed file name in the production build. Never-referenced assets will not be copied. Image assets smaller than 4kb will be base64 inlined - this can be configured via the [`vite`](../reference/site-config#vite) config option.
20+
21+
All **static** path references, including absolute paths, should be based on your working directory structure.
22+
23+
## The Public Directory
24+
25+
Sometimes you may need to provide static assets that are not directly referenced in any of your Markdown or theme components, or you may want to serve certain files with the original filename. Examples of such files include `robots.txt`, favicons, and PWA icons.
26+
27+
You can place these files in the `public` directory under the [source directory](./routing#source-directory). For example, if your project root is `./docs` and using default source directory location, then your public directory will be `./docs/public`.
28+
29+
Assets placed in `public` will be copied to the root of the output directory as-is.
30+
31+
Note that you should reference files placed in `public` using root absolute path - for example, `public/icon.png` should always be referenced in source code as `/icon.png`.
32+
33+
## Base URL
34+
35+
If your site is deployed to a non-root URL, you will need to set the `base` option in `.vitepress/config.js`. For example, if you plan to deploy your site to `https://foo.github.io/bar/`, then `base` should be set to `'/bar/'` (it should always start and end with a slash).
36+
37+
All your static asset paths are automatically processed to adjust for different `base` config values. For example, if you have an absolute reference to an asset under `public` in your markdown:
38+
39+
```md
40+
![An image](/image-inside-public.png)
41+
```
42+
43+
You do **not** need to update it when you change the `base` config value in this case.
44+
45+
However, if you are authoring a theme component that links to assets dynamically, e.g. an image whose `src` is based on a theme config value:
46+
47+
```vue
48+
<img :src="theme.logoPath" />
49+
```
50+
51+
In this case it is recommended to wrap the path with the [`withBase` helper](../reference/runtime-api#withbase) provided by VitePress:
52+
53+
```vue
54+
<script setup>
55+
import { withBase, useData } from 'vitepress'
56+
57+
const { theme } = useData()
58+
</script>
59+
60+
<template>
61+
<img :src="withBase(theme.logoPath)" />
62+
</template>
63+
```
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
outline: deep
3+
---
4+
5+
# Connecting to a CMS
6+
7+
## General Workflow
8+
9+
Connecting VitePress to a CMS will largely revolve around [Dynamic Routes](./routing#dynamic-routes). Make sure to understand how it works before proceeding.
10+
11+
Since each CMS will work differently, here we can only provide a generic workflow that you will need to adapt to your specific scenario.
12+
13+
1. If your CMS requires authentication, create an `.env` file to store your API tokens and load it so:
14+
15+
```js
16+
// posts/[id].paths.js
17+
import { loadEnv } from 'vitepress'
18+
19+
const env = loadEnv('', process.cwd())
20+
```
21+
22+
2. Fetch the necessary data from the CMS and format it into proper paths data:
23+
24+
```js
25+
export default {
26+
async paths() {
27+
// use respective CMS client library if needed
28+
const data = await (await fetch('https://my-cms-api', {
29+
headers: {
30+
// token if necessary
31+
}
32+
})).json()
33+
34+
return data.map(entry => {
35+
return {
36+
params: { id: entry.id, /* title, authors, date etc. */ },
37+
content: entry.content
38+
}
39+
})
40+
}
41+
}
42+
```
43+
44+
3. Render the content in the page:
45+
46+
```md
47+
# {{ $params.title }}
48+
49+
- by {{ $params.author }} on {{ $params.date }}
50+
51+
<!-- @content -->
52+
```
53+
54+
## Integration Guides
55+
56+
If you have written a guide on integrating VitePress with a specific CMS, please use the "Edit this page" link below to submit it here!

0 commit comments

Comments
 (0)