Compare commits

..

4 Commits

Author SHA1 Message Date
e79cd00a06
add some helpful messages to curl command 2024-05-08 20:56:00 +02:00
ae81d8467c
update: website look 2024-05-08 20:51:47 +02:00
01c8eb3b27
add: desktop command 2024-05-08 20:44:13 +02:00
a8c5adaeea
update: music, added desktop screenshots 2024-05-08 20:36:58 +02:00
8 changed files with 108 additions and 47 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

View File

@ -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;
}
}

View File

@ -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>

View File

@ -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>
`
}
}
]

View File

@ -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'
]
}

View File

@ -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();
})