website: dynamic emails and site metadata (#2056)

* emails should use current domain dynamically

* build and serve in a service

* use portal domain for site url meta

* clean up unused import

* update build job

* fix url and add safeguard

* mount cache and public gatsby dirs to improve build times

* use new env vars for abuse and contact emails

* use PORTAL_DOMAIN instead of window hostname

.github/workflows/deploy-website.yml

@@ -14,21 +14,26 @@ defaults:
   run:
     working-directory: packages/website
 
+env:
+  PORTAL_DOMAIN: siasky.net
+
 jobs:
   build:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: 16.x
+          cache: yarn
+          cache-dependency-path: packages/website/yarn.lock
 
       - run: yarn
       - run: yarn build
 
       - name: "Integration tests"
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v3
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

docker-compose.yml

@@ -97,6 +97,9 @@ services:
     container_name: website
     restart: unless-stopped
     logging: *default-logging
+    volumes:
+      - ./docker/data/website/.cache:/usr/app/.cache
+      - ./docker/data/website/.public:/usr/app/public
     env_file:
       - .env
     networks:

packages/website/Dockerfile

@@ -1,5 +1,6 @@
-# builder stage - use debian base image to avoid needing to install missing packages
+FROM node:18.1.0-alpine
-FROM node:16.14.2-bullseye as builder
+
+RUN apk add --no-cache build-base~=0.5 python3~=3.9
 
 WORKDIR /usr/app
 
@@ -20,18 +21,6 @@ COPY packages/website/gatsby-*.js \
      packages/website/tailwind.config.js \
      ./
 
-RUN yarn build
-
-# main stage - use alpine base image to minimise the resulting image footprint
-FROM node:16.14.2-alpine
-
-WORKDIR /usr/app
-
-# install http server for serving website files
-RUN npm install --global http-server@14.1.0
-
-COPY --from=builder /usr/app/public /usr/app/public
-
 EXPOSE 9000
 
-CMD ["http-server", "/usr/app/public", "-s", "-p 9000"]
+CMD ["sh", "-c", "yarn build && yarn serve --host 0.0.0.0"]

packages/website/gatsby-config.js

@@ -1,12 +1,16 @@
 const { defaultIcons } = require("gatsby-plugin-manifest/common");
 
+if (!process.env.PORTAL_DOMAIN) {
+  throw new Error("PORTAL_DOMAIN cannot be empty");
+}
+
 module.exports = {
   siteMetadata: {
     title: `Skynet`,
     description: `Skynet is a decentralized file sharing and content distribution protocol`,
     author: `Skynet Labs`,
-    siteUrl: `https://siasky.net`,
+    siteUrl: `https://${process.env.PORTAL_DOMAIN}`,
-    image: `https://siasky.net/icons/icon-512x512.png`,
+    image: `/icons/icon-512x512.png`,
   },
   plugins: [
     {
@@ -38,6 +42,12 @@ module.exports = {
     `gatsby-plugin-robots-txt`,
     `gatsby-transformer-sharp`,
     `gatsby-transformer-yaml`,
+    {
+      resolve: `gatsby-plugin-env-variables`,
+      options: {
+        allowList: ["PORTAL_DOMAIN", "WEBSITE_CONTACT_EMAIL", "WEBSITE_ABUSE_EMAIL"],
+      },
+    },
     {
       resolve: `gatsby-plugin-manifest`,
       options: {
@@ -60,7 +70,6 @@ module.exports = {
           },
         ],
         description: `Skynet portal homepage and upload widget`,
-        skylink: `AQBG8n_sgEM_nlEp3G0w3vLjmdvSZ46ln8ZXHn-eObZNjA`,
       },
     },
     {

packages/website/gatsby-node.js

@@ -1,5 +1,3 @@
-const path = require(`path`);
-
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     resolve: {

packages/website/package.json

@@ -15,6 +15,7 @@
     "framer-motion": "6.3.3",
     "gatsby": "4.13.1",
     "gatsby-background-image": "1.6.0",
+    "gatsby-plugin-env-variables": "2.2.0",
     "gatsby-plugin-image": "2.13.0",
     "gatsby-plugin-manifest": "4.13.0",
     "gatsby-plugin-postcss": "5.13.0",

packages/website/src/components/Footer/Footer.js

@@ -1,14 +1,7 @@
 import * as React from "react";
 import { LogoWhiteText } from "../Icons";
 import Link from "../Link";
-
+import emails from "../../services/emails";
-// const hostname = typeof window !== "undefined" ? window.location.hostname : "";
-// const domain = hostname.substring(hostname.lastIndexOf(".", hostname.lastIndexOf(".") - 1) + 1);
-// const emails = domain ? [`hello@${domain}`, `report@${domain}`] : [];
-
-// temporary hardcode siasky.net emails until we have environment
-// variables for them and we can reflect that in the terms of service
-const emails = ["hello@siasky.net", "report@siasky.net"];
 
 const Footer = () => {
   return (
@@ -22,19 +15,27 @@ const Footer = () => {
             </span>
           </div>
 
-          {emails.length > 0 && (
+          <div className="flex flex-col text-right space-y-2">
-            <div className="flex flex-col text-right space-y-2">
+            <div>
-              {emails.map((email) => (
+              <span className="font-content text-palette-300 text-base mr-2">contact us at</span>
-                <Link
+              <Link
-                  key={email}
+                href={`mailto:${emails.contact}`}
-                  href={`mailto:${email}`}
+                className="font-content text-palette-300 text-base underline-primary hover:text-primary transition-colors duration-200"
-                  className="font-content text-palette-300 text-base underline-primary hover:text-primary transition-colors duration-200"
+              >
-                >
+                {emails.contact}
-                  {email}
+              </Link>
-                </Link>
-              ))}
             </div>
-          )}
+
+            <div>
+              <span className="font-content text-palette-300 text-base mr-2">report abuse at</span>
+              <Link
+                href={`mailto:${emails.report}`}
+                className="font-content text-palette-300 text-base underline-primary hover:text-primary transition-colors duration-200"
+              >
+                {emails.report}
+              </Link>
+            </div>
+          </div>
         </div>
       </div>
     </div>

packages/website/src/pages/terms.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import { DomainName } from "../components/DomainName";
 import { Section } from "../components/Layout";
 import Seo from "../components/seo";
+import emails from "../services/emails";
 
 const P = ({ className, ...props }) => <p className={`my-4 leading-relaxed ${className}`} {...props} />;
 
@@ -77,8 +78,8 @@ const TermsPage = () => (
       </P>
       <P>
         <strong>Contact.</strong> Any misuse of the Services may be reported to{" "}
-        <a className="text-primary" href="mailto:report@siasky.net">
+        <a className="text-primary" href={`mailto:${emails.report}`}>
-          report@siasky.net
+          {emails.report}
         </a>
       </P>
 
@@ -222,8 +223,8 @@ const TermsPage = () => (
       <P>
         <strong>Questions.</strong> If you have any questions regarding the Terms of Use or wish to report any issue
         relating to the Website, its content or the Services you were provided, please contact us by email at{" "}
-        <a className="text-primary" href="mailto:hello@siasky.net">
+        <a className="text-primary" href={`mailto:${emails.contact}`}>
-          hello@siasky.net
+          {emails.contact}
         </a>
         .
       </P>

packages/website/src/services/emails.js

@@ -0,0 +1,6 @@
+const emails = {
+  contact: process.env.WEBSITE_CONTACT_EMAIL ?? `hello@${process.env.PORTAL_DOMAIN}`, // general contact email
+  report: process.env.WEBSITE_ABUSE_EMAIL ?? `report@${process.env.PORTAL_DOMAIN}`, // report abuse email
+};
+
+export default emails;

packages/website/yarn.lock

@@ -6299,6 +6299,11 @@ gatsby-parcel-config@^0.4.0:
     "@parcel/transformer-raw" "^2.3.2"
     "@parcel/transformer-react-refresh-wrap" "^2.3.2"
 
+gatsby-plugin-env-variables@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-env-variables/-/gatsby-plugin-env-variables-2.2.0.tgz#75793854688be8773cdc3a1e1b10f04b1836bbe6"
+  integrity sha512-znnUNqNmGE4qIq+nTaQeiTz54PQw3QRPflWWWtQg5V9ke3QcamEDVbJ1S1a2Afl5pXO7qCiXNaMMb8NFnNHdLw==
+
 gatsby-plugin-image@2.13.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-image/-/gatsby-plugin-image-2.13.0.tgz#18e78fb0b36247999dbbf42189293f6315f485f2"