PoC: Load external images

Dockerfile

@@ -1,4 +1,4 @@
-FROM r.batts.cloud/debian:testing
+FROM alpine
 
 LABEL org.opencontainers.image.authors="philipp.heckel@gmail.com"
 LABEL org.opencontainers.image.url="https://ntfy.sh/"

Dockerfile-build

@@ -1,4 +1,4 @@
-FROM r.batts.cloud/golang:1.19 as builder
+FROM golang:1.19-bullseye as builder
 
 ARG VERSION=dev
 ARG COMMIT=unknown
@@ -8,8 +8,7 @@ RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash
 RUN apt-get install -y \
     build-essential \
     nodejs \
-    python3-pip \
-    python3-venv
+    python3-pip
 
 WORKDIR /app
 ADD Makefile .
@@ -37,7 +36,7 @@ ADD ./user ./user
 ADD ./util ./util
 RUN make VERSION=$VERSION COMMIT=$COMMIT cli-linux-server
 
-FROM r.batts.cloud/debian:testing
+FROM alpine
 
 LABEL org.opencontainers.image.authors="philipp.heckel@gmail.com"
 LABEL org.opencontainers.image.url="https://ntfy.sh/"

Makefile

@@ -110,9 +110,8 @@ build-deps-ubuntu:
 
 docs: docs-deps docs-build
 
-docs-build: venv .PHONY
-	@. venv/bin/activate && \
-	if ! /bin/echo -e "import sys\nif sys.version_info < (3,8):\n exit(1)" | python3; then \
+docs-build: .PHONY
+	@if ! /bin/echo -e "import sys\nif sys.version_info < (3,8):\n exit(1)" | python3; then \
 	  if which python3.8; then \
 	  	echo "python3.8 $(shell which mkdocs) build"; \
 	    python3.8 $(shell which mkdocs) build; \
@@ -125,15 +124,10 @@ docs-build: venv .PHONY
 	  mkdocs build; \
 	fi
 
-venv:
-	python3 -m venv ./venv
-
-docs-deps: venv .PHONY
-	. venv/bin/activate && \
+docs-deps: .PHONY
 	pip3 install -r requirements.txt
 
-docs-deps-update: venv .PHONY
-	. venv/bin/activate && \
+docs-deps-update: .PHONY
 	pip3 install -r requirements.txt --upgrade
 
 

web/public/config.js

@@ -7,7 +7,7 @@
 
 var config = {
   base_url: window.location.origin, // Change to test against a different server
-  app_root: "/app",
+  app_root: "/",
   enable_login: true,
   enable_signup: true,
   enable_payments: false,

web/src/components/Notifications.jsx

@@ -287,14 +287,15 @@ const NotificationItem = (props) => {
 
 const Attachment = (props) => {
   const { t } = useTranslation();
+  const [ imageError, setImageError ] = useState(false);
   const { attachment } = props;
   const expired = attachment.expires && attachment.expires < Date.now() / 1000;
   const expires = attachment.expires && attachment.expires > Date.now() / 1000;
   const displayableImage = !expired && attachment.type && attachment.type.startsWith("image/");
 
   // Unexpired image
-  if (displayableImage) {
-    return <Image attachment={attachment} />;
+  if (!imageError) {
+    return <Image attachment={attachment} onError={() => setImageError(true)} />;
   }
 
   // Anything else: Show box
@@ -376,14 +377,19 @@ const Attachment = (props) => {
 const Image = (props) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
+  const [loaded, setLoaded] = useState(false);
   return (
-    <>
+    <div style={{
+      display: loaded ? "block" : "none",
+    }}>
       <Box
         component="img"
         src={props.attachment.url}
         loading="lazy"
         alt={t("notifications_attachment_image")}
         onClick={() => setOpen(true)}
+        onLoad={() => setLoaded(true)}
+        onError={props.onError}
         sx={{
           marginTop: 2,
           borderRadius: "4px",
@@ -413,7 +419,7 @@ const Image = (props) => {
           />
         </Fade>
       </Modal>
-    </>
+    </div>
   );
 };