refactored a bit, updated readme
This commit is contained in:
parent
074a86b707
commit
2d75697f99
4 changed files with 61 additions and 108 deletions
25
README.md
25
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
|
||||
friends very draining. This is a simple WYSIWYM style rich text editor
|
||||
built with <a href="https://prosemirror.net/">ProseMirror</a> </p>
|
||||
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 <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
|
||||
and short text notes.</p>
|
||||
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>
|
||||
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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() {
|
|||
<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"
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
.dropdown-menu {
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
.ProseMirror-textblock-dropdown {
|
||||
min-width: 3em;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
`;
|
||||
}`
|
||||
Loading…
Reference in a new issue