From 2977478b0c5d5af3f3532d9d4e57e921ee1e482b Mon Sep 17 00:00:00 2001 From: sadorowo Date: Fri, 10 May 2024 21:03:28 +0200 Subject: [PATCH] fix(layout): formatting & minor typing mistake + mobile layout --- css/style.css | 18 ++++++--- css/style.dark.css | 3 +- error.html | 3 +- index.html | 5 ++- js/commands.js | 31 ++++++++++------ js/data.js | 93 +++++++++++++++++++++++++++++----------------- 6 files changed, 99 insertions(+), 54 deletions(-) diff --git a/css/style.css b/css/style.css index d9befd9..7aca493 100644 --- a/css/style.css +++ b/css/style.css @@ -32,7 +32,7 @@ body { width: 100%; } -#container > * { +#container>* { width: 50%; } @@ -57,7 +57,9 @@ ul.vertical li:not(:first-child)::before { font-weight: bold; } -input, a, #result { +input, +a, +#result { transition: background 0.3s ease-in-out; } @@ -78,11 +80,13 @@ input { white-space: preserve; color: var(--color); - max-height: 100%; + height: 100%; overflow-y: auto; + align-content: center; } -#switch_theme, #help { +#switch_theme, +#help { text-decoration: underline; cursor: pointer; } @@ -95,7 +99,7 @@ input { gap: 5px; } -.image-grid > * { +.image-grid>* { max-width: 50%; max-height: 50%; } @@ -104,4 +108,8 @@ input { #container { flex-direction: column !important; } + + #container>* { + width: 100%; + } } \ No newline at end of file diff --git a/css/style.dark.css b/css/style.dark.css index 41b41a0..62afb47 100644 --- a/css/style.dark.css +++ b/css/style.dark.css @@ -7,6 +7,7 @@ body.dark input { color: var(--background) !important; } -body.dark #result, body.dark a { +body.dark #result, +body.dark a { color: var(--background) !important; } \ No newline at end of file diff --git a/error.html b/error.html index dbaecc7..8205642 100644 --- a/error.html +++ b/error.html @@ -17,4 +17,5 @@ go back - + + \ No newline at end of file diff --git a/index.html b/index.html index 534322a..e8fe99a 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -12,12 +13,13 @@ sador +

welcome to my website

switch theme

- +

press Enter to run command

use 'help' to list all commands

[guest@website ~]$ @@ -28,4 +30,5 @@
+ \ No newline at end of file diff --git a/js/commands.js b/js/commands.js index 23fc465..1330ff9 100644 --- a/js/commands.js +++ b/js/commands.js @@ -15,10 +15,10 @@ const COMMANDS = [ } ], output: (command) => !!command - ? getCommandHelp(command) + ? getCommandHelp(command.toLowerCase()) : COMMANDS - .map(c => `${c.name}: ${c.description}`) - .join('\n') + .map(c => `${c.name}: ${c.description}`) + .join('\n') }, { name: 'music', @@ -31,7 +31,7 @@ const COMMANDS = [ description: 'music genre', required: false, multiword: true, - check: (genre) => !!genre && !Object.keys(MUSIC_METADATA).includes(genre) + check: (genre) => !!genre && !getGenre(genre) ? "no informations about this music genre, run 'music' command to find available genres" : null } @@ -42,11 +42,14 @@ const COMMANDS = [ return !!genre ? getGenreHelp(genre) : ` + if you want to get more info about specific genre, use music [name/alias] i am listening to these music genres: - ${Object.keys(MUSIC_METADATA) - .map(genre => `${genre} - more info: 'music ${genre}'`) - .join('\n')} + ${MUSIC_METADATA + .map(genre_data => !!genre_data.aliases?.length + ? `${genre_data.name} (aliases: ${genre_data.aliases.join(', ')})` + : genre_data.name) + .join('\n')} ` } }, @@ -146,7 +149,7 @@ const COMMANDS = [ target: '_blank', rel: 'noopener noreferrer', href: url, - }).click(); + }).click(); return '' } @@ -174,18 +177,24 @@ const COMMANDS = [ ] function getGenreHelp(genreName) { - const genre = MUSIC_METADATA[genreName]; + const genre = getGenre(genreName) if (!genre) return 'music: no informations about this music genre'; return ` - i enjoy listening to ${genreName}. + i enjoy listening to ${genre.name}. example ${genreName} artists/bands that i am listening to: - ${genre.join('\n')} + ${genre.artists.join('\n')} ` } +function getGenre(genreName) { + return MUSIC_METADATA.find(genre => + genre.name === genreName || + genre.aliases.includes(genreName)); +} + function getCommandHelp(commandName) { const command = COMMANDS.find(c => c.name === commandName) diff --git a/js/data.js b/js/data.js index f610515..86b0edc 100644 --- a/js/data.js +++ b/js/data.js @@ -3,41 +3,64 @@ const URL_REGEX = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9( const LINKS = { 'gitea': 'https://git.sador.me/sadorowo', 'instagram': 'https://instagram.com/sadorowo', - 'immich': 'https://photos.sador.me/', + 'immich (self-hosted photo hosting)': 'https://photos.sador.me/', 'email': 'mailto:contact@sador.me' } -const MUSIC_METADATA = { - 'heavy metal': [ - 'Poisonblack', - 'Metallica' - ], - 'gothic metal': [ - 'Draconian', - 'Beseech', - 'To/Die/For', - 'For My Pain...', - 'Charon', - 'Entwine' - ], - 'death suicidal black metal': [ - 'minuta agonii', - 'Decalius' - ], - 'black metal': [ - 'Behemoth', - 'Venom', - 'Mgła', - 'Watain', - 'Bathory', - 'Carpathian Forest', - 'Darkthrone' - ], - 'nu metal': [ - 'Slipknot', - 'Evanescence' - ], - 'other genres': [ - 'Rammstein' - ] -} \ No newline at end of file +const MUSIC_METADATA = [ + { + name: 'heavy metal', + aliases: ['hm', 'heavy'], + artists: [ + 'Poisonblack', + 'Metallica' + ] + }, + { + name: 'gothic metal', + aliases: ['gm', 'goth', 'gothic'], + artists: [ + 'Draconian', + 'Beseech', + 'To/Die/For', + 'For My Pain...', + 'Entwine' + ] + }, + { + name: 'depressive suicidal black metal', + aliases: ['dsbm'], + artists: [ + 'минута агонии', + 'Decalius' + ] + }, + { + name: 'black metal', + aliases: ['bm', 'black'], + artists: [ + 'Behemoth', + 'Venom', + 'Mgła', + 'Watain', + 'Bathory', + 'Carpathian Forest', + 'Darkthrone' + ] + }, + { + name: 'nu metal', + aliases: ['nm', 'nu'], + artists: [ + 'Slipknot', + 'Evanescence' + ] + }, + { + name: 'other genres', + aliases: [], + artists: [ + 'Rammstein' + ] + } +] \ No newline at end of file