scriptorium 0.6.1 → 0.7.2

data/lib/scriptorium/support/common_js/content-loader.js

@@ -0,0 +1,187 @@
+// Simple cache for index fragment to make Back instant in SPA
+let __indexFragmentCache = null;
+
+// Load the main content and other page containers (header, footer, left, right)
+function load_main(slug) {
+    // (timing removed)
+    // Determine preview root (/preview/<view>/) for absolute fetches
+    const pathParts = window.location.pathname.split('/');
+    const previewIdx = pathParts.indexOf('preview');
+    const viewName = (previewIdx >= 0 && pathParts.length > previewIdx + 1) ? pathParts[previewIdx + 1] : '';
+    const previewRoot = `/preview/${viewName}/`;
+    // Get all container elements (header, footer, left, right, and main)
+    const contentDiv = document.getElementById("main");
+    const headerDiv = document.querySelector("header");
+    const footerDiv = document.querySelector("footer");
+    const leftDiv = document.querySelector(".left");
+    const rightDiv = document.querySelector(".right");
+    console.log('Loading main with slug:', slug); // Log the slug
+    
+    // Clear any existing content to prevent nesting
+    contentDiv.innerHTML = '';
+    contentDiv.dataset.currentSlug = slug;
+
+    // Check if this is a post parameter request
+    if (slug.includes('?post=')) {
+        const postSlug = slug.split('?post=')[1];
+        console.log('Loading post:', postSlug);
+        
+        // Load the post content from preview root
+        const postFile = postSlug.endsWith('.html') ? postSlug : postSlug + '.html';
+        const postUrl = previewRoot + 'posts/' + postFile;
+        console.log('Fetching post file:', postUrl);
+        // Proactively prefetch index fragment to make Back instant
+        if (!__indexFragmentCache) {
+            fetch(previewRoot + 'post_index.html').then(r => r.ok ? r.text() : '').then(t => { if (t) { __indexFragmentCache = t; } }).catch(() => {});
+        }
+        fetch(postUrl)
+            .then(response => {
+                console.log('Response status:', response.status);
+                if (response.ok) {
+                    return response.text();
+                } else {
+                    console.error('Failed to load post:', response.status);
+                    return 'Post not found';
+                }
+            })
+            .then(content => {
+                console.log('Loaded content length:', content.length);
+                console.log('Content preview:', content.substring(0, 200));
+                contentDiv.innerHTML = content;
+                // Intercept Back link to return to index within SPA
+                try {
+                    contentDiv.querySelectorAll('a[href]').forEach(a => {
+                        const href = a.getAttribute('href') || '';
+                        if (href === 'index.html' || href.endsWith('/index.html') || href === '../index.html') {
+                            a.addEventListener('click', function(ev) {
+                                ev.preventDefault();
+                                // Fast path: render cached index if available
+                                if (__indexFragmentCache) {
+                                    contentDiv.innerHTML = __indexFragmentCache;
+                                    history.pushState({slug: 'index.html'}, "", 'index.html');
+                                } else {
+                                    load_main('index.html');
+                                }
+                            });
+                        }
+                    });
+                } catch (e) { console.warn('Back link interception skipped:', e); }
+                // Fix relative asset URLs (e.g., ../assets or ../../assets) to preview route
+                try {
+                    const parts = window.location.pathname.split('/');
+                    const idx = parts.indexOf('preview');
+                    const viewName = idx >= 0 && parts.length > idx + 1 ? parts[idx + 1] : '';
+                    const baseAssets = `/preview/${viewName}/assets/`;
+                    // Update img[src]
+                    contentDiv.querySelectorAll('img[src]').forEach(img => {
+                        const s = img.getAttribute('src');
+                        const m = s && s.match(/^(?:\.\.\/)+assets\/(.*)$/);
+                        if (m) { img.setAttribute('src', baseAssets + m[1]); }
+                    });
+                    // Update link[href] (e.g., styles or anchors that point into assets)
+                    contentDiv.querySelectorAll('a[href], link[href]').forEach(a => {
+                        const s = a.getAttribute('href');
+                        const m = s && s.match(/^(?:\.\.\/)+assets\/(.*)$/);
+                        if (m) { a.setAttribute('href', baseAssets + m[1]); }
+                    });
+                    // Update script[src]
+                    contentDiv.querySelectorAll('script[src]').forEach(sc => {
+                        const s = sc.getAttribute('src');
+                        const m = s && s.match(/^(?:\.\.\/)+assets\/(.*)$/);
+                        if (m) { sc.setAttribute('src', baseAssets + m[1]); }
+                    });
+                } catch (e) {
+                    console.warn('Asset URL rewrite skipped:', e);
+                }
+                
+                // Debug: Check what pre elements exist
+                const allPreElements = contentDiv.querySelectorAll('pre');
+                console.log('All pre elements found:', allPreElements.length);
+                allPreElements.forEach((pre, index) => {
+                    console.log(`Pre element ${index}:`, pre.outerHTML.substring(0, 100));
+                });
+
+                // Highlight the newly loaded content
+                highlightNewContent(contentDiv);
+
+                // (detailed timing removed)
+                
+                history.pushState({slug: 'index.html?post=' + postSlug}, "", 'index.html?post=' + postSlug);
+                // (timing removed)
+            })
+            .catch(error => {
+                console.log("Error loading post:", error);
+                contentDiv.innerHTML = 'Error loading post';
+            });
+        return;
+    }
+
+    // Check if this is a static page request (pages/, assets/, etc.)
+    if (slug.startsWith('pages/') || slug.startsWith('assets/') || slug.includes('/')) {
+        console.log('Loading static page:', slug);
+        // Fetch from preview root to avoid base href side-effects
+        fetch(previewRoot + slug)
+            .then(response => {
+                if (response.ok) {
+                    return response.text();
+                } else {
+                    console.error('Failed to load static page:', response.status);
+                    return 'Page not found';
+                }
+            })
+            .then(content => {
+                contentDiv.innerHTML = content;
+                // Don't change the URL for static pages to avoid path resolution issues
+                history.pushState({slug: slug}, "", window.location.pathname);
+            })
+            .catch(error => {
+                console.log("Error loading static page:", error);
+                contentDiv.innerHTML = 'Error loading page';
+            });
+        return;
+    }
+
+    // If asked for index.html, prefer cached post index fragment for instant load
+    if (slug === 'index.html' && __indexFragmentCache) {
+        contentDiv.innerHTML = __indexFragmentCache;
+        history.pushState({slug: slug}, "", 'index.html');
+        return;
+    }
+
+    // Otherwise, fetch target (index fragment or other resource)
+    const target = (slug === 'index.html') ? (previewRoot + 'post_index.html') : (previewRoot + slug);
+    fetch(target)
+        .then(response => {
+            if (response.ok) {
+                console.log('Response is ok');
+                return response.text();
+            } else {
+                console.error('Failed to load:', response.status); // Log the failed response
+            }
+        })
+        .then(content => {
+            console.log('Loaded content into div'); // Log successful content insertion
+
+            // Inject into main container only
+            contentDiv.innerHTML = content;
+            if (slug === 'index.html' && content) { __indexFragmentCache = content; }
+
+            // Re-insert header, footer, left, and right (if necessary)
+            // If you want the static layout to be kept, you can preserve these parts
+            // with additional logic or predefined structure (here it's assumed 
+            // that header/footer/left/right are already statically included).
+            
+            // You can also replace the other parts (left, right, header, footer) if needed.
+            // Keep URL stable at index.html for index view, otherwise reflect the slug
+            const newUrl = (slug === 'index.html') ? 'index.html' : slug;
+            
+            // Detailed timing for index fragment
+            // (detailed timing removed)
+
+            history.pushState({slug: slug}, "", newUrl);
+            // (timing removed)
+        })
+        .catch(error => {
+            console.log("Error loading content:", error); // Log any errors during fetch
+        });
+}

data/lib/scriptorium/support/common_js/navigation.js

@@ -0,0 +1,52 @@
+// Handle the back/forward buttons with SPA-aware loading
+window.onpopstate = function(event) {
+  try {
+    console.log('onpopstate event:', event);
+    const state = event.state || {};
+    const slug = state.slug || 'index.html';
+    // Use SPA loader to restore prior view instead of reloading
+    if (typeof load_main === 'function') {
+      load_main(slug);
+      return;
+    }
+  } catch (e) {
+    console.warn('onpopstate handler failed, reloading:', e);
+  }
+  // Fallback
+  window.location.reload();
+};
+
+// Initialize with the front page when navigating via the back button or similar
+window.onload = function() {
+  // If under preview, set a base href so relative assets in injected posts resolve correctly
+  try {
+    const parts = window.location.pathname.split('/');
+    const idx = parts.indexOf('preview');
+    if (idx >= 0 && parts.length > idx + 1) {
+      const viewName = parts[idx + 1];
+      const base = document.createElement('base');
+      // Base at /preview/<view>/ so relative paths behave consistently with production
+      base.setAttribute('href', `/preview/${viewName}/`);
+      document.head.insertBefore(base, document.head.firstChild);
+    }
+  } catch (e) { console.warn('Base href insertion skipped:', e); }
+
+  // Check if the URL has a post parameter and load it automatically
+  const urlParams = new URLSearchParams(window.location.search);
+  const postParam = urlParams.get('post');
+  
+  if (postParam) {
+    // URL has a post parameter, load the post content
+    console.log('Auto-loading post from URL parameter:', postParam);
+    load_main('index.html?post=' + postParam);
+    return;
+  }
+  
+  // Check if the initial state exists, if not, set it
+  if (!history.state) {
+     // Don't try to load post_index.html if there are no posts
+     // The "No posts yet!" message is already in the main container
+     history.replaceState({ slug: "index.html" }, "", "index.html");
+  }
+  // (timing removed)
+};

data/lib/scriptorium/support/common_js/syntax-highlighting.js

@@ -0,0 +1,27 @@
+// Highlight newly loaded content
+function highlightNewContent(container) {
+    if (typeof hljs !== 'undefined') {
+        // Find all code blocks in the new content and highlight them
+        const codeBlocks = container.querySelectorAll('pre code[class*="language-"]');
+        console.log('Found code blocks:', codeBlocks.length);
+        if (codeBlocks.length > 0) {
+            // Highlight each code block
+            codeBlocks.forEach((codeBlock, index) => {
+                console.log(`Highlighting code block ${index}:`, codeBlock);
+                try {
+                    hljs.highlightElement(codeBlock);
+                    console.log(`Successfully highlighted code block ${index}`);
+                } catch (error) {
+                    console.error(`Error highlighting code block ${index}:`, error);
+                }
+            });
+        }
+    } else {
+        console.log('hljs is not defined');
+    }
+}
+
+// Initialize highlight.js syntax highlighting
+if (typeof hljs !== 'undefined') {
+    hljs.highlightAll();
+}

data/lib/scriptorium/support/config/reddit_template.txt

@@ -0,0 +1,17 @@
+# Reddit config data
+
+# App information
+
+user_agent  Scriptorium Blog Bot 1.0 by /u/hal_fulton
+client_id   7UpmDm8vg6v-mzuwyGcSUg
+secret      BsIXzKihItxEP6PtxGVl9ThXi4qEYw
+
+# Your reddit login
+
+username    YOUR_REDDIT_USERNAME
+password    YOUR_REDDIT_PASSWORD
+
+# Community (subreddit) where you'll post
+
+subreddit   YOUR_SUBREDDIT_NAME
+

data/{test/scriptorium-TEST-1754622690-146/views/sample → lib/scriptorium/support}/config/social.txt

@@ -2,6 +2,7 @@
 # List one platform per line to enable social meta tags
 facebook
 twitter
+reddit
 
 # Note: No Facebook App ID or Twitter username required for basic meta tags
 # These are only needed if you want to add social sharing buttons later

data/lib/scriptorium/support/highlight/css.txt

@@ -0,0 +1,2 @@
+href         https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css
+rel          stylesheet

data/lib/scriptorium/support/highlight/custom.css

@@ -0,0 +1,119 @@
+<style>
+pre {
+  max-height: none !important;
+  height: auto !important;
+  overflow: visible !important;
+  background: #f5f2f0 !important;
+  padding: 1em !important;
+  margin: 1em 0 !important;
+  border-radius: 0.3em !important;
+  display: block !important;
+}
+pre code {
+  white-space: pre-wrap !important;
+  word-wrap: break-word !important;
+  display: block !important;
+}
+pre code tt {
+  white-space: normal !important;
+  display: inline !important;
+}
+code {
+  white-space: normal;
+  display: inline;
+}
+/* Normal whitespace handling */
+#main {
+  white-space: normal;
+}
+#main tt {
+  white-space: nowrap !important;
+  display: inline !important;
+  float: none !important;
+  clear: none !important;
+}
+tt {
+  white-space: nowrap !important;
+  display: inline !important;
+  float: none !important;
+  clear: none !important;
+}
+.main tt {
+  white-space: nowrap !important;
+  display: inline !important;
+  float: none !important;
+  clear: none !important;
+}
+p tt {
+  white-space: nowrap !important;
+  display: inline !important;
+  float: none !important;
+  clear: none !important;
+}
+* tt {
+  white-space: nowrap !important;
+  display: inline !important;
+  float: none !important;
+  clear: none !important;
+}
+body tt {
+  white-space: nowrap !important;
+  display: inline !important;
+  float: none !important;
+  clear: none !important;
+}
+html tt {
+  white-space: nowrap !important;
+  display: inline !important;
+  float: none !important;
+  clear: none !important;
+}
+p tt {
+  white-space: nowrap !important;
+  display: inline !important;
+  float: none !important;
+  clear: none !important;
+}
+/* Normal paragraph styling - Bootstrap isolation not needed with proper HTML */
+#main p {
+  margin: 0 0 1em 0;
+}
+#main p:last-child {
+  margin-bottom: 0;
+}
+p:only-child {
+  display: inline !important;
+}
+p tt {
+  white-space: nowrap !important;
+  display: inline !important;
+  float: none !important;
+  clear: none !important;
+}
+/* More specific selectors to override Bootstrap */
+#main p tt {
+  white-space: nowrap !important;
+  display: inline !important;
+  float: none !important;
+  clear: none !important;
+}
+body #main p tt {
+  white-space: nowrap !important;
+  display: inline !important;
+  float: none !important;
+  clear: none !important;
+}
+html body #main p tt {
+  white-space: nowrap !important;
+  display: inline !important;
+  float: none !important;
+  clear: none !important;
+}
+/* Ensure br elements work for paragraph spacing */
+br {
+  display: block !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  line-height: 1.2em !important;
+}
+</style>

data/lib/scriptorium/support/highlight/js.txt

@@ -0,0 +1 @@
+src          https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js

data/lib/scriptorium/support/post_index/config.txt

@@ -0,0 +1,15 @@
+posts.per.page 10
+entry.title.size 1.1em
+entry.blurb.size 0.75em
+entry.date.size 0.7em
+entry.date.width 14%
+entry.cellpadding 4
+entry.margin.bottom 6px
+entry.title.color #000000
+entry.blurb.color #666666
+entry.date.color #888888
+entry.line.height 1.1
+entry.date.alignment right
+entry.date.spacing 0.1em
+entry.date.format month dd, yyyy
+index.margin.top 20px

data/lib/scriptorium/support/post_index/style.css

@@ -0,0 +1,55 @@
+<style>
+body { font-family: verdana; line-height: 1.1 }
+
+.recent-title a {
+  color: #010101;
+  font-family: verdana;
+  font-size: 28px;
+  float: right;
+  display: inline-block;
+  text-align: top;
+  text-decoration: none;
+}
+
+.recent-title a:hover {
+  text-decoration: none;
+}
+
+.recent-title-text a {
+  color: #0101a1;
+  font-family: verdana;
+  font-size: 22px; 
+  display: block;
+  text-decoration: none;
+}
+
+.recent-title-text a:hover {
+  text-decoration: none;
+}
+
+.recent-date {
+  color: #9a9a9a;
+  font-family: verdana;
+  font-size: 15px;
+  display: block;
+  float: left;
+  text-align: top;
+}
+
+.mydrop {
+  color: #444444;
+  float: left;
+  text-align: top;
+# font-family: Verdana;
+  font-size: 38px;
+  line-height: 38px;
+# padding-top: 0px;
+  padding-right: 8px;
+  padding-left: 3px;
+}
+
+.thumbnail img {
+    max-height: 100%;
+    max-width: 100%;
+}
+</style>

data/lib/scriptorium/support/templates/index_entry.lt3

@@ -0,0 +1,16 @@
+<tr style="margin-bottom: %{entry.margin.bottom};">
+  <td width=%{entry.date.width} valign=top align=right>
+    <div style="text-align: %{entry.date.alignment}; font-size: %{entry.date.size}; color: %{entry.date.color}; line-height: %{entry.line.height};">
+      <div style="height: %{entry.date.spacing};">&nbsp;</div>
+      <div>%{formatted_date}</div>
+    </div>
+  </td>
+  <td valign=top> 
+    <div style="font-size: %{entry.title.size}; line-height: %{entry.line.height};">
+      <div><a href="javascript:void(0)" 
+              style="text-decoration: none; color: %{entry.title.color};"
+              onclick="load_main('index.html?post=%{post.slug}')">%{post.title}</a></div>
+      <div style="font-size: %{entry.blurb.size}; color: %{entry.blurb.color};">%{post.blurb}</div>
+    </div>
+  </td>
+</tr>

data/{test/scriptorium-TEST-1754622690-146/themes/standard/initial/post.lt3 → lib/scriptorium/support/templates/initial_post.lt3}

@@ -1,12 +1,12 @@
 . Initial file created by StandardFiles#post_template(num)
-
-.id %{num}
-.created %{created}
+.created
 
 .title %{title}
-.blurb %{blurb}
+.blurb 
+%{blurb}
+.end
 
 .views %{views}  
 .tags  %{tags}   
 
-BEGIN HERE...
+%{body}

data/lib/scriptorium/support/templates/post.lt3

@@ -0,0 +1,104 @@
+<!-- theme: standard -->
+<style>
+body { font-family: verdana; line-height: 1.1 }
+
+/* Dropcap styles */
+.dropcap {
+  float: left;
+  font-size: 3em;
+  line-height: 0.8;
+  margin: 0.1em 0.1em 0 0;
+  padding: 0;
+  font-weight: bold;
+}
+
+/* Pullquote styles */
+.pullquote {
+  float: right;
+  width: 200px;
+  margin: 0 0 20px 20px;
+  padding: 15px;
+  background: #f5f5f5;
+  border-left: 4px solid #333;
+  font-size: 1.2em;
+  font-style: italic;
+  line-height: 1.4;
+  color: #666;
+  border-radius: 4px;
+}
+
+.pullquote-left {
+  float: left;
+  margin: 0 20px 20px 0;
+}
+
+.pullquote-right {
+  float: right;
+  margin: 0 0 20px 20px;
+}
+</style>
+
+<div align='right'><a style="text-decoration: none;" href="../index.html">
+  <img src="../assets/icons/ui/back.png" width=32 height=32 alt="Go to Index" style="vertical-align: middle;"></img> Back to index</a>
+</div>
+<div style="display: flex; justify-content: space-between; align-items: baseline;">
+  <span style="text-align: left; font-size: 1.5em;">%{post.title}</span>
+  <span style="text-align: right; font-size: 0.9em;">%{reddit_button}%{post.date}</span>
+</div>
+<hr>
+%{post.body}
+<hr>
+<div style="text-align: right; font-size: 0.8em;">%{post.tags}</div>
+<div style="text-align: center; margin-top: 20px;">
+  <button onclick="copyPermalinkToClipboard(this)" style="padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">Copy link</button>
+</div>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/ruby.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/elixir.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
+<script>
+  if (typeof hljs !== 'undefined') { hljs.highlightAll(); }
+  
+  // If this post is injected into a container (SPA), try to highlight that container only
+  try {
+    if (typeof hljs !== 'undefined') {
+      var container = document.currentScript && document.currentScript.parentElement;
+      if (container) {
+        container.querySelectorAll('pre code').forEach(function(el){ hljs.highlightElement(el); });
+      }
+    }
+  } catch (e) {}
+</script>
+<script>
+  // Fallback clipboard handler for standalone post pages if common JS isn't loaded
+  if (typeof copyPermalinkToClipboard === 'undefined') {
+    function copyPermalinkToClipboard(button) {
+      const currentUrl = window.location.href;
+      let permalinkUrl;
+      if (currentUrl.includes('?post=')) {
+        const postSlug = currentUrl.split('?post=')[1];
+        const parts = window.location.pathname.split('/');
+        parts.pop();
+        const baseUrl = window.location.origin + parts.join('/') + '/';
+        permalinkUrl = baseUrl + 'permalink/' + postSlug;
+      } else {
+        permalinkUrl = currentUrl;
+      }
+      navigator.clipboard.writeText(permalinkUrl).then(function(){
+        const btn = button || document.activeElement;
+        if (!btn) { return; }
+        const originalText = btn.textContent;
+        btn.textContent = 'Copied!';
+        btn.style.background = '#28a745';
+        setTimeout(function(){
+          btn.textContent = originalText;
+          btn.style.background = '#007bff';
+        }, 2000);
+      }).catch(function(err){
+        console.error('Failed to copy: ', err);
+        alert('Failed to copy link to clipboard');
+      });
+    }
+  }
+</script>

data/{test/scriptorium-TEST-1754622690-146/themes/standard/layout/config/header.txt → lib/scriptorium/support/theme/header.lt3}

@@ -1,4 +1,4 @@
 # <!-- Section: header -->
 # Contents of header
 # (may include banner, title, navbar, ...)
-title
+banner svg