Merge pull request #90 from solo-io/charlesthebird/imageUrlCustomizations

Additional image url and logo customizations

Author: Charlesthebird

Dockerfile

@@ -9,7 +9,11 @@ ENV VITE_PORTAL_SERVER_URL=$VITE_PORTAL_SERVER_URL \
     VITE_OIDC_AUTH_CODE_CONFIG_CALLBACK_PATH=$VITE_OIDC_AUTH_CODE_CONFIG_CALLBACK_PATH \
     VITE_OIDC_AUTH_CODE_CONFIG_LOGOUT_PATH=$VITE_OIDC_AUTH_CODE_CONFIG_LOGOUT_PATH \
     VITE_SWAGGER_CONFIG_URL=$VITE_SWAGGER_CONFIG_URL \
-    VITE_AUDIENCE=$VITE_AUDIENCE
+    VITE_AUDIENCE=$VITE_AUDIENCE \
+    VITE_HOME_IMAGE_URL=$VITE_HOME_IMAGE_URL \
+    VITE_APIS_IMAGE_URL=$VITE_APIS_IMAGE_URL \
+    VITE_LOGO_IMAGE_URL=$VITE_LOGO_IMAGE_URL \
+    VITE_COMPANY_NAME=$VITE_COMPANY_NAME
 
 # Copy files for build
 WORKDIR /app
@@ -34,4 +38,8 @@ ENTRYPOINT VITE_PORTAL_SERVER_URL=$VITE_PORTAL_SERVER_URL \
     VITE_OIDC_AUTH_CODE_CONFIG_LOGOUT_PATH=$VITE_OIDC_AUTH_CODE_CONFIG_LOGOUT_PATH \
     VITE_SWAGGER_CONFIG_URL=$VITE_SWAGGER_CONFIG_URL \
     VITE_AUDIENCE=$VITE_AUDIENCE \
+    VITE_HOME_IMAGE_URL=$VITE_HOME_IMAGE_URL \
+    VITE_APIS_IMAGE_URL=$VITE_APIS_IMAGE_URL \
+    VITE_LOGO_IMAGE_URL=$VITE_LOGO_IMAGE_URL \
+    VITE_COMPANY_NAME=$VITE_COMPANY_NAME \
     yarn build && yarn run vite preview --port 4000 --host

Makefile

@@ -76,6 +76,34 @@ ifneq ($(VITE_AUDIENCE),)
 else ifneq ($(AUDIENCE),)
 	UI_ARGS += VITE_AUDIENCE=$(AUDIENCE)
 endif
+#
+# HOME_IMAGE_URL
+ifneq ($(VITE_HOME_IMAGE_URL),)
+	UI_ARGS += VITE_HOME_IMAGE_URL=$(VITE_HOME_IMAGE_URL)
+else ifneq ($(HOME_IMAGE_URL),)
+	UI_ARGS += VITE_HOME_IMAGE_URL=$(HOME_IMAGE_URL)
+endif
+#
+# APIS_IMAGE_URL
+ifneq ($(VITE_APIS_IMAGE_URL),)
+	UI_ARGS += VITE_APIS_IMAGE_URL=$(VITE_APIS_IMAGE_URL)
+else ifneq ($(APIS_IMAGE_URL),)
+	UI_ARGS += VITE_APIS_IMAGE_URL=$(APIS_IMAGE_URL)
+endif
+#
+# LOGO_IMAGE_URL
+ifneq ($(VITE_LOGO_IMAGE_URL),)
+	UI_ARGS += VITE_LOGO_IMAGE_URL=$(VITE_LOGO_IMAGE_URL)
+else ifneq ($(LOGO_IMAGE_URL),)
+	UI_ARGS += VITE_LOGO_IMAGE_URL=$(LOGO_IMAGE_URL)
+endif
+#
+# COMPANY_NAME
+ifneq ($(VITE_COMPANY_NAME),)
+	UI_ARGS += VITE_COMPANY_NAME=$(VITE_COMPANY_NAME)
+else ifneq ($(COMPANY_NAME),)
+	UI_ARGS += VITE_COMPANY_NAME=$(COMPANY_NAME)
+endif
 
 
 

README.md

@@ -4,6 +4,8 @@
 
 This is an example Solo.io Gloo Platform Dev Portal frontend app, built with [Vite](https://vitejs.dev/), and configured to use React and Typescript. It can be used to view information about your APIs and usage plans, add or delete API keys, and view your OpenAPI schemas using an embedded [Redoc UI](https://github.com/Redocly/redoc) or [Swagger UI](https://swagger.io/tools/swagger-ui/) view. It also can be personalized with images and colors to match your branding and preferences.
 
+![homepage](readme_assets/banner.png "The home page with the default images.")
+
 ## Setup
 
 **For the full setup instructions, including the required Gloo Gateway Kubernetes resources, please check the [solo.io docs site](https://docs.solo.io/gloo-gateway/main/portal/dev-portal/frontend/portal-frontend/). The following steps assume that these resources are already applied.**
@@ -123,6 +125,7 @@ All icons can be found, as the others, in the `/Assets` folder, inside `/Icons`.
 
 You can add these environment variables to a `.env.local` file in the `projects/ui` folder. All Vite environment variables need to start with `VITE_` in order for the app to be able to read them.
 
+- `VITE_COMPANY_NAME` - This is the company name that is used for your Portal.
 - `VITE_PORTAL_SERVER_URL` - This is the URL for the Gloo Platform Portal REST server. The default value is "/v1".
   - Note: If using the example `RouteTable` for the "oidcAuthorizationCode" `ExtAuthPolicy` configuration, this should be set to "/portal-server/v1"
 - `VITE_SWAGGER_CONFIG_URL` - This is an optional URL for your Swagger configuration file. The URL can be an absolute or relative path, and can be a JSON or YAML file. If you would like to configure the Swagger UI using the [Swagger UI configuration options](https://swagger.io/docs/open-source-tools/swagger-ui/usage/configuration/), you can do this by:
@@ -131,6 +134,9 @@ You can add these environment variables to a `.env.local` file in the `projects/
   3. verifying your changes (with the `make run-ui` command),
   4. rebuilding the project.
 - `VITE_AUDIENCE` - This is an optional parameter if using Auth0 and need to send an audience parameter in your authorization requests. This should not be URL encoded, since it will be URL encoded when the request is sent.
+- `VITE_HOME_IMAGE_URL` - This is an optional parameter to set the image URL on the home page.
+- `VITE_APIS_IMAGE_URL` - This is an optional parameter to set the image URL on the apis page.
+- `VITE_LOGO_IMAGE_URL` - This is an optional parameter to set the image URL for the logo in the upper left.
 
 #### Environment Variables for PKCE Authorization Flow
 
@@ -156,3 +162,11 @@ In your Keycloak administration console, make sure that "Direct Access Grants" i
 ## Creating Releases
 
 When making a new release, use the GitHub UI, and name your release in the format: v1.2.3. When the release is published, a new branch will be made (v1.2.x), and a build of that version will be tagged and published to gcr.io/solo-public/docs/portal-frontend:v1.2.3 (replacing v1.2.3 with your tag name).
+
+## Screenshots
+
+![homepage](readme_assets/homepage.png "The home page with the default images.")
+
+![apis page](readme_assets/apis.png "The apis page with the default images.")
+
+![api details page](readme_assets/api-details.png "An API details page with the default images.")

projects/ui/src/Components/Apis/gloo-gateway-components/GG_ApisPage.tsx

@@ -1,5 +1,6 @@
 import { Box } from "@mantine/core";
 import { Icon } from "../../../Assets/Icons";
+import { apisImageURL } from "../../../user_variables.tmplr";
 import { BannerHeading } from "../../Common/Banner/BannerHeading";
 import { BannerHeadingTitle } from "../../Common/Banner/BannerHeadingTitle";
 import { PageContainer } from "../../Common/PageContainer";
@@ -56,6 +57,7 @@ export function GG_ApisPage() {
   return (
     <PageContainer>
       <BannerHeading
+        bgImageURL={apisImageURL}
         title={<BannerHeadingTitle text={"APIs"} logo={<Icon.CodeGear />} />}
         description={
           "Browse the list of APIs and documentation in this portal. From here you can get the information you need to make API calls."

projects/ui/src/Components/Apis/gloo-mesh-gateway-components/GMG_ApisPage.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Icon } from "../../../Assets/Icons";
+import { apisImageURL } from "../../../user_variables.tmplr";
 import { BannerHeading } from "../../Common/Banner/BannerHeading";
 import { BannerHeadingTitle } from "../../Common/Banner/BannerHeadingTitle";
 import { ErrorBoundary } from "../../Common/ErrorBoundary";
@@ -29,6 +30,7 @@ export function GMG_ApisPage() {
   return (
     <PageContainer>
       <BannerHeading
+        bgImageURL={apisImageURL}
         title={<BannerHeadingTitle text={"APIs"} logo={<Icon.CodeGear />} />}
         description={
           "Browse the list of APIs and documentation in this portal. From here you can get the information you need to make API calls."

projects/ui/src/Components/Common/Banner/BannerHeading.tsx

@@ -45,7 +45,11 @@ export function BannerHeading({
         </Styles.BannerContent>
 
         <Styles.BannerImageContainer pageContentIsWide={pageContentIsWide}>
-          <img src={bgImageURL ?? Banner} alt="background" role="banner" />
+          <img
+            src={!!bgImageURL ? bgImageURL : Banner}
+            alt="background"
+            role="banner"
+          />
         </Styles.BannerImageContainer>
       </Styles.BannerHeadingContentContainer>
     </>

projects/ui/src/Components/Common/CustomPagination.tsx

@@ -16,6 +16,7 @@ export interface CustomPaginationData<T> {
   onPageSizeChange: (value: string | null) => void;
   totalPages: number;
   totalItems: number;
+  pageOptions: PageOptions;
 }
 
 interface PageOptions {
@@ -80,6 +81,7 @@ export function useCustomPagination<T>(
     },
     totalPages: Math.ceil(data.length / pageSize),
     totalItems: data.length,
+    pageOptions: pageOptions,
   };
 }
 
@@ -122,10 +124,15 @@ const CustomPagination = ({
     pageSizeOptions,
     onPageSizeChange,
     totalItems,
+    pageOptions,
   },
 }: {
   customPaginationData: CustomPaginationData<any>;
 }) => {
+  // If there aren't enough items to be able to use pagination, don't show anything.
+  if (pageOptions.options.length > 0 && totalItems <= pageOptions.options[0]) {
+    return null;
+  }
   return (
     <Flex align="center" justify={"space-between"} gap={"10px"}>
       <TotalText>Total: {totalItems}</TotalText>

projects/ui/src/Components/Home/HomePage.tsx

@@ -2,7 +2,7 @@ import { Box } from "@mantine/core";
 import { useContext } from "react";
 import { NavLink } from "react-router-dom";
 import { AuthContext } from "../../Context/AuthContext";
-import { companyName } from "../../user_variables.tmplr";
+import { companyName, homeImageURL } from "../../user_variables.tmplr";
 import { BannerHeading } from "../Common/Banner/BannerHeading";
 import { BannerHeadingTitle } from "../Common/Banner/BannerHeadingTitle";
 import { Button } from "../Common/Button";
@@ -22,6 +22,7 @@ export function HomePage() {
     <PageContainer>
       <div>
         <BannerHeading
+          bgImageURL={homeImageURL}
           title={<BannerHeadingTitle text={"Developers Welcome!"} />}
           description={`Welcome to the ${companyName} Developer Portal. Connect, partner, and build with us to create the next generation of digital experiences.`}
           additionalContent={

projects/ui/src/Components/Structure/Header.style.tsx

@@ -3,6 +3,11 @@ import styled from "@emotion/styled";
 import { ContentWidthNav } from "../../Styles/ContentWidthHelpers";
 
 export namespace HeaderStyles {
+  export const StyledLogoImg = styled.img`
+    height: 90px;
+    padding: 5px 0px;
+  `;
+
   export const StyledTopNavHeader = styled.header(
     ({ theme }) => css`
       grid-area: header;
@@ -84,7 +89,9 @@ export namespace HeaderStyles {
 
           color: ${theme.externalLinkColor};
           border-bottom: 4px solid white;
-          transition: background-color 0.25s, border-bottom-color 0.25s,
+          transition:
+            background-color 0.25s,
+            border-bottom-color 0.25s,
             color 0.25s;
           &.active,
           &.active:hover,

projects/ui/src/Components/Structure/Header.tsx

@@ -3,6 +3,7 @@ import { Link, NavLink, useLocation } from "react-router-dom";
 import { ReactComponent as Logo } from "../../Assets/logo.svg";
 import { AppContext } from "../../Context/AppContext";
 import { AuthContext } from "../../Context/AuthContext";
+import { logoImageURL } from "../../user_variables.tmplr";
 import { ErrorBoundary } from "../Common/ErrorBoundary";
 import { HeaderStyles } from "./Header.style";
 import HeaderSectionLoggedIn from "./HeaderSectionLoggedIn";
@@ -63,7 +64,11 @@ export function Header() {
       <HeaderStyles.StyledTopNavContent pageContentIsWide={pageContentIsWide}>
         <div className="logoContainer">
           <Link to="/" aria-hidden="true">
-            <Logo />
+            {!!logoImageURL ? (
+              <HeaderStyles.StyledLogoImg src={logoImageURL} alt="logo" />
+            ) : (
+              <Logo />
+            )}
           </Link>
         </div>
         <div className="siteNavigating">

projects/ui/src/user_variables.tmplr.ts

@@ -32,7 +32,8 @@ function templateString(templateString: string, ...defaultValues: string[]) {
 //
 export const companyName = templateString(
   "{{ tmplr.company_name }}",
-  "Acme Co."
+  import.meta.env.VITE_COMPANY_NAME,
+  "Example Company"
 );
 document.title = companyName + " Portal";
 
@@ -124,3 +125,30 @@ export const audience = templateString(
   import.meta.env.VITE_AUDIENCE,
   ""
 );
+
+/**
+ * This is optional. Used on the home ("/") page.
+ */
+export const homeImageURL = templateString(
+  "{{ tmplr.homeImageURL }}",
+  import.meta.env.VITE_HOME_IMAGE_URL,
+  ""
+);
+
+/**
+ * This is optional. Used on the API's ("/apis") page.
+ */
+export const apisImageURL = templateString(
+  "{{ tmplr.apisImageURL }}",
+  import.meta.env.VITE_APIS_IMAGE_URL,
+  ""
+);
+
+/**
+ * This is optional. Used on the upper left corder of the website.
+ */
+export const logoImageURL = templateString(
+  "{{ tmplr.logoImageURL }}",
+  import.meta.env.VITE_LOGO_IMAGE_URL,
+  ""
+);