Skip to content

Commit b1aed68

Browse files
ujjwalvivekujjwalvivek
committed
feat: add shortcuts overlay and improvise turnstile authentication and encryption
1 parent e318c1e commit b1aed68

File tree

11 files changed

+643
-25
lines changed

11 files changed

+643
-25
lines changed

‎public/index.html‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,46 @@
33

44
<head>
55
<meta charset="utf-8" />
6-
7-
<link rel="icon" href="https://cdn.ujjwalvivek.com/icons/favicon.ico" />
8-
6+
<meta
7+
http-equiv="Content-Security-Policy"
8+
content="
9+
default-src 'self'; script-src 'self' 'unsafe-inline' https://challenges.cloudflare.com https://*.cloudflare.com;
10+
script-src-elem 'self' 'unsafe-inline' https://challenges.cloudflare.com;
11+
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
12+
style-src-elem 'self' 'unsafe-inline' https://fonts.googleapis.com;
13+
object-src 'none'; img-src 'self' data: https://cdn.ujjwalvivek.com https://images.unsplash.com;
14+
font-src 'self' https://fonts.gstatic.com;
15+
connect-src 'self' https://challenges.cloudflare.com https://*.cloudflare.com;
16+
frame-src https://challenges.cloudflare.com;"
17+
/>
918
<meta name="viewport" content="width=device-width, initial-scale=1" />
1019
<meta name="theme-color" content="#1a1a1a" />
1120
<meta name="description" content="Welcome | Vivek's Journey" />
12-
1321
<meta property="og:title" content="Vivek's Journey" />
14-
<meta property="og:description"
15-
content="A creative, interactive portfolio documenting Vivek's journey in code, design, and ideas." />
22+
<meta
23+
property="og:description"
24+
content="A creative, interactive portfolio documenting Vivek's journey in code, design, and ideas."
25+
/>
1626
<meta property="og:image" content="https://cdn.ujjwalvivek.com/icons/logo512.png" />
1727
<meta property="og:url" content="https://ujjwalvivek.com/" />
1828
<meta property="og:type" content="website" />
19-
2029
<meta name="twitter:card" content="summary_large_image" />
2130
<meta name="twitter:title" content="Vivek's Journey" />
22-
<meta name="twitter:description"
23-
content="A creative, interactive portfolio documenting Vivek's journey in code, design, and ideas." />
31+
<meta
32+
name="twitter:description"
33+
content="A creative, interactive portfolio documenting Vivek's journey in code, design, and ideas."
34+
/>
2435
<meta name="twitter:image" content="https://cdn.ujjwalvivek.com/icons/logo512.png" />
25-
2636
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
27-
37+
38+
<link rel="icon" href="https://cdn.ujjwalvivek.com/icons/favicon.ico" />
2839
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
29-
30-
<link rel="preload" as="fetch" href="/posts/meta.json" type="application/json" crossorigin>
40+
<link rel="prefetch" as="fetch" href="/posts/meta.json" type="application/json" crossorigin>
3141
<link rel="prefetch" as="fetch" href="/posts/log_0003_going_open_source.md" type="text/markdown" crossorigin>
32-
<link rel="preload" href="https://cdn.ujjwalvivek.com/posts/media/webgpu.svg" as="image" type="image/svg+xml">
33-
42+
<link rel="prefetch" href="https://cdn.ujjwalvivek.com/posts/media/webgpu.svg" as="fetch" type="image/svg+xml" crossorigin>
3443
<link rel="apple-touch-icon" href="https://cdn.ujjwalvivek.com/icons/logo192.png" />
3544
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
45+
3646
<title>Welcome | Vivek's Journey</title>
3747
</head>
3848

‎public/posts/ideas.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
## 📅 v1.3 Target Changelog (WIP)
22

33
* [ ] **Add The Reckoning, UltraTech Entry to Projects and Blog.**
4-
* [ ] Shortcuts Overlay
54

65
#### Optional
76

@@ -31,5 +30,4 @@
3130
`Make it feel like sending a message through a shell (how to embed subject and body in mailto?)`
3231
* [x] Project sorting (opinionated) and search functionality - via commandpalette.
3332
* [x] Terminal command palette - Ctrl+K style navigation across your whole site (optional)
34-
35-
33+
* [x] Shortcuts Overlay with a helper toast

‎src/components/App/App.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,13 @@ import LandingPage from '../Pages/Landing/LandingPage';
1616
import CommandPalette from '../Command Palette/CommandPalette';
1717
import { useCommandPalette } from '../Command Palette/useCommandPalette';
1818
import GithubNavigator from '../Command Palette/Commands/Github Navigator/GithubNavigator';
19+
import Shortcuts from '../Command Palette/Commands/Shortcuts/Shortcuts';
20+
import CommandHint from '../Command Palette/Tip/CommandHint';
1921

2022
function AppContent() {
2123
const { backgroundConfig } = useBackground();
22-
const { isOpen, setIsOpen } = useCommandPalette();
24+
const [showShortcuts, setShowShortcuts] = useState(false);
25+
const { isOpen, setIsOpen } = useCommandPalette(setShowShortcuts);
2326
const [isGithubOpen, setIsGithubOpen] = useState(false);
2427

2528
return (
@@ -41,6 +44,7 @@ function AppContent() {
4144
</Routes>
4245
</main>
4346
<Footer />
47+
<CommandHint />
4448
<CommandPalette
4549
isOpen={isOpen}
4650
onClose={() => setIsOpen(false)}
@@ -54,6 +58,10 @@ function AppContent() {
5458
isOpen={isGithubOpen}
5559
onClose={() => setIsGithubOpen(false)}
5660
/>
61+
62+
{showShortcuts && <Shortcuts
63+
onClose={() => setShowShortcuts(false)}
64+
/>}
5765
</div>
5866
);
5967
}

‎src/components/Command Palette/CommandPalette.module.css‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1-
/* src/components/CommandPalette/CommandPalette.module.css */
2-
31
.overlay {
42
position: fixed;
53
top: 0;
64
left: 0;
75
right: 0;
86
bottom: 0;
97
background: rgba(var(--background-color-rgb), 0.9);
10-
/* backdrop-filter: blur(4px); */
118
z-index: 9999;
129
display: flex;
1310
align-items: flex-start;

‎src/components/Command Palette/Commands/Github Navigator/GithubNavigator.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -277,7 +277,7 @@
277277
}
278278

279279
/* Mobile Responsive */
280-
@media (max-width: 768px) {
280+
@media (max-width: 1200px) {
281281
.header {
282282
padding: 8px 12px;
283283
flex-wrap: wrap;

‎src/components/Command Palette/Commands/Shortcuts/Shortcuts.js‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import styles from './Shortcuts.module.css';
2+
import { useEffect, useState } from 'react';
3+
import { FiCommand, FiZap, FiNavigation, FiHome, FiUser, FiFileText } from 'react-icons/fi';
4+
import { FaRegFolderOpen } from "react-icons/fa6";
5+
import { MdKeyboard } from 'react-icons/md';
6+
7+
const shortcuts = [
8+
{
9+
keys: ['Ctrl', 'K', 'P'],
10+
desc: 'Open Command Palette',
11+
icon: <FiCommand />,
12+
category: 'core'
13+
},
14+
{
15+
keys: ['Ctrl', 'K', 'Z'],
16+
desc: 'Toggle Fullscreen (Zen Mode)',
17+
icon: <FiZap />,
18+
category: 'view'
19+
},
20+
{
21+
keys: ['Ctrl', 'K', 'T'],
22+
desc: 'Toggle Theme',
23+
icon: <MdKeyboard />,
24+
category: 'view'
25+
},
26+
{
27+
keys: ['Ctrl', 'K', '1'],
28+
desc: 'Go Home',
29+
icon: <FiHome />,
30+
category: 'nav'
31+
},
32+
{
33+
keys: ['Ctrl', 'K', '2'],
34+
desc: 'Go About',
35+
icon: <FiUser />,
36+
category: 'nav'
37+
},
38+
{
39+
keys: ['Ctrl', 'K', '3'],
40+
desc: 'Go Blog',
41+
icon: <FiFileText />,
42+
category: 'nav'
43+
},
44+
{
45+
keys: ['Ctrl', 'K', '4'],
46+
desc: 'Go Projects',
47+
icon: <FaRegFolderOpen />,
48+
category: 'nav'
49+
},
50+
{
51+
keys: ['Alt', '1/2/3/4'],
52+
desc: 'Quick Nav',
53+
icon: <FiNavigation />,
54+
category: 'nav'
55+
},
56+
];
57+
58+
const Shortcuts = ({ onClose }) => {
59+
const [mounted, setMounted] = useState(false);
60+
61+
useEffect(() => {
62+
setMounted(true);
63+
const handleKeyDown = (e) => {
64+
if (e.key.toLowerCase() === 'escape') {
65+
onClose();
66+
}
67+
};
68+
69+
window.addEventListener('keydown', handleKeyDown);
70+
return () => window.removeEventListener('keydown', handleKeyDown);
71+
}, [onClose]);
72+
73+
const groupedShortcuts = shortcuts.reduce((acc, shortcut) => {
74+
if (!acc[shortcut.category]) acc[shortcut.category] = [];
75+
acc[shortcut.category].push(shortcut);
76+
return acc;
77+
}, {});
78+
79+
const categoryTitles = {
80+
core: 'Core',
81+
view: 'View',
82+
nav: 'Navigation'
83+
};
84+
85+
return (
86+
<div className={`${styles.overlay} ${mounted ? styles.mounted : ''}`}>
87+
<div className={styles.grid}>
88+
<div className={styles.panel} onClick={e => e.stopPropagation()}>
89+
<div className={styles.header}>
90+
<div className={styles.titleGroup}>
91+
<MdKeyboard className={styles.headerIcon} />
92+
<h2 className={styles.title}>Keyboard Shortcuts</h2>
93+
</div>
94+
<div className={styles.closeHint}>ESC</div>
95+
</div>
96+
97+
<div className={styles.content}>
98+
{Object.entries(groupedShortcuts).map(([category, categoryShortcuts]) => (
99+
<div key={category} className={styles.category}>
100+
<h3 className={styles.categoryTitle}>
101+
{categoryTitles[category]}
102+
</h3>
103+
<div className={styles.shortcutList}>
104+
{categoryShortcuts.map((shortcut, index) => (
105+
<div key={index} className={styles.shortcut}>
106+
<div className={styles.shortcutIcon}>
107+
{shortcut.icon}
108+
</div>
109+
<div className={styles.shortcutContent}>
110+
<div className={styles.keys}>
111+
{shortcut.keys.map((key, keyIndex) => (
112+
<kbd key={keyIndex} className={styles.key}>
113+
{key}
114+
</kbd>
115+
))}
116+
</div>
117+
<span className={styles.desc}>{shortcut.desc}</span>
118+
</div>
119+
</div>
120+
))}
121+
</div>
122+
</div>
123+
))}
124+
</div>
125+
</div>
126+
</div>
127+
</div>
128+
);
129+
};
130+
131+
export default Shortcuts;

0 commit comments

Comments
 (0)