Skip to content

Commit 927e66d

Browse files
silvester-parisilvester-pari
committed
chore: layout updates
1 parent 3ca0501 commit 927e66d

File tree

13 files changed

+244
-75
lines changed

13 files changed

+244
-75
lines changed

‎.vitepress/config.mjs‎

Lines changed: 82 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,91 @@ export default defineConfig(
55
withSidebar(
66
{
77
// https://vitepress.dev/reference/site-config
8-
srcDir: "pages",
8+
srcDir: "./pages",
9+
cleanUrls: true,
910
title: "EarthCODE Documentation",
11+
titleTemplate: " EarthCODE",
1012
description: "Documentation for the EarthCODE website",
11-
appearance: "dark",
1213
base: "/documentation/",
14+
head: [
15+
["link", { rel: "icon", href: "/img/EarthCODE_Favicon_32x32px.png" }],
16+
// Open Graph / Facebook
17+
["meta", { property: "og:type", content: "website" }],
18+
[
19+
"meta",
20+
{
21+
property: "og:url",
22+
content: "https://earthcode.esa.int",
23+
},
24+
],
25+
["meta", { property: "og:title", content: "EarthCODE" }],
26+
[
27+
"meta",
28+
{
29+
property: "og:description",
30+
content: "Earth Science Collaborative Open Development Environment",
31+
},
32+
],
33+
[
34+
"meta",
35+
{
36+
property: "og:image",
37+
content: "https://earthcode.esa.int/img/EarthCODE_Herobanner_1920x1080.jpg",
38+
},
39+
],
40+
// Twitter
41+
["meta", { property: "twitter:card", content: "summary_large_image" }],
42+
[
43+
"meta",
44+
{
45+
property: "twitter:url",
46+
content: "https://earthcode.esa.int",
47+
},
48+
],
49+
["meta", { property: "twitter:title", content: "EarthCODE" }],
50+
[
51+
"meta",
52+
{
53+
property: "twitter:description",
54+
content: "Earth Science Collaborative Open Development Environment",
55+
},
56+
],
57+
[
58+
"meta",
59+
{
60+
property: "twitter:image",
61+
content: "https://earthcode.esa.int/img/EarthCODE_Herobanner_1920x1080.jpg",
62+
},
63+
],
64+
[
65+
"script",
66+
{},
67+
`
68+
var _paq = (window._paq = window._paq || []);
69+
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
70+
_paq.push(["requireCookieConsent"]);
71+
_paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
72+
_paq.push(["trackPageView"]);
73+
_paq.push(["enableLinkTracking"]);
74+
(function () {
75+
var u = "https://nix.eox.at/piwik/";
76+
_paq.push(["setTrackerUrl", u + "matomo.php"]);
77+
_paq.push(["setSiteId", "13"]);
78+
var d = document,
79+
g = d.createElement("script"),
80+
s = d.getElementsByTagName("script")[0];
81+
g.async = true;
82+
g.src = u + "matomo.js";
83+
s.parentNode.insertBefore(g, s);
84+
})();
85+
`,
86+
],
87+
],
88+
themeConfig: {
89+
footer: {
90+
message: 'ESA – European Space Agency © 2020-2024',
91+
}
92+
}
1393
},
1494
{
1595
// https://vitepress-sidebar.cdget.com/guide/options

‎.vitepress/theme/Layout.vue‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<script setup>
2+
import { onMounted } from "vue";
3+
import { useData, useRouter } from "vitepress";
4+
import DefaultTheme from "vitepress/theme";
5+
6+
const { Layout } = DefaultTheme;
7+
const { site, theme, frontmatter } = useData();
8+
9+
onMounted(async () => {
10+
setTimeout(() => {
11+
document.querySelector("esa-cookies").addEventListener("accept", () => {
12+
_paq.push(["rememberCookieConsentGiven"]);
13+
});
14+
document.querySelector("esa-cookies").addEventListener("decline", () => {
15+
_paq.push(["forgetCookieConsentGiven"]);
16+
_paq.push(["optUserOut"]);
17+
});
18+
19+
if (
20+
!document.cookie.includes("mtm_cookie_consent") &&
21+
!document.cookie.includes("mtm_consent_removed")
22+
) {
23+
document.querySelector("esa-cookies").style.display = "block";
24+
}
25+
26+
// TRACK PAGE SCROLL
27+
function getScrollPercent() {
28+
const h = document.documentElement,
29+
b = document.body,
30+
st = "scrollTop",
31+
sh = "scrollHeight";
32+
return ((h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight)) * 100;
33+
}
34+
const scrollTargets = {
35+
25: false,
36+
50: false,
37+
75: false,
38+
100: false,
39+
};
40+
document.addEventListener("scroll", (e) => {
41+
Object.keys(scrollTargets).forEach((target) => {
42+
if (getScrollPercent() >= parseInt(target) && !scrollTargets[target]) {
43+
scrollTargets[target] = true;
44+
_paq.push(["trackEvent", "Scroll_depth", `${target}%`]);
45+
}
46+
});
47+
});
48+
49+
document.body.classList.add("loaded");
50+
});
51+
});
52+
</script>
53+
54+
<template>
55+
<Layout :class="frontmatter.layout">
56+
<template #layout-top>
57+
<ClientOnly>
58+
<esa-header></esa-header>
59+
</ClientOnly>
60+
</template>
61+
<template #layout-bottom>
62+
<ClientOnly>
63+
<esa-cookies
64+
link="https://www.esa.int/Services/Cookies_notice"
65+
style="display: none"
66+
></esa-cookies>
67+
</ClientOnly>
68+
</template>
69+
</Layout>
70+
</template>
71+
72+
<style scoped>
73+
esa-header {
74+
position: fixed;
75+
width: 100%;
76+
z-index: 11;
77+
}
78+
</style>

‎.vitepress/theme/fonts/notesesabol.ttf‎

149 KB
Binary file not shown.

‎.vitepress/theme/fonts/notesesareg.ttf‎

79.8 KB
Binary file not shown.

‎.vitepress/theme/fonts/notesesareg.woff2‎

20.1 KB
Binary file not shown.

‎.vitepress/theme/fonts/notesstyle.woff‎

22.1 KB
Binary file not shown.

‎.vitepress/theme/index.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
import DefaultTheme from "vitepress/theme";
1+
import Layout from "./Layout.vue";
22
import "./style.css";
33

44
/** @type {import('vitepress').Theme} */
55
export default {
6-
extends: DefaultTheme,
6+
Layout,
7+
async enhanceApp({ app, router, siteData }) {
8+
if (!import.meta.env.SSR) {
9+
app.use(await import("@eox/esa-ui/components/header.js"));
10+
app.use(await import("@eox/esa-ui/components/cookies.js"));
11+
}
12+
}
713
};

‎.vitepress/theme/style.css‎

Lines changed: 41 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,61 @@
1-
/**
2-
* Customize default theme styling by overriding CSS variables:
3-
* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
4-
*/
1+
@font-face {
2+
font-family: "NotesESAbold";
3+
src: url("./fonts/notesesabol.ttf") format("truetype");
4+
}
5+
@font-face {
6+
font-family: "NotesESAregular";
7+
src:
8+
url("./fonts/notesesareg.woff2") format("woff2"),
9+
url("./fonts/notesesareg.ttf") format("truetype");
10+
}
11+
@font-face {
12+
font-family: "NotesStyle";
13+
src: url("./fonts/notesstyle.woff") format("woff");
14+
}
515

616
:root {
7-
--vp-c-default-1: var(--vp-c-gray-1);
8-
--vp-c-default-2: var(--vp-c-gray-2);
9-
--vp-c-default-3: var(--vp-c-gray-3);
10-
--vp-c-default-soft: var(--vp-c-gray-soft);
11-
17+
--vp-c-white: #ffffff;
18+
--vp-c-black: #101213;
19+
--vp-font-family-base: Arial, sans-serif;
1220
--vp-c-brand-1: #00b19d;
13-
--vp-c-brand-2: #08bea9;
14-
--vp-c-brand-3: #0adac1;
15-
--vp-c-brand-soft: #00b19d28;
16-
17-
--vp-c-tip-1: var(--vp-c-brand-1);
18-
--vp-c-tip-2: var(--vp-c-brand-2);
19-
--vp-c-tip-3: var(--vp-c-brand-3);
20-
--vp-c-tip-soft: var(--vp-c-brand-soft);
21-
22-
--vp-c-warning-1: var(--vp-c-yellow-1);
23-
--vp-c-warning-2: var(--vp-c-yellow-2);
24-
--vp-c-warning-3: var(--vp-c-yellow-3);
25-
--vp-c-warning-soft: var(--vp-c-yellow-soft);
26-
27-
--vp-c-danger-1: var(--vp-c-red-1);
28-
--vp-c-danger-2: var(--vp-c-red-2);
29-
--vp-c-danger-3: var(--vp-c-red-3);
30-
--vp-c-danger-soft: var(--vp-c-red-soft);
21+
--vp-c-brand-2: #00b19d;
22+
--vp-c-brand-3: #00b19d;
23+
--vp-layout-top-height: 56px;
24+
}
3125

32-
--vp-font-family-base: Arial, sans-serif;
26+
@media (min-width: 720px) {
27+
:root {
28+
--vp-layout-top-height: 64px;
29+
}
3330
}
3431

3532
.dark {
36-
--vp-c-bg: #001923;
37-
--vp-sidebar-bg-color: #003247;
38-
--vp-c-text-2: rgba(235, 235, 245, 0.5);
33+
--vp-c-bg: #0b1d26;
34+
--vp-c-bg-alt: #003247;
35+
--vp-c-bg-elv: #0b1d26;
36+
--vp-c-bg-soft: #003247;
3937
}
4038

41-
/**
42-
* Component: Button
43-
* -------------------------------------------------------------------------- */
39+
html {
40+
font-family: Arial, Helvetica;
41+
}
4442

45-
:root {
46-
--vp-button-brand-border: transparent;
47-
--vp-button-brand-text: var(--vp-c-white);
48-
--vp-button-brand-bg: var(--vp-c-brand-1);
49-
--vp-button-brand-hover-border: transparent;
50-
--vp-button-brand-hover-text: var(--vp-c-white);
51-
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
52-
--vp-button-brand-active-border: transparent;
53-
--vp-button-brand-active-text: var(--vp-c-white);
54-
--vp-button-brand-active-bg: var(--vp-c-brand-1);
43+
body {
44+
transition: opacity 0.3s ease-in-out;
5545
}
5646

57-
@font-face {
58-
font-family: NotesESAbold;
59-
src: url("https://earthcode.esa.int/assets/notesesabol.D0gW3H5e.ttf")
60-
format("truetype");
47+
body:not(.loaded) {
48+
opacity: 0;
6149
}
6250

6351
h1,
6452
h2,
6553
h3,
6654
h4,
6755
h5,
68-
h6 {
69-
font-family: NotesESAbold, sans-serif;
70-
font-weight: 400;
56+
h6,
57+
.VPNavBarTitle,
58+
.VPHero .text,
59+
.VPButton {
60+
font-family: "NotesESAbold", sans-serif;
7161
}

‎package-lock.json‎

Lines changed: 9 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,8 @@
88
"devDependencies": {
99
"vitepress": "^1.5.0",
1010
"vitepress-sidebar": "^1.29.0"
11+
},
12+
"dependencies": {
13+
"@eox/esa-ui": "^1.11.1"
1114
}
1215
}

0 commit comments

Comments
 (0)