Merge pull request #355 from shapehq/bugfix/avoiding-inline-environment-variable-values

Removes environment variables prefixed with NEXT_PUBLIC_

Author: simonbs

.env.example

@@ -1,8 +1,8 @@
 FRAMNA_DOCS_BASE_URL=http://localhost:3000
+FRAMNA_DOCS_TITLE=Framna Docs
+FRAMNA_DOCS_DESCRIPTION=Documentation for Framna's APIs
+FRAMNA_DOCS_HELP_URL=https://github.com/shapehq/framna-docs/wiki
 FRAMNA_DOCS_PROJECT_CONFIGURATION_FILENAME=.shape-docs.yml
-NEXT_PUBLIC_FRAMNA_DOCS_TITLE=Framna Docs
-NEXT_PUBLIC_FRAMNA_DOCS_DESCRIPTION=Documentation for Framna's APIs
-NEXT_PUBLIC_FRAMNA_DOCS_HELP_URL=https://github.com/shapehq/framna-docs/wiki
 NEXTAUTH_URL_INTERNAL=http://localhost:3000
 NEXTAUTH_SECRET=use [openssl rand -base64 32] to generate a 32 bytes value
 REDIS_URL=localhost

__test__/projects/updateWindowTitle.test.ts

@@ -1,19 +1,9 @@
 import { updateWindowTitle } from "@/features/projects/domain"
 
-test("It uses default title when there is no selection", async () => {
-  const store: { title: string } = { title: "" }
-  updateWindowTitle({
-    storage: store,
-    defaultTitle: "Demo Docs"
-  })
-  expect(store.title).toEqual("Demo Docs")
-})
-
 test("It leaves out specification when the specification has a generic name", async () => {
   const store: { title: string } = { title: "" }
   updateWindowTitle({
     storage: store,
-    defaultTitle: "Demo Docs",
     project: {
       id: "foo",
       name: "foo",
@@ -49,7 +39,6 @@ test("It leaves out version when it is the defualt version", async () => {
   const store: { title: string } = { title: "" }
   updateWindowTitle({
     storage: store,
-    defaultTitle: "Demo Docs",
     project: {
       id: "foo",
       name: "foo",
@@ -81,7 +70,6 @@ test("It adds version when it is not the defualt version", async () => {
   const store: { title: string } = { title: "" }
   updateWindowTitle({
     storage: store,
-    defaultTitle: "Demo Docs",
     project: {
       id: "foo",
       name: "foo",

src/app/(authed)/(home)/(welcome)/page.tsx

@@ -2,7 +2,7 @@ import { Box, Typography } from "@mui/material"
 import { grey } from "@mui/material/colors"
 import { env } from "@/common"
 
-const SITE_NAME = env.getOrThrow("NEXT_PUBLIC_FRAMNA_DOCS_TITLE")
+const SITE_NAME = env.getOrThrow("FRAMNA_DOCS_TITLE")
 
 const Page = () => {
   return (

src/app/(authed)/(home)/[...slug]/page.tsx

@@ -12,17 +12,17 @@ export default function Page() {
   useEffect(() => {
     navigateToSelectionIfNeeded()
   }, [project, version, specification, navigateToSelectionIfNeeded])
-  // Update the window title to match selected project.
-  const siteName = process.env.NEXT_PUBLIC_FRAMNA_DOCS_TITLE || ""
   useEffect(() => {
+    if (!project) {
+      return
+    }
     updateWindowTitle({
       storage: document,
-      defaultTitle: siteName,
       project,
       version,
       specification
     })
-  }, [siteName, project, version, specification])
+  }, [project, version, specification])
   return (
     <>
       {project && version && specification &&

src/app/(authed)/(home)/new/page.tsx

@@ -3,7 +3,7 @@ import NewProjectSteps from "@/features/new-project/view/NewProjectSteps"
 import { env, splitOwnerAndRepository } from "@/common"
 import MessageLinkFooter from "@/common/ui/MessageLinkFooter"
 
-const HELP_URL = env.get("NEXT_PUBLIC_FRAMNA_DOCS_HELP_URL")
+const HELP_URL = env.get("FRAMNA_DOCS_HELP_URL")
 
 const Page = () => {
   const repositoryNameSuffix = env.getOrThrow("REPOSITORY_NAME_SUFFIX")

src/app/auth/signin/page.tsx

@@ -7,8 +7,8 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons"
 import SignInTexts from "@/features/auth/view/SignInTexts"
 import MessageLinkFooter from "@/common/ui/MessageLinkFooter"
 
-const SITE_NAME = env.getOrThrow("NEXT_PUBLIC_FRAMNA_DOCS_TITLE")
-const HELP_URL = env.get("NEXT_PUBLIC_FRAMNA_DOCS_HELP_URL")
+const SITE_NAME = env.getOrThrow("FRAMNA_DOCS_TITLE")
+const HELP_URL = env.get("FRAMNA_DOCS_HELP_URL")
 
 export default async function SignInPage() {
   return (

src/app/layout.tsx

@@ -9,8 +9,8 @@ import { env } from "@/common"
 fontAwesomeConfig.autoAddCss = false
 
 export const metadata: Metadata = {
-  title: env.getOrThrow("NEXT_PUBLIC_FRAMNA_DOCS_TITLE"),
-  description: env.getOrThrow("NEXT_PUBLIC_FRAMNA_DOCS_DESCRIPTION")
+  title: env.getOrThrow("FRAMNA_DOCS_TITLE"),
+  description: env.getOrThrow("FRAMNA_DOCS_DESCRIPTION")
 }
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

src/composition.ts

@@ -194,7 +194,7 @@ export const gitHubHookHandler = new GitHubHookHandler({
     }),
     eventHandler: new PostCommentPullRequestEventHandler({
       pullRequestCommenter: new PullRequestCommenter({
-        siteName: env.getOrThrow("NEXT_PUBLIC_FRAMNA_DOCS_TITLE"),
+        siteName: env.getOrThrow("FRAMNA_DOCS_TITLE"),
         domain: env.getOrThrow("FRAMNA_DOCS_BASE_URL"),
         repositoryNameSuffix: env.getOrThrow("REPOSITORY_NAME_SUFFIX"),
         projectConfigurationFilename: env.getOrThrow("FRAMNA_DOCS_PROJECT_CONFIGURATION_FILENAME"),

src/features/projects/domain/updateWindowTitle.ts

@@ -4,24 +4,18 @@ import OpenApiSpecification from "./OpenApiSpecification"
 
 export default function updateWindowTitle({
   storage,
-  defaultTitle,
   project,
   version,
   specification,
 }: {
   storage: { title: string },
-  defaultTitle: string,
-  project?: Project,
+  project: Project,
   version?: Version,
   specification?: OpenApiSpecification
 }) {
-  if (!project || !version || !specification) {
-    storage.title = defaultTitle
-    return
-  }
-  if (!isSpecificationNameGeneric(specification.name)) {
+  if (version && specification && !isSpecificationNameGeneric(specification.name)) {
     storage.title = `${project.displayName} / ${version.name} / ${specification.name}`
-  } else if (!version.isDefault) {
+  } else if (version && !version.isDefault) {
     storage.title = `${project.displayName} / ${version.name}`
   } else {
     storage.title = project.displayName

src/features/sidebar/view/SplitView.tsx

@@ -2,6 +2,10 @@ import ClientSplitView from "./internal/ClientSplitView"
 import { projectDataSource } from "@/composition"
 import BaseSidebar from "./internal/sidebar/Sidebar"
 import ProjectList from "./internal/sidebar/projects/ProjectList"
+import { env } from "@/common"
+
+const SITE_NAME = env.getOrThrow("FRAMNA_DOCS_TITLE")
+const HELP_URL = env.get("FRAMNA_DOCS_HELP_URL")
 
 const SplitView = ({ children }: { children?: React.ReactNode }) => {
   return (
@@ -15,7 +19,8 @@ export default SplitView
 
 const Sidebar = () => {
   return (
-    <BaseSidebar>
+    // The site name and help URL are passed as a properties to ensure the environment variables are read server-side.
+    <BaseSidebar siteName={SITE_NAME} helpURL={HELP_URL}>
       <ProjectList projectDataSource={projectDataSource} />
     </BaseSidebar>
   )