this repo has no description
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: Add initial app file

+151
+151
app.js
··· 1 + import { AtpAgent } from "@atproto/api"; 2 + 3 + // Main application code 4 + let currentCursor = null; 5 + const recordsContainer = document.getElementById("recordsContainer"); 6 + const loadMoreButton = document.getElementById("loadMoreButton"); 7 + const loadButton = document.getElementById("loadButton"); 8 + const repoInput = document.getElementById("repoInput"); 9 + 10 + // Initialize the AT Protocol client - FIXED VERSION // lol claude wrote that 11 + const agent = new AtprotoApi.AtpAgent({ 12 + service: "https://bsky.social", 13 + }); 14 + 15 + // Event listeners 16 + loadButton.addEventListener("click", () => { 17 + const repo = repoInput.value.trim(); 18 + if (!repo) { 19 + alert("Please enter a valid repository DID or handle"); 20 + return; 21 + } 22 + 23 + // Clear previous records and reset cursor 24 + recordsContainer.innerHTML = ""; 25 + currentCursor = null; 26 + loadMoreButton.style.display = "none"; 27 + 28 + // Load the first batch of records 29 + loadRecords(repo); 30 + }); 31 + 32 + loadMoreButton.addEventListener("click", () => { 33 + loadRecords(repoInput.value.trim()); 34 + }); 35 + 36 + // Function to load records from the repository 37 + async function loadRecords(repo) { 38 + try { 39 + loadButton.disabled = true; 40 + loadMoreButton.disabled = true; 41 + loadMoreButton.textContent = "Loading..."; 42 + 43 + // Call the AT Protocol API to list records 44 + const response = await agent.com.atproto.repo.listRecords({ 45 + repo: repo, 46 + collection: "me.comind.blip.thought", 47 + limit: 10, 48 + cursor: currentCursor, 49 + }); 50 + 51 + // Update the cursor for pagination 52 + currentCursor = response.data.cursor; 53 + 54 + // Show or hide the "Load More" button based on cursor availability 55 + if (currentCursor) { 56 + loadMoreButton.style.display = "block"; 57 + } else { 58 + loadMoreButton.style.display = "none"; 59 + } 60 + 61 + // Render the records 62 + renderRecords(response.data.records); 63 + } catch (error) { 64 + console.error("Error loading records:", error); 65 + alert(`Error: ${error.message || "Failed to load records"}`); 66 + } finally { 67 + loadButton.disabled = false; 68 + loadMoreButton.disabled = false; 69 + loadMoreButton.textContent = "Load More"; 70 + } 71 + } 72 + 73 + // Function to render the records 74 + function renderRecords(records) { 75 + if (records.length === 0) { 76 + recordsContainer.innerHTML += 77 + '<div class="alert alert-info">No records found</div>'; 78 + return; 79 + } 80 + 81 + records.forEach((record) => { 82 + const { value } = record; 83 + const thoughtEl = document.createElement("div"); 84 + thoughtEl.className = "card thought-card p-3"; 85 + 86 + // Format the date/time 87 + const createdAt = new Date(value.createdAt); 88 + const formattedDate = createdAt.toLocaleString(); 89 + 90 + // Get the thought data 91 + const thought = value.generated; 92 + 93 + // Build the HTML 94 + thoughtEl.innerHTML = ` 95 + <div class="card-body"> 96 + <div class="d-flex justify-content-between align-items-start"> 97 + <span class="thought-type">${thought.thoughtType}</span> 98 + <small class="text-muted">${formattedDate}</small> 99 + </div> 100 + 101 + ${thought.context ? `<p class="text-muted mb-2">${thought.context}</p>` : ""} 102 + 103 + <p class="card-text">${thought.text}</p> 104 + 105 + ${ 106 + thought.evidence.length > 0 107 + ? ` 108 + <div class="mt-3"> 109 + <h6>Evidence:</h6> 110 + <div class="evidence-list"> 111 + ${thought.evidence 112 + .map( 113 + (item) => ` 114 + <div class="evidence-item">${item}</div> 115 + `, 116 + ) 117 + .join("")} 118 + </div> 119 + </div> 120 + ` 121 + : "" 122 + } 123 + 124 + ${ 125 + thought.alternatives.length > 0 126 + ? ` 127 + <div class="mt-3"> 128 + <h6>Alternative Thoughts:</h6> 129 + <div class="alternatives-list"> 130 + ${thought.alternatives 131 + .map( 132 + (item) => ` 133 + <div class="alternative-item">${item}</div> 134 + `, 135 + ) 136 + .join("")} 137 + </div> 138 + </div> 139 + ` 140 + : "" 141 + } 142 + 143 + <div class="mt-2"> 144 + <small class="text-muted">URI: ${record.uri}</small> 145 + </div> 146 + </div> 147 + `; 148 + 149 + recordsContainer.appendChild(thoughtEl); 150 + }); 151 + }