Skip to content

Commit

Permalink
Website for Theia Trace Extension documentation
Browse files Browse the repository at this point in the history
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]>
  • Loading branch information
Rodrigoplp-work committed Jan 26, 2023
1 parent 8757351 commit 722cc49
Show file tree
Hide file tree
Showing 20 changed files with 1,510 additions and 0 deletions.
13 changes: 13 additions & 0 deletions doc/web-doc/.eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example

# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock
15 changes: 15 additions & 0 deletions doc/web-doc/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
module.exports = {
root: true,
extends: ['eslint:recommended', 'prettier'],
plugins: ['svelte3'],
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020
},
env: {
browser: true,
es2017: true,
node: true
}
};
11 changes: 11 additions & 0 deletions doc/web-doc/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# LC_COLLATE=C sort .gitignore
!.env.example
.DS_Store
.env
.env.*
/.svelte-kit
/build
/package
node_modules
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
13 changes: 13 additions & 0 deletions doc/web-doc/.prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example

# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock
9 changes: 9 additions & 0 deletions doc/web-doc/.prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}
37 changes: 37 additions & 0 deletions doc/web-doc/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
# Documentation framework for Theia Trace Extension

## Installation

Requirements: NodeJS version 16 or above.

```bash
cd doc/web-doc
yarn
```

Run site

```bash
yarn dev

# or start the server and open the app in a new browser tab
yarn dev --open
```

The site will be running at `http://localhost:5173`.

## Code style

Run Prettier from the root.

Check code style:

yarn lint

Fix code style:

yarn format

## Development

Website created with [SvelteKit](https://kit.svelte.dev)
24 changes: 24 additions & 0 deletions doc/web-doc/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"name": "web-doc",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write ."
},
"devDependencies": {
"@sveltejs/adapter-auto": "^1.0.0",
"@sveltejs/kit": "^1.0.0",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte3": "^4.0.0",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.8.1",
"svelte": "^3.54.0",
"vite": "^4.0.0"
},
"type": "module"
}
12 changes: 12 additions & 0 deletions doc/web-doc/src/app.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
126 changes: 126 additions & 0 deletions doc/web-doc/src/lib/components/Header.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<script>
import { page } from '$app/stores';
import logo from '$lib/images/tc_icon_256x256.png';
import github from '$lib/images/github.svg';
</script>

<header>
<div class="corner">
<a href="https://projects.eclipse.org/projects/tools.tracecompass">
<img src={logo} alt="Trace Compass" />
</a>
</div>

<nav>
<svg viewBox="0 0 2 3" aria-hidden="true">
<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
</svg>
<ul>
<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
<a href="/">Home</a>
</li>
<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
<a href="/about">About</a>
</li>
</ul>
<svg viewBox="0 0 2 3" aria-hidden="true">
<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
</svg>
</nav>

<div class="corner">
<a href="https://github.com/eclipse-cdt-cloud/theia-trace-extension">
<img src={github} alt="GitHub" />
</a>
</div>
</header>

<style>
header {
display: flex;
justify-content: space-between;
}
.corner {
width: 3em;
height: 3em;
}
.corner a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.corner img {
width: 2em;
height: 2em;
object-fit: contain;
}
nav {
display: flex;
justify-content: center;
--background: rgba(255, 255, 255, 0.7);
}
svg {
width: 2em;
height: 3em;
display: block;
}
path {
fill: var(--background);
}
ul {
position: relative;
padding: 0;
margin: 0;
height: 3em;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
background: var(--background);
background-size: contain;
}
li {
position: relative;
height: 100%;
}
li[aria-current='page']::before {
--size: 6px;
content: '';
width: 0;
height: 0;
position: absolute;
top: 0;
left: calc(50% - var(--size));
border: var(--size) solid transparent;
border-top: var(--size) solid var(--color-theme-1);
}
nav a {
display: flex;
height: 100%;
align-items: center;
padding: 0 0.5rem;
color: var(--color-text);
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
text-decoration: none;
transition: color 0.2s linear;
}
a:hover {
color: var(--color-theme-1);
}
</style>
36 changes: 36 additions & 0 deletions doc/web-doc/src/lib/components/Sidebar.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<script>
import { page } from '$app/stores';
import { goto } from '$app/navigation';
</script>

<div class="sidebar">
<ul>
<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
<button on:click={() => goto('/')}>Home</button>
</li>
<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
<button on:click={() => goto('/about')}>About</button>
</li>
</ul>
</div>

<style>
.sidebar {
width: 10em;
}
ul {
padding: 0;
}
li {
height: 3em;
list-style: none;
}
button {
width: 100%;
height: 100%;
background: none;
}
</style>
16 changes: 16 additions & 0 deletions doc/web-doc/src/lib/images/github.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/web-doc/src/lib/images/tc_icon_256x256.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
72 changes: 72 additions & 0 deletions doc/web-doc/src/routes/+layout.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<script>
import Header from '$lib/components/Header.svelte';
import Sidebar from '$lib/components/Sidebar.svelte';
</script>

<div class="app">
<Header />

<main>
<div class="content">
<Sidebar />
<div class="inner-page">
<slot />
</div>
</div>
</main>

<footer>
<p>
<a href="https://github.com/eclipse-cdt-cloud/theia-trace-extension">Theia Trace Extension</a>
</p>
</footer>
</div>

<style>
.app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
display: flex;
flex-direction: row;
}
main {
flex: 1;
display: flex;
flex-direction: column;
padding: 1rem;
width: 100%;
max-width: 64rem;
margin: 0 auto;
box-sizing: border-box;
}
.inner-page {
flex: 1;
display: flex;
flex-direction: column;
}
footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 12px;
}
footer a {
font-weight: bold;
}
@media (min-width: 480px) {
footer {
padding: 12px 0;
}
}
</style>
Loading

0 comments on commit 722cc49

Please sign in to comment.