Connective Unconscious | Stephanie Aelmore

The Connective Unconscious is my personal website that I host on an Ubuntu Server so that I have full control over the design and execution of everything hosted on it. So far I’ve only seen fit to host photos, poetry, and an unfinished applet that I wrote about here.

The website is built as a server-side Node.js app with Jade as a templating engine. I pursued this particular path because the npm package manager allowed me to add only the features that I wanted, making it a perfect fit for a simple personal site, especially compared to feature-packed servers like apache.

All css is custom made, and the photos are loaded dynamically using a json file as a rudimentary database. A custom route is generated for each photo, and in the 日本の夢 album, the poetry is stored in the same json file as the photo filenames.

Sample code for serving photos

function serve_photo_album(album_name, display_name) {
  // read the list of captions
  var captions = JSON.parse(fs.readFileSync(
    `./public/${album_name}/captions.json`, 'utf-8'));
  var photo_array = Object.getOwnPropertyNames(captions);

  // set the route to the album name
  router.get(`/${album_name}/`, function(req, res, next) {
    // handle each request
    var image = req.query['image'];
    if (!image) {
      res.redirect(`/${album_name}/?image=0`);
      return;
    }
    // ensure valid photo id
    var photo_id = 0;
    if ((image >= 0) && (image < photo_array.length)) {
      photo_id = Number(image);
    }
    // set next and last link values
    var last_id = (photo_id-1)>=0 ? photo_id-1 : photo_array.length-1;
    var next_id = (photo_id+1)==photo_array.length ? 0 : photo_id+1; 
    var photo_name = photo_array[photo_id].trim();
    // draw the image page
    res.render('photo_album', { 
      album: album_name,
      title: display_name,
      photo: photo_name,
      caption: captions[photo_name],
      no_caption: captions[photo_name]=='' ? ', no_caption' : '',
      photo_id: photo_id,
      last_id: last_id,
      next_id: next_id});
  });
}

The result is a persistent hyperlink for each image, such as “https://connectiveunconscious.com/nihonnoyume/?image=3”. The links for “next” and “previous” are also generated and passed to the template engine. This allows for dynamic content loading with no client-side JavaScript for the photo albums.