Skip to content

Commit d7832c6

Browse files
fezcodefezcode
committed
feat: list all commands
1 parent eea7c31 commit d7832c6

File tree

3 files changed

+234
-1
lines changed

3 files changed

+234
-1
lines changed

‎src/components/AnimatedRoutes.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,8 @@ import SettingsPage from '../pages/SettingsPage';
7373
import UsefulLinksPage from '../pages/UsefulLinksPage';
7474
import NotebooksPage from '../pages/notebooks/NotebooksPage';
7575
import NotebookViewerPage from '../pages/notebooks/NotebookViewerPage';
76-
import NewsPage from '../pages/NewsPage'; // Import NewsPage
76+
import NewsPage from '../pages/NewsPage';
77+
import CommandsPage from "../pages/CommandsPage";
7778

7879
const pageVariants = {
7980
initial: {
@@ -411,6 +412,20 @@ function AnimatedRoutes() {
411412
</motion.div>
412413
}
413414
/>
415+
<Route
416+
path="/commands"
417+
element={
418+
<motion.div
419+
initial="initial"
420+
animate="in"
421+
exit="out"
422+
variants={pageVariants}
423+
transition={pageTransition}
424+
>
425+
<CommandsPage />
426+
</motion.div>
427+
}
428+
/>
414429
{/* Hardcoded redirects for fc::apps:: paths */}
415430
<Route path="/apps::ip" element={<Navigate to="/apps/ip" replace />} />
416431
<Route

‎src/components/Sidebar.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,10 @@ const Sidebar = ({ isOpen, toggleSidebar, toggleModal, setIsPaletteOpen }) => {
210210
<SquaresFourIcon size={24} />
211211
<span>All Apps</span>
212212
</NavLink>
213+
<NavLink to="/commands" className={getLinkClass}>
214+
<MagnifyingGlassIcon size={24} />
215+
<span>All Commands</span>
216+
</NavLink>
213217
</nav>
214218
)}
215219
</div>

‎src/pages/CommandsPage.js‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
import React, { useState, useEffect } from 'react';
2+
import { Link } from 'react-router-dom';
3+
import {
4+
ArrowLeftIcon
5+
} from '@phosphor-icons/react';
6+
7+
import useSeo from '../hooks/useSeo';
8+
9+
import colors from "../config/colors"; // Import CustomDropdown
10+
11+
function CommandsPage() {
12+
useSeo({
13+
title: 'All Commands | Fezcodex',
14+
description: 'All the available commands that can be used in Fezcodex.',
15+
keywords: [
16+
'Fezcodex',
17+
'apps',
18+
'applications',
19+
'cmd',
20+
'dev',
21+
'commands',
22+
],
23+
ogTitle: 'All Commands | Fezcodex',
24+
ogDescription: 'All the available commands that can be used in Fezcodex.',
25+
ogImage: 'https://fezcode.github.io/logo512.png',
26+
twitterCard: 'summary_large_image',
27+
twitterTitle: 'All Commands | Fezcodex',
28+
twitterDescription: 'All the available commands that can be used in Fezcodex.',
29+
twitterImage: 'https://fezcode.github.io/logo512.png',
30+
});
31+
32+
const cardStyle = {
33+
backgroundColor: colors['app-alpha-10'],
34+
borderColor: colors['app-alpha-50'],
35+
color: colors.app,
36+
};
37+
return (
38+
<div className="py-16 sm:py-24">
39+
<div className="mx-auto max-w-7xl px-6 lg:px-8">
40+
<Link
41+
to="/"
42+
className="text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4"
43+
>
44+
<ArrowLeftIcon size={24} /> Back to Home
45+
</Link>
46+
<div className="flex justify-center items-center mt-16">
47+
<div
48+
className="group bg-transparent border rounded-lg shadow-2xl p-6 flex flex-col justify-between relative transform overflow-hidden h-full w-full max-w-4xl"
49+
style={cardStyle}
50+
>
51+
<div
52+
className="absolute top-0 left-0 w-full h-full opacity-10"
53+
style={{
54+
backgroundImage: 'radial-gradient(circle, white 1px, transparent 1px)',
55+
backgroundSize: '10px 10px',
56+
}}
57+
></div>
58+
<div className="relative z-10 p-1">
59+
<h1 className="text-3xl font-arvo font-normal mb-4 text-app"> Command Palette </h1>
60+
<hr className="border-gray-700 mb-4" />
61+
62+
<div className="mb-6 ml-4 mr-4">
63+
<p className="text-gray-200 mb-4">
64+
Press <kbd className="kbd kbd-sm">Alt</kbd>+<kbd className="kbd kbd-sm">K</kbd> to open Commands Palette.
65+
You can type <code> COMMAND </code> to see all available commands.
66+
</p>
67+
</div>
68+
69+
<h1 className="text-3xl font-arvo font-normal mb-4 text-app"> Available Commands </h1>
70+
<hr className="border-gray-700 mb-4" />
71+
<div className="bg-red-900 bg-opacity-30 border border-red-700 text-red-300 px-4 py-3 rounded relative mb-6" role="alert">
72+
<strong className="font-bold">View Source on GitHub:</strong>
73+
<span className="block sm:inline ml-2"> See source code of Fezcodex on GitHub </span>
74+
</div>
75+
76+
<div className="bg-orange-900 bg-opacity-30 border border-orange-700 text-orange-300 px-4 py-3 rounded relative mb-6" role="alert">
77+
<strong className="font-bold">Navigate to a Random Post:</strong>
78+
<span className="block sm:inline ml-2"> Go to random blogpost. </span>
79+
</div>
80+
81+
<div className="bg-amber-900 bg-opacity-30 border border-amber-700 text-amber-300 px-4 py-3 rounded relative mb-6" role="alert">
82+
<strong className="font-bold">Toggle Animations:</strong>
83+
<span className="block sm:inline ml-2"> Enable/Disable all animations in Fezcodex. </span>
84+
</div>
85+
86+
<div className="bg-yellow-900 bg-opacity-30 border border-yellow-700 text-yellow-300 px-4 py-3 rounded relative mb-6" role="alert">
87+
<strong className="font-bold">Reset Sidebar State:</strong>
88+
<span className="block sm:inline ml-2"> Remove all sidebar states. </span>
89+
</div>
90+
91+
<div className="bg-lime-900 bg-opacity-30 border border-lime-700 text-lime-300 px-4 py-3 rounded relative mb-6" role="alert">
92+
<strong className="font-bold">Send Email:</strong>
93+
<span className="block sm:inline ml-2"> Send me email. </span>
94+
</div>
95+
96+
<div className="bg-green-900 bg-opacity-30 border border-green-700 text-green-300 px-4 py-3 rounded relative mb-6" role="alert">
97+
<strong className="font-bold">Open GitHub Profile:</strong>
98+
<span className="block sm:inline ml-2"> Opens Github profile of Fezcode. </span>
99+
</div>
100+
101+
<div className="bg-emerald-900 bg-opacity-30 border border-emerald-700 text-emerald-300 px-4 py-3 rounded relative mb-6" role="alert">
102+
<strong className="font-bold">Open Twitter Profile:</strong>
103+
<span className="block sm:inline ml-2"> Opens Twitter profile of Fezcode. </span>
104+
</div>
105+
106+
<div className="bg-teal-900 bg-opacity-30 border border-teal-700 text-teal-300 px-4 py-3 rounded relative mb-6" role="alert">
107+
<strong className="font-bold">Open LinkedIn Profile:</strong>
108+
<span className="block sm:inline ml-2"> Opens LinkedIn profile of Fezcode. </span>
109+
</div>
110+
111+
<div className="bg-cyan-900 bg-opacity-30 border border-cyan-700 text-cyan-300 px-4 py-3 rounded relative mb-6" role="alert">
112+
<strong className="font-bold">Scroll to Top:</strong>
113+
<span className="block sm:inline ml-2"> Go to the top of the page. </span>
114+
</div>
115+
116+
<div className="bg-sky-900 bg-opacity-30 border border-sky-700 text-sky-300 px-4 py-3 rounded relative mb-6" role="alert">
117+
<strong className="font-bold">Scroll to Bottom:</strong>
118+
<span className="block sm:inline ml-2"> Go to the bottom of the page. </span>
119+
</div>
120+
121+
<div className="bg-blue-900 bg-opacity-30 border border-blue-700 text-blue-300 px-4 py-3 rounded relative mb-6" role="alert">
122+
<strong className="font-bold">Show Site Stats:</strong>
123+
<span className="block sm:inline ml-2"> Opens a modal to show number of Posts, Projects, Logs and Apps. </span>
124+
</div>
125+
126+
<div className="bg-indigo-900 bg-opacity-30 border border-indigo-700 text-indigo-300 px-4 py-3 rounded relative mb-6" role="alert">
127+
<strong className="font-bold">Show Version:</strong>
128+
<span className="block sm:inline ml-2"> Opens a modal to show version number of Fezcodex. </span>
129+
</div>
130+
131+
<div className="bg-violet-900 bg-opacity-30 border border-violet-700 text-violet-300 px-4 py-3 rounded relative mb-6" role="alert">
132+
<strong className="font-bold">Go to Latest Post:</strong>
133+
<span className="block sm:inline ml-2"> Opens the latest blogpost. </span>
134+
</div>
135+
136+
<div className="bg-purple-900 bg-opacity-30 border border-purple-700 text-purple-300 px-4 py-3 rounded relative mb-6" role="alert">
137+
<strong className="font-bold">Go to Latest Log:</strong>
138+
<span className="block sm:inline ml-2"> Opens the latest log entry. </span>
139+
</div>
140+
141+
<div className="bg-fuchsia-900 bg-opacity-30 border border-fuchsia-700 text-fuchsia-300 px-4 py-3 rounded relative mb-6" role="alert">
142+
<strong className="font-bold">Show Current Time:</strong>
143+
<span className="block sm:inline ml-2"> Opens a modal to show local and UTC analog clock. </span>
144+
</div>
145+
146+
<div className="bg-pink-900 bg-opacity-30 border border-pink-700 text-pink-300 px-4 py-3 rounded relative mb-6" role="alert">
147+
<strong className="font-bold">Toggle Digital Rain:</strong>
148+
<span className="block sm:inline ml-2"> Opens matrix-like text rain, you need to toggle again to disable it, or refresh the page. </span>
149+
</div>
150+
151+
<div className="bg-rose-900 bg-opacity-30 border border-rose-700 text-rose-300 px-4 py-3 rounded relative mb-6" role="alert">
152+
<strong className="font-bold">Generate Art:</strong>
153+
<span className="block sm:inline ml-2"> Opens a modal to display a simple generative box art. </span>
154+
</div>
155+
156+
<div className="bg-slate-900 bg-opacity-30 border border-slate-700 text-slate-300 px-4 py-3 rounded relative mb-6" role="alert">
157+
<strong className="font-bold">Leet Speak Transformer:</strong>
158+
<span className="block sm:inline ml-2"> Opens a modal convert given text to Leet speak. </span>
159+
</div>
160+
161+
<div className="bg-gray-900 bg-opacity-30 border border-gray-700 text-gray-300 px-4 py-3 rounded relative mb-6" role="alert">
162+
<strong className="font-bold">Show Quick Stopwatch:</strong>
163+
<span className="block sm:inline ml-2"> Opens a modal for stopwatch, similar to stopwatch app. </span>
164+
</div>
165+
166+
<div className="bg-zinc-900 bg-opacity-30 border border-zinc-700 text-zinc-300 px-4 py-3 rounded relative mb-6" role="alert">
167+
<strong className="font-bold">Show User/Browser Information:</strong>
168+
<span className="block sm:inline ml-2"> Opens a modal to show User Agent, Platform, App Version, Language and Online information. </span>
169+
</div>
170+
171+
<div className="bg-neutral-900 bg-opacity-30 border border-neutral-700 text-neutral-300 px-4 py-3 rounded relative mb-6" role="alert">
172+
<strong className="font-bold">Copy Current URL:</strong>
173+
<span className="block sm:inline ml-2"> Copies the current URL to your clipboard. </span>
174+
</div>
175+
176+
<div className="bg-stone-900 bg-opacity-30 border border-stone-700 text-stone-300 px-4 py-3 rounded relative mb-6" role="alert">
177+
<strong className="font-bold">Clear Local Storage:</strong>
178+
<span className="block sm:inline ml-2"> Removes every entry about Fezcodes in your browser's local storage. </span>
179+
</div>
180+
181+
<div className="bg-red-900 bg-opacity-30 border border-red-700 text-red-300 px-4 py-3 rounded relative mb-6" role="alert">
182+
<strong className="font-bold">Reload Page:</strong>
183+
<span className="block sm:inline ml-2"> Reloads the current page. </span>
184+
</div>
185+
186+
<div className="bg-orange-900 bg-opacity-30 border border-orange-700 text-orange-300 px-4 py-3 rounded relative mb-6" role="alert">
187+
<strong className="font-bold">Go to Random App:</strong>
188+
<span className="block sm:inline ml-2"> Opens an app randomly. </span>
189+
</div>
190+
191+
<div className="bg-amber-900 bg-opacity-30 border border-amber-700 text-amber-300 px-4 py-3 rounded relative mb-6" role="alert">
192+
<strong className="font-bold">Toggle Full Screen:</strong>
193+
<span className="block sm:inline ml-2"> Goes to fullscreen mode. </span>
194+
</div>
195+
196+
<div className="bg-yellow-900 bg-opacity-30 border border-yellow-700 text-yellow-300 px-4 py-3 rounded relative mb-6" role="alert">
197+
<strong className="font-bold">Create Issue for This Page:</strong>
198+
<span className="block sm:inline ml-2"> Opens Github Issues page to create an issue for the current URL. </span>
199+
</div>
200+
201+
<div className="bg-lime-900 bg-opacity-30 border border-lime-700 text-lime-300 px-4 py-3 rounded relative mb-6" role="alert">
202+
<strong className="font-bold">Her Daim:</strong>
203+
<span className="block sm:inline ml-2"> Show image of `Devir Abi`. </span>
204+
</div>
205+
206+
</div>
207+
</div>
208+
</div>
209+
</div>
210+
</div>
211+
);
212+
}
213+
214+
export default CommandsPage;

0 commit comments

Comments
 (0)