From 4485944fc3aa0f26899612fe90e2a6952583476e Mon Sep 17 00:00:00 2001 From: Nicholas Bucher Date: Thu, 12 Sep 2024 13:05:53 -0400 Subject: [PATCH 01/10] changelog Signed-off-by: Nicholas Bucher --- changelog/v0.0.36/custom-pages.yaml | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 changelog/v0.0.36/custom-pages.yaml diff --git a/changelog/v0.0.36/custom-pages.yaml b/changelog/v0.0.36/custom-pages.yaml new file mode 100644 index 00000000..504cc325 --- /dev/null +++ b/changelog/v0.0.36/custom-pages.yaml @@ -0,0 +1,5 @@ +changelog: + - type: FIX + issueLink: https://github.com/solo-io/solo-projects/issues/6860 + description: >- + Adds the ability for users to create custom pages that show up in the UI. From d61236142173ea34bf794eafe0f116bfa4da0da0 Mon Sep 17 00:00:00 2001 From: Nicholas Bucher Date: Fri, 13 Sep 2024 15:59:38 -0400 Subject: [PATCH 02/10] added more custom pages styles, and updated readme Signed-off-by: Nicholas Bucher --- Dockerfile | 4 +- Makefile | 7 + README.md | 4 +- projects/ui/package.json | 1 + projects/ui/public/pages/another-page.html | 44 ++++++ projects/ui/public/pages/custom-page.md | 37 +++++ projects/ui/public/pages/gg-logo.png | Bin 0 -> 2536 bytes .../DocsTab/DocsTabContent.tsx | 26 +--- projects/ui/src/Components/App.tsx | 23 ++-- .../ui/src/Components/AppContentRoutes.tsx | 19 +++ .../Components/Common/MarkdownRenderer.tsx | 74 ++++++++++ .../CustomPage/Content/CustomHtmlPage.tsx | 21 +++ .../CustomPage/Content/CustomMarkdownPage.tsx | 31 +++++ .../CustomPage/CustomPageLanding.tsx | 109 +++++++++++++++ .../Structure/BasicAuthVariant/Header.tsx | 12 +- .../ui/src/Components/Structure/Footer.tsx | 4 +- .../src/Components/Structure/Header.style.tsx | 7 +- projects/ui/src/Context/AppUtilsContext.tsx | 38 ++++++ .../Styles/global-styles/highlight.js.min.css | 126 ++++++++++++++++++ projects/ui/src/Styles/global-styles/index.ts | 2 + .../ui/src/Styles/global-styles/site.style.ts | 2 +- .../src/Styles/global-styles/style-reset.css | 2 +- projects/ui/src/Utility/utility.ts | 32 ++++- projects/ui/src/user_variables.tmplr.ts | 22 +++ projects/ui/yarn.lock | 5 + readme_assets/custom-pages-navbar.png | Bin 0 -> 21290 bytes 26 files changed, 609 insertions(+), 43 deletions(-) create mode 100644 projects/ui/public/pages/another-page.html create mode 100644 projects/ui/public/pages/custom-page.md create mode 100644 projects/ui/public/pages/gg-logo.png create mode 100644 projects/ui/src/Components/Common/MarkdownRenderer.tsx create mode 100644 projects/ui/src/Components/CustomPage/Content/CustomHtmlPage.tsx create mode 100644 projects/ui/src/Components/CustomPage/Content/CustomMarkdownPage.tsx create mode 100644 projects/ui/src/Components/CustomPage/CustomPageLanding.tsx create mode 100644 projects/ui/src/Context/AppUtilsContext.tsx create mode 100644 projects/ui/src/Styles/global-styles/highlight.js.min.css create mode 100644 readme_assets/custom-pages-navbar.png diff --git a/Dockerfile b/Dockerfile index 3b3f43cc..7dc8da41 100644 --- a/Dockerfile +++ b/Dockerfile @@ -45,7 +45,8 @@ ENV VITE_PORTAL_SERVER_URL=$VITE_PORTAL_SERVER_URL \ 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 + VITE_COMPANY_NAME=$VITE_COMPANY_NAME \ + VITE_CUSTOM_PAGES=$VITE_CUSTOM_PAGES # Copy the server files, (this includes the UI build). WORKDIR /app @@ -70,4 +71,5 @@ ENTRYPOINT VITE_PORTAL_SERVER_URL=$VITE_PORTAL_SERVER_URL \ VITE_APIS_IMAGE_URL=$VITE_APIS_IMAGE_URL \ VITE_LOGO_IMAGE_URL=$VITE_LOGO_IMAGE_URL \ VITE_COMPANY_NAME=$VITE_COMPANY_NAME \ + VITE_CUSTOM_PAGES=$VITE_CUSTOM_PAGES \ node ./bin/www diff --git a/Makefile b/Makefile index ccfdb8fc..eae3def5 100644 --- a/Makefile +++ b/Makefile @@ -104,6 +104,13 @@ ifneq ($(VITE_COMPANY_NAME),) else ifneq ($(COMPANY_NAME),) UI_ARGS += VITE_COMPANY_NAME=$(COMPANY_NAME) endif +# +# CUSTOM PAGES +ifneq ($(VITE_CUSTOM PAGES),) + UI_ARGS += VITE_CUSTOM PAGES=$(VITE_CUSTOM_PAGES) +else ifneq ($(CUSTOM_PAGES),) + UI_ARGS += VITE_CUSTOM_PAGES=$(CUSTOM_PAGES) +endif diff --git a/README.md b/README.md index fa8203bb..d39ff7e3 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ This is an example Solo.io Gloo Platform Dev Portal frontend app, built with [Vi 2. Build your image. ```sh - docker build -t "your-image-name" + docker build -t "your-image-name" . ``` 3. Push your image: @@ -137,6 +137,8 @@ You can add these environment variables to a `.env.local` file in the `projects/ - `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. +- `VITE_CUSTOM_PAGES` - This is an optional value that describes Markdown or HTML custom pages that have been added to the `projects/ui/src/public` folder. In order to test this feature out out with the provided examples, set your `VITE_CUSTOM_PAGES` value to: `'[{"title": "Custom Page", "path": "/pages/custom-page.md"}, {"title": "Another Page", "path": "/pages/another-page.html"}]'`. When the website is opened, there should be two new pages in the top navigation bar (one for the `"Custom Page"` using Markdown, and one for `"Another Page"`, using HTML). + ![custom pages example](readme_assets/custom-pages-navbar.png) #### Environment Variables for PKCE Authorization Flow diff --git a/projects/ui/package.json b/projects/ui/package.json index 17e5eeb8..dbed14df 100644 --- a/projects/ui/package.json +++ b/projects/ui/package.json @@ -25,6 +25,7 @@ "@mantine/hooks": "^6.0.6", "@types/color": "^3.0.6", "color": "^4.2.3", + "highlight.js": "^11.10.0", "mobx": "^6.8.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/projects/ui/public/pages/another-page.html b/projects/ui/public/pages/another-page.html new file mode 100644 index 00000000..548dce60 --- /dev/null +++ b/projects/ui/public/pages/another-page.html @@ -0,0 +1,44 @@ + + + + + +

Custom HTML Page

+ +

Section 1

+ +
    +
  • This is an example custom page.
    • +
  • Feel free to update this to your needs.
    • +
+ +

Section 2

+ +

Any HTML content can go here.

+ + Here is an image: +
+ Gloo Gateway Logo + +
+ + + diff --git a/projects/ui/public/pages/custom-page.md b/projects/ui/public/pages/custom-page.md new file mode 100644 index 00000000..dfb8f633 --- /dev/null +++ b/projects/ui/public/pages/custom-page.md @@ -0,0 +1,37 @@ +# Markdown Page Test (h1) + +This is a custom Markdown page test. + +## Section 1 (h2) + +- Supports bullet points +- Supports bullet points + +### 1.1 (h3) + +Testing that **Bold works** here. + +#### 1.1.1 (h4) + +Testing that _Italics works_ here. + +##### 1.1.1 (h5) + +Links work: [www.solo.io](www.solo.io) + +1. Numbered lists work +2. test +3. test + +Images work: + +![Gloo Gateway Logo](/pages/gg-logo.png) + +And code does too: + +```ts +const x = 123; +function y() { + return x + 5; +} +``` diff --git a/projects/ui/public/pages/gg-logo.png b/projects/ui/public/pages/gg-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..053935de9010d88b230d5a5c7f2ae2212e9f9476 GIT binary patch literal 2536 zcmbVOc{J1u8~)80V~KHXCD{oXlzqL~h7e*JGuDi)>?X2IQe)gfV~UEgOqRGvcG;3; zWN)aHWM9g@4G~w!r}Le2|NhSR$MZhVyPfx(_mB6y_ib%1adQfD0sz2mVU9o^bL26o z?9gK?s9+^=OrTKYC1arcoygL$gYb5+xNdC?C>(2c02J>FKz^4TL--f~z>*6BSdJO= zJC+OnHyfGD@~@`;F3f={+5!Lv(gIysyQB#ots~zz8u7N<4Pu%irvtntli7^Ymx}s`dW7ie5vS zFjxE5QC})B6BRtp6Mz2r*32w&3$w?(S7bqq8Gqjk6=|Ge@k|QvIT_FRu{|jhTR(bc zUg;(@u5*`G8+s)o@hf2O|pH66ybDPGsWa>CCyE1tdXTYcq0;i_l)oiI(a%ErGcfgp& zp~TsdzZZNhBAQGqwHi(*KW+bP))+`^n^X^NM7_QS#1l&7siM`PbjcY$FMNGSgFB&Q z9PTfp$3o!<%8=AMZ8~LDcnx<^5ILxh?3y-&ztU)brl0S>ay*VKxgyv#oF2Dx?IpGN zb)9fqnb&eBtdgnNe#p{zphm+G$X>KCk1~cZ_Vgg{?NGB%WDB)j!StHw-|iNQ?;Tt2gL|y^Fo`@u1WiDG!ho-QM{S#;OA0}6tA|V zfcA+cx1^6ZGk}z)xBPcA9^cfprfqSlmm!Yls_tg`C)XxFod~|CP_vW$I(z9y&0h9e zOq!6yI`2v^hOEBv@gbI@{zQP870GV}^kLtMC#WunJX>8P%G~Iag=qhi9B+$|K(Tj}m0>!8`du61dG;AjLp{j zQ0vZfQ8E?e>AbeoQ}GP*UndI1G@1d|G^QzzcjkI$C~xoA{^TjmqB~5q&t!ic$@iWP zF&I@O_w0?b<2rT0e{FPq^>&bXw>aXvFHJKc4VvAUL!TSN-TdYzQ#n#;=9+q@ckmf3 zwnF_aB{^&_d;frcW3-=FHHsl6kyF!Z*cPsI_K3_%KApnMwQr=jp2XyJenD%$=viyM z?SiNlN?CU@|AjAVRpRO{fjZ7ZXDH)$TU`*UEbHrIj}Ku!BF+$zAcenYg3qtSn%Di5 za;peI=uv@gR?LzcwC5zy%~7wI%nj=1uIEaA0LZPq-Ex?J#fhFog?|AK7)^6kR5frD z_hbXiFV} zh$v~D3pZ;$7kpNp*lZzMCx+gjl$ zLpwz67~aTf^bxI<>bp#k{;SYa6*OcAf71lfHulk#<;VVi3ICc*nJHt+hXrIt0A$!J zs~V-ic8l7$Ncg(%lL_qG>R``6v~&Ntm?=xYh=L76K`{B2q(Y8Lo>Z1PcXjI!?+AFt zFWUp2q9^#}^Iv($nRgQTy&;K5*srr`K3gsqs?v-&w8QOGMy?Q425{IDpl}I=LIsWs zvcj+cNjePCi8>4FLbS&yL55?Vr@xS)r~7DEk^sFw1h1w-g!sAH>i)p8<$1h#40z_v z&`*L_4N+G1c`nN8yzDDHsOm%y0I+ANI-?Peuic9m$(wVVl;nGYY=p@{$3u@@(atvoA)~<(L zZ9p2Q5CWT@2ugc>R!VfXp4bp}Q+~)-$=!_-RWYjjtOTF(Ci7J;<{dGFeH+DDyl4|4 z=<_Lrl_k#{V8P%zx5h*_*GPE1Vl5xf9jd}paWjtewhj*sQG*_xqfUW11%t{$@D_QfVc#0}9 z^;uGTmEN~=2J+=SIfFW9&c&IB4=6EuNXiCz)0SnnEL3O^Y2G!vaGwkrv9DJQYPxiM zO(}!cfs3HaCJ}FFyNTctRu>htFAou3YZA>vgxIF=>2k|U_rce;qR&>Nf}lvEN5DWP0m85O)m4#zs2?mapE7jWQkoR@!vf5O9iZQ`u?GTsnGU z(R;TviPXe)Lo{Vy@IEb{_tT);}Rm*UaHze#M z1Xg-?B-rBMuF~{q!rU{#9` css` - padding: 30px; - * { - margin: revert; - padding: revert; - font-family: revert; - font-weight: revert; - } - blockquote p { - color: ${theme.augustGrey}; - } - ` -); +import MarkdownRenderer from "../../../Common/MarkdownRenderer"; const DocsTabContent = ({ selectedApiVersion, @@ -29,11 +11,7 @@ const DocsTabContent = ({ return ( - - - {selectedApiVersion.documentation} - - + ); diff --git a/projects/ui/src/Components/App.tsx b/projects/ui/src/Components/App.tsx index 9dc89cb4..c0315548 100644 --- a/projects/ui/src/Components/App.tsx +++ b/projects/ui/src/Components/App.tsx @@ -1,6 +1,7 @@ import { Global, ThemeProvider } from "@emotion/react"; import { MantineProvider } from "@mantine/core"; import { AppContextProvider } from "../Context/AppContext"; +import { AppUtilsContextProvider } from "../Context/AppUtilsContext"; import { defaultTheme, globalStyles } from "../Styles"; import { mantineThemeOverride } from "../Styles/global-styles/mantine-theme"; import PortalServerTypeChecker from "../Utility/PortalServerTypeChecker"; @@ -15,17 +16,19 @@ export function App() { return ( - - + + + - - - - + + + + + ); } diff --git a/projects/ui/src/Components/AppContentRoutes.tsx b/projects/ui/src/Components/AppContentRoutes.tsx index aaec904c..e7d89cfb 100644 --- a/projects/ui/src/Components/AppContentRoutes.tsx +++ b/projects/ui/src/Components/AppContentRoutes.tsx @@ -4,9 +4,11 @@ import { Navigate, Route, Routes } from "react-router-dom"; import { AppContext } from "../Context/AppContext"; import { AuthContext } from "../Context/AuthContext"; import { + customPages, oidcAuthCodeConfigCallbackPath, oidcAuthCodeConfigLogoutPath, } from "../user_variables.tmplr"; +import { getCustomPagePath } from "../Utility/utility"; import AdminSubscriptionsPage from "./AdminSubscriptions/AdminSubscriptionsPage"; import AdminTeamsPage from "./AdminTeams/AdminTeamsPage"; import { ApiDetailsPage } from "./ApiDetails/ApiDetailsPage"; @@ -15,6 +17,7 @@ import { AppsPage } from "./Apps/AppsPage"; import AppDetailsPage from "./Apps/Details/AppDetailsPage"; import { ErrorBoundary } from "./Common/ErrorBoundary"; import LoggedOut from "./Common/LoggedOut"; +import CustomPageLanding from "./CustomPage/CustomPageLanding"; import { HomePage } from "./Home/HomePage"; import { Footer } from "./Structure/Footer"; import TeamDetailsPage from "./Teams/Details/TeamDetailsPage"; @@ -173,6 +176,22 @@ function AppContentRoutes() { )} )} + {customPages.map((page) => ( + <> + {getCustomPagePath(page)} + + + + } + /> + + ))}