Skip to content

Commit

Permalink
feat: add cookie consent
Browse files Browse the repository at this point in the history
  • Loading branch information
AlejandroAkbal committed Feb 17, 2024
1 parent ebd50dc commit f50f60c
Show file tree
Hide file tree
Showing 14 changed files with 308 additions and 87 deletions.
60 changes: 60 additions & 0 deletions assets/css/cookieconsent.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
.cc--custom {
color-scheme: dark;

--cc-font-family: InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

--cc-bg: #000;
/* .text-base-content-highlight */
--cc-primary-color: rgb(229 231 235);
/* .text-base-content */
--cc-secondary-color: rgb(156 163 175);

/* .text-base-content-highlight */
--cc-btn-primary-bg: rgb(229 231 235);
--cc-btn-primary-color: #000;
--cc-btn-primary-hover-bg: #ccd4d8;
--cc-btn-primary-hover-color: #000;

--cc-btn-secondary-bg: transparent;
--cc-btn-secondary-color: var(--cc-primary-color);
--cc-btn-secondary-border-color: #252729;
--cc-btn-secondary-hover-bg: #252729;
--cc-btn-secondary-hover-color: #fff;
--cc-btn-secondary-hover-border-color: #252729;

--cc-cookie-category-block-bg: #101111;
--cc-cookie-category-block-border: #1d1e1f;
--cc-cookie-category-block-hover-bg: #151516;
--cc-cookie-category-block-hover-border: #1d1e1f;
--cc-cookie-category-expanded-block-hover-bg: #1d1e1f;
--cc-cookie-category-expanded-block-bg: #101111;

--cc-overlay-bg: rgba(0, 0, 0, 0.9) !important;

--cc-toggle-on-knob-bg: var(--cc-bg);
--cc-toggle-readonly-bg: #2f3132;
--cc-toggle-readonly-knob-bg: var(--cc-cookie-category-block-bg);

--cc-separator-border-color: #252729;

--cc-footer-border-color: #212529;
--cc-footer-bg: #000;
}

.cc--custom #cc-main .cm,
.cc--custom #cc-main .pm {
border: 1px solid var(--cc-separator-border-color);
}

/* Body: Remove inner separator borders */
@media screen and (max-width: 640px) {
.cc--custom #cc-main .cm__btns,
.cc--custom #cc-main .cm__footer {
border-top: none !important;
}
}

/* Footer: padding */
.cc--custom #cc-main .cm__footer {
padding: 0.6em 0 0.8em;
}
1 change: 0 additions & 1 deletion components/layout/navigation/Navbar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ const isOnTop = ref(true)
function onIntersectionObserver(entries: IntersectionObserverEntry[]) {
const [entry] = entries
console.log('entry', entry.isIntersecting)
if (entry.isIntersecting) {
isOnTop.value = true
} else {
Expand Down
41 changes: 22 additions & 19 deletions nuxt.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { sentryVitePlugin } from '@sentry/vite-plugin'
import {sentryVitePlugin} from '@sentry/vite-plugin'

export default defineNuxtConfig({
// TODO: Enable when SSR is enabled
Expand All @@ -17,22 +17,22 @@ export default defineNuxtConfig({
},

// Static pages are prerendered
'/': { prerender: true },
'/other-sites': { prerender: true },
'/legal': { prerender: true },
'/': {prerender: true},
'/other-sites': {prerender: true},
'/legal': {prerender: true},

'/settings': { ssr: false },
'/settings': {ssr: false},

'/premium': { prerender: true },
'/premium/sign-in': { prerender: true },
'/premium': {prerender: true},
'/premium/sign-in': {prerender: true},

// All premium pages are client-side rendered
'/premium/dashboard': { ssr: false },
'/premium/saved-posts/*': { ssr: false },
'/premium/tag-collections': { ssr: false },
'/premium/additional-boorus': { ssr: false },
'/premium/backup': { ssr: false },
'/premium/migrate-old-data': { ssr: false },
'/premium/dashboard': {ssr: false},
'/premium/saved-posts/*': {ssr: false},
'/premium/tag-collections': {ssr: false},
'/premium/additional-boorus': {ssr: false},
'/premium/backup': {ssr: false},
'/premium/migrate-old-data': {ssr: false},

// Public assets
'/img/**': {
Expand Down Expand Up @@ -96,15 +96,15 @@ export default defineNuxtConfig({
PROXY_URL: process.env.PROXY_URL,

SENTRY_DSN: process.env.SENTRY_DSN,

POSTHOG_PUBLIC_KEY: process.env.POSTHOG_PUBLIC_KEY,
POSTHOG_HOST: process.env.POSTHOG_HOST
}
},

css: ['~/assets/css/main.css'],
css: ['~/assets/css/main.css', '~/assets/css/cookieconsent.css'],

components: [{ path: '~/components', pathPrefix: false }],
components: [{path: '~/components', pathPrefix: false}],

site: {
url: `https://${process.env.APP_DOMAIN}`
Expand Down Expand Up @@ -162,9 +162,9 @@ export default defineNuxtConfig({
property: false
},
endpoints: {
login: { url: process.env.API_URL + '/auth/log-in', method: 'post' },
refresh: { url: process.env.API_URL + '/auth/refresh', method: 'post' },
user: { url: process.env.API_URL + '/auth/profile', method: 'get' },
login: {url: process.env.API_URL + '/auth/log-in', method: 'post'},
refresh: {url: process.env.API_URL + '/auth/refresh', method: 'post'},
user: {url: process.env.API_URL + '/auth/profile', method: 'get'},
logout: false
}
}
Expand Down Expand Up @@ -248,6 +248,9 @@ export default defineNuxtConfig({

app: {
head: {
bodyAttrs: {
class: 'cc--custom'
},
style: [
{
type: 'text/css',
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
"rxjs": "^7.8.1",
"sortablejs": "^1.15.2",
"tailwindcss": "^3.4.1",
"vanilla-cookieconsent": "^3.0.0",
"vue-safe-teleport": "^0.1.2",
"vue-sonner": "^1.0.3"
},
Expand Down
29 changes: 14 additions & 15 deletions pages/legal.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<script setup>
useSeoMeta({
title: 'Legal',
useSeoMeta({
title: 'Legal',
description: 'Legal information about the Rule 34 App'
})
description: 'Legal information about the Rule 34 App'
})
</script>

<template>
Expand Down Expand Up @@ -44,17 +44,16 @@
<!-- Analytics -->
<li>
<ContentContainer
:links="[
{
text: 'Opt Out',
href: '/privacy-policy#opt-out'
}
]"
text="We use first party analytics that do not gather or store any personal info
Feel free to opt out of being tracked on the next link"
title="Analytics"
/>
text="Manage your cookies consent in the next link"
title="Cookies"
>
<button
class='hover:hover-text-util focus-visible:focus-outline-util text-sm text-base-content underline'
type="button"
@click='$CC.showPreferences()'>
Manage Cookies
</button>
</ContentContainer>
</li>

<!-- Contact -->
Expand Down
25 changes: 8 additions & 17 deletions pages/privacy-policy.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<script setup>
useSeoMeta({
title: 'Privacy Policy',
useSeoMeta({
title: 'Privacy Policy',
description: 'Privacy policy of the Rule 34 App'
})
description: 'Privacy policy of the Rule 34 App'
})
</script>

<template>
Expand Down Expand Up @@ -44,15 +44,6 @@
The email addresses are securely stored and encrypted using Mailcoach, a GDPR-compliant email marketing service.
</p>

<h3 id="opt-out">Opt out of tracking</h3>
<p>You can opt out of being tracked by our analytics below:</p>
<iframe
loading="lazy"
src="https://matomo.akbal.dev/index.php?module=CoreAdminHome&action=optOut&language=en&backgroundColor=000&fontColor=d2d5db&fontSize=&fontFamily="
style="height: auto; width: 100%; max-width: 600px"
title="Matomo opt out"
/>

<h3>Personal Information</h3>
<p>We may ask for personal information which may include one or more of the following:</p>
<ul>
Expand Down Expand Up @@ -191,17 +182,17 @@
<a
href="http://gumroad.com"
rel="noopener nofollow"
>Gumroad</a
>Gumroad</a
>. If you choose to subscribe you agree to their
<a
href="https://gumroad.com/privacy"
rel="noopener nofollow"
>privacy policy</a
>privacy policy</a
>, their
<a
href="https://gumroad.com/terms"
rel="noopener nofollow"
>terms of service</a
>terms of service</a
>
and ours.
</p>
Expand All @@ -228,7 +219,7 @@
<h2>Contact Us</h2>
<p>For any questions or concerns regarding your privacy, you may contact us using the following details:</p>
<p>
Rule 34 App<br />
Rule 34 App<br/>
contact@r34.app
</p>
</main>
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
55 changes: 55 additions & 0 deletions plugins/050.posthog.client.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import {defineNuxtPlugin} from '#app'
import type {PostHog} from 'posthog-js'
import posthog from 'posthog-js'

// TODO: Refactor so this is loaded only when the user has given consent
export default defineNuxtPlugin(nuxtApp => {
const runtimeConfig = useRuntimeConfig()
const router = useRouter()

let posthogClient: PostHog | null = null

window.addEventListener('cc:onConsent', ({detail}) => {

const cookie = detail.cookie

if (!cookie.services.analytics.includes('posthog')) {
return
}

// console.debug('PostHog consent given')

if (!posthogClient) {
posthogClient = posthog.init(runtimeConfig.public.POSTHOG_PUBLIC_KEY,
{
api_host: runtimeConfig.public.POSTHOG_HOST,

// we add manual pageview capturing below
capture_pageview: false,

// loaded: (posthog) => {
// if (import.meta.env.MODE === 'development') posthog.debug()
// }
})
}
})

// Make sure that pageviews are captured with each route change
router.afterEach((to) => {
if (!posthogClient) {
return
}

nextTick(() => {
posthog.capture('$pageview', {
current_url: to.fullPath
})
})
})

return {
provide: {
posthog: () => posthogClient
}
}
})
Loading

0 comments on commit f50f60c

Please sign in to comment.