feat: add startup details page (#1031)

Co-authored-by: Gary van Woerkens <[email protected]>

.dockerignore

@@ -6,3 +6,5 @@ node_modules
 .kontinuous
 .gitignore
 .nvmrc
+.next
+out

.gitignore

@@ -7,6 +7,7 @@ node_modules/
 
 # Next.js build output
 .next
+out
 
 # VSCode
 .vscode

.kontinuous/values.yaml

@@ -1,9 +1,7 @@
 app:
-  ~chart: app # implicit
   ~needs: [build-app]
-  containerPort: 3000
+  containerPort: 8080
   imagePackage: app # implicit
-  probesPath: /api/healthz
   # ingress:
   #   annotations:
   #     nginx.ingress.kubernetes.io/configuration-snippet: |
@@ -20,3 +18,4 @@ jobs:
         imagePackage: app
         buildArgs:
           COMMIT_SHA: "{{ $.Values.global.sha }}"
+          NEXT_PUBLIC_SITE_URL: "https://{{ $.Values.global.host }}"

Dockerfile

@@ -1,44 +1,35 @@
-FROM node:18-alpine as base
-RUN apk add --no-cache libc6-compat
+# Install dependencies only when needed
+FROM node:16-alpine3.18 AS base
+RUN apk add --no-cache libc6-compat=1.2.4-r1
 WORKDIR /app
+COPY package.json yarn.lock ./
 
-# Rebuild the source code only when needed
-FROM base AS builder
-ARG NEXT_PUBLIC_MATOMO_URL
-ENV NEXT_PUBLIC_MATOMO_URL $NEXT_PUBLIC_MATOMO_URL
-ARG NEXT_PUBLIC_MATOMO_SITE_ID
-ENV NEXT_PUBLIC_MATOMO_SITE_ID $NEXT_PUBLIC_MATOMO_SITE_ID
-ENV NEXT_TELEMETRY_DISABLED 1
+# Keep yarn install cache when bumping version and dependencies still the sames
+RUN node -e " \
+  const package = JSON.parse(fs.readFileSync('/app/package.json')); \
+  const packageZero = { ...package, version: '0.0.0' };  \
+  fs.writeFileSync('/app/package.json', JSON.stringify(packageZero));"
 
-# install deps
-# COPY yarn.lock .yarnrc.yml ./
-# COPY .yarn ./.yarn
-# RUN yarn fetch
+FROM node:16-alpine3.18 as deps
+WORKDIR /app
+COPY --from=base /app/package.json /app/yarn.lock ./
+RUN yarn install --frozen-lockfile --ignore-scripts
 
-# build
+# Rebuild the source code only when needed
+FROM node:16-alpine3.18 AS builder
+
+ENV NODE_ENV production
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-RUN yarn install --frozen-lockfile --production --ignore-scripts
 RUN yarn build
 
 # Production image, copy all the files and run next
-FROM base AS runner
+FROM ghcr.io/socialgouv/docker/nginx:sha-1d70757 AS runner
 
-ENV NODE_ENV production
-ENV NEXT_TELEMETRY_DISABLED 1
-
-RUN addgroup --system --gid 1001 nodejs && \
-  adduser --system --uid 1001 nextjs
+USER 101
 
-# You only need to copy next.config.js if you are NOT using the default configuration
-COPY --from=builder /app/next.config.js ./
-COPY --from=builder /app/public ./public
+COPY --from=builder /app/out /usr/share/nginx/html
 
-# Automatically leverage output traces to reduce image size
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-
-USER 1001
-EXPOSE 3000
-ENV PORT 3000
-
-CMD ["node", "server.js"]
+# Disable nextjs telemetry
+ENV NEXT_TELEMETRY_DISABLED 1

next.config.js

@@ -1,13 +1,16 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: "standalone",
+  output: "export",
   webpack: (config) => {
     config.module.rules.push({
       test: /\.woff2$/,
       type: "asset/resource",
     })
     return config
   },
+  images: {
+    unoptimized: true,
+  },
 }
 
 module.exports = nextConfig

package.json

@@ -23,7 +23,6 @@
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "sharp": "^0.32.4",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6"
   },

src/app/startups/[id]/get-startup.ts

@@ -0,0 +1,18 @@
+import json from "../startups.json"
+
+type Startup = Extract<(typeof json)["data"][number], { attributes: any }>
+
+export default function getStartup(id: string): Startup {
+  const { data: startups } = json
+
+  return (
+    startups
+      .filter(
+        (startup) =>
+          startup.id === id &&
+          startup.type === "startup" &&
+          startup.relationships.incubator.data.id === "sgmas"
+      )
+      .pop() || ({ attributes: {} } as Startup)
+  )
+}

src/app/startups/[id]/page.tsx

@@ -0,0 +1,111 @@
+import Image from "next/image"
+// import { remark } from "remark"
+import { fr } from "@codegouvfr/react-dsfr"
+// import type { MDXComponents } from "mdx/types"
+// import { MDXRemote } from "next-mdx-remote/rsc"
+
+import getStartup from "./get-startup"
+import getStartups from "../get-startups"
+
+export async function generateStaticParams() {
+  const startups = getStartups()
+
+  return startups.map((startup) => ({
+    id: startup.id,
+  }))
+}
+
+export default async function Details({
+  params: { id },
+}: {
+  params: { id: string }
+}) {
+  const startup = getStartup(id)
+
+  const { attributes } = startup
+  const {
+    name,
+    link,
+    pitch,
+    contact,
+    stats_url,
+    repository,
+    accessibility_status,
+    content_url_encoded_markdown,
+  } = attributes
+
+  // const markdown = await remark().process(
+  //   decodeURIComponent(content_url_encoded_markdown)
+  // )
+
+  // const component = {
+  //   h2: ({ children }: { children: React.ReactNode }) => (
+  //     <h2 className="fr-h2">{children}</h2>
+  //   ),
+  //   h3: ({ children }: { children: React.ReactNode }) => (
+  //     <h2 className="fr-h3">{children}</h2>
+  //   ),
+  //   p: ({ children }: { children: React.ReactNode }) => (
+  //     <p className="mb-6">{children}</p>
+  //   ),
+  //   ul: ({ children }: { children: React.ReactNode }) => (
+  //     <ul className="mb-6">{children}</ul>
+  //   ),
+  //   a: ({ children, ...props }: { children: React.ReactNode }) => (
+  //     <a {...props} target="_blank" rel="noopener">
+  //       {children}
+  //     </a>
+  //   ),
+  // } as MDXComponents
+
+  const theme = fr.getColors(false)
+  const blueCumulus = theme.decisions.background.alt.blueCumulus.default
+
+  return (
+    <div className="startups-details">
+      <div className="fr-py-6w">
+        <div className="fr-container flex">
+          <div className="flex-1">
+            <h1 className="fr-h1">{name}</h1>
+            <p className="fr-h3">{pitch}</p>
+            <div>
+              <a href={link} target="_blank" rel="noopener">
+                {link}
+              </a>
+            </div>
+          </div>
+          <div>
+            <Image
+              width={400}
+              height={200}
+              alt="image d'illustration de la startup"
+              src={`https://beta.gouv.fr/img/startups/${id}.png`}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="fr-py-6w" style={{ backgroundColor: blueCumulus }}>
+        <div className="fr-container">
+          <div>
+            <b>stats</b>: {stats_url}
+          </div>
+          <div>
+            <b>contact</b>: {contact}
+          </div>
+          <div>
+            <b>repository</b>: {repository}
+          </div>
+          <div>
+            <b>accessibility status</b>: {accessibility_status}
+          </div>
+        </div>
+      </div>
+      {/* <div className="fr-py-6w">
+        <div className="fr-container">
+          <MDXRemote source={markdown} components={component} />
+        </div>
+      </div> */}
+    </div>
+  )
+}