concepts.scroll
Changed around line 1
+ measures.parsers
+
+ id Tweet
+ postLength 280
+ mediaTypes text,images,videos,polls
+ lifespan hours
+ engagement likes,retweets,replies,quotes
+ visibility public
+
+ id Story
+ postLength 0
+ mediaTypes images,videos,filters
+ lifespan 24hours
+ engagement views,reactions,replies
+ visibility followers
+
+ id Thread
+ postLength 3000
+ mediaTypes text,images,videos,links
+ lifespan days
+ engagement likes,replies,shares
+ visibility public
+
+ id Status
+ postLength 500
+ mediaTypes text,emoji
+ lifespan minutes
+ engagement reactions,comments
+ visibility network
+
+ id Note
+ postLength 1000
+ mediaTypes text,links
+ lifespan weeks
+ engagement bookmarks,shares
+ visibility custom
footer.scroll
Changed around line 1
+ importOnly
+ center
+ scrollVersionLink
header.scroll
Changed around line 1
+ importOnly
+ buildHtml
+ homeButton
+ metaTags
+ editButton
+ editBaseUrl /edit.html?folderName=microblog.scroll.pub&fileName=
+ metaTags
+ style.css
+ script.js
index.scroll
Changed around line 1
+ title Microblog Knowledge Base
+ header.scroll
+
+ # Modern Microblogging Formats
+
+ Welcome to the comprehensive guide to microblogging formats and their characteristics. This knowledge base details the most common types of micro-posts and their specific attributes.
+
+ ## Overview
+
+ Microblogging has evolved from simple text updates to rich, multimedia-driven content formats. Each format serves different communication needs and engagement patterns.
+
+ concepts.scroll
+ concepts
+ printTable
+
+ footer.scroll
measures.parsers
Changed around line 1
+ idParser
+ extends abstractIdParser
+ postLengthParser
+ extends abstractIntegerMeasureParser
+ description Maximum character length allowed for this type of post
+ mediaTypesParser
+ extends abstractStringMeasureParser
+ description Types of media supported in the post format
+ lifespanParser
+ extends abstractStringMeasureParser
+ description How long posts typically remain relevant or visible
+ engagementParser
+ extends abstractStringMeasureParser
+ description Primary forms of user interaction with this post type
+ visibilityParser
+ extends abstractStringMeasureParser
+ description Default visibility and sharing scope of posts
prompt.json
Changed around line 1
+ {
+ "id": "msg_01K4wN4iUeV28wSnEqi2ZXNG",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a knowledge base for a microblog system.\n\n---domain---\nmicroblog.scroll.pub\n\n---measures.parsers---\nidParser\n extends abstractIdParser\npostLengthParser\n extends abstractIntegerMeasureParser\n description Maximum character length allowed for this type of post\nmediaTypesParser\n extends abstractStringMeasureParser\n description Types of media supported in the post format\nlifespanParser\n extends abstractStringMeasureParser\n description How long posts typically remain relevant or visible\nengagementParser\n extends abstractStringMeasureParser\n description Primary forms of user interaction with this post type\nvisibilityParser\n extends abstractStringMeasureParser\n description Default visibility and sharing scope of posts\n\n---concepts.scroll---\nmeasures.parsers\n\nid Tweet\npostLength 280\nmediaTypes text,images,videos,polls\nlifespan hours\nengagement likes,retweets,replies,quotes\nvisibility public\n\nid Story\npostLength 0\nmediaTypes images,videos,filters\nlifespan 24hours\nengagement views,reactions,replies\nvisibility followers\n\nid Thread\npostLength 3000\nmediaTypes text,images,videos,links\nlifespan days\nengagement likes,replies,shares\nvisibility public\n\nid Status\npostLength 500\nmediaTypes text,emoji\nlifespan minutes\nengagement reactions,comments\nvisibility network\n\nid Note\npostLength 1000\nmediaTypes text,links\nlifespan weeks\nengagement bookmarks,shares\nvisibility custom\n\n---index.scroll---\ntitle Microblog Knowledge Base\nheader.scroll\n\n# Modern Microblogging Formats\n\nWelcome to the comprehensive guide to microblogging formats and their characteristics. This knowledge base details the most common types of micro-posts and their specific attributes.\n\n## Overview\n\nMicroblogging has evolved from simple text updates to rich, multimedia-driven content formats. Each format serves different communication needs and engagement patterns.\n\nconcepts.scroll\nconcepts\n printTable\n\nfooter.scroll\n\n---header.scroll---\nimportOnly\nbuildHtml\nhomeButton\nmetaTags\neditButton\neditBaseUrl /edit.html?folderName=microblog.scroll.pub&fileName=\nmetaTags\nstyle.css\nscript.js\n\n---footer.scroll---\nimportOnly\ncenter\nscrollVersionLink\n\n---style.css---\n:root {\n --primary-color: #2a9d8f;\n --secondary-color: #264653;\n --accent-color: #e76f51;\n --background-color: #f8f9fa;\n --text-color: #2b2d42;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--background-color);\n}\n\n.content {\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n}\n\nh1 {\n color: var(--secondary-color);\n font-size: 2.5rem;\n margin-bottom: 2rem;\n text-align: center;\n background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\nh2 {\n color: var(--primary-color);\n margin: 2rem 0 1rem;\n font-size: 1.8rem;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n margin: 2rem 0;\n background: white;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 0 20px 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-color);\n color: white;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n}\n\ntr:hover {\n background: #f5f5f5;\n transition: all 0.3s ease;\n}\n\n@media (max-width: 768px) {\n .content {\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.homeButton {\n background: var(--primary-color);\n color: white;\n padding: 0.5rem 1rem;\n border-radius: 5px;\n text-decoration: none;\n transition: all 0.3s ease;\n}\n\n.homeButton:hover {\n background: var(--secondary-color);\n transform: translateY(-2px);\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Add smooth scrolling to all links\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', function() {\n this.style.transform = 'scale(1.01)';\n this.style.transition = 'all 0.3s ease';\n });\n row.addEventListener('mouseleave', function() {\n this.style.transform = 'scale(1)';\n });\n });\n});\n\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 697,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1505
+ }
+ }
readme.scroll
Changed around line 1
+ # microblog.scroll.pub
+
+ Prompt: database
+ Agent: claude
+ Model: claude-3-5-sonnet-20241022
+
+ ## User prompt
+ a microblog
+
+ ## System prompt
+ You are an expert web, scroll, and knowledge base developer. Create a knowledge base using ScrollSets based on this request: "a microblog"
+
+ 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', function() {
+ // Add smooth scrolling to all links
+ 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', function() {
+ this.style.transform = 'scale(1.01)';
+ this.style.transition = 'all 0.3s ease';
+ });
+ row.addEventListener('mouseleave', function() {
+ this.style.transform = 'scale(1)';
+ });
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #2a9d8f;
+ --secondary-color: #264653;
+ --accent-color: #e76f51;
+ --background-color: #f8f9fa;
+ --text-color: #2b2d42;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background: var(--background-color);
+ }
+
+ .content {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+ }
+
+ h1 {
+ color: var(--secondary-color);
+ font-size: 2.5rem;
+ margin-bottom: 2rem;
+ text-align: center;
+ background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ h2 {
+ color: var(--primary-color);
+ margin: 2rem 0 1rem;
+ font-size: 1.8rem;
+ }
+
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 2rem 0;
+ background: white;
+ border-radius: 10px;
+ overflow: hidden;
+ box-shadow: 0 0 20px rgba(0,0,0,0.1);
+ }
+
+ th, td {
+ padding: 1rem;
+ text-align: left;
+ border-bottom: 1px solid #eee;
+ }
+
+ th {
+ background: var(--primary-color);
+ color: white;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ }
+
+ tr:hover {
+ background: #f5f5f5;
+ transition: all 0.3s ease;
+ }
+
+ @media (max-width: 768px) {
+ .content {
+ padding: 1rem;
+ }
+
+ table {
+ display: block;
+ overflow-x: auto;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ h2 {
+ font-size: 1.5rem;
+ }
+ }
+
+ .homeButton {
+ background: var(--primary-color);
+ color: white;
+ padding: 0.5rem 1rem;
+ border-radius: 5px;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ }
+
+ .homeButton:hover {
+ background: var(--secondary-color);
+ transform: translateY(-2px);
+ }