I finally got around to self hosting my own start page - Glance (thx Jamo).

GitHub - glanceapp/glance: A self-hosted dashboard that puts all your feeds in one place

A self-hosted dashboard that puts all your feeds in one place - glanceapp/glance

GitHubglanceapp

I am very much a newbie when it comes to docker. I use dockge since it was really easy to set up on my NAS (I use TrueNas Scale).

Here's how I set it up using dockge:
I am not that confident with using a CLI, I still prefer using a GUI. So the first thing I did was to make sure I set up a glance folder in one of my SMB shares. Inside that folder, I put the default glance.yml file since the compose.yaml calls for it when you deploy.

compose.yaml:

services:
  glance:
    image: glanceapp/glance
    container_name: glance
    volumes:
    # add your glace.yml path
      - /mnt/NAS/appsconfigs/glance/glance.yml:/app/config/glance.yml
      - /etc/timezone:/etc/timezone:ro
      - /etc/localtime:/etc/localtime:ro
    ports:
      - 8280:8080
    restart: unless-stopped
    environment: []
    networks: []
networks: {}

I added some of my own code to the page also. I wanted the bookmarks to be icons, not just text links. I also added a picture and my theme of choice nord cause yknow, pretty

Here's my code, warning, I am not a professional so feel free to make it better.

Quick links widget:

- type: html
  source: |
    <div class="widget widget-type-quicklinks">
      <div class="widget-header">
        <style>
          .app-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            gap: 30px;
            text-align: center;
          }
          .app-icon img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 50px;
            height: 50px;
            border-radius: 15px;
            background-color: white;
            border: 5px solid #fff;
          }
          .app-label {
            color: var(--color-primary);
            font-size: 14px;
            font-weight: 500;
            margin-top: 8px;
            text-decoration: none;
          }
        </style>

        <h2 class="uppercase">Quick Links</h2>
      </div>
      <div class="widget-content">
        <div class="app-grid">
          <a href="https://www.youtube.com/" class="app-icon">
            <img src="https://cdn.jsdelivr.net/gh/selfhst/icons/webp/youtube.webp" alt="YouTube">
            <div class="app-label">YouTube</div>
          </a>
          <a href="https://mail.google.com/" class="app-icon">
            <img src="https://cdn.jsdelivr.net/gh/selfhst/icons/webp/gmail.webp" alt="GMail">
            <div class="app-label">GMail</div>
          </a>
          <a href="https://github.com" class="app-icon">
            <img src="https://cdn.jsdelivr.net/gh/selfhst/icons/webp/github.webp" alt="GitHub">
            <div class="app-label">GitHub</div>
          </a>
        </div>
      </div>
    </div>

Header widget:

- type: html
  source: |
    <div class="widget widget-type-headerimg">
      <style>
        .header-image {
          width: 100%;
          height: 400px;
          object-fit: cover;
          object-position: 100% 60%;
          filter: grayscale(50%);
        }
      </style>
      <div class="widget-content">
        <img class="header-image" src="https://images.unsplash.com/photo-1677033467113-576f7c01b493" alt="Header Image">
      </div>
    </div>

Nord colouring:

theme:
  background-color: 219 16 21
  contrast-multiplier: 1.2
  primary-color: 193 43 67
  positive-color: 92 28 65
  negative-color: 354 42 56