Hi there! This website is still quite WIP!

Don't be surprised if something is a bit broken! It might be fixed soon, might not.
full picture

Lucidragons

Dragon's Fire

  • About
  • Blog
  • Projects
  • Artworks
  • Dragon's Fire
  • root
  • > projects
  • > dragon_fire
  • Directory contents:

    Name Title Modified
    TODO.md Dragon Fire Todolist 2024-10-09 16:26:46

    Dergen Fire

    The "Dragon Fire" project is the codename for this very website you are watching right now (that, hopefully, being https://lucidragons.de). Chosen along how dragons usually roar with a powerful flame to communicate and, perhaps, to show off.

    It's main purpose, thusly, is documentation of our work and communication about it, to let us better share what we create and work on with others.

    You will find its general style to be reminiscent of that of a code editor's file tab, and most of the writing ordered as a directory. This is intentional for two reasons - firstly, to give the reader a comfortable feeling for the slightly longer-form text. The site is written by nerds, for nerds, and many of us know the environments of the likes of VSCode well. Secondly, to give a structure to the content. Unlike a social media site, our website does not have one central, linear feed - instead it has folders and projects and blog collections and galleries, all their own avenues of exploration and writing. You can follow each one at your own pace.

    In fact, the entire contents of this website consist of Markdown files in a git repository, which you may download from ... We need to set the link up here, remind us later :P

    This website is a casual side-project along the other items being worked on, and will receive a more gradual and gentle level of affection because of this.

    Changelog

    Technical specifications

    Client side tech

    Unlike most other websites, this one ... Is very boring on the client side. No React, no Vue... In fact, it will work entirely without JS at all! Most importantly, no client side tracking. That should never, and probably never will be, a technology we need nor desire.

    There are a few client-side tech tricks, though. Firstly, the Banner at the top of this webpage is gently animated with a small, custom JS script - not even JQuery, just a few vanilla setTimeout()s to move the banner and occasionally trigger a CSS animation to swap out the image.

    Secondly, HTMX is the big one. It is a very small (~40kB zipped) JS file, not even installed via NPM, it's just dropped in, and thusly creates little overhead. Its main purpose is to smooth out website transitions thanks to the wonderful HTMX Boost. Boosting here refers to HTMX grabbing any normal <a href="..."> click, requesting the page in the background and then smoothly replacing the website content in-place, rather than refreshing the whole site. This allows e.g. the Banner at the top of the site to remain in place, and makes everything feel smoother. As a sane fallback, if JS is disabled, all links simply act like normal links and the Website can be used like normal! Just a bit less smoothly.

    HTMX also sprinkles in a few other modern touches to the site. Look at the top navigation bar (hidden behind the burger menu button), and things such as the folder navigation are loaded behind the scenes using HTMX on:reveal triggers. It's all very neat and clean~

    And ... That is all for the client side. No behind-the-scenes live zipped optimized on-deman document-reflow-reducing reduxing reactor vueframe. Just HTML - mostly.

    Server-Side tech

    The server side code is a little more interesting, at least.

    The current rough structure is that of a fairly average PHP setup - nginx pretending to be Apache2 running PHP, with a MySQL database to serve some rough info.

    What might be a little surprising to hear, though, is that this whole site does not use a specific framework. No WordPress or Laravel or such. The biggest component in use is probably Twig, thanks to its amazing template engine - it probably is one of the best we know, really. This is closely followed by some libraries for RSS/Atom Feed generation, YAML and Frontmatter parsing, and Markdown rendering. But no framework.

    All CSS and HTML was essentially custom-written for this site, and I think if you were to inspect it, you would see as much - it's quite a lean DOM!

    For most cases of viewing a website, the data-flow is as follows:

    This article was created on 2024-10-08 01:47:14, last edited 2024-10-09 16:26:45, and was viewed 1803 times~