add some helpful messages to curl command

update: website look
add: desktop command
2024-05-08 20:56:00 +02:00 · 2024-05-08 20:51:47 +02:00 · 2024-05-08 20:44:13 +02:00 · 2024-05-08 20:36:58 +02:00
8 changed files with 108 additions and 47 deletions
--- a/assets/desktop_screenshots/1.png
+++ b/assets/desktop_screenshots/1.png
--- a/assets/desktop_screenshots/2.png
+++ b/assets/desktop_screenshots/2.png
--- a/assets/desktop_screenshots/3.png
+++ b/assets/desktop_screenshots/3.png
--- a/css/style.css
+++ b/css/style.css
@ -22,11 +22,18 @@ body {
 }

 #container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
    text-align: center;
    height: 100%;
    width: 100%;
+}

-    align-content: center;
+#container > * {
+    width: 50%;
 }

 [data-tooltip] {
@ -67,16 +74,34 @@ input {
 }

 #result {
-    white-space: preserve;
-
    background-color: transparent;
+    white-space: preserve;
    color: var(--color);

-    padding: 2em;
-    margin: 2em;
+    max-height: 100%;
+    overflow-y: auto;
 }

-#switch_theme {
+#switch_theme, #help {
    text-decoration: underline;
    cursor: pointer;
 }
+
+.image-grid {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+}
+
+.image-grid > * {
+    max-width: 50%;
+    max-height: 50%;
+}
+
+@media screen and (max-width: 798px) {
+    #container {
+        flex-direction: column !important;
+    }
+}
--- a/index.html
+++ b/index.html
@ -14,14 +14,15 @@
 </head>
 <body>
    <div id="container">
+        <div>
            <h1>welcome to my website</h1>
            <h2 id="switch_theme">switch theme</h2>
            
            <p>press <kbd>Enter</kbd> to run command</p>
-        <p>use 'help' to list all commands</p>
-
+            <p>use <span id="help">'help'</span> to list all commands</p>
            <span>[guest@website ~]$ </span>
-        <input type="text" id="command" value="help">
+            <input type="text" id="command">
+        </div>
        <div id="result">

        </div>
--- a/js/commands.js
+++ b/js/commands.js
@ -96,7 +96,6 @@ const COMMANDS = [
            '',
            'bitwarden (self-hosted)',
            'libreoffice'
-        
        ].join('\n')
    },
    {
@ -130,7 +129,7 @@ const COMMANDS = [
        name: 'curl',
        description: 'open website in new tab',
        usage: '<website>',
-        usage_examples: ['curl google.com'],
+        usage_examples: ['curl https://google.com'],
        arguments: [
            {
                name: 'url',
@ -139,7 +138,7 @@ const COMMANDS = [
                multiword: true,
                check: (url) => URL_REGEX.test(url)
                    ? null
-                    : "invalid URL"
+                    : "invalid URL or missing protocol"
            }
        ],
        output: (url) => {
@ -151,6 +150,26 @@ const COMMANDS = [

            return ''
        }
+    },
+    {
+        name: 'desktop',
+        description: 'Show some desktop screenshots',
+        usage: '',
+        usage_examples: [],
+        arguments: [],
+        output: () => {
+            let result = [];
+
+            for (let i = 0; i < 3;) {
+                result.push(`<img src="assets/desktop_screenshots/${++i}.png" alt="Desktop screenshot"/>`)
+            }
+
+            return `
+                <div class="image-grid">
+                    ${result.join('\n')}
+                </div>
+            `
+        }
    }
 ]

--- a/js/data.js
+++ b/js/data.js
@ -1,6 +1,7 @@
 const URL_REGEX = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g;
+
 const LINKS = {
-    'gitea': 'https://git.sador.me',
+    'gitea': 'https://git.sador.me/sadorowo',
    'instagram': 'https://instagram.com/sadorowo',
    'immich': 'https://photos.sador.me/',
    'email': 'mailto:contact@sador.me'
@ -26,11 +27,17 @@ const MUSIC_METADATA = {
    'black metal': [
        'Behemoth',
        'Venom',
+        'Mgła',
+        'Watain',
+        'Bathory',
        'Carpathian Forest',
        'Darkthrone'
    ],
    'nu metal': [
        'Slipknot',
        'Evanescence'
+    ],
+    'other genres': [
+        'Rammstein'
    ]
 }
--- a/js/script.js
+++ b/js/script.js
@ -4,6 +4,36 @@ function updateAge() {
    age.textContent = difference.toFixed(4);
 }

+// process command function
+function processCommand() {
+    const [commandName, ...args] = command.value.split(' ') || [command.value]
+    const suppliedCommand = COMMANDS.find(c => c.name === commandName)
+
+    if (!suppliedCommand) {
+        result.textContent = 'invalid command';
+        return
+    }
+
+    const { arguments, output } = suppliedCommand;
+    for (const i in arguments) {
+        const argument = arguments[i]
+
+        if (argument.required && !args[i]) {
+            result.textContent = `argument ${argument.name} is missing`;
+            return
+        }
+
+        const errorMessage = argument.check(argument.multiword ? args.join(' ') : args[i])
+
+        if (typeof errorMessage === 'string') {
+            result.textContent = `error while executing ${suppliedCommand.name}: ${errorMessage}`;
+            return
+        }
+    }
+
+    result.innerHTML = output(...args).replaceAll(TAB, '')
+}
+
 // wrapper for setInterval
 const runEvery = (task, ms) => {
    task()
@ -37,34 +67,7 @@ command?.addEventListener('focusout', () => {
 })

 command?.addEventListener('keydown', e => {
-    if (e.key === 'Enter') {
-        const [commandName, ...args] = e.target.value.split(' ') || [e.target.value]
-        const command = COMMANDS.find(c => c.name === commandName)
-
-        if (!command) {
-            result.textContent = 'invalid command';
-            return
-        }
-
-        const { arguments, output } = command;
-        for (const i in arguments) {
-            const argument = arguments[i]
-
-            if (argument.required && !args[i]) {
-                result.textContent = `argument ${argument.name} is missing`;
-                return
-            }
-
-            const errorMessage = argument.check(argument.multiword ? args.join(' ') : args[i])
-
-            if (typeof errorMessage === 'string') {
-                result.textContent = `error while executing ${command.name}: ${errorMessage}`;
-                return
-            }
-        }
-
-        result.innerHTML = output(...args).replaceAll(TAB, '')
-    }
+    if (e.key === 'Enter') processCommand()
 })

 // run all tasks
@ -75,3 +78,9 @@ command?.focus()
 const theme = localStorage.getItem('theme');
 if (theme === 'dark')
    document.body.classList.add('dark')
+
+// listen to help tooltip
+help.addEventListener('click', () => {
+    command.value = 'help';
+    processCommand();
+})
Author	SHA1	Message	Date
sadorowo	e79cd00a06	add some helpful messages to `curl` command	2024-05-08 20:56:00 +02:00
sadorowo	ae81d8467c	update: website look	2024-05-08 20:51:47 +02:00
sadorowo	01c8eb3b27	add: `desktop` command	2024-05-08 20:44:13 +02:00
sadorowo	a8c5adaeea	update: music, added desktop screenshots	2024-05-08 20:36:58 +02:00