Skip to content

Commit a2d0891

Browse files
committed
Improvements to pages and template.
-Add Light/Dark mode selector. -Add product.json data with global variables. -New home and download pages.
1 parent 21288e7 commit a2d0891

11 files changed

Lines changed: 348 additions & 73 deletions

File tree

eleventy.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ export default async function(eleventyConfig)
55
eleventyConfig.addPassthroughCopy("src/css");
66
eleventyConfig.addPassthroughCopy("src/img");
77
eleventyConfig.addPassthroughCopy("src/js");
8+
eleventyConfig.addGlobalData("year", new Date().getFullYear());
89
};

src/_data/product.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "BIMROCKET",
3+
"version": "v1.0-alpha-10",
4+
"testUrl": "https://bim.santfeliu.cat"
5+
}

src/_includes/base.njk

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<title>{{ title }} | BIMROCKET</title>
4+
<title>{{ title }} | {{ product.name }}</title>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<meta name="description" content="BIMROCKET - The Open BIM Platform">
88
<meta name="keywords" content="BIM, THREEJS, OrientDB, MongoDB">
9-
9+
<meta name="theme-color" content="#404040">
10+
<script>
11+
if (window.localStorage)
12+
{
13+
const storedTheme = window.localStorage.getItem("theme");
14+
if (storedTheme)
15+
{
16+
document.documentElement.setAttribute("data-theme", storedTheme);
17+
}
18+
}
19+
</script>
20+
1021
<link rel="stylesheet" href="/css/styles.css">
1122
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
1223
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -15,9 +26,12 @@
1526
</head>
1627
<body>
1728
<header>
18-
<a href="/"><h1><img src="/img/bimrocket.svg" alt="bimrocket" class="logo"></h1></a>
29+
<a href="/"><h1><img src="/img/bimrocket.svg" alt="{{ product.name }}" class="logo"></h1></a>
30+
31+
<button class="image-button menu-toggle" title="menu toggler"><span class="material-symbols-outlined">menu</span></button>
32+
<button class="image-button theme-toggle" title="theme selector"><span class="material-symbols-outlined">dark_mode</span></button>
33+
1934
<nav>
20-
<button class="image-button menu-toggle"><span class="material-symbols-outlined">menu</span></button>
2135
<ul id="menu">
2236
<li><a href="/">Home</a></li>
2337
<li class="submenu">
@@ -43,14 +57,16 @@
4357

4458
<main>
4559
<div class="content">
60+
{% if page.url != "/" %}
4661
<h2><span class="material-symbols-outlined">{{ icon }}</span> {{ title }}</h2>
62+
{% endif %}
4763

4864
{{ content | safe }}
4965
</div>
5066
</main>
5167

5268
<footer>
53-
<p><a href="/"2025 BIMROCKET</a></p>
69+
<p><a href="/"{{ year }} {{ product.name }}</a></p>
5470
<a href="https://github.com/bimrocket/bimrocket" class="github"><img src="/img/github.svg" alt="github" /> GitHub</a>
5571
</footer>
5672

src/architecture.njk

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@ icon: dashboard_2
55
---
66

77
<a href="/img/architecture.png" title="view image">
8-
<img src="/img/architecture.png" alt="architecuture" style="max-width: 100%">
8+
<img src="/img/architecture.png" alt="BIMROCKET architecture" style="max-width: 100%">
99
</a>
10+

src/css/styles.css

Lines changed: 133 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
--font-weight: 500;
66
--scrollbar-color: #c00000;
77
--header-height: 48px;
8-
--header-background: #444;
8+
--header-background: #404040;
99
--header-color: #ffffff;
1010
--body-background: #fafafa;
11-
--body-color: #444;
11+
--body-color: #555;
1212
--max-content-width: 1024px;
1313
--menu-color: #fff;
1414
--menu-background: #222;
@@ -21,8 +21,36 @@
2121
--section-background: #ffffff;
2222
--footer-color: #fafafa;
2323
--footer-background: #444;
24-
--border-radius: 4px;
24+
--border-radius: 6px;
25+
--pre-background: #f0f0f0;
26+
--code-background: #f0f0f0;
2527
--link-color: #d00000;
28+
--button-hover-color: #f0f0f0;
29+
--button-hover-background: #b05050;
30+
}
31+
32+
[data-theme="dark"]
33+
{
34+
--header-background: #444;
35+
--header-color: #ffffff;
36+
--body-background: #302020;
37+
--body-color: #c0d0c0;
38+
--menu-color: #fff;
39+
--menu-background: #222;
40+
--menu-hover-color: #fff;
41+
--menu-hover-background: #c00000;
42+
--vmenu-color: #fff;
43+
--vmenu-background: #222;
44+
--vmenu-hover-color: #fff;
45+
--vmenu-hover-background: var(--menu-hover-background);
46+
--section-background: #111;
47+
--footer-color: #fafafa;
48+
--footer-background: #444;
49+
--pre-background: #404040;
50+
--code-background: #404040;
51+
--link-color: #ff6060;
52+
--button-hover-color: #f0f0f0;
53+
--button-hover-background: #b05050;
2654
}
2755

2856
html, body
@@ -38,6 +66,7 @@ html, body
3866
height: 100vh;
3967
display: flex;
4068
flex-direction: column;
69+
transition: background-color 0.3s linear, color 0.3s linear;
4170
}
4271

4372
form
@@ -229,6 +258,18 @@ header button.menu-toggle.image-button
229258
display: none;
230259
}
231260

261+
header button.theme-toggle.image-button
262+
{
263+
position: fixed;
264+
background: none;
265+
color: white;
266+
padding: 0;
267+
top:0;
268+
right:0;
269+
width: var(--header-height);
270+
height: var(--header-height);
271+
}
272+
232273
a
233274
{
234275
text-decoration: none;
@@ -248,9 +289,10 @@ code
248289
overflow-wrap: break-word;
249290
word-break: break-word;
250291
white-space: normal;
251-
background: #f0f0f0;
292+
background: var(--code-background);
252293
border-radius: var(--border-radius);
253-
padding: 4px;
294+
padding: 2px 4px 2px 4px;
295+
transition: background-color 0.3s linear, color 0.3s linear;
254296
}
255297

256298
.flex
@@ -263,24 +305,61 @@ code
263305
flex-grow: 1;
264306
}
265307

308+
.m-1
309+
{
310+
margin: 0.25rem;
311+
}
312+
266313
.ml-1
267314
{
268-
margin-left: 0.5rem;
315+
margin-left: 0.25rem;
269316
}
270317

271318
.mr-1
272319
{
273-
margin-right: 0.5rem;
320+
margin-right: 0.25rem;
274321
}
275322

276323
.mt-1
277324
{
278-
margin-top: 0.5rem;
325+
margin-top: 0.25rem;
279326
}
280327

281328
.mb-1
282329
{
283-
margin-bottom: 0.5rem;
330+
margin-bottom: 0.25rem;
331+
}
332+
333+
.p-1
334+
{
335+
padding: 0.25rem;
336+
}
337+
338+
.pl-1
339+
{
340+
padding-left: 0.25rem;
341+
}
342+
343+
.pr-1
344+
{
345+
padding-right: 0.25rem;
346+
}
347+
348+
.pt-1
349+
{
350+
padding-top: 0.25rem;
351+
}
352+
353+
.pb-1
354+
{
355+
padding-bottom: 0.25rem;
356+
}
357+
358+
p.featured
359+
{
360+
font-size: 20px;
361+
font-weight: bold;
362+
margin: 0.2rem;
284363
}
285364

286365
section
@@ -292,6 +371,47 @@ section
292371
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
293372
}
294373

374+
section.download
375+
{
376+
display: flex;
377+
}
378+
379+
section.download > span
380+
{
381+
margin-top: 22px;
382+
margin-right: 6px;
383+
}
384+
385+
a.link-button
386+
{
387+
border: 1px solid var(--link-color);
388+
border-radius: var(--border-radius);
389+
display: inline-flex;
390+
text-decoration: none;
391+
padding: 6px;
392+
padding-right: 12px;
393+
vertical-align: middle;
394+
transition: background-color 0.2s linear, color 0.2s linear;
395+
}
396+
397+
a.link-button:hover
398+
{
399+
text-decoration: none;
400+
color: var(--button-hover-color);
401+
background-color: var(--button-hover-background);
402+
}
403+
404+
.screenshots
405+
{
406+
margin-top: 20px;
407+
}
408+
409+
.screenshots img
410+
{
411+
max-width: 100%;
412+
margin-top: 20px;
413+
}
414+
295415
main ul > li, main ol > li
296416
{
297417
margin-bottom: 0.5rem;
@@ -319,15 +439,17 @@ section > h3
319439

320440
pre
321441
{
322-
background: #f0f0f0;
442+
background: var(--pre-background);
323443
border-radius: var(--border-radius);
324444
max-width: 100%;
325445
overflow-x: auto;
326446
overflow-y: hidden;
447+
padding: 2px;
327448
}
328449

329450
.language-yaml
330451
{
452+
padding: 0;
331453
font-family: monospace;
332454
white-space: pre;
333455
margin: 1em 0;
@@ -369,7 +491,7 @@ nav.pagination
369491

370492
a.github
371493
{
372-
display: flex;
494+
display: inline-flex;
373495
align-items: center;
374496
justify-content: center;
375497
}

src/download.njk

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,71 @@ title: Download
33
layout: base.njk
44
icon: download
55
---
6+
7+
<p>Current version: <strong>{{ product.version }}</strong></p>
8+
<p><a href="https://github.com/bimrocket/bimrocket/releases/tag/{{ product.version }}">Release notes</a></p>
9+
10+
<section class="download">
11+
<span class="material-symbols-outlined">deployed_code</span>
12+
<div>
13+
<h3>
14+
{{ product.name }} zip package for Windows x64.
15+
</h3>
16+
<p>Includes openjdk-17 for Windows x64.</p>
17+
<div>
18+
<a href="https://github.com/bimrocket/bimrocket/releases/download/{{ product.version }}/bimrocket-tomcat-1.0-windows-x64.zip" class="link-button">
19+
<span class="material-symbols-outlined pr-1">download</span> Download
20+
</a>
21+
</div>
22+
</div>
23+
</section>
24+
25+
<section class="download">
26+
<span class="material-symbols-outlined pr-1">deployed_code</span>
27+
<div>
28+
<h3>
29+
{{ product.name }} generic zip package for all platforms (Linux, MacOS, Windows).
30+
</h3>
31+
<p>Requires openjdk-17+ that must be installed separatelly.</p>
32+
<div>
33+
<a href="https://github.com/bimrocket/bimrocket/releases/download/{{ product.version }}/bimrocket-tomcat-1.0-generic.zip" class="link-button">
34+
<span class="material-symbols-outlined pr-1">download</span> Download
35+
</a>
36+
</div>
37+
</div>
38+
</section>
39+
40+
<section class="download">
41+
<span class="material-symbols-outlined pr-1">deployed_code</span>
42+
<div>
43+
<h3>
44+
{{ product.name }} webapp war
45+
</h3>
46+
<p>Requires a Jakarta 10 servlet container (like Apache tomcat 10.1).</p>
47+
<div>
48+
<a href="https://github.com/bimrocket/bimrocket/releases/download/{{ product.version }}/bimrocket.war" class="link-button">
49+
<span class="material-symbols-outlined pr-1">download</span> Download
50+
</a>
51+
</div>
52+
</div>
53+
</section>
54+
55+
<section class="download">
56+
<span class="material-symbols-outlined pr-1">deployed_code</span>
57+
<div>
58+
<h3>
59+
{{ product.name }} server war
60+
</h3>
61+
<p>Requires a Jakarta 10 servlet container (like Apache tomcat 10.1).</p>
62+
<div>
63+
<a href="https://github.com/bimrocket/bimrocket/releases/download/{{ product.version }}/bimrocket-server.war" class="link-button">
64+
<span class="material-symbols-outlined pr-1">download</span> Download
65+
</a>
66+
</div>
67+
</div>
68+
</section>
69+
70+
<a href="https://github.com/bimrocket/bimrocket/releases"
71+
<h3>
72+
Other releases
73+
</h3>
378 KB
Loading
456 KB
Loading
403 KB
Loading

0 commit comments

Comments
 (0)