PANDOC FOR THE WIN
This commit is contained in:
parent
92d8ce4b2b
commit
c0b1bbf1b1
48 changed files with 5376 additions and 2288 deletions
312
404.html
312
404.html
|
|
@ -1,29 +1,301 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang xml:lang>
|
||||
<head>
|
||||
<!-- 2024-11-02 Sat 22:57 -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Erro 404</title>
|
||||
<meta name="author" content="Tukain" />
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<link rel=icon type="image/webp" href="/assets/fav.webp"> <link rel=stylesheet href="/assets/css/main.css" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="generator" content="pandoc" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
<title>Erro 404</title>
|
||||
<style>
|
||||
code{white-space: pre-wrap;}
|
||||
span.smallcaps{font-variant: small-caps;}
|
||||
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
||||
div.column{flex: auto; overflow-x: auto;}
|
||||
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||
|
||||
ul.task-list[class]{list-style: none;}
|
||||
ul.task-list li input[type="checkbox"] {
|
||||
font-size: inherit;
|
||||
width: 0.8em;
|
||||
margin: 0 0.8em 0.2em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||
</style>
|
||||
<style type="text/css">:root {
|
||||
--level-1-bg: #230631;
|
||||
--level-1-fg: #b6a0ff;
|
||||
--level-2-bg: #2c0614;
|
||||
--level-2-fg: #f78fe7;
|
||||
--level-3-bg: #0f0e39;
|
||||
--level-3-fg: #2fafff;
|
||||
--background: #000000;
|
||||
--foreground: #ffffff;
|
||||
--background-alt: #181732;
|
||||
--accent: #f5aa80;
|
||||
--link: #00bcff;
|
||||
--mode-bar: #2a2a66;
|
||||
--mode-bar-accent: #00808f;
|
||||
--border: solid 1px var(--background-alt);
|
||||
}
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
height: 0px;
|
||||
}
|
||||
100% {
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
header > nav {
|
||||
background-color: var(--mode-bar);
|
||||
display: flex;
|
||||
padding: 5px 20px;
|
||||
justify-content: space-between;
|
||||
overflow-x: scroll;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
header > nav > ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li > a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
header > nav > ul > li > a:hover {
|
||||
background-color: var(--mode-bar-accent);
|
||||
}
|
||||
header > nav > ul {
|
||||
padding: 0;
|
||||
}
|
||||
header > nav {
|
||||
padding: 15px;
|
||||
font-size: medium;
|
||||
}
|
||||
p > code {
|
||||
color: var(--foreground);
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
.sourceCode, pre, code {
|
||||
background-color: #1a1a1a;
|
||||
padding: 3px;
|
||||
overflow-x: scroll;
|
||||
margin: 10px auto;
|
||||
}
|
||||
pre {
|
||||
min-height: 20px;
|
||||
}
|
||||
pre.sourceCode:hover::before {
|
||||
float: right;
|
||||
border: solid 2px var(--accent);
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
min-width: 32px;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
animation: 300ms slide-in both;
|
||||
}
|
||||
pre.c:hover::before {
|
||||
content: "C"
|
||||
}
|
||||
pre.bash:hover::before {
|
||||
content: "Bash"
|
||||
}
|
||||
pre.html:hover::before {
|
||||
content: "HTML"
|
||||
}
|
||||
pre.javascript:hover::before {
|
||||
content: "Javascript"
|
||||
}
|
||||
pre.css:hover::before {
|
||||
content: "CSS"
|
||||
}
|
||||
pre.lua:hover::before {
|
||||
content: "Lua"
|
||||
}
|
||||
pre.commonlisp:hover::before {
|
||||
content: "Lisp"
|
||||
}
|
||||
pre.cpp:hover::before {
|
||||
content: "C++"
|
||||
}
|
||||
pre.python:hover::before {
|
||||
content: "Python"
|
||||
}
|
||||
pre.org:hover::before {
|
||||
content: "Org-mode";
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
.title::before {
|
||||
content: "";
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.author {
|
||||
display: none;
|
||||
}
|
||||
.line-block {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
border-top: solid 3px var(--accent);
|
||||
border-bottom: solid 3px var(--accent);
|
||||
padding: 10px;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
#TOC {
|
||||
background-color: var(--background-alt);
|
||||
padding: 10px;
|
||||
}
|
||||
@media print {
|
||||
#TOC {
|
||||
display: none;
|
||||
}
|
||||
header > nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
position: relative;
|
||||
font-family: system-ui;
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding: 1em;
|
||||
}
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
article {
|
||||
max-width: 80ch;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
padding: 10px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--link);
|
||||
}
|
||||
a:hover {
|
||||
opacity: 80%;
|
||||
}
|
||||
hr {
|
||||
border: var(--border);
|
||||
border-bottom: none;
|
||||
}
|
||||
blockquote {
|
||||
background-color: var(--background-alt);
|
||||
color: var(--accent);
|
||||
border-left: solid 5px var(--accent);
|
||||
padding: 10px 20px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
blockquote > p > code {
|
||||
background-color: var(--link);
|
||||
color: var(--background);
|
||||
}
|
||||
blockquote > pre {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p, hr {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
ul, ol {
|
||||
list-style-position: inside;
|
||||
padding-inline-start: 1.5em;
|
||||
}
|
||||
ul > li {
|
||||
list-style: "- ";
|
||||
}
|
||||
h1, h2, h3 {
|
||||
margin: 1em 0;
|
||||
}
|
||||
h1, h1::before {
|
||||
content: "* ";
|
||||
background-color: var(--level-1-bg);
|
||||
color: var(--level-1-fg);
|
||||
}
|
||||
h2, h2::before {
|
||||
content: "** ";
|
||||
background-color: var(--level-2-bg);
|
||||
color: var(--level-2-fg);
|
||||
}
|
||||
h3, h3::before {
|
||||
content: "*** ";
|
||||
background-color: var(--level-3-bg);
|
||||
color: var(--level-3-fg);
|
||||
}
|
||||
img {
|
||||
max-height: 300px;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
}
|
||||
table, th, td {
|
||||
border: var(--border);
|
||||
padding: 5px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table {
|
||||
border: none;
|
||||
overflow: scroll;
|
||||
margin: 1em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
th, td {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
tr:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
tr:nth-of-type(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<header><nav><ul><li><a href="/">Início</a></li></ul><ul><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<article>
|
||||
<header id="title-block-header">
|
||||
<h1 class="title">Erro 404</h1>
|
||||
</header><div class="org-center">
|
||||
<p>
|
||||
A página solicitada não foi encontrada.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<header><nav><ul><li>U:---</li><li>Erro 404.org</li><li>-</li><li>2024-11-01 Fri 19:45</li><li>(Elisp<span style="color: #d0bc00">/d</span> ARev WK company)</li></ul><ul><li><a href="/">Início</a></li><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</header>
|
||||
<div class="center">
|
||||
<p>A página solicitada não foi encontrada.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ p > code {
|
|||
background-color: var(--background-alt);
|
||||
}
|
||||
|
||||
pre, code {
|
||||
background-color: var(--background-alt);
|
||||
.sourceCode, pre, code {
|
||||
background-color: #1a1a1a;
|
||||
padding: 3px;
|
||||
overflow-x: scroll;
|
||||
margin: 10px auto;
|
||||
|
|
@ -14,7 +14,7 @@ pre {
|
|||
min-height: 20px;
|
||||
}
|
||||
|
||||
.src:hover::before {
|
||||
pre.sourceCode:hover::before {
|
||||
float: right;
|
||||
border: solid 2px var(--accent);
|
||||
background-color: var(--accent);
|
||||
|
|
@ -25,46 +25,42 @@ pre {
|
|||
animation: 300ms slide-in both;
|
||||
}
|
||||
|
||||
.src-C:hover::before {
|
||||
pre.c:hover::before {
|
||||
content: "C"
|
||||
}
|
||||
|
||||
.src-hare:hover::before {
|
||||
content: "Hare"
|
||||
}
|
||||
|
||||
.src-bash:hover::before {
|
||||
pre.bash:hover::before {
|
||||
content: "Bash"
|
||||
}
|
||||
|
||||
.src-html:hover::before {
|
||||
pre.html:hover::before {
|
||||
content: "HTML"
|
||||
}
|
||||
|
||||
.src-javascript:hover::before {
|
||||
pre.javascript:hover::before {
|
||||
content: "Javascript"
|
||||
}
|
||||
|
||||
.src-css:hover::before {
|
||||
pre.css:hover::before {
|
||||
content: "CSS"
|
||||
}
|
||||
|
||||
.src-lua:hover::before {
|
||||
pre.lua:hover::before {
|
||||
content: "Lua"
|
||||
}
|
||||
|
||||
.src-emacs-lisp:hover::before {
|
||||
content: "Elisp"
|
||||
pre.commonlisp:hover::before {
|
||||
content: "Lisp"
|
||||
}
|
||||
|
||||
.src-cpp:hover::before {
|
||||
pre.cpp:hover::before {
|
||||
content: "C++"
|
||||
}
|
||||
|
||||
.src-python:hover::before {
|
||||
pre.python:hover::before {
|
||||
content: "Python"
|
||||
}
|
||||
|
||||
.src-org:hover::before {
|
||||
pre.org:hover::before {
|
||||
content: "Org-mode";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,5 +13,5 @@
|
|||
--link: #00bcff;
|
||||
--mode-bar: #2a2a66;
|
||||
--mode-bar-accent: #00808f;
|
||||
--border: solid 1px var(--background-alt);
|
||||
--border: solid 1px var(--background-alt);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
@import url("/assets/css/colors.css");
|
||||
@import url("/assets/css/animations.css");
|
||||
@import url("/assets/css/mode-bars.css");
|
||||
@import url("/assets/css/code.css");
|
||||
@import url("/assets/css/org.css");
|
||||
@import url("/assets/css/media.css");
|
||||
@import url("colors.css");
|
||||
@import url("animations.css");
|
||||
@import url("mode-bar.css");
|
||||
@import url("code.css");
|
||||
@import url("org.css");
|
||||
@import url("media.css");
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
|
|
@ -26,6 +26,14 @@ body {
|
|||
color: var(--foreground);
|
||||
}
|
||||
|
||||
article {
|
||||
max-width: 80ch;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
padding: 10px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--link);
|
||||
|
|
@ -72,32 +80,23 @@ ul > li {
|
|||
list-style: "- ";
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding: 10px;
|
||||
border-bottom: var(--border);
|
||||
font-size: xx-large;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4 {
|
||||
h1, h2, h3 {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
h2, h2::before {
|
||||
h1, h1::before {
|
||||
content: "* ";
|
||||
background-color: var(--level-1-bg);
|
||||
color: var(--level-1-fg);
|
||||
}
|
||||
|
||||
h3, h3::before {
|
||||
h2, h2::before {
|
||||
content: "** ";
|
||||
background-color: var(--level-2-bg);
|
||||
color: var(--level-2-fg);
|
||||
}
|
||||
|
||||
h4, h4::before {
|
||||
h3, h3::before {
|
||||
content: "*** ";
|
||||
background-color: var(--level-3-bg);
|
||||
color: var(--level-3-fg);
|
||||
|
|
@ -145,3 +144,5 @@ th {
|
|||
tr:nth-of-type(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,10 @@
|
|||
@media print {
|
||||
#table-of-contents {
|
||||
display: none;
|
||||
}
|
||||
#TOC {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#preamble, #postamble {
|
||||
display: none;
|
||||
}
|
||||
header > nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (orientation: landscape) {
|
||||
#preamble {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (orientation: portrait) {
|
||||
#postamble {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
37
assets/css/mode-bar.css
Normal file
37
assets/css/mode-bar.css
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
header > nav {
|
||||
background-color: var(--mode-bar);
|
||||
display: flex;
|
||||
padding: 5px 20px;
|
||||
justify-content: space-between;
|
||||
overflow-x: scroll;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
header > nav > ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
header > nav > ul > li {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
header > nav > ul > li > a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
header > nav > ul > li > a:hover {
|
||||
background-color: var(--mode-bar-accent);
|
||||
}
|
||||
|
||||
header > nav > ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header > nav {
|
||||
padding: 15px;
|
||||
font-size: medium;
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
|
||||
#preamble, #postamble {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
#preamble {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#postamble {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
#postamble > header > nav {
|
||||
border-bottom: solid 15px var(--background);
|
||||
}
|
||||
|
||||
#preamble > header > nav,
|
||||
#postamble > header > nav {
|
||||
background-color: var(--mode-bar);
|
||||
display: flex;
|
||||
padding: 5px 20px;
|
||||
justify-content: space-between;
|
||||
overflow-x: scroll;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
#preamble > header > nav > ul,
|
||||
#postamble > header > nav > ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#preamble > header > nav > ul > li,
|
||||
#postamble > header > nav > ul > li {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#preamble > header > nav > ul > li > span,
|
||||
#postamble > header > nav > ul > li > span {
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
#preamble > header > nav > ul > li > a,
|
||||
#postamble > header > nav > ul > li > a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
#preamble > header > nav > ul > li > a:hover,
|
||||
#postamble > header > nav > ul > li > a:hover {
|
||||
background-color: var(--mode-bar-accent);
|
||||
}
|
||||
|
||||
#postamble > header > nav > ul,
|
||||
#preamble > header > nav > ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#preamble > header > nav {
|
||||
padding: 15px;
|
||||
font-size: medium;
|
||||
}
|
||||
|
|
@ -1,16 +1,23 @@
|
|||
.content {
|
||||
max-width: 80ch;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
padding: 10px;
|
||||
min-height: 100vh;
|
||||
.title {
|
||||
text-align: center;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
|
||||
.org-center {
|
||||
.title::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.verse {
|
||||
.author {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.line-block {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
border-top: solid 3px var(--accent);
|
||||
|
|
@ -19,19 +26,8 @@
|
|||
background-color: var(--background-alt);
|
||||
}
|
||||
|
||||
#table-of-contents {
|
||||
#TOC {
|
||||
background-color: var(--background-alt);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#table-of-contents > h2 {
|
||||
background-color: var(--background-alt);
|
||||
color: var(--foreground);
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#table-of-contents > h2::before {
|
||||
content: ""
|
||||
}
|
||||
|
||||
|
|
|
|||
BIN
assets/fav.webp
BIN
assets/fav.webp
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 318 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 490 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 190 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB |
36
blog.html
Normal file
36
blog.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="Content-Language" content="pt-br" />
|
||||
<meta name="author" content="tukain" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="/assets/css/main.css" rel="stylesheet">
|
||||
<title>Blog</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<article>
|
||||
<h1>Posts</h1><ul>
|
||||
<li><a href="/posts/10-pandoc.md.html">10-pandoc.md</a></li>
|
||||
<li><a href="/posts/09-vale-da-estranheza.org.html">09-vale-da-estranheza.org</a></li>
|
||||
<li><a href="/posts/08-god-mode.org.html">08-god-mode.org</a></li>
|
||||
<li><a href="/posts/07-viper-mode.org.html">07-viper-mode.org</a></li>
|
||||
<li><a href="/posts/06-proton.org.html">06-proton.org</a></li>
|
||||
<li><a href="/posts/05-fiz-meu-próprio-ssg.org.html">05-fiz-meu-próprio-ssg.org</a></li>
|
||||
<li><a href="/posts/04-emacs-parte-2.org.html">04-emacs-parte-2.org</a></li>
|
||||
<li><a href="/posts/03-emacs.org.html">03-emacs.org</a></li>
|
||||
<li><a href="/posts/02-c-e-hare.org.html">02-c-e-hare.org</a></li>
|
||||
<li><a href="/posts/01-hare.org.html">01-hare.org</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
348
index.html
348
index.html
|
|
@ -1,55 +1,311 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang xml:lang>
|
||||
<head>
|
||||
<!-- 2024-11-02 Sat 22:57 -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Tukain's Blog</title>
|
||||
<meta name="author" content="Tukain" />
|
||||
<meta name="description" content="Um blog simples, feito usando o org-mode." />
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<link rel=icon type="image/webp" href="/assets/fav.webp"> <link rel=stylesheet href="/assets/css/main.css" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="generator" content="pandoc" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
<meta name="author" content="Tukain" />
|
||||
<meta name="description" content="Um blog simples, feito usando o org-mode." />
|
||||
<title>Tukain's Blog</title>
|
||||
<style>
|
||||
code{white-space: pre-wrap;}
|
||||
span.smallcaps{font-variant: small-caps;}
|
||||
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
||||
div.column{flex: auto; overflow-x: auto;}
|
||||
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||
|
||||
ul.task-list[class]{list-style: none;}
|
||||
ul.task-list li input[type="checkbox"] {
|
||||
font-size: inherit;
|
||||
width: 0.8em;
|
||||
margin: 0 0.8em 0.2em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||
</style>
|
||||
<style type="text/css">:root {
|
||||
--level-1-bg: #230631;
|
||||
--level-1-fg: #b6a0ff;
|
||||
--level-2-bg: #2c0614;
|
||||
--level-2-fg: #f78fe7;
|
||||
--level-3-bg: #0f0e39;
|
||||
--level-3-fg: #2fafff;
|
||||
--background: #000000;
|
||||
--foreground: #ffffff;
|
||||
--background-alt: #181732;
|
||||
--accent: #f5aa80;
|
||||
--link: #00bcff;
|
||||
--mode-bar: #2a2a66;
|
||||
--mode-bar-accent: #00808f;
|
||||
--border: solid 1px var(--background-alt);
|
||||
}
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
height: 0px;
|
||||
}
|
||||
100% {
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
header > nav {
|
||||
background-color: var(--mode-bar);
|
||||
display: flex;
|
||||
padding: 5px 20px;
|
||||
justify-content: space-between;
|
||||
overflow-x: scroll;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
header > nav > ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li > a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
header > nav > ul > li > a:hover {
|
||||
background-color: var(--mode-bar-accent);
|
||||
}
|
||||
header > nav > ul {
|
||||
padding: 0;
|
||||
}
|
||||
header > nav {
|
||||
padding: 15px;
|
||||
font-size: medium;
|
||||
}
|
||||
p > code {
|
||||
color: var(--foreground);
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
.sourceCode, pre, code {
|
||||
background-color: #1a1a1a;
|
||||
padding: 3px;
|
||||
overflow-x: scroll;
|
||||
margin: 10px auto;
|
||||
}
|
||||
pre {
|
||||
min-height: 20px;
|
||||
}
|
||||
pre.sourceCode:hover::before {
|
||||
float: right;
|
||||
border: solid 2px var(--accent);
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
min-width: 32px;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
animation: 300ms slide-in both;
|
||||
}
|
||||
pre.c:hover::before {
|
||||
content: "C"
|
||||
}
|
||||
pre.bash:hover::before {
|
||||
content: "Bash"
|
||||
}
|
||||
pre.html:hover::before {
|
||||
content: "HTML"
|
||||
}
|
||||
pre.javascript:hover::before {
|
||||
content: "Javascript"
|
||||
}
|
||||
pre.css:hover::before {
|
||||
content: "CSS"
|
||||
}
|
||||
pre.lua:hover::before {
|
||||
content: "Lua"
|
||||
}
|
||||
pre.commonlisp:hover::before {
|
||||
content: "Lisp"
|
||||
}
|
||||
pre.cpp:hover::before {
|
||||
content: "C++"
|
||||
}
|
||||
pre.python:hover::before {
|
||||
content: "Python"
|
||||
}
|
||||
pre.org:hover::before {
|
||||
content: "Org-mode";
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
.title::before {
|
||||
content: "";
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.author {
|
||||
display: none;
|
||||
}
|
||||
.line-block {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
border-top: solid 3px var(--accent);
|
||||
border-bottom: solid 3px var(--accent);
|
||||
padding: 10px;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
#TOC {
|
||||
background-color: var(--background-alt);
|
||||
padding: 10px;
|
||||
}
|
||||
@media print {
|
||||
#TOC {
|
||||
display: none;
|
||||
}
|
||||
header > nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
position: relative;
|
||||
font-family: system-ui;
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding: 1em;
|
||||
}
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
article {
|
||||
max-width: 80ch;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
padding: 10px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--link);
|
||||
}
|
||||
a:hover {
|
||||
opacity: 80%;
|
||||
}
|
||||
hr {
|
||||
border: var(--border);
|
||||
border-bottom: none;
|
||||
}
|
||||
blockquote {
|
||||
background-color: var(--background-alt);
|
||||
color: var(--accent);
|
||||
border-left: solid 5px var(--accent);
|
||||
padding: 10px 20px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
blockquote > p > code {
|
||||
background-color: var(--link);
|
||||
color: var(--background);
|
||||
}
|
||||
blockquote > pre {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p, hr {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
ul, ol {
|
||||
list-style-position: inside;
|
||||
padding-inline-start: 1.5em;
|
||||
}
|
||||
ul > li {
|
||||
list-style: "- ";
|
||||
}
|
||||
h1, h2, h3 {
|
||||
margin: 1em 0;
|
||||
}
|
||||
h1, h1::before {
|
||||
content: "* ";
|
||||
background-color: var(--level-1-bg);
|
||||
color: var(--level-1-fg);
|
||||
}
|
||||
h2, h2::before {
|
||||
content: "** ";
|
||||
background-color: var(--level-2-bg);
|
||||
color: var(--level-2-fg);
|
||||
}
|
||||
h3, h3::before {
|
||||
content: "*** ";
|
||||
background-color: var(--level-3-bg);
|
||||
color: var(--level-3-fg);
|
||||
}
|
||||
img {
|
||||
max-height: 300px;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
}
|
||||
table, th, td {
|
||||
border: var(--border);
|
||||
padding: 5px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table {
|
||||
border: none;
|
||||
overflow: scroll;
|
||||
margin: 1em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
th, td {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
tr:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
tr:nth-of-type(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<header><nav><ul><li><a href="/">Início</a></li></ul><ul><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<header>
|
||||
<h1 class="title">Tukain's Blog</h1>
|
||||
</header><div class="org-center">
|
||||
<p>
|
||||
<a href="https://neocities.org/site/tukainpng">Neocities</a> <a href="https://codeberg.org/tukain">Codeberg</a> <a href="https://www.linkedin.com/in/diogo-fernandes-710193282/">LinkedIn</a>
|
||||
</p>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<article>
|
||||
<header id="title-block-header">
|
||||
<h1 class="title">Tukain's Blog</h1>
|
||||
<p class="author">Tukain</p>
|
||||
</header>
|
||||
<div class="center">
|
||||
<p><a href="https://neocities.org/site/tukainpng">Neocities</a> <a href="https://codeberg.org/tukain">Codeberg</a> <a href="https://www.linkedin.com/in/diogo-fernandes-710193282/">LinkedIn</a></p>
|
||||
</div>
|
||||
|
||||
<div class="org-center">
|
||||
<p>
|
||||
<i>Feito com ❤️ usando o org-mode</i>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org9746ced" class="outline-2">
|
||||
<h2 id="org9746ced">Bem-vindo ao meu blog!</h2>
|
||||
<div class="outline-text-2" id="text-org9746ced">
|
||||
<p>
|
||||
Aqui é um lugar onde eu gosto de comentar sobre assuntos envolvendo o meu cotidiano nesse vasto mundo chamado internet. E também sobre alguns assuntos que eu achar relevante o suficiente para comentar.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Uma coisa que você pode acabar reparando é na aparência do site. O motivo dele ser dessa maneira é bem simples na realidade, eu quis deixar o site com uma aparência mais próxima possível do meu editor de texto favorito: O Emacs!
|
||||
</p>
|
||||
|
||||
|
||||
<figure id="org8b523ac">
|
||||
<img src="assets/img/emacsshot.png" alt="emacsshot.png">
|
||||
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<header><nav><ul><li>U:---</li><li>Tukain's Blog.org</li><li>-</li><li>2024-11-02 Sat 21:47</li><li>(Elisp<span style="color: #d0bc00">/d</span> ARev WK company)</li></ul><ul><li><a href="/">Início</a></li><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
<div class="center">
|
||||
<p><em>Feito com ❤️ usando o pandoc</em></p>
|
||||
</div>
|
||||
<h1 id="bem-vindo-ao-meu-blog">Bem-vindo ao meu blog!</h1>
|
||||
<p>Aqui é um lugar onde eu gosto de comentar sobre assuntos envolvendo o
|
||||
meu cotidiano nesse vasto mundo chamado internet. E também sobre alguns
|
||||
assuntos que eu achar relevante o suficiente para comentar.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
352
posts/01-hare.org.html
Normal file
352
posts/01-hare.org.html
Normal file
|
|
@ -0,0 +1,352 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang xml:lang>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="generator" content="pandoc" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
<title>Hare</title>
|
||||
<style>
|
||||
code{white-space: pre-wrap;}
|
||||
span.smallcaps{font-variant: small-caps;}
|
||||
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
||||
div.column{flex: auto; overflow-x: auto;}
|
||||
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||
|
||||
ul.task-list[class]{list-style: none;}
|
||||
ul.task-list li input[type="checkbox"] {
|
||||
font-size: inherit;
|
||||
width: 0.8em;
|
||||
margin: 0 0.8em 0.2em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||
</style>
|
||||
<style type="text/css">:root {
|
||||
--level-1-bg: #230631;
|
||||
--level-1-fg: #b6a0ff;
|
||||
--level-2-bg: #2c0614;
|
||||
--level-2-fg: #f78fe7;
|
||||
--level-3-bg: #0f0e39;
|
||||
--level-3-fg: #2fafff;
|
||||
--background: #000000;
|
||||
--foreground: #ffffff;
|
||||
--background-alt: #181732;
|
||||
--accent: #f5aa80;
|
||||
--link: #00bcff;
|
||||
--mode-bar: #2a2a66;
|
||||
--mode-bar-accent: #00808f;
|
||||
--border: solid 1px var(--background-alt);
|
||||
}
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
height: 0px;
|
||||
}
|
||||
100% {
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
header > nav {
|
||||
background-color: var(--mode-bar);
|
||||
display: flex;
|
||||
padding: 5px 20px;
|
||||
justify-content: space-between;
|
||||
overflow-x: scroll;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
header > nav > ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li > a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
header > nav > ul > li > a:hover {
|
||||
background-color: var(--mode-bar-accent);
|
||||
}
|
||||
header > nav > ul {
|
||||
padding: 0;
|
||||
}
|
||||
header > nav {
|
||||
padding: 15px;
|
||||
font-size: medium;
|
||||
}
|
||||
p > code {
|
||||
color: var(--foreground);
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
.sourceCode, pre, code {
|
||||
background-color: #1a1a1a;
|
||||
padding: 3px;
|
||||
overflow-x: scroll;
|
||||
margin: 10px auto;
|
||||
}
|
||||
pre {
|
||||
min-height: 20px;
|
||||
}
|
||||
pre.sourceCode:hover::before {
|
||||
float: right;
|
||||
border: solid 2px var(--accent);
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
min-width: 32px;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
animation: 300ms slide-in both;
|
||||
}
|
||||
pre.c:hover::before {
|
||||
content: "C"
|
||||
}
|
||||
pre.bash:hover::before {
|
||||
content: "Bash"
|
||||
}
|
||||
pre.html:hover::before {
|
||||
content: "HTML"
|
||||
}
|
||||
pre.javascript:hover::before {
|
||||
content: "Javascript"
|
||||
}
|
||||
pre.css:hover::before {
|
||||
content: "CSS"
|
||||
}
|
||||
pre.lua:hover::before {
|
||||
content: "Lua"
|
||||
}
|
||||
pre.commonlisp:hover::before {
|
||||
content: "Lisp"
|
||||
}
|
||||
pre.cpp:hover::before {
|
||||
content: "C++"
|
||||
}
|
||||
pre.python:hover::before {
|
||||
content: "Python"
|
||||
}
|
||||
pre.org:hover::before {
|
||||
content: "Org-mode";
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
.title::before {
|
||||
content: "";
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.author {
|
||||
display: none;
|
||||
}
|
||||
.line-block {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
border-top: solid 3px var(--accent);
|
||||
border-bottom: solid 3px var(--accent);
|
||||
padding: 10px;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
#TOC {
|
||||
background-color: var(--background-alt);
|
||||
padding: 10px;
|
||||
}
|
||||
@media print {
|
||||
#TOC {
|
||||
display: none;
|
||||
}
|
||||
header > nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
position: relative;
|
||||
font-family: system-ui;
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding: 1em;
|
||||
}
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
article {
|
||||
max-width: 80ch;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
padding: 10px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--link);
|
||||
}
|
||||
a:hover {
|
||||
opacity: 80%;
|
||||
}
|
||||
hr {
|
||||
border: var(--border);
|
||||
border-bottom: none;
|
||||
}
|
||||
blockquote {
|
||||
background-color: var(--background-alt);
|
||||
color: var(--accent);
|
||||
border-left: solid 5px var(--accent);
|
||||
padding: 10px 20px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
blockquote > p > code {
|
||||
background-color: var(--link);
|
||||
color: var(--background);
|
||||
}
|
||||
blockquote > pre {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p, hr {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
ul, ol {
|
||||
list-style-position: inside;
|
||||
padding-inline-start: 1.5em;
|
||||
}
|
||||
ul > li {
|
||||
list-style: "- ";
|
||||
}
|
||||
h1, h2, h3 {
|
||||
margin: 1em 0;
|
||||
}
|
||||
h1, h1::before {
|
||||
content: "* ";
|
||||
background-color: var(--level-1-bg);
|
||||
color: var(--level-1-fg);
|
||||
}
|
||||
h2, h2::before {
|
||||
content: "** ";
|
||||
background-color: var(--level-2-bg);
|
||||
color: var(--level-2-fg);
|
||||
}
|
||||
h3, h3::before {
|
||||
content: "*** ";
|
||||
background-color: var(--level-3-bg);
|
||||
color: var(--level-3-fg);
|
||||
}
|
||||
img {
|
||||
max-height: 300px;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
}
|
||||
table, th, td {
|
||||
border: var(--border);
|
||||
padding: 5px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table {
|
||||
border: none;
|
||||
overflow: scroll;
|
||||
margin: 1em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
th, td {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
tr:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
tr:nth-of-type(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<article>
|
||||
<header id="title-block-header">
|
||||
<h1 class="title">Hare</h1>
|
||||
</header>
|
||||
<nav id="TOC" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#praticamente-c-mas-com-diversas-melhorias" id="toc-praticamente-c-mas-com-diversas-melhorias">Praticamente C, mas
|
||||
com diversas melhorias</a></li>
|
||||
<li><a href="#qbe-como-backend" id="toc-qbe-como-backend">QBE como
|
||||
backend</a></li>
|
||||
<li><a href="#o-que-eu-planejo-fazer-aprendendo-a-programar" id="toc-o-que-eu-planejo-fazer-aprendendo-a-programar">O que eu planejo
|
||||
fazer aprendendo a programar?</a></li>
|
||||
<li><a href="#fin" id="toc-fin"><em>Fin</em></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h1 id="praticamente-c-mas-com-diversas-melhorias">Praticamente C, mas
|
||||
com diversas melhorias</h1>
|
||||
<p>A Hare é uma linguagem da família das linguagens C-like, e a sua
|
||||
sintaxe deixa isso bem explícito, porém, ela tem algumas das inovações
|
||||
das últimas décadas consigo e também se inspira na sintaxe de outras
|
||||
linguagens, como a Rust.</p>
|
||||
<p>Porém, diferente de Rust, você não vai ter que esperar por minutos ou
|
||||
horas para o compilador terminar o serviço, nem quebrar a cabeça com o
|
||||
seu código para que ele seja "memory safe", ela não tem garbage
|
||||
collectors nem nada desse tipo, é como eu disse, ela é praticamente
|
||||
C.</p>
|
||||
<p>Contudo, ela não é uma linguagem com as mesmas limitações ou
|
||||
problemas que C possui, e além disso ela tem uma sintaxe que, para mim,
|
||||
não só é mais clara, como mais fácil de entender o que está
|
||||
acontecendo.</p>
|
||||
<p>Claramente isso é apenas algo que depende da minha experiência, mas
|
||||
até mesmo a minha namorada conseguiu entender como um Struct estava
|
||||
sendo usado em um dos exemplos que eu escrevi em Hare, enquanto isso, o
|
||||
mesmo exemplo em C foi… Confuso para dizer no mínimo.</p>
|
||||
<h1 id="qbe-como-backend">QBE como backend</h1>
|
||||
<p>O compilador da Hare usa o QBE Backend, o que torna o compilador dela
|
||||
extremamente rápido e leve, e também facilita o processo de criar ports
|
||||
do compilador para outras arquiteturas. Eu não irei entrar muito em
|
||||
detalhes sobre o que é um Compiler Backend, mas devo parafrasear algo
|
||||
vindo do próprio site do QBE:</p>
|
||||
<blockquote>
|
||||
<p>QBE é um backend para compiladores, com o foco de providenciar 70% da
|
||||
performance de compiladores otimizados da indústria com 10% do
|
||||
código.</p>
|
||||
</blockquote>
|
||||
<p>De certa forma, o QBE se encaixa até mesmo na filosofia suckless, o
|
||||
que para mim pelo menos, é um grande ponto possitivo.</p>
|
||||
<h1 id="o-que-eu-planejo-fazer-aprendendo-a-programar">O que eu planejo
|
||||
fazer aprendendo a programar?</h1>
|
||||
<p>Atualmente, eu vejo a programação como um hobbie para mim, um hobbie
|
||||
que eu gosto e muito, mas isso não me impede de colocar essa habilidade
|
||||
no meu currículo, um dia isso pode vir a ser extremamente útil.</p>
|
||||
<p>Por enquanto eu estou aprendendo o básico, recém fiz o meu primeiro
|
||||
Struct, ainda falta muito para eu dizer que eu sei fazer alguma coisa,
|
||||
quanto mais dizer que eu sei programar. Mas isso só depende do meu
|
||||
esforço, então irei correr atrás.</p>
|
||||
<h1 id="fin"><em>Fin</em></h1>
|
||||
<p>Enfim, é isso, até o próximo post!</p>
|
||||
</body>
|
||||
</html>
|
||||
457
posts/02-c-e-hare.org.html
Normal file
457
posts/02-c-e-hare.org.html
Normal file
|
|
@ -0,0 +1,457 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang xml:lang>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="generator" content="pandoc" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
<title>A simplicidade da C e da Hare</title>
|
||||
<style>
|
||||
code{white-space: pre-wrap;}
|
||||
span.smallcaps{font-variant: small-caps;}
|
||||
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
||||
div.column{flex: auto; overflow-x: auto;}
|
||||
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||
|
||||
ul.task-list[class]{list-style: none;}
|
||||
ul.task-list li input[type="checkbox"] {
|
||||
font-size: inherit;
|
||||
width: 0.8em;
|
||||
margin: 0 0.8em 0.2em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||
|
||||
pre > code.sourceCode { white-space: pre; position: relative; }
|
||||
pre > code.sourceCode > span { line-height: 1.25; }
|
||||
pre > code.sourceCode > span:empty { height: 1.2em; }
|
||||
.sourceCode { overflow: visible; }
|
||||
code.sourceCode > span { color: inherit; text-decoration: inherit; }
|
||||
div.sourceCode { margin: 1em 0; }
|
||||
pre.sourceCode { margin: 0; }
|
||||
@media screen {
|
||||
div.sourceCode { overflow: auto; }
|
||||
}
|
||||
@media print {
|
||||
pre > code.sourceCode { white-space: pre-wrap; }
|
||||
pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
|
||||
}
|
||||
pre.numberSource code
|
||||
{ counter-reset: source-line 0; }
|
||||
pre.numberSource code > span
|
||||
{ position: relative; left: -4em; counter-increment: source-line; }
|
||||
pre.numberSource code > span > a:first-child::before
|
||||
{ content: counter(source-line);
|
||||
position: relative; left: -1em; text-align: right; vertical-align: baseline;
|
||||
border: none; display: inline-block;
|
||||
-webkit-touch-callout: none; -webkit-user-select: none;
|
||||
-khtml-user-select: none; -moz-user-select: none;
|
||||
-ms-user-select: none; user-select: none;
|
||||
padding: 0 4px; width: 4em;
|
||||
}
|
||||
pre.numberSource { margin-left: 3em; padding-left: 4px; }
|
||||
div.sourceCode
|
||||
{ color: #cccccc; background-color: #303030; }
|
||||
@media screen {
|
||||
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
|
||||
}
|
||||
code span.al { color: #ffcfaf; }
|
||||
code span.an { color: #7f9f7f; font-weight: bold; }
|
||||
code span.at { }
|
||||
code span.bn { color: #dca3a3; }
|
||||
code span.bu { }
|
||||
code span.cf { color: #f0dfaf; }
|
||||
code span.ch { color: #dca3a3; }
|
||||
code span.cn { color: #dca3a3; font-weight: bold; }
|
||||
code span.co { color: #7f9f7f; }
|
||||
code span.cv { color: #7f9f7f; font-weight: bold; }
|
||||
code span.do { color: #7f9f7f; }
|
||||
code span.dt { color: #dfdfbf; }
|
||||
code span.dv { color: #dcdccc; }
|
||||
code span.er { color: #c3bf9f; }
|
||||
code span.ex { }
|
||||
code span.fl { color: #c0bed1; }
|
||||
code span.fu { color: #efef8f; }
|
||||
code span.im { }
|
||||
code span.in { color: #7f9f7f; font-weight: bold; }
|
||||
code span.kw { color: #f0dfaf; }
|
||||
code span.op { color: #f0efd0; }
|
||||
code span.ot { color: #efef8f; }
|
||||
code span.pp { color: #ffcfaf; font-weight: bold; }
|
||||
code span.sc { color: #dca3a3; }
|
||||
code span.ss { color: #cc9393; }
|
||||
code span.st { color: #cc9393; }
|
||||
code span.va { }
|
||||
code span.vs { color: #cc9393; }
|
||||
code span.wa { color: #7f9f7f; font-weight: bold; }
|
||||
</style>
|
||||
<style type="text/css">:root {
|
||||
--level-1-bg: #230631;
|
||||
--level-1-fg: #b6a0ff;
|
||||
--level-2-bg: #2c0614;
|
||||
--level-2-fg: #f78fe7;
|
||||
--level-3-bg: #0f0e39;
|
||||
--level-3-fg: #2fafff;
|
||||
--background: #000000;
|
||||
--foreground: #ffffff;
|
||||
--background-alt: #181732;
|
||||
--accent: #f5aa80;
|
||||
--link: #00bcff;
|
||||
--mode-bar: #2a2a66;
|
||||
--mode-bar-accent: #00808f;
|
||||
--border: solid 1px var(--background-alt);
|
||||
}
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
height: 0px;
|
||||
}
|
||||
100% {
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
header > nav {
|
||||
background-color: var(--mode-bar);
|
||||
display: flex;
|
||||
padding: 5px 20px;
|
||||
justify-content: space-between;
|
||||
overflow-x: scroll;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
header > nav > ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li > a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
header > nav > ul > li > a:hover {
|
||||
background-color: var(--mode-bar-accent);
|
||||
}
|
||||
header > nav > ul {
|
||||
padding: 0;
|
||||
}
|
||||
header > nav {
|
||||
padding: 15px;
|
||||
font-size: medium;
|
||||
}
|
||||
p > code {
|
||||
color: var(--foreground);
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
.sourceCode, pre, code {
|
||||
background-color: #1a1a1a;
|
||||
padding: 3px;
|
||||
overflow-x: scroll;
|
||||
margin: 10px auto;
|
||||
}
|
||||
pre {
|
||||
min-height: 20px;
|
||||
}
|
||||
pre.sourceCode:hover::before {
|
||||
float: right;
|
||||
border: solid 2px var(--accent);
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
min-width: 32px;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
animation: 300ms slide-in both;
|
||||
}
|
||||
pre.c:hover::before {
|
||||
content: "C"
|
||||
}
|
||||
pre.bash:hover::before {
|
||||
content: "Bash"
|
||||
}
|
||||
pre.html:hover::before {
|
||||
content: "HTML"
|
||||
}
|
||||
pre.javascript:hover::before {
|
||||
content: "Javascript"
|
||||
}
|
||||
pre.css:hover::before {
|
||||
content: "CSS"
|
||||
}
|
||||
pre.lua:hover::before {
|
||||
content: "Lua"
|
||||
}
|
||||
pre.commonlisp:hover::before {
|
||||
content: "Lisp"
|
||||
}
|
||||
pre.cpp:hover::before {
|
||||
content: "C++"
|
||||
}
|
||||
pre.python:hover::before {
|
||||
content: "Python"
|
||||
}
|
||||
pre.org:hover::before {
|
||||
content: "Org-mode";
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
.title::before {
|
||||
content: "";
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.author {
|
||||
display: none;
|
||||
}
|
||||
.line-block {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
border-top: solid 3px var(--accent);
|
||||
border-bottom: solid 3px var(--accent);
|
||||
padding: 10px;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
#TOC {
|
||||
background-color: var(--background-alt);
|
||||
padding: 10px;
|
||||
}
|
||||
@media print {
|
||||
#TOC {
|
||||
display: none;
|
||||
}
|
||||
header > nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
position: relative;
|
||||
font-family: system-ui;
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding: 1em;
|
||||
}
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
article {
|
||||
max-width: 80ch;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
padding: 10px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--link);
|
||||
}
|
||||
a:hover {
|
||||
opacity: 80%;
|
||||
}
|
||||
hr {
|
||||
border: var(--border);
|
||||
border-bottom: none;
|
||||
}
|
||||
blockquote {
|
||||
background-color: var(--background-alt);
|
||||
color: var(--accent);
|
||||
border-left: solid 5px var(--accent);
|
||||
padding: 10px 20px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
blockquote > p > code {
|
||||
background-color: var(--link);
|
||||
color: var(--background);
|
||||
}
|
||||
blockquote > pre {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p, hr {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
ul, ol {
|
||||
list-style-position: inside;
|
||||
padding-inline-start: 1.5em;
|
||||
}
|
||||
ul > li {
|
||||
list-style: "- ";
|
||||
}
|
||||
h1, h2, h3 {
|
||||
margin: 1em 0;
|
||||
}
|
||||
h1, h1::before {
|
||||
content: "* ";
|
||||
background-color: var(--level-1-bg);
|
||||
color: var(--level-1-fg);
|
||||
}
|
||||
h2, h2::before {
|
||||
content: "** ";
|
||||
background-color: var(--level-2-bg);
|
||||
color: var(--level-2-fg);
|
||||
}
|
||||
h3, h3::before {
|
||||
content: "*** ";
|
||||
background-color: var(--level-3-bg);
|
||||
color: var(--level-3-fg);
|
||||
}
|
||||
img {
|
||||
max-height: 300px;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
}
|
||||
table, th, td {
|
||||
border: var(--border);
|
||||
padding: 5px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table {
|
||||
border: none;
|
||||
overflow: scroll;
|
||||
margin: 1em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
th, td {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
tr:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
tr:nth-of-type(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<article>
|
||||
<header id="title-block-header">
|
||||
<h1 class="title">A simplicidade da C e da Hare</h1>
|
||||
</header>
|
||||
<nav id="TOC" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#por-quê-estou-fazendo-isso" id="toc-por-quê-estou-fazendo-isso">Por quê estou fazendo isso?</a></li>
|
||||
<li><a href="#existe-algum-outro-motivo" id="toc-existe-algum-outro-motivo">Existe algum outro motivo?</a></li>
|
||||
<li><a href="#como-está-meu-progresso-até-agora" id="toc-como-está-meu-progresso-até-agora">Como está meu progresso até
|
||||
agora?</a></li>
|
||||
<li><a href="#as-diferenças" id="toc-as-diferenças">As
|
||||
diferenças</a></li>
|
||||
<li><a href="#fin" id="toc-fin"><em>Fin</em></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p>Recentemente eu fiz um post sobre os meus estudos com a linguagem de
|
||||
programação Hare, falei sobre o que eu planejo fazer com esse
|
||||
conhecimento entre outras coisas. Mas algo que eu não comentei sobre foi
|
||||
o fato de eu estar estudando Hare em conjunto com C (só mencionei que a
|
||||
sintaxe da Hare é semelhante a C).</p>
|
||||
<h1 id="por-quê-estou-fazendo-isso">Por quê estou fazendo isso?</h1>
|
||||
<p>Bom, isso é algo que eu simplesmente esqueci de comentar no meu
|
||||
último post, estou fazendo isso por 2 motivos principais:</p>
|
||||
<p>As sintaxes são semelhantes, então posso pegar um conhecimento novo
|
||||
de uma e levar para outra; Ambas são linguagens low-level, com foco em
|
||||
alto desempenho e possuem manipulação manual de memória, então posso
|
||||
aprender esse conceito de forma prática. Claro que existem outros
|
||||
motivos para eu fazer algo nesse estilo, mas eu não vejo a necessidade
|
||||
de listar todos eles aqui. Afinal, já é algo “estranho” para um jovem da
|
||||
minha idade ter interesse em uma “linguagem defasada e insegura” como a
|
||||
C, ao invés de querer aprender algo como Python, Ruby ou Javascript.</p>
|
||||
<h1 id="existe-algum-outro-motivo">Existe algum outro motivo?</h1>
|
||||
<p>Óbviamente que sim. Aprender C/Hare é algo como um sonho que quero, e
|
||||
posso, tornar realidade. É algo que chega perto de uma romantização, um
|
||||
sentimento que dá vontade de correr atrás, de se esforçar para
|
||||
alcança-lo.</p>
|
||||
<p>Quase como você sonha em ter seu próprio carro, viver sozinho, ou
|
||||
viajar o mundo. Não é um sentimento fácil de por em palavras.</p>
|
||||
<h1 id="como-está-meu-progresso-até-agora">Como está meu progresso até
|
||||
agora?</h1>
|
||||
<p>Bom, eu iniciei meus estudos a pouquíssimo tempo, então ainda estou
|
||||
em meus estágios iniciais. Porém já aprendi alguns conceitos básicos
|
||||
como if statements, which loop, for loop, switch-case, structs e alguns
|
||||
types também (tanto em C quanto em Hare).</p>
|
||||
<p>Também comecei a fazer alguns programas extremamente simples só para
|
||||
fixar esses conceitos na minha cabeça, um exemplo desses programas é um
|
||||
programa que cria um arquivo vazio usando um nome que o usuário
|
||||
fornece.</p>
|
||||
<div class="sourceCode" id="cb1" data-org-language="C"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="dt">int</span> main<span class="op">()</span></span>
|
||||
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="op">{</span></span>
|
||||
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> <span class="dt">FILE</span> <span class="op">*</span>arq<span class="op">;</span></span>
|
||||
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a> <span class="dt">char</span> nome<span class="op">[</span><span class="dv">100</span><span class="op">];</span></span>
|
||||
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a></span>
|
||||
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a> printf<span class="op">(</span><span class="st">"Digite o nome do arquivo: "</span><span class="op">);</span></span>
|
||||
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a> scanf<span class="op">(</span><span class="st">"</span><span class="sc">%s</span><span class="st">"</span><span class="op">,</span> <span class="op">&</span>nome<span class="op">[</span><span class="dv">0</span><span class="op">]);</span></span>
|
||||
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a></span>
|
||||
<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> <span class="op">(</span>fopen<span class="op">(</span>nome<span class="op">,</span> <span class="st">"r"</span><span class="op">))</span></span>
|
||||
<span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a> <span class="op">{</span></span>
|
||||
<span id="cb1-11"><a href="#cb1-11" aria-hidden="true" tabindex="-1"></a> printf<span class="op">(</span><span class="st">"O arquivo já existe.</span><span class="sc">\n</span><span class="st">"</span><span class="op">);</span></span>
|
||||
<span id="cb1-12"><a href="#cb1-12" aria-hidden="true" tabindex="-1"></a> <span class="op">}</span></span>
|
||||
<span id="cb1-13"><a href="#cb1-13" aria-hidden="true" tabindex="-1"></a> <span class="cf">else</span></span>
|
||||
<span id="cb1-14"><a href="#cb1-14" aria-hidden="true" tabindex="-1"></a> <span class="op">{</span></span>
|
||||
<span id="cb1-15"><a href="#cb1-15" aria-hidden="true" tabindex="-1"></a> arq <span class="op">=</span> fopen<span class="op">(</span>nome<span class="op">,</span> <span class="st">"w"</span><span class="op">);</span></span>
|
||||
<span id="cb1-16"><a href="#cb1-16" aria-hidden="true" tabindex="-1"></a> <span class="op">}</span></span>
|
||||
<span id="cb1-17"><a href="#cb1-17" aria-hidden="true" tabindex="-1"></a><span class="op">}</span></span></code></pre></div>
|
||||
<pre class="hare"><code>use os;
|
||||
use bufio;
|
||||
use strings;
|
||||
|
||||
export fn main() void = {
|
||||
let arquivo = nomeDoArquivo();
|
||||
|
||||
if (os::exists(arquivo)) {
|
||||
fmt::println("Arquivo já existe.\n")!;
|
||||
} else {
|
||||
os::create(arquivo, 384)!;
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
fn nomeDoArquivo() str = {
|
||||
fmt::printf("Escreva o nome do arquivo.\n:")!;
|
||||
const inputUser = bufio::read_line(os::stdin)! as []u8;
|
||||
return strings::fromutf8(inputUser)!;
|
||||
};
|
||||
</code></pre>
|
||||
<h1 id="as-diferenças">As diferenças</h1>
|
||||
<p>Algo que já para notar nesses exemplos é que o código em Hare é um
|
||||
pouco maior que o código em C, o motivo disso é que a Hare tem um foco
|
||||
na manipulação de erros. O que faz com que você tenha não só ter plena
|
||||
noção do que deve ser feito em caso de algum erro, mas também dizer ao
|
||||
programa o que ele vai fazer em caso de erro.</p>
|
||||
<p>A consequência disso é ter um pouco mais de linhas de código
|
||||
necessárias e também mais símbolos para serem utilizados durante a
|
||||
escrita do programa.</p>
|
||||
<p>Apesar disso, eu acho a sintaxe da Hare mais legível que a C em
|
||||
alguns casos, como por exemplo na criação e utilização de structs.</p>
|
||||
<h1 id="fin"><em>Fin</em></h1>
|
||||
<p>Bem, isso é tudo o que eu tenho a dizer por agora.</p>
|
||||
<p>Até o próximo post!</p>
|
||||
</body>
|
||||
</html>
|
||||
519
posts/03-emacs.org.html
Normal file
519
posts/03-emacs.org.html
Normal file
|
|
@ -0,0 +1,519 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang xml:lang>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="generator" content="pandoc" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
<title>Emacs</title>
|
||||
<style>
|
||||
code{white-space: pre-wrap;}
|
||||
span.smallcaps{font-variant: small-caps;}
|
||||
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
||||
div.column{flex: auto; overflow-x: auto;}
|
||||
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||
|
||||
ul.task-list[class]{list-style: none;}
|
||||
ul.task-list li input[type="checkbox"] {
|
||||
font-size: inherit;
|
||||
width: 0.8em;
|
||||
margin: 0 0.8em 0.2em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||
|
||||
pre > code.sourceCode { white-space: pre; position: relative; }
|
||||
pre > code.sourceCode > span { line-height: 1.25; }
|
||||
pre > code.sourceCode > span:empty { height: 1.2em; }
|
||||
.sourceCode { overflow: visible; }
|
||||
code.sourceCode > span { color: inherit; text-decoration: inherit; }
|
||||
div.sourceCode { margin: 1em 0; }
|
||||
pre.sourceCode { margin: 0; }
|
||||
@media screen {
|
||||
div.sourceCode { overflow: auto; }
|
||||
}
|
||||
@media print {
|
||||
pre > code.sourceCode { white-space: pre-wrap; }
|
||||
pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
|
||||
}
|
||||
pre.numberSource code
|
||||
{ counter-reset: source-line 0; }
|
||||
pre.numberSource code > span
|
||||
{ position: relative; left: -4em; counter-increment: source-line; }
|
||||
pre.numberSource code > span > a:first-child::before
|
||||
{ content: counter(source-line);
|
||||
position: relative; left: -1em; text-align: right; vertical-align: baseline;
|
||||
border: none; display: inline-block;
|
||||
-webkit-touch-callout: none; -webkit-user-select: none;
|
||||
-khtml-user-select: none; -moz-user-select: none;
|
||||
-ms-user-select: none; user-select: none;
|
||||
padding: 0 4px; width: 4em;
|
||||
}
|
||||
pre.numberSource { margin-left: 3em; padding-left: 4px; }
|
||||
div.sourceCode
|
||||
{ color: #cccccc; background-color: #303030; }
|
||||
@media screen {
|
||||
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
|
||||
}
|
||||
code span.al { color: #ffcfaf; }
|
||||
code span.an { color: #7f9f7f; font-weight: bold; }
|
||||
code span.at { }
|
||||
code span.bn { color: #dca3a3; }
|
||||
code span.bu { }
|
||||
code span.cf { color: #f0dfaf; }
|
||||
code span.ch { color: #dca3a3; }
|
||||
code span.cn { color: #dca3a3; font-weight: bold; }
|
||||
code span.co { color: #7f9f7f; }
|
||||
code span.cv { color: #7f9f7f; font-weight: bold; }
|
||||
code span.do { color: #7f9f7f; }
|
||||
code span.dt { color: #dfdfbf; }
|
||||
code span.dv { color: #dcdccc; }
|
||||
code span.er { color: #c3bf9f; }
|
||||
code span.ex { }
|
||||
code span.fl { color: #c0bed1; }
|
||||
code span.fu { color: #efef8f; }
|
||||
code span.im { }
|
||||
code span.in { color: #7f9f7f; font-weight: bold; }
|
||||
code span.kw { color: #f0dfaf; }
|
||||
code span.op { color: #f0efd0; }
|
||||
code span.ot { color: #efef8f; }
|
||||
code span.pp { color: #ffcfaf; font-weight: bold; }
|
||||
code span.sc { color: #dca3a3; }
|
||||
code span.ss { color: #cc9393; }
|
||||
code span.st { color: #cc9393; }
|
||||
code span.va { }
|
||||
code span.vs { color: #cc9393; }
|
||||
code span.wa { color: #7f9f7f; font-weight: bold; }
|
||||
</style>
|
||||
<style type="text/css">:root {
|
||||
--level-1-bg: #230631;
|
||||
--level-1-fg: #b6a0ff;
|
||||
--level-2-bg: #2c0614;
|
||||
--level-2-fg: #f78fe7;
|
||||
--level-3-bg: #0f0e39;
|
||||
--level-3-fg: #2fafff;
|
||||
--background: #000000;
|
||||
--foreground: #ffffff;
|
||||
--background-alt: #181732;
|
||||
--accent: #f5aa80;
|
||||
--link: #00bcff;
|
||||
--mode-bar: #2a2a66;
|
||||
--mode-bar-accent: #00808f;
|
||||
--border: solid 1px var(--background-alt);
|
||||
}
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
height: 0px;
|
||||
}
|
||||
100% {
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
header > nav {
|
||||
background-color: var(--mode-bar);
|
||||
display: flex;
|
||||
padding: 5px 20px;
|
||||
justify-content: space-between;
|
||||
overflow-x: scroll;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
header > nav > ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li > a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
header > nav > ul > li > a:hover {
|
||||
background-color: var(--mode-bar-accent);
|
||||
}
|
||||
header > nav > ul {
|
||||
padding: 0;
|
||||
}
|
||||
header > nav {
|
||||
padding: 15px;
|
||||
font-size: medium;
|
||||
}
|
||||
p > code {
|
||||
color: var(--foreground);
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
.sourceCode, pre, code {
|
||||
background-color: #1a1a1a;
|
||||
padding: 3px;
|
||||
overflow-x: scroll;
|
||||
margin: 10px auto;
|
||||
}
|
||||
pre {
|
||||
min-height: 20px;
|
||||
}
|
||||
pre.sourceCode:hover::before {
|
||||
float: right;
|
||||
border: solid 2px var(--accent);
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
min-width: 32px;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
animation: 300ms slide-in both;
|
||||
}
|
||||
pre.c:hover::before {
|
||||
content: "C"
|
||||
}
|
||||
pre.bash:hover::before {
|
||||
content: "Bash"
|
||||
}
|
||||
pre.html:hover::before {
|
||||
content: "HTML"
|
||||
}
|
||||
pre.javascript:hover::before {
|
||||
content: "Javascript"
|
||||
}
|
||||
pre.css:hover::before {
|
||||
content: "CSS"
|
||||
}
|
||||
pre.lua:hover::before {
|
||||
content: "Lua"
|
||||
}
|
||||
pre.commonlisp:hover::before {
|
||||
content: "Lisp"
|
||||
}
|
||||
pre.cpp:hover::before {
|
||||
content: "C++"
|
||||
}
|
||||
pre.python:hover::before {
|
||||
content: "Python"
|
||||
}
|
||||
pre.org:hover::before {
|
||||
content: "Org-mode";
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
.title::before {
|
||||
content: "";
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.author {
|
||||
display: none;
|
||||
}
|
||||
.line-block {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
border-top: solid 3px var(--accent);
|
||||
border-bottom: solid 3px var(--accent);
|
||||
padding: 10px;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
#TOC {
|
||||
background-color: var(--background-alt);
|
||||
padding: 10px;
|
||||
}
|
||||
@media print {
|
||||
#TOC {
|
||||
display: none;
|
||||
}
|
||||
header > nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
position: relative;
|
||||
font-family: system-ui;
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding: 1em;
|
||||
}
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
article {
|
||||
max-width: 80ch;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
padding: 10px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--link);
|
||||
}
|
||||
a:hover {
|
||||
opacity: 80%;
|
||||
}
|
||||
hr {
|
||||
border: var(--border);
|
||||
border-bottom: none;
|
||||
}
|
||||
blockquote {
|
||||
background-color: var(--background-alt);
|
||||
color: var(--accent);
|
||||
border-left: solid 5px var(--accent);
|
||||
padding: 10px 20px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
blockquote > p > code {
|
||||
background-color: var(--link);
|
||||
color: var(--background);
|
||||
}
|
||||
blockquote > pre {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p, hr {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
ul, ol {
|
||||
list-style-position: inside;
|
||||
padding-inline-start: 1.5em;
|
||||
}
|
||||
ul > li {
|
||||
list-style: "- ";
|
||||
}
|
||||
h1, h2, h3 {
|
||||
margin: 1em 0;
|
||||
}
|
||||
h1, h1::before {
|
||||
content: "* ";
|
||||
background-color: var(--level-1-bg);
|
||||
color: var(--level-1-fg);
|
||||
}
|
||||
h2, h2::before {
|
||||
content: "** ";
|
||||
background-color: var(--level-2-bg);
|
||||
color: var(--level-2-fg);
|
||||
}
|
||||
h3, h3::before {
|
||||
content: "*** ";
|
||||
background-color: var(--level-3-bg);
|
||||
color: var(--level-3-fg);
|
||||
}
|
||||
img {
|
||||
max-height: 300px;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
}
|
||||
table, th, td {
|
||||
border: var(--border);
|
||||
padding: 5px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table {
|
||||
border: none;
|
||||
overflow: scroll;
|
||||
margin: 1em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
th, td {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
tr:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
tr:nth-of-type(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<article>
|
||||
<header id="title-block-header">
|
||||
<h1 class="title">Emacs</h1>
|
||||
</header>
|
||||
<nav id="TOC" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#emacs-que-saudades-que-estava-de-você" id="toc-emacs-que-saudades-que-estava-de-você">Emacs, que saudades que
|
||||
estava de você!</a></li>
|
||||
<li><a href="#org-mode-o-criador-de-sites-mais-prático-que-conheço" id="toc-org-mode-o-criador-de-sites-mais-prático-que-conheço">Org-mode,
|
||||
o criador de sites mais prático que conheço</a></li>
|
||||
<li><a href="#zero-javascript" id="toc-zero-javascript">Zero
|
||||
JavaScript</a></li>
|
||||
<li><a href="#quase-um-ssg-quase." id="toc-quase-um-ssg-quase.">Quase um
|
||||
SSG… Quase.</a></li>
|
||||
<li><a href="#outras-coisas-que-estão-no-meu-emacs" id="toc-outras-coisas-que-estão-no-meu-emacs">Outras coisas que estão no
|
||||
meu Emacs</a></li>
|
||||
<li><a href="#aos-poucos-estou-deixando-o-meu-setup-ser-apenas-um-ambiente-onde-eu-possa-usar-o-emacs" id="toc-aos-poucos-estou-deixando-o-meu-setup-ser-apenas-um-ambiente-onde-eu-possa-usar-o-emacs">Aos
|
||||
poucos, estou deixando o meu setup ser apenas um ambiente onde eu possa
|
||||
usar o Emacs</a></li>
|
||||
<li><a href="#fin" id="toc-fin"><em>Fin</em></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p>Olha só quem voltou! E mais uma vez com o site completamente
|
||||
mudado!</p>
|
||||
<p>Pois é, estou de volta, e dessa vez trago comigo algumas novidades em
|
||||
relação ao site e ao meu setup atual (spoiler: tá tudo no Emacs).</p>
|
||||
<h1 id="emacs-que-saudades-que-estava-de-você">Emacs, que saudades que
|
||||
estava de você!</h1>
|
||||
<p>A um tempo eu vim tendo essa vontade de voltar a usar o Emacs, mas a
|
||||
preguiça de ter que refazer a minha config do 0 era muito grande, até
|
||||
que bem, vamos dizer que o hiperfoco atacou e eu refiz a minha
|
||||
configuração de qualquer jeito.</p>
|
||||
<p>A maior diferença é que eu já tenho alguma experiência no assunto,
|
||||
então não tive muita dificuldade em fazer essa nova config. Posso
|
||||
inclusive dizer que esta é, até o momento, a melhor configuração que eu
|
||||
já fiz até agora.</p>
|
||||
<h1 id="org-mode-o-criador-de-sites-mais-prático-que-conheço">Org-mode,
|
||||
o criador de sites mais prático que conheço</h1>
|
||||
<p>Apesar de ter usado diversos SSG's nos últimos tempos, nenhum deles
|
||||
possui a praticidade de simplesmente gerar uma página HTML a partir de
|
||||
um buffer que esteja aberto no seu editor com a mesma facilidade que o
|
||||
Emacs junto do Org-mode conseguem ter.</p>
|
||||
<p>Esse site inteiro foi refeito utilizando essa ferramenta de gereção
|
||||
de sites nativa do Emacs.</p>
|
||||
<h1 id="zero-javascript">Zero JavaScript</h1>
|
||||
<p>Mais uma vez, estou com 0 JS presente neste site, o que por si só já
|
||||
é uma conquista e tanto, afinal, quanto menos JS, melhor.</p>
|
||||
<p>E não é porque eu não tenho JS que eu perco coisas como
|
||||
<em>Table-of-contents</em> ou <em>Syntax-highlighting</em>, nada disso,
|
||||
ambos são coisas nativas do org-mode, feitos para serem utilizados e
|
||||
abusados.</p>
|
||||
<p>Ele também é o melhor highlighter que eu já usei, porque literalmente
|
||||
qualquer coisa que eu tenha um syntax highlight no Emacs fica com o
|
||||
mesmo syntax-highlight no site gerado.</p>
|
||||
<h1 id="quase-um-ssg-quase.">Quase um SSG… Quase.</h1>
|
||||
<p>Apesar de tudo, o org-mode não vem com um SSG, essa função na
|
||||
realidade é uma ferramenta de publicação de artigos, tanto que o nome do
|
||||
pacote é ox-<strong>publish</strong>. Ainda assim, com um script simples
|
||||
e um pouco de elisp, você consegue ter um pouco do que um SSG consegue
|
||||
te oferecer.</p>
|
||||
<p>E quando eu falo um pouco, eu não tô de sacanagem, isso é tudo o que
|
||||
eu preciso para ter meu site na forma em que eu quero:</p>
|
||||
<p><em>Configurando o ox-publish e automatizando o processo de criação
|
||||
de HTML.</em></p>
|
||||
<div class="sourceCode" id="cb1" data-org-language="emacs-lisp"><pre class="sourceCode commonlisp"><code class="sourceCode commonlisp"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a>(<span class="kw">require</span> <span class="dt">'ox-publish</span>)</span>
|
||||
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a></span>
|
||||
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a>(delete-directory <span class="st">"./public"</span> <span class="kw">t</span>)</span>
|
||||
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a></span>
|
||||
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a>(<span class="kw">setq</span> org-html-preamble</span>
|
||||
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a> (concat</span>
|
||||
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a> <span class="st">"<header>"</span></span>
|
||||
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a> <span class="st">"<nav>"</span></span>
|
||||
<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a> <span class="st">"<ul>"</span></span>
|
||||
<span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a> <span class="st">"<li><a href=</span><span class="sc">\"</span><span class="st">/</span><span class="sc">\"</span><span class="st">>Início</a></li>"</span></span>
|
||||
<span id="cb1-11"><a href="#cb1-11" aria-hidden="true" tabindex="-1"></a> <span class="st">"</ul>"</span></span>
|
||||
<span id="cb1-12"><a href="#cb1-12" aria-hidden="true" tabindex="-1"></a> <span class="st">"<ul>"</span></span>
|
||||
<span id="cb1-13"><a href="#cb1-13" aria-hidden="true" tabindex="-1"></a> <span class="st">"<li><a href=</span><span class="sc">\"</span><span class="st">/sitemap.html</span><span class="sc">\"</span><span class="st">>Sitemap</a></li>"</span></span>
|
||||
<span id="cb1-14"><a href="#cb1-14" aria-hidden="true" tabindex="-1"></a> <span class="st">"</ul>"</span></span>
|
||||
<span id="cb1-15"><a href="#cb1-15" aria-hidden="true" tabindex="-1"></a> <span class="st">"</nav>"</span></span>
|
||||
<span id="cb1-16"><a href="#cb1-16" aria-hidden="true" tabindex="-1"></a> <span class="st">"</header>"</span>))</span>
|
||||
<span id="cb1-17"><a href="#cb1-17" aria-hidden="true" tabindex="-1"></a></span>
|
||||
<span id="cb1-18"><a href="#cb1-18" aria-hidden="true" tabindex="-1"></a>(<span class="kw">setq</span> org-html-postamble</span>
|
||||
<span id="cb1-19"><a href="#cb1-19" aria-hidden="true" tabindex="-1"></a> (concat</span>
|
||||
<span id="cb1-20"><a href="#cb1-20" aria-hidden="true" tabindex="-1"></a> <span class="st">"<header>"</span></span>
|
||||
<span id="cb1-21"><a href="#cb1-21" aria-hidden="true" tabindex="-1"></a> <span class="st">"<nav>"</span></span>
|
||||
<span id="cb1-22"><a href="#cb1-22" aria-hidden="true" tabindex="-1"></a> <span class="st">"<ul>"</span></span>
|
||||
<span id="cb1-23"><a href="#cb1-23" aria-hidden="true" tabindex="-1"></a> <span class="st">"<li>U:---</li>"</span></span>
|
||||
<span id="cb1-24"><a href="#cb1-24" aria-hidden="true" tabindex="-1"></a> <span class="st">"<li>%t.org</li>"</span></span>
|
||||
<span id="cb1-25"><a href="#cb1-25" aria-hidden="true" tabindex="-1"></a> <span class="st">"<li>-</li>"</span></span>
|
||||
<span id="cb1-26"><a href="#cb1-26" aria-hidden="true" tabindex="-1"></a> <span class="st">"<li>%C</li>"</span></span>
|
||||
<span id="cb1-27"><a href="#cb1-27" aria-hidden="true" tabindex="-1"></a> <span class="st">"<li>(Elisp<span style=</span><span class="sc">\"</span><span class="st">color: #d0bc00</span><span class="sc">\"</span><span class="st">>/d</span> ARev WK company)</li>"</span></span>
|
||||
<span id="cb1-28"><a href="#cb1-28" aria-hidden="true" tabindex="-1"></a> <span class="st">"</ul>"</span></span>
|
||||
<span id="cb1-29"><a href="#cb1-29" aria-hidden="true" tabindex="-1"></a> <span class="st">"<ul>"</span></span>
|
||||
<span id="cb1-30"><a href="#cb1-30" aria-hidden="true" tabindex="-1"></a> <span class="st">"<li><a href=</span><span class="sc">\"</span><span class="st">/</span><span class="sc">\"</span><span class="st">>Início</a></li>"</span></span>
|
||||
<span id="cb1-31"><a href="#cb1-31" aria-hidden="true" tabindex="-1"></a> <span class="st">"<li><a href=</span><span class="sc">\"</span><span class="st">/sitemap.html</span><span class="sc">\"</span><span class="st">>Sitemap</a></li>"</span></span>
|
||||
<span id="cb1-32"><a href="#cb1-32" aria-hidden="true" tabindex="-1"></a> <span class="st">"</ul>"</span></span>
|
||||
<span id="cb1-33"><a href="#cb1-33" aria-hidden="true" tabindex="-1"></a> <span class="st">"</nav>"</span></span>
|
||||
<span id="cb1-34"><a href="#cb1-34" aria-hidden="true" tabindex="-1"></a> <span class="st">"</header>"</span>))</span>
|
||||
<span id="cb1-35"><a href="#cb1-35" aria-hidden="true" tabindex="-1"></a></span>
|
||||
<span id="cb1-36"><a href="#cb1-36" aria-hidden="true" tabindex="-1"></a>(<span class="kw">setq</span> org-html-head <span class="st">"<link rel=icon type=</span><span class="sc">\"</span><span class="st">image/webp</span><span class="sc">\"</span><span class="st"> href=</span><span class="sc">\"</span><span class="st">/assets/fav.webp</span><span class="sc">\"</span><span class="st">> <link rel=stylesheet href=</span><span class="sc">\"</span><span class="st">/assets/css/main.css</span><span class="sc">\"</span><span class="st"> />"</span></span>
|
||||
<span id="cb1-37"><a href="#cb1-37" aria-hidden="true" tabindex="-1"></a> org-html-head-include-default-style <span class="kw">nil</span></span>
|
||||
<span id="cb1-38"><a href="#cb1-38" aria-hidden="true" tabindex="-1"></a> org-html-head-include-scripts <span class="kw">nil</span></span>
|
||||
<span id="cb1-39"><a href="#cb1-39" aria-hidden="true" tabindex="-1"></a> org-html-use-infojs <span class="kw">nil</span></span>
|
||||
<span id="cb1-40"><a href="#cb1-40" aria-hidden="true" tabindex="-1"></a> org-html-doctype <span class="st">"html5"</span></span>
|
||||
<span id="cb1-41"><a href="#cb1-41" aria-hidden="true" tabindex="-1"></a> org-html-html5-fancy <span class="kw">t</span>)</span>
|
||||
<span id="cb1-42"><a href="#cb1-42" aria-hidden="true" tabindex="-1"></a></span>
|
||||
<span id="cb1-43"><a href="#cb1-43" aria-hidden="true" tabindex="-1"></a>(<span class="kw">setq</span> org-publish-project-alist</span>
|
||||
<span id="cb1-44"><a href="#cb1-44" aria-hidden="true" tabindex="-1"></a> (<span class="kw">list</span></span>
|
||||
<span id="cb1-45"><a href="#cb1-45" aria-hidden="true" tabindex="-1"></a> (<span class="kw">list</span> <span class="st">"Tukain's Blog"</span></span>
|
||||
<span id="cb1-46"><a href="#cb1-46" aria-hidden="true" tabindex="-1"></a> :base-directory <span class="st">"./content"</span></span>
|
||||
<span id="cb1-47"><a href="#cb1-47" aria-hidden="true" tabindex="-1"></a> :auto-sitemap <span class="kw">t</span></span>
|
||||
<span id="cb1-48"><a href="#cb1-48" aria-hidden="true" tabindex="-1"></a> :sitemap-title <span class="st">"Sitemap"</span></span>
|
||||
<span id="cb1-49"><a href="#cb1-49" aria-hidden="true" tabindex="-1"></a> :recursive <span class="kw">t</span></span>
|
||||
<span id="cb1-50"><a href="#cb1-50" aria-hidden="true" tabindex="-1"></a> :htmlized-source <span class="kw">t</span></span>
|
||||
<span id="cb1-51"><a href="#cb1-51" aria-hidden="true" tabindex="-1"></a> :publishing-directory <span class="st">"./public"</span></span>
|
||||
<span id="cb1-52"><a href="#cb1-52" aria-hidden="true" tabindex="-1"></a> :section-numbers <span class="kw">nil</span></span>
|
||||
<span id="cb1-53"><a href="#cb1-53" aria-hidden="true" tabindex="-1"></a> :language <span class="st">"pt-br"</span></span>
|
||||
<span id="cb1-54"><a href="#cb1-54" aria-hidden="true" tabindex="-1"></a> :publishing-function <span class="dt">'org-html-publish-to-html</span>)))</span>
|
||||
<span id="cb1-55"><a href="#cb1-55" aria-hidden="true" tabindex="-1"></a></span>
|
||||
<span id="cb1-56"><a href="#cb1-56" aria-hidden="true" tabindex="-1"></a>(org-publish-all <span class="kw">t</span>)</span>
|
||||
<span id="cb1-57"><a href="#cb1-57" aria-hidden="true" tabindex="-1"></a></span>
|
||||
<span id="cb1-58"><a href="#cb1-58" aria-hidden="true" tabindex="-1"></a>(copy-directory <span class="st">"./assets"</span> <span class="st">"./public/assets"</span>)</span></code></pre></div>
|
||||
<p><em>Um script para executar os comandos necessários para gerar o
|
||||
site</em></p>
|
||||
<div class="sourceCode" id="cb2"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="co">#!/bin/sh</span></span>
|
||||
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a></span>
|
||||
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a><span class="fu">mkdir</span> <span class="at">-p</span> public <span class="kw">&&</span> <span class="ex">emacs</span> <span class="at">-x</span> build.el <span class="kw">&&</span> <span class="fu">cp</span> <span class="at">-r</span> assets/ public/</span></code></pre></div>
|
||||
<p>Depois disso, o único trabalho que eu tenho é de fazer um artigo e
|
||||
listá-lo na minha homepage, e pronto!</p>
|
||||
<h1 id="outras-coisas-que-estão-no-meu-emacs">Outras coisas que estão no
|
||||
meu Emacs</h1>
|
||||
<p>É mais que claro que o Emacs é conhecido por seus usuários que, em
|
||||
boa parte dos casos, transformam o Emacs em um sistema operacional
|
||||
praticamente. E eu não sou muito diferente deles 🤓.</p>
|
||||
<p>Atualmente eu já configurei o Emacs o suficiente para substituir a
|
||||
minha configuração do Neovim, e também configurei coisas como:</p>
|
||||
<ul>
|
||||
<li>Um servidor HTTP (para visualizar o meu site localmente)</li>
|
||||
<li>Um agente PGP (EasyPG).</li>
|
||||
<li>Um cliente de email (Gnus)</li>
|
||||
<li>Uma interface para o Git (Magit)</li>
|
||||
<li>Um leitor de feeds RSS (Elfeed)</li>
|
||||
</ul>
|
||||
<p>Também estou vendo como configurar um cliente Jabber (XMPP) e vou
|
||||
configurar o Erc (o cliente IRC nativo do Emacs). Há também outras
|
||||
coisas que eu quero fazer, mas não acho que seja necessário falar sobre
|
||||
elas, afinal já estou tagarelando demais.</p>
|
||||
<h1 id="aos-poucos-estou-deixando-o-meu-setup-ser-apenas-um-ambiente-onde-eu-possa-usar-o-emacs">Aos
|
||||
poucos, estou deixando o meu setup ser apenas um ambiente onde eu possa
|
||||
usar o Emacs</h1>
|
||||
<p>Eu ainda não iniciei o meu arco Uchirra da vida e saí eliminando meus
|
||||
programas, ainda.</p>
|
||||
<p>Eu já tenho em mente o que eu quero fazer e como eu vou fazer para
|
||||
conseguir transformar o meu setup atual em algo que serve apenas para
|
||||
acomodar o Emacs. Alguns programas que eu posso remover, por exemplo,
|
||||
são o Lazygit (Porque eu já tenho o Magit) e o lf (Porque o Emacs vem
|
||||
com o Dired).</p>
|
||||
<p>Mas vou deixar para fazer isso outra hora, afinal de contas isso vai
|
||||
tomar um pouco do meu tempo para poder concluir.</p>
|
||||
<h1 id="fin"><em>Fin</em></h1>
|
||||
<p>Enfim, acho que já é hora de eu para de ficar tagarelando.</p>
|
||||
<p>Te vejo no próximo post!</p>
|
||||
</body>
|
||||
</html>
|
||||
402
posts/04-emacs-parte-2.org.html
Normal file
402
posts/04-emacs-parte-2.org.html
Normal file
File diff suppressed because one or more lines are too long
433
posts/05-fiz-meu-próprio-ssg.org.html
Normal file
433
posts/05-fiz-meu-próprio-ssg.org.html
Normal file
|
|
@ -0,0 +1,433 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang xml:lang>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="generator" content="pandoc" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
<title>Blog.sh, o meu próprio SSG</title>
|
||||
<style>
|
||||
code{white-space: pre-wrap;}
|
||||
span.smallcaps{font-variant: small-caps;}
|
||||
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
||||
div.column{flex: auto; overflow-x: auto;}
|
||||
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||
|
||||
ul.task-list[class]{list-style: none;}
|
||||
ul.task-list li input[type="checkbox"] {
|
||||
font-size: inherit;
|
||||
width: 0.8em;
|
||||
margin: 0 0.8em 0.2em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||
|
||||
pre > code.sourceCode { white-space: pre; position: relative; }
|
||||
pre > code.sourceCode > span { line-height: 1.25; }
|
||||
pre > code.sourceCode > span:empty { height: 1.2em; }
|
||||
.sourceCode { overflow: visible; }
|
||||
code.sourceCode > span { color: inherit; text-decoration: inherit; }
|
||||
div.sourceCode { margin: 1em 0; }
|
||||
pre.sourceCode { margin: 0; }
|
||||
@media screen {
|
||||
div.sourceCode { overflow: auto; }
|
||||
}
|
||||
@media print {
|
||||
pre > code.sourceCode { white-space: pre-wrap; }
|
||||
pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
|
||||
}
|
||||
pre.numberSource code
|
||||
{ counter-reset: source-line 0; }
|
||||
pre.numberSource code > span
|
||||
{ position: relative; left: -4em; counter-increment: source-line; }
|
||||
pre.numberSource code > span > a:first-child::before
|
||||
{ content: counter(source-line);
|
||||
position: relative; left: -1em; text-align: right; vertical-align: baseline;
|
||||
border: none; display: inline-block;
|
||||
-webkit-touch-callout: none; -webkit-user-select: none;
|
||||
-khtml-user-select: none; -moz-user-select: none;
|
||||
-ms-user-select: none; user-select: none;
|
||||
padding: 0 4px; width: 4em;
|
||||
}
|
||||
pre.numberSource { margin-left: 3em; padding-left: 4px; }
|
||||
div.sourceCode
|
||||
{ color: #cccccc; background-color: #303030; }
|
||||
@media screen {
|
||||
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
|
||||
}
|
||||
code span.al { color: #ffcfaf; }
|
||||
code span.an { color: #7f9f7f; font-weight: bold; }
|
||||
code span.at { }
|
||||
code span.bn { color: #dca3a3; }
|
||||
code span.bu { }
|
||||
code span.cf { color: #f0dfaf; }
|
||||
code span.ch { color: #dca3a3; }
|
||||
code span.cn { color: #dca3a3; font-weight: bold; }
|
||||
code span.co { color: #7f9f7f; }
|
||||
code span.cv { color: #7f9f7f; font-weight: bold; }
|
||||
code span.do { color: #7f9f7f; }
|
||||
code span.dt { color: #dfdfbf; }
|
||||
code span.dv { color: #dcdccc; }
|
||||
code span.er { color: #c3bf9f; }
|
||||
code span.ex { }
|
||||
code span.fl { color: #c0bed1; }
|
||||
code span.fu { color: #efef8f; }
|
||||
code span.im { }
|
||||
code span.in { color: #7f9f7f; font-weight: bold; }
|
||||
code span.kw { color: #f0dfaf; }
|
||||
code span.op { color: #f0efd0; }
|
||||
code span.ot { color: #efef8f; }
|
||||
code span.pp { color: #ffcfaf; font-weight: bold; }
|
||||
code span.sc { color: #dca3a3; }
|
||||
code span.ss { color: #cc9393; }
|
||||
code span.st { color: #cc9393; }
|
||||
code span.va { }
|
||||
code span.vs { color: #cc9393; }
|
||||
code span.wa { color: #7f9f7f; font-weight: bold; }
|
||||
</style>
|
||||
<style type="text/css">:root {
|
||||
--level-1-bg: #230631;
|
||||
--level-1-fg: #b6a0ff;
|
||||
--level-2-bg: #2c0614;
|
||||
--level-2-fg: #f78fe7;
|
||||
--level-3-bg: #0f0e39;
|
||||
--level-3-fg: #2fafff;
|
||||
--background: #000000;
|
||||
--foreground: #ffffff;
|
||||
--background-alt: #181732;
|
||||
--accent: #f5aa80;
|
||||
--link: #00bcff;
|
||||
--mode-bar: #2a2a66;
|
||||
--mode-bar-accent: #00808f;
|
||||
--border: solid 1px var(--background-alt);
|
||||
}
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
height: 0px;
|
||||
}
|
||||
100% {
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
header > nav {
|
||||
background-color: var(--mode-bar);
|
||||
display: flex;
|
||||
padding: 5px 20px;
|
||||
justify-content: space-between;
|
||||
overflow-x: scroll;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
header > nav > ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li > a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
header > nav > ul > li > a:hover {
|
||||
background-color: var(--mode-bar-accent);
|
||||
}
|
||||
header > nav > ul {
|
||||
padding: 0;
|
||||
}
|
||||
header > nav {
|
||||
padding: 15px;
|
||||
font-size: medium;
|
||||
}
|
||||
p > code {
|
||||
color: var(--foreground);
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
.sourceCode, pre, code {
|
||||
background-color: #1a1a1a;
|
||||
padding: 3px;
|
||||
overflow-x: scroll;
|
||||
margin: 10px auto;
|
||||
}
|
||||
pre {
|
||||
min-height: 20px;
|
||||
}
|
||||
pre.sourceCode:hover::before {
|
||||
float: right;
|
||||
border: solid 2px var(--accent);
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
min-width: 32px;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
animation: 300ms slide-in both;
|
||||
}
|
||||
pre.c:hover::before {
|
||||
content: "C"
|
||||
}
|
||||
pre.bash:hover::before {
|
||||
content: "Bash"
|
||||
}
|
||||
pre.html:hover::before {
|
||||
content: "HTML"
|
||||
}
|
||||
pre.javascript:hover::before {
|
||||
content: "Javascript"
|
||||
}
|
||||
pre.css:hover::before {
|
||||
content: "CSS"
|
||||
}
|
||||
pre.lua:hover::before {
|
||||
content: "Lua"
|
||||
}
|
||||
pre.commonlisp:hover::before {
|
||||
content: "Lisp"
|
||||
}
|
||||
pre.cpp:hover::before {
|
||||
content: "C++"
|
||||
}
|
||||
pre.python:hover::before {
|
||||
content: "Python"
|
||||
}
|
||||
pre.org:hover::before {
|
||||
content: "Org-mode";
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
.title::before {
|
||||
content: "";
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.author {
|
||||
display: none;
|
||||
}
|
||||
.line-block {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
border-top: solid 3px var(--accent);
|
||||
border-bottom: solid 3px var(--accent);
|
||||
padding: 10px;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
#TOC {
|
||||
background-color: var(--background-alt);
|
||||
padding: 10px;
|
||||
}
|
||||
@media print {
|
||||
#TOC {
|
||||
display: none;
|
||||
}
|
||||
header > nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
position: relative;
|
||||
font-family: system-ui;
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding: 1em;
|
||||
}
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
article {
|
||||
max-width: 80ch;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
padding: 10px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--link);
|
||||
}
|
||||
a:hover {
|
||||
opacity: 80%;
|
||||
}
|
||||
hr {
|
||||
border: var(--border);
|
||||
border-bottom: none;
|
||||
}
|
||||
blockquote {
|
||||
background-color: var(--background-alt);
|
||||
color: var(--accent);
|
||||
border-left: solid 5px var(--accent);
|
||||
padding: 10px 20px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
blockquote > p > code {
|
||||
background-color: var(--link);
|
||||
color: var(--background);
|
||||
}
|
||||
blockquote > pre {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p, hr {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
ul, ol {
|
||||
list-style-position: inside;
|
||||
padding-inline-start: 1.5em;
|
||||
}
|
||||
ul > li {
|
||||
list-style: "- ";
|
||||
}
|
||||
h1, h2, h3 {
|
||||
margin: 1em 0;
|
||||
}
|
||||
h1, h1::before {
|
||||
content: "* ";
|
||||
background-color: var(--level-1-bg);
|
||||
color: var(--level-1-fg);
|
||||
}
|
||||
h2, h2::before {
|
||||
content: "** ";
|
||||
background-color: var(--level-2-bg);
|
||||
color: var(--level-2-fg);
|
||||
}
|
||||
h3, h3::before {
|
||||
content: "*** ";
|
||||
background-color: var(--level-3-bg);
|
||||
color: var(--level-3-fg);
|
||||
}
|
||||
img {
|
||||
max-height: 300px;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
}
|
||||
table, th, td {
|
||||
border: var(--border);
|
||||
padding: 5px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table {
|
||||
border: none;
|
||||
overflow: scroll;
|
||||
margin: 1em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
th, td {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
tr:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
tr:nth-of-type(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<article>
|
||||
<header id="title-block-header">
|
||||
<h1 class="title">Blog.sh, o meu próprio SSG</h1>
|
||||
</header>
|
||||
<nav id="TOC" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#geração-de-site-rápida-pra-k7" id="toc-geração-de-site-rápida-pra-k7">Geração de site rápida pra
|
||||
k7</a></li>
|
||||
<li><a href="#por-debaixo-dos-panos" id="toc-por-debaixo-dos-panos">Por
|
||||
debaixo dos panos</a></li>
|
||||
<li><a href="#por-que" id="toc-por-que">Por que?</a></li>
|
||||
<li><a href="#fin" id="toc-fin"><em>Fin</em></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p>Dos produtores de "Ovorefazermeusaite", vêm aí "E se eu fizer meu
|
||||
próprio gerador de sites?"!</p>
|
||||
<p>Agora falando sério, eu realmente fiz o meu próprio SSG (Static Site
|
||||
Generator).</p>
|
||||
<p>Ele não é nada demais, na realidade ele não é muito diferente dos
|
||||
scripts que eu fazia para conseguir criar um post novo de forma mais
|
||||
rápida, a diferença fica só na sofisticação do script e um pouco da
|
||||
forma em que ele opera.</p>
|
||||
<h1 id="geração-de-site-rápida-pra-k7">Geração de site rápida pra
|
||||
k7</h1>
|
||||
<p>Uma coisa que é extremamente notável é a diferença na hora de fazer a
|
||||
geração do site. É simplesmente absurdo. É como comparar a velocidade de
|
||||
um jogo feito em C, para um feito em JavaScript.</p>
|
||||
<p>No Emacs, a geração do site feito em org-mode leva uma coisa de 2 a 4
|
||||
segundos, o que é relativamente rápido, porém, o meu script leva
|
||||
aproximadamente 0.071 segundos para fazer a mesma coisa.</p>
|
||||
<p>Tudo bem, eu não tenho uma tabela de conteúdo e nem o syntax
|
||||
highlighting, porém, essas são coisas que eu estou disposto a descartar
|
||||
se significar que eu vou ter uma geração de páginas dezenas de vezes
|
||||
mais rápida.</p>
|
||||
<h1 id="por-debaixo-dos-panos">Por debaixo dos panos</h1>
|
||||
<p>O script possui um comando que cuida da criação da estrutura de
|
||||
arquivos e um que "compila" o site com base nessa estrutura. Como você
|
||||
faz para usar essa estrutura de arquivos e quais as regras impostas pelo
|
||||
script podem ser achadas no readme que é gerado junto do website</p>
|
||||
<p>Todos os arquivos dentro do diretório content são lidos pelo smu,
|
||||
programa que é utilizado para converter um texto no estilo Markdown para
|
||||
HTML.</p>
|
||||
<p>O smu não tem suporte para tudo o que o Markdown tem a oferecer,
|
||||
porém ele aceita o uso de tags HTML, então tudo o que o smu não tiver
|
||||
suporte pode ser substituído por uma tag.</p>
|
||||
<h1 id="por-que">Por que?</h1>
|
||||
<p>Eu fiz isso puramente para ver se eu conseguiria fazer um SSG, e, se
|
||||
tratando de funcionalidade básica, eu consegui sem nenhum problema.</p>
|
||||
<p>Mas um outro ponto que me fez fazer isso foi o Neovim… Olha, eu não
|
||||
sei se isso é algum tipo de apego ou algo do gênero, mas eu simplesmente
|
||||
fiquei com saudades de usar o meu Neovim. A configuração que eu tenho é
|
||||
equivalente à minha configuração do Emacs, não em todos os aspectos, mas
|
||||
quando se trata de edição de texto/código, ambos são quase os mesmos,
|
||||
porém o Neovim ainda leva a vantagem, porque o Neovim tem suporte ao LSP
|
||||
(Language Server Protocol), o que faz com que o auto-complete do Neovim
|
||||
seja muito mais versátil e preciso do que usar o company-mode no
|
||||
Emacs.</p>
|
||||
<p>Outra coisa que eu consigo fazer agora que eu fiz o meu próprio SSG é
|
||||
usar ele em conjunto com o Neovim ou qualquer outro editor de texto que
|
||||
eu queira, basta eu salvar o arquivo e digitar o comando:</p>
|
||||
<div class="sourceCode" id="cb1"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ex">blog.sh</span> build</span></code></pre></div>
|
||||
<p>E na realidade eu nem vou precisar digitar esse comando, eu já fiz um
|
||||
outro comando que é um equivalente ao hugo serve da vida. Tudo o que eu
|
||||
preciso fazer é digitar</p>
|
||||
<div class="sourceCode" id="cb2"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="ex">blog.sh</span> serve</span></code></pre></div>
|
||||
<p>E isso vai abrir um servidor HTTP usando o <code class="verbatim">python -m http.server</code> e também vai executar o
|
||||
comando <code class="verbatim">entr</code>, que serve para "ficar de
|
||||
olho em mudanças", e sempre que o <code class="verbatim">entr</code>
|
||||
notar alguma mudança em algum arquivo do diretório content ele mesmo
|
||||
executa o <code class="verbatim">blog.sh build</code> e atualiza as
|
||||
páginas.</p>
|
||||
<p>Tudo o que eu preciso fazer agora é ficar de olho em qualquer bug que
|
||||
possa aparecer.</p>
|
||||
<h1 id="fin"><em>Fin</em></h1>
|
||||
<p>Enfim, é isso o que eu tinha para falar por agora.</p>
|
||||
<p>Te vejo no próximo post!</p>
|
||||
</body>
|
||||
</html>
|
||||
374
posts/06-proton.org.html
Normal file
374
posts/06-proton.org.html
Normal file
|
|
@ -0,0 +1,374 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang xml:lang>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="generator" content="pandoc" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
<title>Tô usando o Proton</title>
|
||||
<style>
|
||||
code{white-space: pre-wrap;}
|
||||
span.smallcaps{font-variant: small-caps;}
|
||||
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
||||
div.column{flex: auto; overflow-x: auto;}
|
||||
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||
|
||||
ul.task-list[class]{list-style: none;}
|
||||
ul.task-list li input[type="checkbox"] {
|
||||
font-size: inherit;
|
||||
width: 0.8em;
|
||||
margin: 0 0.8em 0.2em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||
</style>
|
||||
<style type="text/css">:root {
|
||||
--level-1-bg: #230631;
|
||||
--level-1-fg: #b6a0ff;
|
||||
--level-2-bg: #2c0614;
|
||||
--level-2-fg: #f78fe7;
|
||||
--level-3-bg: #0f0e39;
|
||||
--level-3-fg: #2fafff;
|
||||
--background: #000000;
|
||||
--foreground: #ffffff;
|
||||
--background-alt: #181732;
|
||||
--accent: #f5aa80;
|
||||
--link: #00bcff;
|
||||
--mode-bar: #2a2a66;
|
||||
--mode-bar-accent: #00808f;
|
||||
--border: solid 1px var(--background-alt);
|
||||
}
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
height: 0px;
|
||||
}
|
||||
100% {
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
header > nav {
|
||||
background-color: var(--mode-bar);
|
||||
display: flex;
|
||||
padding: 5px 20px;
|
||||
justify-content: space-between;
|
||||
overflow-x: scroll;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
header > nav > ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li > a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
header > nav > ul > li > a:hover {
|
||||
background-color: var(--mode-bar-accent);
|
||||
}
|
||||
header > nav > ul {
|
||||
padding: 0;
|
||||
}
|
||||
header > nav {
|
||||
padding: 15px;
|
||||
font-size: medium;
|
||||
}
|
||||
p > code {
|
||||
color: var(--foreground);
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
.sourceCode, pre, code {
|
||||
background-color: #1a1a1a;
|
||||
padding: 3px;
|
||||
overflow-x: scroll;
|
||||
margin: 10px auto;
|
||||
}
|
||||
pre {
|
||||
min-height: 20px;
|
||||
}
|
||||
pre.sourceCode:hover::before {
|
||||
float: right;
|
||||
border: solid 2px var(--accent);
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
min-width: 32px;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
animation: 300ms slide-in both;
|
||||
}
|
||||
pre.c:hover::before {
|
||||
content: "C"
|
||||
}
|
||||
pre.bash:hover::before {
|
||||
content: "Bash"
|
||||
}
|
||||
pre.html:hover::before {
|
||||
content: "HTML"
|
||||
}
|
||||
pre.javascript:hover::before {
|
||||
content: "Javascript"
|
||||
}
|
||||
pre.css:hover::before {
|
||||
content: "CSS"
|
||||
}
|
||||
pre.lua:hover::before {
|
||||
content: "Lua"
|
||||
}
|
||||
pre.commonlisp:hover::before {
|
||||
content: "Lisp"
|
||||
}
|
||||
pre.cpp:hover::before {
|
||||
content: "C++"
|
||||
}
|
||||
pre.python:hover::before {
|
||||
content: "Python"
|
||||
}
|
||||
pre.org:hover::before {
|
||||
content: "Org-mode";
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
.title::before {
|
||||
content: "";
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.author {
|
||||
display: none;
|
||||
}
|
||||
.line-block {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
border-top: solid 3px var(--accent);
|
||||
border-bottom: solid 3px var(--accent);
|
||||
padding: 10px;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
#TOC {
|
||||
background-color: var(--background-alt);
|
||||
padding: 10px;
|
||||
}
|
||||
@media print {
|
||||
#TOC {
|
||||
display: none;
|
||||
}
|
||||
header > nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
position: relative;
|
||||
font-family: system-ui;
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding: 1em;
|
||||
}
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
article {
|
||||
max-width: 80ch;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
padding: 10px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--link);
|
||||
}
|
||||
a:hover {
|
||||
opacity: 80%;
|
||||
}
|
||||
hr {
|
||||
border: var(--border);
|
||||
border-bottom: none;
|
||||
}
|
||||
blockquote {
|
||||
background-color: var(--background-alt);
|
||||
color: var(--accent);
|
||||
border-left: solid 5px var(--accent);
|
||||
padding: 10px 20px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
blockquote > p > code {
|
||||
background-color: var(--link);
|
||||
color: var(--background);
|
||||
}
|
||||
blockquote > pre {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p, hr {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
ul, ol {
|
||||
list-style-position: inside;
|
||||
padding-inline-start: 1.5em;
|
||||
}
|
||||
ul > li {
|
||||
list-style: "- ";
|
||||
}
|
||||
h1, h2, h3 {
|
||||
margin: 1em 0;
|
||||
}
|
||||
h1, h1::before {
|
||||
content: "* ";
|
||||
background-color: var(--level-1-bg);
|
||||
color: var(--level-1-fg);
|
||||
}
|
||||
h2, h2::before {
|
||||
content: "** ";
|
||||
background-color: var(--level-2-bg);
|
||||
color: var(--level-2-fg);
|
||||
}
|
||||
h3, h3::before {
|
||||
content: "*** ";
|
||||
background-color: var(--level-3-bg);
|
||||
color: var(--level-3-fg);
|
||||
}
|
||||
img {
|
||||
max-height: 300px;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
}
|
||||
table, th, td {
|
||||
border: var(--border);
|
||||
padding: 5px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table {
|
||||
border: none;
|
||||
overflow: scroll;
|
||||
margin: 1em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
th, td {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
tr:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
tr:nth-of-type(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<article>
|
||||
<header id="title-block-header">
|
||||
<h1 class="title">Tô usando o Proton</h1>
|
||||
</header>
|
||||
<nav id="TOC" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#por-que" id="toc-por-que">Por que?</a></li>
|
||||
<li><a href="#mudanças-no-armazenamento" id="toc-mudanças-no-armazenamento">Mudanças no armazenamento</a></li>
|
||||
<li><a href="#uma-senha-praticamente-impossível-de-digitar-para-a-minha-conta-do-google" id="toc-uma-senha-praticamente-impossível-de-digitar-para-a-minha-conta-do-google">Uma
|
||||
senha praticamente impossível de digitar para a minha conta do
|
||||
Google</a></li>
|
||||
<li><a href="#fin" id="toc-fin"><em>Fin</em></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p>Depois de aproximadamente 1 ano, eu criei uma nova conta no <a href="https://proton.me">Proton</a>. Um serviço de e-mail/calendário
|
||||
online/VPN/cloud storage/gerenciador de senhas/carteira de bitcoin,
|
||||
enfim, um serviço que foca em prover basicamente as ferramentas que
|
||||
comumemte utilizamos com mais frequência do Google (Gmail, Google
|
||||
Calendar, Google Drive, Google Passwords) com aquela pitada de
|
||||
privacidade que só a mão do Shaquille O'Neal consegue fazer.</p>
|
||||
<h1 id="por-que">Por que?</h1>
|
||||
<p>Nas últimas semanas eu comecei a voltar ao meu antigo estilo de vida
|
||||
sem o Google, o fato de eu ter conseguido um emprego foi um facilitador
|
||||
nesse aspecto. No dia do aniversário do meu irmão, eu troquei de celular
|
||||
com ele, dando o meu Poco M4 Pro para ele e ficando com o Moto G52
|
||||
dele.</p>
|
||||
<p>Essa não foi a primeira vez que a gente fez isso, na verdade na
|
||||
primeira vez que fiz isso com ele foi porque o Moto G52 possui uma ROM
|
||||
oficial da LineageOS disponível, e digamos que quando eu descobri isso
|
||||
eu tive uma <a href="https://i.pinimg.com/736x/87/07/97/8707972a759975b07d188308c948cc27.jpg">ativação
|
||||
neural</a> e no mesmo dia a gente fez essa troca. E claro, eu coloquei a
|
||||
Lineage no G52.</p>
|
||||
<p>Enfim, vou cortar um pouco da história e pular para o presente.
|
||||
Depois que eu fiquei com o G52 com a Lineage instalada novamente, eu
|
||||
comecei a fazer uma especie de "detox digital", mas eu não estava
|
||||
deletando contas, eu estava desvinculando o Google delas. Porém, uma
|
||||
coisa que estava sendo uma pedra no meu caminho era o Gmail, e bem, eu
|
||||
tenho e-mails alternativos, mas os servidores deles são lentos o
|
||||
suficiente para que eu basicamente só leia um e-mail 1 hora depois que
|
||||
eu "recebi" ele.</p>
|
||||
<p>Tendo isso em mente, eu criei uma nova conta no Proton, que dentre
|
||||
várias coisas, também me dá acesso a 10 e-mail aliases. O que me permite
|
||||
remover o Gmail da jogada, e mesmo as coisas que não estão (ainda)
|
||||
usando aliases não ficam presas no limbo, já que o Proton me permite
|
||||
receber os e-mails do Gmail, no Proton, ou seja, eu não preciso nem
|
||||
mesmo abrir o Gmail para ler os e-mails que chegam por lá.</p>
|
||||
<h1 id="mudanças-no-armazenamento">Mudanças no armazenamento</h1>
|
||||
<p>Ano passado, quando eu tinha uma conta no Proton, o armazenamento era
|
||||
bem limitado, somente 1Gb (depois de fazer uma configuração na conta, o
|
||||
padrão era 512Mb) era disponível. Esses 1Gb eram compartilhado entre o
|
||||
serviço de e-mail/calendário e o de cloud storage. Não sei se já ficou
|
||||
claro, mas 1Gb não é lá muita coisa para um serviço de cloud storage,
|
||||
muito menos quando isso é compartilhado com outros serviços.</p>
|
||||
<p>Mas, com a nova conta que criei ainda hoje, eu reparei que no serviço
|
||||
de e-mail o armazenamento continua sendo de 1Gb, porém o serviço de
|
||||
cloud storage se inicia com 3Gb! Podendo ser aumentado para 5Gb depois
|
||||
de seguir um passo a passo de configuração!</p>
|
||||
<p>Isso é algo que eu simplesmente não tava esperando, mas é uma mudança
|
||||
mais que bem vinda, porque eu posso mover os arquivos que eu tinha no
|
||||
Google Drive para cá com muito mais folga.</p>
|
||||
<h1 id="uma-senha-praticamente-impossível-de-digitar-para-a-minha-conta-do-google">Uma
|
||||
senha praticamente impossível de digitar para a minha conta do
|
||||
Google</h1>
|
||||
<p>Eu também estou dificultando ao máximo o meu login do Google,
|
||||
praticamente tornando impossível que eu faça login sem utilizar o
|
||||
KeePass, o que por sua vez, faz com que eu deixe de utilizar um sistema
|
||||
que não seja uma distro linux, no caso do meu pc, ou a LinageOS, no meu
|
||||
celular.</p>
|
||||
<p>O KeePassXC havia lançado a +/- 2 meses atrás uma função que te
|
||||
permite criar passkeys utilizando o próprio KeePassXC, o que elimina a
|
||||
necessidade de um celular com a Google impregnada ou um iPhone.
|
||||
Óbviamente eu já passei a limpa em todas as contas que eu usava uma
|
||||
passkey da Google e gerei novas usando o KeePassXC.</p>
|
||||
<p>Tudo isso me deixa cada vez menos dependente do Google, o que é algo
|
||||
que sinceramente qualquer pessoa deveria tentar fazer. Não só com o
|
||||
Google, mas com basicamente qualquer uma dessas empresas que até um
|
||||
idoso de 90 anos reconhece de tão popular.</p>
|
||||
<h1 id="fin"><em>Fin</em></h1>
|
||||
<p>Enfim, acho que já tagarelei demais.</p>
|
||||
<p>Até o próximo post!</p>
|
||||
</body>
|
||||
</html>
|
||||
427
posts/07-viper-mode.org.html
Normal file
427
posts/07-viper-mode.org.html
Normal file
|
|
@ -0,0 +1,427 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang xml:lang>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="generator" content="pandoc" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
<title>Vi, só que dentro do Emacs!</title>
|
||||
<style>
|
||||
code{white-space: pre-wrap;}
|
||||
span.smallcaps{font-variant: small-caps;}
|
||||
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
||||
div.column{flex: auto; overflow-x: auto;}
|
||||
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||
|
||||
ul.task-list[class]{list-style: none;}
|
||||
ul.task-list li input[type="checkbox"] {
|
||||
font-size: inherit;
|
||||
width: 0.8em;
|
||||
margin: 0 0.8em 0.2em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||
|
||||
pre > code.sourceCode { white-space: pre; position: relative; }
|
||||
pre > code.sourceCode > span { line-height: 1.25; }
|
||||
pre > code.sourceCode > span:empty { height: 1.2em; }
|
||||
.sourceCode { overflow: visible; }
|
||||
code.sourceCode > span { color: inherit; text-decoration: inherit; }
|
||||
div.sourceCode { margin: 1em 0; }
|
||||
pre.sourceCode { margin: 0; }
|
||||
@media screen {
|
||||
div.sourceCode { overflow: auto; }
|
||||
}
|
||||
@media print {
|
||||
pre > code.sourceCode { white-space: pre-wrap; }
|
||||
pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
|
||||
}
|
||||
pre.numberSource code
|
||||
{ counter-reset: source-line 0; }
|
||||
pre.numberSource code > span
|
||||
{ position: relative; left: -4em; counter-increment: source-line; }
|
||||
pre.numberSource code > span > a:first-child::before
|
||||
{ content: counter(source-line);
|
||||
position: relative; left: -1em; text-align: right; vertical-align: baseline;
|
||||
border: none; display: inline-block;
|
||||
-webkit-touch-callout: none; -webkit-user-select: none;
|
||||
-khtml-user-select: none; -moz-user-select: none;
|
||||
-ms-user-select: none; user-select: none;
|
||||
padding: 0 4px; width: 4em;
|
||||
}
|
||||
pre.numberSource { margin-left: 3em; padding-left: 4px; }
|
||||
div.sourceCode
|
||||
{ color: #cccccc; background-color: #303030; }
|
||||
@media screen {
|
||||
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
|
||||
}
|
||||
code span.al { color: #ffcfaf; }
|
||||
code span.an { color: #7f9f7f; font-weight: bold; }
|
||||
code span.at { }
|
||||
code span.bn { color: #dca3a3; }
|
||||
code span.bu { }
|
||||
code span.cf { color: #f0dfaf; }
|
||||
code span.ch { color: #dca3a3; }
|
||||
code span.cn { color: #dca3a3; font-weight: bold; }
|
||||
code span.co { color: #7f9f7f; }
|
||||
code span.cv { color: #7f9f7f; font-weight: bold; }
|
||||
code span.do { color: #7f9f7f; }
|
||||
code span.dt { color: #dfdfbf; }
|
||||
code span.dv { color: #dcdccc; }
|
||||
code span.er { color: #c3bf9f; }
|
||||
code span.ex { }
|
||||
code span.fl { color: #c0bed1; }
|
||||
code span.fu { color: #efef8f; }
|
||||
code span.im { }
|
||||
code span.in { color: #7f9f7f; font-weight: bold; }
|
||||
code span.kw { color: #f0dfaf; }
|
||||
code span.op { color: #f0efd0; }
|
||||
code span.ot { color: #efef8f; }
|
||||
code span.pp { color: #ffcfaf; font-weight: bold; }
|
||||
code span.sc { color: #dca3a3; }
|
||||
code span.ss { color: #cc9393; }
|
||||
code span.st { color: #cc9393; }
|
||||
code span.va { }
|
||||
code span.vs { color: #cc9393; }
|
||||
code span.wa { color: #7f9f7f; font-weight: bold; }
|
||||
</style>
|
||||
<style type="text/css">:root {
|
||||
--level-1-bg: #230631;
|
||||
--level-1-fg: #b6a0ff;
|
||||
--level-2-bg: #2c0614;
|
||||
--level-2-fg: #f78fe7;
|
||||
--level-3-bg: #0f0e39;
|
||||
--level-3-fg: #2fafff;
|
||||
--background: #000000;
|
||||
--foreground: #ffffff;
|
||||
--background-alt: #181732;
|
||||
--accent: #f5aa80;
|
||||
--link: #00bcff;
|
||||
--mode-bar: #2a2a66;
|
||||
--mode-bar-accent: #00808f;
|
||||
--border: solid 1px var(--background-alt);
|
||||
}
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
height: 0px;
|
||||
}
|
||||
100% {
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
header > nav {
|
||||
background-color: var(--mode-bar);
|
||||
display: flex;
|
||||
padding: 5px 20px;
|
||||
justify-content: space-between;
|
||||
overflow-x: scroll;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
header > nav > ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li > a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
header > nav > ul > li > a:hover {
|
||||
background-color: var(--mode-bar-accent);
|
||||
}
|
||||
header > nav > ul {
|
||||
padding: 0;
|
||||
}
|
||||
header > nav {
|
||||
padding: 15px;
|
||||
font-size: medium;
|
||||
}
|
||||
p > code {
|
||||
color: var(--foreground);
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
.sourceCode, pre, code {
|
||||
background-color: #1a1a1a;
|
||||
padding: 3px;
|
||||
overflow-x: scroll;
|
||||
margin: 10px auto;
|
||||
}
|
||||
pre {
|
||||
min-height: 20px;
|
||||
}
|
||||
pre.sourceCode:hover::before {
|
||||
float: right;
|
||||
border: solid 2px var(--accent);
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
min-width: 32px;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
animation: 300ms slide-in both;
|
||||
}
|
||||
pre.c:hover::before {
|
||||
content: "C"
|
||||
}
|
||||
pre.bash:hover::before {
|
||||
content: "Bash"
|
||||
}
|
||||
pre.html:hover::before {
|
||||
content: "HTML"
|
||||
}
|
||||
pre.javascript:hover::before {
|
||||
content: "Javascript"
|
||||
}
|
||||
pre.css:hover::before {
|
||||
content: "CSS"
|
||||
}
|
||||
pre.lua:hover::before {
|
||||
content: "Lua"
|
||||
}
|
||||
pre.commonlisp:hover::before {
|
||||
content: "Lisp"
|
||||
}
|
||||
pre.cpp:hover::before {
|
||||
content: "C++"
|
||||
}
|
||||
pre.python:hover::before {
|
||||
content: "Python"
|
||||
}
|
||||
pre.org:hover::before {
|
||||
content: "Org-mode";
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
.title::before {
|
||||
content: "";
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.author {
|
||||
display: none;
|
||||
}
|
||||
.line-block {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
border-top: solid 3px var(--accent);
|
||||
border-bottom: solid 3px var(--accent);
|
||||
padding: 10px;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
#TOC {
|
||||
background-color: var(--background-alt);
|
||||
padding: 10px;
|
||||
}
|
||||
@media print {
|
||||
#TOC {
|
||||
display: none;
|
||||
}
|
||||
header > nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
position: relative;
|
||||
font-family: system-ui;
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding: 1em;
|
||||
}
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
article {
|
||||
max-width: 80ch;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
padding: 10px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--link);
|
||||
}
|
||||
a:hover {
|
||||
opacity: 80%;
|
||||
}
|
||||
hr {
|
||||
border: var(--border);
|
||||
border-bottom: none;
|
||||
}
|
||||
blockquote {
|
||||
background-color: var(--background-alt);
|
||||
color: var(--accent);
|
||||
border-left: solid 5px var(--accent);
|
||||
padding: 10px 20px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
blockquote > p > code {
|
||||
background-color: var(--link);
|
||||
color: var(--background);
|
||||
}
|
||||
blockquote > pre {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p, hr {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
ul, ol {
|
||||
list-style-position: inside;
|
||||
padding-inline-start: 1.5em;
|
||||
}
|
||||
ul > li {
|
||||
list-style: "- ";
|
||||
}
|
||||
h1, h2, h3 {
|
||||
margin: 1em 0;
|
||||
}
|
||||
h1, h1::before {
|
||||
content: "* ";
|
||||
background-color: var(--level-1-bg);
|
||||
color: var(--level-1-fg);
|
||||
}
|
||||
h2, h2::before {
|
||||
content: "** ";
|
||||
background-color: var(--level-2-bg);
|
||||
color: var(--level-2-fg);
|
||||
}
|
||||
h3, h3::before {
|
||||
content: "*** ";
|
||||
background-color: var(--level-3-bg);
|
||||
color: var(--level-3-fg);
|
||||
}
|
||||
img {
|
||||
max-height: 300px;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
}
|
||||
table, th, td {
|
||||
border: var(--border);
|
||||
padding: 5px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table {
|
||||
border: none;
|
||||
overflow: scroll;
|
||||
margin: 1em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
th, td {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
tr:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
tr:nth-of-type(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<article>
|
||||
<header id="title-block-header">
|
||||
<h1 class="title">Vi, só que dentro do Emacs!</h1>
|
||||
</header>
|
||||
<nav id="TOC" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#viper" id="toc-viper">Viper</a></li>
|
||||
<li><a href="#bem-e-como-é-usar-ele" id="toc-bem-e-como-é-usar-ele">Bem,
|
||||
e como é usar ele?</a></li>
|
||||
<li><a href="#fin" id="toc-fin"><em>Fin</em></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p>Esse mostro de um programa é tão cheio de coisa para se falar que já
|
||||
garantiu até uma trilogia nesse blog.</p>
|
||||
<h1 id="viper">Viper</h1>
|
||||
<p>A um pouco mais de 3 horas atrás, enquanto eu ainda estava no meu
|
||||
trabalho, eu fiquei pesquisando um pouco sobre o Emacs, e eu acabei
|
||||
achando o diretório de manuais de referência dele. Dois deles me
|
||||
chamaram (e muito) a minha atenção, os manuais de referência do vip-mode
|
||||
e do <code class="verbatim">viper-mode</code>.</p>
|
||||
<p>Obviamente que quando eu vi esses manuais eu cliquei neles para ver
|
||||
do que eles se tratavam, e bom, eles são modos que emulam os controles
|
||||
do VI, o editor de texto modal que vem com qualquer sistema Unix e que
|
||||
foi dele que surgiu o Vim (VI iMproved).</p>
|
||||
<p>Eu decidi usar o <code class="verbatim">viper</code> no lugar do vip
|
||||
só porque ele aparenta ser uma opção mais completa em comparação. Ele
|
||||
chega no nível de até mesmo ter um mini-tutorial e um wizard perguntando
|
||||
qual o seu nível de expertise com ele.</p>
|
||||
<h1 id="bem-e-como-é-usar-ele">Bem, e como é usar ele?</h1>
|
||||
<p>Como já disse, o <code class="verbatim">viper</code> emula o VI e não
|
||||
o Vim (isso é o que o evil-mode faz), sendo assim ele não tem as mesmas
|
||||
teclas/comandos que o Vim possui. Porém, você ainda pode usar as teclas
|
||||
do Emacs em conjunto com as teclas do VI, o que mais que compensa,
|
||||
<strong>na minha opinião</strong>, a falta das teclas do Vim.</p>
|
||||
<p>Só de ter uma parte das teclas que são usadas no Vim já torna a minha
|
||||
experiência muito melhor. Afinal, apesar do Emacs ser um programa que é
|
||||
ótimo em diversos aspectos, as teclas de atalho dele não são
|
||||
particularmente um ponto positivo dele.</p>
|
||||
<p>E é claro que como tudo no Emacs, eu posso customizar o <code class="verbatim">viper</code> e adicionar os comandos que eu acho
|
||||
extremamente úteis do Vim, no <code class="verbatim">viper</code>,
|
||||
criando assim um Frankenstein que nunca deveria ter nascido.</p>
|
||||
<p>A minha configuração dele, inclusive, está bem modesta, com poucas
|
||||
linhas de código, mas já são o suficiente para deixar o meu uso do Emacs
|
||||
10 vezes mais aconchegante.</p>
|
||||
<div class="sourceCode" id="cb1" data-org-language="emacs-lisp"><pre class="sourceCode commonlisp"><code class="sourceCode commonlisp"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a>(<span class="kw">setq</span> viper-mode <span class="kw">t</span>)</span>
|
||||
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a>(<span class="kw">require</span> <span class="dt">'viper</span>)</span>
|
||||
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a>(<span class="kw">setq</span> viper-inhibit-startup-message <span class="dt">'t</span>)</span>
|
||||
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a>(<span class="kw">setq</span> viper-expert-level <span class="dt">'5</span>)</span>
|
||||
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a>(<span class="kw">setq</span> viper-want-ctl-h-help <span class="kw">t</span>)</span>
|
||||
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a>(<span class="kw">setq</span> viper-ex-style-editing <span class="kw">nil</span>)</span>
|
||||
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a>(<span class="kw">setq</span> viper-no-multiple-ESC <span class="kw">nil</span>)</span>
|
||||
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a>(<span class="kw">setq</span> viper-syntax-preference <span class="dt">'extended</span>)</span>
|
||||
<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a>(<span class="kw">setq</span> viper-vi-style-in-minibuffer <span class="kw">nil</span>)</span>
|
||||
<span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a>(define-key viper-vi-basic-map (kbd <span class="st">"v"</span>) <span class="dt">'set-mark-command</span>)</span>
|
||||
<span id="cb1-11"><a href="#cb1-11" aria-hidden="true" tabindex="-1"></a>(define-key viper-vi-basic-map (kbd <span class="st">"f"</span>) <span class="dt">'find-file</span>)</span>
|
||||
<span id="cb1-12"><a href="#cb1-12" aria-hidden="true" tabindex="-1"></a>(define-key viper-vi-basic-map (kbd <span class="st">"R"</span>) <span class="dt">'replace-rectangle</span>)</span>
|
||||
<span id="cb1-13"><a href="#cb1-13" aria-hidden="true" tabindex="-1"></a>(define-key viper-vi-basic-map (kbd <span class="st">"C-v"</span>) <span class="dt">'rectangle-mark-mode</span>)</span>
|
||||
<span id="cb1-14"><a href="#cb1-14" aria-hidden="true" tabindex="-1"></a>(define-key viper-vi-basic-map (kbd <span class="st">"x"</span>) <span class="dt">'kill-region</span>)</span>
|
||||
<span id="cb1-15"><a href="#cb1-15" aria-hidden="true" tabindex="-1"></a>(viper-mode)</span></code></pre></div>
|
||||
<p>Como eu disse, ainda está bem modesta. Apesar de que só tacar um
|
||||
bloco de código do nada não explica direito o que está acontecendo,
|
||||
Elisp é uma linguagem bem simples de entender, então eu acho que não vai
|
||||
ser tão problemático assim.</p>
|
||||
<p>Mas, basicamente eu só ativei o <code class="verbatim">viper-mode</code> e configurei 5 teclas de atalho que
|
||||
"emulam" algumas teclas que eu uso no Neovim. Não são completamente
|
||||
idênticas, mas já dão conta do recado.</p>
|
||||
<h1 id="fin"><em>Fin</em></h1>
|
||||
<p>Bom, é isso, acho que por agora eu não tenho mais o que falar sobre
|
||||
esse lindo programa chamado Emacs.</p>
|
||||
<p>Até o próximo post!</p>
|
||||
</body>
|
||||
</html>
|
||||
357
posts/08-god-mode.org.html
Normal file
357
posts/08-god-mode.org.html
Normal file
File diff suppressed because one or more lines are too long
557
posts/09-vale-da-estranheza.org.html
Normal file
557
posts/09-vale-da-estranheza.org.html
Normal file
File diff suppressed because one or more lines are too long
375
posts/10-pandoc.md.html
Normal file
375
posts/10-pandoc.md.html
Normal file
|
|
@ -0,0 +1,375 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang xml:lang>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="generator" content="pandoc" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
<title>Pandoc</title>
|
||||
<style>
|
||||
code{white-space: pre-wrap;}
|
||||
span.smallcaps{font-variant: small-caps;}
|
||||
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
||||
div.column{flex: auto; overflow-x: auto;}
|
||||
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||
|
||||
ul.task-list[class]{list-style: none;}
|
||||
ul.task-list li input[type="checkbox"] {
|
||||
font-size: inherit;
|
||||
width: 0.8em;
|
||||
margin: 0 0.8em 0.2em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||
</style>
|
||||
<style type="text/css">:root {
|
||||
--level-1-bg: #230631;
|
||||
--level-1-fg: #b6a0ff;
|
||||
--level-2-bg: #2c0614;
|
||||
--level-2-fg: #f78fe7;
|
||||
--level-3-bg: #0f0e39;
|
||||
--level-3-fg: #2fafff;
|
||||
--background: #000000;
|
||||
--foreground: #ffffff;
|
||||
--background-alt: #181732;
|
||||
--accent: #f5aa80;
|
||||
--link: #00bcff;
|
||||
--mode-bar: #2a2a66;
|
||||
--mode-bar-accent: #00808f;
|
||||
--border: solid 1px var(--background-alt);
|
||||
}
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
height: 0px;
|
||||
}
|
||||
100% {
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
header > nav {
|
||||
background-color: var(--mode-bar);
|
||||
display: flex;
|
||||
padding: 5px 20px;
|
||||
justify-content: space-between;
|
||||
overflow-x: scroll;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
header > nav > ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li > a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
header > nav > ul > li > a:hover {
|
||||
background-color: var(--mode-bar-accent);
|
||||
}
|
||||
header > nav > ul {
|
||||
padding: 0;
|
||||
}
|
||||
header > nav {
|
||||
padding: 15px;
|
||||
font-size: medium;
|
||||
}
|
||||
p > code {
|
||||
color: var(--foreground);
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
.sourceCode, pre, code {
|
||||
background-color: #1a1a1a;
|
||||
padding: 3px;
|
||||
overflow-x: scroll;
|
||||
margin: 10px auto;
|
||||
}
|
||||
pre {
|
||||
min-height: 20px;
|
||||
}
|
||||
pre.sourceCode:hover::before {
|
||||
float: right;
|
||||
border: solid 2px var(--accent);
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
min-width: 32px;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
animation: 300ms slide-in both;
|
||||
}
|
||||
pre.c:hover::before {
|
||||
content: "C"
|
||||
}
|
||||
pre.bash:hover::before {
|
||||
content: "Bash"
|
||||
}
|
||||
pre.html:hover::before {
|
||||
content: "HTML"
|
||||
}
|
||||
pre.javascript:hover::before {
|
||||
content: "Javascript"
|
||||
}
|
||||
pre.css:hover::before {
|
||||
content: "CSS"
|
||||
}
|
||||
pre.lua:hover::before {
|
||||
content: "Lua"
|
||||
}
|
||||
pre.commonlisp:hover::before {
|
||||
content: "Lisp"
|
||||
}
|
||||
pre.cpp:hover::before {
|
||||
content: "C++"
|
||||
}
|
||||
pre.python:hover::before {
|
||||
content: "Python"
|
||||
}
|
||||
pre.org:hover::before {
|
||||
content: "Org-mode";
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
.title::before {
|
||||
content: "";
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.author {
|
||||
display: none;
|
||||
}
|
||||
.line-block {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
border-top: solid 3px var(--accent);
|
||||
border-bottom: solid 3px var(--accent);
|
||||
padding: 10px;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
#TOC {
|
||||
background-color: var(--background-alt);
|
||||
padding: 10px;
|
||||
}
|
||||
@media print {
|
||||
#TOC {
|
||||
display: none;
|
||||
}
|
||||
header > nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
position: relative;
|
||||
font-family: system-ui;
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding: 1em;
|
||||
}
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
article {
|
||||
max-width: 80ch;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
padding: 10px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--link);
|
||||
}
|
||||
a:hover {
|
||||
opacity: 80%;
|
||||
}
|
||||
hr {
|
||||
border: var(--border);
|
||||
border-bottom: none;
|
||||
}
|
||||
blockquote {
|
||||
background-color: var(--background-alt);
|
||||
color: var(--accent);
|
||||
border-left: solid 5px var(--accent);
|
||||
padding: 10px 20px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
blockquote > p > code {
|
||||
background-color: var(--link);
|
||||
color: var(--background);
|
||||
}
|
||||
blockquote > pre {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p, hr {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
ul, ol {
|
||||
list-style-position: inside;
|
||||
padding-inline-start: 1.5em;
|
||||
}
|
||||
ul > li {
|
||||
list-style: "- ";
|
||||
}
|
||||
h1, h2, h3 {
|
||||
margin: 1em 0;
|
||||
}
|
||||
h1, h1::before {
|
||||
content: "* ";
|
||||
background-color: var(--level-1-bg);
|
||||
color: var(--level-1-fg);
|
||||
}
|
||||
h2, h2::before {
|
||||
content: "** ";
|
||||
background-color: var(--level-2-bg);
|
||||
color: var(--level-2-fg);
|
||||
}
|
||||
h3, h3::before {
|
||||
content: "*** ";
|
||||
background-color: var(--level-3-bg);
|
||||
color: var(--level-3-fg);
|
||||
}
|
||||
img {
|
||||
max-height: 300px;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
}
|
||||
table, th, td {
|
||||
border: var(--border);
|
||||
padding: 5px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table {
|
||||
border: none;
|
||||
overflow: scroll;
|
||||
margin: 1em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
th, td {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
tr:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
tr:nth-of-type(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<article>
|
||||
<header id="title-block-header">
|
||||
<h1 class="title">Pandoc</h1>
|
||||
</header>
|
||||
<nav id="TOC" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#não-preciso-ligar-pra-formato-de-arquivo" id="toc-não-preciso-ligar-pra-formato-de-arquivo">Não preciso ligar pra
|
||||
formato de arquivo</a></li>
|
||||
<li><a href="#diferenças-com-o-blog.sh" id="toc-diferenças-com-o-blog.sh">Diferenças com o blog.sh</a>
|
||||
<ul>
|
||||
<li><a href="#velocidade" id="toc-velocidade">Velocidade</a></li>
|
||||
</ul></li>
|
||||
<li><a href="#páginas-independentes-umas-das-outras" id="toc-páginas-independentes-umas-das-outras">Páginas independentes
|
||||
umas das outras</a></li>
|
||||
<li><a href="#fin" id="toc-fin"><em>Fin</em></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p>Quem diria? Já estou fazendo a geração do site utilizando outro
|
||||
método. Dessa vez estou usando o Pandoc, um velho amigo do Luke
|
||||
Smith.</p>
|
||||
<p>Confesso que fiz isso só porquê deu vontade, não tinha a menor
|
||||
nescessidade de uma mudança como essa, principalmente com a configuração
|
||||
do Emacs que eu tenho.</p>
|
||||
<p>Porém, tem certas coisas que são muito bacanas sobre o Pandoc que eu
|
||||
gostaria de compartilhar, em forma de um post, é claro.</p>
|
||||
<h1 id="não-preciso-ligar-pra-formato-de-arquivo">Não preciso ligar pra
|
||||
formato de arquivo</h1>
|
||||
<p>O Pandoc é um “conversor de documentos universal” por assim dizer.
|
||||
Literalmente todo o objetivo dele é converter um arquivo de formato
|
||||
<code>a</code> para um arquivo de formato <code>b</code>.</p>
|
||||
<p>Claro que para eu chamar de “universal” é porque ele suporta
|
||||
<strong>muitos</strong> arquivos. Mas é tando formato que existe por aí
|
||||
e que o Pandoc suporta que simplesmente não faz sentido eu sair
|
||||
listando.</p>
|
||||
<p>No máximo, eu posso dizer que essa parte de suportar diversos tipos
|
||||
de arquivo vem com uma certa vantagem: Todos os meus posts escritos
|
||||
usando o <code>Org-mode</code> no Emacs, são compatíveis com esse novo
|
||||
método de geração.</p>
|
||||
<p>A prova disso é o formato de arquivo deste post. Eu estou escrevendo
|
||||
ele em Markdown, porém os demais foram escritos usando o
|
||||
<code>Org-mode</code>.</p>
|
||||
<h1 id="diferenças-com-o-blog.sh">Diferenças com o <a href="https://codeberg.org/tukain/blog.sh">blog.sh</a></h1>
|
||||
<p>A maior diferença na realidade é o fato do blog.sh ser um shell
|
||||
script (Uau, quem diria?) e este modelo que fiz usando o Pandoc fica
|
||||
dentro de uma <code>Makefile</code>.</p>
|
||||
<p>Outra é o que já mencionei anteriormente, o Pandoc suporta
|
||||
basicamente qualquer tipo de arquivo.</p>
|
||||
<p>Porém eles possuem semelhanças na forma em que listam os posts,
|
||||
fazendo uma listagem de um diretório (como <code>posts</code>, por
|
||||
exemplo) e pegando o output da listagem e passando para o comando
|
||||
<code>sort</code> com a opção <code>-r</code> (reverso), dessa forma eu
|
||||
posso organizar os meus posts simplesmente colocando uma ordem numérica
|
||||
antes do nome do arquivo (01-post.md) ou então até mesmo uma data
|
||||
(2024-11-04_post.md).</p>
|
||||
<h2 id="velocidade">Velocidade</h2>
|
||||
<p>De longe, o blog.sh é muito mais rápido do que o Pandoc e também que
|
||||
o Emacs. Porém o custo dessa velocidade é a falta de funcionalidades
|
||||
como <code>syntax highlighting</code> e geração de tabelas de
|
||||
conteúdo.</p>
|
||||
<p>O Pandoc tem quase a mesma velocidade de que o
|
||||
<code>ox-publish</code> (o exportador do Org-mode), com a desvantagem
|
||||
sendo os blocos de código, que tem uma limitação na flexibilidade de
|
||||
linguagens suportadas, coisa que no caso do <code>ox-publish</code> se
|
||||
torna basicamente questo de você ter um <code>syntax highlighting</code>
|
||||
disponível pra uso para certa linguagem, o que na maioria das vezes você
|
||||
tem.</p>
|
||||
<h1 id="páginas-independentes-umas-das-outras">Páginas independentes
|
||||
umas das outras</h1>
|
||||
<p>A única excessão a esta regra é o arquivo <code>blog.html</code>. Já
|
||||
que ele não é gerado pelo Pandoc, e sim pela <code>Makefile</code>.</p>
|
||||
<p>Tirando isso, todas as páginas do site gerado são indepentes. Isso
|
||||
significa que tudo o que é utilizado pela página fica incorporado na
|
||||
própria página, a deixando sem dependências externas.</p>
|
||||
<p>Ou seja, o css fica incorporado na página, assim como imagens, gif’s
|
||||
e etc.</p>
|
||||
<p>Isso também significa que algumas páginas vão ficar enormes, mas essa
|
||||
é uma coisa que vale a pena no fim do dia. Eu acho. Talvez. Sei lá
|
||||
cara.</p>
|
||||
<h1 id="fin"><em>Fin</em></h1>
|
||||
<p>Bem, é isso o que eu tenho a dizer por enquanto.</p>
|
||||
<p>Te vejo no próximo post!</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,183 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<!-- 2024-11-02 Sat 22:57 -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>A simplicidade da C e da Hare</title>
|
||||
<meta name="author" content="Tukain" />
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<link rel=icon type="image/webp" href="/assets/fav.webp"> <link rel=stylesheet href="/assets/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<header><nav><ul><li><a href="/">Início</a></li></ul><ul><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<header>
|
||||
<h1 class="title">A simplicidade da C e da Hare</h1>
|
||||
</header><nav id="table-of-contents" role="doc-toc">
|
||||
<h2>Table of Contents</h2>
|
||||
<div id="text-table-of-contents" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#org1bab9ea">Por quê estou fazendo isso?</a></li>
|
||||
<li><a href="#org0a7ac9b">Existe algum outro motivo?</a></li>
|
||||
<li><a href="#org6cbf6e6">Como está meu progresso até agora?</a></li>
|
||||
<li><a href="#org2e7fcde">As diferenças</a></li>
|
||||
<li><a href="#org77ca9dc"><i>Fin</i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<p>
|
||||
Recentemente eu fiz um post sobre os meus estudos com a linguagem de
|
||||
programação Hare, falei sobre o que eu planejo fazer com esse
|
||||
conhecimento entre outras coisas. Mas algo que eu não comentei sobre
|
||||
foi o fato de eu estar estudando Hare em conjunto com C (só mencionei
|
||||
que a sintaxe da Hare é semelhante a C).
|
||||
</p>
|
||||
|
||||
<div id="outline-container-org1bab9ea" class="outline-2">
|
||||
<h2 id="org1bab9ea">Por quê estou fazendo isso?</h2>
|
||||
<div class="outline-text-2" id="text-org1bab9ea">
|
||||
<p>
|
||||
Bom, isso é algo que eu simplesmente esqueci de comentar no meu último
|
||||
post, estou fazendo isso por 2 motivos principais:
|
||||
</p>
|
||||
|
||||
<p>
|
||||
As sintaxes são semelhantes, então posso pegar um conhecimento novo de
|
||||
uma e levar para outra; Ambas são linguagens low-level, com foco em
|
||||
alto desempenho e possuem manipulação manual de memória, então posso
|
||||
aprender esse conceito de forma prática. Claro que existem outros
|
||||
motivos para eu fazer algo nesse estilo, mas eu não vejo a necessidade
|
||||
de listar todos eles aqui. Afinal, já é algo “estranho” para um jovem
|
||||
da minha idade ter interesse em uma “linguagem defasada e insegura”
|
||||
como a C, ao invés de querer aprender algo como Python, Ruby ou
|
||||
Javascript.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org0a7ac9b" class="outline-2">
|
||||
<h2 id="org0a7ac9b">Existe algum outro motivo?</h2>
|
||||
<div class="outline-text-2" id="text-org0a7ac9b">
|
||||
<p>
|
||||
Óbviamente que sim. Aprender C/Hare é algo como um sonho que quero, e
|
||||
posso, tornar realidade. É algo que chega perto de uma romantização,
|
||||
um sentimento que dá vontade de correr atrás, de se esforçar para
|
||||
alcança-lo.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Quase como você sonha em ter seu próprio carro, viver sozinho, ou
|
||||
viajar o mundo. Não é um sentimento fácil de por em palavras.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org6cbf6e6" class="outline-2">
|
||||
<h2 id="org6cbf6e6">Como está meu progresso até agora?</h2>
|
||||
<div class="outline-text-2" id="text-org6cbf6e6">
|
||||
<p>
|
||||
Bom, eu iniciei meus estudos a pouquíssimo tempo, então ainda estou em
|
||||
meus estágios iniciais. Porém já aprendi alguns conceitos básicos como
|
||||
if statements, which loop, for loop, switch-case, structs e alguns
|
||||
types também (tanto em C quanto em Hare).
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Também comecei a fazer alguns programas extremamente simples só para
|
||||
fixar esses conceitos na minha cabeça, um exemplo desses programas é
|
||||
um programa que cria um arquivo vazio usando um nome que o usuário
|
||||
fornece.
|
||||
</p>
|
||||
|
||||
<div class="org-src-container">
|
||||
<pre class="src src-C"><span style="color: #6ae4b9; font-weight: bold;">int</span> <span style="color: #feacd0;">main</span>()
|
||||
{
|
||||
<span style="color: #6ae4b9; font-weight: bold;">FILE</span> *<span style="color: #00d3d0;">arq</span>;
|
||||
<span style="color: #6ae4b9; font-weight: bold;">char</span> <span style="color: #00d3d0;">nome</span>[100];
|
||||
|
||||
printf(<span style="color: #79a8ff;">"Digite o nome do arquivo: "</span>);
|
||||
scanf(<span style="color: #79a8ff;">"%s"</span>, &nome[0]);
|
||||
|
||||
<span style="color: #b6a0ff; font-weight: bold;">if</span> (fopen(nome, <span style="color: #79a8ff;">"r"</span>))
|
||||
{
|
||||
printf(<span style="color: #79a8ff;">"O arquivo já existe.\n"</span>);
|
||||
}
|
||||
<span style="color: #b6a0ff; font-weight: bold;">else</span>
|
||||
{
|
||||
arq = fopen(nome, <span style="color: #79a8ff;">"w"</span>);
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="org-src-container">
|
||||
<pre class="src src-hare"><span style="color: #b6a0ff; font-weight: bold;">use</span> os;
|
||||
<span style="color: #b6a0ff; font-weight: bold;">use</span> bufio;
|
||||
<span style="color: #b6a0ff; font-weight: bold;">use</span> strings;
|
||||
|
||||
<span style="color: #b6a0ff; font-weight: bold;">export</span> <span style="color: #b6a0ff; font-weight: bold;">fn</span> main() <span style="color: #6ae4b9; font-weight: bold;">void</span> = {
|
||||
<span style="color: #b6a0ff; font-weight: bold;">let</span> arquivo = nomeDoArquivo();
|
||||
|
||||
<span style="color: #b6a0ff; font-weight: bold;">if</span> (os::exists(arquivo)) {
|
||||
fmt::println(<span style="color: #79a8ff;">"Arquivo já existe.\n"</span>)!;
|
||||
} <span style="color: #b6a0ff; font-weight: bold;">else</span> {
|
||||
os::create(arquivo, 384)!;
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
<span style="color: #b6a0ff; font-weight: bold;">fn</span> nomeDoArquivo() <span style="color: #6ae4b9; font-weight: bold;">str</span> = {
|
||||
fmt::printf(<span style="color: #79a8ff;">"Escreva o nome do arquivo.\n:"</span>)!;
|
||||
<span style="color: #b6a0ff; font-weight: bold;">const</span> inputUser = bufio::read_line(os::stdin)! <span style="color: #b6a0ff; font-weight: bold;">as</span> []<span style="color: #6ae4b9; font-weight: bold;">u8</span>;
|
||||
<span style="color: #b6a0ff; font-weight: bold;">return</span> strings::fromutf8(inputUser)!;
|
||||
};
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org2e7fcde" class="outline-2">
|
||||
<h2 id="org2e7fcde">As diferenças</h2>
|
||||
<div class="outline-text-2" id="text-org2e7fcde">
|
||||
<p>
|
||||
Algo que já para notar nesses exemplos é que o código em Hare é um
|
||||
pouco maior que o código em C, o motivo disso é que a Hare tem um foco
|
||||
na manipulação de erros. O que faz com que você tenha não só ter plena
|
||||
noção do que deve ser feito em caso de algum erro, mas também dizer ao
|
||||
programa o que ele vai fazer em caso de erro.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
A consequência disso é ter um pouco mais de linhas de código
|
||||
necessárias e também mais símbolos para serem utilizados durante a
|
||||
escrita do programa.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Apesar disso, eu acho a sintaxe da Hare mais legível que a C em alguns
|
||||
casos, como por exemplo na criação e utilização de structs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org77ca9dc" class="outline-2">
|
||||
<h2 id="org77ca9dc"><i>Fin</i></h2>
|
||||
<div class="outline-text-2" id="text-org77ca9dc">
|
||||
<p>
|
||||
Bem, isso é tudo o que eu tenho a dizer por agora.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Até o próximo post!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<header><nav><ul><li>U:---</li><li>A simplicidade da C e da Hare.org</li><li>-</li><li>2024-11-01 Fri 19:45</li><li>(Elisp<span style="color: #d0bc00">/d</span> ARev WK company)</li></ul><ul><li><a href="/">Início</a></li><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,204 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<!-- 2024-11-02 Sat 22:57 -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>De novo no Emacs</title>
|
||||
<meta name="author" content="Tukain" />
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<link rel=icon type="image/webp" href="/assets/fav.webp"> <link rel=stylesheet href="/assets/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<header><nav><ul><li><a href="/">Início</a></li></ul><ul><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<header>
|
||||
<h1 class="title">De novo no Emacs</h1>
|
||||
</header><nav id="table-of-contents" role="doc-toc">
|
||||
<h2>Table of Contents</h2>
|
||||
<div id="text-table-of-contents" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#org1e35e42">Eu não consigo</a></li>
|
||||
<li><a href="#orgaa42eb2">Sim, eu refiz (pela terceira vez) o meu site usando org-mode</a></li>
|
||||
<li><a href="#orge1b5965">Eu não estou usando o Emacs apenas na minha máquina</a></li>
|
||||
<li><a href="#orgcf33315">Planilhas</a></li>
|
||||
<li><a href="#org5f49b33">Quais são as vantagens?</a></li>
|
||||
<li><a href="#org4ea4985">Se ele é bom no trabalho, então ele também é bom em casa</a></li>
|
||||
<li><a href="#orgd87ccef"><i>Fin</i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<p>
|
||||
E lá vamos nós de novo, em mais um post que só demonstra o quanto que eu necessito me tratar.
|
||||
</p>
|
||||
|
||||
<div id="outline-container-org1e35e42" class="outline-2">
|
||||
<h2 id="org1e35e42">Eu não consigo</h2>
|
||||
<div class="outline-text-2" id="text-org1e35e42">
|
||||
<p>
|
||||
Mesmo depois de criar o meu próprio <a href="https://tukain.codeberg.page/tukain/blog.sh">SSG</a>, mesmo depois de ter reconfigurado o meu setup para que eu não precisasse mais do Emacs, mesmo depois de eu ter feito melhorias no meu Neovim, mesmo depois de tudo o que eu fiz nos últimos dias, cá estou eu, usando o Emacs de novo.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Eu não sei que síndrome de Stockolmo (definitivamente não é assim que se escreve) é essa que me assola, mas eu simplesmente não consigo, eu sempre volto a usar esse editor que é apenas 2 anos mais novo que o meu pai.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Eu sempre volto a usar esse trambolho lerdo e configurado com uma linguagem que é utilizada somente nele.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Eu sempre volto a refazer o meu site usando ele.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Eu sempre volto a fazer minhas anotações nele.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Eu não sei mais o que fazer para sair dele. (Não venha com papo de apertar <code>Ctrl x</code>, <code>Ctrl c</code> perto de mim não, fazendo favor).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgaa42eb2" class="outline-2">
|
||||
<h2 id="orgaa42eb2">Sim, eu refiz (pela terceira vez) o meu site usando org-mode</h2>
|
||||
<div class="outline-text-2" id="text-orgaa42eb2">
|
||||
<p>
|
||||
Essa é a parte que genuinamente mais me assusta, porque simplesmente não tem como uma pessoa em sã consciência ficar fazendo o que eu faço comigo mesmo, se tratando de um site, é claro. Eu é que não vou querer duvidar das coisas que as pessoas fazem.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Eu sinceramente nem sei muito bem o que dizer, afinal o resultado final não difere muito do resultado final do meu SSG. O que é proposital, até porque o meu SSG foi criado com o intuíto de ser o meu escapismo de utilizar o org-mode para fazer o meu site.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Mas acabou que no final das contas, eu voltei a usar o org-mode.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orge1b5965" class="outline-2">
|
||||
<h2 id="orge1b5965">Eu não estou usando o Emacs apenas na minha máquina</h2>
|
||||
<div class="outline-text-2" id="text-orge1b5965">
|
||||
<p>
|
||||
Um dos motivos de eu ter voltado a usar o Emacs é bem direto ao ponto:
|
||||
Eu nunca deixei de usar ele. Para ser mais exato, eu tenho uma configuração reduzida do Emacs que eu uso no computador do local onde trabalho (não tem nada haver com programação), e nos últimos dias, eu comecei a usar o Emacs como a minha "suíte office", de certa forma.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
O que quero dizer com isso é que eu comecei a utilizar o Emacs como o meu meio predileto de criar documentos e planilhas. Bom, eu já tinha noção do quão bom era fazer documentos com o Emacs, afinal de contas o meu blog inteiro é feito utilizando o Emacs. Mas planilhas…
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgcf33315" class="outline-2">
|
||||
<h2 id="orgcf33315">Planilhas</h2>
|
||||
<div class="outline-text-2" id="text-orgcf33315">
|
||||
<p>
|
||||
Qual a diferença de uma tabela para uma planilha? Na minha visão, são fórmulas.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Você usa uma tabela quando os dados que vão estar presentes nela não mudam, ou se mudam, é feito de forma manual. Agora uma planilha precisa ter uma fórmula para funcionar.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Digamos que você tenha uma planilha contendo todas as suas compras do mês, você poderia simplesmente sair somando cada preço e no fim ter o total que você gastou, mas ninguém tem saco pra isso. Então a solução é simples: você põe uma fórmula que faz a soma de todos os itens na colona de valores.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Digamos que você esteja usando o Google Sheets, a planilha poderia ser algo +/- assim:
|
||||
</p>
|
||||
|
||||
<pre class="example" id="org0835972">
|
||||
| A | B |
|
||||
| Item | Valor |
|
||||
|-----------+---------------|
|
||||
| Maçã | 6 |
|
||||
| Ovos | 12 |
|
||||
| Leite | 20 |
|
||||
| Farinha | 7 |
|
||||
| Margarina | 12 |
|
||||
|-----------+---------------|
|
||||
| total | =soma(B3:B7) |
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Eu não lembro muito bem a sintaxe do Google Sheets, mas já serve de exemplo. Basicamente o que a fórmula <code>soma</code> está fazendo é… bom, fazendo uma soma dos valores que estão presentes na linha 4 da coluna B até a linha 7 da colona B, o que você veria no final seria apenas o valor que essa fórmula retornou.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
E isso também é possível de se fazer usando o Emacs!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
A sintaxe muda, claro, mas no final do dia, o que importa é o resultado. Usando o org-mode, a sintaxe para a mesma planilha seria:
|
||||
</p>
|
||||
|
||||
<div class="org-src-container">
|
||||
<pre class="src src-org"><span style="color: #c6eaff;">| Item | Valor |</span>
|
||||
<span style="color: #c6eaff;">|-----------+-------|</span>
|
||||
<span style="color: #c6eaff;">| Maçã | 6 |</span>
|
||||
<span style="color: #c6eaff;">| Ovos | 12 |</span>
|
||||
<span style="color: #c6eaff;">| Leite | 20 |</span>
|
||||
<span style="color: #c6eaff;">| Farinha | 7 |</span>
|
||||
<span style="color: #c6eaff;">| Margarina | 12 |</span>
|
||||
<span style="color: #c6eaff;">|-----------+-------|</span>
|
||||
<span style="color: #c6eaff;">| total | 57 |</span>
|
||||
<span style="color: #a8a8a8;">#+TBLFM: @>$2=vsum(@I..@II)</span>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
A maior diferença aqui é onde a fórmula é posicionada, diferentemente do convecional, as fórmulas do org-mode ficam localizadas fora da tabela. O resto é só questão de sintaxe. "<code>@></code>" significa "última linha de", "<code>$2</code>" representa a "segunda coluna". Não sei dizer exatamente o que significa o "<code>@I..@II</code>", porém, o que eu acho que seja é que esses I's representam os delimitadores das células (os caracters "<code>-</code>").
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org5f49b33" class="outline-2">
|
||||
<h2 id="org5f49b33">Quais são as vantagens?</h2>
|
||||
<div class="outline-text-2" id="text-org5f49b33">
|
||||
<p>
|
||||
Bom, em questão de funcionalidade básicas, ambos ótimas escolhas, dependendo do seu tipo de uso e em qual nível de usabilidade você melhor se encaixa. Porém, uma coisa que é mais que um motivo para você reconsiderar na hora de escolher fazer uma planilha usando o Google Sheets é: Todo e qualquer caractere da planilha é enviado para os servidores do Google… Bom, você já deve saber de toda essa parafernalha que é privacidade na internet.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Em contra-partida, você não precisa de internet para usar o Emacs, como também tem todo o conteúdo-fonte preservado em texto puro. Dessa forma é extremamente fácil de se fazer backups dos arquivos, sem se falar que com um <i>simples</i> <code>Ctrl c</code>, <code>Ctrl e</code>, <code>h</code>, <code>h</code>, é possível gerar um arquivo HTML, pronto para ser impresso ou publicado.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org4ea4985" class="outline-2">
|
||||
<h2 id="org4ea4985">Se ele é bom no trabalho, então ele também é bom em casa</h2>
|
||||
<div class="outline-text-2" id="text-org4ea4985">
|
||||
<p>
|
||||
Só de eu conseguir utilizar ele no trabalho tranquilamente, já demonstra o quão refinado o Emacs é. Da mesma forma que eu fiz planilhas utilizando o Emacs no meu trabalho, eu também posso fazer algumas para meu uso pessoal, em casa.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
A minha configuração pessoal e a configuração que eu tenho no meu trabalho tem diferenças que se resumem à minha tendo um <i>rice</i> e a do meu trabalho tendo pouquíssimas coisas que não são nativas, afinal, eu não tenho muito o porquê de fazer um rice pro Emacs que eu uso no meu trabalho.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Ainda estou me organizando, mas quando finalizar, até mesmo a agenda do Emacs eu vou usar (sim, essa porra tem uma agenda também).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgd87ccef" class="outline-2">
|
||||
<h2 id="orgd87ccef"><i>Fin</i></h2>
|
||||
<div class="outline-text-2" id="text-orgd87ccef">
|
||||
<p>
|
||||
Bom, é isso, até o próximo post!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<header><nav><ul><li>U:---</li><li>De novo no Emacs.org</li><li>-</li><li>2024-11-02 Sat 22:38</li><li>(Elisp<span style="color: #d0bc00">/d</span> ARev WK company)</li></ul><ul><li><a href="/">Início</a></li><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<!-- 2024-11-02 Sat 22:57 -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Emacs - Parte 2</title>
|
||||
<meta name="author" content="Tukain" />
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<link rel=icon type="image/webp" href="/assets/fav.webp"> <link rel=stylesheet href="/assets/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<header><nav><ul><li><a href="/">Início</a></li></ul><ul><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<header>
|
||||
<h1 class="title">Emacs - Parte 2</h1>
|
||||
</header><nav id="table-of-contents" role="doc-toc">
|
||||
<h2>Table of Contents</h2>
|
||||
<div id="text-table-of-contents" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#orgd432a83">Sobre o "ambiente onde eu possa usar o Emacs"</a></li>
|
||||
<li><a href="#org41016ba">O que mais adicionei à minha configuração do Emacs?</a></li>
|
||||
<li><a href="#org1c8a3c3">Org-publish é praticamente um SSG</a></li>
|
||||
<li><a href="#org0236c2e">A site é praticamente um espelho da minha config</a></li>
|
||||
<li><a href="#org48fc86d"><i>Fin</i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<p>
|
||||
Hmmm… Parte 2? Hmmm…
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Bem, eu não acho que isso vá ser um post longo ou que vá adicionar
|
||||
muito ao <a href="./emacs.html">post original</a>, então você pode ignorar ele a vontade.
|
||||
</p>
|
||||
|
||||
<div id="outline-container-orgd432a83" class="outline-2">
|
||||
<h2 id="orgd432a83">Sobre o "ambiente onde eu possa usar o Emacs"</h2>
|
||||
<div class="outline-text-2" id="text-orgd432a83">
|
||||
<p>
|
||||
Então, eu já consegui fazer um. É meio que feito na gambiarra, mas
|
||||
funciona.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Eu estou utilizando o compositor wayland Cage, um compositor que tem o
|
||||
objetivo de ser uma ferramenta para criação de kiosk's. Tipo um kiosk
|
||||
onde tem um menu de restaurante e etc.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Porém, como eu posso rodar qualquer programa que eu quiser nele, então
|
||||
nada melhor do que fazer um "kiosk" com o Emacs!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
O resultado dessa monstruosidade é um Emacs rodando em tela cheia com
|
||||
um teclado inteiro a disposição para ser usado sem ter algum outro
|
||||
elemento que possa ter teclas de atalho conflitantes com as do Emacs.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Simplificando, eu posso usar até mesmo a tecla super (Windows) se eu
|
||||
quiser e eu vou estar de boa.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org41016ba" class="outline-2">
|
||||
<h2 id="org41016ba">O que mais adicionei à minha configuração do Emacs?</h2>
|
||||
<div class="outline-text-2" id="text-org41016ba">
|
||||
<p>
|
||||
Teclas de atalho novas, como por exemplo, teclas para:
|
||||
</p>
|
||||
|
||||
<ul class="org-ul">
|
||||
<li>Aumentar/diminuir o brilho da tela do meu notebook;</li>
|
||||
<li>Aumentar/diminuir o volume do meu notebook;</li>
|
||||
<li>Capturar a tela do Emacs (<a href="https://gitlab.com/marcowahl/emacsshot">usando o próprio emacs</a>).</li>
|
||||
<li>Gravar a tela</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
Também deixei habilitados por padrão 2 minor-modes do Emacs que são
|
||||
pré-instalados (por alguma razão), eles são o <code>display-battery-mode</code>,
|
||||
e <code>display-time-mode</code>. Ambos são minor-modes que poem seu output na
|
||||
barra do Emacs (eu não faço ideia de qual é o nome oficial dessa
|
||||
bagaça), o que significa que a barra do Emacs se tornou o equivalente
|
||||
à barra do Sway, o meu compositor wayland favorito.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org1c8a3c3" class="outline-2">
|
||||
<h2 id="org1c8a3c3">Org-publish é praticamente um SSG</h2>
|
||||
<div class="outline-text-2" id="text-org1c8a3c3">
|
||||
<p>
|
||||
Eu sei que eu já comentei algo parecido com isso no meu <a href="./emacs.html">outro post</a>:
|
||||
</p>
|
||||
|
||||
<blockquote>
|
||||
<p>
|
||||
Apesar de ter usado diversos SSG's nos últimos tempos, nenhum deles
|
||||
possui a praticidade de simplesmente gerar uma página HTML a partir de
|
||||
um buffer que esteja aberto no seu editor com a mesma facilidade que o
|
||||
Emacs junto do Org-mode conseguem ter.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Esse site inteiro foi refeito utilizando essa ferramenta de gereção de
|
||||
sites nativa do Emacs.
|
||||
</p>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
Mas acho que eu não consegui transparecer o quão prático e simples é o
|
||||
processo de escrever e "publicar" o que foi escrito.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Se você já usou um SSG como por exemplo o Jekyll, você pode
|
||||
interpretar o org-publish como uma template do Jekyll em que você pode
|
||||
fazer algumas modificações e que não tem muitas automações por parte
|
||||
dela.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Todas as páginas seguem um padrão pré-definido, todas.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Ou seja, você pode usar o seu CSS pensando somente em 1 página, porque
|
||||
todas as outras vão ser clones dessa página em que você está se
|
||||
inspirando.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Um bom exemplo disso é esse próprio site. Se você observar bem, não
|
||||
existe muito uma grande diferença entre a página de um post e a página
|
||||
de index. Na verdade a única diferença é a falta de uma tabela de
|
||||
conteúdo na página index.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Outra coisa também que eu encontrei, depois de xeretar um pouco na
|
||||
inter-webs, eu encontrei algumas características interessantes sobre o
|
||||
ox-publish. Uma delas é que as variáveis que criam o preâmbulo e o
|
||||
pós-âmbulo da página (são uns bagulho de autor e de validação da
|
||||
página) podem ser modificadas para qualquer string que o usuário
|
||||
prefira. Ou seja, eu posso colocar meu próprio HTML nelas!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
O que em termos práticos, faz com que o ox-publish faça o que eu
|
||||
achava que era a maior utilidade de um SSG: re-utilizar um elemento de
|
||||
uma página em todas as outras.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Por enquanto eu só adicionei uma footer com o nome do author do artigo
|
||||
e com a data de última modificação do arquivo (sim, esse bagulho tem
|
||||
até variáveis que você pode usar).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org0236c2e" class="outline-2">
|
||||
<h2 id="org0236c2e">A site é praticamente um espelho da minha config</h2>
|
||||
<div class="outline-text-2" id="text-org0236c2e">
|
||||
<p>
|
||||
O meu site e o meu Emacs possuem uma aparência muito similar, o que é proposital, já que dessa forma eu consigo ter uma certa noção de como meu site vai ficar, tirando a necessidade de usar um navegador para visualizar a página do meu site.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Não é que eu não veja como a página fica, mas eu não tenho a necessidade de ver como ele fica.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Melhor do que só mencionar é mostrar, então aqui está uma screenshot do meu Emacs:
|
||||
</p>
|
||||
|
||||
|
||||
<figure id="org8689d4b">
|
||||
<img src="../assets/img/emacs-parte-2.webp" alt="emacs-parte-2.webp">
|
||||
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
Não é um completo clone 1 por 1, mas pelo menos eles tem certa semelhança, dessa maneira eu consigo me concentrar apenas em escrever com tranquilidade, afinal de contas o site final é extremamente semelhante ao o que eu já estou vendo no editor.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org48fc86d" class="outline-2">
|
||||
<h2 id="org48fc86d"><i>Fin</i></h2>
|
||||
<div class="outline-text-2" id="text-org48fc86d">
|
||||
<p>
|
||||
Bem, é isso. Eu falei que esse posts seria algo rápido.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Enfim, até o próximo post!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<header><nav><ul><li>U:---</li><li>Emacs - Parte 2.org</li><li>-</li><li>2024-11-01 Fri 19:45</li><li>(Elisp<span style="color: #d0bc00">/d</span> ARev WK company)</li></ul><ul><li><a href="/">Início</a></li><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
242
posts/emacs.html
242
posts/emacs.html
|
|
@ -1,242 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<!-- 2024-11-02 Sat 22:57 -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Emacs</title>
|
||||
<meta name="author" content="Tukain" />
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<link rel=icon type="image/webp" href="/assets/fav.webp"> <link rel=stylesheet href="/assets/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<header><nav><ul><li><a href="/">Início</a></li></ul><ul><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<header>
|
||||
<h1 class="title">Emacs</h1>
|
||||
</header><nav id="table-of-contents" role="doc-toc">
|
||||
<h2>Table of Contents</h2>
|
||||
<div id="text-table-of-contents" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#org50a5e04">Emacs, que saudades que estava de você!</a></li>
|
||||
<li><a href="#org0b9768e">Org-mode, o criador de sites mais prático que conheço</a></li>
|
||||
<li><a href="#orgc11c89c">Zero JavaScript</a></li>
|
||||
<li><a href="#orgb9380f7">Quase um SSG… Quase.</a></li>
|
||||
<li><a href="#orgec510a0">Outras coisas que estão no meu Emacs</a></li>
|
||||
<li><a href="#org52e1954">Aos poucos, estou deixando o meu setup ser apenas um ambiente onde eu possa usar o Emacs</a></li>
|
||||
<li><a href="#orge0159a1"><i>Fin</i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<p>
|
||||
Olha só quem voltou! E mais uma vez com o site completamente mudado!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Pois é, estou de volta, e dessa vez trago comigo algumas novidades em
|
||||
relação ao site e ao meu setup atual (spoiler: tá tudo no Emacs).
|
||||
</p>
|
||||
|
||||
<div id="outline-container-org50a5e04" class="outline-2">
|
||||
<h2 id="org50a5e04">Emacs, que saudades que estava de você!</h2>
|
||||
<div class="outline-text-2" id="text-org50a5e04">
|
||||
<p>
|
||||
A um tempo eu vim tendo essa vontade de voltar a usar o Emacs, mas a
|
||||
preguiça de ter que refazer a minha config do 0 era muito grande, até
|
||||
que bem, vamos dizer que o hiperfoco atacou e eu refiz a minha
|
||||
configuração de qualquer jeito.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
A maior diferença é que eu já tenho alguma experiência no assunto,
|
||||
então não tive muita dificuldade em fazer essa nova config. Posso
|
||||
inclusive dizer que esta é, até o momento, a melhor configuração que eu
|
||||
já fiz até agora.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org0b9768e" class="outline-2">
|
||||
<h2 id="org0b9768e">Org-mode, o criador de sites mais prático que conheço</h2>
|
||||
<div class="outline-text-2" id="text-org0b9768e">
|
||||
<p>
|
||||
Apesar de ter usado diversos SSG's nos últimos tempos, nenhum deles
|
||||
possui a praticidade de simplesmente gerar uma página HTML a partir de
|
||||
um buffer que esteja aberto no seu editor com a mesma facilidade que o
|
||||
Emacs junto do Org-mode conseguem ter.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Esse site inteiro foi refeito utilizando essa ferramenta de gereção de
|
||||
sites nativa do Emacs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgc11c89c" class="outline-2">
|
||||
<h2 id="orgc11c89c">Zero JavaScript</h2>
|
||||
<div class="outline-text-2" id="text-orgc11c89c">
|
||||
<p>
|
||||
Mais uma vez, estou com 0 JS presente neste site, o que por si só já é
|
||||
uma conquista e tanto, afinal, quanto menos JS, melhor.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
E não é porque eu não tenho JS que eu perco coisas como
|
||||
<i>Table-of-contents</i> ou <i>Syntax-highlighting</i>, nada disso, ambos são
|
||||
coisas nativas do org-mode, feitos para serem utilizados e abusados.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Ele também é o melhor highlighter que eu já usei, porque literalmente
|
||||
qualquer coisa que eu tenha um syntax highlight no Emacs fica com o
|
||||
mesmo syntax-highlight no site gerado.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgb9380f7" class="outline-2">
|
||||
<h2 id="orgb9380f7">Quase um SSG… Quase.</h2>
|
||||
<div class="outline-text-2" id="text-orgb9380f7">
|
||||
<p>
|
||||
Apesar de tudo, o org-mode não vem com um SSG, essa função na
|
||||
realidade é uma ferramenta de publicação de artigos, tanto que o nome
|
||||
do pacote é ox-<b>publish</b>. Ainda assim, com um script simples e um
|
||||
pouco de elisp, você consegue ter um pouco do que um SSG consegue te
|
||||
oferecer.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
E quando eu falo um pouco, eu não tô de sacanagem, isso é tudo o que
|
||||
eu preciso para ter meu site na forma em que eu quero:
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<i>Configurando o ox-publish e automatizando o processo de criação de HTML.</i>
|
||||
</p>
|
||||
<div class="org-src-container">
|
||||
<pre class="src src-emacs-lisp">(<span style="color: #b6a0ff; font-weight: bold;">require</span> '<span style="color: #00bcff;">ox-publish</span>)
|
||||
(<span style="color: #b6a0ff; font-weight: bold;">require</span> '<span style="color: #00bcff;">package</span>)
|
||||
(add-to-list 'package-archives '(<span style="color: #79a8ff;">"melpa"</span> . <span style="color: #79a8ff;">"http://melpa.org/packages/"</span>))
|
||||
(package-initialize)
|
||||
(<span style="color: #b6a0ff; font-weight: bold;">unless</span> (package-installed-p 'use-package)
|
||||
(package-refresh-contents)
|
||||
(package-install 'use-package))
|
||||
(<span style="color: #b6a0ff; font-weight: bold;">eval-when-compile</span>
|
||||
(<span style="color: #b6a0ff; font-weight: bold;">require</span> '<span style="color: #00bcff;">use-package</span>))
|
||||
(<span style="color: #b6a0ff; font-weight: bold;">use-package</span> htmlize
|
||||
<span style="color: #f78fe7; font-weight: bold;">:ensure</span> t)
|
||||
(<span style="color: #b6a0ff; font-weight: bold;">use-package</span> kanagawa-themes
|
||||
<span style="color: #f78fe7; font-weight: bold;">:ensure</span> t
|
||||
<span style="color: #f78fe7; font-weight: bold;">:init</span> (load-theme 'kanagawa-wave t))
|
||||
(<span style="color: #b6a0ff; font-weight: bold;">require</span> '<span style="color: #00bcff;">htmlize</span>)
|
||||
(<span style="color: #b6a0ff; font-weight: bold;">setq</span> org-html-head <span style="color: #79a8ff;">"<link rel=stylesheet href=\"/assets/css/styles.css\" />"</span>
|
||||
org-html-head-include-default-style nil
|
||||
org-html-head-include-scripts nil
|
||||
org-html-preamble nil
|
||||
org-html-postamble nil
|
||||
org-html-use-infojs nil)
|
||||
(<span style="color: #b6a0ff; font-weight: bold;">setq</span> org-publish-project-alist
|
||||
(list
|
||||
(list <span style="color: #79a8ff;">"Tukain's Blog"</span>
|
||||
<span style="color: #f78fe7; font-weight: bold;">:base-directory</span> <span style="color: #79a8ff;">"./content"</span>
|
||||
<span style="color: #f78fe7; font-weight: bold;">:recursive</span> t
|
||||
<span style="color: #f78fe7; font-weight: bold;">:htmlized-source</span> t
|
||||
<span style="color: #f78fe7; font-weight: bold;">:publishing-directory</span> <span style="color: #79a8ff;">"./public"</span>
|
||||
<span style="color: #f78fe7; font-weight: bold;">:section-numbers</span> nil
|
||||
<span style="color: #f78fe7; font-weight: bold;">:publishing-function</span> 'org-html-publish-to-html)))
|
||||
(org-publish-all t)
|
||||
(message <span style="color: #79a8ff;">"Site gerado!"</span>)
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<i>Um script para executar os comandos necessários para gerar o site</i>
|
||||
</p>
|
||||
<div class="org-src-container">
|
||||
<pre class="src src-bash"><span style="color: #a8a8a8; font-style: italic;">#</span><span style="color: #a8a8a8; font-style: italic;">!/bin/</span><span style="color: #b6a0ff; font-weight: bold;">sh</span>
|
||||
|
||||
mkdir -p public && emacs -x build.el && cp -r assets/ public/
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Depois disso, o único trabalho que eu tenho é de fazer um artigo e
|
||||
listá-lo na minha homepage, e pronto!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgec510a0" class="outline-2">
|
||||
<h2 id="orgec510a0">Outras coisas que estão no meu Emacs</h2>
|
||||
<div class="outline-text-2" id="text-orgec510a0">
|
||||
<p>
|
||||
É mais que claro que o Emacs é conhecido por seus usuários que, em boa
|
||||
parte dos casos, transformam o Emacs em um sistema operacional praticamente. E
|
||||
eu não sou muito diferente deles 🤓.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Atualmente eu já configurei o Emacs o suficiente para substituir a minha
|
||||
configuração do Neovim, e também configurei coisas como:
|
||||
</p>
|
||||
|
||||
<ul class="org-ul">
|
||||
<li>Um servidor HTTP (para visualizar o meu site localmente)</li>
|
||||
<li>Um agente PGP (EasyPG).</li>
|
||||
<li>Um cliente de email (Gnus)</li>
|
||||
<li>Uma interface para o Git (Magit)</li>
|
||||
<li>Um leitor de feeds RSS (Elfeed)</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
Também estou vendo como configurar um cliente Jabber (XMPP) e vou configurar
|
||||
o Erc (o cliente IRC nativo do Emacs). Há também outras coisas que eu quero
|
||||
fazer, mas não acho que seja necessário falar sobre elas, afinal já estou
|
||||
tagarelando demais.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org52e1954" class="outline-2">
|
||||
<h2 id="org52e1954">Aos poucos, estou deixando o meu setup ser apenas um ambiente onde eu possa usar o Emacs</h2>
|
||||
<div class="outline-text-2" id="text-org52e1954">
|
||||
<p>
|
||||
Eu ainda não iniciei o meu arco Uchirra da vida e saí eliminando meus programas,
|
||||
ainda.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Eu já tenho em mente o que eu quero fazer e como eu vou fazer para conseguir
|
||||
transformar o meu setup atual em algo que serve apenas para acomodar o
|
||||
Emacs. Alguns programas que eu posso remover, por exemplo, são o Lazygit (Porque
|
||||
eu já tenho o Magit) e o lf (Porque o Emacs vem com o Dired).
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Mas vou deixar para fazer isso outra hora, afinal de contas isso vai tomar um
|
||||
pouco do meu tempo para poder concluir.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orge0159a1" class="outline-2">
|
||||
<h2 id="orge0159a1"><i>Fin</i></h2>
|
||||
<div class="outline-text-2" id="text-orge0159a1">
|
||||
<p>
|
||||
Enfim, acho que já é hora de eu para de ficar tagarelando.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Te vejo no próximo post!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<header><nav><ul><li>U:---</li><li>Emacs.org</li><li>-</li><li>2024-11-01 Fri 19:45</li><li>(Elisp<span style="color: #d0bc00">/d</span> ARev WK company)</li></ul><ul><li><a href="/">Início</a></li><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<!-- 2024-11-02 Sat 22:57 -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Blog.sh, o meu próprio SSG</title>
|
||||
<meta name="author" content="Tukain" />
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<link rel=icon type="image/webp" href="/assets/fav.webp"> <link rel=stylesheet href="/assets/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<header><nav><ul><li><a href="/">Início</a></li></ul><ul><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<header>
|
||||
<h1 class="title">Blog.sh, o meu próprio SSG</h1>
|
||||
</header><nav id="table-of-contents" role="doc-toc">
|
||||
<h2>Table of Contents</h2>
|
||||
<div id="text-table-of-contents" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#org7abf6a9">Geração de site rápida pra k7</a></li>
|
||||
<li><a href="#org8a97f5f">Por debaixo dos panos</a></li>
|
||||
<li><a href="#orgd5f590c">Por que?</a></li>
|
||||
<li><a href="#org051ad31"><i>Fin</i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<p>
|
||||
Dos produtores de "Ovorefazermeusaite", vêm aí "E se eu fizer meu próprio gerador de sites?"!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Agora falando sério, eu realmente fiz o meu próprio SSG (Static Site Generator).
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Ele não é nada demais, na realidade ele não é muito diferente dos scripts que eu fazia para conseguir criar um post novo de forma mais rápida, a diferença fica só na sofisticação do script e um pouco da forma em que ele opera.
|
||||
</p>
|
||||
|
||||
<div id="outline-container-org7abf6a9" class="outline-2">
|
||||
<h2 id="org7abf6a9">Geração de site rápida pra k7</h2>
|
||||
<div class="outline-text-2" id="text-org7abf6a9">
|
||||
<p>
|
||||
Uma coisa que é extremamente notável é a diferença na hora de fazer a geração do site. É simplesmente absurdo. É como comparar a velocidade de um jogo feito em C, para um feito em JavaScript.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
No Emacs, a geração do site feito em org-mode leva uma coisa de 2 a 4 segundos, o que é relativamente rápido, porém, o meu script leva aproximadamente 0.071 segundos para fazer a mesma coisa.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Tudo bem, eu não tenho uma tabela de conteúdo e nem o syntax highlighting, porém, essas são coisas que eu estou disposto a descartar se significar que eu vou ter uma geração de páginas dezenas de vezes mais rápida.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org8a97f5f" class="outline-2">
|
||||
<h2 id="org8a97f5f">Por debaixo dos panos</h2>
|
||||
<div class="outline-text-2" id="text-org8a97f5f">
|
||||
<p>
|
||||
O script possui um comando que cuida da criação da estrutura de arquivos e um que "compila" o site com base nessa estrutura. Como você faz para usar essa estrutura de arquivos e quais as regras impostas pelo script podem ser achadas no readme que é gerado junto do website
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Todos os arquivos dentro do diretório content são lidos pelo smu, programa que é utilizado para converter um texto no estilo Markdown para HTML.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
O smu não tem suporte para tudo o que o Markdown tem a oferecer, porém ele aceita o uso de tags HTML, então tudo o que o smu não tiver suporte pode ser substituído por uma tag.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgd5f590c" class="outline-2">
|
||||
<h2 id="orgd5f590c">Por que?</h2>
|
||||
<div class="outline-text-2" id="text-orgd5f590c">
|
||||
<p>
|
||||
Eu fiz isso puramente para ver se eu conseguiria fazer um SSG, e, se tratando de funcionalidade básica, eu consegui sem nenhum problema.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Mas um outro ponto que me fez fazer isso foi o Neovim… Olha, eu não sei se isso é algum tipo de apego ou algo do gênero, mas eu simplesmente fiquei com saudades de usar o meu Neovim. A configuração que eu tenho é equivalente à minha configuração do Emacs, não em todos os aspectos, mas quando se trata de edição de texto/código, ambos são quase os mesmos, porém o Neovim ainda leva a vantagem, porque o Neovim tem suporte ao LSP (Language Server Protocol), o que faz com que o auto-complete do Neovim seja muito mais versátil e preciso do que usar o company-mode no Emacs.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Outra coisa que eu consigo fazer agora que eu fiz o meu próprio SSG é usar ele em conjunto com o Neovim ou qualquer outro editor de texto que eu queira, basta eu salvar o arquivo e digitar o comando:
|
||||
</p>
|
||||
|
||||
<div class="org-src-container">
|
||||
<pre class="src src-bash">blog.sh build
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
E na realidade eu nem vou precisar digitar esse comando, eu já fiz um outro comando que é um equivalente ao hugo serve da vida. Tudo o que eu preciso fazer é digitar
|
||||
</p>
|
||||
|
||||
<div class="org-src-container">
|
||||
<pre class="src src-bash">blog.sh serve
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
E isso vai abrir um servidor HTTP usando o <code>python -m http.server</code> e também vai executar o comando <code>entr</code>, que serve para "ficar de olho em mudanças", e sempre que o <code>entr</code> notar alguma mudança em algum arquivo do diretório content ele mesmo executa o <code>blog.sh build</code> e atualiza as páginas.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Tudo o que eu preciso fazer agora é ficar de olho em qualquer bug que possa aparecer.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org051ad31" class="outline-2">
|
||||
<h2 id="org051ad31"><i>Fin</i></h2>
|
||||
<div class="outline-text-2" id="text-org051ad31">
|
||||
<p>
|
||||
Enfim, é isso o que eu tinha para falar por agora.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Te vejo no próximo post!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<header><nav><ul><li>U:---</li><li>Blog.sh, o meu próprio SSG.org</li><li>-</li><li>2024-11-01 Fri 19:45</li><li>(Elisp<span style="color: #d0bc00">/d</span> ARev WK company)</li></ul><ul><li><a href="/">Início</a></li><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<!-- 2024-11-02 Sat 22:57 -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>God mode</title>
|
||||
<meta name="author" content="Tukain" />
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<link rel=icon type="image/webp" href="/assets/fav.webp"> <link rel=stylesheet href="/assets/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<header><nav><ul><li><a href="/">Início</a></li></ul><ul><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<header>
|
||||
<h1 class="title">God mode</h1>
|
||||
</header><nav id="table-of-contents" role="doc-toc">
|
||||
<h2>Table of Contents</h2>
|
||||
<div id="text-table-of-contents" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#org875b01f">God mode</a></li>
|
||||
<li><a href="#orgec3220f">E quanto ao blog.sh?</a></li>
|
||||
<li><a href="#org64eb306">O estilo do site</a></li>
|
||||
<li><a href="#org4663006"><i>Fin</i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<p>
|
||||
Pois é, depois de ter feito um SSG próprio e ter dedicado um post para ele, cá estou aqui novamente, usando o Emacs, porém dessa vez não estou usando o <code>viper-mode</code>, não não, dessa vez eu estou usando algo mais… <i>abençoado?</i>
|
||||
</p>
|
||||
|
||||
<div id="outline-container-org875b01f" class="outline-2">
|
||||
<h2 id="org875b01f">God mode</h2>
|
||||
<div class="outline-text-2" id="text-org875b01f">
|
||||
<p>
|
||||
O nome é um pouco exagerado, mas isso não significa que ele não é algo que melhora <b>E MUITO</b> no uso do Emacs.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Ele basicamente faz isso aqui com o <code>Ctrl</code> e <code>Alt</code>:
|
||||
</p>
|
||||
|
||||
|
||||
<figure id="orgf415fc3">
|
||||
<img src="https://i.makeagif.com/media/5-05-2024/1KNCKC.gif" alt="1KNCKC.gif">
|
||||
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
Isso não é exagero, basicamente qualquer <i>key-chord</i> do emacs pode ser escrita sem a necessidade de usar algum modificador como o <code>Ctrl</code>, <code>Alt</code>, ou os dois ao mesmo tempo (como por exemplo a key-chord para selecionar uma palavra abaixo do cursor: <code>Ctrl Alt Espaço</code>).
|
||||
</p>
|
||||
|
||||
<p>
|
||||
A consequência disso é bem direta ao ponto na realidade, primeiro que você não tem mais o risco de adquirir uma <a href="https://pt.wikipedia.org/wiki/Les%C3%A3o_por_esfor%C3%A7o_repetitivo">L.E.R</a> da vida por ficar apertando o <code>Ctrl</code> como se não houvesse amanhã, segundo que, caso você tenha uma memória muscular boa, é possível ter um workflow tão eficiente quanto (senão até mais) um Vim-like. E isso inclui o <code>Evil-mode</code>, que faz com que o Emacs se comporte como o Vim, se tratando de teclas de atalho.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgec3220f" class="outline-2">
|
||||
<h2 id="orgec3220f">E quanto ao <a href="https://codeberg.org/tukain/blog.sh">blog.sh</a>?</h2>
|
||||
<div class="outline-text-2" id="text-orgec3220f">
|
||||
<p>
|
||||
Tendo em vista que eu já estou usando o <code>org-mode</code> novamente para desenvolver o meu site, o futuro dele é incerto. Ele é algo que eu fiz em um momento de hiperfoco extremamente aleatório e também enquanto eu estava entediado e procurando algo para me divertir.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Mas não posso garantir nada, da mesma forma que eu já fiz e refiz o meu site centenas de vezes, eu posso voltar a usar o <code>blog.sh</code> novamente, mas no momento, eu prefiro continuar com o <code>org-mode</code>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org64eb306" class="outline-2">
|
||||
<h2 id="org64eb306">O estilo do site</h2>
|
||||
<div class="outline-text-2" id="text-org64eb306">
|
||||
<p>
|
||||
Vira e mexe eu me pego observando como o design do site está. A minha ideia com o estilo dele é ser o mais flexível possível, enquanto ao mesmo tempo seja minimalista, legível, e claro, agradável aos olhos.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
A consequência disso foi um site que, não importando a página, parece algum artigo de site de notícias quando visto usando a função de leitura de alguns navegadores.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Eu já tenho umas ideias sobre o que eu posso fazer para dar um pequeno upgrade na aparência, sem ser algo extremamente radical (como foram as últimas mudanças nesse site).
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Em relação ao tema que eu uso (Kanagawa Wave), eu não sei dizer por quanto tempo ele vai durar, já uso ele a +/- 3 semanas, mas não chega perto dos meses que eu fiquei usando o Gruvbox em tudo.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Enfim, isso é uma incógnita que eu prefiro não saber quando deixará de ser uma, afinal de contas, no momento em que eu estou escrevendo este post, a Kanagawa Wave é a minha nova favorita.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org4663006" class="outline-2">
|
||||
<h2 id="org4663006"><i>Fin</i></h2>
|
||||
<div class="outline-text-2" id="text-org4663006">
|
||||
<p>
|
||||
Enfim, chega de ficar tagarelando com coisas que ninguém liga.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Até o próximo post!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<header><nav><ul><li>U:---</li><li>God mode.org</li><li>-</li><li>2024-11-01 Fri 19:45</li><li>(Elisp<span style="color: #d0bc00">/d</span> ARev WK company)</li></ul><ul><li><a href="/">Início</a></li><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
103
posts/hare.html
103
posts/hare.html
|
|
@ -1,103 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<!-- 2024-11-02 Sat 22:57 -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Hare</title>
|
||||
<meta name="author" content="Tukain" />
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<link rel=icon type="image/webp" href="/assets/fav.webp"> <link rel=stylesheet href="/assets/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<header><nav><ul><li><a href="/">Início</a></li></ul><ul><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<header>
|
||||
<h1 class="title">Hare</h1>
|
||||
</header><nav id="table-of-contents" role="doc-toc">
|
||||
<h2>Table of Contents</h2>
|
||||
<div id="text-table-of-contents" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#orgd601633">Praticamente C, mas com diversas melhorias</a></li>
|
||||
<li><a href="#org998c83a">QBE como backend</a></li>
|
||||
<li><a href="#orgf5dd552">O que eu planejo fazer aprendendo a programar?</a></li>
|
||||
<li><a href="#org3df87a1"><i>Fin</i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="outline-container-orgd601633" class="outline-2">
|
||||
<h2 id="orgd601633">Praticamente C, mas com diversas melhorias</h2>
|
||||
<div class="outline-text-2" id="text-orgd601633">
|
||||
<p>
|
||||
A Hare é uma linguagem da família das linguagens C-like, e a sua sintaxe deixa isso bem explícito, porém, ela tem algumas das inovações das últimas décadas consigo e também se inspira na sintaxe de outras linguagens, como a Rust.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Porém, diferente de Rust, você não vai ter que esperar por minutos ou horas para o compilador terminar o serviço, nem quebrar a cabeça com o seu código para que ele seja "memory safe", ela não tem garbage collectors nem nada desse tipo, é como eu disse, ela é praticamente C.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Contudo, ela não é uma linguagem com as mesmas limitações ou problemas que C possui, e além disso ela tem uma sintaxe que, para mim, não só é mais clara, como mais fácil de entender o que está acontecendo.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Claramente isso é apenas algo que depende da minha experiência, mas até mesmo a minha namorada conseguiu entender como um Struct estava sendo usado em um dos exemplos que eu escrevi em Hare, enquanto isso, o mesmo exemplo em C foi… Confuso para dizer no mínimo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org998c83a" class="outline-2">
|
||||
<h2 id="org998c83a">QBE como backend</h2>
|
||||
<div class="outline-text-2" id="text-org998c83a">
|
||||
<p>
|
||||
O compilador da Hare usa o QBE Backend, o que torna o compilador dela
|
||||
extremamente rápido e leve, e também facilita o processo de criar ports do
|
||||
compilador para outras arquiteturas. Eu não irei entrar muito em detalhes sobre
|
||||
o que é um Compiler Backend, mas devo parafrasear algo vindo do próprio site do
|
||||
QBE:
|
||||
</p>
|
||||
|
||||
<blockquote>
|
||||
<p>
|
||||
QBE é um backend para compiladores, com o foco de providenciar 70% da
|
||||
performance de compiladores otimizados da indústria com 10% do código.
|
||||
</p>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
De certa forma, o QBE se encaixa até mesmo na filosofia suckless, o que para mim
|
||||
pelo menos, é um grande ponto possitivo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgf5dd552" class="outline-2">
|
||||
<h2 id="orgf5dd552">O que eu planejo fazer aprendendo a programar?</h2>
|
||||
<div class="outline-text-2" id="text-orgf5dd552">
|
||||
<p>
|
||||
Atualmente, eu vejo a programação como um hobbie para mim, um hobbie que eu gosto e muito, mas isso não me impede de colocar essa habilidade no meu currículo, um dia isso pode vir a ser extremamente útil.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Por enquanto eu estou aprendendo o básico, recém fiz o meu primeiro Struct, ainda falta muito para eu dizer que eu sei fazer alguma coisa, quanto mais dizer que eu sei programar. Mas isso só depende do meu esforço, então irei correr atrás.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org3df87a1" class="outline-2">
|
||||
<h2 id="org3df87a1"><i>Fin</i></h2>
|
||||
<div class="outline-text-2" id="text-org3df87a1">
|
||||
<p>
|
||||
Enfim, é isso, até o próximo post!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<header><nav><ul><li>U:---</li><li>Hare.org</li><li>-</li><li>2024-11-01 Fri 19:45</li><li>(Elisp<span style="color: #d0bc00">/d</span> ARev WK company)</li></ul><ul><li><a href="/">Início</a></li><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,151 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<!-- 2024-11-02 Sat 22:57 -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Tô usando o Proton</title>
|
||||
<meta name="author" content="Tukain" />
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<link rel=icon type="image/webp" href="/assets/fav.webp"> <link rel=stylesheet href="/assets/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<header><nav><ul><li><a href="/">Início</a></li></ul><ul><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<header>
|
||||
<h1 class="title">Tô usando o Proton</h1>
|
||||
</header><nav id="table-of-contents" role="doc-toc">
|
||||
<h2>Table of Contents</h2>
|
||||
<div id="text-table-of-contents" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#org7820a3c">Por que?</a></li>
|
||||
<li><a href="#org77394fe">Mudanças no armazenamento</a></li>
|
||||
<li><a href="#org43d020f">Uma senha praticamente impossível de digitar para a minha conta do Google</a></li>
|
||||
<li><a href="#orgf483f4b"><i>Fin</i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<p>
|
||||
Depois de aproximadamente 1 ano, eu criei uma nova conta no <a href="https://proton.me">Proton</a>.
|
||||
Um serviço de e-mail/calendário online/VPN/cloud storage/gerenciador
|
||||
de senhas/carteira de bitcoin, enfim, um serviço que foca em prover
|
||||
basicamente as ferramentas que comumemte utilizamos com mais frequência
|
||||
do Google (Gmail, Google Calendar, Google Drive, Google Passwords) com
|
||||
aquela pitada de privacidade que só a mão do Shaquille O'Neal
|
||||
consegue fazer.
|
||||
</p>
|
||||
|
||||
<div id="outline-container-org7820a3c" class="outline-2">
|
||||
<h2 id="org7820a3c">Por que?</h2>
|
||||
<div class="outline-text-2" id="text-org7820a3c">
|
||||
<p>
|
||||
Nas últimas semanas eu comecei a voltar ao meu antigo estilo de vida
|
||||
sem o Google, o fato de eu ter conseguido um emprego foi um
|
||||
facilitador nesse aspecto. No dia do aniversário do meu irmão, eu
|
||||
troquei de celular com ele, dando o meu Poco M4 Pro para ele e ficando
|
||||
com o Moto G52 dele.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Essa não foi a primeira vez que a gente fez isso, na verdade na
|
||||
primeira vez que fiz isso com ele foi porque o Moto G52 possui uma
|
||||
ROM oficial da LineageOS disponível, e digamos que quando eu
|
||||
descobri isso eu tive uma <a href="https://i.pinimg.com/736x/87/07/97/8707972a759975b07d188308c948cc27.jpg">ativação neural</a> e no mesmo dia a gente fez
|
||||
essa troca. E claro, eu coloquei a Lineage no G52.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Enfim, vou cortar um pouco da história e pular para o presente.
|
||||
Depois que eu fiquei com o G52 com a Lineage instalada novamente,
|
||||
eu comecei a fazer uma especie de "detox digital", mas eu não estava
|
||||
deletando contas, eu estava desvinculando o Google delas. Porém, uma
|
||||
coisa que estava sendo uma pedra no meu caminho era o Gmail, e bem, eu
|
||||
tenho e-mails alternativos, mas os servidores deles são lentos o
|
||||
suficiente para que eu basicamente só leia um e-mail 1 hora depois
|
||||
que eu "recebi" ele.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Tendo isso em mente, eu criei uma nova conta no Proton, que dentre
|
||||
várias coisas, também me dá acesso a 10 e-mail aliases. O que me
|
||||
permite remover o Gmail da jogada, e mesmo as coisas que não estão
|
||||
(ainda) usando aliases não ficam presas no limbo, já que o Proton me
|
||||
permite receber os e-mails do Gmail, no Proton, ou seja, eu não
|
||||
preciso nem mesmo abrir o Gmail para ler os e-mails que chegam por lá.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org77394fe" class="outline-2">
|
||||
<h2 id="org77394fe">Mudanças no armazenamento</h2>
|
||||
<div class="outline-text-2" id="text-org77394fe">
|
||||
<p>
|
||||
Ano passado, quando eu tinha uma conta no Proton, o armazenamento era
|
||||
bem limitado, somente 1Gb (depois de fazer uma configuração na conta,
|
||||
o padrão era 512Mb) era disponível. Esses 1Gb eram compartilhado entre
|
||||
o serviço de e-mail/calendário e o de cloud storage. Não sei se já
|
||||
ficou claro, mas 1Gb não é lá muita coisa para um serviço de cloud
|
||||
storage, muito menos quando isso é compartilhado com outros serviços.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Mas, com a nova conta que criei ainda hoje, eu reparei que no serviço
|
||||
de e-mail o armazenamento continua sendo de 1Gb, porém o serviço de
|
||||
cloud storage se inicia com 3Gb! Podendo ser aumentado para 5Gb depois
|
||||
de seguir um passo a passo de configuração!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Isso é algo que eu simplesmente não tava esperando, mas é uma mudança
|
||||
mais que bem vinda, porque eu posso mover os arquivos que eu tinha no
|
||||
Google Drive para cá com muito mais folga.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org43d020f" class="outline-2">
|
||||
<h2 id="org43d020f">Uma senha praticamente impossível de digitar para a minha conta do Google</h2>
|
||||
<div class="outline-text-2" id="text-org43d020f">
|
||||
<p>
|
||||
Eu também estou dificultando ao máximo o meu login do Google,
|
||||
praticamente tornando impossível que eu faça login sem utilizar o
|
||||
KeePass, o que por sua vez, faz com que eu deixe de utilizar um
|
||||
sistema que não seja uma distro linux, no caso do meu pc, ou a
|
||||
LinageOS, no meu celular.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
O KeePassXC havia lançado a +/- 2 meses atrás uma função que te
|
||||
permite criar passkeys utilizando o próprio KeePassXC, o que elimina a
|
||||
necessidade de um celular com a Google impregnada ou um iPhone. Óbviamente eu já passei a limpa em todas as contas que eu usava uma passkey da Google e gerei novas usando o KeePassXC.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Tudo isso me deixa cada vez menos dependente do Google, o que é algo
|
||||
que sinceramente qualquer pessoa deveria tentar fazer. Não só com o
|
||||
Google, mas com basicamente qualquer uma dessas empresas que até um
|
||||
idoso de 90 anos reconhece de tão popular.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgf483f4b" class="outline-2">
|
||||
<h2 id="orgf483f4b"><i>Fin</i></h2>
|
||||
<div class="outline-text-2" id="text-orgf483f4b">
|
||||
<p>
|
||||
Enfim, acho que já tagarelei demais.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Até o próximo post!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<header><nav><ul><li>U:---</li><li>Tô usando o Proton.org</li><li>-</li><li>2024-11-01 Fri 19:45</li><li>(Elisp<span style="color: #d0bc00">/d</span> ARev WK company)</li></ul><ul><li><a href="/">Início</a></li><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,416 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<!-- 2024-11-02 Sat 22:57 -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Vale da estranheza</title>
|
||||
<meta name="author" content="Tukain" />
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<link rel=icon type="image/webp" href="/assets/fav.webp"> <link rel=stylesheet href="/assets/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<header><nav><ul><li><a href="/">Início</a></li></ul><ul><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<header>
|
||||
<h1 class="title">Vale da estranheza</h1>
|
||||
</header><nav id="table-of-contents" role="doc-toc">
|
||||
<h2>Table of Contents</h2>
|
||||
<div id="text-table-of-contents" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#org165ee77">Eu não sou um cara que curte terror</a></li>
|
||||
<li><a href="#org5e50f09">A presença do Vale da estranheza na mídia que consumo</a>
|
||||
<ul>
|
||||
<li><a href="#orgc04f167">Jogos</a></li>
|
||||
<li><a href="#org60f5edb">Animes</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#org3b03c80">Espaços liminares</a>
|
||||
<ul>
|
||||
<li><a href="#orge46ac9b">The Backrooms</a>
|
||||
<ul>
|
||||
<li><a href="#org871cdb7">Kane Pixels</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#orgc6a2ef6">Analog horror</a>
|
||||
<ul>
|
||||
<li><a href="#orgf377c51">Nephthys Media</a></li>
|
||||
<li><a href="#org57285e5">The Mandela Catalogue</a></li>
|
||||
<li><a href="#orgd9c6146">The Walden Files</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#org9fb75fe"><i>Fin</i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<p>
|
||||
Esse é um assunto que volta e meia me vem à cabeça. Mas, por qual razão? Bem, os motivos são vários na realidade. Seja no meu consumo de mídia, pela minha navegação na internet ou então até mesmo na vida real, o tal chamado "Vale da estranheza" sempre se mostra uma hora ou outra.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
O curioso disso é como ele é retradado em várias formas de entretenimento. Filmes, séries, animes, jogos, todos eles têm um aspecto principal idêntico na maioria das vezes: O terror.
|
||||
</p>
|
||||
|
||||
<div id="outline-container-org165ee77" class="outline-2">
|
||||
<h2 id="org165ee77">Eu não sou um cara que curte terror</h2>
|
||||
<div class="outline-text-2" id="text-org165ee77">
|
||||
<p>
|
||||
não, nada disso, muito pelo contrário, eu sou do tipo que prefere assitir uma comédia romântica à ter que assitir um filme de terror. Mas, esse sub-gênero (e outros como ele) me atrai. Isso é algo difícil de explicar, porém tenho certeza que não sou o único a pensar assim: Apesar de dar calafrios, eu tenho uma curiosidade que aumenta cada vez mais.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
A minha primeira exposição ao vale da estranheza foi, provavelmente como muitas outras pessoas, com o meme do senhor incrível.
|
||||
</p>
|
||||
|
||||
|
||||
<figure id="orgd5364e3">
|
||||
<img src="../assets/img/sr_incrivel.png" alt="sr_incrivel.png">
|
||||
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
É óbvio que esse meme não é a <b>melhor</b> representação do Vale da estranheza, mas ele já é uma boa demonstração do que ele pode ser. O sentimento que imagens do Vale da estranheza proporcionam é o de… desconforto. Pelo menos no meu caso esse é o sentimento. Algo que está errado, de alguma forma, e você consegue perceber, porém, ele também te lembra algo que não lhe é estranho, mundano, comum. Esse conflito gera esse desconforto esquisito.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Esse meme ficou popular, e por consequência eu consumi muitos vídeos no youtube contendo esse meme, fazendo assim com que o algorítimo me recomendasse vídeos contendo temas relacionados e afins. Então, eu foi exposto à um outro gênero similar ao Vale: Os espaços liminares. Depois eu comento mais sobre eles.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Apesar disso, eu, por algum motivo que só Deus sabe, tenho um interesse nesse estilo de terror, e em outros estilos similares/derivados dele.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Isso me torna alguém que gosta de terror mas só não quer admitir? Provavelmente. Mas estamos na internet e são poucos os que querem ser coerentes por aqui.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org5e50f09" class="outline-2">
|
||||
<h2 id="org5e50f09">A presença do Vale da estranheza na mídia que consumo</h2>
|
||||
<div class="outline-text-2" id="text-org5e50f09">
|
||||
</div>
|
||||
<div id="outline-container-orgc04f167" class="outline-3">
|
||||
<h3 id="orgc04f167">Jogos</h3>
|
||||
<div class="outline-text-3" id="text-orgc04f167">
|
||||
<p>
|
||||
Uns meses atrás, eu comecei a jogar <a href="https://en.wikipedia.org/wiki/Silent_Hill_(video_game)">Silent Hill</a>, um clássico do Playstation 1. O jogo constantemente te dá calafrios por toda a gameplay. É um ótimo exemplo do que é possível fazer mesmo tendo diversas limitações. No caso, um exemplo de como fazer alguém infartar.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Devido às limitações da época, existe uma presença fortíssima de compressão de alguns assets, como por exemplo, as texturas e os efeitos sonoros. No caso das texturas, em alguns momentos é difícil até mesmo dizer se o que tá na sua frente é uma mancha de sujeira, uma queimadura ou então até mesmo sangue ressecado. Literalmente o seu cérebo é quem vai decidir da hora.
|
||||
</p>
|
||||
|
||||
|
||||
<figure id="org1e859f3">
|
||||
<img src="../assets/img/SH1_rifle.jpg" alt="SH1_rifle.jpg">
|
||||
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
Outra coisa boa a se comentar é a visão extremamente limitada. Isso é uma limitação do próprio hardware do Playstation, mas a equipe que fez Silent Hill contornou isso e transformou em parte da gameplay. E olha, se tem uma coisa que me assusta, é não saber se o que tá na minha frente é um ser humano, ou outra coisa que provavelmente não tá afim de conversar.
|
||||
</p>
|
||||
|
||||
|
||||
<figure id="org4d889cf">
|
||||
<img src="../assets/img/silent_hill_screenshot_03.jpg" alt="silent_hill_screenshot_03.jpg">
|
||||
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
Infelizmente eu perdi o meu save do jogo, eu estava na seção do parque de diversões, por conta da frustração de ter perdido o save e também por preguiça de ter que jogar tudo de novo, eu acabei não jogando mais. Porém, esse jogo tem o meu respeito. Ele tem pouquíssimos jumpscares, a maior parte da gameplay ele simplesmente ataca a sua ansiedade e te deixa apreensivo, mas ainda assim ele sabe dosar, e muito bem, quando ele deve fazer o seu coração bater um tanto mais rápido.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org60f5edb" class="outline-3">
|
||||
<h3 id="org60f5edb">Animes</h3>
|
||||
<div class="outline-text-3" id="text-org60f5edb">
|
||||
<p>
|
||||
Mais recentemente foi lançado na Netflix a adaptação do mangá <a href="https://en.wikipedia.org/wiki/Dandadan">Dandadan</a>, mas eu não o conheci por trailers ou por que me foi recomendado na home da Netflix. Eu fui apresentado à esse mangá por meio de um youtuber que acompanho, o <a href="https://www.youtube.com/@CentralNaythf">Naythf</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="https://youtu.be/eUQiwNVp6MU?si=M4N2eF5DmrYD7ZFp">No vídeo que ele comenta sobre Dandadan</a>, o Naythf fala sobre vários aspectos do mangá, como por exemplo os temas abordados e gêneros da obra. O curioso para mim foi a parte de terror do mangá. No maior estilo <a href="https://en.wikipedia.org/wiki/Junji_Ito">Junji Ito</a>, as partes de terror focam (e muito) na estranheza. Não sei dizer se chega a poder ser considerado algo do Vale, mas no mínimo chega perto.
|
||||
</p>
|
||||
|
||||
|
||||
<figure id="orgcefb400">
|
||||
<img src="../assets/img/dandadan-manga-primo-capitolo-05.jpg" alt="dandadan-manga-primo-capitolo-05.jpg">
|
||||
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
Uma outra aparição de algo que me lembra o vale da estranheza foi no anime <a href="https://en.wikipedia.org/wiki/Chainsaw_Man">Chainsaw Man</a>, no caso em uma de suas finalizações de episódio. Para ser mais exato, na <a href="https://www.youtube.com/watch?v=ymQ3wEIq84Y">5ª finalização</a>.
|
||||
</p>
|
||||
|
||||
|
||||
<figure id="orgb5c03b8">
|
||||
<img src="../assets/img/chainsaw-man-ending-5.webp" alt="chainsaw-man-ending-5.webp">
|
||||
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
Sei que a intenção não era exatamente o Vale, mas ainda assim não consigo assistir essa finalização sem fazer essa comparação.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Todo o cenário e a ambientação em que os personagens estão me lembram também os Espaços Liminares. Não seria uma surpresa para mim se essa semelhança fosse intencional, afinal, tanto o anime quanto os Espaços Liminares ficaram em alta +/- na mesma época.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org3b03c80" class="outline-2">
|
||||
<h2 id="org3b03c80">Espaços liminares</h2>
|
||||
<div class="outline-text-2" id="text-org3b03c80">
|
||||
<p>
|
||||
Os espaços liminares tomam um rumo semelhante ao Vale, porém ele se diverge em um ponto: Na ambientação.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
A ambientação dos espaços liminares é bem característica, são lugares que você espera que vá ter algo ou alguém por lá, mas, não há nada. Somente o que foi deixado por lá.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Sinceramente esse gênero de terror é o que mais me dá medo, por quê diferente de um alien vestido de ser humano e um cachorro assassino sem pele, um espaço liminar é perfeitamente possível na vida real. Na realidade eles não são possíveis, eles <b>existem</b>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Essa é a parte que mais pega nos meus nervos. O fato de você não só ver ou achar, mas até mesmo de você ter alguma lembrança com o local. Como por exemplo, um parque aquático abandonado. Apesar de nunca ter ido a um pessoalmente, até mesmo eu fico com calafrios em ver algo como isso:
|
||||
</p>
|
||||
|
||||
|
||||
<figure id="org77fd060">
|
||||
<img src="../assets/img/liminal.webp" alt="liminal.webp">
|
||||
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
Não tem nada de errado com o local em si, nem com a imagem, porém, ainda assim, algo parece estar errado.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Uma explicação dada por muitas pessoas na internet é a de que o motivo desse desconforto vêm do fato de você esperar vem alguém na foto, por ser um local público e por você sempre ver um local como esse, populado.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
A verdade é que cada pessoa tem uma reação à espaços como esses, no meu caso eu sinto calafrios, quase como se tivesse algo a mais na foto, mas que eu não estou enxergando, para outras pessoas, é só uma foto de um lugar vazio.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Mas sem sombra de dúvidas, uma das modas da internet relacionada a esse tema que mais me intrigou foram as <a href="https://en.wikipedia.org/wiki/The_Backrooms">Backrooms</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orge46ac9b" class="outline-3">
|
||||
<h3 id="orge46ac9b">The Backrooms</h3>
|
||||
<div class="outline-text-3" id="text-orge46ac9b">
|
||||
|
||||
<figure id="org9aad2d8">
|
||||
<img src="../assets/img/HobbyTown_USA_Oshkosh_interior_under_construction_2002_(The_Backrooms).jpg" alt="HobbyTown_USA_Oshkosh_interior_under_construction_2002_(The_Backrooms).jpg">
|
||||
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
Tudo começou com um post na aba paranormal do 4chan, a mensagem do usuário em si não tinha nada de mais, porém a resposta é uma coisa completamente a parte.
|
||||
</p>
|
||||
|
||||
<blockquote>
|
||||
<p>
|
||||
If you're not careful and you noclip out of reality in the wrong areas, you'll end up in the Backrooms, where it's nothing but the stink of old moist carpet, the madness of mono-yellow, the endless background noise of fluorescent lights at maximum hum-buzz, and approximately six hundred million square miles of randomly segmented empty rooms to be trapped in
|
||||
</p>
|
||||
|
||||
<p>
|
||||
God save you if you hear something wandering around nearby, because it sure as hell has heard you
|
||||
</p>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
E é com essa resposta que nasce um fenômeno na internet, um <a href="https://en.wikipedia.org/wiki/Alternate_reality_game">ARG</a>, e claro, uma fandom.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
O que mais me deixou intrigado foi a semelhança dos ARG's de The Backrooms com a <a href="https://en.wikipedia.org/wiki/SCP_Foundation">SCP Foundation</a>. Cada sala em The Backrooms tem um padrão, um método a seguir para conseguir fugir, e claro, algum tipo de anomalia presente. Seja ela uma criatura humanoide ou até mesmo um sorriso flutuante.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The Backrooms ficou tão popular que ultrapassou o gênero de <a href="https://en.wikipedia.org/wiki/Analog_horror">Analog Horror</a> (o meu gênero favorito de terror). Diversos criadores de conteúdo fizeram vídeos comentando sobre, teorizando, fazendo gameplays de alguns jogos com esse tema.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org871cdb7" class="outline-4">
|
||||
<h4 id="org871cdb7"><a href="https://www.youtube.com/c/KANEpixels">Kane Pixels</a></h4>
|
||||
<div class="outline-text-4" id="text-org871cdb7">
|
||||
<p>
|
||||
Esse carinha fez as Backrooms simplesmente explodirem.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Durante a onda de vídeos sobre as Backrooms, os vídeos dele se destacavam (e muito) entre todos os outros. Seja por qualidade técnica ou por ambientação, os vídeos que ele produzia (e produz até hoje) são de cair o queixo.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Ele não só conseguiu fazer uma combinação de Analog Horror com The Backrooms, como fez isso beirando a perfeição.
|
||||
</p>
|
||||
|
||||
|
||||
<figure id="orga72dbf6">
|
||||
<img src="../assets/img/The-Backrooms-Kane-Pixels-01.jpg" alt="The-Backrooms-Kane-Pixels-01.jpg">
|
||||
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
Foi basicamente dos vídeos dele que surgiu a inspiração de diversos jogos que se vê por aí na Steam ou Itch.io.
|
||||
</p>
|
||||
|
||||
|
||||
<figure id="org01a3283">
|
||||
<img src="../assets/img/smii7y_return_to_the_backrooms.webp" alt="smii7y_return_to_the_backrooms.webp">
|
||||
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgc6a2ef6" class="outline-2">
|
||||
<h2 id="orgc6a2ef6">Analog horror</h2>
|
||||
<div class="outline-text-2" id="text-orgc6a2ef6">
|
||||
<p>
|
||||
Bem, já que eu mencionei ele, por quê não comentar sobre?
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Assim como The Backrooms, esse gênero ficou extremamente popular uns tempos atrás. Começando uma febre com vídeos do universo de <a href="https://en.wikipedia.org/wiki/Five_Nights_at_Freddy%27s">FNAF</a>, poís é, FNAF. A maior parte desses vídeos giravam em torno de serem fitas de uso interno da empresa - Fitas de treinamento, relatórios gravados, filmagens de segurança - e que não eram feitas para serem consumidas por pessoas não-autorizadas.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Mas sempre, de alguma forma, alguém conseguia acesso às fitas e colocava as gravações na internet.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
A parte mais interessante de alguns desses vídeos era a parte técnica, muitos deles eram quase que um "olha só o que eu sei fazer".
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Pois é, esse tema ficou saturado beeeeem rápido. Mas, algumas pessoas viram potêncial nesse estilo de terror, e decidiram criar universos próprios, tendo como uma base o horror analógico.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Coisas como <a href="https://www.youtube.com/@blackdrag0nfish">Nephthys Media</a>, que exploravam um horror cósmico, começaram a surgir. O que foi um fator que me fez ter interesse nesse gênero.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgf377c51" class="outline-3">
|
||||
<h3 id="orgf377c51">Nephthys Media</h3>
|
||||
<div class="outline-text-3" id="text-orgf377c51">
|
||||
|
||||
<figure id="orge0fbc87">
|
||||
<img src="../assets/img/hqdefault.jpg" alt="hqdefault.jpg">
|
||||
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
Apesar de não lembrar de praticamente nada do Nephthys Media, uma coisa que não tem como eu me esquecer é a atmosfera presente nele, é algo que me lembra os Espaços Liminares. É um desconforto constante e a impressão de que tem algo a mais que eu não estou enxergando.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Pode se dizer que esse analog horror em específico é o responsável por eu ter um certo medo de astros.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
O enredo gira em torno de entidades que habitam os astros e em seus planos. Como disse eu não lembro de muita coisa, mas ainda assim é algo que eu recomendo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org57285e5" class="outline-3">
|
||||
<h3 id="org57285e5">The Mandela Catalogue</h3>
|
||||
<div class="outline-text-3" id="text-org57285e5">
|
||||
<p>
|
||||
Outro que ficou extremamente popular, mas que o criador perdeu a mão.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Ele explora a bizarrice que são <a href="https://en.wikipedia.org/wiki/Doppelg%C3%A4nger">Doppelgängers</a>, e pelo menos no início da minisérie, consegue fazer isso muito bem até.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
O maior problema do Mandela Catalogue é que o seu criador acabou enjoando da própria obra e quis fazer dela algo "maior". Vamos dizer que ele voou muito perto do sol e acabou estragando a minisérie, pelo menos para mim, eu já não tenho o mínimo de interesse por ela depois do 2º capítulo.
|
||||
</p>
|
||||
|
||||
|
||||
<figure id="org9619474">
|
||||
<img src="../assets/img/catalogue-mondela-mandela-magazine.gif" alt="catalogue-mondela-mandela-magazine.gif">
|
||||
|
||||
</figure>
|
||||
<div class="org-center">
|
||||
<p>
|
||||
<a href="https://www.youtube.com/watch?v=gk4AlxnZOYc">The Mandela Magazine</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Uma coisa que pode ser aprendida com o caso do Mandela Catalogue é a seguinte: Se a sua obra se tornou popular por conta da ambientação e do mistério que gira em torno de algo quase que no estilo Lovecraft de absurdo, não transforma ela em uma minisérie de terror adolescente.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-orgd9c6146" class="outline-3">
|
||||
<h3 id="orgd9c6146">The Walden Files</h3>
|
||||
<div class="outline-text-3" id="text-orgd9c6146">
|
||||
<p>
|
||||
Esse me dá arrepios só de lembrar.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The Walden Files é um ARG que tem inspirações em FNAF e em The Mandela Catalogue. Porém, só somente inspirações, ele é uma obra que não só se destaca como também elevou o padrão do gênero de Analog Horror.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Ele genuinamente me dá medo. Medo ao ponto de que eu só consumi ele por intermédio de um youtuber, o <a href="https://www.youtube.com/@pombatomico">Pombo Atômico</a> e de dia na maior parte das vezes.
|
||||
</p>
|
||||
|
||||
|
||||
<figure id="orgd6b5a65">
|
||||
<img src="../assets/img/walden_files.webp" alt="walden_files.webp">
|
||||
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
Ele também é extremamente gráfico e sonoro. Não é algo que eu recomendaria para a minha namorada por exemplo.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Mas a história que é contada… Olha, faz valer a pena. É com um dedo de FNAF, mas contada de uma forma coesa durante toda a obra e sem entregar fria e sem bandeja. Do início ao fim a sua curiosidade é instigada.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
É uma ótima obra para se ver no Halloween. E talvez uma ótima obra para não assitir enquanto você está comendo alguma coisa.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org9fb75fe" class="outline-2">
|
||||
<h2 id="org9fb75fe"><i>Fin</i></h2>
|
||||
<div class="outline-text-2" id="text-org9fb75fe">
|
||||
<p>
|
||||
Bem, isso é tudo o que eu tinha a comentar por agora. O halloween está chegando e eu quis dar os meus 5 centávos aqui.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Te vejo no próximo post!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<header><nav><ul><li>U:---</li><li>Vale da estranheza.org</li><li>-</li><li>2024-11-01 Fri 19:45</li><li>(Elisp<span style="color: #d0bc00">/d</span> ARev WK company)</li></ul><ul><li><a href="/">Início</a></li><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<!-- 2024-11-02 Sat 22:57 -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Vi, só que dentro do Emacs!</title>
|
||||
<meta name="author" content="Tukain" />
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<link rel=icon type="image/webp" href="/assets/fav.webp"> <link rel=stylesheet href="/assets/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<header><nav><ul><li><a href="/">Início</a></li></ul><ul><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<header>
|
||||
<h1 class="title">Vi, só que dentro do Emacs!</h1>
|
||||
</header><nav id="table-of-contents" role="doc-toc">
|
||||
<h2>Table of Contents</h2>
|
||||
<div id="text-table-of-contents" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#org14eee20">Viper</a></li>
|
||||
<li><a href="#orgb2e39f8">Bem, e como é usar ele?</a></li>
|
||||
<li><a href="#orgd5dfddc"><i>Fin</i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<p>
|
||||
Esse mostro de um programa é tão cheio de coisa para se falar que já garantiu até uma trilogia nesse blog.
|
||||
</p>
|
||||
|
||||
<div id="outline-container-org14eee20" class="outline-2">
|
||||
<h2 id="org14eee20">Viper</h2>
|
||||
<div class="outline-text-2" id="text-org14eee20">
|
||||
<p>
|
||||
A um pouco mais de 3 horas atrás, enquanto eu ainda estava no meu trabalho, eu fiquei pesquisando um pouco sobre o Emacs, e eu acabei achando o diretório de manuais de referência dele. Dois deles me chamaram (e muito) a minha atenção, os manuais de referência do vip-mode e do <code>viper-mode</code>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Obviamente que quando eu vi esses manuais eu cliquei neles para ver do que eles se tratavam, e bom, eles são modos que emulam os controles do VI, o editor de texto modal que vem com qualquer sistema Unix e que foi dele que surgiu o Vim (VI iMproved).
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Eu decidi usar o <code>viper</code> no lugar do vip só porque ele aparenta ser uma opção mais completa em comparação. Ele chega no nível de até mesmo ter um mini-tutorial e um wizard perguntando qual o seu nível de expertise com ele.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgb2e39f8" class="outline-2">
|
||||
<h2 id="orgb2e39f8">Bem, e como é usar ele?</h2>
|
||||
<div class="outline-text-2" id="text-orgb2e39f8">
|
||||
<p>
|
||||
Como já disse, o <code>viper</code> emula o VI e não o Vim (isso é o que o evil-mode faz), sendo assim ele não tem as mesmas teclas/comandos que o Vim possui. Porém, você ainda pode usar as teclas do Emacs em conjunto com as teclas do VI, o que mais que compensa, <b>na minha opinião</b>, a falta das teclas do Vim.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Só de ter uma parte das teclas que são usadas no Vim já torna a minha experiência muito melhor. Afinal, apesar do Emacs ser um programa que é ótimo em diversos aspectos, as teclas de atalho dele não são particularmente um ponto positivo dele.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
E é claro que como tudo no Emacs, eu posso customizar o <code>viper</code> e adicionar os comandos que eu acho extremamente úteis do Vim, no <code>viper</code>, criando assim um Frankenstein que nunca deveria ter nascido.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
A minha configuração dele, inclusive, está bem modesta, com poucas linhas de código, mas já são o suficiente para deixar o meu uso do Emacs 10 vezes mais aconchegante.
|
||||
</p>
|
||||
|
||||
<div class="org-src-container">
|
||||
<pre class="src src-emacs-lisp">(<span style="color: #b6a0ff; font-weight: bold;">setq</span> viper-mode t)
|
||||
(<span style="color: #b6a0ff; font-weight: bold;">require</span> '<span style="color: #00bcff;">viper</span>)
|
||||
(<span style="color: #b6a0ff; font-weight: bold;">setq</span> viper-inhibit-startup-message 't)
|
||||
(<span style="color: #b6a0ff; font-weight: bold;">setq</span> viper-expert-level '5)
|
||||
(<span style="color: #b6a0ff; font-weight: bold;">setq</span> viper-want-ctl-h-help t)
|
||||
(<span style="color: #b6a0ff; font-weight: bold;">setq</span> viper-ex-style-editing nil)
|
||||
(<span style="color: #b6a0ff; font-weight: bold;">setq</span> viper-no-multiple-ESC nil)
|
||||
(<span style="color: #b6a0ff; font-weight: bold;">setq</span> viper-syntax-preference 'extended)
|
||||
(<span style="color: #b6a0ff; font-weight: bold;">setq</span> viper-vi-style-in-minibuffer nil)
|
||||
(define-key viper-vi-basic-map (kbd <span style="color: #79a8ff;">"v"</span>) 'set-mark-command)
|
||||
(define-key viper-vi-basic-map (kbd <span style="color: #79a8ff;">"f"</span>) 'find-file)
|
||||
(define-key viper-vi-basic-map (kbd <span style="color: #79a8ff;">"R"</span>) 'replace-rectangle)
|
||||
(define-key viper-vi-basic-map (kbd <span style="color: #79a8ff;">"C-v"</span>) 'rectangle-mark-mode)
|
||||
(define-key viper-vi-basic-map (kbd <span style="color: #79a8ff;">"x"</span>) 'kill-region)
|
||||
(viper-mode)
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Como eu disse, ainda está bem modesta. Apesar de que só tacar um bloco de código do nada não explica direito o que está acontecendo, Elisp é uma linguagem bem simples de entender, então eu acho que não vai ser tão problemático assim.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Mas, basicamente eu só ativei o <code>viper-mode</code> e configurei 5 teclas de atalho que "emulam" algumas teclas que eu uso no Neovim. Não são completamente idênticas, mas já dão conta do recado.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgd5dfddc" class="outline-2">
|
||||
<h2 id="orgd5dfddc"><i>Fin</i></h2>
|
||||
<div class="outline-text-2" id="text-orgd5dfddc">
|
||||
<p>
|
||||
Bom, é isso, acho que por agora eu não tenho mais o que falar sobre esse lindo programa chamado Emacs.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Até o próximo post!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<header><nav><ul><li>U:---</li><li>Vi, só que dentro do Emacs!.org</li><li>-</li><li>2024-11-01 Fri 19:45</li><li>(Elisp<span style="color: #d0bc00">/d</span> ARev WK company)</li></ul><ul><li><a href="/">Início</a></li><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
42
sitemap.html
42
sitemap.html
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<!-- 2024-11-02 Sat 22:57 -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Sitemap</title>
|
||||
<meta name="author" content="Tukain" />
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<link rel=icon type="image/webp" href="/assets/fav.webp"> <link rel=stylesheet href="/assets/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<header><nav><ul><li><a href="/">Início</a></li></ul><ul><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<header>
|
||||
<h1 class="title">Sitemap</h1>
|
||||
</header><ul class="org-ul">
|
||||
<li><a href="404.html">Erro 404</a></li>
|
||||
<li><a href="teste.html">Teste</a></li>
|
||||
<li><a href="index.html">Tukain's Blog</a></li>
|
||||
<li>posts
|
||||
<ul class="org-ul">
|
||||
<li><a href="posts/c-e-hare.html">A simplicidade da C e da Hare</a></li>
|
||||
<li><a href="posts/fiz-meu-próprio-ssg.html">Blog.sh, o meu próprio SSG</a></li>
|
||||
<li><a href="posts/de-novo-no-emacs.html">De novo no Emacs</a></li>
|
||||
<li><a href="posts/emacs.html">Emacs</a></li>
|
||||
<li><a href="posts/emacs-parte-2.html">Emacs - Parte 2</a></li>
|
||||
<li><a href="posts/god-mode.html">God mode</a></li>
|
||||
<li><a href="posts/hare.html">Hare</a></li>
|
||||
<li><a href="posts/proton.html">Tô usando o Proton</a></li>
|
||||
<li><a href="posts/vale-da-estranheza.html">Vale da estranheza</a></li>
|
||||
<li><a href="posts/viper-mode.html">Vi, só que dentro do Emacs!</a></li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<header><nav><ul><li>U:---</li><li>Sitemap.org</li><li>-</li><li>2024-11-02 Sat 22:57</li><li>(Elisp<span style="color: #d0bc00">/d</span> ARev WK company)</li></ul><ul><li><a href="/">Início</a></li><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
563
teste.html
563
teste.html
|
|
@ -1,199 +1,434 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang xml:lang>
|
||||
<head>
|
||||
<!-- 2024-11-02 Sat 22:57 -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Teste</title>
|
||||
<meta name="author" content="Tukain" />
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<link rel=icon type="image/webp" href="/assets/fav.webp"> <link rel=stylesheet href="/assets/css/main.css" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="generator" content="pandoc" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
<title>Teste</title>
|
||||
<style>
|
||||
code{white-space: pre-wrap;}
|
||||
span.smallcaps{font-variant: small-caps;}
|
||||
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
||||
div.column{flex: auto; overflow-x: auto;}
|
||||
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||
|
||||
ul.task-list[class]{list-style: none;}
|
||||
ul.task-list li input[type="checkbox"] {
|
||||
font-size: inherit;
|
||||
width: 0.8em;
|
||||
margin: 0 0.8em 0.2em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||
|
||||
pre > code.sourceCode { white-space: pre; position: relative; }
|
||||
pre > code.sourceCode > span { line-height: 1.25; }
|
||||
pre > code.sourceCode > span:empty { height: 1.2em; }
|
||||
.sourceCode { overflow: visible; }
|
||||
code.sourceCode > span { color: inherit; text-decoration: inherit; }
|
||||
div.sourceCode { margin: 1em 0; }
|
||||
pre.sourceCode { margin: 0; }
|
||||
@media screen {
|
||||
div.sourceCode { overflow: auto; }
|
||||
}
|
||||
@media print {
|
||||
pre > code.sourceCode { white-space: pre-wrap; }
|
||||
pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
|
||||
}
|
||||
pre.numberSource code
|
||||
{ counter-reset: source-line 0; }
|
||||
pre.numberSource code > span
|
||||
{ position: relative; left: -4em; counter-increment: source-line; }
|
||||
pre.numberSource code > span > a:first-child::before
|
||||
{ content: counter(source-line);
|
||||
position: relative; left: -1em; text-align: right; vertical-align: baseline;
|
||||
border: none; display: inline-block;
|
||||
-webkit-touch-callout: none; -webkit-user-select: none;
|
||||
-khtml-user-select: none; -moz-user-select: none;
|
||||
-ms-user-select: none; user-select: none;
|
||||
padding: 0 4px; width: 4em;
|
||||
}
|
||||
pre.numberSource { margin-left: 3em; padding-left: 4px; }
|
||||
div.sourceCode
|
||||
{ color: #cccccc; background-color: #303030; }
|
||||
@media screen {
|
||||
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
|
||||
}
|
||||
code span.al { color: #ffcfaf; }
|
||||
code span.an { color: #7f9f7f; font-weight: bold; }
|
||||
code span.at { }
|
||||
code span.bn { color: #dca3a3; }
|
||||
code span.bu { }
|
||||
code span.cf { color: #f0dfaf; }
|
||||
code span.ch { color: #dca3a3; }
|
||||
code span.cn { color: #dca3a3; font-weight: bold; }
|
||||
code span.co { color: #7f9f7f; }
|
||||
code span.cv { color: #7f9f7f; font-weight: bold; }
|
||||
code span.do { color: #7f9f7f; }
|
||||
code span.dt { color: #dfdfbf; }
|
||||
code span.dv { color: #dcdccc; }
|
||||
code span.er { color: #c3bf9f; }
|
||||
code span.ex { }
|
||||
code span.fl { color: #c0bed1; }
|
||||
code span.fu { color: #efef8f; }
|
||||
code span.im { }
|
||||
code span.in { color: #7f9f7f; font-weight: bold; }
|
||||
code span.kw { color: #f0dfaf; }
|
||||
code span.op { color: #f0efd0; }
|
||||
code span.ot { color: #efef8f; }
|
||||
code span.pp { color: #ffcfaf; font-weight: bold; }
|
||||
code span.sc { color: #dca3a3; }
|
||||
code span.ss { color: #cc9393; }
|
||||
code span.st { color: #cc9393; }
|
||||
code span.va { }
|
||||
code span.vs { color: #cc9393; }
|
||||
code span.wa { color: #7f9f7f; font-weight: bold; }
|
||||
</style>
|
||||
<style type="text/css">:root {
|
||||
--level-1-bg: #230631;
|
||||
--level-1-fg: #b6a0ff;
|
||||
--level-2-bg: #2c0614;
|
||||
--level-2-fg: #f78fe7;
|
||||
--level-3-bg: #0f0e39;
|
||||
--level-3-fg: #2fafff;
|
||||
--background: #000000;
|
||||
--foreground: #ffffff;
|
||||
--background-alt: #181732;
|
||||
--accent: #f5aa80;
|
||||
--link: #00bcff;
|
||||
--mode-bar: #2a2a66;
|
||||
--mode-bar-accent: #00808f;
|
||||
--border: solid 1px var(--background-alt);
|
||||
}
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
height: 0px;
|
||||
}
|
||||
100% {
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
header > nav {
|
||||
background-color: var(--mode-bar);
|
||||
display: flex;
|
||||
padding: 5px 20px;
|
||||
justify-content: space-between;
|
||||
overflow-x: scroll;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
header > nav > ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
list-style: none;
|
||||
}
|
||||
header > nav > ul > li > a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
header > nav > ul > li > a:hover {
|
||||
background-color: var(--mode-bar-accent);
|
||||
}
|
||||
header > nav > ul {
|
||||
padding: 0;
|
||||
}
|
||||
header > nav {
|
||||
padding: 15px;
|
||||
font-size: medium;
|
||||
}
|
||||
p > code {
|
||||
color: var(--foreground);
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
.sourceCode, pre, code {
|
||||
background-color: #1a1a1a;
|
||||
padding: 3px;
|
||||
overflow-x: scroll;
|
||||
margin: 10px auto;
|
||||
}
|
||||
pre {
|
||||
min-height: 20px;
|
||||
}
|
||||
pre.sourceCode:hover::before {
|
||||
float: right;
|
||||
border: solid 2px var(--accent);
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
min-width: 32px;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
animation: 300ms slide-in both;
|
||||
}
|
||||
pre.c:hover::before {
|
||||
content: "C"
|
||||
}
|
||||
pre.bash:hover::before {
|
||||
content: "Bash"
|
||||
}
|
||||
pre.html:hover::before {
|
||||
content: "HTML"
|
||||
}
|
||||
pre.javascript:hover::before {
|
||||
content: "Javascript"
|
||||
}
|
||||
pre.css:hover::before {
|
||||
content: "CSS"
|
||||
}
|
||||
pre.lua:hover::before {
|
||||
content: "Lua"
|
||||
}
|
||||
pre.commonlisp:hover::before {
|
||||
content: "Lisp"
|
||||
}
|
||||
pre.cpp:hover::before {
|
||||
content: "C++"
|
||||
}
|
||||
pre.python:hover::before {
|
||||
content: "Python"
|
||||
}
|
||||
pre.org:hover::before {
|
||||
content: "Org-mode";
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
.title::before {
|
||||
content: "";
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.author {
|
||||
display: none;
|
||||
}
|
||||
.line-block {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
border-top: solid 3px var(--accent);
|
||||
border-bottom: solid 3px var(--accent);
|
||||
padding: 10px;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
#TOC {
|
||||
background-color: var(--background-alt);
|
||||
padding: 10px;
|
||||
}
|
||||
@media print {
|
||||
#TOC {
|
||||
display: none;
|
||||
}
|
||||
header > nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
position: relative;
|
||||
font-family: system-ui;
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding: 1em;
|
||||
}
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
article {
|
||||
max-width: 80ch;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
padding: 10px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--link);
|
||||
}
|
||||
a:hover {
|
||||
opacity: 80%;
|
||||
}
|
||||
hr {
|
||||
border: var(--border);
|
||||
border-bottom: none;
|
||||
}
|
||||
blockquote {
|
||||
background-color: var(--background-alt);
|
||||
color: var(--accent);
|
||||
border-left: solid 5px var(--accent);
|
||||
padding: 10px 20px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
blockquote > p > code {
|
||||
background-color: var(--link);
|
||||
color: var(--background);
|
||||
}
|
||||
blockquote > pre {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p, hr {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
ul, ol {
|
||||
list-style-position: inside;
|
||||
padding-inline-start: 1.5em;
|
||||
}
|
||||
ul > li {
|
||||
list-style: "- ";
|
||||
}
|
||||
h1, h2, h3 {
|
||||
margin: 1em 0;
|
||||
}
|
||||
h1, h1::before {
|
||||
content: "* ";
|
||||
background-color: var(--level-1-bg);
|
||||
color: var(--level-1-fg);
|
||||
}
|
||||
h2, h2::before {
|
||||
content: "** ";
|
||||
background-color: var(--level-2-bg);
|
||||
color: var(--level-2-fg);
|
||||
}
|
||||
h3, h3::before {
|
||||
content: "*** ";
|
||||
background-color: var(--level-3-bg);
|
||||
color: var(--level-3-fg);
|
||||
}
|
||||
img {
|
||||
max-height: 300px;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
}
|
||||
table, th, td {
|
||||
border: var(--border);
|
||||
padding: 5px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table {
|
||||
border: none;
|
||||
overflow: scroll;
|
||||
margin: 1em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
th, td {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
tr:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
tr:nth-of-type(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<header><nav><ul><li><a href="/">Início</a></li></ul><ul><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<article>
|
||||
<header id="title-block-header">
|
||||
<h1 class="title">Teste</h1>
|
||||
</header><nav id="table-of-contents" role="doc-toc">
|
||||
<h2>Table of Contents</h2>
|
||||
<div id="text-table-of-contents" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#orgb6f3244">Blockquote</a></li>
|
||||
<li><a href="#orgc4ea65d">Verse</a></li>
|
||||
<li><a href="#org94e5bd0">Example</a></li>
|
||||
<li><a href="#orge99156d">Code-block</a></li>
|
||||
<li><a href="#orgf2229ba">Inline-code</a></li>
|
||||
<li><a href="#orgc19d87e">Center</a></li>
|
||||
<li><a href="#org51bc8aa">Table</a></li>
|
||||
<li><a href="#org80b0fc2">Organized list</a></li>
|
||||
<li><a href="#org489ef04">Unorganized list</a></li>
|
||||
<li><a href="#org1d62cdc">Level 1</a>
|
||||
<ul>
|
||||
<li><a href="#org7e3cd49">Level 2</a>
|
||||
<ul>
|
||||
<li><a href="#org0540881">Level 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<p>
|
||||
Essa página não contém nada de útil para o leitor, como o próprio nome dela já diz, ela é uma página de testes. Para ser mais específico, ela é uma página de testes do CSS do site.
|
||||
</p>
|
||||
|
||||
<div id="outline-container-orgb6f3244" class="outline-2">
|
||||
<h2 id="orgb6f3244">Blockquote</h2>
|
||||
<div class="outline-text-2" id="text-orgb6f3244">
|
||||
</header>
|
||||
<p>Essa página não contém nada de útil para o leitor, como o próprio
|
||||
nome dela já diz, ela é uma página de testes. Para ser mais específico,
|
||||
ela é uma página de testes do CSS do site.</p>
|
||||
<h1 id="blockquote">Blockquote</h1>
|
||||
<blockquote>
|
||||
<p>
|
||||
Não há nada a ser fazido ~ Napoleon
|
||||
</p>
|
||||
<p>Não há nada a ser fazido ~ Napoleon</p>
|
||||
</blockquote>
|
||||
<h1 id="verse">Verse</h1>
|
||||
<div class="line-block">2345Meia78<br />
|
||||
Tá na hora de molhar o biscoito<br />
|
||||
Eu tô no osso mas eu não me canso<br />
|
||||
Tá na hora de afogar o ganço</div>
|
||||
<h1 id="example">Example</h1>
|
||||
<pre class="example"><code>Isso é um exemplo.
|
||||
</code></pre>
|
||||
<h1 id="code-block">Code-block</h1>
|
||||
<div class="sourceCode" id="cb2" data-org-language="C"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="pp">#include </span><span class="im"><stdio.h></span></span>
|
||||
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a><span class="dt">int</span> main<span class="op">()</span> <span class="op">{</span></span>
|
||||
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a> printf<span class="op">(</span><span class="st">"Olá, mundo!</span><span class="sc">\n</span><span class="st">"</span><span class="op">);</span></span>
|
||||
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> <span class="dv">0</span><span class="op">;</span></span>
|
||||
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a><span class="op">}</span></span></code></pre></div>
|
||||
<h1 id="inline-code">Inline-code</h1>
|
||||
<p><code class="verbatim">int</code> significa "Integer".</p>
|
||||
<h1 id="center">Center</h1>
|
||||
<div class="center">
|
||||
<p>Estoy cansado, Thorfin</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-orgc4ea65d" class="outline-2">
|
||||
<h2 id="orgc4ea65d">Verse</h2>
|
||||
<div class="outline-text-2" id="text-orgc4ea65d">
|
||||
<p class="verse">
|
||||
2345Meia78<br>
|
||||
Tá na hora de molhar o biscoito<br>
|
||||
Eu tô no osso mas eu não me canso<br>
|
||||
Tá na hora de afogar o ganço<br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org94e5bd0" class="outline-2">
|
||||
<h2 id="org94e5bd0">Example</h2>
|
||||
<div class="outline-text-2" id="text-org94e5bd0">
|
||||
<pre class="example" id="org500a1e7">
|
||||
Isso é um exemplo.
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-orge99156d" class="outline-2">
|
||||
<h2 id="orge99156d">Code-block</h2>
|
||||
<div class="outline-text-2" id="text-orge99156d">
|
||||
<div class="org-src-container">
|
||||
<pre class="src src-hare"><span style="color: #b6a0ff; font-weight: bold;">use</span> fmt;
|
||||
|
||||
<span style="color: #b6a0ff; font-weight: bold;">export</span> <span style="color: #b6a0ff; font-weight: bold;">fn</span> main() <span style="color: #6ae4b9; font-weight: bold;">void</span> = {
|
||||
<span style="color: #b6a0ff; font-weight: bold;">const</span> greetings = [
|
||||
<span style="color: #79a8ff;">"Hello, world!"</span>,
|
||||
<span style="color: #79a8ff;">"¡Hola Mundo!"</span>,
|
||||
<span style="color: #79a8ff;">"Γειά σου Κόσμε!"</span>,
|
||||
<span style="color: #79a8ff;">"Привіт, світе!"</span>,
|
||||
<span style="color: #79a8ff;">"こんにちは世界！"</span>,
|
||||
];
|
||||
<span style="color: #b6a0ff; font-weight: bold;">for</span> (<span style="color: #b6a0ff; font-weight: bold;">let</span> greeting .. greetings) {
|
||||
fmt::println(greeting)!;
|
||||
};
|
||||
};
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-orgf2229ba" class="outline-2">
|
||||
<h2 id="orgf2229ba">Inline-code</h2>
|
||||
<div class="outline-text-2" id="text-orgf2229ba">
|
||||
<p>
|
||||
<code>int</code> significa "Integer".
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-orgc19d87e" class="outline-2">
|
||||
<h2 id="orgc19d87e">Center</h2>
|
||||
<div class="outline-text-2" id="text-orgc19d87e">
|
||||
<div class="org-center">
|
||||
<p>
|
||||
Estoy cansado, Thorfin
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org51bc8aa" class="outline-2">
|
||||
<h2 id="org51bc8aa">Table</h2>
|
||||
<div class="outline-text-2" id="text-org51bc8aa">
|
||||
<h1 id="table">Table</h1>
|
||||
<table>
|
||||
|
||||
|
||||
<colgroup>
|
||||
<col class="org-left">
|
||||
|
||||
<col class="org-right">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="org-left">Item</th>
|
||||
<th scope="col" class="org-right">Lvl</th>
|
||||
<tr class="header">
|
||||
<th>Item</th>
|
||||
<th>Lvl</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="org-left">Capacete de goblin</td>
|
||||
<td class="org-right">9</td>
|
||||
<tr class="odd">
|
||||
<td>Capacete de goblin</td>
|
||||
<td>9</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="org-left">Armadura de ouro</td>
|
||||
<td class="org-right">7</td>
|
||||
<tr class="even">
|
||||
<td>Armadura de ouro</td>
|
||||
<td>7</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="org-left">Espada de cavaleiro</td>
|
||||
<td class="org-right">11</td>
|
||||
<tr class="odd">
|
||||
<td>Espada de cavaleiro</td>
|
||||
<td>11</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org80b0fc2" class="outline-2">
|
||||
<h2 id="org80b0fc2">Organized list</h2>
|
||||
<div class="outline-text-2" id="text-org80b0fc2">
|
||||
<ol class="org-ol">
|
||||
<h1 id="organized-list">Organized list</h1>
|
||||
<ol>
|
||||
<li>A
|
||||
<ol class="org-ol">
|
||||
<ol>
|
||||
<li>aa</li>
|
||||
<li>aaa</li>
|
||||
</ol></li>
|
||||
<li>B</li>
|
||||
<li>C</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org489ef04" class="outline-2">
|
||||
<h2 id="org489ef04">Unorganized list</h2>
|
||||
<div class="outline-text-2" id="text-org489ef04">
|
||||
<ul class="org-ul">
|
||||
<h1 id="unorganized-list">Unorganized list</h1>
|
||||
<ul>
|
||||
<li>A
|
||||
<ul class="org-ul">
|
||||
<ul>
|
||||
<li>aa</li>
|
||||
<li>aaa</li>
|
||||
</ul></li>
|
||||
<li>B</li>
|
||||
<li>C</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org1d62cdc" class="outline-2">
|
||||
<h2 id="org1d62cdc">Level 1</h2>
|
||||
<div class="outline-text-2" id="text-org1d62cdc">
|
||||
</div>
|
||||
<div id="outline-container-org7e3cd49" class="outline-3">
|
||||
<h3 id="org7e3cd49">Level 2</h3>
|
||||
<div class="outline-text-3" id="text-org7e3cd49">
|
||||
</div>
|
||||
<div id="outline-container-org0540881" class="outline-4">
|
||||
<h4 id="org0540881">Level 3</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<header><nav><ul><li>U:---</li><li>Teste.org</li><li>-</li><li>2024-11-02 Sat 22:33</li><li>(Elisp<span style="color: #d0bc00">/d</span> ARev WK company)</li></ul><ul><li><a href="/">Início</a></li><li><a href="/sitemap.html">Sitemap</a></li></ul></nav></header>
|
||||
</div>
|
||||
<h1 id="level-1">Level 1</h1>
|
||||
<h2 id="level-2">Level 2</h2>
|
||||
<h3 id="level-3">Level 3</h3>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue