From 39defbc93c372ccd4867c29fef967df7bf4c6841 Mon Sep 17 00:00:00 2001
From: steveseguin <punkrawker@gmail.com>
Date: Mon, 6 Jan 2025 12:42:52 -0500
Subject: [PATCH 1/3] samplefeatured.htmla dded

---
 samplefeatured.html | 602 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 602 insertions(+)
 create mode 100644 samplefeatured.html
diff --git a/samplefeatured.html b/samplefeatured.html
new file mode 100644
index 0000000..e547c36
--- /dev/null
+++ b/samplefeatured.html
@@ -0,0 +1,602 @@
+<!-- NOTE: It's important that the IFRAME logic stay intact, as it is how we receieve messages --!>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
+    <title>Social Stream - Overlay</title>
+    <meta name="title" content="Social Stream - Overlay" />
+    <link rel="icon" href="./icons/favicon.ico" />
+    <link rel="preload" href="./thirdparty/NotoColorEmoji.ttf" as="font" type="font/ttf" crossorigin />
+    <meta name="robots" content="noindex">
+    <style>
+        :root {
+            --primary-gradient: linear-gradient(135deg, rgba(46,49,146,0.9), rgba(87,37,117,0.9));
+            --chat-bg: rgba(23, 25, 35, 0.85);
+            --border-color: rgba(255,255,255,0.1);
+            --text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+            --animation-timing: 0.3s ease-out;
+        }
+
+        body {
+            margin: 0;
+            overflow: hidden;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+            font-size: 16px;
+            line-height: 1.5;
+            color: #fff;
+            text-shadow: var(--text-shadow);
+            background-color: transparent;
+        }
+
+        .output {
+            position: fixed;
+            bottom: 2rem;
+            left: 50%;
+            transform: translateX(-50%);
+            max-width: min(90vw, 600px);
+            width: 100%;
+        }
+
+        .highlight-chat {
+            background: var(--chat-bg);
+            backdrop-filter: blur(8px);
+            -webkit-backdrop-filter: blur(8px);
+            border-radius: 12px;
+            padding: 1.5rem;
+            position: relative;
+            border: 1px solid var(--border-color);
+            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+            animation: slideUp var(--animation-timing);
+        }
+
+        .highlight-chat.dono {
+            background: var(--primary-gradient);
+        }
+
+        .hl-name {
+            font-size: 1.125rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .hl-message {
+            font-size: 1rem;
+            line-height: 1.6;
+            word-break: break-word;
+            overflow-wrap: break-word;
+            hyphens: auto;
+        }
+
+        .hl-img {
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
+            aspect-ratio: 1;
+        }
+
+        .hl-profile-pic {
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            border: 2px solid var(--border-color);
+            object-fit: cover;
+        }
+
+        .hl-badges {
+            display: inline-flex;
+            gap: 0.25rem;
+            margin-left: 0.5rem;
+            align-items: center;
+        }
+
+        .hl-badge {
+            width: 20px;
+            height: 20px;
+            object-fit: contain;
+        }
+
+        .icon.sourcetype {
+            position: absolute;
+            bottom: 1rem;
+            right: 1rem;
+            width: 24px;
+            height: 24px;
+            opacity: 0.7;
+            transition: opacity var(--animation-timing);
+        }
+
+        .icon.sourcetype:hover {
+            opacity: 1;
+        }
+
+        .hl-imgContent {
+            margin-top: 1rem;
+            border-radius: 8px;
+            overflow: hidden;
+            max-width: 100%;
+        }
+
+        .hl-imgContent img,
+        .hl-imgContent video {
+            max-width: 100%;
+            height: auto;
+            display: block;
+            border-radius: 8px;
+        }
+
+        .donation {
+            margin-top: 1rem;
+            padding-top: 1rem;
+            border-top: 1px solid var(--border-color);
+        }
+
+        .donation-title {
+            font-size: 0.875rem;
+            text-transform: uppercase;
+            font-weight: 600;
+            color: rgba(255,255,255,0.7);
+            margin-bottom: 0.25rem;
+        }
+
+        .subtitle {
+            font-size: 1.25rem;
+            font-weight: 600;
+            background: linear-gradient(90deg, #FFD700, #FFA500);
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        @keyframes slideUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .fade {
+            transition: opacity var(--animation-timing);
+            opacity: 1;
+            will-change: opacity;
+        }
+
+        .fade.hidden {
+            opacity: 0;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            .highlight-chat {
+                animation: none;
+            }
+            
+            .fade {
+                transition: none;
+            }
+        }
+
+        #frame1 {
+            width: 0;
+            height: 0;
+            position: fixed;
+            left: -100px;
+            top: -100px;
+            border: 0;
+            pointer-events: none;
+        }
+    </style>
+</head>
+<body>
+    <div id="output" class="output"></div>
+    <script>
+    // URLSearchParams polyfill
+    (function(w) {
+        w.URLSearchParams = w.URLSearchParams || function(searchString) {
+            var self = this;
+            self.searchString = searchString;
+            self.get = function(name) {
+                var results = new RegExp("[\?&]" + name + "=([^&#]*)").exec(self.searchString);
+                if (results == null) {
+                    return null;
+                } else {
+                    return decodeURI(results[1]) || 0;
+                }
+            };
+        };
+    })(window);
+
+    const App = {
+        config: {
+            serverURL: 'wss://io.socialstream.ninja',
+            maxReconnectAttempts: 10,
+            reconnectDelay: 100,
+            roomIdMaxLength: 80
+        },
+
+        state: {
+            socketserver: null,
+            reconnectionTimeout: null,
+            conCon: 1,
+            roomID: 'test',
+            password: 'false',
+            fallbackImage: null,
+            fallbackImageAnnouncement: null
+        },
+
+        init() {
+            this.setupUrlParams();
+            this.setupFallbackImages();
+            this.initializeConnection();
+        },
+
+        initializeConnection() {
+            const urlParams = new URLSearchParams(window.location.search);
+            
+            if (urlParams.has('server')) {
+                this.config.serverURL = urlParams.get('server') || this.config.serverURL;
+                this.setupSocket();
+            } else if (urlParams.has('server2')) {
+                this.config.serverURL = urlParams.get('server2') || this.config.serverURL;
+                this.setupSocket(1);
+            } else if (urlParams.has('server3')) {
+                this.config.serverURL = urlParams.get('server3') || this.config.serverURL;
+                this.setupSocket(2);
+            } else {
+                this.setupRecvDataWindow();
+            }
+        },
+
+        setupUrlParams() {
+            const urlParams = new URLSearchParams(window.location.search);
+            this.handleRoomIdParam(urlParams);
+            this.handlePasswordParam(urlParams);
+            this.handleServerParam(urlParams);
+
+            if (urlParams.has('savetodisk')) {
+                document.body.onclick = () => this.overwriteFile('setup');
+            }
+        },
+
+        handlePasswordParam(urlParams) {
+            this.state.password = urlParams.get('password') || 'false';
+        },
+
+        handleServerParam(urlParams) {
+            if (urlParams.has('server')) {
+                this.config.serverURL = urlParams.get('server') || this.config.serverURL;
+            } else if (urlParams.has('server2')) {
+                this.config.serverURL = urlParams.get('server2') || this.config.serverURL;
+            } else if (urlParams.has('server3')) {
+                this.config.serverURL = urlParams.get('server3') || this.config.serverURL;
+            }
+        },
+
+        setupRecvDataWindow() {
+            const iframe = document.createElement('iframe');
+            iframe.src = `https://vdo.socialstream.ninja/?ln&password=${this.state.password}&notmobile&salt=vdo.ninja&label=overlay&exclude=${this.state.roomID}&scene&novideo&noaudio&cleanoutput&room=${this.state.roomID}`;
+            iframe.id = 'frame1';
+            iframe.allow = 'midi;geolocation;microphone;';
+            document.body.appendChild(iframe);
+
+            window.addEventListener('message', (e) => {
+                if (e.source !== iframe.contentWindow) return;
+                
+				if (e.data?.dataReceived && ("overlayNinja" in e.data.dataReceived)){
+					if ( e.data.dataReceived.overlayNinja){
+						this.processData({ contents: e.data.dataReceived.overlayNinja });
+					} else {
+						 this.processData(false);
+					}
+				}
+            });
+        },
+
+        handleRoomIdParam(urlParams) {
+            let roomID = urlParams.get('session') || 
+                        urlParams.get('s') || 
+                        urlParams.get('id');
+
+            if (!roomID && window.location.protocol === 'file:') {
+                roomID = prompt('Enter your session ID here, or add it to the URL.');
+            } else if (!roomID) {
+                window.location.href = 'https://socialstream.ninja/landing';
+                return;
+            }
+
+            const validatedID = this.validateRoomId(roomID);
+            if (!validatedID) {
+                this.handleInvalidRoom();
+                return;
+            }
+
+            this.state.roomID = validatedID;
+        },
+
+        setupFallbackImages() {
+            this.state.fallbackImage = new Image();
+            this.state.fallbackImage.src = './sources/images/unknown.png';
+            this.state.fallbackImage.onerror = () => this.state.fallbackImage = null;
+
+            this.state.fallbackImageAnnouncement = new Image();
+            this.state.fallbackImageAnnouncement.src = './icons/announcement.png';
+            this.state.fallbackImageAnnouncement.onerror = () => this.state.fallbackImageAnnouncement = null;
+        },
+
+        validateRoomId(roomId) {
+            if (!roomId?.trim()) return false;
+
+            let sanitizedId = String(roomId).trim();
+            if (sanitizedId.length < 2) return false;
+
+            const reservedValues = [
+                'undefined', 'null', 'false', 'true', 'NaN',
+                'default', 'room', 'lobby', 'test', 'nothing',
+                '0', '1', 'none'
+            ];
+
+            if (reservedValues.includes(sanitizedId.toLowerCase())) return false;
+
+            sanitizedId = sanitizedId.replace(/[^a-zA-Z0-9]/g, '_');
+            if (/^_+$/.test(sanitizedId)) return false;
+            
+            return sanitizedId.length <= this.config.roomIdMaxLength ? sanitizedId : false;
+        },
+
+        handleInvalidRoom() {
+            document.write('Invalid session ID');
+            throw new Error('Invalid session ID');
+        },
+
+        setupSocket(allin = false) {
+            if (this.state.reconnectionTimeout) {
+                clearTimeout(this.state.reconnectionTimeout);
+                this.state.reconnectionTimeout = null;
+            }
+
+            if (this.state.socketserver) {
+                this.state.socketserver.onclose = null;
+                this.state.socketserver.close();
+            }
+
+            this.state.socketserver = new WebSocket(this.config.serverURL);
+            this.initializeSocketHandlers(allin);
+        },
+
+        initializeSocketHandlers(allin) {
+            const socket = this.state.socketserver;
+
+            socket.onclose = () => {
+                if (this.state.conCon <= this.config.maxReconnectAttempts) {
+                    this.state.reconnectionTimeout = setTimeout(() => {
+                        this.state.conCon++;
+                        this.setupSocket(allin);
+                    }, this.config.reconnectDelay * this.state.conCon);
+                }
+            };
+
+            socket.onerror = (error) => {
+                console.error('WebSocket error:', error);
+                socket.close();
+            };
+
+            socket.onopen = () => {
+                this.state.conCon = 1;
+                const message = {
+                    join: this.state.roomID,
+                    out: 3
+                };
+
+                if (allin === 2) {
+                    message.in = 2;
+                } else if (allin === 1) {
+                    message.in = 1;
+                }
+
+                socket.send(JSON.stringify(message));
+            };
+
+            socket.onmessage = this.handleSocketMessage.bind(this);
+        },
+
+        handleSocketMessage(event) {
+            if (!event.data) return;
+
+            let data;
+            try {
+                data = typeof event.data === 'object' ? event.data : JSON.parse(event.data);
+            } catch (error) {
+                console.error('Error parsing message:', error);
+                return;
+            }
+
+            const pid = data?.get || false;
+            if (data?.overlayNinja) {
+                data = data.overlayNinja;
+            }
+
+            const resp = this.processData(data);
+            if (resp !== null) {
+                const ret = {
+                    callback: {
+                        ...data,
+                        result: resp,
+                        get: pid
+                    }
+                };
+                this.state.socketserver.send(JSON.stringify(ret));
+            }
+        },
+
+        processData(data) {
+            if (!data || data === false || (data.contents && data.contents === false) || (data.content === false)) {
+                document.getElementById('output').innerHTML = '';
+                return true;
+            }
+
+            if (data.contents) {
+                const content = data.contents;
+                if (!content.chatmessage && !content.chatname && 
+                    !content.contentimg && !content.donation && 
+                    !content.hasDonation && !content.memebership && 
+                    !content.hasMembership) {
+                    return;
+                }
+                
+                this.showMessage(content);
+                return true;
+            }
+
+            return null;
+        },
+
+        errorImage(ele) {
+            if (ele.dataset.backupImage) {
+                ele.src = ele.dataset.backupImage;
+            } else if (this.state.fallbackImage) {
+                ele.src = './sources/images/unknown.png';
+            } else {
+                ele.style.display = 'none';
+            }
+        },
+
+        showMessage(data) {
+            const messageContent = this.buildMessageContent(data);
+            document.getElementById('output').innerHTML = messageContent;
+
+            if (data.hasDonation) {
+                document.getElementById('newmessage')?.classList.add('dono');
+            }
+
+            if (!data.chatname && !data.chatbadges) {
+                document.getElementById('nameDIV').style.display = 'none';
+            }
+
+            this.handleTwitchImage(data);
+        },
+
+        buildMessageContent(data) {
+            const imgContent = this.buildImageContent(data);
+            const avatarImg = this.buildAvatarImage(data);
+            const chatbadges = this.buildChatBadges(data.chatbadges);
+            const sourceType = this.buildSourceType(data.type);
+            const styleOverride = this.getStyleOverride(data);
+
+            return `
+                <div class="hl-c-cont highlight-chat" id="newmessage" data-source-type="${data.type || 'none'}">
+                    <div class="hl-name" ${styleOverride} id="nameDIV">
+                        ${data.chatname || ''}${chatbadges}
+                    </div>
+                    <div id="message" class="hl-message">${data.chatmessage || ''}</div>
+                    ${avatarImg}${sourceType}${imgContent}
+                </div>
+            `;
+        },
+
+        buildImageContent(data) {
+            if (!data.contentimg) return '';
+
+            const isVideo = data.contentimg.includes('.mp4') || data.contentimg.includes('.webm');
+            const mediaElement = isVideo ? 
+                `<video loop="true" autoplay="true" muted="true" src="${data.contentimg}" onerror="this.parentElement.style.display='none'" />` :
+                `<img src="${data.contentimg}" onerror="this.parentElement.style.display='none'" />`;
+
+            return `<div class="hl-imgContent">${mediaElement}</div>`;
+        },
+
+        buildAvatarImage(data) {
+            const imgSrc = data.chatimg || (!data.chatname && data.event ? 
+                './icons/announcement.png' : './sources/images/unknown.png');
+
+            const backupAttr = data.backupChatimg ? 
+                `data-backup-image="${data.backupChatimg}"` : '';
+
+            return `
+                <div class="hl-img">
+                    <img id="img_${data.id}" 
+                         src="${imgSrc}" 
+                         class="hl-profile-pic" 
+                         ${backupAttr}
+                         onerror="App.errorImage(this)" />
+                </div>`;
+        },
+
+        buildChatBadges(badges) {
+            if (!badges?.length) return '';
+
+            const badgeElements = badges.map(badge => {
+                if (typeof badge === 'object') {
+                    if (badge.type === 'img' && badge.src) {
+                        return `<img class="hl-badge" src="${badge.src}" />`;
+                    } else if (badge.type === 'svg' && badge.html) {
+                        return `<span class="hl-badge">${badge.html}</span>`;
+                    }
+                } else {
+                    return `<img class="hl-badge" src="${badge}" />`;
+                }
+                return '';
+            }).join('');
+
+            return badgeElements ? `<div class="hl-badges">${badgeElements}</div>` : '';
+        },
+
+        buildSourceType(type = 'none') {
+            return `
+                <img src="./sources/images/${type}.png" 
+                     class="icon sourcetype" 
+                     data-icon-name="${type}" 
+                     onerror="this.style.display='none'" />`;
+        },
+
+        getStyleOverride(data) {
+            const styles = [];
+            
+            if (data.backgroundColor) {
+                styles.push(data.backgroundColor.startsWith('background-color:') ? 
+                    data.backgroundColor : `background-color: ${data.backgroundColor}`);
+            }
+            
+            if (data.nameColor) {
+                styles.push(`color: ${data.nameColor}`);
+            } else if (data.textNameColor) {
+                styles.push(data.textNameColor);
+            }
+            
+            return styles.length ? `style="${styles.join('; ')}"` : '';
+        },
+
+        handleTwitchImage(data) {
+            const username = data.username || data.chatname;
+            if (data.type !== 'twitch' || !username) return;
+
+            if (!data.chatimg || data.chatimg.startsWith('https://api.socialstream.ninja')) {
+                const twitchImage = new Image();
+                const imageUrl = `https://api.socialstream.ninja/twitch/large?username=${encodeURIComponent(username)}`;
+                
+                twitchImage.onload = () => {
+                    const imgElement = document.getElementById(`img_${data.id}`);
+                    if (imgElement) {
+                        imgElement.src = imageUrl;
+                    }
+                };
+                
+                twitchImage.src = imageUrl;
+            }
+        },
+
+        overwriteFile(type) {
+            console.log('Save to disk functionality:', type);
+        }
+    };
+
+    // Initialize the application when DOM is ready
+    document.addEventListener('DOMContentLoaded', () => App.init());
+    </script>
+</body>
+</html>
\ No newline at end of file

From f9bf4b9d0da2ab1d2d59eba7fdbb4d54bf495765 Mon Sep 17 00:00:00 2001
From: steveseguin <punkrawker@gmail.com>
Date: Mon, 6 Jan 2025 12:54:46 -0500
Subject: [PATCH 2/3] landing page fix

---
 landing.html        | 156 +++++++++++++++++++-------------------------
 samplefeatured.html |  11 +++-
 2 files changed, 78 insertions(+), 89 deletions(-)

diff --git a/landing.html b/landing.html
index 91e5e4f..cd936d9 100644
--- a/landing.html
+++ b/landing.html
@@ -889,100 +889,80 @@ <h3 id="contributors-to-this-project">Contributors to this project</h3>
         <p>Join our community for free support on <a href="https://discord.socialstream.ninja" target="_blank">Discord</a>.</p>
     </footer>
 	<script>
-		// Function to handle smooth scrolling to anchor with retry logic
-		function scrollToAnchor(hash, retryCount = 0, maxRetries = 3) {
-		    // Remove the # from the hash
-		    const targetId = hash.replace('#', '');
-		    
-		    // Look for either the ID or a heading with matching text
-		    let targetElement = document.getElementById(targetId);
-		    
-		    if (!targetElement) {
-		        // If no direct ID match, try to find a heading that matches
-		        const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
-		        for (const heading of headings) {
-		            // Convert heading text to kebab case for comparison
-		            const headingId = heading.textContent.toLowerCase()
-		                .replace(/[^\w\s-]/g, '')
-		                .replace(/\s+/g, '-');
-		            
-		            if (headingId === targetId) {
-		                targetElement = heading;
-		                break;
-		            }
-		        }
-		    }
-		    
-		    if (targetElement) {
-		        // Wait for images to load in the markdown container
-		        const images = document.querySelectorAll('#markdown img');
-		        const imagePromises = Array.from(images).map(img => {
-		            if (img.complete) return Promise.resolve();
-		            return new Promise(resolve => {
-		                img.onload = resolve;
-		                img.onerror = resolve; // Handle failed image loads
-		            });
-		        });
+	function scrollToAnchor(hash, retryCount = 0, maxRetries = 3) {
+		const targetId = hash.replace('#', '');
+		let targetElement = document.getElementById(targetId);
 		
-		        // After images load (or fail), scroll to target
-		        Promise.all(imagePromises).then(() => {
-		            // Additional small delay to ensure final layout
-		            setTimeout(() => {
-		                const offset = targetElement.getBoundingClientRect().top + window.scrollY - 20; // 20px padding
-		                window.scrollTo({
-		                    top: offset,
-		                    behavior: 'smooth'
-		                });
-		                
-		                // Verify scroll position after a short delay
-		                setTimeout(() => {
-		                    const elementPosition = targetElement.getBoundingClientRect().top;
-		                    // If element is not close to top of viewport and we haven't exceeded max retries
-		                    if (Math.abs(elementPosition) > 50 && retryCount < maxRetries) {
-		                        scrollToAnchor(hash, retryCount + 1, maxRetries);
-		                    }
-		                }, 500);
-		            }, 100);
-		        });
-		    }
+		if (!targetElement) {
+			const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
+			for (const heading of headings) {
+				try {
+					const headingId = heading.textContent.toLowerCase()
+						.replace(/[^\w\s-]/g, '')
+						.replace(/\s+/g, '-');
+					
+					if (headingId === targetId) {
+						targetElement = heading;
+						break;
+					}
+				} catch(e) {}
+			}
 		}
-
-		function smoothScroll(target) {
-			  const element = document.getElementById(target);
-			  if (element) {
+		
+		if (!targetElement) return;
+
+		const images = document.querySelectorAll('#markdown img');
+		const imagePromises = Array.from(images).map(img => 
+			img.complete ? Promise.resolve() : 
+			new Promise(resolve => {
+				img.onload = img.onerror = resolve;
+			})
+		);
+
+		Promise.all(imagePromises).then(() => {
+			setTimeout(() => {
+				const offset = targetElement.getBoundingClientRect().top + window.scrollY - 20;
 				window.scrollTo({
-				  top: element.offsetTop,
-				  behavior: 'smooth'
+					top: offset,
+					behavior: 'smooth'
 				});
-			  }
+				
+				if (Math.abs(targetElement.getBoundingClientRect().top) > 50 && retryCount < maxRetries) {
+					setTimeout(() => scrollToAnchor(hash, retryCount + 1, maxRetries), 500);
+				}
+			}, 100);
+		});
+	}
+
+	if (location.protocol.startsWith('http')) {
+		document.addEventListener("DOMContentLoaded", () => {
+			if (typeof marked === 'undefined' || typeof markedGfmHeadingId === 'undefined') {
+				console.error('Required libraries (marked or markedGfmHeadingId) not loaded');
+				return;
 			}
-		if (location.protocol.startsWith('http')) {
-			document.addEventListener("DOMContentLoaded", function() {
-			    if (location.protocol.startsWith('http')) {
-			        marked.use(markedGfmHeadingId.gfmHeadingId({}));
-			        
-			        fetch('./README.md')
-			            .then(response => response.text())
-			            .then(text => {
-			                const html = marked.parse(text);
-			                document.getElementById('markdown').innerHTML = html;
-			                
-			                // After content is updated, check for hash and scroll if needed
-			                if (window.location.hash) {
-			                    scrollToAnchor(window.location.hash);
-			                }
-			            })
-			            .catch(error => console.error('Error loading the README:', error));
-			    }
-			});
-		} else {
-			console.warn('Skipping fetch call since the page is loaded locally.');
-		}
-		window.addEventListener('hashchange', function() {
-		    if (window.location.hash) {
-		        scrollToAnchor(window.location.hash);
-		    }
+
+			marked.use(markedGfmHeadingId.gfmHeadingId({}));
+			
+			fetch('./README.md')
+				.then(response => {
+					if (!response.ok) throw new Error('Failed to fetch README.md');
+					return response.text();
+				})
+				.then(text => {
+					document.getElementById('markdown').innerHTML = marked.parse(text);
+					if (window.location.hash) {
+						scrollToAnchor(window.location.hash);
+					}
+				})
+				.catch(error => console.error('Error loading the README:', error));
 		});
+	}
+
+	window.addEventListener('hashchange', () => {
+		if (window.location.hash) {
+			scrollToAnchor(window.location.hash);
+		}
+	});
 	</script>
 </body>
 </html>
diff --git a/samplefeatured.html b/samplefeatured.html
index e547c36..330c0f8 100644
--- a/samplefeatured.html
+++ b/samplefeatured.html
@@ -1,4 +1,9 @@
-<!-- NOTE: It's important that the IFRAME logic stay intact, as it is how we receieve messages --!>
+<!--
+Development Notes:
+- It's important that the IFRAME logic stay intact, as it is how we receieve messages
+- This code is in vanilla Javascript designed for web browsers without compiling
+- Details of the incoming message structure can be found here: https://github.com/steveseguin/social_stream/blob/main/README.md#message-structure
+ --!>
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -77,6 +82,10 @@
             right: 0.5rem;
             aspect-ratio: 1;
         }
+		
+		.hl-message img {
+			max-height:24px;
+		}
 
         .hl-profile-pic {
             width: 48px;

From a734d4cedfd0f5806b1f55bda91eab44b634d35d Mon Sep 17 00:00:00 2001
From: steveseguin <punkrawker@gmail.com>
Date: Mon, 6 Jan 2025 12:57:39 -0500
Subject: [PATCH 3/3] try 2

---
 landing.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/landing.html b/landing.html
index cd936d9..00aa746 100644
--- a/landing.html
+++ b/landing.html
@@ -949,6 +949,7 @@ <h3 id="contributors-to-this-project">Contributors to this project</h3>
 					return response.text();
 				})
 				.then(text => {
+					console.log(text);
 					document.getElementById('markdown').innerHTML = marked.parse(text);
 					if (window.location.hash) {
 						scrollToAnchor(window.location.hash);
