diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f880698 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +/resources/_gen/ +/assets/jsconfig.json +hugo_stats.json +/.hugo_build.lock diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..01d0dbb --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "themes/sakura-hugo-theme"] + path = themes/sakura-hugo-theme + url = git@github.com:ElnuDev/sakura-hugo-theme.git diff --git a/config.toml b/config.toml index 1d7c819..4d49a0a 100644 --- a/config.toml +++ b/config.toml @@ -1,3 +1,18 @@ -baseURL = 'http://example.org/' +baseURL = 'https://blog.elnu.com/' languageCode = 'en-us' -title = 'My New Hugo Site' +title = "Elnu's Blog" +theme = 'sakura-hugo-theme' +enableEmoji = true +paginate = 3 + +[params] + MatomoURL = 'matomo.elnu.com' + MatomoSiteId = '5' + HomepageHeader = '« Back to profile' + +[permalinks] + pages = '/:title' + posts = '/:year/:month/:title/' + +[taxonomies] + tag = 'tags' diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 0000000..cf98e43 --- /dev/null +++ b/content/_index.md @@ -0,0 +1,9 @@ +--- +title: Elnu’s Blog +--- + +> 年暮ぬ笠きて草鞋はきながら + +Hello! I go by Elnu on the internet, and this is my blog, I hope you find something of interest here. I’m 17, I’m interested in programming, GNU/Linux, studying Japanese, watching anime, drawing, and creative writing. I’m horrible at doing things consistently. + +For now, I’ll be posting small Linux and programming-related posts explaining how to do various things that I happen to find useful. In the future, I’ll post larger, more interesting posts. Stay tuned! (〃＾▽＾〃) diff --git a/content/posts/automatically-update-matomo-excluded-ips.md b/content/posts/automatically-update-matomo-excluded-ips.md new file mode 100644 index 0000000..fd33a4b --- /dev/null +++ b/content/posts/automatically-update-matomo-excluded-ips.md @@ -0,0 +1,33 @@ +--- +title: "Automatically Update Matomo Excluded IPs" +date: 2022-02-28T14:54:56-08:00 +tags: + - programming +--- + +> :warning: Edited from [my forum posts on Matomo forums](https://forum.matomo.org/t/cant-find-global-website-settings-global-excluded-ips-etc-in-database-nor-configuration-files/44888) + +I have a dynamic IP address, and every time it changes I had to manually go into [Matomo](https://matomo.org/) (a free and open-source self-hosted Google Analytics alternative that is endorsed by the EU and has [GDPR](https://en.wikipedia.org/wiki/General_Data_Protection_Regulation)-compliant privacy tools), check to see if it logged any of my own visits, delete them in the GDPR tools, and update my IP in the general website settings. It was moderately annoying to do, and after doing this every once and a while for a year I wanted to find a way to automate this. + +Unfortunately, I couldn't find where the global list of excluded IPs field is in neither the PHP configuration files nor the [Matomo database schema](https://developer.matomo.org/guides/database-schema). + +However, I managed to find a workaround. While I couldn't find the global excluded IP field in any of the database tables, I was able to find the site-specific `excluded_ips` column in the `sites` table. Instead of using the global excluded IP field, I decided to make a script that automatically sets the excluded IPs for all of the available sites at once. + +Here's what I did if anyone else encounters the same issue. + +I made the following template SQL script, `excluded_ips_updater.sql`, that excludes all visits from an empty wildcard field, `{}`. This is where I format in my public IP address later. (In my database, all of the table names are prefixed with `matomo_`, but this might not be the case for you.) + +```SQL +USE matomo; +UPDATE matomo_site SET excluded_ips="{}"; +``` + +Then, in order for this to work, I run the following Bash command. What this does is `curl`s the contents of the [My IP API](https://api.my-ip.io/ip) to get our public IP address (the `-s` flag makes `curl` silent), replaces the `{}` in the SQL script with the public IP, and finally pipes into MySQL using my login credentials. Not that there is **no space** between the `-p` flag and your password. + +```SH +sed "s/{}/$(curl -s https://api.my-ip.io/ip)/g" excluded_ips_updater.sql | mysql -u matomo -pmatomoUserPassword +``` + +And that's done! One can get this to run automatically on boot or every X amount of time using a cronjob or similar. + +I'd still like to know whether or not there's a way to do this using the global excluded IPs list as it would be a lot more elegant, but this works for now. I hope this might be useful to anyone who ran into the same problem as I did. diff --git a/content/posts/cleaning-up-html-with-tidy.md b/content/posts/cleaning-up-html-with-tidy.md new file mode 100644 index 0000000..29221a8 --- /dev/null +++ b/content/posts/cleaning-up-html-with-tidy.md @@ -0,0 +1,49 @@ +--- +title: "Cleaning Up HTML with Tidy" +date: 2022-01-24T13:04:45-08:00 +tags: + - programming +--- + +One issue with using static site generators that use templates like [Hugo](https://gohugo.io) is that their generated HTML files are often incredibly messy, with bad indentation, tons of unneeded whitespace, and overall unconcise formatting. While it *is* technically possible to fix this in your templates, it takes a lot of effort, makes your templates less readable, and frankly is a waste of time. + +To my knowledge, Hugo and most other generators don't have built-in beautifiers. The reasoning for this is usually that since your HTML is hidden from your end-user, it doesn't matter if it isn't clean and not nicely formatted. While this is valid, if you're a obsessive perfectionist (like myself, unfortunately) you probably still want clean markup. + +In addition, if your site or blog has a more technical audience that might possibly view your site's source, you're going to give a better impression if you have clean markup. + +### HTML Tidy + +`tidy` is the solution for this. Started in 2003 by Dave Raggett, it provides a simple command line tool with [a large number of configuration options](http://api.html-tidy.org/tidy/tidylib_api_5.2.0/tidy_config.html) for how you want your HTML to be "tidied." It is free and open source, with its source code available on [GitHub](https://github.com/htacg/tidy-html5). + +On Debian-based GNU/Linux distributions, you can install it with: + +```SH +sudo apt install tidy +``` + +For other platforms, see [HTML Tidy's official website](https://www.html-tidy.org/). + +It's most simple usage is as follows, with first the output file being declared with the `-o` flag and then the input file at the end: + +``` +tidy -o output.html input.html +``` + +However, the default configuration will probably not be to your liking. We'll go over configuration in the next section. + +### My `tidy` configuration for usage with Hugo + +I have created a simple, one line command for first building my site with `hugo`, then cleaning up all of the generated files by first using `find` to get all `*.html` files in `public` (where Hugo dumps generated content), and then finally running `tidy` on each file. + +```SH +hugo && find public -path "*.html" -type f -exec tidy --quiet yes --drop-empty-elements no -o {} {} \; +``` + +I have a couple configuration settings: + +- `--quiet yes`: Since I'm parsing a large number of files, this prevents `tidy` from spitting out informational text every time the command is run. +- `--drop-empty-elements no`: In this site, I use the [FontAwesome](https://fontawesome.com/) icon set (which is fantastic, I definitely recommend it), which encodes icons as empty `` tags with classes applied. By default, `tidy` removes any empty tags with no content, which removes all my icons, so I need to have this disabled. + +And that's it! Now, every time I update my Hugo site, I can run this command and not have to worry about Hugo's messy HTML output. + +I hope this helped anyone out there who dislikes dirty, unconcise HTML as much as I do! diff --git a/content/posts/final-fantasy-japanese-playthrough-part-1.md b/content/posts/final-fantasy-japanese-playthrough-part-1.md new file mode 100644 index 0000000..e218790 --- /dev/null +++ b/content/posts/final-fantasy-japanese-playthrough-part-1.md @@ -0,0 +1,115 @@ +--- +title: "Final Fantasy Japanese Playthrough: Part 1" +date: 2022-01-27T20:55:43-08:00 +tags: + - japanese + - ff +--- + +> **Disclaimer:** There may be mistakes in the Japanese content in this post, I am not an expert. This is simply some of my personal notes that I am making public as a blog post. Use this as reference with caution. + +Today I decided to try the original [*Final Fantasy*](https://en.wikipedia.org/wiki/Final_Fantasy_(video_game)) game for the Famicom from 1987 in Japanese as vocabulary practice (and for fun, of course). + +In this post, I'll be first be quickly going over what I used to run the game, and then text that I went over and the vocabulary I gained from it. + +### Setup + +To play, I first downloaded the revision B game ROM from [WoWroMs.com](https://wowroms.com/en/roms/nintendo-entertainment-system/final-fantasy-japan/22274.html). Not surprisingly, it's absolutely *tiny*: the entire ROM is less than a megabyte. + +To run it, I used RetroArch, an open source emulation frontend. You can get it from either their [website](https://www.retroarch.com/) and also [Steam](https://store.steampowered.com/app/1118310/RetroArch) for free. + +RetroArch itself is not an emulator, however: it just provides the frontend and tools to use emulators. In order to load an emulator into RetroArch, you need to install a *core*. Personally, I use the *Mesen* NES/Famicom core. On the standard version of RetroArch available on their website, you can install new cores directly inside of RetroArch through the core downloader. However, due to Steam's limitations, on the Steam version this menu isn't available. Instead, you get cores buy getting the (free) DLC on Steam, all of which are listed on RetroArch's store page. The Mesen core I use is available on Steam [here](https://store.steampowered.com/app/1205330/RetroArch__Mesen/). + +### Content + +[![Final Fantasy Japanese opening text](../final-fantasy-1.png)](../final-fantasy-1.png) + +I didn't spend too long on it, but I did read through the opening text (see screenshot) and get vocab from it. + +The Famicom didn't have enough memory for kanji, so all the text is purely in kana (hiragana and katakana). Here's a transcription of the text as written in-game. + +> このせかいは　あんこくにつつまれている +> +> かぜはやみ　うみはあれ　だいちはくさっていく +> +> しかし　ひとびとは１つのよげんをしんじ　それをまっていた +> +> このよ　あんこくにそまりしとき +> +> ４にんのひかりのせんし　あらわれん +> +> ながいぼうけんのすえ　４にんのわかものがこのちにたどりついた +> +> そしてそのてには　それぞれクリスタルにぎられていた + +### Kanji and attempted translation + +> この[世]{せ}[界]{かい}は　[暗]{あん}[黒]{こく}に[包]{つつ}まれている + +***This world is wrapped in darkness.*** + +> [風]{かぜ}は[闇]{やみ}*　[海]{うみ}は[荒]{あ}れ　[大]{だい}[地]{じ}は[腐]{くさ}っていく + +***The wind is dark,*** + +*I interpreted「やみ」as 闇, darkness, here. It's also possible that it's 止み (止む), to be stopped (the wind), but it doesn't really make sense considering the next section says that the seas are stormy. + +***the seas are stormy, and the Earth is rotting away.*** + +It's also important to mention that between the line sections divided by spaces, the verbs that look like they're being nominalized (e.g. [荒]{あ}れ for [荒]{あ}れる) are actually grammatically acting like the て-form of the verb to string the sentence together. From what I've heard and seen, this is more literary and is done to make the the opening text sound more "epic." + +> しかし　[人]{ひと}[々]{びと}は[１]{ひと}つの[予]{よ}[言]{げん}を[信]{しん}じ　それを[待]{ま}っていた + +***However, the people believe one prophecy, and on it they waited.*** + +Again,「[信]{しん}じ」here is like the て-form, [信]{しん}て. + +> この[世]{よ}、[暗]{あん}[黒]{こく}に[染]{そ}まりしとき + +***In this world, tainted with darkness,*** + +Here, [染]{そ}まる is the passive form of [染]{そ}める, to dye. So literally, the world is *dyed* with darkness, which brings up imagery of a deep-rooted corruption. The only thing that I was confused about here was what exactly the conjugation「[染]{そ}まりしとき」is here. + +> [４]{よ}[人]{にん}の[光]{ひかり}の[戦]{せん}[士]{し}　[現]{あらわ}れん + +***four warriors of light will appear.*** + +> [長]{なが}い[冒]{ぼう}[険]{けん}の[末]{すえ}　[４]{よ}[人]{にん}の[若]{わか}[者]{もの}がこの[地]{ち}に[辿]{たど}り[着]{つ}いた + +***At the end of a long adventure, four young travelers finally arrived in this region,*** + +> そして　その[手]{て}にはそれぞれクリスタルが[握]{にぎ}られていた + +***and in each of their hands was a crystal.*** + +### The official NES version + +Now, let's see how accurate this was! + +Here is the official NES version of the opening text. + +[![Final Fantasy English opening text](../final-fantasy-2.png)](../final-fantasy-2.png) + +> The world is veiled in darkness. The wind stops, the see is wild, and the earth begins to rot. +> +> The people wait, their only hope, a prophecy... +> +> 'When the world is in darkness Four Warriors will come...' +> +> After a long journey, four young warriors arrive, each holding an ORB. + +Overall, I was pretty close, but I made a couple mistakes. + +1.「やみ」was in fact 止み, to stop. (Drago, you were right!) + +2. Because of the lack of quotations in the Japanese version, I didn't realize that one of the lines was actually a recitation of the prophecy. + +3. 「そまりしとき」was actually 染まりし時, so *when* the world is becomes tainted with darkness, specifying the time condition for the prophecy. I didn't recognize the construction here of *verb nominalization* + し (nominalization of する) + 時. Because I didn't realize that this line was a direction quotation of the prophecy, I didn't pick up on this, even though I should have. What the し is doing here is that it's rather like 〜にする, and turns it from being simply *the time when the world is tainted with darkness*, 染まり時, to *the time when the world **becomes** tainted with darkness*. + +### Conclusion + +This was a really fun practice. I honestly need to spend more time consuming native Japanese material; I honestly study way less than I should and my vocabulary game isn't where it should be. I put all of the new/forgotten vocabulary terms from this into my [Anki](https://apps.ankiweb.net/) deck. + +I think I might make this a series of blog posts on this website, making Japanese study overview of things I pick up from Final Fantasy as I slowly work through the game. If I actually go through with that, you'll be able to see a list of posts on the Final Fantasy [#ff](/tags/ff) tag page. + +See you in the next post! diff --git a/content/posts/furigana-in-markdown-using-regular-expressions.md b/content/posts/furigana-in-markdown-using-regular-expressions.md new file mode 100644 index 0000000..587f6ab --- /dev/null +++ b/content/posts/furigana-in-markdown-using-regular-expressions.md @@ -0,0 +1,55 @@ +--- +title: "Furigana in Markdown Using Regular Expressions" +date: 2022-01-23T14:47:56-08:00 +tags: + - japanese + - programming +--- + +> TL;DR: [Here](#creating-the-regular-expression) + +### Background + +As I was building ~~the current~~ *a previous* version of this website, I came across an issue. In the previous version of the site which I made with [Nuxt.js](https://nuxtjs.org/), a [Vue.js](https://vuejs.org/)-based JavaScript web development framework similar to the [React](https://reactjs.org/)-based [Next.js](https://nextjs.org/), I used [`markdown-it`](https://www.npmjs.com/package/markdown-it) for rendering my Markdown content. The great thing about `markdown-it` was how extensible it is: there are a vast number of available npm packages that extend its functionality beyond the base [CommonMark](https://commonmark.org/) specification. + +One of the packages I used was [`furigana-markdown-it`](https://www.npmjs.com/package/furigana-markdown-it), which enabled [furigana](https://en.wikipedia.org/wiki/Furigana), or more widely known as [ruby characters](https://en.wikipedia.org/wiki/Ruby_character), which are reading information written beside logographic characters in East Asian languages. For example, in Japanese the reading for 猫, cat, is ねこ, and can be written with furigana as [猫]{ねこ}. The syntax for this was the main text in square parentheses, `[猫]`, followed by the furigana in curly brackets, {ねこ}, was quite convenient, and I wanted to be able to do the same thing in the new [Hugo](https://gohugo.io/) site. + +Instead of `markdown-it`, Hugo by default uses [Goldmark](https://github.com/yuin/goldmark), a Markdown renderer written in Go (a language I don't know), and while extensible, I really didn't want to go through the effort to learn Go, figure out how to make a Goldmark extension, and get it working in Hugo. After looking into it some more, it turns out that in Hugo's templating there is a [`replaceRE`](https://gohugo.io/functions/replacere/) function that lets you find and replace content intelligently using regular expressions. + +### Creating the regular expression + +After watching [this](https://www.youtube.com/watch?v=rhzKDrUiJVk) useful tutorial by Web Dev Simplified on regular expressions to get an idea of how they work, I managed to create this regular expression: + +```RE +\[([^\]]*)\]{([^\}]*)} +``` + +The first section, `\[([^\]]*)\]` creates a capturing group `()` around character surrounded by square brackets `[]`. The square brackets are escaped by the proceeding backslash (`\[`, `\]`) to make sure they aren't interpreted as regex syntax characters. Inside of the capturing group is `[^\]]*`. The negated set `[^\]]` means any character that isn't a right square bracket `]`, and the asterisk `*` repeats the previous token zero or more times in a row. In other words, the capturing group will end as soon as a right square bracket `]` is detected. + +The second section, `{([^\}]*)`, is basically the same thing as the first, except the capturing group is surrounded by curly brackets `{}`. Again, they are escaped to make sure they aren't being interpreted as regex syntax characters. + +You can test out the regular expression and see a breakdown of how all the parts of it work on [RegExr](https://regexr.com/6dspa), a super useful tool for building and testing regular expressions. + +### Ruby text HTML syntax + +The HTML syntax for furigana/ruby text is as follows. For more information, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby). + +```HTML +猫(ねこ) +``` + +For me, all of my ruby text is going to be in Japanese, so I've added the attribute `lang="ja"` to ensure that the Japanese (not Chinese) character variants are rendered. For some characters, the way they are written in Japan and China slightly differs. For example, for the Unicode character [U+76F4](https://en.wiktionary.org/wiki/直), it is rendered as the Chinese variant, 直, by default but as 直 when the language is explicitly specified to be Japanese, despite them being *the exact same Unicode character code.* + +### Adding the regular expression to Hugo + +In Hugo templates, one can display the rendered Markdown content of a given page using `{{ .Content }}`. What we need to do is pass `.Content` into the aforementioned `replaceRE` function. Since Hugo by default escapes HTML syntax, we need to then pipe everything into the `safeHTML` function. The `$1` and `$2` are placeholders for the first and second capture groups in the regular expression, respectively. + +```HTML +{{ replaceRE `\[([^\]]*)\]{([^\}]*)}` `$1($2)` .Content | safeHTML }} +``` + +All one needs to do now to get furigana rendering on all of one's page types is replace `{{ .Content }}` with this on all of their templates! To prevent code duplication, I put all of this into a [partial template](https://gohugo.io/templates/partials/). + +### Conclusion + +I hope you found this first blog post on this site helpful! If you're going to have any Japanese content in your site, being able to write ruby text in your markup is a must. While this tutorial was targeted toward Hugo, you can do this in **any static site generator that supports regular expressions in templates.** diff --git a/static/2022/01/final-fantasy-1.png b/static/2022/01/final-fantasy-1.png new file mode 100644 index 0000000..d28cc59 Binary files /dev/null and b/static/2022/01/final-fantasy-1.png differ diff --git a/static/2022/01/final-fantasy-2.png b/static/2022/01/final-fantasy-2.png new file mode 100644 index 0000000..2847834 Binary files /dev/null and b/static/2022/01/final-fantasy-2.png differ diff --git a/themes/sakura-hugo-theme b/themes/sakura-hugo-theme new file mode 120000 index 0000000..4cad800 --- /dev/null +++ b/themes/sakura-hugo-theme @@ -0,0 +1 @@ +/home/elnu/Projects/sakura-hugo-theme \ No newline at end of file