Introducing ✨ Relano - Create beautiful "What's new" videos and automate your project's social media!
Tags: githubhack23, github, githubactions, community
Published: 2023-05-23 23:55:57


## ✨ What is Relano?

Relano is a GitHub action you could add to your repository to automatically create 'what's new' videos as soon as you publish a release! 

Just add the GitHub action to your workflow, pass in the `openai-api-key` and the `release-notes` variable, and publish a release. Relano uses OpenAI to come up with a summary of all the changes in the published release, and passes it to our renderer for creating a beautiful video!

## 📸 Example Output

An example from the `remotion-dev/remotion` release version `3.3.93`. 

{% youtube mkGqYsmVpHc %}

(Video not loading? Click here: [youtu.be/mkGqYsmVpHc](https://youtu.be/mkGqYsmVpHc))

This video was created automatically without any other inputs.

## 🛠️ How it works

A very simple explanation of how to use the Relano and how it works:

{% youtube  D7udTbnKAP8 %}

(Video not loading? Click here: [youtu.be/mkGqYsmVpHc](https://youtu.be/D7udTbnKAP8))

## 🤩 Use this action in your GitHub Projects

![Github Action for Relano–Marketplace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92hhpipufggfy8iq42a9.png)

## 💫 Background, and why I created it

I saw a lot of open source maintainers struggline with community management. For example, popular open source projects like plaiceholder are run by people who have a day-job, and don't necessarily have the time to keep their community informed about what's new!

### 🧓🏼 How it all started

When I was talking with [Jonny Burger](https://twitter.com/JNYBGR) (the creator of [Remotion](https://remotion.dev/)) about the challenges small open source projects face and how it becomes harder for individual maintainers who work because of their goodwill to carry their project forward, I did not realize the conversation would give birth to the idea of Relano.

It all started on a discord chat, when I was casually talking with Jonny. We somehow got to the topic of what it is like being an open source maintainer. Though I knew Jonny had a team behind Remotion to help manage the day-to-day operations of open source, I soon realized it would have been hard for individual contributors to do open-source part-time, just as well as Jonny and his team did, without the resources they had.

### 🥷🏼 The Hidden Challenges

Maintainers pour countless hours into coding, debugging, and ensuring their project's stability. However, there's always this one aspect that eludes their attention – community management. In the midst of programming, fixing issues, and creating roadmaps, finding the time to engage with the community, communicate updates effectively, and provide the necessary documentation became a big problem.

### 🥲 Struggles of a Solo Maintainer

Solo maintainers or small teams have to cope up with so much for open source projects, and it becomes clear that keeping the community informed about latest releases often falls through the cracks.

### 🤩 Relano bridges the gap

I'm pretty well versed with react and Remotion, and there's a new opportunity to tackle, I thought to myself. That's when the idea for Relano materialized – a tool that would empower maintainers to effortlessly create captivating "What's New" videos for their projects' latest releases.

## 🧑🏼‍🔧 How it works under the hood

Converting an idea to reality was one of the most interesting parts of the process! No matter the outcome, the learning experience has to be worth it! Let me take you through the journey of how I created Relano, and how it works!

### 🤌🏼 Publishing a release triggers the action

The action listens for the `release` event, and gets triggered when a new release is published, or an existing release is edited.

![Triggers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ky3lkiss4rg8kndk88k2.png) 

This **starts the video-creator job**, using the suitable environment which has the secrets:

![Jobs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmoqy4c8i2c3yt5g04t0.png)

Out of the few steps required to run Relano, one of the steps is the Relano action. It takes 4 inputs relating to the current repository, and uses them to create a video.

![Relano step](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h44o46w4eyqovmfviafu.png)

### 🤖 OpenAI for summarization

The release notes are passed down to OpenAI to extract the most useful information, which is finally used to create the video.

![Openai Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xng0sxnd0eu08lsoxz9.gif)

For this, we use the chat mode, since it has a better interface for defining instructions and content. The OpenAI prompt reads something like:

![OpenAI Playground screenshot showing system and user message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqi5bunj5ql9ncmmquur.png)

This creates yaml with the following format:

![GPT-chat Response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzqh4ouc2c3wvuvjudt4.png)

This yaml is then converted to json using [an open source library–yaml](https://npmjs.com/package/yaml).

![Yaml to converted JSON](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n83cq378yz6hy1e6nxht.png)

### 🤯 Rendering the video

After the OpenAI command completes, we get to the actual video creation step. Here's where **GitHub actions** really **shines**!

![Github Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91r4vt9t9xi1btkeklil.png)

The input from OpenAI as JSON is passed onto the [Remotion Composition](https://github.com/Just-Moh-it/Relano/tree/main/remotion/BaseComp) as input props! These parameters are what constitute the information for the final video! 

You could even copy the parameters over, clone the Relano repository, and paste them as props to the composition, and you'd be able to preview the video in the Remotion UI:

![Remotion previewer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/898flbx2s40zetp6n8zq.png)

Remotion converts the videos to chunks, then renders them multithreaded on GitHub Actions runners!

![Remotion Distributed Rendering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9m6l34ytow3rx8niy0h.gif)

To learn more about how remotion renders videos on the server, checkout the docs: [remotion.dev/docs/ssr](https://www.remotion.dev/docs/ssr)

The video is finally available, uploaded as an artifact after the workflow run!

![Artifact on github action run](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qsj9s4y4e2i41hqtvk3.png)

### ✨ Posting to social media!

Keeping users informed about the latest changes is one of the best things a maintainer could do to keep the community thriving and exited! After downloading the video, upload it to your **project's social media**!

![Uploading to twitter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgvim50rqz7lkyh2nful.png)

## 💁🏼‍♂️ Additional Resources/Info

I took inspiration from the following sections to create the video:
- [Reanimated update video](https://www.remotion.dev/showcase#d2SvbrhHvyJZb2EmSv441M601UBy1dfEYfToKGqDpV01Y) on remotion showcase page - design inspiration
- William Candillon's [Song of bloom](https://youtu.be/PfCQEA72ljU) for [audio](https://youtu.be/e1htZET1j2Y) inspiration

## 📂 Category Submission: 

The project fits into the following categories. 

- **Wacky Wildcards** - Pretty wild what Relano is using GitHub actions for!

- **Maintainer Must-Haves**: This makes the life of maintainers easier and lets them focusing on the thing they do best–creating awesome open-source tools! Relano assists in the community management part!

## 🔗 Links

- The source code lives here: [https://github.com/Just-Moh-it/Relano](https://github.com/Just-Moh-it/Relano)
- Checkout the GitHub Action on the marketplace: [https://github.com/marketplace/actions/relano-automated-what-s-new-videos](https://github.com/marketplace/actions/relano-automated-what-s-new-videos)
- See this GitHub action being battle-tested over on Remotion's Discord server: [https://discord.com/channels/...](https://discord.com/channels/809501355504959528/994527481598070815)

## 💼 Permissive License 

The workflow is licensed under the MIT license. Use however you want! 🔥 [Remotion's license](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md) applies to mid-to-large-size commercial organizations using the action.