Announcing stories.js: Create web stories on your personal website

I am excited to announce stories.js, a HTML component that you can add to your website to create web stories.

This project was inspired by a discussion about web stories and HTML components Homebrew Website Club yesterday. I noted that someone has defined a standard for web stories, OpenStories ^1, and that the creator published stories on their home page ^2.

Another participant noted how great it would be if website features were modular in such a way that you could add the ones to your site that you liked without having to build them from scratch. JavaScript frameworks embrace the concept of a "component" wherein a developer composes abstract code that can be reused in different places, but they often depend on using a particular framework and being a developer; doing the integration work to get the component to work.

These two discussions inspired me to build stories.js, which embraces the HTML Web Components architecture to enable adding stories to one's personal website. To use the script, add the following code to a web page:

<script>
var images = [
    "",
    ...
];
</script>

<template>
    <link rel="stylesheet" href="https://capjamesg.github.io/capjamesg/stories.js/stories.css">
</template>

<html-story></html-story>

<script src="https://capjamesg.github.io/capjamesg/stories.js/stories.js"></script>

Replace the list of images with your own images.

Then, add a button somewhere on your page that will be used to open the web stories:

<button onclick="document.querySelector('html-story').show()">Show</button>

After adding this code, you'll have a working story feature on your website! When you click on the button, a stories feature will pop up in which you can view the specified images.

You can use your keyboard forward and back arrows to move back and forward. You can also tap on the left or right of the image to move back and forth. The stories widget is designed to work on mobile and desktop.

I am using this component on my home page now! When I post stories on my site, a blue ring will appear around my profile image. When clicked, you will be able to view my active stories. Here is what the blue ring looks like:

I love building reusable components that you can plug in to your own websites. I remember seeing a page somewhere that collected various web components. I will need to dig that up again! I would love if there were more small, reusable scripts that I could add to my site to enable different features. The ideal component works by pasting in some code that is in a quickstart without requiring any additional logic changes, while offering extensions to enable unique functionality.

One extension on which I am working, but have not yet completed, is to build a code snippet you can use to show multiple series of stories (i.e. a story for one's coffee images, a story for one's vacation images). I shall share this code in the stories.js GitHub repository and on the project landing page when I am finished.

Further down the line, I want to write a function that parses a series of OpenStories files so that one can publish feeds in one place and have them referenced anywhere the story component is configured to use the feed.

I hope you find stories.js useful. If you use stories.js, I'd love to hear about your experience working with the script.

Also posted on IndieNews.