• Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
devto

devto

adportal

Unlisted
Like
adportal
Home
Code
20
api
8
controllers
3
models
2
public
7
services
5
tests
1
utils
3
views
4
README.md
REFACTORING-PHASE1.md
REFACTORING-PHASE2.md
REFACTORING-PHASE3.md
REFACTORING-PHASE4.md
REFACTORING-PHASE5.md
REFACTORING.md
TEMPLATE-FIX.md
devto-stylesheet-README.md
C
devto-stylesheet-fetcher.ts
H
devto-stylesheet-provider.ts
H
index.ts
Branches
2
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
devto-stylesheet-README.md
Code
/
devto-stylesheet-README.md
Search
5/7/2025
devto-stylesheet-README.md

Dev.to Stylesheet Utility

This project provides a utility to periodically fetch stylesheets from dev.to and make them available for use in your own projects.

Components

1. Stylesheet Fetcher (devto-stylesheet-fetcher.ts)

A cron job that:

  • Periodically fetches the dev.to homepage
  • Extracts the stylesheet links using regex
  • Stores the extracted links in blob storage
  • Keeps track of changes and maintains a version history
  • Sends email notifications when changes are detected

2. Stylesheet Provider (devto-stylesheet-provider.ts)

An HTTP endpoint that:

  • Serves the latest stylesheet links in various formats
  • Provides JavaScript and CSS embed options
  • Offers an API to access current and historical stylesheet data
  • Includes documentation and usage examples

Setup Instructions

  1. Set up the Stylesheet Fetcher:

    • Set the cron trigger on devto-stylesheet-fetcher.ts to run at your desired interval (e.g., daily)
    • The first run will fetch the initial stylesheets
  2. Set up the Stylesheet Provider:

    • Set the HTTP trigger on devto-stylesheet-provider.ts
    • Access the root URL for documentation and usage examples

Usage

Embedding in Your Project

There are several ways to use the dev.to stylesheets in your project:

Option 1: JavaScript Embed (Recommended)

<script src="https://your-val-town-url.val.run/embed.js"></script>

This will dynamically load all the dev.to stylesheets into your page.

Option 2: CSS Import

<link rel="stylesheet" href="https://your-val-town-url.val.run/embed.css">

This loads a CSS file that imports all the dev.to stylesheets.

Option 3: API Integration

Fetch the stylesheets programmatically:

fetch("https://your-val-town-url.val.run/api/stylesheets") .then(res => res.json()) .then(data => { // Use the stylesheet URLs as needed console.log(data.stylesheets); });

API Endpoints

  • GET / - Documentation and status page
  • GET /api/stylesheets - Get the current stylesheets as JSON
  • GET /api/history - Get the history of stylesheet changes
  • GET /embed.js - JavaScript snippet to load the stylesheets
  • GET /embed.css - CSS file that imports all the stylesheets

Storage Structure

The utility uses Val Town's blob storage with the following keys:

  • devto_stylesheets - Current stylesheet data
  • devto_stylesheets_last_updated - Timestamp of last update
  • devto_stylesheets_history - History of stylesheet changes

Limitations

  • The utility relies on the current structure of dev.to's HTML. If dev.to changes their HTML structure, the regex extraction may need to be updated.
  • The utility only extracts stylesheet links and does not handle inline styles or dynamically loaded stylesheets.
  • Dev.to may have usage restrictions or rate limits that could affect the fetcher.

Future Improvements

  • Add support for selective stylesheet inclusion
  • Implement stylesheet minification and combination
  • Add support for custom CSS overrides
  • Implement more robust error handling and retry logic
FeaturesVersion controlCode intelligenceCLIMCP
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.