Dev.to Stylesheet Provider

\n \n

Status: ${data ? '✅ Active' : '❌ No data available'}

Last Updated: ${lastUpdated.lastUpdated}

Stylesheets: ${stylesheetCount}

View Current Stylesheets

\n \n

Available Endpoints

\n \n

GET /api/stylesheets

Returns the current dev.to stylesheets as JSON.

fetch(\"${c.req.url}api/stylesheets\")\n  .then(res => res.json())\n  .then(data => console.log(data));

\n \n

GET /api/history

Returns the history of stylesheet changes.

fetch(\"${c.req.url}api/history\")\n  .then(res => res.json())\n  .then(data => console.log(data));

\n \n

GET /embed.js

Returns a JavaScript snippet that can be included in your HTML to dynamically load the dev.to stylesheets.

<script src=\"${c.req.url}embed.js\"></script>

\n \n

GET /embed.css

Returns a CSS file that imports all the dev.to stylesheets.

<link rel=\"stylesheet\" href=\"${c.req.url}embed.css\">

\n \n

Usage Examples

\n \n

Basic HTML Integration

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>My Dev.to Styled Page</title>\n  \n  <!-- Option 1: Use the embed.js script (recommended) -->\n  <script src=\"${c.req.url}embed.js\"></script>\n  \n  <!-- Option 2: Use the CSS file directly -->\n  <!-- <link rel=\"stylesheet\" href=\"${c.req.url}embed.css\"> -->\n  \n  <!-- Option 3: Fetch and add stylesheets programmatically -->\n  <!--\n  <script>\n    fetch(\"${c.req.url}api/stylesheets\")\n      .then(res => res.json())\n      .then(data => {\n        data.stylesheets.forEach(url => {\n          const link = document.createElement('link');\n          link.rel = 'stylesheet';\n          link.href = url;\n          document.head.appendChild(link);\n        });\n      });\n  </script>\n  -->\n</head>\n<body>\n  <h1>My Dev.to Styled Page</h1>\n  <p>This page is styled using dev.to stylesheets.</p>\n</body>\n</html>

\n\n \n \n \n `);\n});\n\n/**\n * GET /api/stylesheets - Get the current stylesheets\n */\napp.get(\"/api/stylesheets\", async (c) => {\n try {\n const data = await blob.getJSON(STORAGE_KEY);\n \n if (!data) {\n return c.json({ \n error: \"No stylesheet data available\", \n message: \"The stylesheet fetcher may not have run yet\" \n }, 404);\n }\n \n return c.json(data);\n } catch (error) {\n return c.json({ \n error: \"Failed to retrieve stylesheets\", \n message: error.message \n }, 500);\n }\n});\n\n/**\n * GET /api/history - Get the history of stylesheet changes\n */\napp.get(\"/api/history\", async (c) => {\n try {\n const history = await blob.getJSON(STORAGE_KEY_HISTORY)\n .catch(() => []);\n \n return c.json({\n history,\n count: history.length\n });\n } catch (error) {\n return c.json({ \n error: \"Failed to retrieve history\", \n message: error.message \n }, 500);\n }\n});\n\n/**\n * GET /embed.js - JavaScript to dynamically load the stylesheets\n */\napp.get(\"/embed.js\", async (c) => {\n try {\n const data = await blob.getJSON(STORAGE_KEY);\n \n if (!data) {\n return c.text(\"console.error('Dev.to stylesheets not available');\", 404, {\n \"Content-Type\": \"application/javascript\"\n });\n }\n \n const js = `\n // Dev.to Stylesheet Loader\n // Generated: ${new Date().toISOString()}\n // Source: ${data.source}\n (function() {\n const stylesheets = ${JSON.stringify(data.stylesheets)};\n \n stylesheets.forEach(url => {\n const link = document.createElement('link');\n link.rel = 'stylesheet';\n link.href = url;\n document.head.appendChild(link);\n });\n \n console.log('[Dev.to Styles] Loaded ' + stylesheets.length + ' stylesheets');\n })();\n `;\n \n return c.text(js, 200, {\n \"Content-Type\": \"application/javascript\",\n \"Cache-Control\": \"max-age=3600\"\n });\n } catch (error) {\n return c.text(`console.error('Error loading Dev.to stylesheets: ${error.message}');`, 500, {\n \"Content-Type\": \"application/javascript\"\n });\n }\n});\n\n/**\n * GET /embed.css - CSS file that imports all the stylesheets\n */\napp.get(\"/embed.css\", async (c) => {\n try {\n const data = await blob.getJSON(STORAGE_KEY);\n \n if (!data) {\n return c.text(\"/* Dev.to stylesheets not available */\", 404, {\n \"Content-Type\": \"text/css\"\n });\n }\n \n const css = `\n /* Dev.to Stylesheets */\n /* Generated: ${new Date().toISOString()} */\n /* Source: ${data.source} */\n \n ${data.stylesheets.map(url => `@import url(\"${url}\");`).join('\\n')}\n `;\n \n return c.text(css, 200, {\n \"Content-Type\": \"text/css\",\n \"Cache-Control\": \"max-age=3600\"\n });\n } catch (error) {\n return c.text(`/* Error loading Dev.to stylesheets: ${error.message} */`, 500, {\n \"Content-Type\": \"text/css\"\n });\n }\n});\n\n// Export the Hono app for HTTP val\nexport default app.fetch;","deleted","label",[99],"permalink","https://www.val.town/x/devto/adportal/code/devto-stylesheet-provider.ts","extension","actionData","errors"]