diff --git a/src/favicon.ico b/src/favicon.ico
new file mode 100644
index 0000000..05e16f5
Binary files /dev/null and b/src/favicon.ico differ
diff --git a/src/fonts/CaskaydiaCoveNFM-Regular.eot b/src/fonts/CaskaydiaCoveNFM-Regular.eot
new file mode 100644
index 0000000..a2dfa73
Binary files /dev/null and b/src/fonts/CaskaydiaCoveNFM-Regular.eot differ
diff --git a/src/fonts/CaskaydiaCoveNFM-Regular.svg b/src/fonts/CaskaydiaCoveNFM-Regular.svg
new file mode 100644
index 0000000..9de7977
--- /dev/null
+++ b/src/fonts/CaskaydiaCoveNFM-Regular.svg
@@ -0,0 +1,45391 @@
+
+
+
diff --git a/src/fonts/CaskaydiaCoveNFM-Regular.woff b/src/fonts/CaskaydiaCoveNFM-Regular.woff
new file mode 100644
index 0000000..3b1b065
Binary files /dev/null and b/src/fonts/CaskaydiaCoveNFM-Regular.woff differ
diff --git a/src/fonts/CaskaydiaCoveNFM-Regular.woff2 b/src/fonts/CaskaydiaCoveNFM-Regular.woff2
new file mode 100644
index 0000000..9358aff
Binary files /dev/null and b/src/fonts/CaskaydiaCoveNFM-Regular.woff2 differ
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..15f4c7c
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Stevan's Stream Commands
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..26e2bd6
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,79 @@
+const COMMANDS = [
+ {
+ name: "GitHub",
+ description: "Get the link to my github",
+ aliases: ["!gh"],
+ },
+];
+
+document.addEventListener("DOMContentLoaded", () => {
+ const commandsList = document.getElementById("commandsList");
+
+ if (commandsList === null) {
+ return;
+ }
+
+ for (const command of COMMANDS) {
+ const listItemElement = document.createElement("li");
+ listItemElement.innerHTML = /*html*/ `
+
+
+
${command.name}
+
+ ${command.aliases
+ .map(
+ (a) => /*html*/ `
+
+ ${a}
+
+
+ `,
+ )
+ .join("")}
+
+
+
+
${command.description}
+
+
+ `;
+
+ commandsList.appendChild(listItemElement);
+ }
+ commandsList.addEventListener("click", async (e) => {
+ const copyButton = e.target.closest(".copy-button");
+
+ if (copyButton === null) {
+ return;
+ }
+
+ const alias = copyButton.dataset.alias;
+
+ await navigator.clipboard.writeText(alias);
+
+ const copyButtonIcons = Array.from(copyButton.children);
+
+ for (const icon of copyButtonIcons) {
+ icon.classList.toggle("hidden");
+ }
+
+ const originalColor = copyButton.style.color;
+ copyButton.style.color = '#b39cd0';
+
+ setTimeout(() => {
+ for (const icon of copyButtonIcons) {
+ icon.classList.toggle("hidden");
+ }
+
+ copyButton.style.color = originalColor;
+ }, 500);
+ });
+});
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..75fc407
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,146 @@
+@font-face {
+ font-family: "CaskaydiaCove NFM";
+ src: url("fonts/CaskaydiaCoveNFM-Regular.eot");
+ src:
+ url("fonts/CaskaydiaCoveNFM-Regular.eot?#iefix") format("embedded-opentype"),
+ url("fonts/CaskaydiaCoveNFM-Regular.woff2") format("woff2"),
+ url("fonts/CaskaydiaCoveNFM-Regular.woff") format("woff"),
+ url("fonts/CaskaydiaCoveNFM-Regular.svg#CaskaydiaCoveNFM-Regular") format("svg");
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+}
+
+/* CSS Reset */
+
+* {
+ margin: 0;
+ padding: 0;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+button {
+ background: none;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ color: inherit;
+ font-family: inherit;
+}
+
+a {
+ text-decoration: none;
+ color: inherit;
+}
+
+ul {
+ list-style-type: none;
+}
+
+img {
+ max-width: 100%;
+ display: block;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+/* Utils */
+
+.hidden {
+ display: none;
+}
+
+/* Site Styles */
+
+:root {
+ --bg-color: #181818;
+ --text-color: #E4E4E4;
+
+ font-family: 'CaskaydiaCove NFM', monospace;
+ font-size: 16px;
+}
+
+html,
+body {
+ height: 100%
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ padding: 1rem;
+ background: var(--bg-color);
+ color: var(--text-color);
+}
+
+header {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+ align-items: center;
+ text-align: center;
+}
+
+main {
+ flex: 1;
+}
+
+.command-card {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 1rem;
+ border: 1px solid #b39cd0;
+ border-radius: 1rem;
+ background-color: #353232;
+}
+
+.command-card .left {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.command-card .left .aliases {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.command-alias {
+ display: flex;
+ gap: 0.5rem;
+}
+
+.command-alias code {
+ background-color: var(--bg-color);
+ padding: 0.25rem;
+ border-radius: 0.25rem;
+}
+
+.command-alias button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.command-card .right {
+ display: flex;
+ justify-content: flex-end;
+ flex: 1;
+}
+
+footer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}