From 5fae2e646e51bf34969b3f04f541bad3992ace58 Mon Sep 17 00:00:00 2001
From: Sam Samskies <samsamskies@gmail.com>
Date: Fri, 28 Jul 2023 21:05:54 -0500
Subject: [PATCH 1/4] display images in notes

---
 components/NoteContent/HyperLinks.tsx  | 29 ++++++++++++++++++++++++++
 components/NoteContent/NoteContent.tsx | 19 ++++-------------
 next.config.js                         |  8 +++++++
 3 files changed, 41 insertions(+), 15 deletions(-)
 create mode 100644 components/NoteContent/HyperLinks.tsx

diff --git a/components/NoteContent/HyperLinks.tsx b/components/NoteContent/HyperLinks.tsx
new file mode 100644
index 00000000..d467a3db
--- /dev/null
+++ b/components/NoteContent/HyperLinks.tsx
@@ -0,0 +1,29 @@
+import { MouseEvent } from "react";
+import { Anchor, Box } from "@mantine/core";
+import useStyles from "./NoteContent.styles";
+
+export const HyperLink = ({ href }: { href: string }) => {
+  const { classes } = useStyles();
+
+  if (/(gif|jpe?g|tiff?|png|webp|bmp)$/i.test(href)) {
+    return (
+      <Box sx={{ maxHeight: 200, overflow: "hidden" }}>
+        <img src={href} alt={href} style={{ maxWidth: "50%" }} />
+      </Box>
+    );
+  }
+
+  return (
+    <Anchor
+      className={classes.anchor}
+      href={href}
+      onClick={(e: MouseEvent) => e.stopPropagation()}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {href}
+    </Anchor>
+  );
+};
+
+export default HyperLink;
diff --git a/components/NoteContent/NoteContent.tsx b/components/NoteContent/NoteContent.tsx
index ec7cc76c..3f41c85d 100644
--- a/components/NoteContent/NoteContent.tsx
+++ b/components/NoteContent/NoteContent.tsx
@@ -1,14 +1,13 @@
-import { Fragment, type MouseEvent } from "react";
-import { Text, Anchor } from "@mantine/core";
+import { Fragment } from "react";
+import { Text } from "@mantine/core";
 import MentionLink from "./MentionLink";
 import { NPUB_NOSTR_URI_REGEX } from "../../constants";
-import useStyles from "./NoteContent.styles";
+import HyperLink from "./HyperLinks";
 
 const HYPERLINK_REGEX =
   /(https?:\/\/[-a-zA-Z0-9+&@#/%?=~_|!:,.;]*[-a-zA-Z0-9+&@#/%=~_|])/;
 
 export const NoteContent = ({ content }: { content: string }) => {
-  const { classes } = useStyles();
   const formattingRegEx = new RegExp(
     `(?:${NPUB_NOSTR_URI_REGEX.source}|${HYPERLINK_REGEX.source})`,
     "gi"
@@ -24,17 +23,7 @@ export const NoteContent = ({ content }: { content: string }) => {
     }
 
     if (HYPERLINK_REGEX.test(part)) {
-      return (
-        <Anchor
-          className={classes.anchor}
-          href={part}
-          onClick={(e: MouseEvent) => e.stopPropagation()}
-          target="_blank"
-          rel="noreferrer"
-        >
-          {part}
-        </Anchor>
-      );
+      return <HyperLink key={index} href={part} />;
     }
 
     return <Fragment key={index}>{part}</Fragment>;
diff --git a/next.config.js b/next.config.js
index 24f4262f..98734d1b 100644
--- a/next.config.js
+++ b/next.config.js
@@ -14,6 +14,14 @@ module.exports = withPWA(
     eslint: {
       ignoreDuringBuilds: true,
     },
+    images: {
+      remotePatterns: [
+        {
+          protocol: "https",
+          hostname: "**",
+        },
+      ],
+    },
     webpack(config) {
       config.module.rules.push({
         test: /\.svg$/i,

From c354d933061dfbdb0bffa176d48a24d720e90f30 Mon Sep 17 00:00:00 2001
From: Sam Samskies <samsamskies@gmail.com>
Date: Fri, 28 Jul 2023 21:08:35 -0500
Subject: [PATCH 2/4] add border radius

---
 components/NoteContent/HyperLinks.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/NoteContent/HyperLinks.tsx b/components/NoteContent/HyperLinks.tsx
index d467a3db..c54a9753 100644
--- a/components/NoteContent/HyperLinks.tsx
+++ b/components/NoteContent/HyperLinks.tsx
@@ -8,7 +8,11 @@ export const HyperLink = ({ href }: { href: string }) => {
   if (/(gif|jpe?g|tiff?|png|webp|bmp)$/i.test(href)) {
     return (
       <Box sx={{ maxHeight: 200, overflow: "hidden" }}>
-        <img src={href} alt={href} style={{ maxWidth: "50%" }} />
+        <img
+          src={href}
+          alt={href}
+          style={{ maxWidth: "50%", borderRadius: 12 }}
+        />
       </Box>
     );
   }

From 933f37113a6cc48535c19164cfdd42436f785996 Mon Sep 17 00:00:00 2001
From: Sam Samskies <samsamskies@gmail.com>
Date: Fri, 28 Jul 2023 21:29:06 -0500
Subject: [PATCH 3/4] update styles

---
 components/NoteContent/HyperLinks.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/NoteContent/HyperLinks.tsx b/components/NoteContent/HyperLinks.tsx
index c54a9753..aa1c58bc 100644
--- a/components/NoteContent/HyperLinks.tsx
+++ b/components/NoteContent/HyperLinks.tsx
@@ -7,7 +7,7 @@ export const HyperLink = ({ href }: { href: string }) => {
 
   if (/(gif|jpe?g|tiff?|png|webp|bmp)$/i.test(href)) {
     return (
-      <Box sx={{ maxHeight: 200, overflow: "hidden" }}>
+      <Box w="fit-content" sx={{ maxHeight: 200, overflow: "hidden" }}>
         <img
           src={href}
           alt={href}

From b901c824de53deb08df092c3b2c1de43bd47002e Mon Sep 17 00:00:00 2001
From: Sam Samskies <samsamskies@gmail.com>
Date: Fri, 28 Jul 2023 21:47:42 -0500
Subject: [PATCH 4/4] remove unnecessary img container

---
 components/NoteContent/HyperLinks.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/components/NoteContent/HyperLinks.tsx b/components/NoteContent/HyperLinks.tsx
index aa1c58bc..fc4484fb 100644
--- a/components/NoteContent/HyperLinks.tsx
+++ b/components/NoteContent/HyperLinks.tsx
@@ -1,5 +1,5 @@
 import { MouseEvent } from "react";
-import { Anchor, Box } from "@mantine/core";
+import { Anchor } from "@mantine/core";
 import useStyles from "./NoteContent.styles";
 
 export const HyperLink = ({ href }: { href: string }) => {
@@ -7,13 +7,11 @@ export const HyperLink = ({ href }: { href: string }) => {
 
   if (/(gif|jpe?g|tiff?|png|webp|bmp)$/i.test(href)) {
     return (
-      <Box w="fit-content" sx={{ maxHeight: 200, overflow: "hidden" }}>
-        <img
-          src={href}
-          alt={href}
-          style={{ maxWidth: "50%", borderRadius: 12 }}
-        />
-      </Box>
+      <img
+        src={href}
+        alt={href}
+        style={{ maxHeight: 400, maxWidth: "50%", borderRadius: 12 }}
+      />
     );
   }