wip

src/db.ts

@@ -0,0 +1,166 @@
+// interface MyJsonObject {
+//   id: string;
+//   name: string;
+//   email: string;
+// }
+
+const dbName: string = "ddln";
+const storeNameBase: string = "posts";
+let keyBase = "dandelion_posts_v1_"
+let key = "";
+
+
+interface IDBRequestEvent<T = any> extends Event {
+    target: IDBRequest<T>;
+}
+
+// IndexedDB uses DOMException, so let's use it for error typing
+type DBError = Event & {
+    target: { errorCode: DOMException };
+};
+
+export function openDatabase(userID:string): Promise<IDBDatabase> {
+    const storeName = `${storeNameBase}_${userID}`;
+
+    return new Promise((resolve, reject) => {
+        const request: IDBOpenDBRequest = indexedDB.open(dbName, 1);
+
+        request.onerror = (event: Event) => {
+            // Use a type assertion to access the specific properties of IDBRequest error event
+            const errorEvent = event as IDBRequestEvent;
+            reject(`Database error: ${errorEvent.target.error?.message}`);
+        };
+
+        request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
+            const db: IDBDatabase = (event.target as IDBOpenDBRequest).result;
+            if (!db.objectStoreNames.contains(storeName)) {
+                db.createObjectStore(storeName, { keyPath: "id", autoIncrement: true });
+            }
+        };
+
+        request.onsuccess = (event: Event) => {
+            const db: IDBDatabase = (event.target as IDBOpenDBRequest).result;
+            resolve(db);
+        };
+    });
+}
+
+
+
+export async function addData(userID: string, data: any): Promise<void> {
+    try {
+        const storeName = `${storeNameBase}_${userID}`;
+        const db = await openDatabase(userID);
+        const transaction = db.transaction(storeName, "readwrite");
+        const store = transaction.objectStore(storeName);
+
+        const addRequest = store.add(data);
+
+        addRequest.onsuccess = (e: Event) => {
+            // console.log('Data has been added:', (e.target as IDBRequest).result);
+        };
+
+        addRequest.onerror = (event: Event) => {
+            // Use a type assertion to access the specific properties of IDBRequest error event
+            const errorEvent = event as IDBRequestEvent;
+            console.error('Error in adding data:', errorEvent.target.error?.message);
+        };
+    } catch (error) {
+        console.error('Error in opening database:', error);
+    }
+}
+
+export async function addDataArray(userID: string, array: any[]): Promise<void> {
+    try {
+        const storeName = `${storeNameBase}_${userID}`;
+        const db = await openDatabase(userID);
+        const transaction = db.transaction(storeName, "readwrite");
+        const store = transaction.objectStore(storeName);
+
+        let count = 0;
+        for (let data of array) {
+            const addRequest = store.add(data);
+            addRequest.onsuccess = (e: Event) => {
+                // console.log('Data has been added:', (e.target as IDBRequest).result);
+            };
+    
+            addRequest.onerror = (event: Event) => {
+                // Use a type assertion to access the specific properties of IDBRequest error event
+                const errorEvent = event as IDBRequestEvent;
+                console.error('Error in adding data:', errorEvent.target.error?.message);
+            };
+
+            count++;
+
+            if (count % 100 === 0) {
+                console.log(`Added ${count} posts...`);
+            }
+        }
+
+       
+    } catch (error) {
+        console.error('Error in opening database:', error);
+    }
+}
+
+export async function getData(userID:string, lowerID:number, upperID:number): Promise<any | undefined> {
+    const storeName = `${storeNameBase}_${userID}`;
+    const db = await openDatabase(userID);
+    const transaction = db.transaction(storeName, "readonly");
+    const store = transaction.objectStore(storeName);
+
+    return new Promise((resolve, reject) => {
+        const keyRangeValue = IDBKeyRange.bound(lowerID, upperID);
+
+        const records: any[] = [];
+
+        const cursorRequest = store.openCursor(keyRangeValue);
+
+        cursorRequest.onsuccess = (event: Event) => {
+            const cursor = (event.target as IDBRequest).result as IDBCursorWithValue;
+            if (cursor) {
+                records.push(cursor.value); // Collect the record
+                cursor.continue(); // Move to the next item in the range
+            } else {
+                // No more entries in the range
+                resolve(records);
+            }
+        };
+
+        cursorRequest.onerror = (event: Event) => {
+            // Use a type assertion to access the specific properties of IDBRequest error event
+            const errorEvent = event as IDBRequestEvent;
+            console.error('Transaction failed:', errorEvent.target.error?.message);
+            reject(errorEvent.target.error); // Reject the promise if there's an error
+        };
+    });
+}
+
+export async function getAllData(userID:string): Promise<any | undefined> {
+    const storeName = `${storeNameBase}_${userID}`;
+    const db = await openDatabase(userID);
+    const transaction = db.transaction(storeName, "readonly");
+    const store = transaction.objectStore(storeName);
+
+    return new Promise((resolve, reject) => {
+        const getRequest = store.getAll();
+
+        getRequest.onsuccess = () => {
+            if (getRequest.result) {
+                //   console.log('Retrieved data:', getRequest.result.jsonData);
+                // resolve(getRequest.result.jsonData as any);
+                resolve(getRequest.result);
+            } else {
+                console.log('No data record found for key', key);
+                resolve(undefined); // explicitly resolve with undefined when no data is found
+            }
+        };
+
+        getRequest.onerror = (event: Event) => {
+            // Use a type assertion to access the specific properties of IDBRequest error event
+            const errorEvent = event as IDBRequestEvent;
+            console.error('Transaction failed:', errorEvent.target.error?.message);
+            reject(errorEvent.target.error); // reject the promise if there's an error
+        };
+    });
+}

src/main.ts

@@ -0,0 +1,447 @@
+import { openDatabase, getData, addData, addDataArray, getAllData } from "./db.js"
+
+// let posts:any;
+// let keyBase = "dandelion_posts_v1_"
+// let key:string = "";
+
+interface PostTimestamp {
+  year: number,
+  month: number,
+  day: number,
+  hour: number,
+  minute: number,
+  second: number,
+}
+
+class Post {
+  constructor(author: string, text: string, post_timestamp: PostTimestamp, format = null) {
+    post_timestamp = post_timestamp;
+    author = author;
+    text = text;
+    format = format;
+  }
+}
+
+
+
+function uuidv4() {
+  return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c: any) =>
+    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+  );
+}
+
+let logLines: string[] = [];
+let logLength = 10;
+function log(message: string) {
+  logLines.push(`${message}`);
+  if (logLines.length > 10) {
+    logLines = logLines.slice(logLines.length - logLength);
+  }
+  let log = document.getElementById("log");
+  if (!log) {
+    throw new Error();
+  }
+  log.innerText = logLines.join("\n");
+}
+
+function arrayBufferToBase64(buffer: ArrayBuffer) {
+  return new Promise((resolve, reject) => {
+    const blob = new Blob([buffer], { type: 'application/octet-stream' });
+    const reader = new FileReader();
+
+    reader.onloadend = () => {
+      const dataUrl = reader.result as string;
+      if (!dataUrl) {
+        resolve(null);
+        return;
+      }
+      const base64 = dataUrl.split(',')[1];
+      resolve(base64);
+    };
+
+    reader.onerror = (error) => {
+      reject(error);
+    };
+
+    reader.readAsDataURL(blob);
+  });
+}
+
+async function createTestData() {
+  let postsTestData = await (await fetch("./postsTestData.json")).json();
+
+  return postsTestData;
+}
+
+let time = 0;
+
+function timerStart() {
+  time = performance.now();
+}
+
+function timerDelta() {
+  return performance.now() - time;
+}
+
+async function createTestData2() {
+  let postsTestData: any[] = [];
+
+  let response = await fetch("./tweets.js");
+  let tweetsText = await response.text();
+  tweetsText = tweetsText.replace("window.YTD.tweets.part0", "window.tweetData");
+
+  new Function(tweetsText)();
+
+
+  // let tweets = JSON.parse(tweetJSON);
+
+  for (let entry of (window as any).tweetData) {
+    // if (entry.tweet.hasOwnProperty("in_reply_to_screen_name") || entry.tweet.retweeted || entry.tweet.full_text.startsWith("RT")) {
+    //   continue;
+    // }
+
+    let mediaURL: string = entry.tweet?.entities?.media?.[0]?.media_url;
+    let isImage = false;
+    if (mediaURL) {
+      isImage = mediaURL.includes('jpg');
+    }
+
+    let imageData;
+    let encodedImage = null;
+    if (isImage) {
+      try {
+        imageData = await (await fetch(mediaURL)).arrayBuffer();
+        encodedImage = await arrayBufferToBase64(imageData);
+      } catch (e) {
+        console.log(e);
+      }
+
+    }
+
+
+    postsTestData.push({
+      post_timestamp: {
+        year: 2023,
+        month: 10,
+        day: 19,
+        hour: 14,
+        minute: 53,
+        second: 0,
+      },
+      author: `bobbydigitales`,
+      text: entry.tweet.full_text,
+      image: encodedImage
+    });
+  }
+
+  let rant = await (await fetch('ranting.md')).text();;
+
+  postsTestData.unshift({
+    post_timestamp: {
+      year: 2023,
+      month: 10,
+      day: 19,
+      hour: 14,
+      minute: 53,
+      second: 0,
+    },
+    author: `bobbydigitales`,
+    text: rant
+  })
+
+  return postsTestData;
+}
+
+async function createTestData3(userID: string) {
+  let posts = await (await (fetch('./posts.json'))).json();
+
+  return posts;
+}
+
+function post(key: string, posts: { author: any; text: any; image: any; }[], author: any, text: any, image: any) {
+  posts.push({ author: author, text: text, image: image });
+  localStorage.setItem(key, JSON.stringify(posts));
+}
+
+async function registerServiceWorker() {
+  if (!("serviceWorker" in navigator)) {
+    return;
+  }
+
+  let registrations = await navigator.serviceWorker.getRegistrations();
+  if (registrations.length > 0) {
+    console.log("Service worker already registered.");
+    return registrations[0];
+  }
+
+  navigator.serviceWorker
+    .register("/sw.js")
+    .then((registration) => {
+      console.log("Service Worker registered with scope:", registration.scope);
+      return registration;
+    })
+    .catch((error) => {
+      console.error("Service Worker registration failed:", error);
+    });
+}
+
+function addPost(userID: string, posts: Post[], postText: string) {
+  let post: Post = {
+    author: `bobbydigitales`,
+    text: postText,
+  };
+
+
+  posts.unshift(post);
+  // localStorage.setItem(key, JSON.stringify(posts));
+  addData(userID, post)
+
+  render(posts);
+}
+
+function generateID() {
+  if (self.crypto.hasOwnProperty("randomUUID")) {
+    return self.crypto.randomUUID();
+  }
+
+  return uuidv4();
+}
+
+function getUserID() {
+  let id = localStorage.getItem("dandelion_id");
+
+  if (!id) {
+    id = generateID();
+    localStorage.setItem("dandelion_id", id);
+  }
+
+  return id;
+}
+
+function connectWebsocket(userID: string) {
+  let websocket = new WebSocket(`ws://${window.location.hostname}:${window.location.port}/ws`);
+
+  websocket.onopen = function (evt) {
+    console.log("CONNECTED");
+    websocket.send(`{"messageType":"connect", "id": "${userID}"}`);
+  };
+
+  websocket.onclose = function (evt) {
+    console.log("DISCONNECTED");
+  };
+
+  websocket.onmessage = function (evt) {
+    console.log('RESPONSE: ' + evt.data);
+  };
+
+  websocket.onerror = function (evt) {
+    console.log('ERROR: ' + evt);
+  };
+
+  return websocket;
+}
+
+function setFont(fontName: string) {
+
+  document.body.style.fontFamily = fontName;
+  let textArea = document.getElementById('textarea_post');
+  if (!textArea) {
+    return;
+  }
+
+  textArea.style.fontFamily = fontName;
+}
+
+function initOffline() {
+  // Event listener for going offline
+  window.addEventListener('offline', () => { log("offline") });
+
+  // Event listener for going online
+  window.addEventListener('online', () => { log("online") });
+
+  log(`${navigator.onLine ? "online" : "offline"}`)
+
+}
+
+function initButtons(userID: string, posts: Post[]) {
+  let font1Button = document.getElementById("button_font1") as HTMLButtonElement;
+  let font2Button = document.getElementById("button_font2") as HTMLButtonElement;
+
+  font1Button.addEventListener('click', () => { setFont('Bookerly'); });
+  font2Button.addEventListener('click', () => { setFont('Virgil') });
+
+
+  let postButton = document.getElementById("button_post") as HTMLButtonElement;
+  let postText = document.getElementById("textarea_post") as HTMLTextAreaElement;
+
+  if (!(postButton && postText)) {
+    throw new Error();
+  }
+
+  postButton.addEventListener("click", () => {
+    addPost(userID, posts, postText.value);
+    postText.value = "";
+  });
+
+}
+
+async function loadPosts(userID: string) {
+ 
+  timerStart();
+  let posts = await getData(userID, 1, 500);
+  
+  if (posts.length > 0) {
+    log(`Loaded ${posts.length} posts in ${timerDelta().toFixed(2)}ms`);
+    return posts;
+  }
+
+  posts = await createTestData3(userID);
+  
+  log("Adding test data...");
+  addDataArray(userID, posts);
+
+  // let count = 0;
+  // for (let post of posts) {
+  //   debugger;
+  //   await addData(userID, post);
+  //   count++;
+  //   if (count % 100 === 0) {
+  //     log(`Added ${count} posts...`);
+  //   }
+  // }
+  // log("Finished!");
+
+
+  return await getData(userID, 1, 100);
+  
+
+  // debugger;
+
+  // let postsJSON = await getData(userID)
+
+  // if (!postsJSON) {
+  //   let testPosts = await createTestData3(userID);
+  //   for (let post of testPosts) {
+  //     await addData(userID, post);
+  //   }
+  //   // localStorage.setItem(key, postsJSON);
+  // }
+
+  // let delta = timerDelta();
+  // if (postsJSON) {
+  //   log(`read ${(postsJSON.length / 1024 / 1024).toFixed(2)}Mb from indexedDB in ${delta.toFixed(2)}ms`);
+  // }
+
+  // let posts = [];
+  // try {
+  //   timerStart();
+  //   posts = JSON.parse(postsJSON);
+  //   delta = timerDelta();
+  //   log(`parsed ${posts.length} posts from indexedDB in ${delta.toFixed(2)}ms`);
+  // } catch (e) {
+  //   log("Couldn't read posts from local storage, resetting...");
+  // }
+
+  // if (!posts) {
+  //   await createTestData3();
+  //   // localStorage.setItem(key, JSON.stringify(testData));
+  //   posts = testData;
+  // }
+
+  // return posts;
+}
+
+async function main() {
+  let posts: Post[] = [];
+  let time = 0; ``
+  let delta = 0;
+
+  let urlParams = (new URL(window.location.href)).searchParams;
+
+  if (urlParams.get("sw") === "true") {
+    let registration = await registerServiceWorker();
+  }
+
+  let userID = getUserID();
+
+
+  log(`Your user ID is: ${userID}`);
+
+  if (navigator.storage && navigator.storage.persist && !navigator.storage.persisted) {
+    const isPersisted = await navigator.storage.persist();
+    console.log(`Persisted storage granted: ${isPersisted}`);
+  }
+
+  let websocket = connectWebsocket(userID);
+  initOffline();
+  initButtons(userID, posts);
+
+  // let main = await fetch("/main.js");
+  // let code = await main.text();
+  //   console.log(code);
+  //   registration.active.postMessage({type:"updateMain", code:code});
+
+  posts = await loadPosts(userID);
+  // debugger;
+
+  timerStart();
+  render(posts);
+  let renderTime = timerDelta();
+
+  log(`render took: ${renderTime.toFixed(2)}ms`);
+
+  log(`memory used: ${((performance as any).memory.usedJSHeapSize / 1024 / 1024).toFixed(2)}Mb`)
+}
+
+function render(posts: Post[]) {
+  const fragment = document.createDocumentFragment();
+  let contentDiv = document.getElementById("content");
+  if (!contentDiv) {
+    throw new Error();
+  }
+  contentDiv.innerHTML = "";
+  let count = 0;
+  for (const postData of posts) {
+    let post = renderPost(postData);
+
+    fragment.appendChild(post);
+
+    count++;
+    if (count > 500) {
+      break;
+    }
+  }
+
+  if (!contentDiv) {
+    throw new Error("Couldn't get content div!");
+  }
+
+  contentDiv.appendChild(fragment);
+
+}
+
+function renderPost(post: Post) {
+  if (!(post.hasOwnProperty("text"))) {
+    throw new Error("Post is malformed!");
+  }
+  let containerDiv = document.createElement("div");
+  let textDiv = document.createElement("div");
+  let hr = document.createElement("hr");
+
+  // @ts-ignore
+  textDiv.innerHTML = marked.parse(post.text);
+  containerDiv.appendChild(hr);
+  containerDiv.appendChild(textDiv);
+
+  if (!("image" in post && post.image)) {
+    return containerDiv;
+  }
+
+  let image = document.createElement("img");
+  image.src = image.src = "data:image/png;base64," + post.image;
+
+  containerDiv.appendChild(image);
+  return containerDiv;
+}
+
+window.addEventListener("load", main);

src/sw.ts

@@ -0,0 +1,72 @@
+// Establish a cache name
+const cacheName = "dandelion_cache_v1";
+
+const contentToCache = [
+"/index.html",
+"/main.js",
+"/marked.min.js",
+"/db.js",
+"/bookerly.woff2",
+"/virgil.woff2",
+"/favicon.ico"
+];
+
+self.addEventListener("install", (e:any) => {
+  e.waitUntil(
+    (async () => {
+      const cache = await caches.open(cacheName);
+      console.log(
+        "[Service Worker] Caching all: app shell and content",
+        contentToCache
+      );
+      await cache.addAll(contentToCache);
+    })()
+  );
+});
+
+self.addEventListener("fetch", (e:any) => {
+  e.respondWith(
+    (async () => {
+      const r = await caches.match(e.request);
+      if (r) {
+        console.log(
+          `[Service Worker] Cache hit for resource: ${e.request.url}`
+        );
+        return r;
+      }
+
+      let response;
+      try {
+        console.log(
+          `[Service Worker] Cache miss, attempting to fetch resource: ${e.request.url}`
+        );
+
+        response = await fetch(e.request);
+      } catch (e) {
+        console.warn(e);
+      }
+      const cache = await caches.open(cacheName);
+      console.log(
+        `[Service Worker] Adding resource to cache: ${e.request.url}`
+      );
+
+      if (!response) {
+        throw new Error(`Failed to fetch resource: ${e.request.url}`)
+      }
+      cache.put(e.request, response.clone());
+      return response;
+    })()
+  );
+});
+
+addEventListener("message", async (e) => {
+  console.log(`Message received: ${e.data}`);
+
+  switch (e.data.type) {
+    case "updateMain":
+      const cache = await caches.open(cacheName);
+      console.log(`[Service Worker] Caching new resource: main.js`);
+      cache.put("/main.js", new Response());
+      break;
+  }
+});