armand1m · armand1m · Oct 11, 2020 · Oct 11, 2020
diff --git a/.env.example b/.env.example
@@ -3,4 +3,5 @@ DATABASE_SCHEMA=public
 NODE_ENV=production
 AUTH0_ENABLED=false
 LOGONAME=go.localhost
-HOSTNAME=http://localhost:3000
+HOSTNAME=localhost:3000
+PROTO=http
diff --git a/README.md b/README.md
@@ -120,7 +120,8 @@ Export needed environment variables for `envsubst`:
 export GOOGLE_CLOUD_PROJECT=<gcp-project>
 export GOOGLE_CLOUD_REGION=<gcp-region>
 export CLOUDSQL_INSTANCE_NAME=<cloud-sql-instance-name>
-export HOSTNAME=https://go.mydomain.com
+export HOSTNAME=go.mydomain.com
+export PROTO=https
 export LOGONAME=golinks
 export AUHT0_ENABLED=true
 export AUTH0_DOMAIN=<auth0-domain>
@@ -264,7 +265,8 @@ DATABASE_CONNECTION_STRING=postgres://dev:[email protected]:5432/golinks
 DATABASE_SCHEMA=public
 NODE_ENV=development
 AUTH0_ENABLED=false
-HOSTNAME=http://localhost:3000
+PROTO=http
+HOSTNAME=localhost:3000
 LOGONAME=go.localhost
 EOL
 ```
@@ -293,7 +295,8 @@ AUTH0_COOKIE_SECRET=<auth0-cookie-secret>
 AUTH0_COOKIE_DOMAIN=localhost
 AUTH0_REDIRECT_URL=http://localhost:3000/api/callback
 AUTH0_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
-HOSTNAME=http://localhost:3000
+HOSTNAME=localhost:3000
+PROTO=http
 LOGONAME=go.mydomain.dev
 EOL
 
@@ -319,7 +322,8 @@ AUTH0_COOKIE_SECRET=<auth0-cookie-secret>
 AUTH0_COOKIE_DOMAIN=localhost
 AUTH0_REDIRECT_URL=http://localhost:3000/api/callback
 AUTH0_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
-HOSTNAME=http://localhost:3000
+HOSTNAME=localhost:3000
+PROTO=http
 LOGONAME=go.mydomain.dev
 EOL
 

diff --git a/components/LinkTable/index.tsx b/components/LinkTable/index.tsx
@@ -12,6 +12,7 @@ import { LinkMetricUsageGraph } from '../LinkMetricUsageGraph';
 
 interface Props {
   data: GetAllLinksQuery;
+  baseUrl: string;
   isEditEnabled: boolean;
   isDeleteEnabled: boolean;
   onEdit: (linkId: string) => void | Promise<void>;
@@ -21,6 +22,7 @@ interface Props {
 
 export const LinkTable: React.FC<Props> = ({
   data,
+  baseUrl,
   isEditEnabled,
   isDeleteEnabled,
   onEdit,
@@ -56,7 +58,19 @@ export const LinkTable: React.FC<Props> = ({
         <>
           {links?.nodes.map((link) => (
             <Table.Row key={link.id}>
-              <Table.Cell>{link.alias}</Table.Cell>
+              <Table.Cell>
+                <FannyLink
+                  href={new URL(link.alias, baseUrl).href}
+                  style={{
+                    display: 'block',
+                    maxWidth: '350px',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  }}>
+                  {link.alias}
+                </FannyLink>
+              </Table.Cell>
               <Table.Cell>
                 <FannyLink
                   href={link.url}

diff --git a/components/NotFoundAnimation/index.tsx b/components/NotFoundAnimation/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useBreakpointValue } from 'bumbag';
+import { Box, useBreakpointValue } from 'bumbag';
 import Lottie from 'react-lottie';
 import animationData from './lottiefile.json';
 
@@ -12,23 +12,33 @@ const defaultOptions = {
   },
 };
 
-export const NotFoundAnimation: React.FC = () => {
-  const width = useBreakpointValue({
-    default: 600,
-    mobile: 250,
-  });
+interface Props {
+  isMobile: boolean;
+}
 
-  const height = useBreakpointValue({
-    default: 350,
-    mobile: 150,
-  });
+export const NotFoundAnimation: React.FC<Props> = ({ isMobile }) => {
+  const width = isMobile
+    ? 250
+    : useBreakpointValue({
+        default: 600,
+        mobile: 250,
+      });
+
+  const height = isMobile
+    ? 150
+    : useBreakpointValue({
+        default: 350,
+        mobile: 150,
+      });
 
   return (
-    <Lottie
-      isClickToPauseDisabled
-      options={defaultOptions}
-      height={height}
-      width={width}
-    />
+    <Box marginBottom="major-0">
+      <Lottie
+        isClickToPauseDisabled
+        options={defaultOptions}
+        height={height}
+        width={width}
+      />
+    </Box>
   );
 };
diff --git a/components/TopNavigation/index.tsx b/components/TopNavigation/index.tsx
@@ -1,22 +1,22 @@
 import { TopNav, Heading, Button } from 'bumbag';
 
 interface Props {
-  hostname: string;
+  baseUrl: string;
   logoname: string;
   isAuthenticated: boolean;
   isAuthEnabled: boolean;
 }
 
 export const TopNavigation: React.FC<Props> = ({
-  hostname,
+  baseUrl,
   logoname,
   isAuthenticated,
   isAuthEnabled,
 }) => {
   return (
     <TopNav>
       <TopNav.Section>
-        <TopNav.Item href={hostname} fontWeight="semibold">
+        <TopNav.Item href={baseUrl} fontWeight="semibold">
           <Heading use="h3">{logoname}</Heading>
         </TopNav.Item>
       </TopNav.Section>

diff --git a/kubernetes/deployment.yaml b/kubernetes/deployment.yaml
@@ -37,6 +37,8 @@ spec:
         ports:
         - containerPort: 3000
         env:
+        - name: PROTO
+          value: ${PROTO}
         - name: HOSTNAME
           value: ${HOSTNAME}
         - name: LOGONAME

diff --git a/lib/apollo.ts b/lib/apollo.ts
@@ -19,7 +19,7 @@ function createIsomorphicLink() {
 
   if (typeof window === 'undefined') {
     const { Config } = require('./config');
-    uri = new URL('/api/graphql', Config.metadata.hostname).href;
+    uri = new URL('/api/graphql', Config.metadata.baseUrl).href;
   } else {
     uri = '/api/graphql';
   }

diff --git a/lib/auth.ts b/lib/auth.ts
@@ -66,7 +66,10 @@ export const getPermissionsFromSession = async (
     cache: true,
     rateLimit: true,
     jwksRequestsPerMinute: 5,
-    jwksUri: `https://${Config.auth0.domain}/.well-known/jwks.json`,
+    jwksUri: new URL(
+      '/.well-known/jwks.json',
+      `https://${Config.auth0.domain}`
+    ).href,
   });
 
   const signingKey = await promisify(jwksSecretClient.getSigningKey)(

diff --git a/lib/config.ts b/lib/config.ts
@@ -47,6 +47,12 @@ const ConfigSchema = Yup.object({
     hostname: Yup.string().required(
       createErrorMessageForRequiredEnv('HOSTNAME')
     ),
+    proto: Yup.string()
+      .oneOf(['http', 'https'])
+      .required(
+        createErrorMessageForRequiredEnv('PROTO', ['http', 'https'])
+      ),
+    baseUrl: Yup.string().required(),
   }).required(),
   anonymous: Yup.object({
     permissions: Yup.array<UserPermission>().required(),
@@ -104,6 +110,7 @@ const ConfigSchema = Yup.object({
 
 const createConfig = () => {
   const {
+    PROTO,
     LOGONAME,
     HOSTNAME,
     AUTH0_DOMAIN,
@@ -141,6 +148,8 @@ const createConfig = () => {
     metadata: {
       logoname: LOGONAME,
       hostname: HOSTNAME,
+      proto: PROTO,
+      baseUrl: `${PROTO}://${HOSTNAME}`,
     },
     anonymous: {
       permissions: ANONYMOUS_PERMISSIONS,

diff --git a/lib/graphql.ts b/lib/graphql.ts
@@ -16,6 +16,7 @@ const commonProperties: Partial<PostGraphileOptions> = {
   graphqlRoute: '/api/graphql',
   graphiqlRoute: '/api/graphiql',
   legacyRelations: 'omit',
+  enableQueryBatching: true,
   pgSettings: async (req) => {
     const { claims } = await getUserClaimsFromRequest(
       req as NextApiRequest
@@ -41,7 +42,6 @@ const devProperties: PostGraphileOptions = {
   allowExplain(_req) {
     return true;
   },
-  enableQueryBatching: true,
   exportGqlSchemaPath: './lib/type-defs.graphqls',
 };
 
@@ -50,7 +50,6 @@ const productionProperties: PostGraphileOptions = {
   retryOnInitFail: true,
   extendedErrors: ['errcode'],
   graphiql: false,
-  enableQueryBatching: true,
   disableQueryLog: true,
 };