sadorowo/personal-website
Archived
1
0
Fork 0
Code Pull Requests Projects Releases Activity

Compare commits

base: sadorowo:e79cd00a06e78ec3eebc49cadb08d1396cca55b9
Branches Tags
sadorowo:main
..
compare: sadorowo:887de0a311015a60dcd2a855f851945d833802de
Branches Tags
sadorowo:main

No commits in common. "e79cd00a06e78ec3eebc49cadb08d1396cca55b9" and "887de0a311015a60dcd2a855f851945d833802de" have entirely different histories.
e79cd00a06 ... 887de0a311

8 changed files with 47 additions and 108 deletions
Show Stats Expand all files Collapse all files

BIN
assets/desktop_screenshots/1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 MiB

BIN
assets/desktop_screenshots/2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 134 KiB

BIN
assets/desktop_screenshots/3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 72 KiB

37
css/style.css
View File

@ -22,18 +22,11 @@ body {
}
#container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
width: 100%;
}
#container > * {
width: 50%;
align-content: center;
}
[data-tooltip] {
@ -74,34 +67,16 @@ input {
}
#result {
background-color: transparent;
white-space: preserve;
background-color: transparent;
color: var(--color);
max-height: 100%;
overflow-y: auto;
padding: 2em;
margin: 2em;
}
#switch_theme, #help {
#switch_theme {
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;
}
}

17
index.html
View File

@ -14,15 +14,14 @@
</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 <span id="help">'help'</span> to list all commands</p>
<span>[guest@website ~]$ </span>
<input type="text" id="command">
</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>
<span>[guest@website ~]$ </span>
<input type="text" id="command" value="help">
<div id="result">
</div>

25
js/commands.js
View File

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

9
js/data.js
View File

@ -1,7 +1,6 @@
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/sadorowo',
'gitea': 'https://git.sador.me',
'instagram': 'https://instagram.com/sadorowo',
'immich': 'https://photos.sador.me/',
'email': 'mailto:contact@sador.me'
@ -27,17 +26,11 @@ const MUSIC_METADATA = {
'black metal': [
'Behemoth',
'Venom',
'Mgła',
'Watain',
'Bathory',
'Carpathian Forest',
'Darkthrone'
],
'nu metal': [
'Slipknot',
'Evanescence'
],
'other genres': [
'Rammstein'
]
}

67
js/script.js
View File

@ -4,36 +4,6 @@ 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()
@ -67,7 +37,34 @@ command?.addEventListener('focusout', () => {
})
command?.addEventListener('keydown', e => {
if (e.key === 'Enter') processCommand()
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, '')
}
})
// run all tasks
@ -77,10 +74,4 @@ command?.focus()
// initial theme configuration
const theme = localStorage.getItem('theme');
if (theme === 'dark')
document.body.classList.add('dark')
// listen to help tooltip
help.addEventListener('click', () => {
command.value = 'help';
processCommand();
})
document.body.classList.add('dark')