Skip to content

Commit 722cc49

Browse files
Rodrigoplp-workRodrigoplp-work
committed
Website for Theia Trace Extension documentation
Adds a website in the "doc" folder to hold the documentation for Theia Trace Extension. Website built with [Svelte Kit](https://kit.svelte.dev). This PR replaces eclipse-cdt-cloud#776, which accomplishes the same goal but uses GatsbyJS. The proposal to replace Gatsby with Svelte aims at reducing the code base and adopting more modern solutions for the problem of rendering static documentation sites. Signed-off-by: Rodrigo Pinto <[email protected]>
1 parent 8757351 commit 722cc49

20 files changed

+1510
-0
lines changed

‎doc/web-doc/.eslintignore‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
10+
# Ignore files for PNPM, NPM and YARN
11+
pnpm-lock.yaml
12+
package-lock.json
13+
yarn.lock

‎doc/web-doc/.eslintrc.cjs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
module.exports = {
2+
root: true,
3+
extends: ['eslint:recommended', 'prettier'],
4+
plugins: ['svelte3'],
5+
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
6+
parserOptions: {
7+
sourceType: 'module',
8+
ecmaVersion: 2020
9+
},
10+
env: {
11+
browser: true,
12+
es2017: true,
13+
node: true
14+
}
15+
};

‎doc/web-doc/.gitignore‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# LC_COLLATE=C sort .gitignore
2+
!.env.example
3+
.DS_Store
4+
.env
5+
.env.*
6+
/.svelte-kit
7+
/build
8+
/package
9+
node_modules
10+
vite.config.js.timestamp-*
11+
vite.config.ts.timestamp-*

‎doc/web-doc/.prettierignore‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
10+
# Ignore files for PNPM, NPM and YARN
11+
pnpm-lock.yaml
12+
package-lock.json
13+
yarn.lock

‎doc/web-doc/.prettierrc‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"useTabs": true,
3+
"singleQuote": true,
4+
"trailingComma": "none",
5+
"printWidth": 100,
6+
"plugins": ["prettier-plugin-svelte"],
7+
"pluginSearchDirs": ["."],
8+
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
9+
}

‎doc/web-doc/README.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Documentation framework for Theia Trace Extension
2+
3+
## Installation
4+
5+
Requirements: NodeJS version 16 or above.
6+
7+
```bash
8+
cd doc/web-doc
9+
yarn
10+
```
11+
12+
Run site
13+
14+
```bash
15+
yarn dev
16+
17+
# or start the server and open the app in a new browser tab
18+
yarn dev --open
19+
```
20+
21+
The site will be running at `http://localhost:5173`.
22+
23+
## Code style
24+
25+
Run Prettier from the root.
26+
27+
Check code style:
28+
29+
yarn lint
30+
31+
Fix code style:
32+
33+
yarn format
34+
35+
## Development
36+
37+
Website created with [SvelteKit](https://kit.svelte.dev)

‎doc/web-doc/package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "web-doc",
3+
"version": "0.0.1",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite dev",
7+
"build": "vite build",
8+
"preview": "vite preview",
9+
"lint": "prettier --plugin-search-dir . --check . && eslint .",
10+
"format": "prettier --plugin-search-dir . --write ."
11+
},
12+
"devDependencies": {
13+
"@sveltejs/adapter-auto": "^1.0.0",
14+
"@sveltejs/kit": "^1.0.0",
15+
"eslint": "^8.28.0",
16+
"eslint-config-prettier": "^8.5.0",
17+
"eslint-plugin-svelte3": "^4.0.0",
18+
"prettier": "^2.8.0",
19+
"prettier-plugin-svelte": "^2.8.1",
20+
"svelte": "^3.54.0",
21+
"vite": "^4.0.0"
22+
},
23+
"type": "module"
24+
}

‎doc/web-doc/src/app.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6+
<meta name="viewport" content="width=device-width" />
7+
%sveltekit.head%
8+
</head>
9+
<body data-sveltekit-preload-data="hover">
10+
<div style="display: contents">%sveltekit.body%</div>
11+
</body>
12+
</html>

‎doc/web-doc/src/lib/components/Header.svelte‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<script>
2+
import { page } from '$app/stores';
3+
import logo from '$lib/images/tc_icon_256x256.png';
4+
import github from '$lib/images/github.svg';
5+
</script>
6+
7+
<header>
8+
<div class="corner">
9+
<a href="https://projects.eclipse.org/projects/tools.tracecompass">
10+
<img src={logo} alt="Trace Compass" />
11+
</a>
12+
</div>
13+
14+
<nav>
15+
<svg viewBox="0 0 2 3" aria-hidden="true">
16+
<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
17+
</svg>
18+
<ul>
19+
<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
20+
<a href="/">Home</a>
21+
</li>
22+
<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
23+
<a href="/about">About</a>
24+
</li>
25+
</ul>
26+
<svg viewBox="0 0 2 3" aria-hidden="true">
27+
<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
28+
</svg>
29+
</nav>
30+
31+
<div class="corner">
32+
<a href="https://github.com/eclipse-cdt-cloud/theia-trace-extension">
33+
<img src={github} alt="GitHub" />
34+
</a>
35+
</div>
36+
</header>
37+
38+
<style>
39+
header {
40+
display: flex;
41+
justify-content: space-between;
42+
}
43+
44+
.corner {
45+
width: 3em;
46+
height: 3em;
47+
}
48+
49+
.corner a {
50+
display: flex;
51+
align-items: center;
52+
justify-content: center;
53+
width: 100%;
54+
height: 100%;
55+
}
56+
57+
.corner img {
58+
width: 2em;
59+
height: 2em;
60+
object-fit: contain;
61+
}
62+
63+
nav {
64+
display: flex;
65+
justify-content: center;
66+
--background: rgba(255, 255, 255, 0.7);
67+
}
68+
69+
svg {
70+
width: 2em;
71+
height: 3em;
72+
display: block;
73+
}
74+
75+
path {
76+
fill: var(--background);
77+
}
78+
79+
ul {
80+
position: relative;
81+
padding: 0;
82+
margin: 0;
83+
height: 3em;
84+
display: flex;
85+
justify-content: center;
86+
align-items: center;
87+
list-style: none;
88+
background: var(--background);
89+
background-size: contain;
90+
}
91+
92+
li {
93+
position: relative;
94+
height: 100%;
95+
}
96+
97+
li[aria-current='page']::before {
98+
--size: 6px;
99+
content: '';
100+
width: 0;
101+
height: 0;
102+
position: absolute;
103+
top: 0;
104+
left: calc(50% - var(--size));
105+
border: var(--size) solid transparent;
106+
border-top: var(--size) solid var(--color-theme-1);
107+
}
108+
109+
nav a {
110+
display: flex;
111+
height: 100%;
112+
align-items: center;
113+
padding: 0 0.5rem;
114+
color: var(--color-text);
115+
font-weight: 700;
116+
font-size: 0.8rem;
117+
text-transform: uppercase;
118+
letter-spacing: 0.1em;
119+
text-decoration: none;
120+
transition: color 0.2s linear;
121+
}
122+
123+
a:hover {
124+
color: var(--color-theme-1);
125+
}
126+
</style>

‎doc/web-doc/src/lib/components/Sidebar.svelte‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script>
2+
import { page } from '$app/stores';
3+
import { goto } from '$app/navigation';
4+
</script>
5+
6+
<div class="sidebar">
7+
<ul>
8+
<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
9+
<button on:click={() => goto('/')}>Home</button>
10+
</li>
11+
<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
12+
<button on:click={() => goto('/about')}>About</button>
13+
</li>
14+
</ul>
15+
</div>
16+
17+
<style>
18+
.sidebar {
19+
width: 10em;
20+
}
21+
22+
ul {
23+
padding: 0;
24+
}
25+
26+
li {
27+
height: 3em;
28+
list-style: none;
29+
}
30+
31+
button {
32+
width: 100%;
33+
height: 100%;
34+
background: none;
35+
}
36+
</style>

0 commit comments

Comments
 (0)