Skip to content

Commit e735958

Browse files
luminousherbsluminousherbs
committed
Create things/ten-years-ago
1 parent a2a36db commit e735958

File tree

3 files changed

+183
-1
lines changed

3 files changed

+183
-1
lines changed

‎things/feed.xml‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,14 @@
66
<link>https://luminousherbs.github.io/things</link>
77
<description>Various small toys, in JavaScript and HTML.</description>
88
<language>en</language>
9-
<lastBuildDate>Wed, 13 Aug 2025 10:16:00 +0100</lastBuildDate>
9+
<lastBuildDate>Sat, 01 Nov 2025 17:11:00 +0000</lastBuildDate>
10+
11+
<item>
12+
<title>Ten Years Ago</title>
13+
<link>https://luminousherbs.github.io/things/ten-years-ago</link>
14+
<pubDate>Sat, 01 Nov 2025 17:11:00 +0000</pubDate>
15+
<guid>ten-years-ago</guid>
16+
</item>
1017

1118
<item>
1219
<title>Birthday</title>

‎things/ten-years-ago/index.html‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!DOCTYPE html>
2+
<html lang="en" data-theme="dark">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
7+
<!-- javascript -->
8+
<script src="script.js" type="module" defer></script>
9+
<script src="/assets/scripts/toolbar.js" type="module" defer></script>
10+
<script src="/assets/scripts/tax.js" type="module" defer></script>
11+
12+
<!-- fonts don't matter -->
13+
<link rel="stylesheet" href="/assets/styles/default.css" />
14+
<link rel="preconnect" href="https://fonts.googleapis.com" />
15+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
16+
<link
17+
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap"
18+
rel="stylesheet"
19+
/>
20+
<style>
21+
iframe {
22+
width: 100%;
23+
aspect-ratio: calc(4 / 3);
24+
margin-top: 0.5em;
25+
}
26+
</style>
27+
28+
<!-- favicons -->
29+
<link
30+
rel="icon"
31+
type="image/png"
32+
sizes="32x32"
33+
href="/assets/favicons/default-32x32.png"
34+
/>
35+
<link
36+
rel="icon"
37+
type="image/png"
38+
sizes="32x32"
39+
href="/assets/favicons/default-16x16.png"
40+
/>
41+
<link rel="shortcut icon" href="/assets/favicons/windows.ico" />
42+
<link
43+
rel="apple-touch-icon"
44+
sizes="180x180"
45+
href="/assets/favicons/ios.png"
46+
/>
47+
<link
48+
rel="icon"
49+
type="image/png"
50+
sizes="192x192"
51+
href="/assets/favicons/android.png"
52+
/>
53+
54+
<!-- og (mastodon card) -->
55+
<meta property="og:title" content="luminousherbs" />
56+
<meta property="og:description" content="A website by luminousherbs." />
57+
<meta
58+
property="og:image"
59+
content="https://luminousherbs.github.io/things/og.png"
60+
/>
61+
<meta
62+
property="og:url"
63+
content="https://luminousherbs.github.io/things/ten-years-ago"
64+
/>
65+
<meta property="og:type" content="website" />
66+
67+
<title>Ten Years Ago</title>
68+
</head>
69+
<body>
70+
<noscript>
71+
<p>
72+
Your ancient browser doesn't support JavaScript. You can
73+
download a new one
74+
<a href="http://mozilla.org/firefox">here</a>.
75+
</p>
76+
</noscript>
77+
<header class="site-header">
78+
<div class="header-content">
79+
<div class="header-text">
80+
<h1>Ten Years Ago</h1>
81+
<p><strong>Loads should take 5 to 15 seconds.</strong></p>
82+
<noscript>
83+
<p>
84+
Your ancient browser doesn't support JavaScript. You
85+
can download a new one
86+
<a href="http://mozilla.org/firefox">here</a>.
87+
</p>
88+
</noscript>
89+
</div>
90+
<div class="dropdown" id="dropdown">
91+
<img
92+
src="/assets/favicons/android.png"
93+
class="header-img"
94+
alt="Tools"
95+
id="tools"
96+
/>
97+
<div id="dropdownContent" class="dropdown-content">
98+
<button onclick="edit()">Edit</button>
99+
<br />
100+
<button onclick="share()">Share</button>
101+
<br />
102+
<button onclick="downloadHTML()">Download HTML</button>
103+
<br />
104+
<button onclick="downloadJavaScript()">
105+
Download JavaScript
106+
</button>
107+
<br />
108+
<select id="instanceSelector"></select>
109+
<br /><br />
110+
<!-- extra padding to stop the cursor overshooting-->
111+
</div>
112+
</div>
113+
</div>
114+
</header>
115+
<hr />
116+
<button class="selector" data-link="http://www.bbc.co.uk">BBC</button>
117+
<button class="selector" data-link="http://www.youtube.com">
118+
YouTube
119+
</button>
120+
<button class="selector" data-link="http://www.twitter.com">
121+
Twitter
122+
</button>
123+
<button class="selector" data-link="https://store.steampowered.com/">
124+
Steam
125+
</button>
126+
<button class="selector" data-link="http://www.apple.com">Apple</button>
127+
<button
128+
class="selector"
129+
data-link="https://www.officialcharts.com/charts/singles-chart/"
130+
>
131+
Charts
132+
</button>
133+
<iframe id="frame" style="width: 100%; height: 100%"></iframe>
134+
<hr />
135+
<a href="..">&lt; Things</a>
136+
</body>
137+
</html>

‎things/ten-years-ago/script.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
console.log(location.pathname);
2+
3+
// html elements
4+
const frame = document.getElementById("frame");
5+
6+
// constants
7+
const today = new Date();
8+
const tenYearsAgo = adjustDate(today, -10);
9+
10+
Array.from(document.getElementsByClassName("selector")).forEach((button) => {
11+
button.addEventListener("click", () => {
12+
updateSource(getArchiveLink(button.dataset.link, tenYearsAgo));
13+
});
14+
});
15+
16+
function updateSource(url) {
17+
frame.src = url;
18+
}
19+
20+
function adjustDate(date, yearOffset) {
21+
const adjustedDate = new Date();
22+
adjustedDate.setFullYear(date.getFullYear() + yearOffset);
23+
return adjustedDate;
24+
}
25+
26+
function formatDate(date) {
27+
// wizardry
28+
return date.toISOString().slice(0, 10).replace(/-/g, "");
29+
}
30+
31+
function getArchiveLink(website, date) {
32+
return `https://web.archive.org/web/${formatDate(date)}/${website}`;
33+
}
34+
35+
updateSource(getArchiveLink("http://www.bbc.co.uk", tenYearsAgo));
36+
37+
console.log(today);
38+
console.log(tenYearsAgo);

0 commit comments

Comments
 (0)