Skip to content

Commit 345d4c9

Browse files
repletereplete
committed
Update README, demo page, package url
1 parent 954241b commit 345d4c9

3 files changed

Lines changed: 91 additions & 66 deletions

File tree

‎README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
# Biscuitman.js, Lightweight Consent Manager
1+
# biscuitman.js 🍪 Lightweight Consent Manager
22
![screenshot of main UI](media/readmebanner.webp)
33

4+
#### [View demo](https://replete.github.io/biscuitman)
5+
46
I didn't feel good about sending 100KB+ for a simple cookie consent solution so I wrote my own in vanilla JS. It's around 4kB compressed with brotli. The goal was to make something small and versatile _enough_ that I could drop it on my optimized sites for basic analytics that wouldn't break the rules.
57

8+
69
- Stores consent in `localStorage`, exposes in `window.Consent` and through custom events fired on `document`
710
- Handles consent granulated by custom sections (e.g. essential, performance, analytics...)
811
- optionally shows user specific cookie details
@@ -12,6 +15,7 @@ I didn't feel good about sending 100KB+ for a simple cookie consent solution so
1215
- Works without CSS (thanks to `<dialog>` and `<details>`)
1316
- Mobile-first
1417
- Modern browsers: No support for IE
18+
- Not production-ready until 1.0
1519

1620
![screenshot of main UI](media/ui.webp)
1721

‎index.html‎

Lines changed: 84 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,79 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Biscuitman.js development test</title>
7+
</head>
8+
<body>
9+
10+
<!-- analytics scripts -->
11+
<script data-consent="analytics" async src="https://www.googletagmanager.com/gtag/js?id=G-TEST" type="text/plain" id="js-analytics-gtm">
12+
/*
13+
Normally <script> tags with src property will not evaluate embedded script content,
14+
but in this scenario you might want some code to run after a file has loaded,
15+
so biscuitman handles this for you:
16+
17+
If a biscuitman inactive script (text/plain) has both src AND embedded script content
18+
like the one you are readiing now, biscuitman will inject the embedded script as separate
19+
adjacent script tag after the parent script has loaded and executed.
20+
*/
21+
console.log('This javascript is injected into a new adjacent <script> tag only after the src script has loaded');
22+
console.log(google_tag_manager) // only available once loaded
23+
</script>
24+
<script data-consent="analytics" type="text/plain" id="js-analytics-gtm-after">
25+
console.log('This script runs as soon as analytics consent is granted')
26+
</script>
27+
<script id="js-analytics-statcounter-setup">
28+
// not handled by biscuitman
29+
var sc_project=9999999
30+
var sc_invisible=1
31+
var sc_security="beefbeef"
32+
var sc_https=1
33+
</script>
34+
<script data-consent="analytics" async src="https://statcounter.com/counter/counter.js" type="text/plain" id="js-analytics-statcounter"></script>
35+
36+
<script id="js-analytics-misc" data-consent="analytics" type="text/plain">
37+
console.log('This embedded script will be inserted when analytics consent is granted')
38+
</script>
39+
40+
<!-- biscuitman config, unless its a one-page site serve this from biscuitman-config.js -->
41+
<script>
42+
biscuitman = {
43+
msg: 'By clicking "Accept All", you agree to the use of cookies for improving browsing, providing personalized ads or content, and analyzing traffic.',
44+
info: `Cookies categorized as "Essential" are stored in your browser to enable basic site functionalities.
45+
Additionally, third-party cookies are utilized to analyze website usage, store preferences, and deliver relevant content and advertisements with your consent.
46+
While you have the option to enable or disable some or all of these cookies, note that disabling certain ones may impact your browsing experience.`,
47+
sections: ['essential','functional','analytics','performance','advertisement','uncategorized'],
48+
essentialTitle: 'Essential',
49+
essentialMessage: 'Essential cookies are reuired for basic site functionality',
50+
functionalTitle: 'Functional',
51+
functionalMessage: 'Functional cookies allow us to perform specific tasks such as sharing website content on social media platforms, gathering feedback, and enabling other third-party features',
52+
analyticsTitle: 'Analytics',
53+
analyticsMessage: 'Analytical cookies allow us to understand visitor interactions with the website, offering insights into metrics like visitor count, bounce rate, and traffic source',
54+
analyticsCookies: {
55+
'_ga': 'This cookie, set by Google Analytics, computes visitor, session, and campaign data, tracking site usage for analytical reports. It stores information anonymously, assigning a randomly generated number to identify unique visitors',
56+
'_ga_*': 'Google Analytics uses this cookie for storing page view count'
57+
},
58+
performanceTitle: 'Performance',
59+
performanceMessage: 'Performance cookies allow us to understand critical website performance indicators, contributing to an enhanced user experience for visitors',
60+
advertisementTitle: 'Advertisement',
61+
advertisementMessage: 'Advertisement cookies serve to deliver tailored advertisements to visitors based on their previous page visits and to evaluate the efficacy of advertising campaigns',
62+
uncategorizedTitle: 'Uncategorized',
63+
uncategorizedMessage: 'Uncategorized cookies are those currently under analysis and have not yet been assigned to a specific category',
64+
acceptNonEU: false
65+
}
66+
</script>
67+
<!-- biscuitman must be after biscuitman config and data-consent scripts -->
68+
<script src="biscuitman.js"></script>
69+
70+
71+
772
<style>
873
@import url(biscuitman.css);
974
body {
1075
font-family: Arial, sans-serif;
1176
margin: 0;
1277
padding: 0;
1378
background-color: #f5f5f5;
79+
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
1480
}
1581
header {
1682
min-height:35vw;
@@ -25,9 +91,19 @@
2591
text-align: center;
2692
text-shadow: 2px 2px 4px rgba(0,0,0,.75);
2793
margin: 0 auto;
94+
95+
a {
96+
color: #fff
97+
}
2898
}
2999
h1 {
30-
font-size:5vw
100+
font-size:5vw;
101+
margin:0;
102+
}
103+
header h2 {
104+
color: #FAE6AE;
105+
font-size:4vw;
106+
margin: 0em 0 .4em 0;
31107
}
32108
.container {
33109
max-width: 800px;
@@ -43,11 +119,13 @@
43119
display: block;
44120
margin: 20px auto;
45121
}
122+
123+
a.img { display:inline-flex; flex-direction: column}
46124
</style>
47-
</head>
48-
<body>
125+
49126
<header>
50-
<h1>biscuitman.js sandbox</h1>
127+
<h1>🍪 biscuitman.js </h1>
128+
<h2>Lightweight Consent Manager <i>(4kB br)</i></h2>
51129
<div>
52130
<button onclick="bmInvalidateConsent()">Invalidate consent</button>
53131
<button onclick="bmUpdateConsent()">Update consent</button>
@@ -60,6 +138,8 @@ <h1>biscuitman.js sandbox</h1>
60138
</script>
61139
</header>
62140
<div class="container">
141+
<p style="text-align:center"><a class="img" href="https://github.com/replete/biscuitman"><img src="https://github.githubassets.com/assets/pinned-octocat-093da3e6fa40.svg" style="width:50px;"/>README @ Github repo</a></p>
142+
63143
<p>Biscuits, the beloved treats that accompany tea time, snack breaks, and dessert cravings. In this comprehensive guide, we delve into the world of biscuits, exploring their history, varieties, and cultural significance.</p>
64144

65145
<h2>History of Biscuits</h2>
@@ -83,65 +163,5 @@ <h3>Jaffa Cakes</h3>
83163
<p>While technically not biscuits but often included in biscuit assortments, Jaffa Cakes are a beloved snack consisting of a sponge cake base topped with a layer of orange-flavored jelly and coated in chocolate. The combination of tangy orange and rich chocolate makes Jaffa Cakes a delightful treat for any occasion.</p>
84164
</div>
85165

86-
<!-- analytics scripts -->
87-
<script data-consent="analytics" async src="https://www.googletagmanager.com/gtag/js?id=G-TEST" type="text/plain" id="js-analytics-gtm">
88-
/*
89-
Normally <script> tags with src property will not evaluate embedded script content,
90-
but in this scenario you might want some code to run after a file has loaded,
91-
so biscuitman handles this for you:
92-
93-
If a biscuitman inactive script (text/plain) has both src AND embedded script content
94-
like the one you are readiing now, biscuitman will inject the embedded script as separate
95-
adjacent script tag after the parent script has loaded and executed.
96-
*/
97-
console.log('This javascript is injected into a new adjacent <script> tag only after the src script has loaded');
98-
console.log(google_tag_manager) // only available once loaded
99-
</script>
100-
<script data-consent="analytics" type="text/plain" id="js-analytics-gtm-after">
101-
console.log('This script runs as soon as analytics consent is granted')
102-
</script>
103-
<script id="js-analytics-statcounter-setup">
104-
// not handled by biscuitman
105-
var sc_project=9999999
106-
var sc_invisible=1
107-
var sc_security="beefbeef"
108-
var sc_https=1
109-
</script>
110-
<script data-consent="analytics" async src="https://statcounter.com/counter/counter.js" type="text/plain" id="js-analytics-statcounter"></script>
111-
112-
<script id="js-analytics-misc" data-consent="analytics" type="text/plain">
113-
console.log('This embedded script will be inserted when analytics consent is granted')
114-
</script>
115-
116-
<!-- biscuitman config, unless its a one-page site serve this from biscuitman-config.js -->
117-
<script>
118-
biscuitman = {
119-
msg: 'By clicking "Accept All", you agree to the use of cookies for improving browsing, providing personalized ads or content, and analyzing traffic.',
120-
info: `Cookies categorized as "Essential" are stored in your browser to enable basic site functionalities.
121-
Additionally, third-party cookies are utilized to analyze website usage, store preferences, and deliver relevant content and advertisements with your consent.
122-
While you have the option to enable or disable some or all of these cookies, note that disabling certain ones may impact your browsing experience.`,
123-
sections: ['essential','functional','analytics','performance','advertisement','uncategorized'],
124-
essentialTitle: 'Essential',
125-
essentialMessage: 'Essential cookies are reuired for basic site functionality',
126-
functionalTitle: 'Functional',
127-
functionalMessage: 'Functional cookies allow us to perform specific tasks such as sharing website content on social media platforms, gathering feedback, and enabling other third-party features',
128-
analyticsTitle: 'Analytics',
129-
analyticsMessage: 'Analytical cookies allow us to understand visitor interactions with the website, offering insights into metrics like visitor count, bounce rate, and traffic source',
130-
analyticsCookies: {
131-
'_ga': 'This cookie, set by Google Analytics, computes visitor, session, and campaign data, tracking site usage for analytical reports. It stores information anonymously, assigning a randomly generated number to identify unique visitors',
132-
'_ga_*': 'Google Analytics uses this cookie for storing page view count'
133-
},
134-
performanceTitle: 'Performance',
135-
performanceMessage: 'Performance cookies allow us to understand critical website performance indicators, contributing to an enhanced user experience for visitors',
136-
advertisementTitle: 'Advertisement',
137-
advertisementMessage: 'Advertisement cookies serve to deliver tailored advertisements to visitors based on their previous page visits and to evaluate the efficacy of advertising campaigns',
138-
uncategorizedTitle: 'Uncategorized',
139-
uncategorizedMessage: 'Uncategorized cookies are those currently under analysis and have not yet been assigned to a specific category',
140-
acceptNonEU: true
141-
}
142-
</script>
143-
<!-- biscuitman must be after biscuitman config and data-consent scripts -->
144-
<script src="biscuitman.js"></script>
145-
146166
</body>
147167
</html>

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,6 @@
2222
"bugs": {
2323
"url": "https://github.com/replete/biscuitman/issues"
2424
},
25-
"funding": "https://buymeacoffee.com/replete"
25+
"funding": "https://buymeacoffee.com/replete",
26+
"homepage": "https://replete.github.io/biscuitman"
2627
}

0 commit comments

Comments
 (0)