DEV Community

Cover image for How I Designed a Content Distribution Pipeline — 9 Content Types, 20+ Platforms, One Interactive Diagram
Maxim Osovsky
Maxim Osovsky

Posted on

How I Designed a Content Distribution Pipeline — 9 Content Types, 20+ Platforms, One Interactive Diagram

#buildinpublic #opensource #contentcreation #automation

The Copy-Paste Problem

Every time I publish a dev.to article, I share it on X and Mastodon — but why not also Bluesky and Threads? I keep meaning to, but it's manual work every time.

My podcast goes to Apple Podcasts — but I want it on Spotify and YouTube Podcasts too. I just never get around to setting it up for each episode.

When I shoot a vertical video, it goes to TikTok — but I skip Instagram Reels, YouTube Shorts, and Facebook Stories. Same content, different platforms, and I don't have the time to upload it four times.

And when I create an event — it's a 2-hour ordeal. Luma, LinkedIn Events, Facebook Events, Meetup. Each one needs its own format, its own description, its own image.

That's 20+ platforms. For 9 different content types. And I'm doing maybe half of it manually, skipping the rest.

Maxim Osovsky mapping content distribution during a strategy session

During one of the strategy sessions with my team, I mapped out every content type I produce, every platform I post to, and every connection between them. The result was a mess of arrows on a whiteboard. So I turned it into code.

What I'm Building

An open-source content distribution hub — one dashboard that handles all 9 content types across 20+ platforms. Write in Markdown, and the system routes everything to the right platforms automatically.

Feature Details
Content types 9 (articles, book chapters, photos, vertical/horizontal video, podcasts, events)
Platforms 20+ (LinkedIn, Medium, Dev.to, Substack, YouTube, X, Mastodon, Bluesky, Threads, TikTok, Instagram, Facebook, Reddit, Luma, Meetup, Spotify, Apple Podcasts)
Price $0 (self-hosted on Vercel)
Stack Vanilla JS + Vercel Serverless + Upstash Redis

The project is called Autoposting Dashboard and it's open source: github.com/maximosovsky/avtoposting.

The Diagram That Maps It All

Before writing any API integration, I needed to see the full picture. The first attempt was a Mermaid diagram:

graph LR
    Write --> Storage --> Dashboard --> Publish --> API --> Crosspost --> Track
Enter fullscreen mode Exit fullscreen mode

Mermaid was great for a quick sketch, but it fell apart with 50+ nodes and complex routing. I couldn't control layout, colors, or icons. So I switched to custom HTML + SVG — a single diagram.html file with pan, zoom, and real connection lines drawn via JavaScript.

Autoposting pipeline — first Mermaid diagram version by Maxim Osovsky

Then the icons broke.

Autoposting diagram with broken SVG icons — version 1 by Maxim Osovsky

I was loading platform SVGs from Simple Icons via CDN — LinkedIn, Medium, Dev.to, YouTube, etc. Some rendered fine. Some didn't. Some loaded on Chrome but not Firefox. Some showed as blank squares.

The fix was boring but effective: download all 21 icons into a local icons/ folder and reference them directly. No CDN, no CORS, no surprises.

icons/
├── bluesky-0085FF.svg
├── devdotto-0A0A0A.svg
├── googledrive-4285F4.svg
├── luma.svg
├── mastodon-6364FF.svg
├── medium-000000.svg
├── meetup-ED1C40.svg
├── youtube-FF0000.svg
└── ... (21 total)
Enter fullscreen mode Exit fullscreen mode

The final diagram visualizes the entire 8-stage pipeline:

⓪ Media → ① Write → ② Storage → ③ Dashboard → ④ Publish → ⑤ API → ⑥ Cross-post → ⑦ Track
Enter fullscreen mode Exit fullscreen mode

Every node is clickable. Every connection is a real data flow. Every content type has its own path through the pipeline.

Building this diagram with Antigravity (Google DeepMind's AI coding assistant) took one intensive session. We went through 30 questions in 3 rounds of 10, challenging every assumption about content routing, media storage, and platform dependencies.

The 9 Content Types and Where They Go

Here's the routing logic for each content type — the "why" behind every arrow in the diagram.

1. LinkedIn Article → 4 socials 

Write .md → LinkedIn (publish) → X, Mastodon, Bluesky, Threads (share link)
Enter fullscreen mode Exit fullscreen mode

LinkedIn is the primary platform for business content. After publishing, the LinkedIn URL gets shared to 4 social platforms. Each platform's API script (twitter.js, mastodon.js, etc.) handles both link posts and media uploads — a dual-mode approach we chose over separate scripts.

2. Medium Article → 4 socials 

Write .md → Medium (publish) → X, Mastodon, Bluesky, Threads (share link)
Enter fullscreen mode Exit fullscreen mode

Same pattern as LinkedIn, different audience. Medium for philosophy and science essays.

3. Dev.to Article → 4 socials + Reddit 

Write .md → Dev.to (publish) → X, Mastodon, Bluesky, Threads (share link)
                             → Reddit (full article copy, subreddit by tags)
Enter fullscreen mode Exit fullscreen mode

Dev.to is the flagship for build-in-public content. Reddit gets a full copy (not just a link) — subreddit is auto-selected based on article tags.

4. Book Chapters → Substack → LinkedIn, Medium → 4 socials 

Write .md → Substack (publish first)
         → LinkedIn, Medium (share Substack link)
         → X, Mastodon, Bluesky, Threads (share Substack link)
Enter fullscreen mode Exit fullscreen mode

Book chapters publish to Substack first. Then the Substack link cascades to LinkedIn, Medium, and 4 socials. Sequential, not parallel — Substack is the source of truth.

5. Photo + Text → 6 socials 

Upload photo → Facebook, Instagram (direct post)
            → X, Mastodon, Bluesky, Threads (media upload)
Enter fullscreen mode Exit fullscreen mode

No link sharing needed — the photo and its caption are the content. Same image and text uploaded directly to all 6 platforms.

6. Vertical Video → 4 platforms 

Upload 9:16 video → YouTube Shorts, TikTok, Instagram Reels, Facebook Stories
                  → X, Mastodon, Bluesky, Threads (share YouTube Shorts link)
Enter fullscreen mode Exit fullscreen mode

Vertical video (≤512MB, 9:16 aspect ratio) goes to all short-form video platforms.

7. Horizontal Video → YouTube → 4 socials 

Upload 16:9 video → YouTube (publish)
                  → X, Mastodon, Bluesky, Threads (share YouTube link)
Enter fullscreen mode Exit fullscreen mode

Standard YouTube flow. Cover image (thumbnail) stored alongside the video metadata.

8. Podcast → Podster.fm → Apple, Spotify, YouTube → 4 socials 

Write .md (audio_url in frontmatter) → Podster.fm (RSS distribution)
                                     → Apple Podcasts, Spotify, YouTube Podcasts
                                     → X, Mastodon, Bluesky, Threads
Enter fullscreen mode Exit fullscreen mode

Audio files are referenced via audio_url in the Markdown frontmatter. Podster.fm handles RSS distribution to all podcast platforms.

9. Events → Luma → 4 event platforms + Instagram → 4 socials 

Create event → Luma (publish first)
            → LinkedIn Events, Facebook Events, Meetup.com, Instagram (share Luma link)
            → X, Mastodon, Bluesky, Threads (share Luma link)
Enter fullscreen mode Exit fullscreen mode

Events always publish to Luma first — then the Luma link fans out to all event platforms and socials.

Try It

The project is open source:

git clone https://github.com/maximosovsky/avtoposting.git
cd avtoposting
npm i -g vercel
cp .env.example .env   # fill in API keys
vercel dev --listen 3000
# Open http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

Open diagram.html in a browser to explore the full pipeline interactively.

Building something similar? Drop a comment — I'd love to compare approaches.

Building in public, one utility at a time. Follow the journey: LinkedIn · GitHub · Dev.to

Top comments (0)