Merge pull request #64 from Permissionless-Software-Foundation/dh-user-data-style

fix(userdata): Fixed markdown text styling on user data page

src/App.css

@@ -55,4 +55,174 @@ input::-webkit-inner-spin-button {
 /* Remove input number arrows Firefox */
 input[type=number] {
   --moz-appearance: textfield;
+}
+
+/* Markdown Content Styles */
+.markdown-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border: 1px solid #e5e7eb;
+  text-align: left;
+}
+
+.markdown-content h1 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #1f2937;
+  margin-bottom: 1.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 3px solid #3b82f6;
+  text-align: left;
+}
+
+.markdown-content h2 {
+  font-size: 2rem;
+  font-weight: 600;
+  color: #374151;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.25rem;
+  border-bottom: 2px solid #e5e7eb;
+}
+
+.markdown-content h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #4b5563;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.markdown-content h4, .markdown-content h5, .markdown-content h6 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #6b7280;
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.markdown-content p {
+  font-size: 1.1rem;
+  line-height: 1.7;
+  color: #374151;
+  margin-bottom: 1.25rem;
+  text-align: left;
+}
+
+.markdown-content ul, .markdown-content ol {
+  margin-bottom: 1.25rem;
+  padding-left: 1.5rem;
+}
+
+.markdown-content li {
+  font-size: 1.1rem;
+  line-height: 1.6;
+  color: #374151;
+  margin-bottom: 0.5rem;
+}
+
+.markdown-content blockquote {
+  border-left: 4px solid #3b82f6;
+  background: #f8fafc;
+  padding: 1rem 1.5rem;
+  margin: 1.5rem 0;
+  border-radius: 0 8px 8px 0;
+  font-style: italic;
+  color: #4b5563;
+}
+
+.markdown-content code {
+  background: #f1f5f9;
+  color: #e11d48;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.9rem;
+}
+
+.markdown-content pre {
+  background: #1e293b;
+  color: #e2e8f0;
+  padding: 1.5rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 1.5rem 0;
+  border: 1px solid #334155;
+}
+
+.markdown-content pre code {
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  border-radius: 0;
+}
+
+.markdown-content a {
+  color: #3b82f6;
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: all 0.2s ease;
+}
+
+.markdown-content a:hover {
+  color: #1d4ed8;
+  border-bottom-color: #1d4ed8;
+}
+
+.markdown-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.markdown-content th, .markdown-content td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.markdown-content th {
+  background: #f8fafc;
+  font-weight: 600;
+  color: #374151;
+}
+
+.markdown-content hr {
+  border: none;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
+  margin: 2rem 0;
+}
+
+.markdown-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  margin: 1rem 0;
+}
+
+@media (max-width: 768px) {
+  .markdown-content {
+    padding: 1.5rem;
+    margin: 1rem;
+  }
+  .markdown-content h1 {
+    font-size: 2rem;
+  }
+  .markdown-content h2 {
+    font-size: 1.75rem;
+  }
+  .markdown-content p, .markdown-content li {
+    font-size: 1rem;
+  }
 }

src/App.js

@@ -74,6 +74,7 @@ function App (props) {
 
       console.log('asyncInitStarted: ', appData.asyncInitStarted)
       console.log('is single view : ', singleView)
+      await appData.nostrQueries.start()
       if (!appData.asyncInitStarted && !singleView) {
         try {
           // Instantiate the async load object.

src/components/app-body/nostr-chat/index.js

@@ -203,7 +203,8 @@ function NostrChat (props) {
 
     pool.on('event', (relay, subId, ev) => {
       console.log('Group post retrieved from ', relay.url, ev.content)
-      onMsgRead(ev)
+      const onBlackList = nostrQueries.blackList.find((val) => { return val === ev.pubkey })
+      if (!onBlackList)onMsgRead(ev)
     })
 
     return () => {

src/components/app-body/user-data-review.js

@@ -7,6 +7,7 @@ import React, { useState, useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 import { Container, Row, Col, Spinner, Carousel } from 'react-bootstrap'
 import ReactMarkdown from 'react-markdown'
+import '../../App.css'
 
 function UserDataReview (props) {
   const appData = props.appData
@@ -108,7 +109,7 @@ function UserDataReview (props) {
               {/** Markdown Content */}
               {markdown
                 ? (
-                  <div className='markdown-content my-5 text-center'>
+                  <div className='markdown-content my-5'>
                     <ReactMarkdown>{markdown}</ReactMarkdown>
                   </div>
                   )

src/services/nostr-queries.js

@@ -6,6 +6,7 @@ import { RelayPool } from 'nostr'
 import * as nip19 from 'nostr-tools/nip19'
 import { nip04 } from 'nostr-tools'
 import { hexToBytes } from '@noble/hashes/utils' // already an installed dependency
+import axios from 'axios'
 
 export default class NostrQueries {
   constructor ({ relays }) {
@@ -13,6 +14,17 @@ export default class NostrQueries {
 
     this.loadedProfiles = {}
     this.loadedChannelsInfo = {}
+    this.blackList = []
+    this.blackListFetched = false
+  }
+
+  async start () {
+    try {
+      await this.getBlackList()
+    } catch (error) {
+      console.error('NostrQueries.start() error : ', error.message)
+      throw error
+    }
   }
 
   setRelays (relays) {
@@ -459,4 +471,39 @@ export default class NostrQueries {
       throw error
     }
   }
+
+  async getBlackList () {
+    try {
+      if (this.blackListFetched) return
+      const opts = {
+        method: 'GET',
+        url: 'https://blacklists.psfoundation.info/nostr-chat-blacklist.json',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }
+
+      const result = await axios.request(opts)
+      const { data } = result
+      const { npubs } = data
+
+      // // Dev test mock npub for testing purposes
+      // const myNpubMock = 'npub1y3xq402pu9aqms3khetnt5gzm54t63pzcla56wwfmwshde0ws77qkff5gc'
+      // npubs.push(myNpubMock)
+      // //
+
+      this.blackListFetched = true
+      for (let i = 0; i < npubs.length; i++) {
+        const npub = npubs[i]
+        const pubKey = this.npubToHex(npub)
+        this.blackList.push(pubKey)
+      }
+      console.log('BlackList ', this.blackList)
+
+      return data
+    } catch (error) {
+      console.log('Error on getBlackList()')
+      throw error
+    }
+  }
 }