DEV Community

loading...
Cover image for Create a summary for your forem(dev.to) posts easy and fast with Summaryze!

Create a summary for your forem(dev.to) posts easy and fast with Summaryze!

tuliocalil profile image Tulio Calil Updated on ・2 min read

Hi guys, how have you been ?
Today I want to show you an app that I created for forem platforms (like dev.to), it’s called Summaryze Forem, it’s an app that will read your post, get all anchors links and create a summary on markdown!

About it

I like to add summaries to my posts(it’s easier to read), on one of my posts here I was so lazy to make it (it takes so long) and I thought, “Hum, why not create a tool to make it for me?” So I remembered that a friend made something like this for Blogger posts with python and typescrip and I thought "Hmm, why not with javascript to forem platforms?”.
Created a prototype on figma and started working on this.

How use it

It’s very easy to use. Just open the app, copy your post url (draft or public post) and paste on url field, after that, just click "Generate" button:

Preview
Now, copy the markdown code (it’s possible to have a preview too) and paste it on your post!

How it works

I wanted to create a full stack application with react for this project, I began some tests with express and express-react-views but without success. I thought, “Why not Nextjs ?"
I started creating the web scraper, using Cheerio to manipulate the fetched page and Node-fetch to make the page request and pass the page body to cheerio.
After inspecting a post with Chrome Dev Tools, I see that every anchor link has an "anchor" class so it’s very easy to scrape. After getting all elements, I see that the text with the name of the link is in the parent element, I create two arrays, one to add the link and another for the title.
I make an iteration on all elements and for each, I push the values. Lastly, I create a final array and make a map to format it all using template string.

Conclusion

A special thanks to Thais 💛 for help me write this post!
That’s all! I hope you like it and use it!
Check here the project on github:

GitHub logo tuliocll / summaryze-forem

Create posts summary from forem platform(like dev.to) easy

Summaryze Forem 📑

NodeJS JavaScript Next JS Vercel Dev.to blog Figma

About it📖

Inspired on my friend project: Summaryze, Summaryze Forem is a tool write on javascript with NextJS that use web scrap to get all anchor links from a post on forem plataforms(like dev.to), format it and create a markdown summary fast and easy I have this necessity after write this post and being too lazy to do the summary, so i decide to create this tool, hope you like it.

Here you can see the figma prototype.

Frameworks and Libs 🛠

  • Nextjs
  • Node Fetch
  • Cheerio
  • React Tabs
  • React Toastify
  • React Icons
  • ...

How to use it

Check here a quick guide.

Install 🚀

Clone the project:

git clone https://github.com/tuliocll/summaryze-forem.git
Enter fullscreen mode Exit fullscreen mode

Navigate to project folder and install dependencies:

cd summaryze-forem
yarn
#or
npm install
Enter fullscreen mode Exit fullscreen mode

Run the project on dev mode:

yarn dev
#or
npm run dev
Enter fullscreen mode Exit fullscreen mode

Buy me a coffe!

Ko-Fi

Made with

Discussion (4)

pic
Editor guide
Collapse
ben profile image
Ben Halpern

This is cool! Keep on working on it, I bet some day as we work out our "add-on" ecosystem it could eventually become a native add-on (way, way down the road).

Once it's live, you may want to call it Summaryze Forem, to be compatible with all apps built on the platform.

Collapse
tuliocalil profile image
Tulio Calil Author

Summaryze DEV now is Summaryze Forem! 🥳🥳

Collapse
tuliocalil profile image
Tulio Calil Author

that would be awesome 🥳, i still working and will change the name soon as possible

Collapse
vitao18 profile image
Victor Feitosa

Amazing man! This is really helpful