Skip to content

Commit ab4e889

Browse files
Josh-CenaJosh-Cena
committed
Add keyboard visualizer
1 parent 4326e16 commit ab4e889

File tree

15 files changed

+592
-24
lines changed

15 files changed

+592
-24
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@
7070
"remark-gfm": "^4.0.0",
7171
"remark-math": "^6.0.0",
7272
"remark-mdx-frontmatter": "^4.0.0",
73+
"use-local-storage-state": "^19.1.0",
7374
"vite": "^4.5.0",
7475
"vite-plugin-svgr": "^4.1.0"
7576
}

‎project-words.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
backquote
12
casedness
23
cena
34
charis

‎src/Layout/Command/index.module.css

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
background: var(--color-background);
66
color: var(--color-text);
77
font-family: var(--font-code);
8-
border-radius: 6px;
8+
border-radius: var(--border-radius-small);
99
border: 2px solid var(--color-text);
1010
min-height: 3em;
1111
max-height: 24ch;
@@ -20,12 +20,9 @@
2020
}
2121

2222
.cleanButton {
23-
background: none;
24-
border: none;
2523
outline: none;
2624
font-family: var(--font-code);
2725
color: var(--color-text);
28-
cursor: pointer;
2926
display: flex;
3027
align-items: center;
3128
justify-content: center;

‎src/Layout/Navbar/ColorModeToggle/index.module.css

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
.button {
2-
background: none;
3-
border: none;
42
color: inherit;
5-
cursor: pointer;
63
font-family: inherit;
74
padding: 0;
85
height: 100%;

‎src/Layout/Navbar/index.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ const links: LinkConfig[] = [
1717
{
1818
name: "Tools",
1919
path: "/tools",
20-
children: [{ name: "Color converter", path: "/tools/color-converter" }],
20+
children: [
21+
{ name: "Color converter", path: "/tools/color-converter" },
22+
{ name: "Keyboard visualizer", path: "/tools/keyboard-visualizer" },
23+
],
2124
},
2225
{ name: "Blog", path: "/blog" },
2326
];

‎src/components/CodeBlock/index.module.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,5 +29,5 @@
2929
text-transform: uppercase;
3030
color: var(--color-text-subdued);
3131
padding: 0.2em 0.5em;
32-
border-radius: 0.2em;
32+
border-radius: var(--border-radius-small);
3333
}

‎src/components/CopyButton/index.module.css

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
.copyButton {
2-
background-color: #0000;
3-
border: none;
42
padding: 0;
53
margin: 0;
6-
cursor: pointer;
74
white-space: nowrap;
85
overflow: visible;
96
display: flex;

‎src/global.css

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
--margin-paragraph: 1rem;
2323
--font-main: "CharisSILW", Georgia, "Times New Roman", Times, serif;
2424
--font-code: Menlo, Consolas, Monaco, monospace;
25+
--border-radius-small: 0.25em;
2526

2627
font-family: var(--font-main);
2728
scroll-padding-top: var(--height-navbar);
@@ -114,7 +115,7 @@ code {
114115
font-size: smaller;
115116
background-color: var(--color-shadow);
116117
padding: 4px;
117-
border-radius: 4px;
118+
border-radius: var(--border-radius-small);
118119
color: var(--color-text);
119120
}
120121

@@ -155,6 +156,21 @@ summary {
155156
cursor: pointer;
156157
}
157158

159+
button {
160+
border: none;
161+
background-color: transparent;
162+
cursor: pointer;
163+
}
164+
165+
kbd {
166+
font-family: var(--font-code);
167+
font-size: smaller;
168+
padding: 0.25em 0.5em;
169+
border-radius: var(--border-radius-small);
170+
color: var(--color-text);
171+
border: 1px solid var(--color-text-subdued);
172+
}
173+
158174
.tooltip {
159175
--rt-opacity: 1;
160176
background-color: var(--color-background);

‎src/pages/about/index.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,7 @@ Timeline.Item = ({
5959
)}
6060
<br />
6161
<span style={{ fontWeight: "bold" }}>
62-
{position},{" "}
63-
<a href={href} target="_blank" rel="noreferrer">
64-
{organization}
65-
</a>
62+
{position}, <Link href={href}>{organization}</Link>
6663
</span>
6764
{children}
6865
</li>

‎src/pages/tools/color-converter/index.module.css

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@
1313
height: 3em;
1414
font-size: large;
1515
margin: 0.5em 0;
16-
border-radius: 2px;
16+
border-radius: var(--border-radius-small);
1717
border: var(--color-primary) solid 1px;
18-
background-color: #0000;
18+
background-color: transparent;
1919
color: var(--color-text);
2020
padding: 0 1em;
2121
}
@@ -58,12 +58,9 @@
5858
}
5959

6060
.colorInputs button {
61-
background-color: #0000;
62-
border: none;
6361
color: var(--color-primary);
6462
padding: 0.5em 1em;
6563
margin-bottom: 1em;
66-
cursor: pointer;
6764
}
6865

6966
.colorInputs button.selected {
@@ -127,7 +124,7 @@
127124
border-radius: 0;
128125
height: 100%;
129126
width: 8px;
130-
background: #0000;
127+
background: transparent;
131128
border: 2px solid var(--color-current);
132129
}
133130

@@ -139,6 +136,6 @@
139136
border-radius: 0;
140137
height: 100%;
141138
width: 8px;
142-
background: #0000;
139+
background: transparent;
143140
border: 2px solid var(--color-current);
144141
}

‎src/pages/tools/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ export default function Tools(): JSX.Element {
66
<li>
77
<Link href="/tools/color-converter">Color converter</Link>
88
</li>
9+
<li>
10+
<Link href="/tools/keyboard-visualizer">Keyboard visualizer</Link>
11+
</li>
912
</ul>
1013
);
1114
}

‎src/pages/tools/keyboard-visualizer/index.module.css

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
.mapManager {
2+
height: 2.5em;
3+
overflow: visible;
4+
margin-bottom: 1em;
5+
}
6+
7+
.mapButton {
8+
width: 13em;
9+
height: 2.5em;
10+
border: 2px solid var(--color-text-subdued);
11+
border-radius: var(--border-radius-small);
12+
}
13+
14+
.mapButton:focus + .mapListContainer,
15+
.mapListContainer:is(:hover, :focus-within) {
16+
display: block;
17+
}
18+
19+
.mapListContainer {
20+
display: none;
21+
border: 1px solid var(--color-text);
22+
background: var(--color-background);
23+
z-index: 10;
24+
position: absolute;
25+
max-height: 20em;
26+
width: 20em;
27+
overflow: scroll;
28+
}
29+
30+
.mapListContainer input {
31+
width: calc(100% - 2em);
32+
margin: 0.5em;
33+
}
34+
35+
.mapList {
36+
list-style: none;
37+
padding: 0;
38+
margin: 0;
39+
}
40+
41+
.mapItem {
42+
display: flex;
43+
}
44+
45+
.mapItem:is(:hover, :focus-within) {
46+
background-color: var(--color-shadow);
47+
}
48+
49+
.mapItemButton {
50+
width: calc(100% - 2em);
51+
height: 100%;
52+
text-align: left;
53+
display: flex;
54+
align-items: center;
55+
}
56+
57+
.mapItemDeleteButton {
58+
display: none;
59+
color: var(--color-red);
60+
border-radius: 50%;
61+
width: 1.5em;
62+
height: 1.5em;
63+
justify-content: center;
64+
align-items: center;
65+
}
66+
67+
.mapItemDeleteButton:hover {
68+
background-color: var(--color-shadow);
69+
}
70+
71+
.mapItem:is(:hover, :focus-within) .mapItemDeleteButton {
72+
display: flex;
73+
}
74+
75+
.keyboard {
76+
display: flex;
77+
flex-direction: column;
78+
gap: 0.5em;
79+
}
80+
81+
.keyRow {
82+
display: flex;
83+
flex-direction: row;
84+
gap: 0.5em;
85+
}
86+
87+
.key {
88+
border: 2px solid var(--color-text);
89+
border-radius: var(--border-radius-small);
90+
padding: 0.5em;
91+
display: flex;
92+
justify-content: center;
93+
align-items: center;
94+
}
95+
96+
.keyUnknown {
97+
background-color: var(--color-red);
98+
}
99+
100+
.keyDead {
101+
background-color: var(--color-blue);
102+
}
103+
104+
.squareKey {
105+
width: 2.4em;
106+
height: 2.4em;
107+
}
108+
109+
.longKey {
110+
width: auto;
111+
flex-grow: 1;
112+
}
113+
114+
.keyPressed {
115+
box-shadow: 0 0 4px 4px var(--color-shadow) inset;
116+
}

0 commit comments

Comments
 (0)