Skip to content

Commit 63d2c37

Browse files
WebDevSimplifiedWebDevSimplified
committed
Finalize Analytics
1 parent 06f0f02 commit 63d2c37

File tree

8 files changed

+212
-62
lines changed

8 files changed

+212
-62
lines changed

‎src/components/BaseHead.astro

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,15 @@ const { title, description, permalink } = Astro.props
3939
<!-- Analytics -->
4040
<script
4141
defer
42-
data-domain="blog.webdevsimplified.com"
42+
data-domain={import.meta.env.PROD ? "blog.webdevsimplified.com" : "testing"}
4343
data-api="https://royal-surf-e76e.kyle-0ed.workers.dev/api/e"
44-
src="https://royal-surf-e76e.kyle-0ed.workers.dev/js/script.js"></script>
44+
src={`https://royal-surf-e76e.kyle-0ed.workers.dev/js/script.manual${
45+
import.meta.env.PROD ? "" : ".local"
46+
}.js`}></script>
47+
<script is:inline>
48+
window.plausible =
49+
window.plausible ||
50+
function () {
51+
; (window.plausible.q = window.plausible.q || []).push(arguments)
52+
}
53+
</script>

‎src/components/BaseTopOfBody.astro

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
import BlogHeader from "./BlogHeader.astro"
3+
import ConvertkitForm from "./ConvertkitForm.astro"
4+
import PageAnalytics from "./PageAnalytics.astro"
5+
import UserSettingsLoad from "./UserSettingsLoad.astro"
6+
---
7+
8+
<UserSettingsLoad />
9+
<ConvertkitForm />
10+
<PageAnalytics />
11+
<BlogHeader />

‎src/components/ConvertkitForm.astro

Lines changed: 83 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,91 @@
11
<script is:inline>
2-
const queryParams = new URLSearchParams(window.location.search)
3-
const form = document.querySelector(".formkit-sticky-bar")
4-
if (queryParams.get("fromNewsletter") === "true") {
5-
window.location = window.location.pathname
6-
localStorage.setItem('subscribed-to-newsletter', true)
7-
}
2+
const queryParams = new URLSearchParams(window.location.search)
3+
const form = document.querySelector(".formkit-sticky-bar")
4+
const fromNewsletter = queryParams.get("fromNewsletter")
85

9-
if (queryParams.get("fromNewsletter") === "false") {
10-
window.location = window.location.pathname
11-
localStorage.removeItem('subscribed-to-newsletter')
12-
}
6+
if (fromNewsletter === "true") {
7+
history.replaceState(
8+
null,
9+
null,
10+
`${location.pathname}?${queryParams.toString()}${location.hash}`
11+
)
12+
localStorage.setItem("subscribed-to-newsletter", true)
13+
}
14+
15+
if (fromNewsletter === "false") {
16+
history.replaceState(
17+
null,
18+
null,
19+
`${location.pathname}?${queryParams.toString()}${location.hash}`
20+
)
21+
localStorage.removeItem("subscribed-to-newsletter")
22+
localStorage.removeItem("date-of-last-newsletter-link")
23+
}
24+
25+
if (
26+
localStorage.getItem("subscribed-to-newsletter") === "true" &&
27+
localStorage.getItem("date-of-last-newsletter-link") == null
28+
) {
29+
localStorage.setItem("date-of-last-newsletter-link", new Date())
30+
}
1331

14-
if (
15-
form == null &&
16-
JSON.parse(localStorage.getItem("subscribed-to-newsletter")) !== true &&
17-
JSON.parse(sessionStorage.getItem("form-closed")) !== true
18-
) {
19-
const script = document.createElement("script")
20-
script.src = "https://web-dev-simplified.ck.page/23989b36d2/index.js"
21-
script.async = true
22-
script.dataset.uid = '23989b36d2'
23-
24-
const observer = new MutationObserver((entries) => {
25-
entries.forEach(entry => {
26-
const formElem = [...entry.addedNodes].find(node => {
27-
if (node.matches == null) return
28-
return node.matches(".formkit-sticky-bar")
29-
})
30-
if (formElem == null) return
31-
32-
formElem.addEventListener("transitionend", () => {
33-
if (formElem.dataset.active == null || formElem.dataset.active === "false") {
34-
formElem.remove()
35-
}
36-
})
37-
38-
document.body.prepend(formElem)
39-
observer.disconnect()
32+
function dateWithinLast30Days(date) {
33+
const today = new Date()
34+
const timeDiff = Math.abs(today.getTime() - date.getTime())
35+
const diffDays = timeDiff / (1000 * 3600 * 24)
36+
return diffDays <= 30
37+
}
38+
const dateStringOfLastNewsletterLink = localStorage.getItem(
39+
"date-of-last-newsletter-link"
40+
)
41+
if (
42+
dateStringOfLastNewsletterLink != null &&
43+
!dateWithinLast30Days(new Date(dateStringOfLastNewsletterLink))
44+
) {
45+
localStorage.removeItem("subscribed-to-newsletter")
46+
localStorage.removeItem("date-of-last-newsletter-link")
47+
}
48+
49+
if (
50+
form == null &&
51+
JSON.parse(localStorage.getItem("subscribed-to-newsletter")) !== true &&
52+
JSON.parse(sessionStorage.getItem("form-closed")) !== true
53+
) {
54+
const script = document.createElement("script")
55+
script.src = "https://web-dev-simplified.ck.page/23989b36d2/index.js"
56+
script.async = true
57+
script.dataset.uid = "23989b36d2"
58+
59+
const observer = new MutationObserver(entries => {
60+
entries.forEach(entry => {
61+
const formElem = [...entry.addedNodes].find(node => {
62+
if (node.matches == null) return
63+
return node.matches(".formkit-sticky-bar")
4064
})
65+
if (formElem == null) return
66+
67+
formElem.addEventListener("transitionend", () => {
68+
if (
69+
formElem.dataset.active == null ||
70+
formElem.dataset.active === "false"
71+
) {
72+
formElem.remove()
73+
}
74+
})
75+
76+
document.body.prepend(formElem)
77+
observer.disconnect()
4178
})
79+
})
4280

43-
observer.observe(document.body, { childList: true })
81+
observer.observe(document.body, { childList: true })
4482

45-
document.body.append(script)
46-
}
83+
document.body.append(script)
84+
}
4785

48-
document.addEventListener("click", e => {
49-
if (e.target.matches("[data-formkit-close]")) {
50-
sessionStorage.setItem("form-closed", true)
51-
}
52-
})
53-
</script>
86+
document.addEventListener("click", e => {
87+
if (e.target.matches("[data-formkit-close]")) {
88+
sessionStorage.setItem("form-closed", true)
89+
}
90+
})
91+
</script>

‎src/components/PageAnalytics.astro

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script is:inline>
2+
const theme = localStorage.getItem("THEME")
3+
const readingWidth = localStorage.getItem("READING_WIDTH")
4+
const subscribedToNewsletter = localStorage.getItem(
5+
"subscribed-to-newsletter"
6+
)
7+
8+
plausible("pageview", {
9+
props: { theme, readingWidth, subscribedToNewsletter },
10+
callback: () => {
11+
let shouldClean = false
12+
const queryParams = new URLSearchParams(location.search)
13+
14+
Array.from(queryParams.keys()).forEach(key => {
15+
if (key.startsWith("utm_")) {
16+
queryParams.delete(key)
17+
shouldClean = true
18+
}
19+
})
20+
21+
if (shouldClean) {
22+
history.replaceState(
23+
null,
24+
null,
25+
`${location.pathname}?${queryParams}${location.hash}`
26+
)
27+
}
28+
},
29+
})
30+
</script>

‎src/layouts/BlogPost.astro

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,8 @@ import "../styles/theme.css"
33
import "../styles/blog.css"
44
import "../styles/shiki-highlight.css"
55
import BaseHead from "../components/BaseHead.astro"
6-
import BlogHeader from "../components/BlogHeader.astro"
76
import BlogPost from "../components/BlogPost.astro"
8-
import ConvertkitForm from "../components/ConvertkitForm.astro"
9-
import UserSettingsLoad from "../components/UserSettingsLoad.astro"
7+
import BaseTopOfBody from "src/components/BaseTopOfBody.astro"
108
119
const { content } = Astro.props
1210
const {
@@ -26,9 +24,7 @@ const url = Astro.request.url
2624
</head>
2725

2826
<body>
29-
<UserSettingsLoad />
30-
<ConvertkitForm />
31-
<BlogHeader />
27+
<BaseTopOfBody />
3228
<div class="wrapper">
3329
<BlogPost {title} {author} {date} {tags} {url}>
3430
<slot />

‎src/pages/404.astro

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
import "../styles/theme.css"
3+
import "../styles/blog.css"
4+
import BaseHead from "src/components/BaseHead.astro"
5+
import BaseTopOfBody from "src/components/BaseTopOfBody.astro"
6+
7+
let title = "404 - Not Found"
8+
let description = "Web Dev Simplified Blog"
9+
let permalink = "https://blog.webdevsimplified.com"
10+
---
11+
12+
<html lang="en">
13+
<head>
14+
<BaseHead {title} {description} {permalink} />
15+
</head>
16+
17+
<body>
18+
<BaseTopOfBody />
19+
<main class="wrapper">
20+
<h1 class="header">404 - Not Found</h1>
21+
<p>We could not find the page you were looking for.</p>
22+
<a href="/" class="btn">Back To Home</a>
23+
</main>
24+
<style>
25+
.wrapper {
26+
text-align: center;
27+
font-size: 2rem;
28+
}
29+
30+
.header {
31+
margin-top: 2rem;
32+
font-size: 5rem;
33+
}
34+
35+
@media (max-width: 800px) {
36+
.header {
37+
font-size: 4rem;
38+
}
39+
}
40+
41+
@media (max-width: 600px) {
42+
.header {
43+
font-size: 3rem;
44+
}
45+
}
46+
47+
.btn {
48+
display: inline-block;
49+
margin-top: 2rem;
50+
background-color: transparent;
51+
color: var(--theme-text);
52+
border: 1px solid var(--theme-accent);
53+
border-radius: 0.5em;
54+
padding: 0.5em 0.75em;
55+
transition: 150ms ease-in-out;
56+
cursor: pointer;
57+
}
58+
59+
.btn:hover,
60+
.btn.active {
61+
background-color: var(--theme-bg-accent);
62+
color: var(--theme-accent);
63+
text-decoration: none;
64+
}
65+
</style>
66+
<script>
67+
plausible("404", { props: { path: document.location.pathname } })
68+
</script>
69+
</body>
70+
</html>

‎src/pages/index.astro

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,8 @@
33
import "../styles/theme.css"
44
import "../styles/blog.css"
55
import BaseHead from "../components/BaseHead.astro"
6-
import BlogHeader from "../components/BlogHeader.astro"
76
import BlogList from "/src/components/BlogList.jsx"
8-
import ConvertkitForm from "../components/ConvertkitForm.astro"
9-
import UserSettingsLoad from "../components/UserSettingsLoad.astro"
7+
import BaseTopOfBody from "src/components/BaseTopOfBody.astro"
108
119
interface MarkdownFrontmatter {
1210
date: number
@@ -57,11 +55,7 @@ const allPosts = allMarkdownPosts
5755
</head>
5856

5957
<body>
60-
<UserSettingsLoad />
61-
<ConvertkitForm />
62-
<BlogHeader />
63-
<div class="wrapper">
64-
<BlogList client:load allPosts={allPosts} />
65-
</div>
58+
<BaseTopOfBody />
59+
<BlogList client:load allPosts={allPosts} />
6660
</body>
6761
</html>

‎src/pages/rss.xml.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,5 @@ export function get(context) {
2121
})),
2222
})
2323
}
24+
25+
// TODO: Make work with Content folders

0 commit comments

Comments
 (0)