mirrors/openrport-openrport
2
0
Fork 0
mirror of https://github.com/openrport/openrport.git synced 2025-10-26 11:27:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use different package for Tracking, bump up vuepress version, adjust styling

Browse Source
This commit is contained in:
Birgit Karch 2021-07-20 17:52:25 +02:00
parent b403a97b03
commit 9b5af5a59a
12 changed files with 1005 additions and 1223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.vuepress/clientAppEnhance.js
View File

@ -1,11 +1,13 @@
import {defineClientAppEnhance} from "@vuepress/client";
import GAConsent from './components/GAConsent.vue';
import VueGtag from "vue-gtag-next";
import { createGtm } from '@gtm-support/vue-gtm';
export default defineClientAppEnhance(({ app}) => {
app.use(VueGtag, {
isEnabled: false,
property: { id: __GA4_ID__ },
});
export default defineClientAppEnhance(({ app, router, siteData}) => {
app.use(
createGtm({
id: __GTM_ID__,
enabled: false, // disabled by default, will be enabled if user gives consent, see /components/GAConsent.vue
})
);
app.component('GAConsent', GAConsent);
});

19
.vuepress/components/GAConsent.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="ga-consent" :class="{ 'ga-consent--show' : show }">
<p>
By clicking "Accept", you agree that we collect measurement data with Google Analytics.
By clicking "Accept", you agree that we store Cookies from Google to provide services and analyse traffic.
</p>
<button type="button" class="button primary" @click="enableGA">Accept</button>
</div>
@ -9,21 +9,19 @@
<script>
import { defineComponent } from 'vue';
import { useState } from "vue-gtag-next";
export default defineComponent({
name: 'GAConsent',
data () {
return {
localStorageItemKey: 'rport_GA',
acceptedGA: false,
localStorageItemKey: __GTM_LS_ITEM__,
show: false,
}
},
mounted () {
if (process.env.NODE_ENV === 'development') {
if (__DEV__) {
return;
}
if (localStorage.getItem(this.localStorageItemKey)) {
@ -35,22 +33,15 @@ export default defineComponent({
methods: {
enableGA() {
const { isEnabled } = useState();
isEnabled.value = true;
this.$gtm.enable(true);
localStorage.setItem(this.localStorageItemKey, 'accepted');
this.acceptedGA = true;
this.show = false;
},
disableGA() {
const { isEnabled } = useState();
isEnabled.value = false;
this.$gtm.enable(false);
localStorage.removeItem(this.localStorageItemKey);
this.acceptedGA = false;
this.show = true;
},
},
})
</script>

3
.vuepress/config.js
View File

@ -67,7 +67,8 @@ module.exports = {
// additional global constants
define: {
__GA4_ID__: 'G-QVHYG93PE3',
__GTM_ID__: 'GTM-56ZHTMJ',
__GTM_LS_ITEM__: 'rport_GA',
},
// client app root component files

32
.vuepress/styles/_ga-consent.scss
View File

@ -1,5 +1,3 @@
@use 'sass:color';
.ga-consent {
position: fixed;
bottom: -50px;
@ -11,8 +9,8 @@
align-items: center;
z-index: 10;
padding: .7rem 1rem;
background: $bgColorGray;
border-top: 1px solid $borderColor;
background: var(--c-bg-light);
border: 1px solid var(--c-border);
max-height: 0;
transition: all .45s ease-in-out;
@ -27,7 +25,15 @@
}
@media (min-width: $MQNarrow) {
justify-content: flex-start;
padding: 1rem 1.5rem;
width: 30rem;
left: 10px;
box-shadow: $shadowLarge;
&--show {
bottom: 10px;
}
}
p {
@ -65,21 +71,21 @@
}
&.primary {
color: $textContrastColor;
background-color: $accentColor;
border-color: $accentColor;
color: var(--c-bg);
background-color: var(--c-brand);
border-color: var(--c-brand);
&:hover {
background-color: color.scale($accentColor, $lightness: 10%);
background-color: var(--c-brand-light);
}
}
&.secondary {
color: $accentColor;
background-color: $textContrastColor;
border-color: $accentColor;
color: var(--c-brand);
background-color: var(--c-bg);
border-color: var(--c-brand);
&:hover {
color: $textContrastColor;
background-color: color.scale($accentColor, $lightness: 10%);
color: var(--c-bg);
background-color: var(--c-brand-light);
}
}
}

6
.vuepress/styles/_home.scss
View File

@ -5,7 +5,7 @@
padding-right: 0;
> *:not(.hero):not(.footer) {
max-width: $contentWidth;
max-width: var(--content-width);
margin: 0 auto;
padding-left: 2rem;
padding-right: 2rem;
@ -46,7 +46,7 @@
}
h1, .description {
color: $textContrastColor;
color: var(--c-bg);
}
h1 {
@ -77,6 +77,6 @@
.footer {
margin-top: 4rem;
background: $bgColorGray;
background: var(--c-bg-light);
}
}

2
.vuepress/styles/_navbar.scss
View File

@ -1,8 +1,6 @@
// Navbar
.navbar {
padding-top: 1rem;
padding-bottom: 1rem;
box-shadow: $shadowMedium;
.logo {

34
.vuepress/styles/_sidebar.scss
View File

@ -5,24 +5,26 @@
padding-bottom: 4.5rem;
}
.sidebar .sidebar-group > ul > li > .sidebar-link {
.sidebar > .sidebar-links > ul > li > .nav-link {
display: flex;
align-items: center;
padding-left: 1rem;
}
padding-left: 1rem;
.sidebar .sidebar-group > ul > li > .sidebar-link:before {
content: ' ';
display: inline-block;
width: 18px;
height: 18px;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMThweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMThweCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xOSAzSDVjLTEuMSAwLTIgLjktMiAydjE0YzAgMS4xLjkgMiAyIDJoMTRjMS4xIDAgMi0uOSAyLTJWNWMwLTEuMS0uOS0yLTItMnptLTUgMTRIN3YtMmg3djJ6bTMtNEg3di0yaDEwdjJ6bTAtNEg3VjdoMTB2MnoiLz48L3N2Zz4=') center center no-repeat;
opacity: 0.5;
margin-right: 4px;
}
&:before {
content: ' ';
display: inline-block;
width: 18px;
height: 18px;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMThweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMThweCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xOSAzSDVjLTEuMSAwLTIgLjktMiAydjE0YzAgMS4xLjkgMiAyIDJoMTRjMS4xIDAgMi0uOSAyLTJWNWMwLTEuMS0uOS0yLTItMnptLTUgMTRIN3YtMmg3djJ6bTMtNEg3di0yaDEwdjJ6bTAtNEg3VjdoMTB2MnoiLz48L3N2Zz4=') center center no-repeat;
opacity: 0.5;
margin-right: 4px;
}
.sidebar .sidebar-group > ul > li > .sidebar-link:hover:before,
.sidebar .sidebar-group > ul > li > .sidebar-link.router-link-active:before {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMThweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMThweCIgZmlsbD0iIzAwNzVlYyI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xOSAzSDVjLTEuMSAwLTIgLjktMiAydjE0YzAgMS4xLjkgMiAyIDJoMTRjMS4xIDAgMi0uOSAyLTJWNWMwLTEuMS0uOS0yLTItMnptLTUgMTRIN3YtMmg3djJ6bTMtNEg3di0yaDEwdjJ6bTAtNEg3VjdoMTB2MnoiLz48L3N2Zz4=');
opacity: 1;
&:hover,
&.router-link-active {
&:before {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMThweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMThweCIgZmlsbD0iIzAwNzVlYyI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xOSAzSDVjLTEuMSAwLTIgLjktMiAydjE0YzAgMS4xLjkgMiAyIDJoMTRjMS4xIDAgMi0uOSAyLTJWNWMwLTEuMS0uOS0yLTItMnptLTUgMTRIN3YtMmg3djJ6bTMtNEg3di0yaDEwdjJ6bTAtNEg3VjdoMTB2MnoiLz48L3N2Zz4=');
opacity: 1;
}
}
}

36
.vuepress/styles/_variables.scss
View File

@ -1,9 +1,37 @@
// Variables
@import "palette";
// colors
$bgColorGray: #f6f8f9 !default;
$textContrastColor: #fff !default;
// Customizable CSS variables of Vuepress default (light) theme
// See https://vuepress2.netlify.app/reference/default-theme/styles.html#style-file
:root {
// brand colors
--c-brand: #0075ec;
--c-brand-light: #0883ff;
// shadows
// background colors
--c-bg: #ffffff;
--c-bg-light: #f6f8f9;
// text colors
--c-text: #1b1b19;
// border colors
--c-border: #eaecef;
// layout vars
--navbar-padding-v: 1rem;
--content-width: 960px;
--homepage-width: 100%;
}
// Customizable CSS variables of Vuepress default (dark) theme
// See https://vuepress2.netlify.app/reference/default-theme/styles.html#style-file
html.dark {
// brand colors
--c-brand: #0075ec;
--c-brand-light: #0883ff;
}
// Custom SASS variables
$shadowMedium: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%) !default;
$shadowLarge: 0 6px 40px rgb(0 0 0 / 30%) !default;

11
.vuepress/styles/palette.scss
View File

@ -1,15 +1,6 @@
// Customizable variables of Vuepress default theme
// Customizable SASS variables of Vuepress default theme
// See https://vuepress2.netlify.app/reference/default-theme/styles.html#palette-file
// colors
$accentColor: #0075ec;
$textColor: #1b1b19;
$borderColor: #eaecef;
// layout
$homePageWidth: 100%;
$contentWidth: 960px;
// responsive breakpoints
$MQNarrow: 959px !default;
$MQMobile: 719px !default;

4
package.json
View File

@ -3,10 +3,10 @@
"version": "1.0.0",
"description": "rport site made with Vuepress, hosted on Github Pages",
"dependencies": {
"vue-gtag-next": "^1.14.0"
"@gtm-support/vue-gtm": "^1.1.0"
},
"devDependencies": {
"vuepress": "^2.0.0-beta.6"
"vuepress": "^2.0.0-beta.22 "
},
"scripts": {
"docs:dev": "vuepress dev",

5
tsconfig.json Normal file
View File

@ -0,0 +1,5 @@
{
"compilerOptions": {
"types": ["@vuepress/client/types"]
}
}

2062
yarn.lock
View File

File diff suppressed because it is too large Load Diff