Skip to content

Commit c3ae633

Browse files
ciemborciembor
committed
Add SEO about page
1 parent 3f49cd4 commit c3ae633

60 files changed

Lines changed: 1094 additions & 407 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,14 @@ Early history is grouped by day to keep the file readable while still covering t
66

77
## 2026
88

9+
### 2026-05-11
10+
11+
- Added a dedicated SEO-focused About page for 4bit with project history, supported terminal links, source references, and an explanation of the color-generation model.
12+
- Reworked the page header navigation so the About page links back to the editor while the editor keeps the download workflow.
13+
- Shared the page shell, header, footer, button, theme, asset, and store code between the editor and About page.
14+
- Reorganized presentation code into `about-page`, `editor-page`, and `shared` areas to reduce coupling between page-specific UI and shared layout.
15+
- Decoupled browser URL synchronization from Pinia by passing the scheme store into the infrastructure adapter.
16+
917
### 2026-05-10
1018

1119
- Added compact `s` query-string serialization for complete scheme settings while keeping backward compatibility with legacy shared URLs.

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ Coverage
111111

112112
The coverage badge above is generated from the line coverage in `coverage/coverage-summary.json` by `npm run coverage:badge`.
113113

114-
Coverage is measured for `src/**/*.js`, excluding `src/main.js` and the vendored jQuery color picker wrapper in `src/infrastructure/vendor`.
114+
Coverage is measured for `src/**/*.js`, excluding page entrypoints and the vendored jQuery color picker wrapper in `src/infrastructure/vendor`.
115115

116116
Author
117117
---------

‎about/index.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<meta name="author" content="Maciej Ciemborowicz">
7+
<title>About 4bit Terminal Color Scheme Designer | Terminal Color Themes</title>
8+
<meta name="description" content="Learn about 4bit, a free terminal color scheme designer for creating consistent terminal colors, terminal schemes, terminal themes, and terminal color themes for popular terminal emulators.">
9+
<meta name="keywords" content="terminal colors, terminal schemes, terminal themes, terminal color themes, terminal color scheme designer, terminal color palette, iTerm2 themes, Alacritty themes, mintty themes, Xresources colors">
10+
<meta name="robots" content="index,follow">
11+
<link rel="canonical" href="https://ciembor.github.io/4bit/about/">
12+
<link rel="icon" type="image/svg+xml" href="../images/favicon.svg">
13+
14+
<meta property="og:type" content="article">
15+
<meta property="og:site_name" content="4bit">
16+
<meta property="og:title" content="About 4bit Terminal Color Scheme Designer">
17+
<meta property="og:description" content="4bit helps developers create consistent terminal color schemes and export them to configuration files for popular terminal emulators.">
18+
<meta property="og:url" content="https://ciembor.github.io/4bit/about/">
19+
<meta property="og:image" content="https://ciembor.github.io/4bit/images/4bit-terminal-color-scheme-designer.jpg">
20+
<meta property="og:image:width" content="1280">
21+
<meta property="og:image:height" content="712">
22+
<meta property="og:image:alt" content="4bit Terminal Color Scheme Designer screenshot">
23+
24+
<meta name="twitter:card" content="summary_large_image">
25+
<meta name="twitter:title" content="About 4bit Terminal Color Scheme Designer">
26+
<meta name="twitter:description" content="A free terminal color scheme designer for creating and exporting terminal colors, terminal schemes, and terminal color themes.">
27+
<meta name="twitter:image" content="https://ciembor.github.io/4bit/images/4bit-terminal-color-scheme-designer.jpg">
28+
<meta name="twitter:site" content="@ciembor">
29+
<meta name="twitter:creator" content="@ciembor">
30+
31+
<script type="application/ld+json">
32+
{
33+
"@context": "https://schema.org",
34+
"@type": "AboutPage",
35+
"name": "About 4bit Terminal Color Scheme Designer",
36+
"url": "https://ciembor.github.io/4bit/about/",
37+
"description": "About 4bit, a free terminal color scheme designer for creating consistent terminal colors, terminal schemes, terminal themes, and terminal color themes.",
38+
"isPartOf": {
39+
"@type": "WebSite",
40+
"name": "4bit",
41+
"url": "https://ciembor.github.io/4bit/"
42+
},
43+
"mainEntity": {
44+
"@type": "SoftwareApplication",
45+
"name": "4bit Terminal Color Scheme Designer",
46+
"applicationCategory": "DeveloperApplication",
47+
"operatingSystem": "Any",
48+
"url": "https://ciembor.github.io/4bit/",
49+
"image": "https://ciembor.github.io/4bit/images/4bit-terminal-color-scheme-designer.jpg",
50+
"description": "A free web app for creating consistent terminal color schemes and exporting terminal themes for popular terminal emulators.",
51+
"author": {
52+
"@type": "Person",
53+
"name": "Maciej Ciemborowicz",
54+
"url": "https://maciej-ciemborowicz.eu/"
55+
},
56+
"offers": {
57+
"@type": "Offer",
58+
"price": "0",
59+
"priceCurrency": "USD"
60+
}
61+
},
62+
"breadcrumb": {
63+
"@type": "BreadcrumbList",
64+
"itemListElement": [
65+
{
66+
"@type": "ListItem",
67+
"position": 1,
68+
"name": "4bit Terminal Color Scheme Designer",
69+
"item": "https://ciembor.github.io/4bit/"
70+
},
71+
{
72+
"@type": "ListItem",
73+
"position": 2,
74+
"name": "About",
75+
"item": "https://ciembor.github.io/4bit/about/"
76+
}
77+
]
78+
}
79+
}
80+
</script>
81+
</head>
82+
<body id="about-page">
83+
<script type="module" src="../src/presentation/about-page/main.js"></script>
84+
</body>
85+
</html>

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,6 @@
5858
</script>
5959
</head>
6060
<body id="app" onmousedown="document.getElementById('outline-fix').innerHTML='a{outline:none}';" onkeydown="document.getElementById('outline-fix').innerHTML=''">
61-
<script type="module" src="/src/main.js"></script>
61+
<script type="module" src="/src/presentation/editor-page/main.js"></script>
6262
</body>
6363
</html>

‎public/sitemap.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
https://ciembor.github.io/4bit/
2+
https://ciembor.github.io/4bit/about/

‎public/sitemap.xml‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
33
<url>
44
<loc>https://ciembor.github.io/4bit/</loc>
5-
<lastmod>2026-04-22</lastmod>
5+
<lastmod>2026-05-11</lastmod>
6+
</url>
7+
<url>
8+
<loc>https://ciembor.github.io/4bit/about/</loc>
9+
<lastmod>2026-05-11</lastmod>
610
</url>
711
</urlset>

‎src/infrastructure/browser/scheme-storage-key.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const SCHEME_STORAGE_KEY = '4bit:scheme-search';

‎src/infrastructure/browser/scheme-url-sync.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useSchemeStore } from '../../presentation/stores/scheme';
21
import { calculateSchemeColors } from '../../domain/scheme/color-scheme-calculator';
32
import {
43
buildSchemeQueryParams,
@@ -8,7 +7,9 @@ import {
87
serializeSearchParams,
98
} from '../url/scheme-query';
109
import { buildMinttyDragSchemeHash } from '../url/mintty-drag-scheme';
11-
export const SCHEME_STORAGE_KEY = '4bit:scheme-search';
10+
import { SCHEME_STORAGE_KEY } from './scheme-storage-key';
11+
12+
export { SCHEME_STORAGE_KEY };
1213

1314
function browserWindow() {
1415
return typeof window !== 'undefined' ? window : null;
@@ -111,7 +112,7 @@ function buildSchemeHash(scheme) {
111112
return buildMinttyDragSchemeHash(calculateSchemeColors(scheme));
112113
}
113114

114-
export function hydrateSchemeStoreFromLocation(pinia, options = browserLocation().search) {
115+
export function hydrateSchemeStoreFromLocation(schemeStore, options = browserLocation().search) {
115116
const settings = typeof options === 'string'
116117
? { search: options }
117118
: options;
@@ -122,7 +123,6 @@ export function hydrateSchemeStoreFromLocation(pinia, options = browserLocation(
122123
history = browserHistory(),
123124
} = settings;
124125
const resolvedSearch = resolveInitialSchemeSearch(search, storage);
125-
const schemeStore = useSchemeStore(pinia);
126126
schemeStore.replaceScheme(readSchemeFromSearch(resolvedSearch));
127127

128128
replaceLocationSearch(resolvedSearch, location, history);
@@ -132,11 +132,15 @@ export function hydrateSchemeStoreFromLocation(pinia, options = browserLocation(
132132

133133
export class SchemeUrlSync {
134134
constructor({
135-
schemeStore = useSchemeStore(),
135+
schemeStore,
136136
location = browserLocation(),
137137
history = browserHistory(),
138138
storage = browserStorage(),
139139
} = {}) {
140+
if (!schemeStore) {
141+
throw new Error('SchemeUrlSync requires a schemeStore');
142+
}
143+
140144
this.schemeStore = schemeStore;
141145
this.location = location;
142146
this.history = history;

‎src/main.js‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

0 commit comments

Comments
 (0)