From 2d75697f99452af9a3adca5f4b1c55525857baa9 Mon Sep 17 00:00:00 2001 From: miggymofongo Date: Sun, 5 Jan 2025 21:15:54 -0400 Subject: [PATCH] refactored a bit, updated readme --- README.md | 25 +++++---- src/pages/app-write/app-write.ts | 11 +++- src/pages/note-wall.ts | 89 ++++++-------------------------- src/styles/shared-styles.ts | 44 ++++++++-------- 4 files changed, 61 insertions(+), 108 deletions(-) diff --git a/README.md b/README.md index 1077865..bb5c5f7 100644 --- a/README.md +++ b/README.md @@ -2,19 +2,20 @@

Aren't you tired of distracting social media platforms? -So many buttons and advertising makes a simple task of sending notes ot your -friends very draining. This is a simple WYSIWYM style rich text editor -built with ProseMirror

+So many buttons and advertising makes a simple task of reading +and writing notes to your community very draining. You can use +a next generation social media protocol to transform +your personal website into a micro social media client. + +Use a like ProseMirror, + 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. +

-

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.

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 -and short text notes.

+protocol to fetch kinds 0, 1, and 30023 notes from a personal relay and display then (profile metadata, short text, and long form notes.)

@@ -29,7 +30,9 @@ If you're on a chromium-based browser you should be able to do the same.

diff --git a/src/pages/app-write/app-write.ts b/src/pages/app-write/app-write.ts index c11917a..2634149 100644 --- a/src/pages/app-write/app-write.ts +++ b/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() {

Basic Intructions

-

click inside the white text area to highlight with your curson. +

click inside the white text area to highlight with your cursor. You can type and press enter to insert a new block below.
- Highlight a piece of text, then CTRL+X to cut and CTRL+V to paste.

+ Highlight a piece of text, then CTRL+X to cut and CTRL+V to paste.
+ 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.

diff --git a/src/pages/note-wall.ts b/src/pages/note-wall.ts index 748cb1e..f9d8ef7 100644 --- a/src/pages/note-wall.ts +++ b/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 migsRelay = await Relay.connect('wss://notes.miguelalmodo.com'); - console.log(`connected to ${ifcaRelay.url}`); + // const ifcaRelay = await Relay.connect('wss://hi.myvoiceourstory.org'); + const migsRelay = await Relay.connect('wss://notes.miguelalmodo.com'); + console.log(`connected to ${migsRelay.url}`); // console.log(`connected to ${migsRelay.url}`); - - const sub = ifcaRelay.subscribe([ + const sub = migsRelay.subscribe([ { - kinds: [1], // short form notes - limit: 20, + kinds: [30023], // short and long form notes + 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() {
-
+

Recent Notes from IFCA

@@ -237,7 +182,7 @@ async fetchNotes() { - +
${this.notes.map(note => { // extract URL from note content const urlMatch = note.content.match(/https?:\/\/[^\s]+/); @@ -267,14 +212,12 @@ async fetchNotes() { : imgMatch ? html`Note image` : ''} - - `; })}
- +