Skip to content

Commit b55bde4

Browse files
WebDevSimplifiedWebDevSimplified
committed
Add Analytics
1 parent 82122ee commit b55bde4

File tree

6 files changed

+118
-109
lines changed

6 files changed

+118
-109
lines changed

‎astro.config.mjs

Lines changed: 3 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,12 @@
66
// You can disable this by removing "@ts-check" and `@type` comments below.
77
import youtubeEmbed from "./src/plugins/youtubeEmbed.mjs"
88
import responsiveImages from "./src/plugins/responsiveImages.mjs"
9-
import codeHighlightPre from "./src/plugins/codeHighlightPre.mjs"
10-
import preact from "@astrojs/preact" // @ts-check
11-
import remarkShiki from "@stefanprobst/remark-shiki"
12-
import * as shiki from "shiki"
13-
import rangeParser from "parse-numeric-range"
9+
import myRemarkShiki from "./src/plugins/myRemarkShiki.mjs"
1410

1511
import { defineConfig } from "astro/config"
1612
import sitemap from "@astrojs/sitemap"
17-
18-
// https://astro.build/config
1913
import mdx from "@astrojs/mdx"
20-
21-
const shikiHighlighter = await shiki.getHighlighter({ theme: "dark-plus" })
14+
import preact from "@astrojs/preact" // @ts-check
2215

2316
// https://astro.build/config
2417
export default defineConfig(
@@ -29,38 +22,11 @@ export default defineConfig(
2922
markdown: {
3023
syntaxHighlight: false,
3124
// TODO: Add official Shiki integration when line highlighting is supported
32-
remarkPlugins: [
33-
[
34-
remarkShiki,
35-
{
36-
highlighter: shikiHighlighter,
37-
parseMeta,
38-
},
39-
],
40-
youtubeEmbed,
41-
responsiveImages,
42-
],
25+
remarkPlugins: [myRemarkShiki, youtubeEmbed, responsiveImages],
4326
},
4427
}
4528
)
4629

47-
function parseMeta(meta, { lang }) {
48-
if (lang != null) parseLang(lang)
49-
50-
if (meta == null) return undefined
51-
if (meta.length === 0) return undefined
52-
53-
return rangeParser(meta.replaceAll(/[{}]/g, "")).map(line => {
54-
return { line, classes: ["highlighted-line"] }
55-
})
56-
}
57-
58-
function parseLang(lang) {
59-
if (shikiHighlighter.getLoadedLanguages().includes(lang)) return
60-
61-
console.error(`The language "${lang}" doesn't exist`)
62-
}
63-
6430
// TODO: Check to see if my plugins can be replaced with official integrations.
6531
// TODO: Implement experimental assets integration
6632
// TODO: Move over to the content folder

‎src/components/BaseHead.astro

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
22
export interface Props {
3-
title: string;
4-
description: string;
5-
permalink: string;
3+
title: string
4+
description: string
5+
permalink: string
66
}
7-
const { title, description, permalink } = Astro.props;
7+
const { title, description, permalink } = Astro.props
88
---
99

1010
<!-- Global Metadata -->
@@ -31,4 +31,14 @@ const { title, description, permalink } = Astro.props;
3131

3232
<!-- Fonts -->
3333
<link rel="preconnect" href="https://fonts.gstatic.com" />
34-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;700&display=swap" />
34+
<link
35+
rel="stylesheet"
36+
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;700&display=swap"
37+
/>
38+
39+
<!-- Analytics -->
40+
<script
41+
defer
42+
data-domain="blog.webdevsimplified.com"
43+
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>

‎src/components/BlogPost.astro

Lines changed: 69 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,89 @@
11
---
2-
import dateFormatter from '../utils/dateFormatter.js'
3-
import TagBar from './TagBar.jsx'
4-
import ShareButtons from '/src/components/ShareButtons.jsx'
2+
import dateFormatter from "../utils/dateFormatter.js"
3+
import TagBar from "./TagBar.jsx"
4+
import ShareButtons from "/src/components/ShareButtons.jsx"
55
66
export interface Props {
7-
title: string;
8-
date: string;
9-
url: string
10-
tags: string[]
7+
title: string
8+
date: string
9+
url: string
10+
tags: string[]
1111
}
1212
13-
const { title, date, tags, url } = Astro.props;
13+
const { title, date, tags, url } = Astro.props
1414
const siteUrl = Astro.site.href
1515
---
1616

1717
<div class="layout">
18-
<article class="content">
19-
<div>
20-
<header>
21-
<h1 class="title">{title}</h1>
22-
<p class="publish-date">{dateFormatter.format(new Date(date))}</p>
23-
<div style="margin-bottom: 1rem">
24-
<TagBar
25-
tags={tags.map(tag => {
26-
return { name: tag }
27-
})}
28-
/>
29-
</div>
30-
<ShareButtons client:load title={title} url={url} twitterHandle="DevSimplified" siteUrl={siteUrl} tags={tags} />
31-
</header>
32-
<main>
33-
<slot />
34-
</main>
35-
<!-- TODO: Add author and next/previous buttons. Also, maybe add a scroll to top button as well -->
36-
<!-- TODO: Add custom 404 page -->
37-
<!-- TODO: Add search/tags to URL to make the back button work better -->
38-
<!-- TODO: Add Google Analytics -->
39-
<!-- TODO: Add social share images (https://joeprevite.com/create-a-twitter-card-for-your-blog) (Maybe dynamically generate a CSS page that is scraped with puppeteer or use something like ImageMagik or ffmpeg) -->
40-
<!-- TODO: Add Pagination -->
41-
<!-- TODO: Add in width slider for users -->
42-
<!-- TODO: Add Themes/Dark mode -->
43-
<!-- TODO: Add prefers-color-scheme support -->
44-
</div>
45-
</article>
18+
<article class="content">
19+
<div>
20+
<header>
21+
<h1 class="title">{title}</h1>
22+
<p class="publish-date">{dateFormatter.format(new Date(date))}</p>
23+
<div style="margin-bottom: 1rem">
24+
<TagBar
25+
tags={tags.map(tag => {
26+
return { name: tag }
27+
})}
28+
/>
29+
</div>
30+
<ShareButtons
31+
client:load
32+
title={title}
33+
url={url}
34+
twitterHandle="DevSimplified"
35+
siteUrl={siteUrl}
36+
tags={tags}
37+
/>
38+
</header>
39+
<main>
40+
<slot />
41+
</main>
42+
<!-- TODO: Add author and next/previous buttons. Also, maybe add a scroll to top button as well -->
43+
<!-- TODO: Add custom 404 page -->
44+
<!-- TODO: Add search/tags to URL to make the back button work better -->
45+
<!-- TODO: Add Analytics -->
46+
<!-- TODO: Add social share images (https://joeprevite.com/create-a-twitter-card-for-your-blog) (Maybe dynamically generate a CSS page that is scraped with puppeteer or use something like ImageMagik or ffmpeg) -->
47+
<!-- TODO: Add Pagination -->
48+
</div>
49+
</article>
4650
</div>
4751

4852
<style>
49-
.content {
50-
margin-bottom: 8rem;
51-
}
53+
.content {
54+
margin-bottom: 8rem;
55+
}
5256

53-
.content :global(main > * + :not(h2):not(h3)) {
54-
margin-top: 1rem;
55-
}
57+
.content :global(main > * + :not(h2):not(h3)) {
58+
margin-top: 1rem;
59+
}
5660

57-
.content :global(h2) {
58-
margin-top: 4rem;
59-
}
61+
.content :global(h2) {
62+
margin-top: 4rem;
63+
}
6064

61-
header {
62-
margin-bottom: 2rem;
63-
}
65+
header {
66+
margin-bottom: 2rem;
67+
}
6468

65-
.title,
66-
.publish-date {
67-
margin: 0;
68-
}
69+
.title,
70+
.publish-date {
71+
margin: 0;
72+
}
6973

70-
.publish-date {
71-
color: var(--theme-text-lighter);
72-
}
74+
.publish-date {
75+
color: var(--theme-text-lighter);
76+
}
7377

74-
.title {
75-
font-size: 2.25rem;
76-
font-weight: 700;
77-
}
78+
.title {
79+
font-size: 2.25rem;
80+
font-weight: 700;
81+
}
7882

79-
@media (max-width: 50em) {
80-
.title {
81-
font-size: 1.75rem;
82-
overflow-wrap: break-word;
83-
}
84-
}
83+
@media (max-width: 50em) {
84+
.title {
85+
font-size: 1.75rem;
86+
overflow-wrap: break-word;
87+
}
88+
}
8589
</style>

‎src/pages/2020-03/javascript-optional-chaining/index.mdx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,6 @@ const name = person?.name
2727
2828
In the above code we have a variable `person` which may or may not be null/undefined. Because we do not know if `person` is defined we cannot directly access the `name` property since if `person` is undefined we would get the following error.
2929
30-
{/* TODO: How to handle plain text without escaping */}
31-
3230
```
3331
Uncaught TypeError: Cannot read property 'name' of undefined
3432
```

‎src/pages/2020-04/use-effect/index.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ function WindowSizeList({ url }) {
123123
useEffect(() => {
124124
setItems(CustomApi.getList(url))
125125
}, [url])
126+
126127
// TODO: Setup resize event listener on mount
127128
// TODO: Cleanup resize event listener on un-mount
128129

‎src/plugins/myRemarkShiki.mjs

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import remarkShiki from "@stefanprobst/remark-shiki"
2+
import * as shiki from "shiki"
3+
import rangeParser from "parse-numeric-range"
4+
5+
const shikiHighlighter = await shiki.getHighlighter({ theme: "dark-plus" })
6+
7+
function parseMeta(meta, { lang }) {
8+
if (lang != null) parseLang(lang)
9+
10+
if (meta == null) return undefined
11+
if (meta.length === 0) return undefined
12+
13+
return rangeParser(meta.replaceAll(/[{}]/g, "")).map(line => {
14+
return { line, classes: ["highlighted-line"] }
15+
})
16+
}
17+
18+
function parseLang(lang) {
19+
if (shikiHighlighter.getLoadedLanguages().includes(lang)) return
20+
21+
console.error(`The language "${lang}" doesn't exist`)
22+
}
23+
24+
export default [
25+
remarkShiki,
26+
{
27+
highlighter: shikiHighlighter,
28+
parseMeta,
29+
},
30+
]

0 commit comments

Comments
 (0)