Merge pull request #416 from api-platform/staging

MEP

Author: ginifizz

.github/workflows/deploy.yml

@@ -123,6 +123,8 @@ jobs:
             --set=pwa.image.repository=eu.gcr.io/${{ secrets.gke-project }}/website/pwa \
             --set=pwa.image.tag=${{ inputs.docker-images-version }} \
             --set=pwa.image.pullPolicy=Always \
+            --set=pwa.resources.requests.cpu=200m \
+            --set=pwa.resources.requests.memory=700Mi \
             --set=bucket.s3Upstream=storage.googleapis.com \
             --set=bucket.s3Name=api-platform-website-v3 \
             --set=service.type=NodePort \
@@ -140,9 +142,6 @@ jobs:
             --set=php.host=${{ env.URL }} \
             --set=next.rootUrl=${{ env.URL }} \
             --set=github.key=${{ secrets.gh-key }} \
-            --set=ressources.requests.cpu=250m \
-            --set=ressources.requests.memory=256Mi \
-            --set=ressources.limits.memory=700Mi \
             --set=postgresql.global.postgresql.auth.password=$(openssl rand -base64 32 | tr -d "=+/") \
             --set=postgresql.global.postgresql.auth.username=website \
             | sed --unbuffered '/USER-SUPPLIED VALUES/,$d'
@@ -168,12 +167,11 @@ jobs:
             --set=pwa.image.repository=eu.gcr.io/${{ secrets.gke-project }}/website/pwa \
             --set=pwa.image.tag=${{ inputs.docker-images-version }} \
             --set=pwa.image.pullPolicy=Always \
+            --set=pwa.resources.requests.cpu=200m \
+            --set=pwa.resources.requests.memory=700Mi \
             --set=php.corsAllowOrigin="^$(echo "${{ join(fromJSON(env.CORS), '|') }}" | sed 's/\./\\./g')$" \
             --set=github.key=${{ secrets.gh-key }} \
             --set=next.rootUrl=${{ env.URL }} \
-            --set=ressources.requests.cpu=250m \
-            --set=ressources.requests.memory=256Mi \
-            --set=ressources.limits.memory=700Mi \
             --set=bucket.s3Upstream=storage.googleapis.com \
             --set=bucket.s3Name=api-platform-website-v3 \
             | sed --unbuffered '/USER-SUPPLIED VALUES/,$d'

helm/api-platform/templates/pwa-deployment.yaml

@@ -59,7 +59,7 @@ spec:
               path: /
               port: http
           resources:
-            {{- toYaml .Values.resources | nindent 12 }}
+            {{- toYaml .Values.pwa.resources | nindent 12 }}
       {{- with .Values.nodeSelector }}
       nodeSelector:
         {{- toYaml . | nindent 8 }}

helm/api-platform/values.yaml

@@ -25,6 +25,11 @@ pwa:
     pullPolicy: IfNotPresent
     # Overrides the image tag whose default is the chart appVersion.
     tag: ""
+  resources: 
+    requests:
+      memory: 700Mi
+      cpu: 250m
+
 
 next: 
   rootUrl: ChangeMe
@@ -59,13 +64,13 @@ postgresql:
         username: "example"
         password: "!ChangeMe!"
         database: "api"
+  # Persistent Volume Storage configuration.
+  # ref: https://kubernetes.io/docs/user-guide/persistent-volumes
+  primary:
     resources:
       requests:
         memory: 50Mi
         cpu: 1m
-  # Persistent Volume Storage configuration.
-  # ref: https://kubernetes.io/docs/user-guide/persistent-volumes
-  primary:
     persistence:
       enabled: true
       storageClass: "standard"
@@ -125,11 +130,9 @@ ingress:
 #   # choice for the user. This also increases chances charts run on environments with little
 #   # resources, such as Minikube. If you do want to specify resources, uncomment the following
 #   # lines, adjust them as necessary, and remove the curly braces after 'resources:'.
-#   limits:
-#     memory: 750Mi
 #   requests:
 #     cpu: 150m
-#     memory: 256Mi
+#     memory: 500Mi
 
 # If you use Mercure, you need the managed or the On Premise version to deploy more than one pod: https://mercure.rocks/docs/hub/cluster
 replicaCount: 1

pwa/api/doc/index.ts

@@ -1,7 +1,7 @@
 import { readFile } from "node:fs/promises";
 import path from "node:path";
 import matter from "gray-matter";
-import { extractHeadingsFromMarkdown } from "utils";
+import { extractHeadingsFromMarkdown, slugify } from "utils";
 import { Octokit } from "octokit";
 import { throttling } from "@octokit/plugin-throttling";
 import { markedHighlight } from "marked-highlight";
@@ -185,6 +185,8 @@ const absoluteImgRegex = /src="\/docs\/(.*?\.(jpg|jpeg|png|gif|svg))"/gm;
 const blankLinkRegex =
   /<a\s+([^>]*\s+)?href="http[^"]*"(?![^>]*\starget=[^>]*>)/gm;
 
+const headingRegex = /<h([2-4])>(.*?)<\/h\1>/gm;
+
 function getLang(block: string): string {
   const language = block.match(codeLanguage);
 
@@ -321,5 +323,12 @@ export const getHtmlFromGithubContent = async (
       absoluteImgRegex,
       `src="https://raw.githubusercontent.com/api-platform/docs/${version}/$1"`
     )
+    .replace(headingRegex, (match, p1, p2) => {
+      const slug = slugify(p2);
+      return `<h${p1} class="group">${p2} <a id=${slug} class="opacity-0 group-hover:opacity-100" style="
+    padding-top: 80px;
+    margin-top: -80px;
+" href=#${slug}>#</a></h${p1}>`;
+    })
     .replace(blankLinkRegex, '$& target="_blank"');
 };

pwa/app/(common)/community/page.tsx

@@ -170,8 +170,8 @@ export default async function Page() {
           </Button>
         </div>
       </ShapeSection>
-      <div className="bg-gray-100 dark:bg-blue-darkest pb-12">
-        <div className="container relative py-6">
+      <div className="bg-gray-100 dark:bg-blue-darkest after:absolute after:w-full after:h-80 after:top-full after:left-0 after:bg-gray-100 after:dark:bg-blue-darkest">
+        <div className="container relative pt-6">
           <Heading size="lg" level="h2">
             Our events
           </Heading>

pwa/app/(common)/components/RealTime.tsx

@@ -27,7 +27,6 @@ export default function RealTime() {
           <Button
             className="mt-8"
             empty
-            external
             href="/docs/core/mercure/"
             ariaLabel="Real time with Mercure"
           >

pwa/app/(common)/components/Timeline.tsx

@@ -185,7 +185,7 @@ export default function Timeline() {
             >
               paginate
             </Link>{" "}
-            and
+            and{" "}
             <Link
               href="/docs/core/validation"
               prefetch={false}
@@ -202,7 +202,7 @@ export default function Timeline() {
               className="link"
             >
               PostgreSQL
-            </Link>{" "}
+            </Link>
             ,{" "}
             <Link href="/docs/core/mongodb/" prefetch={false} className="link">
               MongoDB
@@ -244,6 +244,7 @@ export default function Timeline() {
               prefetch={false}
               className="link"
             >
+              {" "}
               extension points
             </Link>
             .

pwa/app/(common)/events/components/EventsPage.tsx

@@ -47,7 +47,7 @@ export default function EventsPage({ events }: EventsPageProps) {
   };
 
   return (
-    <div className="bg-gray-100 dark:bg-blue-black pb-12">
+    <div className="bg-gray-100 dark:bg-blue-black pb-12 relative after:absolute after:w-full after:h-80 after:top-full after:left-0 after:bg-gray-100 after:dark:bg-blue-black">
       <ShapeSection
         className="bg-blue-black h-[75vh]"
         effect="right-triangle"

pwa/app/(common)/help/page.tsx

@@ -159,8 +159,8 @@ export default async function Page() {
           />
         </div>
       </div>
-      <div className="bg-blue-extralight/50 dark:bg-blue-dark dark:text-white">
-        <div className="container xl:max-w-5xl flex flew-row items-center relative gap-16 py-12">
+      <div className="bg-blue-extralight/50 dark:bg-blue-dark dark:text-white after:absolute after:w-full after:h-80 after:top-full after:left-0 after:bg-blue-extralight/50 after:dark:bg-blue-dark">
+        <div className="container xl:max-w-5xl flex flew-row items-center relative gap-16 pt-12">
           <Image
             width={800}
             height={686}

pwa/app/(common)/resources/colouring-webby/page.tsx

@@ -27,7 +27,7 @@ export default async function Page() {
     .filter((filename: string) => path.parse(filename).ext === ".jpg")
     .map((filename: string) => path.parse(filename).name);
   return (
-    <section className="pt-16 bg-gray-100 dark:bg-blue-black">
+    <section className="pt-16 bg-gray-100 dark:bg-blue-black after:absolute after:w-full after:h-80 after:top-full after:left-0 after:bg-gray-100 after:dark:bg-blue-black">
       <div className="bg-blue py-8 text-white dark:text-blue-black">
         <div className="container relative z-10 text-white flex flex-row gap-8 justify-center items-center min-h-full">
           <div className="text-center">