eric/twtxt-lib
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update color theme in demo.

Browse Source 
save current theme preference to localstorage.
update to v0.10.0.
This commit is contained in:
Eric Woodward
2026-03-30 23:53:20 -04:00
parent c776b5df6a
commit ed9bd8ac34
9 changed files with 92 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -58,7 +58,7 @@ A function that takes the constituent parts of a "twt" and generates an
[extension-compatible hash](https://twtxt.dev/exts/twt-hash.html) for it, which is then returned.
Version 0.10.0 and above includes support for
[V2 of the Hashing Spec](https://git.mills.io/yarnsocial/twtxt.dev/pulls/28):
[V2 of the Hashing Spec](https://twtxt.dev/exts/twt-hash-v2.html):
- A specific hashing version can be provided as an optional argument.
- When no version argument is provided, it defaults to using version 1 for all twts with a created

51
dist-demo/demo/styles.css
View File

@@ -11,6 +11,7 @@
--link-active: lch(from var(--main-link) calc(l + 20) c h);
--gray-light: #5F758E;
--gray-dark: #404f60;
}
@keyframes riseInDetails {
@@ -59,9 +60,10 @@ a:active {
}
a:hover {
background-color: var(--link-active);
border-color: var(--link-active);
border-radius: .5rem;
color: var(--link-active);
color: var(--bg-main);
}
button {
@@ -77,6 +79,7 @@ code {
}
details figure {
background-color: transparent;
margin: 1rem .5rem;
}
@@ -141,6 +144,8 @@ textarea {
summary {
cursor: pointer;
}
/** Classes */
.code-cmd {
color: var(--gray-light);
@@ -218,6 +223,10 @@ summary {
padding: 0;
}
.tab:target .tab-link {
background-color: var(--bg-main);
}
.tab:target .tab-panel {
display: block;
}
@@ -226,10 +235,6 @@ body:not(:has(:target)) #tabOverview-panel {
display: block;
}
.tab:target .tab-link {
background: linear-gradient(var(--bg-dark), var(--bg-main));
}
.tab:target + .tab {
margin-top: auto;
}
@@ -317,7 +322,7 @@ body:not(:has(:target)) #tabOverview-link {
}
.tab-link {
background-color: transparent;;
background-color: transparent;
border: 2px solid var(--fg-main);
border-bottom-color: transparent;
margin-top: -4.5rem;
@@ -358,15 +363,15 @@ body:not(:has(:target)) #tabOverview-link {
}
.tab:target .tab-link {
background-color: var(--bg-main);
border-bottom: 0;
font-size: 1.2rem;
margin-top: -4.55rem;
}
.tab:target .tab-link:hover {
background-color: var(--link-active);
border-radius: .5rem .5rem 0 0;
background-color: var(--bg-dark);
color: var(--main-link);
font-size: 1.2rem;
margin-top: -4.55rem;
}
@@ -411,19 +416,27 @@ body.invertedTheme {
color: var(--bg-main);
}
body.invertedTheme a {
color: var(--gray-dark);
}
body.invertedTheme a:hover {
background-color: var(--main-link);
background-color: var(--bg-dark);
border-color: var(--bg-dark);
color: var(--fg-main);
}
body.invertedTheme code {
background-color: var(--bg-light);
color: var(--bg-main);
}
body.invertedTheme figcaption {
border-color: var(--bg-main);
}
body.invertedTheme figure {
background-color: var(--gray-light);
background-color: transparent;
border-color: var(--bg-main);
}
@@ -442,27 +455,33 @@ body.invertedTheme .code-cmd {
color: var(--bg-dark);
}
body.invertedTheme .code-cmnt {
color: var(--bg-dark);
}
body.invertedTheme .code-str {
color: var(--bg-dark);
}
body.invertedTheme .tab-link {
color: var(--bg-dark);
background-color: var(--fg-main);
border-color: var(--bg-main);
}
body.invertedTheme .tab:target .tab-link {
background: linear-gradient(var(--link-active), var(--fg-main));
}
body.invertedTheme .tab-link:hover {
background-color: var(--main-link);
background-color: var(--bg-dark);
border-color: var(--bg-dark);
}
body.invertedTheme .tab:target .tab-link {
background-color: var(--fg-main);
border-color: var(--bg-main);
border-color: var(--bg-main);
}
body.invertedTheme .tab:target .tab-link:hover {
background-color: var(--bg-dark);
}
body.invertedTheme .tab-panel {

8
dist-demo/demo/theme-toggle.js
View File

@@ -8,6 +8,11 @@ document.addEventListener("DOMContentLoaded", () => {
toggle.addEventListener("click", () => {
document.body.classList.toggle("invertedTheme");
localStorage.setItem(
"useInvertedTheme",
document.body.classList.contains("invertedTheme") ? "true" : "",
);
});
toggle.innerHTML = `
@@ -28,6 +33,9 @@ document.addEventListener("DOMContentLoaded", () => {
`.trim();
document.body.appendChild(toggle);
if (!!localStorage.getItem("useInvertedTheme"))
document.body.classList.add("invertedTheme");
});
// @license-end

2
dist-demo/index.html
View File

@@ -171,7 +171,7 @@
<p>
Version 0.10.0 and above includes support for
<a href="https://git.mills.io/yarnsocial/twtxt.dev/pulls/28">V2 of the
<a href="https://twtxt.dev/exts/twt-hash-v2.html">V2 of the
Hashing Spec</a>:
<ul>

2
index.html
View File

@@ -171,7 +171,7 @@
<p>
Version 0.10.0 and above includes support for
<a href="https://git.mills.io/yarnsocial/twtxt.dev/pulls/28">V2 of the
<a href="https://twtxt.dev/exts/twt-hash-v2.html">V2 of the
Hashing Spec</a>:
<ul>

2
jsr.json
View File

@@ -1,6 +1,6 @@
{
"name": "@itsericwoodward/twtxt-lib",
"version": "0.10.0",
"version": "0.10.1",
"license": "MIT",
"exports": "./src/index.ts"
}

4
package.json
View File

@@ -1,11 +1,11 @@
{
"name": "twtxt-lib",
"version": "0.10.0",
"version": "0.10.1",
"description": "An isomorphic TypeScript library of utility functions for parsing and interacting with twtxt.txt files.",
"license": "MIT",
"author": {
"name": "Eric Woodward",
"email": "hey@itsericwoodward.com",
"email": "codemaster@itsericwoodward.com",
"url": "https://www.itsericwoodward.com"
},
"repository": {

51
public/demo/styles.css
View File

@@ -11,6 +11,7 @@
--link-active: lch(from var(--main-link) calc(l + 20) c h);
--gray-light: #5F758E;
--gray-dark: #404f60;
}
@keyframes riseInDetails {
@@ -59,9 +60,10 @@ a:active {
}
a:hover {
background-color: var(--link-active);
border-color: var(--link-active);
border-radius: .5rem;
color: var(--link-active);
color: var(--bg-main);
}
button {
@@ -77,6 +79,7 @@ code {
}
details figure {
background-color: transparent;
margin: 1rem .5rem;
}
@@ -141,6 +144,8 @@ textarea {
summary {
cursor: pointer;
}
/** Classes */
.code-cmd {
color: var(--gray-light);
@@ -218,6 +223,10 @@ summary {
padding: 0;
}
.tab:target .tab-link {
background-color: var(--bg-main);
}
.tab:target .tab-panel {
display: block;
}
@@ -226,10 +235,6 @@ body:not(:has(:target)) #tabOverview-panel {
display: block;
}
.tab:target .tab-link {
background: linear-gradient(var(--bg-dark), var(--bg-main));
}
.tab:target + .tab {
margin-top: auto;
}
@@ -317,7 +322,7 @@ body:not(:has(:target)) #tabOverview-link {
}
.tab-link {
background-color: transparent;;
background-color: transparent;
border: 2px solid var(--fg-main);
border-bottom-color: transparent;
margin-top: -4.5rem;
@@ -358,15 +363,15 @@ body:not(:has(:target)) #tabOverview-link {
}
.tab:target .tab-link {
background-color: var(--bg-main);
border-bottom: 0;
font-size: 1.2rem;
margin-top: -4.55rem;
}
.tab:target .tab-link:hover {
background-color: var(--link-active);
border-radius: .5rem .5rem 0 0;
background-color: var(--bg-dark);
color: var(--main-link);
font-size: 1.2rem;
margin-top: -4.55rem;
}
@@ -411,19 +416,27 @@ body.invertedTheme {
color: var(--bg-main);
}
body.invertedTheme a {
color: var(--gray-dark);
}
body.invertedTheme a:hover {
background-color: var(--main-link);
background-color: var(--bg-dark);
border-color: var(--bg-dark);
color: var(--fg-main);
}
body.invertedTheme code {
background-color: var(--bg-light);
color: var(--bg-main);
}
body.invertedTheme figcaption {
border-color: var(--bg-main);
}
body.invertedTheme figure {
background-color: var(--gray-light);
background-color: transparent;
border-color: var(--bg-main);
}
@@ -442,27 +455,33 @@ body.invertedTheme .code-cmd {
color: var(--bg-dark);
}
body.invertedTheme .code-cmnt {
color: var(--bg-dark);
}
body.invertedTheme .code-str {
color: var(--bg-dark);
}
body.invertedTheme .tab-link {
color: var(--bg-dark);
background-color: var(--fg-main);
border-color: var(--bg-main);
}
body.invertedTheme .tab:target .tab-link {
background: linear-gradient(var(--link-active), var(--fg-main));
}
body.invertedTheme .tab-link:hover {
background-color: var(--main-link);
background-color: var(--bg-dark);
border-color: var(--bg-dark);
}
body.invertedTheme .tab:target .tab-link {
background-color: var(--fg-main);
border-color: var(--bg-main);
border-color: var(--bg-main);
}
body.invertedTheme .tab:target .tab-link:hover {
background-color: var(--bg-dark);
}
body.invertedTheme .tab-panel {

8
public/demo/theme-toggle.js
View File

@@ -8,6 +8,11 @@ document.addEventListener("DOMContentLoaded", () => {
toggle.addEventListener("click", () => {
document.body.classList.toggle("invertedTheme");
localStorage.setItem(
"useInvertedTheme",
document.body.classList.contains("invertedTheme") ? "true" : "",
);
});
toggle.innerHTML = `
@@ -28,6 +33,9 @@ document.addEventListener("DOMContentLoaded", () => {
`.trim();
document.body.appendChild(toggle);
if (!!localStorage.getItem("useInvertedTheme"))
document.body.classList.add("invertedTheme");
});
// @license-end