Skip to content

Commit f673229

Browse files
BruceKZBruceKZ
authored
feat: initialize Vue 3 frontend project and VitePress documentation (#4)
* ci: add GitHub Actions workflow for Pages deployment - Configure workflow to build VitePress docs and Vue frontend - Combine build outputs into a single deployment artifact - Automate deployment to GitHub Pages on pushes to main * docs: initialize VitePress documentation site - Set up VitePress skeleton in the docs directory - Add VitePress dev dependencies and scripts to the root package.json * feat: initialize Vue 3 frontend project - Scaffold Vue + Vite project structure in the frontend directory - Add base configurations (TypeScript, ESLint, Prettier, Vite config) - Add initial source code and assets
1 parent 3f74bd6 commit f673229

28 files changed

Lines changed: 9090 additions & 0 deletions

‎.github/workflows/deploy.yml‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [ main ]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: pages
15+
cancel-in-progress: false
16+
17+
jobs:
18+
build-and-deploy:
19+
runs-on: ubuntu-latest
20+
steps:
21+
- name: Checkout code
22+
uses: actions/checkout@v4
23+
24+
- name: Setup Node.js
25+
uses: actions/setup-node@v4
26+
with:
27+
node-version: 20
28+
cache: npm
29+
30+
- name: Install Root Dependencies (Docs)
31+
run: npm install
32+
33+
- name: Build Docs
34+
run: npx vitepress build docs
35+
36+
- name: Install Frontend Dependencies
37+
working-directory: ./frontend
38+
run: npm install
39+
40+
- name: Build Frontend
41+
working-directory: ./frontend
42+
run: npm run build
43+
44+
- name: Assemble Final Build
45+
run: |
46+
mkdir deploy_dist
47+
cp -R frontend/dist/* deploy_dist/
48+
mkdir -p deploy_dist/docs
49+
cp -R docs/.vitepress/dist/* deploy_dist/docs/
50+
51+
- name: Setup Pages
52+
uses: actions/configure-pages@v4
53+
54+
- name: Upload artifact
55+
uses: actions/upload-pages-artifact@v3
56+
with:
57+
path: './deploy_dist'
58+
59+
- name: Deploy to GitHub Pages
60+
id: deployment
61+
uses: actions/deploy-pages@v4

‎docs/.vitepress/config.mts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { defineConfig } from 'vitepress'
2+
3+
// https://vitepress.dev/reference/site-config
4+
export default defineConfig({
5+
title: "SwissReach Docs",
6+
description: "SwissReach is an interactive 4D isochrone visualization of the Swiss public transit network (SBB) using H3 hexagons. Developed for EPFL COM480.",
7+
themeConfig: {
8+
// https://vitepress.dev/reference/default-theme-config
9+
nav: [
10+
{ text: 'Home', link: '/' },
11+
{ text: 'Examples', link: '/markdown-examples' }
12+
],
13+
14+
sidebar: [
15+
{
16+
text: 'Examples',
17+
items: [
18+
{ text: 'Markdown Examples', link: '/markdown-examples' },
19+
{ text: 'Runtime API Examples', link: '/api-examples' }
20+
]
21+
}
22+
],
23+
24+
socialLinks: [
25+
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }
26+
]
27+
}
28+
})

‎docs/api-examples.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
outline: deep
3+
---
4+
5+
# Runtime API Examples
6+
7+
This page demonstrates usage of some of the runtime APIs provided by VitePress.
8+
9+
The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
10+
11+
```md
12+
<script setup>
13+
import { useData } from 'vitepress'
14+
15+
const { theme, page, frontmatter } = useData()
16+
</script>
17+
18+
## Results
19+
20+
### Theme Data
21+
<pre>{{ theme }}</pre>
22+
23+
### Page Data
24+
<pre>{{ page }}</pre>
25+
26+
### Page Frontmatter
27+
<pre>{{ frontmatter }}</pre>
28+
```
29+
30+
<script setup>
31+
import { useData } from 'vitepress'
32+
33+
const { site, theme, page, frontmatter } = useData()
34+
</script>
35+
36+
## Results
37+
38+
### Theme Data
39+
<pre>{{ theme }}</pre>
40+
41+
### Page Data
42+
<pre>{{ page }}</pre>
43+
44+
### Page Frontmatter
45+
<pre>{{ frontmatter }}</pre>
46+
47+
## More
48+
49+
Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).

‎docs/index.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
# https://vitepress.dev/reference/default-theme-home-page
3+
layout: home
4+
5+
hero:
6+
name: "SwissReach Docs"
7+
text: "SwissReach is an interactive 4D isochrone visualization of the Swiss public transit network (SBB) using H3 hexagons. Developed for EPFL COM480."
8+
tagline: My great project tagline
9+
actions:
10+
- theme: brand
11+
text: Markdown Examples
12+
link: /markdown-examples
13+
- theme: alt
14+
text: API Examples
15+
link: /api-examples
16+
17+
features:
18+
- title: Feature A
19+
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
20+
- title: Feature B
21+
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
22+
- title: Feature C
23+
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
24+
---
25+

‎docs/markdown-examples.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# Markdown Extension Examples
2+
3+
This page demonstrates some of the built-in markdown extensions provided by VitePress.
4+
5+
## Syntax Highlighting
6+
7+
VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
8+
9+
**Input**
10+
11+
````md
12+
```js{4}
13+
export default {
14+
data () {
15+
return {
16+
msg: 'Highlighted!'
17+
}
18+
}
19+
}
20+
```
21+
````
22+
23+
**Output**
24+
25+
```js{4}
26+
export default {
27+
data () {
28+
return {
29+
msg: 'Highlighted!'
30+
}
31+
}
32+
}
33+
```
34+
35+
## Custom Containers
36+
37+
**Input**
38+
39+
```md
40+
::: info
41+
This is an info box.
42+
:::
43+
44+
::: tip
45+
This is a tip.
46+
:::
47+
48+
::: warning
49+
This is a warning.
50+
:::
51+
52+
::: danger
53+
This is a dangerous warning.
54+
:::
55+
56+
::: details
57+
This is a details block.
58+
:::
59+
```
60+
61+
**Output**
62+
63+
::: info
64+
This is an info box.
65+
:::
66+
67+
::: tip
68+
This is a tip.
69+
:::
70+
71+
::: warning
72+
This is a warning.
73+
:::
74+
75+
::: danger
76+
This is a dangerous warning.
77+
:::
78+
79+
::: details
80+
This is a details block.
81+
:::
82+
83+
## More
84+
85+
Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).

‎frontend/.editorconfig‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
2+
charset = utf-8
3+
indent_size = 2
4+
indent_style = space
5+
insert_final_newline = true
6+
trim_trailing_whitespace = true
7+
end_of_line = lf
8+
max_line_length = 100

‎frontend/.gitattributes‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* text=auto eol=lf

‎frontend/.gitignore‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
.DS_Store
12+
dist
13+
dist-ssr
14+
coverage
15+
*.local
16+
17+
# Editor directories and files
18+
.vscode/*
19+
!.vscode/extensions.json
20+
.idea
21+
*.suo
22+
*.ntvs*
23+
*.njsproj
24+
*.sln
25+
*.sw?
26+
27+
*.tsbuildinfo
28+
29+
.eslintcache
30+
31+
# Cypress
32+
/cypress/videos/
33+
/cypress/screenshots/
34+
35+
# Vitest
36+
__screenshots__/
37+
38+
# Vite
39+
*.timestamp-*-*.mjs

‎frontend/.oxlintrc.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"$schema": "./node_modules/oxlint/configuration_schema.json",
3+
"plugins": ["eslint", "typescript", "unicorn", "oxc", "vue"],
4+
"env": {
5+
"browser": true
6+
},
7+
"categories": {
8+
"correctness": "error"
9+
}
10+
}

‎frontend/.prettierrc.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"$schema": "https://json.schemastore.org/prettierrc",
3+
"semi": false,
4+
"singleQuote": true,
5+
"printWidth": 100
6+
}

0 commit comments

Comments
 (0)