Allibragihttps://allibragi.codeberg.page/Recent content on AllibragiHugo -- 0.161.1en-usAllibragiFri, 26 Jun 2026 13:13:39 +0100What I Watch #1 - F-Droidhttps://allibragi.codeberg.page/dev-blog/wiw-1/Fri, 26 Jun 2026 13:13:39 +0100Allibragihttps://allibragi.codeberg.page/dev-blog/wiw-1/Publishing a Flutter appFollowing Google’s decision to lock Android out of the open-source, I’ve decided not only to make an Android app but also to publish it on F-Droid. It will be all for nothing? As I write this post, there are 96 days to go until that fateful moment, so only time will tell.

So, first thing first: my app is called What I Watch (repo here) and helps you keep track of the series you’re currently watching. Not only TV series because it uses the TvMaze API, that is a sort of community driven things for what I’ve understood, there are also anime and other stuff but it would have ben too long to put in as short description for the store page.

Enough with the preamble, let’s get to the point. To publish your app on FDroid you need to:

  • have an open source app
  • fork the fdroiddata repo from GitLab
  • add a yml file with the istruction to build your app
  • make a merge request to add you app to the FDroid repo

Now that I’ve managed it, it’s not a difficult task. But I’m not a super-talented developer like you readers, so I struggled to figure out what to do. So thank you, Linsui, for babay-sit me through the whole process (I couldn’t find any social media links or anything else on your profile, so I can’t mention you directly, but I really do thank you so much).

First steps

As said, the first thin you need is the URL to the git repo of your app. The repo could be anywhere on the internet but it must be open source and reachable from the FDroid servers.

Then create an account on GitLab and fork the fdroiddata repository. Now you can clone the repo on your PC, you’ll have something like this:

git clone https://gitlab.com/YOUR_USERNAME/fdroiddata.git

Now in the metadata folder create a yml file named as your Andorid app unique name. It will be something like com.example.whatever.yml. Inside this file we need to put the instuctions to the FDroid server on how to reach our repo and how to build the app.

Publish a Flutter app

I’m not quite sure how to go about this, so first I’ll provide an example of the YML file based on my experience, and then I’ll list, in the order they come to mind, the things I’ve discovered along the way.

Categories:
  - List of categories
  - Your app belongs to
License: Your app license (es: AGPL-3.0-or-later)
AuthorName: Your name
SourceCode: https://your-git-repo-url
IssueTracker: https://your-issue-traker-url

AutoName: your app name

RepoType: git
Repo: https://your-git-repo-url

Builds:
  - versionName: 0.1.1
    versionCode: 11
    commit: your-commit-sha
    output: build/app/outputs/flutter-apk/app-armeabi-v7a-release.apk
    srclibs:
      - flutter@stable
    rm:
      - linux
    prebuild:
      - flutterVersion=$(cat .flutter-version)
      - '[[ $flutterVersion ]]'
      - git -C $$flutter$$ checkout -f $flutterVersion
      - export PUB_CACHE=$(pwd)/.pub-cache
      - $$flutter$$/bin/flutter config --no-analytics
      - $$flutter$$/bin/flutter pub get
    scanignore:
      - .pub-cache
    build:
      - export PUB_CACHE=$(pwd)/.pub-cache
      - $$flutter$$/bin/flutter build apk --release --split-per-abi --target-platform=android-arm

  - versionName: 0.1.1
    versionCode: 12
    commit: your-commit-sha
    output: build/app/outputs/flutter-apk/app-arm64-v8a-release.apk
    srclibs:
      - flutter@stable
    rm:
      - linux
    prebuild:
      - flutterVersion=$(cat .flutter-version)
      - '[[ $flutterVersion ]]'
      - git -C $$flutter$$ checkout -f $flutterVersion
      - export PUB_CACHE=$(pwd)/.pub-cache
      - $$flutter$$/bin/flutter config --no-analytics
      - $$flutter$$/bin/flutter pub get
    scanignore:
      - .pub-cache
    build:
      - export PUB_CACHE=$(pwd)/.pub-cache
      - $$flutter$$/bin/flutter build apk --release --split-per-abi --target-platform=android-arm64

  - versionName: 0.1.1
    versionCode: 13
    commit: your-commit-sha
    output: build/app/outputs/flutter-apk/app-x86_64-release.apk
    srclibs:
      - flutter@stable
    rm:
      - linux
    prebuild:
      - flutterVersion=$(cat .flutter-version)
      - '[[ $flutterVersion ]]'
      - git -C $$flutter$$ checkout -f $flutterVersion
      - export PUB_CACHE=$(pwd)/.pub-cache
      - $$flutter$$/bin/flutter config --no-analytics
      - $$flutter$$/bin/flutter pub get
    scanignore:
      - .pub-cache
    build:
      - export PUB_CACHE=$(pwd)/.pub-cache
      - $$flutter$$/bin/flutter build apk --release --split-per-abi --target-platform=android-x64

AutoUpdateMode: Version
UpdateCheckMode: Tags
VercodeOperation:
  - '%c * 10 + 1'
  - '%c * 10 + 2'
  - '%c * 10 + 3'
UpdateCheckData: pubspec.yaml|version:\s.+\+(\d+)|.|version:\s(.+)\+
CurrentVersion: 0.1.1
CurrentVersionCode: 13

ABI Split & VercodeOperation

This is the thing that annoyed me the most, so it’s only natural that it’s the first thing that comes to mind.

Once the build process is complete, the FDroid pipeline expects to receive three APKs: arm, arm64, and x86_64. These three files must follow a naming convention for the version code that differs from Flutter’s default one. You must therefore modify the version in your pubspec.yaml, change the Gradle file to build the APKs with the correct naming convention and include the same logic in the YML file.

So in the pubspec.yaml you have to add the version for the FDroid’s pipeline after the version you are using with a +:

version: '0.1.1+1'

In the android/app/build.gradle.kts you have to add this to map the APKs versions:

import com.android.build.gradle.internal.api.ApkVariantOutputImpl
[...]
val abiCodes = mapOf("armeabi-v7a" to 1, "arm64-v8a" to 2, "x86_64" to 3)
android.applicationVariants.configureEach {
    val variant = this
    variant.outputs.forEach { output ->
        val abiVersionCode = abiCodes[output.filters.find { it.filterType == "ABI" }?.identifier]
        if (abiVersionCode != null) {
            (output as ApkVariantOutputImpl).versionCodeOverride = variant.versionCode * 10 + abiVersionCode
        }
    }
}

And in the yml, as you can see above, three entry in the Build section and the VercodeOperation section to tell the FDroid server how to build and what to expect.

So, for version 0.1.1+1 of the app, we will have version codes 11, 12, and 13; for version 0.1.2+2, 21, 22, and 23; and so on.

Fastlane

This is a folder we need to create in the root directory of your repository to generate descriptions, previews, icons, etc., for the store page. You can find more details here.

.flutter-version

Fdroid doesn’t like to use the latest version of Flutter just because it’s cool, so we need to create a .flutter-version file in the project root containing the version of Flutter to be used in the build, and then reference it in the yml file. Take a look at this line in the YML file:

- flutterVersion=$(cat .flutter-version)

Antifeatures

F-Droid have a exaustive explantation of what an antifeature is here. Just see if something in your app matches and add it to a list at the topof your .yml file.

AntiFeatures:
  NonFreeNet:
    en-US: Data is sourced from 3rd party public API.

Commit SHA

I don’t remember why I’ve written this down for the the post but in the commit: section of the yml you need to put the sha of the commit. It’s like obvious, right?

rm:

In the yml file, under the Builds section, there is a subsection labeled rm:. This section tells F-Droid to delete certain files after cloning the Git repository. It is used to free up space on the server by removing items that are not needed for the build process. In my case, I delete the linux folder because it is not required for the Android version of the app.

Merge, Forrest! Merge!

Once your yml file is ready you can push the file in your forked repo, a build pipeline should start. If all is on the green side you can proceed to make a merge request. The naming of the request for a new app is “New App: app name”, in the merge form you also need to complete the template provided with the correct info.

Aaaand that’s all for now. Ciao!

]]>Git-Pages #2 - Collapsible code blockshttps://allibragi.codeberg.page/dev-blog/git-pages-2/Tue, 07 Apr 2026 09:00:00 +0200Allibragihttps://allibragi.codeberg.page/dev-blog/git-pages-2/Making long code blocks less longWhile I’m on this whole “building a blog” thing, I’ve noticed that code blocks can get really long. When a code block has 50+ lines, it takes up a lot of vertical space and makes the post hard to read. Sure, you can scroll past it, but it’s not exactly elegant.

That XKCD comic about elegance
On the subject of elegant things

So I decided to make code blocks collapsible. Here’s how it works:

  • Code blocks with 10 or fewer lines are displayed normally.
  • Code blocks with more than 10 lines start collapsed, showing only the first 10.
  • A “Show X more lines” button appears in the bottom right.
  • Clicking it expands the full code block.
  • The button then changes to “Hide” to collapse it again. I’m not sure it’s useful because by that point you’d already be ‘past’ the code, but it still seemed odd not to have this feature.

The implementation uses the standard Hugo “extra partials” feature, so no modifications to the theme were needed. I created two files:

layouts/_partials/extra-head.html with the CSS:

<style>
.code-collapsible {
  position: relative;
  display: block;
}

.code-collapsible .collapse-toggle {
  display: block !important;
  position: absolute;
  bottom: 7px;
  right: 70px;
  background: rgba(120, 120, 120, 0.35);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.75rem;
  color: inherit;
  cursor: pointer;
  opacity: 0.9;
  font-family: inherit;
  z-index: 5;
}

.code-collapsible:hover .collapse-toggle {
  opacity: 1;
}

.code-collapsible .collapse-toggle:hover {
  background: rgba(120, 120, 120, 0.5);
}

.code-collapsible .chroma {
  max-height: none;
  overflow: visible;
  transition: max-height 0.3s ease;
}

.code-collapsible.collapsed .chroma {
  max-height: calc(1.6em * 15); /* In my theme, 1.6 is the line height */
  overflow: hidden;
}
</style>

And layouts/_partials/extra-foot.html with the JavaScript:

<script>
(function() {
  try {
    var codeBlocks = document.querySelectorAll('.highlight');
    for (var i = 0; i < codeBlocks.length; i++) {
      var lines = codeBlocks[i].querySelectorAll('.line');
      if (lines.length > 10) {
        codeBlocks[i].classList.add('code-collapsible', 'collapsed');
        
        var btn = document.createElement('button');
        btn.className = 'collapse-toggle';
        btn.type = 'button';
        btn.textContent = 'Show ' + (lines.length - 10) + ' more lines';
        
        btn.onclick = (function(container) {
          return function() {
            if (container.classList.contains('expanded')) {
              container.classList.remove('expanded');
              container.classList.add('collapsed');
              var l = container.querySelectorAll('.line').length;
              this.textContent = 'Show ' + (l - 10) + ' more lines';
            } else {
              container.classList.remove('collapsed');
              container.classList.add('expanded');
              this.textContent = 'Hide';
            }
          };
        })(codeBlocks[i]);
        
        codeBlocks[i].appendChild(btn);
      }
    }
  } catch(e) {}
})();
</script>

The theme I’m using, Hermit-V2, already supports extra-head.html and extra-foot.html - these are partials that get included in every page automatically. The copy button1 (provided by the theme) still works fine - it copies the entire code, not just the visible portion.

As I mentioned in my previous dev-blog, I’m just getting started with web development, so there’s definitely room for improvement here. I’m always open to suggestions.

That’s all for now. Ciao!

  1. Don’t trust the ‘Copy’ buttons you find on random web pages; copy and paste the code yourself. Or, se ti pesa il culo, always check what you’re pasting, especially if it’s a script to be run in the terminal! ↩︎

]]>Git-Pages #1 - Mastodon comments in Hugohttps://allibragi.codeberg.page/dev-blog/git-pages-1/Sat, 14 Mar 2026 14:54:18 +0100Allibragihttps://allibragi.codeberg.page/dev-blog/git-pages-1/I am not a web developerIn this age of the internet (AD 2026) people don’t usually like to receive comments, let alone negative ones. But this is a period in which I make anachronistic and stupid decisions, so here I am integrating the Fediverse into those pages. I’ve chosen Mastodon, simply because I already have an account, but I think these steps can be adapted to any platform that uses ActivityPub.

First of all, thanks to Andreas, Jan, Carl, John and to many others for trying this out before me and sharing their knowledge with all of us.

Making the pages go Mastodon

I’m using BLZR’s hermit-V2 theme, so there is already a comments section set up to work with Disqus.

We can override the comments.html creating a new one under layouts/_default/_partials.

You can view my guess at “htmling” here:

{{ if .Params.comments }}
{{ $comments := .Params.comments }}

<section class="comment-section">
  <h3 class="comment-title">Comments</h3>

  <p class="comment-intro">
    You can use your Mastodon or other fediverse account to comment on this article by replying to the
    <a href="https://{{ $comments.host }}/@{{ $comments.username }}/{{ $comments.id }}" target="_blank"
      rel="noopener noreferrer" class="comment-link-ext">
      associated post
    </a>.
  </p>

  <button id="load-comments" class="comment-btn">Load comments from the Fediverse</button>

  <div id="comments-list" class="comments-container"></div>

  <noscript>
    <p class="no-js-msg">JavaScript is required to display comments.</p>
  </noscript>
</section>

<style>
  .comment-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
  }

  .comment-title {
    font-size: 1.4rem;
    margin-bottom: 0.6rem;
  }

  .comment-intro {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 1rem;
  }

  .comment-link-ext {
    font-weight: 600;
    text-decoration: none;
  }

  .comment-link-ext:hover {
    text-decoration: underline;
  }

  .comment-btn {
    font-size: 0.9rem;
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: rgba(120, 120, 120, 0.35);
    color: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
    font-weight: 500;
  }

  .comment-btn:hover:not(:disabled) {
    background: rgba(120, 120, 120, 0.20);
  }

  .comment-btn:disabled {
    opacity: 0.6;
  }

  .comments-container {
    margin-top: 1.5rem;
  }

  .comment {
    display: flex;
    gap: 0.8rem;
    margin: 1rem 0;
    padding-bottom: 1rem;
  }

  .comment-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .comment-body {
    flex: 1;
    min-width: 0;
  }

  .comment-header {
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
  }

  .comment-header a {
    font-weight: 600;
    text-decoration: none;
  }

  .comment-header a:hover {
    text-decoration: underline;
  }

  .comment-header time {
    opacity: 0.7;
    font-size: 0.8rem;
  }

  .comment-content {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-top: 0.3rem;
  }

  .comment-actions {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-size: 0.85rem;
  }

  .comment-actions a {
    text-decoration: none;
    opacity: 0.75;
  }

  .comment-actions span {
    opacity: 0.75;
  }

  .comment-actions a:hover {
    opacity: 1;
  }

  .comment[data-depth="1"] {
    margin-left: 20px;
  }

  .comment[data-depth="2"] {
    margin-left: 40px;
  }

  .comment[data-depth="3"] {
    margin-left: 60px;
  }

  .comment[data-depth="4"] {
    margin-left: 80px;
  }

  .comment[data-depth] {
    border-left: 2px solid var(--border-color);
    padding-left: 0.8rem;
  }

  .no-js-msg,
  .no-comments,
  .error-msg {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 0.8rem;
  }

  @media (max-width:700px) {

    .comment-avatar img {
      width: 34px;
      height: 34px;
    }

  }
</style>

<script src="/js/purify.min.js"></script>

<script type="text/javascript">
  (function () {

    'use strict';

    const btn = document.getElementById('load-comments');
    const list = document.getElementById('comments-list');

    const host = '{{ $comments.host }}';
    const id = '{{ $comments.id }}';

    btn.addEventListener('click', async function () {

      btn.textContent = "Loading...";
      btn.disabled = true;

      try {

        const response = await fetch(`https://${host}/api/v1/statuses/${id}/context`, {
          headers: { 'Accept': 'application/json' }
        });

        if (!response.ok) throw new Error(`HTTP ${response.status}`);

        const data = await response.json();

        if (!data.descendants || data.descendants.length === 0) {
          list.innerHTML = '<p class="no-comments">No comments yet.</p>';
          return;
        }

        const replies = data.descendants.sort(
          (a, b) => new Date(a.created_at) - new Date(b.created_at)
        );

        const map = {};
        replies.forEach(r => map[r.id] = { ...r, children: [] });

        const roots = [];

        replies.forEach(r => {

          if (r.in_reply_to_id && map[r.in_reply_to_id]) {
            map[r.in_reply_to_id].children.push(map[r.id]);
          }
          else {
            roots.push(map[r.id]);
          }

        });

        function actionIcons(reply) {

          return `
            <a href="${reply.url}" target="_blank">
              <span title="Replies">💬 ${reply.replies_count}</span>
            </a>
            <span title="Boosts">🔁 ${reply.reblogs_count}</span>
            <span title="Favorites">⭐ ${reply.favourites_count}</span>
          `;

        }

        function renderComment(reply, depth = 0) {
          const name = reply.account.display_name || reply.account.username;
          const avatar = reply.account.avatar_static || reply.account.avatar;
          const safeContent = DOMPurify.sanitize(reply.content);

          let html = `
            <article class="comment" data-depth="${depth}">
              <div class="comment-avatar">
                <img src="${avatar}" alt="${name}" loading="lazy">
              </div>

              <div class="comment-body">

                <header class="comment-header">
                  <a href="${reply.account.url}" target="_blank" rel="noopener noreferrer">
                    ${name}
                  </a>

                  <time datetime="${reply.created_at}">
                    ${new Date(reply.created_at).toLocaleString()}
                  </time>
                </header>

                <div class="comment-content">
                  ${safeContent}
                </div>

                <div class="comment-actions">
                  ${actionIcons(reply)}
                </div>

              </div>
            </article>
            `;

          reply.children.forEach(child => {
            html += renderComment(child, depth + 1);
          });

          return html;

        }

        list.innerHTML = roots.map(r => renderComment(r)).join('');

      }

      catch (error) {

        console.error("Mastodon API error:", error);

        list.innerHTML =
          '<p class="error-msg">Unable to load comments.</p>';

      }

      finally {

        btn.textContent = "Reload comments";
        btn.disabled = false;

      }

    });

  })();
</script>
{{ end }}

Just as something in this wall of code may have suggested I’m not a web developer so it’s a mash of things all in one file.

The other thing you need to do is download and create the purify.min.js1 file in the static/js/ folder. Be careful with the static folder in the one in the bloody root of the project. Don’t do what I did and put it in the assets folder for only god knows why.

Now, in the toml at the top of your post, add:

[comments]
  host = 'yourinstance.org'
  username = 'yourusername'
  id = '1234567890'

The parameters are self explanatory but per sicurezza2:

  • host: the hostname of your Mastodon instance
  • username: your username in that instance
  • id: the ID of your mastodon toot

What? My post ID? Yes, as my professor always said, ‘computer science is not an exact science’. To view the comments associated with a post, you need the toot ID in your Mastodon account first. The idea is that this ID is the one of the toot you will create to share the post on the fediverse.

You can find the ID opening the detail of your toot:

https://mastodon.social/@username/116205479816064809

The customization will retrieve the toot and associated responses via the API and display them.

It is up to you to decide which flow to implement. You can publish, share with a toot and then edit the post with the ID, or create the toot first (you can easily guess the URL of the post) and then publish the post.

If you have any suggestions on how to improve the script, please leave a comment. That way, we can see if it actually works.

And that’s all for now. Ciao!

  1. you can find it here ↩︎

  2. just to be on the safe side ↩︎

]]>First Posthttps://allibragi.codeberg.page/dev-blog/first-post/Sat, 07 Mar 2026 12:08:13 +0100Allibragihttps://allibragi.codeberg.page/dev-blog/first-post/&lt;no value&gt;This is bold text, and this is emphasized text. And we are ready to begin, I suppose. Not much to say — I just happened to think I needed a landing page or something like that for my sh*t.

So I’m trying out Codeberg Pages and Hugo.

]]>About mehttps://allibragi.codeberg.page/about/Mon, 01 Jan 0001 00:00:00 +0000Allibragihttps://allibragi.codeberg.page/about/&lt;no value&gt;For work, I develop Microsoft Dynamics CRM solutions and .NET applications.
Outside of work, I’m a Linux user and I’m interested in open source and self-hosting.
I also like TTRPGs, science fiction, and video games.

I’ve never been very good with people or socialising in general, so when I first came across a computer at around the age of 8, I was fascinated by it: you input things in it and get a result. Nothing to interpret, understand or read between the lines. Later on, the prospect to be able to work with computers without having to deal with people convinced me to begin my journey in the world of IT. I’ve never been so wrong: you still have to deal with people. ~ Allibragi, 2026, as I first write this very page

Now:

]]>Projectshttps://allibragi.codeberg.page/projects/Mon, 01 Jan 0001 00:00:00 +0000Allibragihttps://allibragi.codeberg.page/projects/&lt;no value&gt;
  • what I watch: An app that helps you keep track of the series you’re currently watching.
  • a Button: Just a simple button made with Flutter..
  • Writefreely LS: Fork of Writefreely for the livellosegreto.it Mastodon instance, renamed LOG. Live here.
  • reader to toot: Python script that scrapes the public “/read” page of a Writefreely instance and posts the new post titles on a Mastodon account.
  • Maker World profile: I’m not a 3D designer or anything like that, but sometimes I upload some models that I’ve made for myself and think might be useful to others. I have a BambuLab 3D printer, so I mainly use MakerWorld for convenience.
    • ]]>