more refactoring and tidying up. took out some unused libraries
This commit is contained in:
parent
2d75697f99
commit
748c70fa04
4 changed files with 40 additions and 24 deletions
|
@ -27,22 +27,23 @@ export class AppAbout extends LitElement {
|
||||||
<h3>What am I looking at?</h3>
|
<h3>What am I looking at?</h3>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
This is a micro-nostr client that can be installed to your desktop or smartphone
|
This is a personal micro-social media client that can be installed to
|
||||||
home screen. Something like this can be used as an alternative to big tech
|
your desktop or smartphone home screen. You can sign in via an extension
|
||||||
platforms that exploit your data. It pulls my profile data and notes from one
|
to display your profile data and notes from preprogrammed relays. You
|
||||||
of the relays I run.
|
can compose a letter to me using a rich text editor I built with Prosemirror.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<h3>How do I install this on my home screen?</h3>
|
||||||
|
<p>Look for "Add to Home Screen" in your browser toolbar and
|
||||||
|
to save it to your homescreen. </p>
|
||||||
|
|
||||||
<h3>What is Nostr?</h3>
|
<h3>What is Nostr?</h3>
|
||||||
<p>Nostr stands for Notes and Other Stuff Transmitted Over Relays. It's a simple open source
|
<p>Notes and Other Stuff Transmitted Over Relays is a simple open source
|
||||||
social media protocol that enables anybody to implement some basic social media functionalities
|
social media protocol that enables anybody to implement social media functionalities
|
||||||
into their websites.</p>
|
into their websites.</p>
|
||||||
|
|
||||||
<h3>How can I install this on my home screen?</h3>
|
|
||||||
<p>If you are on a PC browser, check for a download buttom inside the URL box
|
|
||||||
flushed against the right side. Click on it </p>
|
|
||||||
|
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
<h2>Technology Used</h2>
|
<h2>Technology Used</h2>
|
||||||
|
|
||||||
|
|
|
@ -204,7 +204,6 @@ Profile Picture Container
|
||||||
|
|
||||||
<p class="personal-msg"><b>${this.bio || 'Welcome, guest! Please sign in to view your profile.'}</b></p>
|
<p class="personal-msg"><b>${this.bio || 'Welcome, guest! Please sign in to view your profile.'}</b></p>
|
||||||
|
|
||||||
<p class="pics-videos">View My: <a href="#"><b>Pics</b></a> | <a href="#"><b>Videos</b></a></p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
${'share' in navigator
|
${'share' in navigator
|
||||||
|
|
|
@ -1,8 +1,6 @@
|
||||||
import { LitElement, css, html } from 'lit';
|
import { LitElement, css, html } from 'lit';
|
||||||
import { property, customElement } from 'lit/decorators.js';
|
import { property, customElement } from 'lit/decorators.js';
|
||||||
import { resolveRouterPath } from '../router';
|
|
||||||
import { Relay } from 'nostr-tools';
|
import { Relay } from 'nostr-tools';
|
||||||
import axios from 'axios';
|
|
||||||
|
|
||||||
import '@shoelace-style/shoelace/dist/components/card/card.js';
|
import '@shoelace-style/shoelace/dist/components/card/card.js';
|
||||||
import '@shoelace-style/shoelace/dist/components/button/button.js';
|
import '@shoelace-style/shoelace/dist/components/button/button.js';
|
||||||
|
@ -10,12 +8,16 @@ import '@shoelace-style/shoelace/dist/components/button/button.js';
|
||||||
import { styles } from '../styles/shared-styles';
|
import { styles } from '../styles/shared-styles';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@customElement('note-wall')
|
@customElement('note-wall')
|
||||||
export class NoteWall extends LitElement {
|
export class NoteWall extends LitElement {
|
||||||
|
|
||||||
@property({ type: Array }) notes: { content: string; date: string }[] = [];
|
@property({ type: Array }) notes: { content: string; date: string }[] = [];
|
||||||
|
@property({ type: String }) relayName: string = '';
|
||||||
|
|
||||||
|
|
||||||
|
note = ''; // store notes
|
||||||
|
|
||||||
static styles = [
|
static styles = [
|
||||||
styles,
|
styles,
|
||||||
|
@ -88,10 +90,12 @@ export class NoteWall extends LitElement {
|
||||||
|
|
||||||
`];
|
`];
|
||||||
|
|
||||||
note = ''; // store notes
|
|
||||||
|
|
||||||
getUserLang() {
|
getUserLang() {
|
||||||
|
|
||||||
return navigator.language || 'en';
|
return navigator.language || 'en';
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async firstUpdated() {
|
async firstUpdated() {
|
||||||
|
@ -106,7 +110,6 @@ export class NoteWall extends LitElement {
|
||||||
this.fetchNotes(),
|
this.fetchNotes(),
|
||||||
|
|
||||||
]);
|
]);
|
||||||
console.log('initial notes:', this.notes);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -128,13 +131,19 @@ export class NoteWall extends LitElement {
|
||||||
|
|
||||||
async fetchNotes() {
|
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 ${migsRelay.url}`);
|
console.log(`connected to ${migsRelay.url}`);
|
||||||
// console.log(`connected to ${migsRelay.url}`);
|
|
||||||
|
|
||||||
|
// store the relay name
|
||||||
|
this.relayName = migsRelay.url;
|
||||||
|
|
||||||
|
|
||||||
const sub = migsRelay.subscribe([
|
const sub = migsRelay.subscribe([
|
||||||
{
|
{
|
||||||
kinds: [30023], // short and long form notes
|
kinds: [30023], // short and long form notes
|
||||||
limit: 10,
|
limit: 5,
|
||||||
}
|
}
|
||||||
], {
|
], {
|
||||||
onevent: async (event) => {
|
onevent: async (event) => {
|
||||||
|
@ -155,6 +164,10 @@ async fetchNotes() {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async displayLongNotes() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -163,7 +176,7 @@ async fetchNotes() {
|
||||||
(navigator as any).share({
|
(navigator as any).share({
|
||||||
title: 'Nostr Micro Client',
|
title: 'Nostr Micro Client',
|
||||||
text: 'Share this with your homie!',
|
text: 'Share this with your homie!',
|
||||||
url: 'https://miguelalmodo.com',
|
url: 'https://miguelalmodo.com/',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -176,7 +189,7 @@ async fetchNotes() {
|
||||||
<section>
|
<section>
|
||||||
|
|
||||||
<header class="main-section-header">
|
<header class="main-section-header">
|
||||||
<h2 class="main-section-h2">Recent Notes from IFCA</h2>
|
<h2 class="main-section-h2">Recent Notes from ${this.relayName}</h2>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
@ -188,6 +201,7 @@ async fetchNotes() {
|
||||||
const urlMatch = note.content.match(/https?:\/\/[^\s]+/);
|
const urlMatch = note.content.match(/https?:\/\/[^\s]+/);
|
||||||
const textContent = note.content.replace(urlMatch?.[0] || '', '').trim();
|
const textContent = note.content.replace(urlMatch?.[0] || '', '').trim();
|
||||||
|
|
||||||
|
|
||||||
// Check for yt links and extract video ID
|
// Check for yt links and extract video ID
|
||||||
const youtubeRegex = /(?:https?:\/\/(?:www\.)?youtube\.com\/watch\?v=|https?:\/\/youtu\.be\/)([a-zA-Z0-9_-]{11})/;
|
const youtubeRegex = /(?:https?:\/\/(?:www\.)?youtube\.com\/watch\?v=|https?:\/\/youtu\.be\/)([a-zA-Z0-9_-]{11})/;
|
||||||
const youtubeMatch = urlMatch?.[0].match(youtubeRegex);
|
const youtubeMatch = urlMatch?.[0].match(youtubeRegex);
|
||||||
|
@ -217,7 +231,6 @@ async fetchNotes() {
|
||||||
`;
|
`;
|
||||||
})}
|
})}
|
||||||
</table>
|
</table>
|
||||||
<div class="comment-wall"
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -35,6 +35,9 @@ export const router = new Router({
|
||||||
{
|
{
|
||||||
path: resolveRouterPath('note-wall'),
|
path: resolveRouterPath('note-wall'),
|
||||||
title: 'Note Wall',
|
title: 'Note Wall',
|
||||||
|
plugins: [
|
||||||
|
lazy(() => import('./pages/note-wall.js')),
|
||||||
|
],
|
||||||
render: () => html`<note-wall></note-wall>`
|
render: () => html`<note-wall></note-wall>`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
Loading…
Reference in a new issue