$BODY @@ -47,14 +56,14 @@ router () { BODY=$(source ./pages/home.sh) ;; /contato) - HEADER_TITLE="source ./pages/contato.sh" + HEADER_TITLE="source pages/contato.sh" HEADER_TITLE_MOBILE="$HEADER_TITLE" BODY=$(source ./pages/contato.sh) ;; - /artigo/*.txt) - ARTICLE_FILE=./pages/articles/${REQUEST_URI/\/artigo\//} - HEADER_TITLE="cat $ARTICLE_FILE" - HEADER_TITLE_MOBILE="$HEADER_TITLE" + /$ARTICLES_PATH*.txt) + ARTICLE_FILE=.$REQUEST_URI + HEADER_TITLE="ARTICLE_FILE=$ARTICLE_FILE source pages/article.sh" + HEADER_TITLE_MOBILE="export ARTICLE_FILE=$ARTICLE_FILE;source pages/article.sh" BODY=$(source ./pages/article.sh) ;; /json) @@ -69,9 +78,9 @@ JSON ;; *) STATUS=404 - HEADER_TITLE="cat .$REQUEST_URI" - HEADER_TITLE_MOBILE="$HEADER_TITLE" - BODY="

cat: .$REQUEST_URI: Arquivo ou diretório inexistente

" + HEADER_TITLE="REQUEST_FILE=.$REQUEST_URI source page.sh" + HEADER_TITLE_MOBILE="export REQUEST_FILE=.$REQUEST_URI;source page.sh" + BODY="

404: .$REQUEST_URI: Arquivo ou diretório inexistente

" ;; esac } diff --git a/nav.sh b/nav.sh index 5881bb3..2b0049d 100755 --- a/nav.sh +++ b/nav.sh @@ -3,7 +3,8 @@ cat <

.top-nav { - position: relative; + position: sticky; + top: 0px; display: inline-flex; background-color: var(--primary-fg); height: 40px; @@ -31,8 +32,6 @@ cat <

@@ -87,5 +89,6 @@ cat < NAV diff --git a/pages/article.sh b/pages/article.sh index 9832a76..b50d922 100755 --- a/pages/article.sh +++ b/pages/article.sh @@ -1,26 +1,11 @@ #!/bin/bash -ARTICLE_TITLE=$(basename "$ARTICLE_FILE") - -# Pick all file content -ARTICLE_FILE_CONTENT=$(cat "$ARTICLE_FILE") - -# The first 3 lines of the file are metadata information -ARTICLE_METADATA=$(echo "$ARTICLE_FILE_CONTENT" | head -n 3) - -# Skip file metadata, first 3 lines -ARTICLE_CONTENT=$(echo "$ARTICLE_FILE_CONTENT" | tail -n +3) - -# Tags are placed on the first line of the file, delimited by commas -IFS=',' read -ra ARTICLE_TAGS <<< "$(echo "$ARTICLE_METADATA" | head -n 1)" - -ARTICLE_TIME=$(stat --format="Criado em: %w
Última atualização: %z" "$ARTICLE_FILE") -ARTICLE_BYTES=$(stat --format="%o bytes" "$ARTICLE_FILE") +source $SCRIPT_DIR/utils/parse-article.sh if [ $? -gt 0 ]; then STATUS=404 cat <cat: $ARTICLE_FILE: Arquivo ou diretório inexistente

404: $ARTICLE_FILE: Arquivo ou diretório inexistente

ERR exit 0 fi @@ -29,7 +14,7 @@ cat <

stat -c "%o %w %z" $ARTICLE_FILE

$ stat -c "%s %w %z" \\
> $ARTICLE_FILE

$ARTICLE_BYTES
$ARTICLE_TIME
diff --git a/pages/contato.sh b/pages/contato.sh old mode 100644 new mode 100755 index 74d1ad4..b54a64e --- a/pages/contato.sh +++ b/pages/contato.sh @@ -1,4 +1,5 @@ #!/bin/bash + cat < @media screen and (max-width: 600px) { @@ -9,5 +10,27 @@ cat <

Formas de contato

+ +

+ Primeiramente, muito obrigado pelo interesse em me contatar! Você pode ver abaixo minhas + informações de contato, pode me chamar a qualquer hora, mas só respondo em horário + comercial. Se for algo urgente, escreva "URGENTE" sem aspas no título da mensagem + que tentarei fazer de tudo para atendê-lo o quanto antes. +

+ +

+ Email: snhr.jj@gmail.com
+ Linkedin: + + https://www.linkedin.com/in/jefferson-j%C3%BAlio-56a30b149 + +

PAGE + +# Celular e Whatsapp: +55 (81) 97326-9793
diff --git a/pages/home.sh b/pages/home.sh index ebb399d..c9a9966 100755 --- a/pages/home.sh +++ b/pages/home.sh @@ -1,25 +1,26 @@ #!/bin/bash -print-all-articles () { - for i in $(find ./pages/articles -type f -name '*.txt'); do - ARTICLE_CONTENT=$(tail -n +3 $i) - cat < -

stat -c "%w %z" $i

- $(stat --format="Criado em: %w
Última atualização: %z" $i) -

- -

$(echo "$ARTICLE_CONTENT" | head -c 120)...

- - Ler artigo completo +welcome () { + cat < +

Bem-vindo ao meu blog :3

Aqui mostro o meu trabalho e escrevo sobre programação.

-POST +WELCOME +} + +print-all-articles () { + # Find all articles and sort by date of creation + for i in $(find $ARTICLES_PATH -type f -name '*.txt' -printf "%T@ %p\n" | sort -rn | cut -b 23-); do + ARTICLE_FILE="${i/* /}" source $SCRIPT_DIR/components/post-preview.sh done } cat < + $(welcome) $(print-all-articles)

PAGE diff --git a/static/header.js b/static/header.js new file mode 100644 index 0000000..06d868a --- /dev/null +++ b/static/header.js @@ -0,0 +1,137 @@ +let isMobile = window.innerWidth < 769; +let keyPressAudio = new Audio('/static/key-press.mp3'); +let headerAnimationTerminated = false; +let cursorHTML = ' '; + +window.addEventListener('resize', () => { + isMobile = window.innerWidth < 769; +}); + +function hideTopNav() { + let topNav = document.querySelector('.top-nav'); + topNav.style.opacity = '0'; + topNav.style.display = 'none'; +} + +function hideContent() { + hideTopNav(); + let mainContainer = document.querySelector('main'); + let footer = document.querySelector('footer'); + mainContainer.style.opacity = '0'; + mainContainer.style.display = 'none'; + footer.style.opacity = '0'; + footer.style.display = 'none'; +} + +function showContent(cb) { + let mainContainer = document.querySelector('main'); + let footer = document.querySelector('footer'); + let topNav = document.querySelector('.top-nav'); + + topNav.style.transition = '100ms'; + topNav.style.opacity = '1'; + topNav.style.display = 'block'; + + setTimeout(() => { + mainContainer.style.transition = '500ms'; + mainContainer.style.opacity = '1'; + mainContainer.style.display = 'block'; + setTimeout(() => { + footer.style.transition = '500ms'; + footer.style.opacity = '1'; + footer.style.display = 'block'; + if (cb) cb(); + }, 500); + }, 100); +} + +function clearHideContentTransition() { + let mainContainer = document.querySelector('main'); + let footer = document.querySelector('footer'); + let topNav = document.querySelector('.top-nav'); + topNav.style.transition = '0s'; + mainContainer.style.transition = '0s'; + footer.style.transition = '0s'; +} + +function typingAnimation(el, text, index, cb) { + let delay = 30; + + let char = text[index]; + if (char == ';') { + el.innerHTML += '
$ '; + !isMobile && keyPressAudio.play(); + delay += 400; + } else if (char == ' ') { + el.innerHTML += ' '; + } else { + el.innerText += char; + } + + if (index < text.length - 1) { + setTimeout(() => typingAnimation(el, text, index + 1, cb), delay); + } else { + !isMobile && keyPressAudio.play(); + el.innerHTML += '
'; + setTimeout(() => { + if (cb) cb(); + setTimeout(clearHideContentTransition, 1000); + }, 600); + } +} + +function clearHeaderTerminal(cb) { + let titleMobile = document.querySelector("#header-title-mobile > .text"); + let titleDesktop = document.querySelector('#header-title > .text'); + let footerCommandPrompt = document.querySelector('#footer-command-prompt'); + + if (isMobile) { + titleMobile.innerHTML = ''; + } else { + titleDesktop.innerHTML = ''; + } + + footerCommandPrompt.style.height = 'calc(100vh)'; + hideTopNav(); + footerCommandPrompt.querySelector('.after-prompt').scrollIntoView({ + behavior: 'smooth', + }); + + setTimeout(() => { + if (cb) cb(); + footerCommandPrompt.style.height = 'auto'; + }, 1000); +} + +function headerTerminalExecute(desktopText, mobileText, cb) { + window.scrollTo(0, 0); + headerAnimationTerminated = false; + let titleMobile = document.querySelector("#header-title-mobile > .text"); + let titleDesktop = document.querySelector('#header-title > .text'); + + if (!mobileText) mobileText = desktopText; + + setTimeout(() => { + if (isMobile) { + titleMobile.insertAdjacentHTML('afterend', cursorHTML); + typingAnimation(titleMobile, mobileText, 0, () => { + if (cb) cb(); + headerAnimationTerminated = true; + document.querySelector('#header-title-mobile .cursor').remove(); + }); + } else { + titleDesktop.insertAdjacentHTML('afterend', cursorHTML); + typingAnimation(titleDesktop, desktopText, 0, () => { + if (cb) cb(); + headerAnimationTerminated = true; + document.querySelector('#header-title .cursor').remove(); + }); + } + }, 200); +} + +document.addEventListener('DOMContentLoaded', function() { + clearHeaderTerminal(); + hideContent(); + headerTerminalExecute(desktopText, mobileText, () => showContent(bindAllRelativeAnchors)); +}); diff --git a/static/styles.css b/static/styles.css new file mode 100644 index 0000000..e84dc56 --- /dev/null +++ b/static/styles.css @@ -0,0 +1,359 @@ +/* normalize.css */ +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} +body { + margin: 0; +} +main { + display: block; + margin-top: 25px; +} +h1 { + font-size: 2em; + margin: 0.67em 0; +} +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} +a { + background-color: transparent; +} +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} +b, +strong { + font-weight: bolder; +} +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} +small { + font-size: 80%; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} +img { + border-style: none; +} +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} +button, +input { /* 1 */ + overflow: visible; +} +button, +select { /* 1 */ + text-transform: none; +} +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} +fieldset { + padding: 0.35em 0.75em 0.625em; +} +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} +progress { + vertical-align: baseline; +} +textarea { + overflow: auto; +} +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} +details { + display: block; +} +summary { + display: list-item; +} +template { + display: none; +} +[hidden] { + display: none; +} + +/* jefferson.sh */ + +@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); + +html { + --primary-bg: #2b2b2b; + /* --primary-fg: #65d84a; */ + --primary-fg: #0eff5d; + background-color: var(--primary-bg); + color: var(--primary-fg); + font-family: 'VT323', monospace; + font-size: 16px; + position: relative; + overflow: auto; + /* scroll-behavior: smooth; */ + min-height: 100vh; +} + +@media screen and (max-width: 600px) { + html { + font-size: 14px; + } +} + +html:before { + content: ' '; + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: linear-gradient( + to bottom, + rgba(18, 16, 16, 0) 50%, + rgba(0, 0, 0, 0.25) 50% + ); + background-size: 100% 3px; + z-index: 99; + pointer-events: none; +} + +.separator-wrap { + width: 100%; + display: flex; + justify-content: center; +} + +.separator-wrap.left { + justify-content: flex-start; +} + +.separator { + border-top: 1px solid var(--primary-fg); + width: 25px; + margin-left: 25px; + margin-right: 25px; +} + +a { + color: var(--primary-fg); +} + +ul { + padding: 0; + margin: 0; + list-style: none; +} + +nav > * { + display: inline-block; +} + +ul > li { + display: inline-block; +} + +header, footer { + margin: 25px; +} + +header > h1, +header > h2 { + margin: 0; +} + +@media screen and (max-width: 600px) { + h1 { + font-size: 1.4rem; + } +} + +[class^=err-] { + text-align: left; + font-size: 2rem; + margin: 40px; +} + +.container { + padding-left: 25px; + padding-right: 25px; +} + +.hidden { + display: none !important; +} + +@keyframes blink-animation { + to { + opacity: 0; + } +} + +.cursor { + background-color: var(--primary-fg); + animation-name: blink-animation; + animation-duration: 500ms; + animation-iteration-count: infinite; + animation-timing-function: cubic-bezier(0.83,-0.22, 0.54, 0.55); +} + +@media screen and (min-width: 1000px) { + .container, [class^=err-] { + padding-left: 215px; + padding-right: 215px; + } + + .pad-left, .pad-right { + width: 215px; + } +} + +.post-header { + border-left: 1px solid; + padding-left: 15px; +} + +.post-title { + font-size: 1.4rem; + margin: 0; + margin-bottom: 10px; + line-break: anywhere; +} + +.post-preview { + border-left: 1px solid; + padding-left: 10px; + margin: 25px 0px; +} + +.post-header time, +.post-header small { + font-size: 0.9rem; +} + +.post-header-preview time, +.post-header-preview small { + font-size: 0.9rem; +} + +.post-header-preview .post-title { + margin: 0; + font-size: 1.1rem; +} +.post-header-preview time { + font-size: 0.8rem; +} + +.tags { + margin-top: 15px; + margin-bottom: 15px; +} + +.post-header-preview .tags { + margin-top: 5px; + margin-bottom: 5px; +} + +.tag { + background-color: var(--primary-fg); + color: var(--primary-bg); + padding-left: 4px; + padding-right: 4px; + padding-top: 1.5px; + padding-bottom: 1.5px; +} + +.post-header-preview .tag { + font-size: 0.75rem; +} + +::-webkit-scrollbar { + width: 10px; + height: 10px; +} +::-webkit-scrollbar-thumb { + background: var(--primary-fg); + border-radius: 8px; +} +::-webkit-scrollbar-thumb:hover{ + background: var(--primary-bg); +} +::-webkit-scrollbar-track{ + background: var(--primary-bg); + border-radius: 7px; +} + +::-webkit-scrollbar-track:hover { + background: var(--primary-fg); +} diff --git a/styles.css b/styles.css deleted file mode 100644 index b17d72f..0000000 --- a/styles.css +++ /dev/null @@ -1,279 +0,0 @@ -/* normalize.css */ -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} -body { - margin: 0; -} -main { - display: block; -} -h1 { - font-size: 2em; - margin: 0.67em 0; -} -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} -a { - background-color: transparent; -} -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} -b, -strong { - font-weight: bolder; -} -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} -small { - font-size: 80%; -} -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} -sub { - bottom: -0.25em; -} -sup { - top: -0.5em; -} -img { - border-style: none; -} -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} -button, -input { /* 1 */ - overflow: visible; -} -button, -select { /* 1 */ - text-transform: none; -} -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} -fieldset { - padding: 0.35em 0.75em 0.625em; -} -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} -progress { - vertical-align: baseline; -} -textarea { - overflow: auto; -} -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} -details { - display: block; -} -summary { - display: list-item; -} -template { - display: none; -} -[hidden] { - display: none; -} - -/* jefferson.sh */ - -@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); - -html { - --primary-bg: #2b2b2b; - --primary-fg: #65d84a; - background-color: var(--primary-bg); - color: var(--primary-fg); - font-family: 'VT323', monospace; - font-size: 14px; -} - - -.separator-wrap { - width: 100%; - display: flex; - justify-content: center; -} - -.separator-wrap.left { - justify-content: flex-start; -} - -.separator { - border-top: 1px solid var(--primary-fg); - width: 25px; - margin-left: 25px; - margin-right: 25px; -} - -a { - color: var(--primary-fg); -} - -ul { - padding: 0; - margin: 0; - list-style: none; -} - -nav > * { - display: inline-block; -} - -ul > li { - display: inline-block; -} - -header, footer { - margin: 25px; -} - -header > h1, -header > h2 { - margin: 0; -} - -@media screen and (max-width: 600px) { - h1 { - font-size: 1.4rem; - } -} - -[class^=err-] { - text-align: left; - font-size: 2rem; - margin: 40px; -} - -.container { - padding-left: 25px; - padding-right: 25px; -} - -@media screen and (min-width: 1000px) { - .container { - padding-left: 215px; - padding-right: 215px; - } -} - -.post-header { - border-left: 1px solid; - padding-left: 15px; -} - -.post-title { - font-size: 1.4rem; - margin: 0; - margin-bottom: 10px; - line-break: anywhere; -} - -.post-preview { - border-left: 1px solid; - padding-left: 10px; - margin: 25px 0px; -} - -.post-header time, -.post-header small { - font-size: 0.9rem; -} - -.post-header-preview time, -.post-header-preview small { - font-size: 0.9rem; -} - -.post-header-preview .post-title { - margin: 0; - font-size: 1.1rem; -} -.post-header-preview time { - font-size: 0.8rem; -} - -.tags { - margin-top: 15px; - margin-bottom: 15px; -} - -.tag { - background-color: var(--primary-fg); - color: var(--primary-bg); - padding-left: 4px; - padding-right: 4px; - padding-top: 1.5px; - padding-bottom: 1.5px; -} diff --git a/utils/parse-article.sh b/utils/parse-article.sh new file mode 100755 index 0000000..c3e540a --- /dev/null +++ b/utils/parse-article.sh @@ -0,0 +1,18 @@ +#!/bin/bash + +ARTICLE_TITLE=$(basename "$ARTICLE_FILE") + +# Pick all file content +ARTICLE_FILE_CONTENT=$(cat "$ARTICLE_FILE") + +# The first 3 lines of the file are metadata information +ARTICLE_METADATA=$(echo "$ARTICLE_FILE_CONTENT" | head -n 3) + +# Skip file metadata, first 3 lines +ARTICLE_CONTENT=$(echo "$ARTICLE_FILE_CONTENT" | tail -n +3) + +# Tags are placed on the first line of the file, delimited by commas +IFS=',' read -ra ARTICLE_TAGS <<< "$(echo "$ARTICLE_METADATA" | head -n 1)" + +ARTICLE_TIME=$(stat --format="Criado em: %w
Última atualização: %z" "$ARTICLE_FILE") +ARTICLE_BYTES=$(stat --format="%s bytes" "$ARTICLE_FILE") -- cgit v1.2.3

$ stat -c "%w" \\ > $ARTICLE_FILE

Formas de contato

stat -c "%w %z" $i

$ stat -c "%w" \\
> $ARTICLE_FILE