Adding a simple light box in wiki.js

Karl Adler — Wed, 20 Mar 2024 05:33:35 +0000

Wiki.js is a self hosted, open source Wiki that has a lot of awesome functionality. Unfortunately it's lacking some small, but important UI features, like a light box, to enlarge downsized images to it's full size. And unless you want to add a link to each image, to open it in a new tab, you would probably go for a modal view here.

Luckily wiki.js offers a simple solution to add custom code to your theme, so we can make use of it, to add a very simple lightbox.

Go to the admin menu and look for the themes page.
Under Code Injection you have three fields, one for CSS and two for injection HTML in the <head> and the end of the <body> section.

First we need some styling for our light box, insert this in the "overwrite css" section. We prefixed everything with mylb- to avoid any inferences with other class names.

.mylb-lightbox-container {
  display: none;
  position: fixed;
  z-index: 9999;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
figure.image {
  cursor: pointer
}
.mylb-backdrop {
  position: fixed;
  cursor: pointer;
  padding: 20px;
  background-color: rgba(0,0,0,.5);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
.mylb-close-btn {
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 20px
}
.mylb-lightbox-image {
  max-width: 90%;
  max-height: 90%
}

Then we can inject the script for the actual light box functionality. We initialize the script just a second after the DOM has been loaded, since wiki.js runs on vuejs and the page needs to be rendered first.

<script>
function openLightbox(imageUrl) {
  var lightboxContainer = document.getElementById("mylb-lightbox-container");
  var lightboxImage = document.getElementById("mylb-lightbox-image");
  var lightboxCaption = document.getElementById("mylb-lightbox-caption");

  lightboxImage.src = imageUrl;
  lightboxContainer.style.display = "block";
}

// Function to close the lightbox
function closeLightbox() {
  var lightboxContainer = document.getElementById("mylb-lightbox-container");
  lightboxContainer.style.display = "none";
}

function initializeLightbox() {
  // Attach click event listener to all figure elements with class 'image'
  var figureElements = document.querySelectorAll("figure.image");
  figureElements.forEach(function (figure) {
    figure.addEventListener("click", function (e) {
      var imageUrl = this.querySelector("img").getAttribute("src");

      openLightbox(imageUrl);
    });
  });
}

// Execute the function after DOM content has been loaded and rendered
document.addEventListener('DOMContentLoaded', setTimeout(() => initializeLightbox(), 1000));
</script>

Now we only need to add a HTML element, where we can render our light box into. Since it's a modal which should be rendered on top of all other elements we put it at the end of our html-body.

<!-- The lightbox container -->
<div id="mylb-lightbox-container" class="mylb-lightbox-container">
  <span class="mylb-close-btn" onclick="closeLightbox()">&times;</span>
  <div onclick="closeLightbox()" class="mylb-backdrop">
    <img src="" alt="" class="mylb-lightbox-image" id="mylb-lightbox-image">
  </div>
</div>

Now all your images will have a click handler that opens a modal with the full screen image. It might not be the cleanest way to add a light box to your wikijs, but it's probably the most easy and fastest solution, to quickly implement this feature, till wiki.js officially supports this.

Extend SvgIcon sizes in React Material UI

Karl Adler — Thu, 18 Nov 2021 13:05:03 +0000

Using React Material UI you have the opportunity to use any SVG file like an icon. To do so, you just wrap it into the SvgIcon component.

An example for your HomeIcon component might look like this:

import React from 'react';
import { SvgIcon, SvgIconProps } from '@mui/material';
import { ReactComponent as HomeSvg } from '../../assets/Icons/Home.svg';

function HomeIcon(props: SvgIconProps) {
  return (
    <SvgIcon component={HomeSvg} viewBox="0 0 24 24" {...props} />
  );
}

export default HomeIcon;

Importing svg files as react components required svgr, otherwise you would need to use the SVG code as children of SvgIcon

With SvgIcon you have the possibility to set the fontSize attribute to "small", "inherit", "large" or "medium", but what if we if we would need more of this?

<HomeIcon fontSize="small" />
<HomeIcon />
<HomeIcon fontSize="large" />
<HomeIcon sx={{ fontSize: 40 }} />

Here is where component variants come into play.

In our theme we just add a new variant to the MuiSvgIcon component. E.g. we we want an new size called huge we do it like this:

components: {
   MuiSvgIcon: {
      variants: [
        {
          props: { fontSize: 'huge' },
          style: {
            fontSize: '5rem',
          },
        },
      ],
    },
}

That should already work, but when we are using typescript and setting it, the compiler will complain.

<HomeIcon fontSize="huge" />

So we need to extend the interface for the component too:

declare module '@mui/material/SvgIcon' {
  interface SvgIconPropsSizeOverrides {
    huge: true;
  }
}

Just add the above module declaration e.g. to your theme.ts and that's it.

DEV Community: Karl Adler

Adding a simple light box in wiki.js

Extend SvgIcon sizes in React Material UI