DEV Community

Rizèl Scarlett for GitHub

Posted on

Open Source Friday Recap: Slinkity and TinaCMS

Typically, developers don’t push to production on Fridays, which is why Friday is the perfect day to contribute to Open Source. Every Friday at GitHub, we stream Open Source Friday on Twitch with host Brian Douglas and the maintainer of a rising open source project. It’s an opportunity to learn how they built the tool and how you can contribute.

Slinkity

On Oct 8, 2021, we chatted with Slinkity’s author and owner, Ben Holmes.

What is it?

Slinkity is a plugin that can extend any 11ty site. If you’re not familiar with 11ty, it’s a static generator site. Ben describes Slinkity as the glue between 11ty and Vite. With Slinkity, you can use shortcodes to insert React components and quickly transform HTML files into JSX files. Currently, it is available as an early alpha version, so it’s not ready for production just yet, but stay tuned for frequent updates.

Why was it made?

During quarantine, Ben rewrote his personal website using 11ty but wished for an easy way to insert components into his site, so he created a way to do it. He credits the launch of his project to members of various Discord communities for encouraging him to just “ship it.”

Watch the video below to learn more about Slinkity:

Explore the codebase and contribute to Slinkity:

GitHub logo slinkity / slinkity

To eleventy and beyond! The all-in-one tool for templates where you want them, component frameworks where you need them 🚀

Slinkity - To eleventy and beyond

License: MIT Twitter: slinkitydotdev

Slinkity

🚧 This project is heavily under construction! 🚧 As excited as you may be, we don't recommend this early alpha for production use. Still, give it a try if you want to have some fun and don't mind logging bugs along the way :)

Slinkity is a tool for bringing dynamic, clientside interactions to your static 11ty site. Once installed, this:

  • 🚀 Unlocks component frameworks (like React) for writing page templates and layout templates. So, you can turn an existing .html or .liquid file into a .jsx file, and immediately start building routes using React.
  • 🔖 Includes powerful shortcodes to insert components into existing pages. Add a line like this to your markdown, HTML, Nunjucks, etc, and watch the magic happen: {% react './path/to/component.jsx' %}
  • 💧 Hydrates these component-driven pages on the client. In other words, all your dynamic state management will work in development and production with 0…

TinaCMS

On Oct 15, 2021, we chatted with James Perkins, a Developer Advocate for TinaCMS.

What is it?

TinaCMS is a visual editing experience for content stored as Markdown, JSON, or MDX (which is coming soon). The team recognized that while popular content management systems like WordPress allow you to edit and see your content before publishing, many JAMStack tools don’t.

TinaCMS provides content writers and editors with immediate visual feedback by enabling developers to edit and rearrange content around as needed on JAMStack applications.

How does it work?

To install TinaCMS and create an easy visual editing experience for your site, you only need to install the npm package into your application with this one line: npx @tinacms/cli init. This line will generate all files and tools needed to use TinaCMS.Under the hood, a GraphQL layer powers the content editing experience.

Watch the video below to learn more about TinaCMS:

Explore the codebase and contribute to TinaCMS:

GitHub logo tinacms / tinacms

Open source editor that brings visual editing into React websites. A developer-centric CMS to build contextual and intuitive editing experience without sacrificing code quality.

GitHub license npm version Status All Contributors

TINA CMS

Tina is an open-source toolkit for building content management directly into your website.

Tina Demo

Getting Started

Checkout the tutorial to get started with TinaCMS.

Documentation

Visit https://tina.io/docs/ to view the full documentation.

Development Process

See our ROADMAP.md to learn how the maintainers work.

Questions?

Tweet Forum

Visit the community forum to ask questions or look us up on on Twitter at @tina_cms.

Changelog

Check the CHANGELOG for the latest updates to TinaCMS.

Contributing

Please see our CONTRIBUTING.md

Maintainers

All Contributors

Thanks goes to these wonderful people (emoji key):

Comment below if you have or know of an Open Source project that you would like us to feature!

Discussion (0)