added additional tags to user profile

CSS/cards.css

@@ -239,6 +239,7 @@
     align-items: center;
     justify-content: center;
     transition: background-color 0.3s ease;
+    z-index: 9999;
 }
 
 .compose-button:hover {
@@ -317,4 +318,59 @@
     padding: 8px;
     text-align: left;
     font-size: 0.9em;
-}
+}
+
+/* container for the external embed */
+.external-embed-container {
+    border: 2px solid #4e004e;
+    border-radius: 8px;
+    padding: 16px;
+    max-width: 400px;
+    margin: 16px auto;
+    background-color: #2e003e;
+    color: #e6e6ff;
+    font-family: Arial, sans-serif;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    text-align: center;
+}
+
+/* thumbnail styling */
+.external-embed-thumb {
+    width: 100%;
+    max-width: 400px;
+    height: auto;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* title styling */
+.external-embed-title {
+    font-size: 1.5em;
+    margin: 0 0 8px 0;
+    color: #ffcc00;
+}
+
+/* description styling */
+.external-embed-description {
+    font-size: 1em;
+    margin: 0 0 16px 0;
+    color: #e6e6ff;
+}
+
+/* link styling */
+.external-embed-link {
+    display: inline-block;
+    padding: 8px 16px;
+    background-color: #4e004e;
+    color: #ffcc00;
+    text-decoration: none;
+    border-radius: 5px;
+    font-weight: bold;
+    transition: background-color 0.3s ease;
+}
+
+.external-embed-link:hover {
+    background-color: #ffcc00;
+    color: #4e004e;
+}

CSS/global.css

@@ -38,7 +38,7 @@ img {
 }
 
 
-#eof {
+.eof {
     text-align: center;
 }
 

HTML/index.html

@@ -63,14 +63,7 @@
         <!-- Section Content -->
         <div id="posts" class="content active">
             <p class="placeholder">nothing here...</p>
-            <div class="dropdown">
+
-                <button class="dropdown-button">Layout: Compact</button>
-                <div class="dropdown-content" id="layoutDropdown">
-                    <a href="#" data-value="large">Large</a>
-                    <a href="#" data-value="relaxed">Relaxed</a>
-                    <a href="#" data-value="compact" class="selected">Compact</a>
-                </div>
-            </div>
             <button id="composebtn" class="compose-button">
                 <i class="fa-solid fa-pen"></i>
             </button>

JS/likes.cjs

@@ -1,42 +0,0 @@
-async function renderLikes(data, ipcRenderer) {
-    let container;
-	/** @type {Map<String, Element>} */
-	let a;
-	if (document.querySelector('#likescontainer')) {
-		container = document.querySelector('#likescontainer');
-		a = new Map(Array.from(container.querySelectorAll('.post-card')).map(o => ([o.dataset.bskyid, o])));
-	}
-	else {
-		container = document.createElement('div');
-		container.classList.add('cards-container');
-		container.id = 'likescontainer';
-		a = new Map();
-	}
-
-	// setupWorker();
-	// renderLikesFeed(posts.map(p => (p?.reply?.root?.uri || p.post.uri)?.trim()), likes, ipcRenderer);
-
-	for (const post of data) renderPostSingle(post, a, likes.map(o => ({ posturi: o.post.uri, likeuri: o.post.viewer?.like })), ipcRenderer, container);
-
-	const postids = Array.from(document.querySelectorAll('[data-like-bskyid]')).map(o => o.dataset.bskyid);
-	console.log(postids);
-
-	// "force" garbage collection
-	// delete a;
-	a.clear();
-	a = null;
-
-	// append container to the document body or a specific section
-	const postdiv = document.querySelector('#posts');
-	postdiv.querySelector('.placeholder')?.remove();
-	if (!document.querySelector('#likescontainer')) {
-		postdiv.appendChild(container);
-		document.addEventListener('click', (e) => {
-			if (e.target.tagName === "VIDEO") zoomvid(e);
-			else if (e.target.tagName === "IMG" || e.target.classList.contains('overlay')) zoomimg(e);
-		});
-	}
-}
-
-
-module.exports = renderLikes;

JS/posts.cjs

@@ -559,6 +559,47 @@ function renderPostSingle(post, a, likes, ipcRenderer, container, idkey = 'bskyi
 		}
 	}
 
+	if (post.post.embed && post.post.embed.$type === 'app.bsky.embed.external#view') {
+		const embedContainer = document.createElement('div'),
+			embed = post.post.embed.external;
+
+		embedContainer.classList.add('external-embed-container');
+
+		// thumbnail (if exists)
+		if (embed.thumb) {
+			const thumbnail = document.createElement('img');
+			thumbnail.classList.add('external-embed-thumb');
+			thumbnail.src = embed.thumb;
+			thumbnail.alt = `${embed.title} thumbnail`;
+			embedContainer.appendChild(thumbnail);
+		}
+
+		// title
+		const titleElement = document.createElement('h3');
+		titleElement.classList.add('external-embed-title');
+		titleElement.textContent = embed.title;
+
+		// description
+		const descriptionElement = document.createElement('p');
+		descriptionElement.classList.add('external-embed-description');
+		descriptionElement.textContent = embed.description;
+
+		// link
+		const linkElement = document.createElement('a');
+		linkElement.classList.add('external-embed-link');
+		linkElement.href = embed.uri;
+		linkElement.target = '_blank'; // opens in a new tab
+		linkElement.rel = 'noopener noreferrer'; // improves security
+		linkElement.textContent = 'Visit';
+
+		// append elements to the container
+		embedContainer.appendChild(titleElement);
+		embedContainer.appendChild(descriptionElement);
+		embedContainer.appendChild(linkElement);
+
+		card.appendChild(embedContainer);
+	}
+
 	// interaction counts
 	if (!card.querySelector('.interaction-counts')) {
 		const counts = document.createElement('div');
@@ -585,7 +626,6 @@ function renderPostSingle(post, a, likes, ipcRenderer, container, idkey = 'bskyi
  * @param {*} ipcRenderer 
  */
 module.exports = function renderPosts(posts, likes, pinnedPost, ipcRenderer, idkey = 'bskyid', containerid = 'posts') {
-	console.log(`${idkey}, ${containerid}container, ${posts.length}`);
 	let container;
 	/** @type {Map<String, Element>} */
 	let a;
@@ -596,14 +636,26 @@ module.exports = function renderPosts(posts, likes, pinnedPost, ipcRenderer, idk
 	else {
 		container = document.createElement('div');
 		container.classList.add('cards-container');
-		container.id = containerid;
+		container.id = `${containerid}container`;
 		a = new Map();
 	}
 
-	// setupWorker();
+	for (const post of posts) {
-	// renderLikesFeed(posts.map(p => (p?.reply?.root?.uri || p.post.uri)?.trim()), likes, ipcRenderer);
+		try {
-
+			renderPostSingle(
-	for (const post of posts) renderPostSingle(post, a, likes.map(o => ({ posturi: o.post.uri, likeuri: o.post.viewer?.like })), ipcRenderer, container, idkey, containerid);
+				post,
+				a,
+				likes.map(o => ({ posturi: o.post.uri, likeuri: o.post.viewer?.like })),
+				ipcRenderer,
+				container,
+				idkey,
+				containerid
+			);
+		}
+		catch (err) {
+			console.error(err);
+		}
+	}
 
 	const postids = Array.from(document.querySelectorAll(`[data-${idkey}]`)).map(o => o.dataset[`${idkey} `]);
 	console.log(postids);
@@ -614,6 +666,8 @@ module.exports = function renderPosts(posts, likes, pinnedPost, ipcRenderer, idk
 	a = null;
 
 	if (pinnedPost) {
+		console.log("PINNED", posts.find(p => p.post.uri === pinnedPost.uri));
+
 		const pinnedcard = container.querySelector(`[data-${idkey}="${pinnedPost.uri}"]`);
 		if (pinnedcard) {
 			const pinnedLabel = document.createElement('div');

JS/replies.cjs

@@ -86,12 +86,10 @@ function createPostPreview(post, isParent = false) {
 }
 
 
-module.exports = function renderReplies(replyObj) {
+module.exports = function renderReplies({ cursor, replies }) {
     const repliesContainer = document.querySelector('#replies');
     repliesContainer.querySelector('.placeholder')?.remove();
 
-    const { cursor, replies } = replyObj;
-
     if (cursor) sessionStorage.setItem('repliescursor', cursor);
     else sessionStorage.removeItem('repliescursor');
 

JS/script.js

@@ -1,12 +1,27 @@
-document.addEventListener('scroll', () => bottomscrolled(document.querySelector('#posts')));
+document.addEventListener('scroll', bottomscrolled);
-async function bottomscrolled(targetDiv) {
+async function bottomscrolled(e) {
     const scrollPosition = window.scrollY + window.innerHeight,
         pageHeight = document.documentElement.scrollHeight,
         atbottom = (scrollPosition >= pageHeight);
 
     if (!atbottom) return;
 
-    window.electronAPI.getnewposts();
+    // get the current div
+    const targetDiv = document.querySelector('.content.active')
+
+    switch (targetDiv.id) {
+        case 'posts': window.electronAPI.getnewposts();
+            break;
+        case 'replies': window.electronAPI.getReplies()
+            break;
+        case 'likes': window.electronAPI.getnewlikes();
+            break;
+        case 'media':
+            window.electronAPI.getnewmedia();
+            break;
+
+        default: console.log(`unknown scroll div ID ${targetDiv.id}`);
+    }
 }
 
 // function to toggle the active section
@@ -24,16 +39,55 @@ function showSection(sectionId) {
     // show the selected section and activate the button
     document.getElementById(sectionId).classList.add('active');
     document.getElementById(sectionId + 'Btn').classList.add('active');
+
+    createDropdown();
 }
 
+
+function createDropdown() {
+    document.querySelector('.dropdown')?.remove();
+
+    const activeDiv = document.querySelector('.content.active');
+    if (activeDiv.id === 'replies') return;
+
+    const dropdown = document.createElement('div');
+    dropdown.classList.add('dropdown');
+
+    const button = document.createElement('button');
+    button.classList.add('dropdown-button');
+    button.textContent = 'Layout: Compact';
+
+    const content = document.createElement('div');
+    content.classList.add('dropdown-content');
+    content.id = 'layoutDropdown';
+
+    const options = [
+        { text: 'Large', value: 'large' },
+        { text: 'Relaxed', value: 'relaxed' },
+        { text: 'Compact', value: 'compact', selected: true }
+    ];
+
+    options.forEach(({ text, value, selected }) => {
+        const link = document.createElement('a');
+        link.href = '#';
+        link.dataset.value = value;
+        link.textContent = text;
+        if (selected) link.classList.add('selected');
+        link.addEventListener('click', togglerelaxed);
+        content.appendChild(link);
+    })
+
+    dropdown.append(button, content);
+    activeDiv.prepend(dropdown);
+}
+
+
 // function to handle layout selection
 function togglerelaxed(e) {
     e.preventDefault(); // prevent the default anchor behavior
 
-    const value = e.target.getAttribute('data-value');
+    const container = document.querySelector('.content.active [class*="cards-container"]'),
-    const container = document.querySelector(`#${sessionStorage.getItem('currenttab') || 'cardscontainer'}`);
+        value = e.target.getAttribute('data-value');
-
-    console.log(value)
 
     if (!container) return console.warn('container not found!');
 
@@ -50,9 +104,4 @@ function togglerelaxed(e) {
     document.querySelector('.dropdown-button').textContent = `Layout: ${value.charAt(0).toUpperCase() + value.slice(1)}`;
 }
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', createDropdown);
-    // event listener for dropdown items
-    document.querySelectorAll('#layoutDropdown a').forEach(item => {
-        item.addEventListener('click', togglerelaxed);
-    });
-});

bluesky/main.js

@@ -133,6 +133,7 @@ async function getUserData(utag, allData = false) {
             output.likesCursor = likesCursor;
             output.posts = feed;
             output.postcursor = cursor;
+            output.media = await getMedia(utag);
 
             output.replies = await getReplies(utag);
         }
@@ -161,8 +162,27 @@ export const getPosts = async (utag, cursor = undefined, likesCursor = undefined
 }
 
 
+export const getLikes = async (utag, cursor = undefined) => {
+    try {
+        const did = await getDID(utag);
+        if (!did) return { err: 'DID not found!' };
+
+        const data = await agent.getActorLikes({ actor: did, cursor });
+
+        // sloppy fix, opened an issue at https://github.com/bluesky-social/atproto/issues/3087
+        if (!data.data.feed.length) delete data.data.cursor;
+        return data.data;
+    }
+    catch (err) {
+        console.error(err);
+        return null;
+    }
+}
+
+
 export const getReplies = async (utag, cursorInit, limit = 20) => {
     const did = await getDID(utag);
+
     let posts = await agent.getAuthorFeed({ actor: did, limit: limit, includePins: true, cursor: cursorInit });
     let cursor = posts.data.cursor;
     const replies = posts.data.feed.filter(o => o.reply);
@@ -181,15 +201,16 @@ export const getMedia = async (utag, cursorInit, limit = 20) => {
     const did = await getDID(utag);
     let posts = await agent.getAuthorFeed({ actor: did, limit: limit, includePins: true, cursor: cursorInit });
     let cursor = posts.data.cursor;
-    const replies = posts.data.feed.filter(o => o.reply);
+    const f = o => (o.post.embed?.images?.length || (o.post?.post?.embed?.$type === 'app.bsky.embed.video#view')),
+        data = posts.data.feed.filter(f);
 
-    while (cursor && replies.length < limit) {
+    while (cursor && data.length < limit) {
         posts = await agent.getAuthorFeed({ actor: did, limit, includePins: true, cursor });
-        replies.push(...posts.data.feed.filter(o => o.reply));
+        data.push(...posts.data.feed.filter(f));
         cursor = posts.data.cursor;
     }
 
-    return { replies, cursor };
+    return { data, cursor };
 }
 
 
@@ -225,10 +246,20 @@ export async function setupIPC() {
         clearCache();
     });
 
+    ipcMain.handle('getlikes', async (e, utag, cursor) => {
+        if (!cursor) return e.sender.send(404);
+        e.sender.send('likes', await getLikes(utag, cursor));
+    });
+
+    ipcMain.handle('getmedia', async (e, utag, cursor) => {
+        if (!cursor) return e.sender.send(404);
+        e.sender.send('media', await getMedia(utag, cursor));
+    });
+
     ipcMain.handle('get-connections', getConnections);
 
     ipcMain.handle('gethistory', (e, limit, offset) => e.sender.send('history', JSON.stringify(getHistory(limit, offset))));
-    ipcMain.handle('getreplies', async (e, limit, offset) => e.sender.send('replies', JSON.stringify(await getReplies(limit, offset))));
+    ipcMain.handle('getreplies', async (e, cursor, utag, limit = 20) => e.sender.send('replies', JSON.stringify(await getReplies(utag, cursor, limit))));
     ipcMain.handle('getvideo', async (e, oldurl) => {
         const newURL = await convertAndServe(`${crypto.randomUUID()}.mp4`, oldurl);
         e.sender.send('video', oldurl, newURL);

src/user_page_preload.cjs

@@ -2,7 +2,6 @@ const { contextBridge, ipcRenderer } = require('electron');
 const { populateProfile, Profile } = require('../JS/Profile.cjs');
 const renderPosts = require('../JS/posts.cjs');
 const renderReplies = require('../JS/replies.cjs');
-const renderLikes = require('../JS/likes.cjs');
 const { displayUploadStatus, renderCompose } = require('../JS/compose.cjs');
 
 async function handleFileDialogue(e) {
@@ -35,6 +34,15 @@ async function handleFileDialogue(e) {
     }
 }
 
+const appendEOF = (divid) => {
+    if (document.getElementById(divid)?.querySelector('.eof')) return;
+    else {
+        const d = document.createElement('div');
+        d.className = 'eof';
+        d.innerHTML = '<h2>Reached end of feed!</h2>';
+        document.getElementById(divid)?.appendChild(d);
+    }
+}
 
 
 window.addEventListener('DOMContentLoaded', () => {
@@ -52,7 +60,11 @@ window.addEventListener('DOMContentLoaded', () => {
 
         console.log(data);
         if (data.postcursor) sessionStorage.setItem('postcursor', data.postcursor);
-        if (data.likesCursor) sessionStorage.setItem('likescursor', data.likesCursor);
+        if (data.likesCursor) {
+            sessionStorage.setItem('likescursor', data.likesCursor);
+            sessionStorage.setItem('likesfeedcursor', data.likesCursor);
+        }
+        if (data.media.cursor) sessionStorage.setItem('mediacursor', data.media.cursor);
 
         document.querySelector('#loading')?.remove();
         populateProfile(pObj);
@@ -60,6 +72,7 @@ window.addEventListener('DOMContentLoaded', () => {
         if (data.posts) renderPosts(data.posts, data.likes || [], pObj?.pinnedPost, ipcRenderer);
         if (data.replies) renderReplies(data.replies);
         if (data.likes) renderPosts(data.likes, data.likes, null, ipcRenderer, 'bskylikeid', 'likes');
+        if (data.media) renderPosts(data.media.data, data.likes, null, ipcRenderer, 'bskymediaid', 'media');
     });
 
     contextBridge.exposeInMainWorld('electronAPI', {
@@ -68,29 +81,25 @@ window.addEventListener('DOMContentLoaded', () => {
                 likescursor = sessionStorage.getItem('likescursor');
 
             if (cursor) ipcRenderer.invoke('getposts', utag, cursor, likescursor);
-            else if (document.querySelector('#eof')) return;
+            else appendEOF('posts');
-            else {
-                const d = document.createElement('div');
-                d.id = 'eof';
-                d.innerHTML = '<h2>Reached end of feed!</h2>';
-                document.querySelector('#posts')?.appendChild(d);
-            }
         },
         getnewlikes: () => {
-            return alert("TODO (check TODO.txt)");
+            const cursor = sessionStorage.getItem('likesfeedcursor');
-            const cursor = sessionStorage.getItem('postcursor');
 
-            if (cursor) ipcRenderer.invoke('getposts', utag, cursor, likescursor);
+            if (cursor) ipcRenderer.invoke('getlikes', utag, cursor);
-            else if (document.querySelector('#eof')) return;
+            else appendEOF('likes');
-            else {
-                const d = document.createElement('div');
-                d.id = 'eof';
-                d.innerHTML = '<h2>Reached end of feed!</h2>';
-                document.querySelector('#posts')?.appendChild(d);
-            }
         },
         getHistory: (cursor = undefined) => ipcRenderer.invoke('gethistory', cursor),
-        getReplies: (cursor = undefined) => ipcRenderer.invoke('getreplies', cursor),
+        getReplies: (utag) => {
+            const cursor = sessionStorage.getItem('repliescursor');
+            if (cursor) ipcRenderer.invoke('getreplies', cursor, utag);
+            else appendEOF('replies');
+        },
+        getnewmedia: (utag) => {
+            const cursor = sessionStorage.getItem('mediacursor');
+            if (cursor) ipcRenderer.invoke('getmedia', cursor, utag);
+            else appendEOF('media');
+        },
         getVideo: (src) => ipcRenderer.invoke('getvideo', src),
     });
 
@@ -112,6 +121,23 @@ window.addEventListener('DOMContentLoaded', () => {
         else sessionStorage.removeItem('postcursor');
     });
 
+    ipcRenderer.on('likes', (e, data) => {
+        // reset all videos because the cache was cleared
+        document.querySelectorAll('.post-card video').forEach(video => {
+            video.src = '../assets/video-loading.mp4';
+            video.pause();
+            video.currentTime = 0;
+        });
+
+        if (data.err) return alert(data.err);
+
+        console.log(data);
+        renderPosts(data.feed, data.feed, null, ipcRenderer, 'bskylikeid', 'likes');
+
+        if (data.cursor) sessionStorage.setItem('likesfeedcursor', data.cursor);
+        else sessionStorage.removeItem('likesfeedcursor');
+    });
+
     ipcRenderer.on('history', (e, data) => {
         const hist = JSON.parse(data);
         console.log(hist);