diff options
author | poeti8 <ezzati.upt@gmail.com> | 2020-07-25 18:51:35 +0300 |
---|---|---|
committer | poeti8 <ezzati.upt@gmail.com> | 2020-07-25 18:51:35 +0300 |
commit | 4952e88e4f878b11cfdd3ab3f91d811f409c8b57 (patch) | |
tree | 1f736e1b47be55bb9c6ede142451d03140a17daa /client | |
parent | 29e8e5aa0ae83faaee52748364b726cc4170d8c1 (diff) |
feat: use nextjs public config instead of webpack env
Diffstat (limited to 'client')
-rw-r--r-- | client/components/Footer.tsx | 7 | ||||
-rw-r--r-- | client/components/Header.tsx | 5 | ||||
-rw-r--r-- | client/components/LinksTable.tsx | 5 | ||||
-rw-r--r-- | client/components/ReCaptcha.tsx | 13 | ||||
-rw-r--r-- | client/components/Settings/SettingsDeleteAccount.tsx | 7 | ||||
-rw-r--r-- | client/components/Settings/SettingsDomain.tsx | 103 | ||||
-rw-r--r-- | client/components/Shortener.tsx | 5 | ||||
-rw-r--r-- | client/helpers/analytics.ts | 5 | ||||
-rw-r--r-- | client/pages/_app.tsx | 5 | ||||
-rw-r--r-- | client/pages/_document.tsx | 19 | ||||
-rw-r--r-- | client/pages/banned.tsx | 6 | ||||
-rw-r--r-- | client/pages/report.tsx | 8 | ||||
-rw-r--r-- | client/pages/terms.tsx | 59 |
13 files changed, 144 insertions, 103 deletions
diff --git a/client/components/Footer.tsx b/client/components/Footer.tsx index ce926d8..5dad1e2 100644 --- a/client/components/Footer.tsx +++ b/client/components/Footer.tsx @@ -1,4 +1,5 @@ import React, { FC, useEffect } from "react"; +import getConfig from "next/config"; import showRecaptcha from "../helpers/recaptcha"; import { useStoreState } from "../store"; @@ -7,6 +8,8 @@ import ReCaptcha from "./ReCaptcha"; import ALink from "./ALink"; import Text from "./Text"; +const { publicRuntimeConfig } = getConfig(); + const Footer: FC = () => { const { isAuthenticated } = useStoreState(s => s.auth); @@ -43,11 +46,11 @@ const Footer: FC = () => { <ALink href="/report" title="Report abuse"> Report Abuse </ALink> - {process.env.CONTACT_EMAIL && ( + {publicRuntimeConfig.CONTACT_EMAIL && ( <> {" | "} <ALink - href={`mailto:${process.env.CONTACT_EMAIL}`} + href={`mailto:${publicRuntimeConfig.CONTACT_EMAIL}`} title="Contact us" > Contact us diff --git a/client/components/Header.tsx b/client/components/Header.tsx index 9a0b03e..4b4cc9e 100644 --- a/client/components/Header.tsx +++ b/client/components/Header.tsx @@ -1,4 +1,5 @@ import { Flex } from "reflexbox/styled-components"; +import getConfig from "next/config"; import React, { FC } from "react"; import Router from "next/router"; import useMedia from "use-media"; @@ -10,6 +11,8 @@ import { RowCenterV } from "./Layout"; import { Button } from "./Button"; import ALink from "./ALink"; +const { publicRuntimeConfig } = getConfig(); + const Li = styled(Flex).attrs({ ml: [12, 24, 32] })` a { color: inherit; @@ -101,7 +104,7 @@ const Header: FC = () => { }} > <img src="/images/logo.svg" alt="" /> - {process.env.SITE_NAME} + {publicRuntimeConfig.SITE_NAME} </a> </LogoImage> {!isMobile && ( diff --git a/client/components/LinksTable.tsx b/client/components/LinksTable.tsx index 5a8c1c4..1164cb5 100644 --- a/client/components/LinksTable.tsx +++ b/client/components/LinksTable.tsx @@ -5,6 +5,7 @@ import { useFormState } from "react-use-form-state"; import { Flex } from "reflexbox/styled-components"; import styled, { css } from "styled-components"; import { ifProp } from "styled-tools"; +import getConfig from "next/config"; import QRCode from "qrcode.react"; import Link from "next/link"; @@ -24,6 +25,8 @@ import ALink from "./ALink"; import Modal from "./Modal"; import Icon from "./Icon"; +const { publicRuntimeConfig } = getConfig(); + const Tr = styled(Flex).attrs({ as: "tr", px: [12, 12, 2] })``; const Th = styled(Flex)``; Th.defaultProps = { as: "th", flexBasis: 0, py: [12, 12, 3], px: [12, 12, 3] }; @@ -341,7 +344,7 @@ const Row: FC<RowProps> = ({ index, link, setDeleteModal }) => { fontSize={[14, 15]} bold > - {link.domain || process.env.DEFAULT_DOMAIN}/ + {link.domain || publicRuntimeConfig.DEFAULT_DOMAIN}/ </Text> <Flex as="form"> <TextInput diff --git a/client/components/ReCaptcha.tsx b/client/components/ReCaptcha.tsx index 251af44..03bef07 100644 --- a/client/components/ReCaptcha.tsx +++ b/client/components/ReCaptcha.tsx @@ -1,9 +1,12 @@ -import React from 'react'; -import styled from 'styled-components'; -import { Flex } from 'reflexbox/styled-components'; +import { Flex } from "reflexbox/styled-components"; +import styled from "styled-components"; +import getConfig from "next/config"; +import React from "react"; + +const { publicRuntimeConfig } = getConfig(); const ReCaptcha = () => { - if (process.env.NODE_ENV !== 'production') { + if (process.env.NODE_ENV !== "production") { return null; } @@ -12,7 +15,7 @@ const ReCaptcha = () => { margin="54px 0 16px" id="g-recaptcha" className="g-recaptcha" - data-sitekey={process.env.RECAPTCHA_SITE_KEY} + data-sitekey={publicRuntimeConfig.RECAPTCHA_SITE_KEY} data-callback="recaptchaCallback" data-size="invisible" data-badge="inline" diff --git a/client/components/Settings/SettingsDeleteAccount.tsx b/client/components/Settings/SettingsDeleteAccount.tsx index f070fa0..22b7d80 100644 --- a/client/components/Settings/SettingsDeleteAccount.tsx +++ b/client/components/Settings/SettingsDeleteAccount.tsx @@ -1,5 +1,6 @@ import { useFormState } from "react-use-form-state"; import React, { FC, useState } from "react"; +import getConfig from "next/config"; import Router from "next/router"; import axios from "axios"; @@ -13,6 +14,8 @@ import { Button } from "../Button"; import Icon from "../Icon"; import Modal from "../Modal"; +const { publicRuntimeConfig } = getConfig(); + const SettingsDeleteAccount: FC = () => { const [message, setMessage] = useMessage(1500); const [loading, setLoading] = useState(false); @@ -52,7 +55,9 @@ const SettingsDeleteAccount: FC = () => { <H2 mb={4} bold> Delete account </H2> - <Text mb={4}>Delete your account from {process.env.SITE_NAME}.</Text> + <Text mb={4}> + Delete your account from {publicRuntimeConfig.SITE_NAME}. + </Text> <Text {...label("password")} as="label" diff --git a/client/components/Settings/SettingsDomain.tsx b/client/components/Settings/SettingsDomain.tsx index 02141e7..55ca837 100644 --- a/client/components/Settings/SettingsDomain.tsx +++ b/client/components/Settings/SettingsDomain.tsx @@ -2,6 +2,7 @@ import { useFormState } from "react-use-form-state"; import { Flex } from "reflexbox/styled-components"; import React, { FC, useState } from "react"; import styled from "styled-components"; +import getConfig from "next/config"; import { useStoreState, useStoreActions } from "../../store"; import { Domain } from "../../store/settings"; @@ -16,6 +17,8 @@ import Table from "../Table"; import Modal from "../Modal"; import Icon from "../Icon"; +const { publicRuntimeConfig } = getConfig(); + const Th = styled(Flex).attrs({ as: "th", py: 3, px: 3 })` font-size: 15px; `; @@ -71,7 +74,7 @@ const SettingsDomain: FC = () => { </H2> <Text mb={3}> You can set a custom domain for your short URLs, so instead of{" "} - <b>{process.env.DEFAULT_DOMAIN}/shorturl</b> you can have{" "} + <b>{publicRuntimeConfig.DEFAULT_DOMAIN}/shorturl</b> you can have{" "} <b>example.com/shorturl.</b> </Text> <Text mb={4}> @@ -92,7 +95,7 @@ const SettingsDomain: FC = () => { <tr key={d.address}> <Td width={2 / 5}>{d.address}</Td> <Td width={2 / 5}> - {d.homepage || process.env.DEFAULT_DOMAIN} + {d.homepage || publicRuntimeConfig.DEFAULT_DOMAIN} </Td> <Td width={1 / 5} justifyContent="center"> <Icon @@ -116,54 +119,54 @@ const SettingsDomain: FC = () => { </tbody> </Table> )} - <Col - alignItems="flex-start" - onSubmit={onSubmit} - width={1} - as="form" - my={[3, 4]} - > - <Flex width={1} flexDirection={["column", "row"]}> - <Col mr={[0, 2]} mb={[3, 0]} flex="0 0 auto"> - <Text - {...label("address")} - as="label" - mb={[2, 3]} - fontSize={[15, 16]} - bold - > - Domain - </Text> - <TextInput - {...text("address")} - placeholder="example.com" - maxWidth="240px" - required - /> - </Col> - <Col ml={[0, 2]} flex="0 0 auto"> - <Text - {...label("homepage")} - as="label" - mb={[2, 3]} - fontSize={[15, 16]} - bold - > - Homepage (optional) - </Text> - <TextInput - {...text("homepage")} - placeholder="Homepage URL" - flex="1 1 auto" - maxWidth="240px" - /> - </Col> - </Flex> - <Button type="submit" color="purple" mt={[24, 3]} disabled={loading}> - <Icon name={loading ? "spinner" : "plus"} mr={2} stroke="white" /> - {loading ? "Setting..." : "Set domain"} - </Button> - </Col> + <Col + alignItems="flex-start" + onSubmit={onSubmit} + width={1} + as="form" + my={[3, 4]} + > + <Flex width={1} flexDirection={["column", "row"]}> + <Col mr={[0, 2]} mb={[3, 0]} flex="0 0 auto"> + <Text + {...label("address")} + as="label" + mb={[2, 3]} + fontSize={[15, 16]} + bold + > + Domain + </Text> + <TextInput + {...text("address")} + placeholder="example.com" + maxWidth="240px" + required + /> + </Col> + <Col ml={[0, 2]} flex="0 0 auto"> + <Text + {...label("homepage")} + as="label" + mb={[2, 3]} + fontSize={[15, 16]} + bold + > + Homepage (optional) + </Text> + <TextInput + {...text("homepage")} + placeholder="Homepage URL" + flex="1 1 auto" + maxWidth="240px" + /> + </Col> + </Flex> + <Button type="submit" color="purple" mt={[24, 3]} disabled={loading}> + <Icon name={loading ? "spinner" : "plus"} mr={2} stroke="white" /> + {loading ? "Setting..." : "Set domain"} + </Button> + </Col> <Text color={message.color}>{message.text}</Text> <Modal id="delete-custom-domain" show={modal} closeHandler={closeModal}> <H2 mb={24} textAlign="center" bold> diff --git a/client/components/Shortener.tsx b/client/components/Shortener.tsx index e75da51..b6c5c6e 100644 --- a/client/components/Shortener.tsx +++ b/client/components/Shortener.tsx @@ -3,6 +3,7 @@ import { useFormState } from "react-use-form-state"; import { Flex } from "reflexbox/styled-components"; import React, { FC, useState } from "react"; import styled from "styled-components"; +import getConfig from "next/config"; import { useStoreActions, useStoreState } from "../store"; import { Checkbox, Select, TextInput } from "./Input"; @@ -15,6 +16,8 @@ import Animation from "./Animation"; import { Colors } from "../consts"; import Icon from "./Icon"; +const { publicRuntimeConfig } = getConfig(); + const SubmitIconWrapper = styled.div` content: ""; position: absolute; @@ -55,7 +58,7 @@ interface Form { showAdvanced?: boolean; } -const defaultDomain = process.env.DEFAULT_DOMAIN; +const defaultDomain = publicRuntimeConfig.DEFAULT_DOMAIN; const Shortener = () => { const { isAuthenticated } = useStoreState(s => s.auth); diff --git a/client/helpers/analytics.ts b/client/helpers/analytics.ts index 0223111..c44cc2c 100644 --- a/client/helpers/analytics.ts +++ b/client/helpers/analytics.ts @@ -1,7 +1,10 @@ +import getConfig from "next/config"; import ReactGA from "react-ga"; +const { publicRuntimeConfig } = getConfig(); + export const initGA = () => { - ReactGA.initialize(process.env.GOOGLE_ANALYTICS); + ReactGA.initialize(publicRuntimeConfig.GOOGLE_ANALYTICS); }; export const logPageView = () => { diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx index f54a00b..1f7497c 100644 --- a/client/pages/_app.tsx +++ b/client/pages/_app.tsx @@ -1,5 +1,6 @@ import App, { AppContext } from "next/app"; import { StoreProvider } from "easy-peasy"; +import getConfig from "next/config"; import Router from "next/router"; import decode from "jwt-decode"; import cookie from "js-cookie"; @@ -9,9 +10,9 @@ import React from "react"; import { initGA, logPageView } from "../helpers/analytics"; import { initializeStore } from "../store"; import { TokenPayload } from "../types"; -import AppWrapper from "../components/AppWrapper"; const isProd = process.env.NODE_ENV === "production"; +const { publicRuntimeConfig } = getConfig(); // TODO: types class MyApp extends App<any> { @@ -74,7 +75,7 @@ class MyApp extends App<any> { <> <Head> <title> - {process.env.SITE_NAME} | Modern Open Source URL shortener. + {publicRuntimeConfig.SITE_NAME} | Modern Open Source URL shortener. </title> </Head> <StoreProvider store={this.store}> diff --git a/client/pages/_document.tsx b/client/pages/_document.tsx index 6778d21..185747e 100644 --- a/client/pages/_document.tsx +++ b/client/pages/_document.tsx @@ -1,9 +1,12 @@ -import React from "react"; import Document, { Head, Main, NextScript } from "next/document"; import { ServerStyleSheet } from "styled-components"; +import getConfig from "next/config"; +import React from "react"; import { Colors } from "../consts"; +const { publicRuntimeConfig } = getConfig(); + interface Props { styleTags: any; } @@ -29,7 +32,7 @@ class AppDocument extends Document<Props> { /> <meta name="description" - content={`${process.env.SITE_NAME} is a free and open source URL shortener with custom domains and stats.`} + content={`${publicRuntimeConfig.SITE_NAME} is a free and open source URL shortener with custom domains and stats.`} /> <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,700" @@ -46,13 +49,13 @@ class AppDocument extends Document<Props> { <meta property="fb:app_id" content="123456789" /> <meta property="og:url" - content={`https://${process.env.DEFAULT_DOMAIN}`} + content={`https://${publicRuntimeConfig.DEFAULT_DOMAIN}`} /> <meta property="og:type" content="website" /> - <meta property="og:title" content={process.env.SITE_NAME} /> + <meta property="og:title" content={publicRuntimeConfig.SITE_NAME} /> <meta property="og:image" - content={`https://${process.env.DEFAULT_DOMAIN}/images/card.png`} + content={`https://${publicRuntimeConfig.DEFAULT_DOMAIN}/images/card.png`} /> <meta property="og:description" @@ -60,16 +63,16 @@ class AppDocument extends Document<Props> { /> <meta name="twitter:url" - content={`https://${process.env.DEFAULT_DOMAIN}`} + content={`https://${publicRuntimeConfig.DEFAULT_DOMAIN}`} /> - <meta name="twitter:title" content={process.env.SITE_NAME} /> + <meta name="twitter:title" content={publicRuntimeConfig.SITE_NAME} /> <meta name="twitter:description" content="Free & Open Source Modern URL Shortener" /> <meta name="twitter:image" - content={`https://${process.env.DEFAULT_DOMAIN}/images/card.png`} + content={`https://${publicRuntimeConfig.DEFAULT_DOMAIN}/images/card.png`} /> {this.props.styleTags} diff --git a/client/pages/banned.tsx b/client/pages/banned.tsx index c6d5eec..ed384cf 100644 --- a/client/pages/banned.tsx +++ b/client/pages/banned.tsx @@ -1,4 +1,4 @@ -import { Flex } from "reflexbox/styled-components"; +import getConfig from "next/config"; import Link from "next/link"; import React from "react"; @@ -8,6 +8,8 @@ import Footer from "../components/Footer"; import ALink from "../components/ALink"; import { Col } from "../components/Layout"; +const { publicRuntimeConfig } = getConfig(); + const BannedPage = () => { return ( <AppWrapper> @@ -21,7 +23,7 @@ const BannedPage = () => { </H2> <H4 textAlign="center" normal> If you noticed a malware/scam link shortened by{" "} - {process.env.SITE_NAME},{" "} + {publicRuntimeConfig.SITE_NAME},{" "} <Link href="/report"> <ALink title="Send report">send us a report</ALink> </Link> diff --git a/client/pages/report.tsx b/client/pages/report.tsx index 6507e23..2d83e3f 100644 --- a/client/pages/report.tsx +++ b/client/pages/report.tsx @@ -12,6 +12,10 @@ import Icon from "../components/Icon"; import { useMessage } from "../hooks"; import { APIv2 } from "../consts"; +import getConfig from "next/config"; + +const { publicRuntimeConfig } = getConfig(); + const ReportPage = () => { const [formState, { text }] = useFormState<{ url: string }>(); const [loading, setLoading] = useState(false); @@ -43,7 +47,7 @@ const ReportPage = () => { or use the form. We will take actions shortly. </Text> <Text mb={4}> - {(process.env.REPORT_EMAIL || "").replace("@", "[at]")} + {(publicRuntimeConfig.REPORT_EMAIL || "").replace("@", "[at]")} </Text> <Text mb={3}> <Span bold>URL containing malware/scam:</Span> @@ -57,7 +61,7 @@ const ReportPage = () => { > <TextInput {...text("url")} - placeholder={`${process.env.DEFAULT_DOMAIN}/example`} + placeholder={`${publicRuntimeConfig.DEFAULT_DOMAIN}/example`} height={[44, 54]} width={[1, 1 / 2]} flex="0 0 auto" diff --git a/client/pages/terms.tsx b/client/pages/terms.tsx index 8e19d67..a64da2a 100644 --- a/client/pages/terms.tsx +++ b/client/pages/terms.tsx @@ -1,18 +1,20 @@ +import getConfig from "next/config"; import React from "react"; -import { Flex } from "reflexbox/styled-components"; import AppWrapper from "../components/AppWrapper"; import { Col } from "../components/Layout"; +const { publicRuntimeConfig } = getConfig(); + const TermsPage = () => ( <AppWrapper> {/* TODO: better container */} <Col width={600} maxWidth="97%" alignItems="flex-start"> - <h3>{process.env.SITE_NAME} Terms of Service</h3> + <h3>{publicRuntimeConfig.SITE_NAME} Terms of Service</h3> <p> By accessing the website at{" "} - <a href={`https://${process.env.DEFAULT_DOMAIN}`}> - https://{process.env.DEFAULT_DOMAIN} + <a href={`https://${publicRuntimeConfig.DEFAULT_DOMAIN}`}> + https://{publicRuntimeConfig.DEFAULT_DOMAIN} </a> , you are agreeing to be bound by these terms of service, all applicable laws and regulations, and agree that you are responsible for compliance @@ -22,35 +24,38 @@ const TermsPage = () => ( copyright and trademark law. </p> <p> - In no event shall {process.env.SITE_NAME} or its suppliers be liable for - any damages (including, without limitation, damages for loss of data or - profit, or due to business interruption) arising out of the use or - inability to use the materials on {process.env.DEFAULT_DOMAIN} website, - even if {process.env.SITE_NAME} or a {process.env.SITE_NAME} authorized - representative has been notified orally or in writing of the possibility - of such damage. Because some jurisdictions do not allow limitations on - implied warranties, or limitations of liability for consequential or - incidental damages, these limitations may not apply to you. + In no event shall {publicRuntimeConfig.SITE_NAME} or its suppliers be + liable for any damages (including, without limitation, damages for loss + of data or profit, or due to business interruption) arising out of the + use or inability to use the materials on{" "} + {publicRuntimeConfig.DEFAULT_DOMAIN} website, even if{" "} + {publicRuntimeConfig.SITE_NAME} or a {publicRuntimeConfig.SITE_NAME}{" "} + authorized representative has been notified orally or in writing of the + possibility of such damage. Because some jurisdictions do not allow + limitations on implied warranties, or limitations of liability for + consequential or incidental damages, these limitations may not apply to + you. </p> <p> - The materials appearing on {process.env.SITE_NAME} website could include - technical, typographical, or photographic errors.{" "} - {process.env.SITE_NAME} does not warrant that any of the materials on - its website are accurate, complete or current. {process.env.SITE_NAME}{" "} - may make changes to the materials contained on its website at any time - without notice. However {process.env.SITE_NAME} does not make any - commitment to update the materials. + The materials appearing on {publicRuntimeConfig.SITE_NAME} website could + include technical, typographical, or photographic errors.{" "} + {publicRuntimeConfig.SITE_NAME} does not warrant that any of the + materials on its website are accurate, complete or current.{" "} + {publicRuntimeConfig.SITE_NAME} may make changes to the materials + contained on its website at any time without notice. However{" "} + {publicRuntimeConfig.SITE_NAME} does not make any commitment to update + the materials. </p> <p> - {process.env.SITE_NAME} has not reviewed all of the sites linked to its - website and is not responsible for the contents of any such linked site. - The inclusion of any link does not imply endorsement by{" "} - {process.env.SITE_NAME} of the site. Use of any such linked website is - at the {"user's"} own risk. + {publicRuntimeConfig.SITE_NAME} has not reviewed all of the sites linked + to its website and is not responsible for the contents of any such + linked site. The inclusion of any link does not imply endorsement by{" "} + {publicRuntimeConfig.SITE_NAME} of the site. Use of any such linked + website is at the {"user's"} own risk. </p> <p> - {process.env.SITE_NAME} may revise these terms of service for its - website at any time without notice. By using this website you are + {publicRuntimeConfig.SITE_NAME} may revise these terms of service for + its website at any time without notice. By using this website you are agreeing to be bound by the then current version of these terms of service. </p> |