npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@11ty/eleventy-activity-feed

v1.0.9

Published

Create one centralized RSS feed for all of the content you create across the web (aggregates from Twitter, RSS, Atom, Mastodon, YouTube)

Downloads

71

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

fortawesome-adminfortawesome-adminzachleatzachleat

Keywords

Readme

eleventy-activity-feed

Activity feed lets you build one centralized RSS feed that pulls in new entries from a bunch of different social networking sites. Support for (one or more) YouTube, RSS or Atom for existing blogs, Mastodon (via RSS), and your Twitter account (contributions for more are welcome!).

This allows you to encourage folks to subscribe in one location and you can control how that feed is populated later.

As a completely hypothetical example, if/when Twitter dies in a burning fire and you want to remove that channel from your centralized feed, you can do so and still keep all of your existing subscribers!

Limitations:

  • This is not a permanent data store or archival tool for your content. This does not (yet?) fetch old data beyond the initial page of results for each activity type’s API. This is merely a aggregation and rebroadcast tool for your new content in RSS.

Caching Notes:

  • When used in a static build, this will only update the feed when your build runs. I’d recommend setting up a recurring build to generate your feed regularly (maybe daily?). You could use this in serverless mode if you wanted!
  • If on Netlify, I would also recommend using the netlify-plugin-cache plugin to persist your API fetch call cache across builds. You can see an example of this on the Eleventy Fetch docs. You can control the maximum frequency at which new fetches are made to the APIs using feed.setCacheDuration("4h");

Demo

You can subscribe to the following Eleventy feed in your RSS reader of choice to see it in action:

https://www.11ty.dev/follow/

Installation

npm install @11ty/eleventy-activity-feed

Twitter User activity requires a TWITTER_BEARER_TOKEN environment variable (you can put this in a .env file).

Sample Eleventy Template

  • Use follow-feed.11ty.cjs in an ESM project (if "type": "module" in your package.json)
  • Use follow-feed.11ty.js in a CommonJS project
module.exports = class {
	data() {
		return {
			// Controls where the file is written
			permalink: "/follow.rss"
		}
	}

	async render() {
		const { ActivityFeed } = await import("@11ty/eleventy-activity-feed");

		let feed = new ActivityFeed();

		feed.setCacheDuration("4h");

		// YouTube
		feed.addSource("youtubeUser", "YouTube", "UCskGTioqrMBcw8pd14_334A");

		// Blog
		feed.addSource("atom", "Blog", "https://www.11ty.dev/blog/feed.xml");

		// Mastodon
		feed.addSource("rss", "Mastodon", "https://fosstodon.org/users/eleventy.rss");

		// Twitter
		feed.addSource("twitterUser", "Twitter", "eleven_ty", "949639269433380864");

		return feed.toRssFeed({
			title: "Eleventy’s Activity Feed",
			language: "en",
			url: "https://www.11ty.dev/follow/",
			subtitle: "One centralized feed of Eleventy activity across the web.",
		});
	}
};

Add to the <head> of your page to show it in RSS readers:

<link rel="alternate" href="/follow.rss" title="Eleventy’s Activity Feed" type="application/rss+xml">

What’s Next?

Happy to accept PRs for better HTML display of different feed entries (YouTube needs URL-><a> linkified descriptions and Twitter could use @-username links on content) and addition of more types of data! Feel free to contribute!

Check out the issue tracker.