index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://newswire.scroll.pub
+ metaTags
+ editButton /edit.html
+ title NewsWire - Connect the Dots
+ style.css
+ header
+ class hero
+ nav
+ div NewsWire
+ class logo
+ div
+ class nav-links
+ a About
+ href #about
+ a How It Works
+ href #how
+ a Try It
+ class cta-button
+ href #demo
+ div
+ class hero-content
+ h1 Connect the News
+ p See how stories relate across sources and time
+ a Explore Articles
+ class primary-button
+ href #demo
+ main
+ section
+ id about
+ class about
+ h2 About NewsWire
+ p NewsWire reveals connections between news articles that you might otherwise miss. Our algorithm analyzes thousands of sources to show you how stories evolve and relate.
+ section
+ id how
+ class features
+ h2 How It Works
+ div
+ class feature-grid
+ div
+ class feature-card
+ div 🔍
+ class feature-icon
+ h3 Topic Detection
+ p We identify core topics and entities in each article.
+ div
+ class feature-card
+ div 🧩
+ class feature-icon
+ h3 Connection Mapping
+ p Articles are linked based on shared topics and narratives.
+ div
+ class feature-card
+ class feature-card
+ div 📈
+ class feature-icon
+ h3 Timeline View
+ p See how stories develop over time across different sources.
+ section
+ id demo
+ class demo
+ h2 Try It Yourself
+ div
+ class search-container
+ input
+ type text
+ placeholder Search for a news topic...
+ class search-input
+ id searchInput
+ div
+ class results-container
+ id resultsContainer
+ div
+ class graph-container
+ id graphContainer
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Privacy
+ href /privacy
+ a Contact
+ href mailto:hello@newswire.scroll.pub
+ p A project exploring how news stories connect.
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "fd725c55-035e-4c12-8009-8d5236aeed0e",
+ "object": "chat.completion",
+ "created": 1746427947,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "Here's my suggestion for a news connection website built with Scroll:\n\n---domain---\nnewswire.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://newswire.scroll.pub\nmetaTags\neditButton /edit.html\ntitle NewsWire - Connect the Dots\nstyle.css\nheader\n class hero\n nav\n div NewsWire\n class logo\n div\n class nav-links\n a About\n href #about\n a How It Works\n href #how\n a Try It\n class cta-button\n href #demo\n div\n class hero-content\n h1 Connect the News\n p See how stories relate across sources and time\n a Explore Articles\n class primary-button\n href #demo\nmain\n section\n id about\n class about\n h2 About NewsWire\n p NewsWire reveals connections between news articles that you might otherwise miss. Our algorithm analyzes thousands of sources to show you how stories evolve and relate.\n section\n id how\n class features\n h2 How It Works\n div\n class feature-grid\n div\n class feature-card\n div 🔍\n class feature-icon\n h3 Topic Detection\n p We identify core topics and entities in each article.\n div\n class feature-card\n div 🧩\n class feature-icon\n h3 Connection Mapping\n p Articles are linked based on shared topics and narratives.\n div\n class feature-card\n class feature-card\n div 📈\n class feature-icon\n h3 Timeline View\n p See how stories develop over time across different sources.\n section\n id demo\n class demo\n h2 Try It Yourself\n div\n class search-container\n input\n type text\n placeholder Search for a news topic...\n class search-input\n id searchInput\n div\n class results-container\n id resultsContainer\n div\n class graph-container\n id graphContainer\nfooter\n div\n class footer-content\n div\n class footer-links\n a Privacy\n href /privacy\n a Contact\n href mailto:hello@newswire.scroll.pub\n p A project exploring how news stories connect.\nscript.js\n---style.css---\n:root {\n --primary: #2563eb;\n --primary-dark: #1d4ed8;\n --text: #1e293b;\n --light: #f8fafc;\n --gray: #94a3b8;\n --dark-gray: #334155;\n --shadow: 0 4px 6px -1px rgba(0,0,0,0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.5;\n color: var(--text);\n background-color: var(--light);\n}\n\nheader {\n background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);\n color: white;\n padding: 2rem 1rem;\n}\n\n.hero {\n max-width: 1200px;\n margin: 0 auto;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 3rem;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: 700;\n}\n\n.nav-links {\n display: flex;\n gap: 1.5rem;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n font-weight: 500;\n}\n\n.cta-button {\n background: white;\n color: var(--primary);\n padding: 0.5rem 1rem;\n border-radius: 0.25rem;\n font-weight: 600;\n}\n\n.hero-content {\n max-width: 600px;\n margin: 0 auto;\n text-align: center;\n padding: 2rem 0;\n}\n\n.hero-content h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n line-height: 1.2;\n}\n\n.hero-content p {\n font-size: 1.25rem;\n margin-bottom: 2rem;\n opacity: 0.9;\n}\n\n.primary-button {\n background: white;\n color: var(--primary);\n padding: 0.75rem 1.5rem;\n border-radius: 0.25rem;\n font-weight: 600;\n text-decoration: none;\n display: inline-block;\n transition: all 0.2s;\n}\n\n.primary-button:hover {\n transform: translateY(-2px);\n box-shadow: var(--shadow);\n}\n\nmain {\n max-width: 1200px;\n margin: 0 auto;\n padding: 4rem 1rem;\n}\n\nsection {\n margin-bottom: 4rem;\n}\n\nh2 {\n font-size: 2rem;\n margin-bottom: 2rem;\n text-align: center;\n}\n\n.about {\n text-align: center;\n max-width: 800px;\n margin: 0 auto;\n}\n\n.feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.feature-card {\n background: white;\n padding: 2rem;\n border-radius: 0.5rem;\n box-shadow: var(--shadow);\n text-align: center;\n transition: transform 0.2s;\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n}\n\n.feature-icon {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.demo {\n margin-top: 4rem;\n}\n\n.search-container {\n max-width: 600px;\n margin: 0 auto 2rem;\n}\n\n.search-input {\n width: 100%;\n padding: 1rem;\n border: 1px solid var(--gray);\n border-radius: 0.5rem;\n font-size: 1rem;\n}\n\n.results-container, .graph-container {\n background: white;\n border-radius: 0.5rem;\n box-shadow: var(--shadow);\n padding: 2rem;\n margin-bottom: 2rem;\n min-height: 300px;\n}\n\nfooter {\n background: var(--dark-gray);\n color: white;\n padding: 3rem 1rem;\n text-align: center;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.footer-links {\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin-bottom: 1.5rem;\n}\n\n.footer-links a {\n color: white;\n text-decoration: none;\n}\n\n@media (max-width: 768px) {\n .hero-content h1 {\n font-size: 2.5rem;\n }\n \n .nav-links {\n gap: 1rem;\n }\n \n .feature-grid {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const searchInput = document.getElementById('searchInput');\n const resultsContainer = document.getElementById('resultsContainer');\n const graphContainer = document.getElementById('graphContainer');\n \n // Sample data for demo purposes\n const sampleArticles = [\n {\n title: \"Global Climate Summit Reaches New Agreement\",\n source: \"World News\",\n date: \"2023-11-15\",\n summary: \"World leaders have agreed on new emissions targets at the latest climate summit.\",\n topics: [\"climate\", \"politics\", \"environment\"]\n },\n {\n title: \"Scientists Warn of Accelerating Climate Change\",\n source: \"Science Daily\",\n date: \"2023-11-10\",\n summary: \"New research shows climate change impacts are happening faster than predicted.\",\n topics: [\"climate\", \"science\", \"environment\"]\n },\n {\n title: \"Renewable Energy Investments Reach Record High\",\n source: \"Business Times\",\n date: \"2023-11-05\",\n summary: \"Global investments in renewable energy sources have doubled in the past year.\",\n topics: [\"energy\", \"business\", \"climate\"]\n }\n ];\n \n // Demo search functionality\n searchInput.addEventListener('input', function(e) {\n const query = e.target.value.toLowerCase();\n \n if (query.length > 2) {\n const filtered = sampleArticles.filter(article => \n article.title.toLowerCase().includes(query) || \n article.topics.some(topic => topic.includes(query))\n \n displayResults(filtered);\n visualizeConnections(filtered);\n } else {\n resultsContainer.innerHTML = '
Enter at least 3 characters to search
';\n graphContainer.innerHTML = '';\n }\n });\n \n function displayResults(articles) {\n if (articles.length === 0) {\n resultsContainer.innerHTML = 'No articles found. Try a different search term.
';\n return;\n }\n \n let html = '';\n articles.forEach(article => {\n html += `\n
';\n \n resultsContainer.innerHTML = html;\n }\n \n function visualizeConnections(articles) {\n if (articles.length === 0) return;\n \n // Simple visualization for demo\n let html = '\n
\n `;\n });\n html += '${article.title}
\n \n${article.summary}
\n\n ${article.topics.map(topic => `${topic}`).join('')}\n
\n ';\n html += '
';\n graphContainer.innerHTML = html;\n }\n \n // Initialize with some sample data\n resultsContainer.innerHTML = 'Topic Connections
';\n html += '';\n \n // Collect all unique topics\n const allTopics = [...new Set(articles.flatMap(article => article.topics))];\n \n // Create nodes\n allTopics.forEach(topic => {\n const relatedArticles = articles.filter(a => a.topics.includes(topic)).length;\n const size = Math.min(100, 30 + (relatedArticles * 20));\n \n html += `\n
\n ${topic}\n
\n `;\n });\n \n html += 'Enter a search term to find connected articles
';\n});\n---end---"+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 725,
+ "completion_tokens": 2402,
+ "total_tokens": 3127,
+ "prompt_tokens_details": {
+ "cached_tokens": 0
+ },
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 725
+ },
+ "system_fingerprint": "fp_8802369eaa_prod0425fp8"
+ }
readme.scroll
Changed around line 1
+ # newswire.scroll.pub
+
+ Prompt: website
+ Agent: deepseek
+ Model: deepseek-chat
+
+ ## User prompt
+ I want a website that connects news articles together
+
+ ## System prompt
+ You are an expert web developer. Create a website based on this request: "I want a website that connects news articles together"
+
+ Requirements:
+ - Use only Scroll, CSS, and JavaScript (NO frameworks, NO external dependencies)
+ - Create clean, semantic HTML5
+ - Make it mobile-responsive
+ - Follow modern best practices and accessibility guidelines
+ - Keep it simple but professional
+ - Use only relative links and no external resources
+ - Do not put a copyright symbol or all rights reserved in the footer.
+ - Make it beautiful. Dazzling. Advanced used of CSS.
+
+ As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.
+
+ For example:
+
+ header
+ class hero
+ nav
+ div Scroll
+ class logo
+ div
+ class nav-links
+ a Features
+ href #features
+ a Examples
+ href #examples
+ a Edit
+ href edit.html
+ a GitHub
+ class cta-button
+ href https://github.com/breck7/scroll
+ div
+ class hero-content
+ h1 Write Better with Scroll
+ p The extendible markup language that makes source beautiful and compiles to anything
+ a Get Started
+ class primary-button
+ href https://hub.scroll.pub/
+ main
+ section
+ id features
+ class features
+ h2 Why Scroll?
+ div
+ class feature-grid
+ div
+ class feature-card
+ div ⚡
+ class feature-icon
+ h3 Simple Syntax
+ p Like Markdown, but more powerful. No parentheses needed.
+ div
+ class feature-card
+ div 🧩
+ class feature-icon
+ h3 Extendible
+ p Build your own custom parsers.
+ div
+ class feature-card
+ div 🎨
+ class feature-icon
+ h3 Beautiful Output
+ p Create stunning documents with minimal effort.
+ div
+ class feature-card
+ div 🚀
+ class feature-icon
+ h3 Fast & Light
+ p Built on the efficient PPS Stack.
+ section
+ id examples
+ class code-demo
+ h2 See It In Action
+ div
+ class code-container
+ pre
+ class code-example
+ div
+ class code-output
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Documentation
+ href https://scroll.pub/tutorial.html
+ a Community
+ href https://www.reddit.com/r/WorldWideScroll/
+ a Blog
+ href https://scroll.pub/blog
+ p Started by Breck Yunits. Evolved by a community.
+ https://twitter.com/breckyunits Breck Yunits
+ https://github.com/breck7/scroll/graphs/contributors community
+
+
+ First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:
+
+ ---domain---
+ (domainscroll.pub here)
+ ---index.scroll---
+ buildHtml
+ baseUrl https://(domainscroll.pub here)
+ metaTags
+ editButton /edit.html
+ title (Title here)
+ style.css
+
+ (body content here. no blank lines please.)
+
+ script.js
+ ---style.css---
+ (CSS content here)
+ ---script.js---
+ (JavaScript content here)
+ ---end---
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+ const searchInput = document.getElementById('searchInput');
+ const resultsContainer = document.getElementById('resultsContainer');
+ const graphContainer = document.getElementById('graphContainer');
+
+ // Sample data for demo purposes
+ const sampleArticles = [
+ {
+ title: "Global Climate Summit Reaches New Agreement",
+ source: "World News",
+ date: "2023-11-15",
+ summary: "World leaders have agreed on new emissions targets at the latest climate summit.",
+ topics: ["climate", "politics", "environment"]
+ },
+ {
+ title: "Scientists Warn of Accelerating Climate Change",
+ source: "Science Daily",
+ date: "2023-11-10",
+ summary: "New research shows climate change impacts are happening faster than predicted.",
+ topics: ["climate", "science", "environment"]
+ },
+ {
+ title: "Renewable Energy Investments Reach Record High",
+ source: "Business Times",
+ date: "2023-11-05",
+ summary: "Global investments in renewable energy sources have doubled in the past year.",
+ topics: ["energy", "business", "climate"]
+ }
+ ];
+
+ // Demo search functionality
+ searchInput.addEventListener('input', function(e) {
+ const query = e.target.value.toLowerCase();
+
+ if (query.length > 2) {
+ const filtered = sampleArticles.filter(article =>
+ article.title.toLowerCase().includes(query) ||
+ article.topics.some(topic => topic.includes(query))
+
+ displayResults(filtered);
+ visualizeConnections(filtered);
+ } else {
+ resultsContainer.innerHTML = '
Enter at least 3 characters to search
';+ graphContainer.innerHTML = '';
+ }
+ });
+
+ function displayResults(articles) {
+ if (articles.length === 0) {
+ resultsContainer.innerHTML = '
No articles found. Try a different search term.
';+ return;
+ }
+
+ let html = '
';
+ articles.forEach(article => {
+ html += `
+
+
${article.title}
+
+ ${article.source}
+ ${article.date}
+
+
${article.summary}
+
+ ${article.topics.map(topic => `${topic}`).join('')}
+
+
+ `;
+ });
+ html += '
';+
+ resultsContainer.innerHTML = html;
+ }
+
+ function visualizeConnections(articles) {
+ if (articles.length === 0) return;
+
+ // Simple visualization for demo
+ let html = '
';
+ html += '
Topic Connections
';+ html += '
';';
+
+ // Collect all unique topics
+ const allTopics = [...new Set(articles.flatMap(article => article.topics))];
+
+ // Create nodes
+ allTopics.forEach(topic => {
+ const relatedArticles = articles.filter(a => a.topics.includes(topic)).length;
+ const size = Math.min(100, 30 + (relatedArticles * 20));
+
+ html += `
+
+ ${topic}
+
+ `;
+ });
+
+ html += '
+ graphContainer.innerHTML = html;
+ }
+
+ // Initialize with some sample data
+ resultsContainer.innerHTML = '
Enter a search term to find connected articles
';+ });
style.css
Changed around line 1
+ :root {
+ --primary: #2563eb;
+ --primary-dark: #1d4ed8;
+ --text: #1e293b;
+ --light: #f8fafc;
+ --gray: #94a3b8;
+ --dark-gray: #334155;
+ --shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ line-height: 1.5;
+ color: var(--text);
+ background-color: var(--light);
+ }
+
+ header {
+ background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
+ color: white;
+ padding: 2rem 1rem;
+ }
+
+ .hero {
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 3rem;
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ font-weight: 700;
+ }
+
+ .nav-links {
+ display: flex;
+ gap: 1.5rem;
+ }
+
+ .nav-links a {
+ color: white;
+ text-decoration: none;
+ font-weight: 500;
+ }
+
+ .cta-button {
+ background: white;
+ color: var(--primary);
+ padding: 0.5rem 1rem;
+ border-radius: 0.25rem;
+ font-weight: 600;
+ }
+
+ .hero-content {
+ max-width: 600px;
+ margin: 0 auto;
+ text-align: center;
+ padding: 2rem 0;
+ }
+
+ .hero-content h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+ line-height: 1.2;
+ }
+
+ .hero-content p {
+ font-size: 1.25rem;
+ margin-bottom: 2rem;
+ opacity: 0.9;
+ }
+
+ .primary-button {
+ background: white;
+ color: var(--primary);
+ padding: 0.75rem 1.5rem;
+ border-radius: 0.25rem;
+ font-weight: 600;
+ text-decoration: none;
+ display: inline-block;
+ transition: all 0.2s;
+ }
+
+ .primary-button:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--shadow);
+ }
+
+ main {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 4rem 1rem;
+ }
+
+ section {
+ margin-bottom: 4rem;
+ }
+
+ h2 {
+ font-size: 2rem;
+ margin-bottom: 2rem;
+ text-align: center;
+ }
+
+ .about {
+ text-align: center;
+ max-width: 800px;
+ margin: 0 auto;
+ }
+
+ .feature-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+ }
+
+ .feature-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 0.5rem;
+ box-shadow: var(--shadow);
+ text-align: center;
+ transition: transform 0.2s;
+ }
+
+ .feature-card:hover {
+ transform: translateY(-5px);
+ }
+
+ .feature-icon {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ }
+
+ .demo {
+ margin-top: 4rem;
+ }
+
+ .search-container {
+ max-width: 600px;
+ margin: 0 auto 2rem;
+ }
+
+ .search-input {
+ width: 100%;
+ padding: 1rem;
+ border: 1px solid var(--gray);
+ border-radius: 0.5rem;
+ font-size: 1rem;
+ }
+
+ .results-container, .graph-container {
+ background: white;
+ border-radius: 0.5rem;
+ box-shadow: var(--shadow);
+ padding: 2rem;
+ margin-bottom: 2rem;
+ min-height: 300px;
+ }
+
+ footer {
+ background: var(--dark-gray);
+ color: white;
+ padding: 3rem 1rem;
+ text-align: center;
+ }
+
+ .footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .footer-links {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+ margin-bottom: 1.5rem;
+ }
+
+ .footer-links a {
+ color: white;
+ text-decoration: none;
+ }
+
+ @media (max-width: 768px) {
+ .hero-content h1 {
+ font-size: 2.5rem;
+ }
+
+ .nav-links {
+ gap: 1rem;
+ }
+
+ .feature-grid {
+ grid-template-columns: 1fr;
+ }
+ }