Merge branch 'main' of https://github.com/AykutSarac/jsonvisio.com

Dockerfile

@@ -1,5 +1,7 @@
 # Builder
 FROM node:14-buster as builder
+ARG jsoncrack_host
+ENV NEXT_PUBLIC_JSONCRACK_HOST $jsoncrack_host
 WORKDIR /src
 COPY . /src
 RUN yarn install --legacy-peer-deps

README.md

@@ -27,7 +27,7 @@
   </p>
 
   <p align="center">
-      <img width="800" src="/public/jsoncrack-screenshot.webp" alt="preview 1" />
+      <img width="800" src="./public/jsoncrack-screenshot.webp" alt="preview 1" />
   </p>
 
 # JSON Crack (jsoncrack.com)
@@ -60,7 +60,7 @@ You can use the web version at [jsoncrack.com](https://jsoncrack.com) or also ru
 A [`Dockerfile`](Dockerfile) is provided in the root of the repository.
 If you want to run JSON Crack locally:
 
-* Build a Docker image with `docker build -t jsoncrack .`
+* Build a Docker image with `docker build -t jsoncrack --build-arg jsoncrack_host=localhost:8888 .`
 * Run locally with `docker run -p 8888:8080 jsoncrack`
 * Go to http://localhost:8888
 

src/containers/Modals/ShareModal/index.tsx

@@ -43,12 +43,14 @@ const StyledContainer = styled.div`
   }
 `;
 
+const jsoncrackHost = process.env.NEXT_PUBLIC_JSONCRACK_HOST || packageJson.homepage;
+
 export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
   const json = useConfig((state) => state.json);
   const [encodedJson, setEncodedJson] = React.useState("");
 
-  const embedText = `<iframe src="${packageJson.homepage}/widget?json=${encodedJson}" width="512" height="384" style="border: 2px solid #b9bbbe; border-radius: 6px;"></iframe>`;
-  const shareURL = `${packageJson.homepage}/editor?json=${encodedJson}`;
+  const embedText = `<iframe src="${jsoncrackHost}/widget?json=${encodedJson}" width="512" height="384" style="border: 2px solid #b9bbbe; border-radius: 6px;"></iframe>`;
+  const shareURL = `${jsoncrackHost}/editor?json=${encodedJson}`;
 
   React.useEffect(() => {
     const jsonEncode = compress(JSON.parse(json));