diff --git a/_components/PostListItem.tsx b/_components/PostListItem.tsx index 3b76bd8..06a4098 100644 --- a/_components/PostListItem.tsx +++ b/_components/PostListItem.tsx @@ -2,13 +2,21 @@ interface Props { post: any; } -export default function(props: Props) { +export default function (props: Props) { return (
  • - {props.post.data.title} - + + {props.post.data.title} + +

    {props.post.data.description}

    • diff --git a/_components/footer.tsx b/_components/footer.tsx index b2fd34a..05f2a7f 100644 --- a/_components/footer.tsx +++ b/_components/footer.tsx @@ -1,4 +1,4 @@ -export default function({ comp }) { +export default function ({ comp }) { const iconStyle = { filter: "var(--filter-fg)", }; @@ -31,7 +31,10 @@ export default function({ comp }) { alt="rss" /> - +

    Copyright © 2023 Foster Hangdaan

    -

    Made with Lume, TypeScript and lots of love.

    +

    + Made with Lume,{" "} + TypeScript and lots of + {" "} + love. +

    ); } diff --git a/_components/header.tsx b/_components/header.tsx index 377faa3..104fe4c 100644 --- a/_components/header.tsx +++ b/_components/header.tsx @@ -8,18 +8,21 @@ export interface Props { comp: any; } -export default function(props: Props) { - const dateFormatted = Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(props.date); +export default function (props: Props) { + const dateFormatted = Intl.DateTimeFormat("en-CA", { dateStyle: "long" }) + .format(props.date); return (
    -

    { props.title }

    +

    {props.title}

    {props.author && -

    - By {props.author.name} on -

    - } -

    { props.description }

    + ( +

    + By {props.author.name} on{" "} + +

    + )} +

    {props.description}

    {props.comp.separator()}
    - ) + ); } diff --git a/_components/navbar.tsx b/_components/navbar.tsx index b5fffb3..efed043 100644 --- a/_components/navbar.tsx +++ b/_components/navbar.tsx @@ -1,4 +1,4 @@ -export default function() { +export default function () { const iconStyle = { filter: "var(--filter-green)", }; diff --git a/_components/separator.tsx b/_components/separator.tsx index 1c28fa2..5499efd 100644 --- a/_components/separator.tsx +++ b/_components/separator.tsx @@ -1,7 +1,7 @@ export default function () { return (
    - + - +
    ); } diff --git a/_config.ts b/_config.ts index 8fb8244..d886aee 100644 --- a/_config.ts +++ b/_config.ts @@ -44,14 +44,14 @@ site.use(feed({ description: "=description", published: "=date", updated: "=updated", - } + }, })); site.use(code_highlight({ languages: { typescript: lang_typescript, javascript: lang_javascript, bash: lang_bash, - } + }, })); site.use(toc({ slugify: { @@ -66,13 +66,15 @@ site.process([".html"], (pages) => { // NOTE: This is a hack to append a class to JS doctrings so that we // can style them. If only the Hightlight.js plugin could be configured // to do this instead. - page.document?.getElementsByClassName("hljs-comment").forEach((codeCommentElement) => { - const docStringRegex = /^\/\*\*.*\*\/$/gsm; - const matchResult = codeCommentElement.innerText.match(docStringRegex); - if (matchResult) { - codeCommentElement.classList.add("docstring"); - } - }); + page.document?.getElementsByClassName("hljs-comment").forEach( + (codeCommentElement) => { + const docStringRegex = /^\/\*\*.*\*\/$/gsm; + const matchResult = codeCommentElement.innerText.match(docStringRegex); + if (matchResult) { + codeCommentElement.classList.add("docstring"); + } + }, + ); }); }); diff --git a/_includes/layouts/base.tsx b/_includes/layouts/base.tsx index 0027283..b623569 100644 --- a/_includes/layouts/base.tsx +++ b/_includes/layouts/base.tsx @@ -1,33 +1,76 @@ -export default function({ title, description, children, comp, metas, links, author, date }) { +export default function ( + { title, description, children, comp, metas, links, author, date }, +) { return ( {title} - - - - - - - + + + + + + + {Array.isArray(metas) && metas.length > 0 && - metas.map((m,index) => ) - } - - - - - - + metas.map((m, index) => ( + + ))} + + + + + + {Array.isArray(links) && links.length > 0 && - links.map((l,index) => ) - } + links.map((l, index) => ( + + ))} - { comp.navbar() } - { comp.header({title, description, author, date}) } + {comp.navbar()} + {comp.header({ title, description, author, date })}
    {children}
    - { comp.footer() } + {comp.footer()} ); diff --git a/_includes/layouts/post.tsx b/_includes/layouts/post.tsx index b89a0f6..02f9633 100644 --- a/_includes/layouts/post.tsx +++ b/_includes/layouts/post.tsx @@ -1,42 +1,50 @@ export const layout = "./base.tsx"; -export default function({ children, toc, footnotes }) { +export default function ({ children, toc, footnotes }) { return ( <> - { toc.length > 0 && - - } -
    - { children } -
    - { footnotes.length > 0 && -
      - {footnotes.map(note => ( -
    1. - - ↩ -
      2. - ))} -
    - } + )} ); } diff --git a/about.md b/about.md index 7477a97..3df1dca 100644 --- a/about.md +++ b/about.md @@ -3,13 +3,19 @@ description: About this website and credits where credit is due. --- -This is the personal website and blog of Foster Hangdaan and was created with [Lume](https://lume.land/) and [TypeScript](https://www.typescriptlang.org/). +This is the personal website and blog of Foster Hangdaan and was created with +[Lume](https://lume.land/) and [TypeScript](https://www.typescriptlang.org/). -The [source code](https://code.fosterhangdaan.com/foster/website) is under the GNU Affero General Public License (version 3 or later). +The [source code](https://code.fosterhangdaan.com/foster/website) is under the +GNU Affero General Public License (version 3 or later). ## Credits -- The icons are from [Tabler Icons](https://tabler-icons.io/) and [Simple Icons](https://simpleicons.org/). -- The colour palette of both the light theme and the dark theme is from [Tokyo Night](https://github.com/enkia/tokyo-night-vscode-theme). -- The sans-serif fonts are [Mona Sans and Hubot Sans](https://github.com/mona-sans). -- The monospace fonts are from the [Monaspace](https://monaspace.githubnext.com) font superfamily. +- The icons are from [Tabler Icons](https://tabler-icons.io/) and + [Simple Icons](https://simpleicons.org/). +- The colour palette of both the light theme and the dark theme is from + [Tokyo Night](https://github.com/enkia/tokyo-night-vscode-theme). +- The sans-serif fonts are + [Mona Sans and Hubot Sans](https://github.com/mona-sans). +- The monospace fonts are from the [Monaspace](https://monaspace.githubnext.com) + font superfamily. diff --git a/blog/index.tsx b/blog/index.tsx index a33e179..0c7b2d4 100644 --- a/blog/index.tsx +++ b/blog/index.tsx @@ -1,10 +1,10 @@ export const title = "Blog"; export const description = "Hello, stranger. Stay a while and listen."; -export default function({ nav, comp }) { +export default function ({ nav, comp }) { const { PostListItem } = comp; - const sortPosts = (a,b) => { + const sortPosts = (a, b) => { if (a.data.date < b.data.date) { return 1; } else if (a.data.date > b.data.date) { @@ -17,16 +17,24 @@ export default function({ nav, comp }) { if (!nav.menu("/blog/posts")) { return (
    - +

    No posts yet

    -

    Foster is on a coffee break.
    Check back later.

    +

    + Foster is on a coffee break.
    Check back later. +

    ); } return ( ); } diff --git a/blog/posts/2023-08-26_favourite-color-palettes.md b/blog/posts/2023-08-26_favourite-color-palettes.md index 9baca28..432a4a0 100644 --- a/blog/posts/2023-08-26_favourite-color-palettes.md +++ b/blog/posts/2023-08-26_favourite-color-palettes.md @@ -6,35 +6,61 @@ - design --- -Whether it's for UI design or theming, these colour palettes have played a great role in enhancing the eye-candy of my software projects. In fact, this very website uses one of the colour palettes on this list. I hope to share this list so that you may also find great use for these colour palettes in your own projects. +Whether it's for UI design or theming, these colour palettes have played a great +role in enhancing the eye-candy of my software projects. In fact, this very +website uses one of the colour palettes on this list. I hope to share this list +so that you may also find great use for these colour palettes in your own +projects. ## 4: Monokai -A warm, yet dark, colour palette created by [Wimer Hazenberg](https://monokai.nl/). Monokai is available in many text editors, terminal emulators, and (Linux) desktop environments. +A warm, yet dark, colour palette created by +[Wimer Hazenberg](https://monokai.nl/). Monokai is available in many text +editors, terminal emulators, and (Linux) desktop environments. -There is also a variant called [Monokai Pro](https://monokai.pro/) by the same author. This new palette is a modern interpretation of the classic palette and aims to improve functionality and legibility; perfect for coding. +There is also a variant called [Monokai Pro](https://monokai.pro/) by the same +author. This new palette is a modern interpretation of the classic palette and +aims to improve functionality and legibility; perfect for coding. ## 3: Dracula -[Dracula](https://draculatheme.com) is a dark colour palette created by [Zeno Rocha](https://zenorocha.com/) back in 2013. Since then, Dracula has grown to be one of the most popular colour palettes ever created and has been ported to many applications. There is no light variant available for this colour palette because Dracula is afraid of the light. +[Dracula](https://draculatheme.com) is a dark colour palette created by +[Zeno Rocha](https://zenorocha.com/) back in 2013. Since then, Dracula has grown +to be one of the most popular colour palettes ever created and has been ported +to many applications. There is no light variant available for this colour +palette because Dracula is afraid of the light. -Like Monokai, Dracula has a modern remake designed for terminal emulators and code editors called [Dracula Pro](https://draculatheme.com/pro). +Like Monokai, Dracula has a modern remake designed for terminal emulators and +code editors called [Dracula Pro](https://draculatheme.com/pro). -> Dracula Pro is a paid theme and its license must be purchased. -{.info} +> Dracula Pro is a paid theme and its license must be purchased. {.info} ## 2: Catppuccin -[Catppuccin](https://github.com/catppuccin/catppuccin.git) is a pastel colour palette which skyrocketed in popularity since its inception in 2021. It consists of 4 colour variants: Latte, Frappe, Macchiato and Mocha (with Macchiato being the main variant). Catppuccin is very popular in the Linux theming community due to its eye-pleasing pastel colours which pair nicely with pastel wallpapers. +[Catppuccin](https://github.com/catppuccin/catppuccin.git) is a pastel colour +palette which skyrocketed in popularity since its inception in 2021. It consists +of 4 colour variants: Latte, Frappe, Macchiato and Mocha (with Macchiato being +the main variant). Catppuccin is very popular in the Linux theming community due +to its eye-pleasing pastel colours which pair nicely with pastel wallpapers. ## 1: Tokyo Night -This is it... my favourite colour palette: [Tokyo Night](https://github.com/enkia/tokyo-night-vscode-theme.git). A colour palette made to celebrate the lights of downtown Tokyo at night. Unlike many of the other colour palettes on this list, Tokyo Night has a light theme among its three variants: +This is it... my favourite colour palette: +[Tokyo Night](https://github.com/enkia/tokyo-night-vscode-theme.git). A colour +palette made to celebrate the lights of downtown Tokyo at night. Unlike many of +the other colour palettes on this list, Tokyo Night has a light theme among its +three variants: - **Night** - The main, dark variant. - **Storm** - The same palette as Night except for a lighter background colour. - **Light** - A light variant for those who prefer a light theme. -Remember I mentioned that this website uses one of the colour palettes on this list? Well, Tokyo Night is that colour palette. This website uses the Night variant for its dark theme and the Light variant for its light theme. +Remember I mentioned that this website uses one of the colour palettes on this +list? Well, Tokyo Night is that colour palette. This website uses the Night +variant for its dark theme and the Light variant for its light theme. -I also created an **unofficial** [Tokyo Night organization](https://code.fosterhangdaan.com/tokyo-night) to serve as a hub where one can find the ports made by others as well as ports made by myself. You can find a good amount of resources in that organization if you plan on using Tokyo Night in a project. +I also created an **unofficial** +[Tokyo Night organization](https://code.fosterhangdaan.com/tokyo-night) to serve +as a hub where one can find the ports made by others as well as ports made by +myself. You can find a good amount of resources in that organization if you plan +on using Tokyo Night in a project. diff --git a/blog/posts/2023-11-28_retro-gaming-on-an-old-laptop/index.md b/blog/posts/2023-11-28_retro-gaming-on-an-old-laptop/index.md index 9661d44..daa23ee 100644 --- a/blog/posts/2023-11-28_retro-gaming-on-an-old-laptop/index.md +++ b/blog/posts/2023-11-28_retro-gaming-on-an-old-laptop/index.md @@ -7,33 +7,53 @@ - guide --- -Throughout the years I have amassed a collection of laptops. Most of which are unused and collecting dust in storage. If you're reading this, chances are you're in the same situation. Like me, you're also trying to find some new purpose for that old, yet functional, piece of electronic heap. The answer: RetroPie. In this guide, I will show you how to turn an old laptop into a retro gaming station with RetroPie. +Throughout the years I have amassed a collection of laptops. Most of which are +unused and collecting dust in storage. If you're reading this, chances are +you're in the same situation. Like me, you're also trying to find some new +purpose for that old, yet functional, piece of electronic heap. The answer: +RetroPie. In this guide, I will show you how to turn an old laptop into a retro +gaming station with RetroPie. -The [RetroPie Setup Instructions for Debian](https://retropie.org.uk/docs/Debian) forms the foundation for this guide. You may refer to that documentation as a supplement. +The +[RetroPie Setup Instructions for Debian](https://retropie.org.uk/docs/Debian) +forms the foundation for this guide. You may refer to that documentation as a +supplement. -> If you get stuck, the best place to get help is by visiting the [RetroPie forum](https://retropie.org.uk/forum). -{.info} +> If you get stuck, the best place to get help is by visiting the +> [RetroPie forum](https://retropie.org.uk/forum). {.info} ## What is RetroPie? -[RetroPie](https://retropie.org.uk) allows you to turn a computer into a retro gaming station. It is mainly targeted for the [Raspberry Pi](https://www.raspberrypi.com) series of single-board computers; hence its name. Don't let that fool you, though. RetroPie can be used just as well to convert a PC or laptop into a retro gaming station. +[RetroPie](https://retropie.org.uk) allows you to turn a computer into a retro +gaming station. It is mainly targeted for the +[Raspberry Pi](https://www.raspberrypi.com) series of single-board computers; +hence its name. Don't let that fool you, though. RetroPie can be used just as +well to convert a PC or laptop into a retro gaming station. ## Prerequisites -- Laptop with [Debian 12.2](https://www.debian.org/News/2023/20231007) installed. Any [Debian](https://www.debian.org)-based distribution such as [Ubuntu](https://ubuntu.com) and [Linux Mint](https://www.linuxmint.com) should also work. - - If you have multiple laptops to choose from, then I suggest selecting the fastest one available. The laptop's performance determines the types of emulators its able to run. On slow laptops, you will experience low framerates when running more demanding emulators such as [PCSX2](https://pcsx2.net) and [Dolphin](https://dolphin-emu.org). +- Laptop with [Debian 12.2](https://www.debian.org/News/2023/20231007) + installed. Any [Debian](https://www.debian.org)-based distribution such as + [Ubuntu](https://ubuntu.com) and [Linux Mint](https://www.linuxmint.com) + should also work. + If you have multiple laptops to choose from, then I suggest selecting the + fastest one available. The laptop's performance determines the types of + emulators its able to run. On slow laptops, you will experience low framerates + when running more demanding emulators such as [PCSX2](https://pcsx2.net) and + [Dolphin](https://dolphin-emu.org). - Familiarity with Linux and its command line interface. - Internet connection. - A gaming controller. You can connect more after the installation. - I have tried using an [8BitDo Pro 2](https://www.8bitdo.com/pro2) and an Xbox 360 controller. RetroPie has great support for both of them. + I have tried using an [8BitDo Pro 2](https://www.8bitdo.com/pro2) and an Xbox + 360 controller. RetroPie has great support for both of them. - ROMs - I will not be going over how and where to obtain ROMs in this guide. For simplicity, I will be using a Gameboy Advance ROM in the examples. + I will not be going over how and where to obtain ROMs in this guide. For + simplicity, I will be using a Gameboy Advance ROM in the examples. ## RetroPie Setup @@ -41,13 +61,13 @@ ### Setup Debian Update the system and packages: -``` sh +```sh sudo apt update && sudo apt upgrade ``` Install RetroPie dependencies: -``` sh +```sh sudo apt install git dialog unzip xmlstarlet ``` @@ -55,19 +75,19 @@ ### Install RetroPie Download the latest RetroPie script: -``` sh +```sh git clone --depth=1 https://github.com/RetroPie/RetroPie-Setup.git ``` Enter the RetroPie directory: -``` sh +```sh cd RetroPie-Setup ``` Execute the script: -``` sh +```sh sudo ./retropie_setup.sh ``` @@ -75,25 +95,33 @@ ### Install RetroPie ![Screenshot of installation main menu](021af5d6-cc50-4ac7-8734-750d2a2e3789.png) -Select **Basic Install** and press Enter. On the next screen, select **Yes** to start the installation process. +Select **Basic Install** and press Enter. On the next screen, select +**Yes** to start the installation process. -> The installation process compiles most of the emulators from source. This can take an hour or more on a slow laptop. -{.info} +> The installation process compiles most of the emulators from source. This can +> take an hour or more on a slow laptop. {.info} -You will be taken back to the main menu once the installation is complete. After the installation process has finished, exit the main menu and proceed to installing ROMs. +You will be taken back to the main menu once the installation is complete. After +the installation process has finished, exit the main menu and proceed to +installing ROMs. ### Install ROMs -Before running RetroPie, we should install some ROMs. ROMs are located in `~/RetroPie/roms`. It contains subdirectories for each supported system (GBA, Playstation, etc.). +Before running RetroPie, we should install some ROMs. ROMs are located in +`~/RetroPie/roms`. It contains subdirectories for each supported system (GBA, +Playstation, etc.). -For example, to install Gameboy Advance ROMs, place any ROM file in `~/RetroPie/roms/gba`: +For example, to install Gameboy Advance ROMs, place any ROM file in +`~/RetroPie/roms/gba`: -``` sh +```sh cp pokemon-emerald.zip ~/RetroPie/roms/gba/ ``` -> The default Gameboy Advance emulator, **lr-mgba**, accepts ROM files in the following formats: `.7z`, `.gba` and `.zip`. Refer to [the documentation](https://retropie.org.uk/docs/Game-Boy-Advance) for a complete list. -{.info} +> The default Gameboy Advance emulator, **lr-mgba**, accepts ROM files in the +> following formats: `.7z`, `.gba` and `.zip`. Refer to +> [the documentation](https://retropie.org.uk/docs/Game-Boy-Advance) for a +> complete list. {.info} ## RetroPie First Startup @@ -103,30 +131,42 @@ ### Start RetroPie ![RetroPie on the GNOME app dashboard](be60a03a-aa41-48f9-b02f-5c8c728e66f6.png) -At first launch, Retropie will look for connected controllers and configure them. Connect your controller now and follow the on-screen instructions to configure it. +At first launch, Retropie will look for connected controllers and configure +them. Connect your controller now and follow the on-screen instructions to +configure it. -> Alternatively, if you don't have a controller, you can press and hold the A key on your keyboard to configure your keyboard as your controller. -{.info} +> Alternatively, if you don't have a controller, you can press and hold the +> A key on your keyboard to configure your keyboard as your +> controller. {.info} ![RetroPie controller setup](706ae312-eecc-470b-8b3a-429c220962af.png) ### Launch a Game -The main menu will display only the systems for which there are available ROMs. Since we installed a Gameboy Advance ROM in a previous step, the Gameboy Advance system should be displayed on the menu. +The main menu will display only the systems for which there are available ROMs. +Since we installed a Gameboy Advance ROM in a previous step, the Gameboy Advance +system should be displayed on the menu. ![RetroPie main menu](14701639-0179-4d2c-934f-ad3a63e6f85e.png) -Our game should appear within the Gameboy Advance game selection screen. Launch the game by selecting it then pressing the A button (or the equivalent) on your controller. +Our game should appear within the Gameboy Advance game selection screen. Launch +the game by selecting it then pressing the A button (or the +equivalent) on your controller. ![Gameboy Advance game selection screen](6b9c2f7a-773d-4bac-a6f8-69668fba80dc.png) ## Conclusion -Hopefully, the installation went well and your old laptop is now a bonafide retro gaming station capable of playing a variety of classic games. +Hopefully, the installation went well and your old laptop is now a bonafide +retro gaming station capable of playing a variety of classic games. -If you are having issues, refer to the [Troubleshooting section](#troubleshooting), the [RetroPie forums](https://retropie.org.uk/forum) or the [RetroPie documentation](https://retropie.org.uk/docs). +If you are having issues, refer to the +[Troubleshooting section](#troubleshooting), the +[RetroPie forums](https://retropie.org.uk/forum) or the +[RetroPie documentation](https://retropie.org.uk/docs). -For some ideas on what you can do after installing RetroPie, checkout the [Post Installation section](#post-installation). +For some ideas on what you can do after installing RetroPie, checkout the +[Post Installation section](#post-installation). [Contact me](/#contact-me) for any comments or suggestions regarding this guide. @@ -134,37 +174,57 @@ ## Post Installation A few things you can do after installing RetroPie: -- If your laptop has an HDMI or DisplayPort port, connect it to a TV or an external monitor for a larger screen. -- Add your installed PC games from [Steam](https://store.steampowered.com) or [GoG](https://www.gog.com). +- If your laptop has an HDMI or DisplayPort port, connect it to a TV or an + external monitor for a larger screen. +- Add your installed PC games from [Steam](https://store.steampowered.com) or + [GoG](https://www.gog.com). - RetroPie can launch installed PC games directly from the RetroPie menu without leaving or closing its window. This involves adding a custom system which launches the games via a shell script. I'll be creating separate guide on how to do this. So stay tuned! + RetroPie can launch installed PC games directly from the RetroPie menu without + leaving or closing its window. This involves adding a custom system which + launches the games via a shell script. I'll be creating separate guide on how + to do this. So stay tuned! -- Setup Debian to [auto login at boot](https://retropie.org.uk/docs/Debian/?h=autologin#ubuntu-does-not-autologin) and RetroPie to [auto launch at login](https://retropie.org.uk/docs/Debian/#configure-retropie). This removes the manual intervention needed to log in and launch RetroPie after booting up. -- Use the [scraper](https://retropie.org.uk/docs/Scraper/?h=scraper) to populate the meta information and artwork for your games. -- Adjust the power settings for a better gaming experience. For example, you can prevent the screen from turning off or prevent the laptop from going to sleep when it's idle. +- Setup Debian to + [auto login at boot](https://retropie.org.uk/docs/Debian/?h=autologin#ubuntu-does-not-autologin) + and RetroPie to + [auto launch at login](https://retropie.org.uk/docs/Debian/#configure-retropie). + This removes the manual intervention needed to log in and launch RetroPie + after booting up. +- Use the [scraper](https://retropie.org.uk/docs/Scraper/?h=scraper) to populate + the meta information and artwork for your games. +- Adjust the power settings for a better gaming experience. For example, you can + prevent the screen from turning off or prevent the laptop from going to sleep + when it's idle. - Install more ROMs and build your retro game collection. - Connect more controllers for multiplayer. ## Troubleshooting -This section goes over how to resolve issues not available in the [FAQ section of the Debian installation instructions](https://retropie.org.uk/docs/Debian/?h=debian#faq). +This section goes over how to resolve issues not available in the +[FAQ section of the Debian installation instructions](https://retropie.org.uk/docs/Debian/?h=debian#faq). ### Top Bar Cuts Off Window When Fullscreen -On Debian 12.2, the top bar still occupies space even when the RetroPie window is fullscreen. This pushes the RetroPie window downwards cutting off its bottom portion. +On Debian 12.2, the top bar still occupies space even when the RetroPie window +is fullscreen. This pushes the RetroPie window downwards cutting off its bottom +portion. ![RetroPie fullscreen cut-off](300394f7-bd14-4ffa-8cc6-2eaf6966d728.png) -This seems to be caused by the default display protocol, Wayland. So a simple solution is to switch the display protocol from Wayland to Xorg. +This seems to be caused by the default display protocol, Wayland. So a simple +solution is to switch the display protocol from Wayland to Xorg. -Begin by logging out to get to the login screen. On the login screen, select your user. +Begin by logging out to get to the login screen. On the login screen, select +your user. ![Debian login screen](ced2816f-7ffd-478f-b86d-e5062caa970b.png) -Click the gear icon at the bottom-right of the screen to open a menu. Select **GNOME on Xorg**. +Click the gear icon at the bottom-right of the screen to open a menu. Select +**GNOME on Xorg**. ![Display server settings](1450cb87-24e7-468f-b136-42bb6b989615.png) -Log back in then launch RetroPie. Its window should now be displayed in its entirety. +Log back in then launch RetroPie. Its window should now be displayed in its +entirety. ![RetroPie fullscreen no cut-off](14701639-0179-4d2c-934f-ad3a63e6f85e.png) diff --git a/blog/posts/2023-12-02_make-your-own-ddns/index.md b/blog/posts/2023-12-02_make-your-own-ddns/index.md index f1d0c3d..797bfc4 100644 --- a/blog/posts/2023-12-02_make-your-own-ddns/index.md +++ b/blog/posts/2023-12-02_make-your-own-ddns/index.md @@ -7,46 +7,79 @@ - automation --- -Ever tried hosting a server in your home network but annoyed at the fact that your public IP address keeps changing? Imagine for a moment that you're running a [Nextcloud](https://nextcloud.com) server located at `nextcloud.example.com`. All of a sudden, the public IP changes and your domain is still pointing to the old IP address. As a result, connectivity to your server gets disrupted. The change can happen at any time and without warning. It can take some time for you to find out. Once you do, you'll have to manually update the [A-record](https://en.wikipedia.org/wiki/List_of_DNS_record_types#A) of `nextcloud.example.com` to restore connectivity. +Ever tried hosting a server in your home network but annoyed at the fact that +your public IP address keeps changing? Imagine for a moment that you're running +a [Nextcloud](https://nextcloud.com) server located at `nextcloud.example.com`. +All of a sudden, the public IP changes and your domain is still pointing to the +old IP address. As a result, connectivity to your server gets disrupted. The +change can happen at any time and without warning. It can take some time for you +to find out. Once you do, you'll have to manually update the +[A-record](https://en.wikipedia.org/wiki/List_of_DNS_record_types#A) of +`nextcloud.example.com` to restore connectivity. -As you can see, spontaneous IP address changes are disruptive events; a [static IP address](https://en.wikipedia.org/wiki/IP_address#IP_address_assignment) or a [DDNS](https://en.wikipedia.org/wiki/Dynamic_DNS) service is essential for running public servers. Internet service providers usually offer static IP addresses only in their business plans. So this leaves out the vast majority of internet users. The other option, DDNS, is a feature supported by some routers. However, utilizing this feature typically involves having to sign-up for a hostname on a DDNS provider like [No-IP](https://www.noip.com). If you get one of No-IP's free accounts, then you must [manually confirm hostnames](https://www.noip.com/support/knowledgebase/confirm-my-hostname-free-account-support-question-day) every 30 days. +As you can see, spontaneous IP address changes are disruptive events; a +[static IP address](https://en.wikipedia.org/wiki/IP_address#IP_address_assignment) +or a [DDNS](https://en.wikipedia.org/wiki/Dynamic_DNS) service is essential for +running public servers. Internet service providers usually offer static IP +addresses only in their business plans. So this leaves out the vast majority of +internet users. The other option, DDNS, is a feature supported by some routers. +However, utilizing this feature typically involves having to sign-up for a +hostname on a DDNS provider like [No-IP](https://www.noip.com). If you get one +of No-IP's free accounts, then you must +[manually confirm hostnames](https://www.noip.com/support/knowledgebase/confirm-my-hostname-free-account-support-question-day) +every 30 days. So, the options we have thus far require us to either: - Pay for a more expensive internet plan. -- Utilize a router feature that requires creating a hostname on a third-party DDNS provider. +- Utilize a router feature that requires creating a hostname on a third-party + DDNS provider. If only there was another way... ## The Solution -The answer is to create our own DDNS. We can achieve a DDNS-like system with a [shell script](https://en.wikipedia.org/wiki/Shell_script) that runs every hour; scheduled via [Cron](https://en.wikipedia.org/wiki/Cron). The script performs the following tasks everytime it runs: +The answer is to create our own DDNS. We can achieve a DDNS-like system with a +[shell script](https://en.wikipedia.org/wiki/Shell_script) that runs every hour; +scheduled via [Cron](https://en.wikipedia.org/wiki/Cron). The script performs +the following tasks everytime it runs: 1. Obtain the current public IP address and the domain's A-record. 1. Compare the public IP and the A-record's value. -1. If they are not the same, it updates the A-record to the value of the public IP address. +1. If they are not the same, it updates the A-record to the value of the public + IP address. This system provides some major advantages: -- Can be deployed on any computer with a modern [Linux](https://en.wikipedia.org/wiki/Linux) installation. +- Can be deployed on any computer with a modern + [Linux](https://en.wikipedia.org/wiki/Linux) installation. - Does not depend on a DDNS provider. - No need for a router with DDNS support. -- The script is flexible and can be changed to use another [domain registrar](https://en.wikipedia.org/wiki/Domain_name_registrar). +- The script is flexible and can be changed to use another + [domain registrar](https://en.wikipedia.org/wiki/Domain_name_registrar). ## Requirements - Basic proficiency with Linux and its command line. -- A computer with a [Debian](https://www.debian.org)-based distribution installed. +- A computer with a [Debian](https://www.debian.org)-based distribution + installed. - This computer will be referred to as the *Host Computer*. It will be online 24/7 to keep the scheduled script running. + This computer will be referred to as the _Host Computer_. It will be online + 24/7 to keep the scheduled script running. - Domain (or subdomain) with its DNS A-record set. - Your domain registrar must have an [API](https://en.wikipedia.org/wiki/API) which provides the ability to read and update records. This guide will be using the [GoDaddy API](https://developer.godaddy.com/doc) to update an A-record on [GoDaddy](https://www.godaddy.com). + Your domain registrar must have an [API](https://en.wikipedia.org/wiki/API) + which provides the ability to read and update records. This guide will be + using the [GoDaddy API](https://developer.godaddy.com/doc) to update an + A-record on [GoDaddy](https://www.godaddy.com). -- **Optional**: Familiarity with [JavaScript](https://en.wikipedia.org/wiki/JavaScript) or [TypeScript](https://en.wikipedia.org/wiki/TypeScript). +- **Optional**: Familiarity with + [JavaScript](https://en.wikipedia.org/wiki/JavaScript) or + [TypeScript](https://en.wikipedia.org/wiki/TypeScript). - Having some basic TypeScript knowledge allows you to modify or update the shell script. + Having some basic TypeScript knowledge allows you to modify or update the + shell script. ## Preparation @@ -58,42 +91,48 @@ #### Update the System Open a terminal then enter the command below to update the system. -``` sh +```sh sudo apt -y update && sudo apt -y upgrade ``` #### Install Cron -Cron is included in most Linux distributions but we will install it just to be sure: +Cron is included in most Linux distributions but we will install it just to be +sure: -``` sh +```sh sudo apt install cron ``` #### Install Deno -[Deno](https://deno.com) is a secure runtime environment for JavaScript and TypeScript. It is the environment for which the TypeScript-programmed shell script will be running under. +[Deno](https://deno.com) is a secure runtime environment for JavaScript and +TypeScript. It is the environment for which the TypeScript-programmed shell +script will be running under. -At the time of writing, Deno is not available in the [APT](https://en.wikipedia.org/wiki/APT_(software)) repositories; we will be using the installation script instead. +At the time of writing, Deno is not available in the +[APT](https://en.wikipedia.org/wiki/APT_(software)) repositories; we will be +using the installation script instead. -> Refer to the Deno documentation for [additional installation options](https://docs.deno.com/runtime/manual/getting_started/installation). -{.info} +> Refer to the Deno documentation for +> [additional installation options](https://docs.deno.com/runtime/manual/getting_started/installation). +> {.info} Run the following command to install Deno: -``` sh +```sh curl -fsSL https://deno.land/x/install/install.sh | sh ``` Confirm that Deno is properly installed by checking its version: -``` sh +```sh deno --version ``` An output like the one below indicates that Deno was successfully installed: -``` txt +```txt deno 1.38.3 (release, x86_64-unknown-linux-gnu) v8 12.0.267.1 typescript 5.2.2 @@ -101,10 +140,12 @@ #### Install Deno ### GoDaddy API Keys -Follow the [GoDaddy API setup](https://developer.godaddy.com/getstarted#setup) to create the API secret and key. Take note of the key and secret as they will be needed shortly. +Follow the [GoDaddy API setup](https://developer.godaddy.com/getstarted#setup) +to create the API secret and key. Take note of the key and secret as they will +be needed shortly. -> Ensure that you get the API secret and key for the **production environment**; not the ones for the test environment. -{.warning} +> Ensure that you get the API secret and key for the **production environment**; +> not the ones for the test environment. {.warning} ## The Script @@ -113,16 +154,18 @@ ## The Script > - [GET /v1/domains/{domain}/records/{type}/{name}](https://developer.godaddy.com/doc/endpoint/domains#/v1/recordGet) > - [PUT /v1/domains/{domain}/records/{type}/{name}](https://developer.godaddy.com/doc/endpoint/domains#/v1/recordReplaceTypeName) > -> Refer to the [GoDaddy Domains API documentation](https://developer.godaddy.com/doc/endpoint/domains) for the complete list of endpoints. -{.info} +> Refer to the +> [GoDaddy Domains API documentation](https://developer.godaddy.com/doc/endpoint/domains) +> for the complete list of endpoints. {.info} - -> The public IP address is obtained from an instance of [IpMe](https://code.fosterhangdaan.com/foster/ipme) at [https://ipme.fosterhangdaan.com](https://ipme.fosterhangdaan.com). [Ipify](https://www.ipify.org) can be used as an alternative. -{.info} +> The public IP address is obtained from an instance of +> [IpMe](https://code.fosterhangdaan.com/foster/ipme) at +> [https://ipme.fosterhangdaan.com](https://ipme.fosterhangdaan.com). +> [Ipify](https://www.ipify.org) can be used as an alternative. {.info} Here is the content of the script: -``` ts +```ts #!/usr/bin/env -S deno run --allow-net /** @@ -148,15 +191,16 @@ ## The Script const domainParts = domain.split("."); const domainRoot = domainParts.slice(-2).join("."); -const domainName = domainParts.slice(0,-2).join(".") || "@"; +const domainName = domainParts.slice(0, -2).join(".") || "@"; -const goDaddyUrl = `https://api.godaddy.com/v1/domains/${domainRoot}/records/A/${domainName}`; +const goDaddyUrl = + `https://api.godaddy.com/v1/domains/${domainRoot}/records/A/${domainName}`; const goDaddyRequestHeaders = new Headers({ Authorization: `sso-key ${GODADDY_API_KEY}:${GODADDY_API_SECRET}`, }); -const [ publicIpResponse, goDaddyResponse ] = await Promise.all([ +const [publicIpResponse, goDaddyResponse] = await Promise.all([ fetch(publicIpUrl), fetch(goDaddyUrl, { headers: goDaddyRequestHeaders }), ]); @@ -177,7 +221,9 @@ ## The Script const goDaddyIP = goDaddyJsonResponse[0]["data"]; if (publicIP !== goDaddyIP) { - console.log(`The public IP address has changed. Public IP: ${publicIP}; Old IP: ${goDaddyIP}`); + console.log( + `The public IP address has changed. Public IP: ${publicIP}; Old IP: ${goDaddyIP}`, + ); goDaddyRequestHeaders.append("Content-Type", "application/json"); const response = await fetch(goDaddyUrl, { method: "PUT", @@ -185,7 +231,7 @@ ## The Script body: JSON.stringify([ { data: publicIP, - } + }, ]), }); if (!response.ok) { @@ -198,28 +244,37 @@ ## The Script ## Schedule the Script to Run Every Hour with Cron -On the Host Computer, save [the script](#the-script) as a file at `/etc/cron.hourly/ddns.ts`. Make sure to replace some necessary values: +On the Host Computer, save [the script](#the-script) as a file at +`/etc/cron.hourly/ddns.ts`. Make sure to replace some necessary values: -- Replace `example.com` in `const domain = "example.com";` with your GoDaddy domain. +- Replace `example.com` in `const domain = "example.com";` with your GoDaddy + domain. - Replace `key` in `const GODADDY_API_KEY = "key";` with your GoDaddy API key. -- Replace `secret` in `const GODADDY_API_SECRET = "secret";` with your GoDaddy API secret. +- Replace `secret` in `const GODADDY_API_SECRET = "secret";` with your GoDaddy + API secret. Grant read, write, and execute permissions only to the `root` user: -``` sh +```sh sudo chown root:root /etc/cron.hourly/ddns.ts sudo chmod 700 /etc/cron.hourly/ddns.ts ``` -> Access to the script should be granted only to authorized users (such as `root`) since the script contains sensitive information: your GoDaddy API secret and key. -{.warning} +> Access to the script should be granted only to authorized users (such as +> `root`) since the script contains sensitive information: your GoDaddy API +> secret and key. {.warning} The script should now be scheduled to run every hour by Cron. ## Conclusion -In this guide, we have setup an hourly Cron script that updates a GoDaddy domain's A-record if the public IP address changed. You can now rest assured that your hosted services will be protected from disruptions caused by public IP address changes. +In this guide, we have setup an hourly Cron script that updates a GoDaddy +domain's A-record if the public IP address changed. You can now rest assured +that your hosted services will be protected from disruptions caused by public IP +address changes. -Feel free to modify the script to your needs; especially if you are using a domain registrar other than GoDaddy. +Feel free to modify the script to your needs; especially if you are using a +domain registrar other than GoDaddy. -As always, [contact me](/#contact-me) for any comments or suggestions regarding this guide. +As always, [contact me](/#contact-me) for any comments or suggestions regarding +this guide. diff --git a/gpg-key.md b/gpg-key.md index cb9ca78..bd12573 100644 --- a/gpg-key.md +++ b/gpg-key.md @@ -3,20 +3,21 @@ description: Information about my GPG public key and how to obtain it. --- -> I do not use keyservers. A key claiming to be mine from a keyserver is definitely a fake. -{.warning} +> I do not use keyservers. A key claiming to be mine from a keyserver is +> definitely a fake. {.warning} -> I suggest reading up on GPG if you are unfamiliar with it. -> You can find information about GPG on the [GnuPG official website](https://gnupg.org/). -{.info} +> I suggest reading up on GPG if you are unfamiliar with it. You can find +> information about GPG on the [GnuPG official website](https://gnupg.org/). +> {.info} ## Obtaining My Key -You can download my public key here: [Foster Hangdaan's Public Key](https://static.fosterhangdaan.com/foster-pubkey.asc){download}. +You can download my public key here: +[Foster Hangdaan's Public Key](https://static.fosterhangdaan.com/foster-pubkey.asc){download}. The key's fingerprint should match the one below: -``` txt +```txt pub ed25519/E48D7F49A852F112 2023-07-14 [SC] Key fingerprint = DBD3 8E38 4B9E 1F4F 19F9 5BAE E48D 7F49 A852 F112 uid Foster Hangdaan @@ -24,6 +25,11 @@ ## Obtaining My Key ## Utilizing My Key -Once you have imported my public key, you can use it to verify software and binaries released by me. +Once you have imported my public key, you can use it to verify software and +binaries released by me. -You can also use my public key to encrypt emails you send to me. In that case, I would also need your public key so I can encrypt the emails I send back to you. The excellent [Email Self-Defense Guide by the Free Software Foundation](https://emailselfdefense.fsf.org/) describes how this process works. +You can also use my public key to encrypt emails you send to me. In that case, I +would also need your public key so I can encrypt the emails I send back to you. +The excellent +[Email Self-Defense Guide by the Free Software Foundation](https://emailselfdefense.fsf.org/) +describes how this process works. diff --git a/index.tsx b/index.tsx index 1a38aa9..d2779f8 100644 --- a/index.tsx +++ b/index.tsx @@ -1,7 +1,7 @@ export const description = "Software developer and open-source enthusiast."; -export default function({ nav }) { - const sortPosts = (a,b) => { +export default function ({ nav }) { + const sortPosts = (a, b) => { if (a.data.date < b.data.date) { return 1; } else if (a.data.date > b.data.date) { @@ -14,51 +14,85 @@ export default function({ nav }) { return ( <>

    - I am a software developer, open-source enthusiast, lover of pizza, and renegade of funk. I speak fluent English and Filipino. + I am a software developer, open-source enthusiast, lover of pizza, and + renegade of funk. I speak fluent English and Filipino.

    - You'll most likely find me within my lab tinkering with my inventions and the latest JavaScript frameworks. - Other times, I help in the battle for an open web and for user privacy by contributing in the development of free and open-source software. + You'll most likely find me within{" "} + my lab{" "} + tinkering with my inventions and the latest JavaScript frameworks. Other + times, I help in the battle for an open web and for user privacy by + contributing in the development of free and open-source software.

    Contact Me

    - The best method of reaching me is through my email: foster@hangdaan.email. + The best method of reaching me is through my email:{" "} + foster@hangdaan.email.

    - If you'd like an encrypted response, you can send me your GPG public key. You can find mine in the GPG Key page. + If you'd like an encrypted response, you can send me your GPG public + key. You can find mine in the GPG Key page.

    - Highlighted Projects + + Highlighted Projects +

    - View all projects + + View all projects +

    - Latest Blog Posts + + Latest Blog Posts +

    diff --git a/resume.md b/resume.md index b05b696..0a4d928 100644 --- a/resume.md +++ b/resume.md @@ -7,33 +7,32 @@ ## Experience ### Startup Tech Pros -Tech Lead
    -June 2022 - present +Tech Lead
    June 2022 - present - Set standards and procedures for Engineering department. - Design, maintain and deploy cloud infrastructure. - Manage software development projects. -- Determine software tools and services based on company budget and requirements. -- Collaborate with clients to create websites and infrastructure based on business needs. +- Determine software tools and services based on company budget and + requirements. +- Collaborate with clients to create websites and infrastructure based on + business needs. ### Zetane Systems -Full-Stack Web Developer
    -October 2021 - December 2023 +Full-Stack Web Developer
    October 2021 - December 2023 - Develop pages and components in Next.js according to Figma designs. - Create CI/CD pipeline to package application and deploy to AWS. -- Ensure application quality and functionality by writing end-to-end tests using Cypress. +- Ensure application quality and functionality by writing end-to-end tests using + Cypress. - Refactored code and design of company website. ## Education ### Computer Engineering Technology -Emphasis in Computer Programming
    -Seneca College of Applied Arts and Technology
    -Graduated August 2020
    -Cumulative GPA 4.0/4.0
    +Emphasis in Computer Programming
    Seneca College of Applied Arts and +Technology
    Graduated August 2020
    Cumulative GPA 4.0/4.0
    ## Skills