Search for a command to run...
Integration between Hashnode and Canva that you'd never expect
I am always eager to experiment with new technology and share my experiences and insights gained through trial and error. Currently working as Backend Engineer.
No comments yet. Be the first to comment.
Powered by MindsDB 🤖
Introduction Generated AI is one of the latest tech. The progress is swift, and it actually helpful for many jobs in every aspect of people's lives. The most groundbreaking tech discovery after spreadsheet :p. Everyone uses it. LLM like ChatGpt, trai...
I have been using Notion for my personal blog. Start with using premium paid service Super.so when it still in the early bird. Super is great, it just works, that's what I want, but when it gets popular I don't have the luxury to pay 12$ per month fo...
Over the past three years, I have been working on aggregator apps. These apps essentially act as intermediaries between users and various systems. The main goal is to provide a seamless user experience by allowing them to interact with multiple syste...
The motivation for creating Hashnode Canva Integration is bringing Hashnode Article to wider audiences by converting it to a different format. I think many of you sometimes see PowerPoint-like content on social media like Instagram, TikTok, or LinkedIn. Something like this:
You have been working hard on publishing a good article here. Why stop there? Bring your Hashnode's article to more audiences by start distributing it as Microblog or Digital Booklet format.
Introducing: Hashnode Canva Integration
Canva is one of many graphic design platforms, if not the best one right now. The easy-to-use, to-the-point, rich template and elements make Canva good for every use case. I believe we at least used Canva once to create cover image of our article
Integration capabilities of Canva, and then GraphQL API from Hashnode, make this possibility become reality. And here we are, Hashnode Canva Integraion is Born.
I want to make this as simple as possible but keep the functionality intact. The main function is to get article data that can be added as an element to Canva Design. The final application flow is like this:
Get data from the URL using Hashnode's GraphQL API
Mapping the content
Drag to Canvas as Design Element
Done!
Simple.
From GraphQL API we can get the content on html markdown or text format. I choose markdown because it is easier to parse. Also, many markdown parsers out there are ready to use.
Canva has SDK that makes it easy to develop on their side. Turning the article content into Canva Element is quite straightforward using it.
The apps extract the content of the article and group them into 5 separate tabs that you can use as elements on canvas design. The tabs are:
Meta
This tab contains metadata such as:
Background Image
Author Name
Author Profile Picture
Published Date
Title
Subtitle
Content
This tab contains the content of the article. Including the header, text content, code, and images.
Links
This tab contains links that appear on the article
Image
This tab contains all images in the article
Code
This tab contains codes that appear in the article
Every element of the tab can be used as an element of Canva design.
The actual obstacle is the time limit. 15 Days. With full-day working on weekdays, so I need a little sacrifice on my sleep. Also, publishing new Integration to Canva takes a long process of submission. This app is still in review and hopefully, it can accepted as soon as possible.
I will update the status of the Apps here. So Stay Tune!
As Always, Thank you to Hashnode for organizing the hackathon! Makes my coding habit still going, and bringing little impact here and there.
Hackathon is a great source of push if you want to build something but always procrastinate. Given timebox, our mind will try to find the most efficient to finish what we started. Driving by incentives, and your motivation is hard to deplet. Give it a try.
Thank you for reading!
#APIHackaton