update baseurl env variable

.env.development

@@ -0,0 +1 @@
+NEXT_PUBLIC_BASE_URL=http://localhost:3000

.env.production

@@ -0,0 +1 @@
+NEXT_PUBLIC_BASE_URL=https://jsoncrack.com

Dockerfile

@@ -1,7 +1,5 @@
 # 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

@@ -63,7 +63,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-arg jsoncrack_host=localhost:8888 .`
+* Build a Docker image with `docker build -t jsoncrack .`
 * Run locally with `docker run -p 8888:8080 jsoncrack`
 * Go to http://localhost:8888
 

src/components/SeoTags/index.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import packageJson from "package.json";
 
 interface SeoTagsProps {
   title: string;
@@ -16,7 +15,7 @@ export const SeoTags: React.FC<SeoTagsProps> = ({
     <meta name="description" content={description} />
 
     {/* <!-- Facebook Meta Tags --> */}
-    <meta property="og:url" content={packageJson.homepage} />
+    <meta property="og:url" content="https://jsoncrack.com" />
     <meta property="og:type" content="website" />
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description} />
@@ -24,8 +23,8 @@ export const SeoTags: React.FC<SeoTagsProps> = ({
 
     {/* <!-- Twitter Meta Tags --> */}
     <meta name="twitter:card" content="summary_large_image" />
-    <meta property="twitter:domain" content="jsoncrack.com" />
-    <meta property="twitter:url" content={packageJson.homepage} />
+    <meta property="twitter:domain" content="https://jsoncrack.com" />
+    <meta property="twitter:url" content="https://jsoncrack.com" />
     <meta name="twitter:title" content={title} />
     <meta name="twitter:description" content={description} />
     <meta name="twitter:image" content={image} />

src/constants/data.ts

@@ -1,3 +1,5 @@
+export const baseURL = process.env.NEXT_PUBLIC_BASE_URL;
+
 // Example taken from https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json
 export const defaultJson = JSON.stringify({
   squadName: "Super hero squad",

src/containers/Modals/ShareModal/index.tsx

@@ -7,7 +7,7 @@ import { BiErrorAlt } from "react-icons/bi";
 import { compress } from "compress-json";
 import useConfig from "src/hooks/store/useConfig";
 import { Input } from "src/components/Input";
-import packageJson from "package.json";
+import { baseURL } from "src/constants/data";
 
 const StyledWarning = styled.p``;
 
@@ -43,14 +43,12 @@ 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="${jsoncrackHost}/widget?json=${encodedJson}" width="512" height="384" style="border: 2px solid #b9bbbe; border-radius: 6px;"></iframe>`;
-  const shareURL = `${jsoncrackHost}/editor?json=${encodedJson}`;
+  const embedText = `<iframe src="${baseURL}/widget?json=${encodedJson}" width="512" height="384" style="border: 2px solid #b9bbbe; border-radius: 6px;"></iframe>`;
+  const shareURL = `${baseURL}/editor?json=${encodedJson}`;
 
   React.useEffect(() => {
     const jsonEncode = compress(JSON.parse(json));

src/pages/Widget/index.tsx

@@ -2,10 +2,9 @@ import { decompress } from "compress-json";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import React from "react";
-import { defaultJson } from "src/constants/data";
+import { baseURL, defaultJson } from "src/constants/data";
 import { isValidJson } from "src/utils/isValidJson";
 import styled from "styled-components";
-import packageJson from "package.json";
 
 const Graph = dynamic<any>(
   () => import("src/components/Graph").then((c) => c.Graph),
@@ -63,7 +62,7 @@ const WidgetPage = () => {
     <>
       <Graph json={json} isWidget />
       <StyledAttribute
-        href={`${packageJson.homepage}/editor?json=${query.json}`}
+        href={`${baseURL}/editor?json=${query.json}`}
         target="_blank"
         rel="noreferrer"
       >