diff options
| -rwxr-xr-x | generate-blog | 8 | ||||
| -rw-r--r-- | index.html | 6 | ||||
| -rw-r--r-- | index.template.html | 5 | ||||
| -rw-r--r-- | utils/rot13/index.html | 35 | ||||
| -rw-r--r-- | utils/rot13/script.js | 31 |
5 files changed, 85 insertions, 0 deletions
diff --git a/generate-blog b/generate-blog index 6d3add1..6aaa1be 100755 --- a/generate-blog +++ b/generate-blog @@ -27,3 +27,11 @@ do echo "Generated article at $article_dst_path" done + +for util_path in utils/* +do + title=$(basename "$util_path") + util_dst_path="$util_path/index.html" + sed -i'' "/<!--UTILSINDEX-->/ a\ + <li><a href=\"$util_dst_path\">$title</a></li>" index.html +done @@ -22,6 +22,12 @@ <li><a href="blog/git_server.html"> How to make your own git server/website </a></li> </ul> + <h2>Utils</h2> + <ul> + <!--UTILSINDEX--> +<li><a href="utils/rot13/index.html">rot13</a></li> + </ul> + <h2>Links</h2> <li><a href="https://github.com/cacharle">github</a></li> <li><a href="https://git.cacharle.xyz">git server</a></li> diff --git a/index.template.html b/index.template.html index 0b1e133..375652f 100644 --- a/index.template.html +++ b/index.template.html @@ -21,6 +21,11 @@ <!--BLOGINDEX--> </ul> + <h2>Utils</h2> + <ul> + <!--UTILSINDEX--> + </ul> + <h2>Links</h2> <li><a href="https://github.com/cacharle">github</a></li> <li><a href="https://git.cacharle.xyz">git server</a></li> diff --git a/utils/rot13/index.html b/utils/rot13/index.html new file mode 100644 index 0000000..525e14f --- /dev/null +++ b/utils/rot13/index.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> + +<html> + <head> + <title>cacharle - rot13</title> + <link rel="stylesheet" type="text/css" href="../../style.css"/> + <meta charset="utf-8"/> + <link rel="icon" type="image/png" href="../../favicon.png" /> + <style> + textarea { + resize: none; + } + input { + width: 50%; + } + </style> + </head> + + <body><div id="page-wrapper"> + <h1>rot13</h1> + + <p>Implementation of the <a href="https://en.wikipedia.org/wiki/ROT13">rot13</a> encryption</p> + + <div>Shift size: <span id="rot13-shift-output"></span></div> + <input type="range" min=0 max=26 value=13 id="rot13-shift"/> + + <h3>Input</h3> + <textarea cols=120 rows=10 id="rot13-input">rotate me!</textarea> + + <h3>Output</h3> + <textarea cols=120 rows=10 id="rot13-output"></textarea> + + </div></body> + <script src="script.js" type="text/javascript"></script> +</html> diff --git a/utils/rot13/script.js b/utils/rot13/script.js new file mode 100644 index 0000000..efa408b --- /dev/null +++ b/utils/rot13/script.js @@ -0,0 +1,31 @@ +input = document.getElementById("rot13-input") +output = document.getElementById("rot13-output") +shift_range = document.getElementById("rot13-shift") +shift_output = document.getElementById("rot13-shift-output") + +const letters_low = [ + "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", + "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" +] + +const letters_up = letters_low.map(c => c.toUpperCase()) + +function rotate(text, shift) { + return text.split("").map(c => { + if (/[a-zA-Z]/.test(c)) { + letters = /[a-z]/.test(c) ? letters_low : letters_up + return letters[(letters.indexOf(c) + shift) % 26] + } + return c + }).join("") +} + +function update() { + output.value = rotate(input.value, Number(shift_range.value)) + shift_output.textContent = shift_range.value +} + +input.addEventListener("keyup", update) +shift_range.addEventListener("input", update) + +update() |