concepts.scroll
Changed around line 1
+ measures.parsers
+
+ id GettingStarted
+ title Getting Started Guide
+ category Documentation
+ priority 1
+ timeToRead 5
+ complexity Basic
+
+ id Troubleshooting
+ title Troubleshooting Guide
+ category Support
+ priority 2
+ timeToRead 15
+ complexity Intermediate
+
+ id UserInterface
+ title User Interface Overview
+ category UI
+ priority 1
+ timeToRead 10
+ complexity Basic
+
+ id AdvancedFeatures
+ title Advanced Features
+ category Documentation
+ priority 3
+ timeToRead 20
+ complexity Advanced
+
+ id FAQ
+ title Frequently Asked Questions
+ category Support
+ priority 2
+ timeToRead 8
+ complexity Basic
footer.scroll
Changed around line 1
+ importOnly
+ center
+ scrollVersionLink
header.scroll
Changed around line 1
+ importOnly
+ buildHtml
+ homeButton
+ metaTags
+ editButton
+ editBaseUrl /edit.html?folderName=help.scroll.pub&fileName=
+ metaTags
+ style.css
+ script.js
index.scroll
Changed around line 1
+ title Help Knowledge Base
+ header.scroll
+
+ # Help Documentation System
+
+ Welcome to our comprehensive help documentation system. Find everything you need to get started, troubleshoot issues, and master advanced features.
+
+ ## Browse by Category
+
+ Our help articles are organized by category and complexity level to help you find exactly what you need.
+
+ concepts.scroll
+ concepts
+ printTable
+
+ footer.scroll
measures.parsers
Changed around line 1
+ idParser
+ extends abstractIdParser
+ titleParser
+ extends abstractStringMeasureParser
+ description The title or name of the help concept
+ categoryParser
+ extends abstractStringMeasureParser
+ description The category this help concept belongs to (UI, Documentation, Support, etc.)
+ priorityParser
+ extends abstractIntegerMeasureParser
+ description Priority level from 1-5, with 1 being highest priority
+ timeToReadParser
+ extends abstractIntegerMeasureParser
+ description Estimated time to read in minutes
+ complexityParser
+ extends abstractStringMeasureParser
+ description The complexity level (Basic, Intermediate, Advanced)
prompt.json
Changed around line 1
+ {
+ "id": "msg_01VruwsMqeLbBjrhgpK9Yq3C",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a knowledge base for \"help\" documentation concepts.\n\n---domain---\nhelp.scroll.pub\n\n---measures.parsers---\nidParser\n extends abstractIdParser\ntitleParser\n extends abstractStringMeasureParser\n description The title or name of the help concept\ncategoryParser\n extends abstractStringMeasureParser\n description The category this help concept belongs to (UI, Documentation, Support, etc.)\npriorityParser\n extends abstractIntegerMeasureParser\n description Priority level from 1-5, with 1 being highest priority\ntimeToReadParser\n extends abstractIntegerMeasureParser\n description Estimated time to read in minutes\ncomplexityParser\n extends abstractStringMeasureParser\n description The complexity level (Basic, Intermediate, Advanced)\n\n---concepts.scroll---\nmeasures.parsers\n\nid GettingStarted\ntitle Getting Started Guide\ncategory Documentation\npriority 1\ntimeToRead 5\ncomplexity Basic\n\nid Troubleshooting\ntitle Troubleshooting Guide\ncategory Support\npriority 2\ntimeToRead 15\ncomplexity Intermediate\n\nid UserInterface\ntitle User Interface Overview\ncategory UI\npriority 1\ntimeToRead 10\ncomplexity Basic\n\nid AdvancedFeatures\ntitle Advanced Features\ncategory Documentation\npriority 3\ntimeToRead 20\ncomplexity Advanced\n\nid FAQ\ntitle Frequently Asked Questions\ncategory Support\npriority 2\ntimeToRead 8\ncomplexity Basic\n\n---index.scroll---\ntitle Help Knowledge Base\nheader.scroll\n\n# Help Documentation System\n\nWelcome to our comprehensive help documentation system. Find everything you need to get started, troubleshoot issues, and master advanced features.\n\n## Browse by Category\n\nOur help articles are organized by category and complexity level to help you find exactly what you need.\n\nconcepts.scroll\nconcepts\n printTable\n\nfooter.scroll\n\n---header.scroll---\nimportOnly\nbuildHtml\nhomeButton\nmetaTags\neditButton\neditBaseUrl /edit.html?folderName=help.scroll.pub&fileName=\nmetaTags\nstyle.css\nscript.js\n\n---footer.scroll---\nimportOnly\ncenter\nscrollVersionLink\n\n---style.css---\n:root {\n --primary: #2d5ca6;\n --secondary: #173468;\n --accent: #5b9bd5;\n --background: #f5f7fa;\n --text: #333;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n color: var(--text);\n background: var(--background);\n margin: 0;\n padding: 0;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n}\n\nh1 {\n color: var(--primary);\n font-size: 2.5rem;\n text-align: center;\n margin-bottom: 2rem;\n position: relative;\n}\n\nh1::after {\n content: '';\n display: block;\n width: 100px;\n height: 4px;\n background: var(--accent);\n margin: 1rem auto;\n border-radius: 2px;\n}\n\nh2 {\n color: var(--secondary);\n font-size: 1.8rem;\n margin: 2rem 0 1rem;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n margin: 2rem 0;\n background: white;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nth, td {\n padding: 1rem;\n text-align: left;\n border-bottom: 1px solid #eee;\n}\n\nth {\n background: var(--primary);\n color: white;\n font-weight: 600;\n}\n\ntr:hover {\n background: #f0f4f8;\n}\n\n@media (max-width: 768px) {\n .container {\n padding: 1rem;\n }\n \n table {\n display: block;\n overflow-x: auto;\n }\n \n h1 {\n font-size: 2rem;\n }\n \n h2 {\n font-size: 1.5rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Add smooth scrolling\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Add table row hover effects\n const tableRows = document.querySelectorAll('tr');\n tableRows.forEach(row => {\n row.addEventListener('mouseenter', () => {\n row.style.transform = 'scale(1.01)';\n row.style.transition = 'transform 0.2s ease';\n });\n row.addEventListener('mouseleave', () => {\n row.style.transform = 'scale(1)';\n });\n });\n});\n\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 694,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1294
+ }
+ }
readme.scroll
Changed around line 1
+ # help.scroll.pub
+
+ Prompt: database
+ Agent: claude
+ Model: claude-3-5-sonnet-20241022
+
+ ## User prompt
+ help
+
+ ## System prompt
+ You are an expert web, scroll, and knowledge base developer. Create a knowledge base using ScrollSets based on this request: "help"
+
+ ScrollSets use the Particles, Parsers, and Scroll stack to define measures, and then encode concepts using those measures.
+
+ For example:
+
+ ---measures.parsers---
+ idParser
+ extends abstractIdParser
+ organismParser
+ extends abstractStringMeasureParser
+ description The organism name mainly associated with the organelle such as human, plant, whale, etc.
+ diameterParser
+ extends abstractIntegerMeasureParser
+ description The diameter of the organelle in nanometers
+ lowParser
+ extends abstractIntegerMeasureParser
+ description For cells that have this kind of organelle, how many are usually found on the low end?
+ medianParser
+ extends abstractIntegerMeasureParser
+ description For cells that have this kind of organelle, how many are usually found in the median?
+ highParser
+ extends abstractIntegerMeasureParser
+ description For cells that have this kind of organelle, how many are usually found on the high end?
+
+ ---concepts.scroll---
+ measures.parsers
+
+ id Mitochondria
+ organism human
+ diameter 1000
+ low 200
+ median 500
+ high 2000
+
+ id Chloroplast
+ organism plant
+ diameter 6000
+ low 20
+ median 40
+ high 100
+
+ id Nucleus
+ organism human
+ diameter 6000
+ low 1
+ median 1
+ high 2
+
+ ---
+
+ Requirements:
+ - Create 5 - 7 measures. The most important things about this topic.
+ - Write 5 concepts. The most important concepts in this topic.
+ - Build a nice homepage iterating over the data.
+ - 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.
+
+ 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)
+ ---measures.parsers---
+ (put measures here)
+ ---concepts.scroll---
+ (put concepts here)
+ ---index.scroll---
+ title (database title here)
+ header.scroll
+ (content here)
+ concepts.scroll
+ concepts
+ printTable
+ footer.scroll
+ ---header.scroll---
+ importOnly
+ buildHtml
+ homeButton
+ metaTags
+ editButton
+ editBaseUrl /edit.html?folderName=(domainscroll.pub here)&fileName=
+ metaTags
+ style.css
+ script.js
+ ---footer.scroll---
+ importOnly
+ center
+ scrollVersionLink
+ ---style.css---
+ (CSS content here)
+ ---script.js---
+ (JavaScript content here)
+ ---end---
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ // Add smooth scrolling
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Add table row hover effects
+ const tableRows = document.querySelectorAll('tr');
+ tableRows.forEach(row => {
+ row.addEventListener('mouseenter', () => {
+ row.style.transform = 'scale(1.01)';
+ row.style.transition = 'transform 0.2s ease';
+ });
+ row.addEventListener('mouseleave', () => {
+ row.style.transform = 'scale(1)';
+ });
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary: #2d5ca6;
+ --secondary: #173468;
+ --accent: #5b9bd5;
+ --background: #f5f7fa;
+ --text: #333;
+ }
+
+ body {
+ font-family: system-ui, -apple-system, sans-serif;
+ line-height: 1.6;
+ color: var(--text);
+ background: var(--background);
+ margin: 0;
+ padding: 0;
+ }
+
+ .container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+ }
+
+ h1 {
+ color: var(--primary);
+ font-size: 2.5rem;
+ text-align: center;
+ margin-bottom: 2rem;
+ position: relative;
+ }
+
+ h1::after {
+ content: '';
+ display: block;
+ width: 100px;
+ height: 4px;
+ background: var(--accent);
+ margin: 1rem auto;
+ border-radius: 2px;
+ }
+
+ h2 {
+ color: var(--secondary);
+ font-size: 1.8rem;
+ margin: 2rem 0 1rem;
+ }
+
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 2rem 0;
+ background: white;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ }
+
+ th, td {
+ padding: 1rem;
+ text-align: left;
+ border-bottom: 1px solid #eee;
+ }
+
+ th {
+ background: var(--primary);
+ color: white;
+ font-weight: 600;
+ }
+
+ tr:hover {
+ background: #f0f4f8;
+ }
+
+ @media (max-width: 768px) {
+ .container {
+ padding: 1rem;
+ }
+
+ table {
+ display: block;
+ overflow-x: auto;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ h2 {
+ font-size: 1.5rem;
+ }
+ }