Even though I wrote about it in a previous week note I have not been using my start page to much yet. Yesterday I randomly decided to start using it after cleaning a few things up. Combined with my dev server I had some of the pieces ready.

First, I configured Firefox to change my start page to start.localhost, where I have my page running. Unfortunately, while you can configure the home page, you can not currently configure the new tab page.

I initially tried an extension called New Tab Override in an attempt to fix things, however there is apparently a long running Bugzilla regarding some issues with it.

Starting over, I already had Vivaldi installed so decided maybe this was a time to try switching over, especially since there have been some other misfires from Mozilla recently. Changing the homepage/newtab settings in Vivaldi were fairly easy.

Basic Implementation

Like most of my projects, I am building it on django and using htmx for loading modules. Using layoutit to prototype and understand grid layouts, I started with this CSS.

display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 3fr 1fr 1fr;
gap: 10px 10px;

grid-template-areas:
  "north-west north-west north north-east north-east"
  "west center-top center-top center-top east"
  "west center-middle center-middle center-middle east"
  "west center-bottom center-bottom center-bottom east"
  "south-west south-west south south-east south-east";

This then makes it easy to define various grids to hold the various panels I want to show on my start page.

<section class="north-east" style="grid-area: north-east">...</section>
<section class="center-middle" style="grid-area: center-middle">...</section>
<section class="south" style="grid-area: south">...</section>

Mixing in htmx, I use that to help populate the various panels.

<section class="north-east" style="grid-area: north-east">
  <div hx-get="{% url 'htmx:weather' '35' '140' %}" hx-trigger="load">
    Tokyo
  </div>
</section>

<section class="center-middle" style="grid-area: center-middle">
  <div hx-get="{% url 'htmx:quotes' %}" hx-trigger="load">
    <p>Loading...</p>
  </div>
</section>

With the basics out of the way, I have opportunities to continue to extend things how I want.

For testing, currently I have some basic weather widgets based on lat/lng, a basic clock and a quote module. In the future, I want to add some views for current tasks and maybe even a ‘random’ task from my backlog that I could consider working on.

There are plenty of other dashboard type projects, so I am not sure how useful it is to release the code, but this is a nice, small project to tinker on as I have an itch.