A repo for my personal website
Working on adding blog; currently pulls from atproto data, but need to add page to display data
+65
-7
+17
package-lock.json
+17
package-lock.json
···
8
8
"name": "cityboundforest-ui",
9
9
"version": "1.0.0",
10
10
"license": "MIT",
11
+
"dependencies": {
12
+
"crypto-js": "^4.2.0"
13
+
},
11
14
"devDependencies": {
15
+
"@types/crypto-js": "^4.2.2",
12
16
"netlify-cli": "^23.3.1",
13
17
"npm": "^11.5.2",
14
18
"typescript": "^4.1.3"
15
19
}
20
+
},
21
+
"node_modules/@types/crypto-js": {
22
+
"version": "4.2.2",
23
+
"resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.2.tgz",
24
+
"integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==",
25
+
"dev": true,
26
+
"license": "MIT"
27
+
},
28
+
"node_modules/crypto-js": {
29
+
"version": "4.2.0",
30
+
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
31
+
"integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
32
+
"license": "MIT"
16
33
},
17
34
"node_modules/netlify-cli": {
18
35
"version": "23.3.1",
+4
package.json
+4
package.json
+19
public/blog/index.html
+19
public/blog/index.html
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<link rel="stylesheet" href="/style.css" />
5
+
<script type="text/javascript" src="/blog.js"></script>
6
+
</head>
7
+
<body>
8
+
<div id="nav-links">
9
+
<span class="nav-link"><a href="/#">Home</a></span>
10
+
<span class="nav-link"><a href="/#about">About</a></span>
11
+
<span class="nav-link"><a href="/#portfolio">Portfolio</a></span>
12
+
<span class="nav-link"><a href="/blog">Blog</a></span>
13
+
<span class="nav-link"><a href="/#links">Links</a></span>
14
+
</div>
15
+
<div id="blog-content">
16
+
<h3>Blog</h3>
17
+
</div>
18
+
</body>
19
+
</html>
+1
-4
public/index.html
+1
-4
public/index.html
···
9
9
<span class="nav-link"><a href="#">Home</a></span>
10
10
<span class="nav-link"><a href="#about">About</a></span>
11
11
<span class="nav-link"><a href="#portfolio">Portfolio</a></span>
12
-
<span class="nav-link"><a href="#blog">Blog</a></span>
12
+
<span class="nav-link"><a href="/blog">Blog</a></span>
13
13
<span class="nav-link"><a href="#links">Links</a></span>
14
14
</div>
15
15
<div id="home-page" class="page">
···
38
38
<p><span class="portfolio-link"><a href="/portfolio#four-woods">The Four Woods Podcast - Jan 2021:Apr 2021</a> <span class="desc" data-desc="An audio drama podcast about myth and magic - Writer, Director, Editor, Producer" data-label="The Four Woods Podcast">Desc</span></span></p>
39
39
<h3 id="desc-label"></h3>
40
40
<p id="desc-box"></p>
41
-
</div>
42
-
<div id="blog-page" class="page">
43
-
<p>Under construction...</p>
44
41
</div>
45
42
<div id="links-page" class="page">
46
43
<p>Under construction...</p>
+1
-1
public/portfolio/index.html
+1
-1
public/portfolio/index.html
···
9
9
<span class="nav-link"><a href="/#">Home</a></span>
10
10
<span class="nav-link"><a href="/#about">About</a></span>
11
11
<span class="nav-link"><a href="/#portfolio">Portfolio</a></span>
12
-
<span class="nav-link"><a href="/#blog">Blog</a></span>
12
+
<span class="nav-link"><a href="/blog">Blog</a></span>
13
13
<span class="nav-link"><a href="/#links">Links</a></span>
14
14
</div>
15
15
<div id="shut-in-page" class="page">
+1
-1
public/style.css
+1
-1
public/style.css
+20
src/blog.ts
+20
src/blog.ts
···
1
+
window.onload = () => {
2
+
fetch('https://bsky.social/xrpc/com.atproto.repo.listRecords?repo=cass.cityboundforest.com&collection=com.cityboundforest.blog', {
3
+
method: 'GET',
4
+
headers: {
5
+
'Content-Type': 'application/json'
6
+
}
7
+
}).then((res) => {
8
+
return res.json();
9
+
}).then((data) => {
10
+
data.records.forEach((record: { uri: string, value: { title: string } }) => {
11
+
const newLink = document.createElement('span');
12
+
newLink.classList.add('blog-link');
13
+
const newLinkA = document.createElement('a');
14
+
newLinkA.href = '/blog/item#' + record.uri.substr(record.uri.lastIndexOf('/') + 1);
15
+
newLinkA.innerText = record.value.title;
16
+
newLink.appendChild(newLinkA);
17
+
document.getElementById('blog-content')!.appendChild(newLink);
18
+
});
19
+
});
20
+
};