refactored a bit, updated readme

README.md

@@ -2,19 +2,20 @@
 
 <p>
 Aren't you tired of distracting social media platforms?
-So many buttons and advertising makes a simple task of sending notes ot your
+So many buttons and advertising makes a simple task of reading
-friends very draining. This is a simple WYSIWYM style rich text editor
+and writing notes to your community very draining. You can use
-built with <a href="https://prosemirror.net/">ProseMirror</a> </p>
+a next generation social media protocol to transform
+your personal website into a micro social media client.
+
+Use a like <a href="https://prosemirror.net/">ProseMirror</a>,
+ to build a WYSIWYM style rich text editor for visitors
+to compose notes with. They can then post it to a set of
+programmed relays.
+ </p>
 
-<p> You can use a next generation social media protocol to transform
-your personal website into a micro blog client. Using WYSIWYG style
-editor builders like ProseMirror, you can render a simple rich
-text editor for visitors to compose	notes with. You can type
-out a note and post it to a set of relays. </p>
 
 <p>This is an installable personal website that is accessible through chrome-based and firefox browsers. The website is built with PWA Builder and Lit Web Components. It utilizes the Nostr
-protocol to connect to my personal relay for fetching kind 0 and 1 notes AKA profile metadata
+protocol to fetch kinds 0, 1, and 30023 notes from a personal relay and display then (profile metadata, short text, and long form notes.) </p>
-and short text notes.</p>
 
 
 
@@ -29,7 +30,9 @@ If you're on a chromium-based browser you should be able to do the same.</p>
 
 <ul>
 <li>refactor</li>
-<li>dropdown menu a la Medium</li>
+<li>dropdown menu a la Medium</li>'
+<li>long form blog view</li>
+
 
 </ul>
 

src/pages/app-write/app-write.ts

@@ -11,6 +11,8 @@ import {EditorState} from 'prosemirror-state'
 import { Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { Schema } from 'prosemirror-model';
+
+
 import { keymap } from 'prosemirror-keymap';
 import { toggleMark } from 'prosemirror-commands';
 import {undo, redo, history} from 'prosemirror-history'
@@ -204,6 +206,8 @@ private initializeEditor() {
 			}
 		});
 		this.editorView = view;
+		console.log(state.plugins);
+
 		console.log('editor initialized')
 
 	}
@@ -240,10 +244,13 @@ private initializeEditor() {
 
 
 			<h3>Basic Intructions</h3>
-			<p>click inside the white text area to highlight with your curson.
+			<p>click inside the white text area to highlight with your cursor.
 			You can type and press enter to insert a new block below.
 			<br>
-			Highlight a piece of text, then CTRL+X to cut and CTRL+V to paste.</p>
+			Highlight a piece of text, then CTRL+X to cut and CTRL+V to paste.<br>
+			Press Ctrl+Space to add a yellow star to the document. Press
+			Ctrl+B over a highlighted selection to add the "shouting" mark, making
+			it all caps and red.</p>
 
 </sl-card>
 <sl-card>

src/pages/note-wall.ts

@@ -21,60 +21,6 @@ export class NoteWall extends LitElement {
     styles,
     css`
 
-    #welcomeBar {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-    }
-
-    #welcomeCard,
-    #infoCard {
-      padding: 18px;
-      padding-top: 0px;
-    }
-
-    sl-card::part(footer) {
-      display: flex;
-      justify-content: flex-end;
-    }
-
-    @media(min-width: 750px) {
-      sl-card {
-        width: 70vw;
-      }
-    }
-
-
-    @media (horizontal-viewport-segments: 2) {
-      #welcomeBar {
-        flex-direction: row;
-        align-items: flex-start;
-        justify-content: space-between;
-      }
-
-      #welcomeCard {
-        margin-right: 64px;
-      }
-    }
-
-    @media(min-width: 750px) {
-      sl-card {
-        width: 70vw;
-      }
-    }
-
-
-    @media (horizontal-viewport-segments: 2) {
-      #welcomeBar {
-        flex-direction: row;
-        align-items: flex-start;
-        justify-content: space-between;
-      }
-
-
-    }
-
 .comment-wall .main-section-header {
   margin-bottom: 3px;
 }
@@ -92,10 +38,11 @@ export class NoteWall extends LitElement {
 .comment-wall table {
   margin: auto;
   margin-bottom: 5px;
+  color: black;
 }
 
+
 .comment-wall th {
-  background-color: rgb(255, 153, 51);
   width: 158px;
   padding: 3px;
   vertical-align: top;
@@ -103,7 +50,6 @@ export class NoteWall extends LitElement {
 
 .comment-wall td {
   vertical-align: top;
-  background-color: rgb(249, 214, 180);
   width: 269px;
   padding: 3px;
 }
@@ -124,12 +70,12 @@ export class NoteWall extends LitElement {
 .comment-wall h3 {
   font-size: 10pt;
   margin: 0;
-  margin-bottom: 1em;
+  margin-bottom: 3em;
 }
 
 .comment-wall p {
   font-weight: normal;
-  text-align: left;
+  text-align: center;
   margin: 0;
 }
 
@@ -181,15 +127,14 @@ export class NoteWall extends LitElement {
 
 
 async fetchNotes() {
-  const ifcaRelay = await Relay.connect('wss://hi.myvoiceourstory.org');
+ // const ifcaRelay = await Relay.connect('wss://hi.myvoiceourstory.org');
-  // const migsRelay = await Relay.connect('wss://notes.miguelalmodo.com');
+  const migsRelay = await Relay.connect('wss://notes.miguelalmodo.com');
-  console.log(`connected to ${ifcaRelay.url}`);
+  console.log(`connected to ${migsRelay.url}`);
   // console.log(`connected to ${migsRelay.url}`);
-
+  const sub = migsRelay.subscribe([
-  const sub = ifcaRelay.subscribe([
     {
-      kinds: [1], // short form notes
+      kinds: [30023], // short and long form notes
-      limit: 20,
+      limit: 10,
     }
   ], {
     onevent: async (event) => {
@@ -199,20 +144,20 @@ async fetchNotes() {
         date: new Date(event.created_at * 1000).toLocaleDateString(),
       }];
       this.requestUpdate();
+      console.log(migsRelay)
+
     },
     oneose: () => {
       sub.close();
       this.requestUpdate();
     },
   });
+
 }
 
 
 
 
-
-
-
   share() {
     if ((navigator as any).share) {
       (navigator as any).share({
@@ -228,7 +173,7 @@ async fetchNotes() {
       <app-header ?enableBack="${true}"></app-header>
       <main> <div id="welcomeBar">
 <sl-card id="WelcomeCard">
-    <section class=""comment-wall>
+    <section>
 
     <header class="main-section-header">
             <h2 class="main-section-h2">Recent Notes from IFCA</h2>
@@ -237,7 +182,7 @@ async fetchNotes() {
 
 
 
-   <table>
+   <table class="comment-wall">
   ${this.notes.map(note => {
     // extract URL from note content
     const urlMatch = note.content.match(/https?:\/\/[^\s]+/);
@@ -267,14 +212,12 @@ async fetchNotes() {
             : imgMatch
               ? html`<img src="${imgMatch}" alt="Note image" style="max-width: 30%; height: 30%;">`
               : ''}
-
-
         </td>
       </tr>
     `;
   })}
 </table>
-
+<div class="comment-wall"
 
 
 

src/styles/shared-styles.ts

@@ -427,6 +427,25 @@ export const styles = css`
       }
     }
 
+     @media (horizontal-viewport-segments: 2) {
+      #welcomeBar {
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: space-between;
+      }
+
+
+
+
+    @media (horizontal-viewport-segments: 2) {
+      #welcomeBar {
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: space-between;
+      }
+
+
+    }
     .boring {
     background: grey;
     }
@@ -445,26 +464,7 @@ export const styles = css`
   background-color: #45a049;
 }
 
-/* Add these styles to your component's CSS */
+.ProseMirror-textblock-dropdown {
-.dropdown-menu {
+  min-width: 3em;
-  background-color: white;
-  border: 1px solid #ccc;
-  padding: 10px;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
-
+}`
-.dropdown-menu button {
-  background-color: white;
-  border: 1px solid #ccc;
-  padding: 5px;
-  border-radius: 4px;
-  margin-bottom: 5px;
-  cursor: pointer;
-}
-
-.dropdown-menu button:hover {
-  background-color: #f0f0f0;
-}
-
-`;