From f84710d8f1a2214aee66f295c3ea82e8291aec20 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Tue, 10 Jan 2023 22:31:08 +0100
Subject: [PATCH 1/2] highlight hashtags

---
 src/Const.js            |  5 +++++
 src/Text.js             | 18 +++++++++++++++++-
 src/element/Hashtag.css |  3 +++
 src/element/Hashtag.js  | 11 +++++++++++
 src/element/Note.js     |  3 ++-
 src/index.css           |  2 +-
 6 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 src/element/Hashtag.css
 create mode 100644 src/element/Hashtag.js

diff --git a/src/Const.js b/src/Const.js
index 5859fda..943a589 100644
--- a/src/Const.js
+++ b/src/Const.js
@@ -62,3 +62,8 @@ export const InvoiceRegex = /(lnbc\w+)/i;
  * YouTube URL regex
  */
 export const YoutubeUrlRegex = /^(?:https?:\/\/)?(?:www|m\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/
+
+/**
+ * Hashtag regex
+ */
+export const HashtagRegex = /(#[a-z\d-]+)/ig
diff --git a/src/Text.js b/src/Text.js
index 197ff7f..9887bac 100644
--- a/src/Text.js
+++ b/src/Text.js
@@ -1,9 +1,10 @@
 import { Link } from "react-router-dom";
 
 import Invoice from "./element/Invoice";
-import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex } from "./Const";
+import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex, HashtagRegex } from "./Const";
 import { eventLink, hexToBech32, profileLink } from "./Util";
 import LazyImage from "./element/LazyImage";
+import Hashtag from "./element/Hashtag";
 
 function transformHttpLink(a) {
     try {
@@ -111,3 +112,18 @@ export function extractInvoices(fragments) {
         return f;
     }).flat();
 }
+
+export function extractHashtags(fragments) {
+    return fragments.map(f => {
+        if (typeof f === "string") {
+            return f.split(HashtagRegex).map(i => {
+                if (i.toLowerCase().startsWith("#")) {
+                    return <Hashtag>{i}</Hashtag>
+                } else {
+                    return i;
+                }
+            });
+        }
+        return f;
+    }).flat();
+}
diff --git a/src/element/Hashtag.css b/src/element/Hashtag.css
new file mode 100644
index 0000000..630973a
--- /dev/null
+++ b/src/element/Hashtag.css
@@ -0,0 +1,3 @@
+.hashtag {
+    color: var(--highlight);
+}
diff --git a/src/element/Hashtag.js b/src/element/Hashtag.js
new file mode 100644
index 0000000..a79c8d0
--- /dev/null
+++ b/src/element/Hashtag.js
@@ -0,0 +1,11 @@
+import './Hashtag.css'
+
+const Hashtag = ({ children }) => {
+  return (
+    <span className="hashtag">
+      {children}
+    </span>
+  )
+}
+
+export default Hashtag
diff --git a/src/element/Note.js b/src/element/Note.js
index 1d34d1f..c24d79e 100644
--- a/src/element/Note.js
+++ b/src/element/Note.js
@@ -5,7 +5,7 @@ import { useNavigate } from "react-router-dom";
 
 import Event from "../nostr/Event";
 import ProfileImage from "./ProfileImage";
-import { extractLinks, extractMentions, extractInvoices } from "../Text";
+import { extractLinks, extractMentions, extractInvoices, extractHashtags } from "../Text";
 import { eventLink, hexToBech32 } from "../Util";
 import NoteFooter from "./NoteFooter";
 import NoteTime from "./NoteTime";
@@ -32,6 +32,7 @@ export default function Note(props) {
         let fragments = extractLinks([body]);
         fragments = extractMentions(fragments, ev.Tags, users);
         fragments = extractInvoices(fragments);
+        fragments = extractHashtags(fragments);
         if (deletion?.length > 0) {
             return (
                 <>
diff --git a/src/index.css b/src/index.css
index 3023b5b..0134d98 100644
--- a/src/index.css
+++ b/src/index.css
@@ -272,7 +272,7 @@ body.scroll-lock {
 }
 
 .root-tabs {
-    padding: 0 2px;
+    padding: 0;
     align-items: center;
     justify-content: flex-start;
 }

From a4494ebd62ee50ee53d86c2e4841a1dca244bbf1 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Tue, 10 Jan 2023 23:39:30 +0100
Subject: [PATCH 2/2] add hashtag highlight to profile description

---
 src/pages/ProfilePage.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index f988d49..1182043 100644
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -11,7 +11,7 @@ import useProfile from "../feed/ProfileFeed";
 import FollowButton from "../element/FollowButton";
 import { extractLnAddress, parseId } from "../Util";
 import Timeline from "../element/Timeline";
-import { extractLinks } from '../Text'
+import { extractLinks, extractHashtags } from '../Text'
 import LNURLTip from "../element/LNURLTip";
 import Nip05 from "../element/Nip05";
 import Copy from "../element/Copy";
@@ -36,6 +36,7 @@ export default function ProfilePage() {
     const isMe = loginPubKey === id;
     const [showLnQr, setShowLnQr] = useState(false);
     const [tab, setTab] = useState(ProfileTab.Notes);
+    const about = extractHashtags(extractLinks([user?.about]))
 
     useEffect(() => {
         setTab(ProfileTab.Notes);
@@ -60,7 +61,7 @@ export default function ProfilePage() {
                         }
                     </div>
                 </div>
-                <p>{extractLinks([user?.about])}</p>
+                <p>{about}</p>
 
                 {user?.website && (
                     <div className="website f-ellipsis">