diff --git a/eleventy.config.js b/eleventy.config.js index c0ace8c..052e9c6 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -51,6 +51,9 @@ export default async function (eleventyConfig) { eleventyConfig.addPassthroughCopy('./src/fonts/'); eleventyConfig.addWatchTarget('./src/fonts/'); + eleventyConfig.addPassthroughCopy('./src/js/'); + eleventyConfig.addWatchTarget('./src/js/'); + eleventyConfig.addCollection('posts', (collection) => process.env.ELEVENTY_PRODUCTION ? collection.getFilteredByGlob('./src/posts/*.md') diff --git a/src/css/style.css b/src/css/style.css index f18ee77..af03e9e 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,11 +1,6 @@ @import 'tailwindcss'; -@import '../fonts/tilt-warp/tilt-warp.css'; -@import '../fonts/encode-sans/encode-sans.css'; -@import '../fonts/m-plus-1-code/m-plus-1-code.css'; - @import './modules/callouts.css' layer(base); -@import './prism.css'; @plugin '@tailwindcss/typography'; @plugin 'tailwindcss-safe-area'; @@ -16,6 +11,8 @@ --min-height-128: 32rem; --min-height-160: 40rem; --min-height-192: 48rem; + + --width-128: calc(var(--spacing) * 128); } :root { diff --git a/src/data/eleventyComputed.js b/src/data/eleventyComputed.js index 1afa93b..ac7bc4b 100644 --- a/src/data/eleventyComputed.js +++ b/src/data/eleventyComputed.js @@ -1,4 +1,9 @@ +import { env } from 'node:process'; + export default { + site: { + url: env.ELEVENTY_PRODUCTION ? 'https://blog.sebin-nyshkim.net' : 'http://localhost:8080' + }, page_title: (data) => (data.title ? `${data.title} - ${data.site_name}` : data.site_name), og_title: (data) => (data.title ? data.title : data.site_name) }; diff --git a/src/js/ackee.js b/src/js/ackee.js new file mode 100644 index 0000000..9ab96eb --- /dev/null +++ b/src/js/ackee.js @@ -0,0 +1,23 @@ +const ackeeBanner = document.querySelector('#ackee-banner'); +const yesBtn = ackeeBanner.querySelector('#yes'); +const noBtn = ackeeBanner.querySelector('#no'); +const confirmKey = 'ackeeDetailed'; + +yesBtn.addEventListener('click', () => localStorage.setItem(confirmKey, true)); +noBtn.addEventListener('click', () => localStorage.setItem(confirmKey, false)); + +if (localStorage.getItem(confirmKey) === null) { + ackeeBanner.show(); +} + +const ackeeServer = 'https://ackee.sebin-nyshkim.net'; +const ackeeDomainId = 'c7d67b68-9522-4bf0-8dd5-1332790999a9'; +const ackeeOpts = { + detailed: localStorage.getItem(confirmKey) === 'true', + ignoreLocalhost: false +}; + +if (localStorage.getItem(confirmKey) === 'true') { + const instance = ackeeTracker.create(ackeeServer, ackeeOpts); + instance.record(ackeeDomainId); +} diff --git a/src/layouts/base.njk b/src/layouts/base.njk index 9e6f2e8..16ee1bc 100644 --- a/src/layouts/base.njk +++ b/src/layouts/base.njk @@ -18,7 +18,16 @@ generator = eleventy.generator, preconnect = ['https://img.sebin-nyshkim.net'], dns_prefetch = ['https://img.sebin-nyshkim.net'], - css = ['/css/style.css'] + css = ['/fonts/tilt-warp/tilt-warp.css:rel="preload":as="style"', + '/fonts/tilt-warp/tilt-warp.css', + '/fonts/encode-sans/encode-sans.css:rel="preload":as="style"', + '/fonts/encode-sans/encode-sans.css', + '/fonts/m-plus-1-code/m-plus-1-code.css:rel="preload":as="style"', + '/fonts/m-plus-1-code/m-plus-1-code.css', + '/css/style.css:rel="preload":as="style"', + '/css/style.css', + '/css/prism.css:rel="preload":as="style"', + '/css/prism.css'] %} {% ogImage "og-image.og.njk", { title: title or site_name, author: author, image: image } %} {% if mastodon.fediverseCreator and mastodon.fediverseCreator != '' %} @@ -64,9 +73,12 @@

Content licensed under CC BY-SA 4.0

+

+ Privacy Policy +

-

Made with 11ty

+

Made with ❤️ and 11ty

+ + +
+
+

Analytics

+

+ I would like to know which devices my site is displayed on. May I collect data about your device? The specific data is outlined + here. +

+
+
+ + +
+
+ + + + diff --git a/src/privacy.md b/src/privacy.md new file mode 100644 index 0000000..59abec1 --- /dev/null +++ b/src/privacy.md @@ -0,0 +1,46 @@ +--- +layout: page.njk +--- + +# Privacy Policy + +I use a self-hosted [Ackee](https://ackee.electerious.com) instance to gain insights about the types of devices that visit this site. + +Ackee is open-source analytics software. The data it collects is anonymized in a way that does not allow me to identify individual visitors. It also does not save any cookies and does not follow you around the web. I merely store whether you agree to analytics collection or not in your browser's local storage. + +## Data that Ackee collects + +Ackee gives me insight into the following data points: + +* Number of visits per day +* Number of visitors that currently view the site +* Approximate duration of stay +* Number of times a given page was visited +* Sites a visit originated from (referrer) +* Name and manufacturer of the device +* Name and version of the operating system +* Name and version of the browser +* Screen size of the device +* Primary language of the browser or operating system + +Ackee uses the IP, user-agent and domainId to identify a user. All information will be hashed together with a [salt](https://en.wikipedia.org/wiki/Salt_(cryptography)) that changes daily. The final hash is called `clientId`. + +The daily salt is never stored anywhere. It avoids that database backups can be used to stick data together to reconstruct the browsing history of a user. + +## Purpose of collecting data + +I collect this data to better understand my audience, improve the site's user experience, and to inform future development and editorial decisions. The data will not be shared with anyone, ever. + +## Data retention + +Ackee removes data from previous records when a new record with an existing identification gets added. This way the user identifier and other identifiable data is only stored once in the database. + +In other words: Ackee forgets who you are as soon as it sees you again. It's not possible to reconstruct a browsing history, even on a daily basis. + +## User consent + +Data collection is opt-in. I will not collect any analytics data until you explicitly allow me to do so. If you previously opted-in but changed your mind, click the button below: + + + +By using this site, you acknowledge that you have read and understood this privacy policy. If you have any questions or concerns about how your data is collected or used, please feel free to [contact me](/contact).