Feat: Dunglas' review (#414)

* feat: add missing prefetch false
* fix: links and add screencasts and social icons in header
* internal links
* feat: add call to action to les-tilleuls.coop
* feat: increase header size
* feat: add references

Author: ginifizz

pwa/app/(common)/community/contributors/[slug]/page.tsx

@@ -145,6 +145,7 @@ export default async function Page({
             <Link
               className="uppercase font-semibold text-sm mb-2 opacity-80"
               href="/community/contributors"
+              prefetch={false}
             >
               Our contributors
             </Link>

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

@@ -2,6 +2,7 @@ import Button from "components/common/Button";
 import Heading from "components/common/typography/Heading";
 import Image from "next/image";
 import ListPoint from "./AdminListPoint";
+import Link from "components/common/Link";
 
 export default function Admin() {
   return (
@@ -19,7 +20,7 @@ export default function Admin() {
               Entirely <strong>customizable</strong>
             </ListPoint>
             <ListPoint direction="left">
-              <strong>Hydra</strong> and <strong>OpenAPI</strong> compatible
+              <strong>Hydra</strong> and <Link href="/docs/admin/openapi/" prefetch={false} className="link"><strong>OpenAPI</strong></Link> compatible
             </ListPoint>
             <ListPoint direction="left">
               Built on top of <strong>Material UI</strong> and{" "}
@@ -50,7 +51,7 @@ export default function Admin() {
           empty
           className="relative dark:border-blue-extralight dark:text-blue-extralight"
           color="white"
-          href="/docs"
+          href="/docs/admin/"
           ariaLabel="See admin interface"
         >
           Learn more

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

@@ -1,6 +1,8 @@
 import Button from "components/common/Button";
 import Heading from "components/common/typography/Heading";
 import Image from "next/image";
+import Link from "components/common/Link";
+
 import {
   VueIcon,
   NextIcon,
@@ -12,6 +14,38 @@ import {
 import ShapeSection from "components/common/ShapeSection";
 
 export default function ClientGenerator() {
+  const logos = [
+    {
+      Icon: NextIcon,
+      title: "Next.js",
+      link: "https://nextjs.org/",
+    },
+    {
+      Icon: NuxtIcon,
+      title: "Nuxt",
+      link: "https://nuxt.com/",
+    },
+    {
+      Icon: ReactIcon,
+      title: "React",
+      link: "https://react.dev/",
+    },
+    {
+      Icon: VueIcon,
+      title: "Vue.js",
+      link: "https://vuejs.org/",
+    },
+    {
+      Icon: QuasarIcon,
+      title: "Quasar",
+      link: "https://quasar.dev/",
+    },
+    {
+      Icon: VuetifyIcon,
+      title: "Vuetify",
+      link: "https://vuetifyjs.com/en/",
+    },
+  ];
   return (
     <ShapeSection
       maskColor="white"
@@ -30,20 +64,33 @@ export default function ClientGenerator() {
             Scaffold <strong>client apps</strong>
           </Heading>
           <p className="text-white/60 text-xl font-light mt-8">
-            We don&apos;t want to decide for you which front-end framework you
-            want to work with. That&apos;s why we allow you to generate a web or
-            mobile application for most popular front-end frameworks, like Vue,
-            React, or Quasar.
+           We provide a scaffolding with first-class support for <a
+              className="link"
+              href="https://nextjs.org/"
+              target="_blank"
+              rel="noreferer noopener"
+            >Next.js</a>, but don't want to decide for you which front-end framework
+           you want to work with so skeletons for many other frontend frameworks are supported such as: <Link href="/docs/create-client/nuxt/" prefetch={false} className="link">Nuxt (Vue)</Link>, <Link href="/docs/create-client/react-native/" prefetch={false} className="link">Expo (React Native)</Link>, <Link href="/docs/create-client/Quasar/" prefetch={false} className="link">Quasar</Link>, and <Link href="/docs/create-client/#generated-react-and-react-native-apps-updated-in-real-time" prefetch={false} className="link">many more...</Link>
           </p>
           <div className="flex flex-row py-8 text-blue | sm:w-1/2 | md:w-full">
-            <NextIcon className="m-2 h-10 w-auto" />
-            <NuxtIcon className="m-2 h-10 w-auto" />
-            <ReactIcon className="m-2 h-10 w-auto" />
-            <VueIcon className="m-2 h-10 w-auto" />
-            <QuasarIcon className="m-2 h-10 w-auto" />
-            <VuetifyIcon className="m-2 h-10 w-auto" />
+            {logos.map((logo) => (
+              <a
+                key={logo.title}
+                href={logo.link}
+                title={logo.title}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="hover:brightness-125 transition-all"
+              >
+                <logo.Icon className="m-2 h-10 w-auto" />
+              </a>
+            ))}
           </div>
-          <Button empty href="/docs" ariaLabel="See our managed clients">
+          <Button
+            empty
+            href="/docs/create-client"
+            ariaLabel="See our managed clients"
+          >
             Learn more
           </Button>
         </div>

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

@@ -37,7 +37,7 @@ export default function Cover() {
         <div className="relative w-full flex flex-col items-center text-center py-12 z-20 | md:w-7/12 md:ml-auto md:py-32 | lg:w-1/2">
           <Logo className="w-full max-w-sm" />
           <p className="font-title text-3xl my-6 font-semibold">
-            The API first framework
+            The API-first framework
           </p>
           <div className="flex flex-row flex-wrap items-center justify-center">
             <Button

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

@@ -18,41 +18,63 @@ export default function Features() {
         </Heading>
         <div className="w-full max-w-6xl mx-auto pt-12 flex flex-row flex-wrap justify-center">
           <FeatureItem Icon={icons.AuthenticationIcon} index={0}>
-            <Link className="link" href="/docs/core/security/">
+            <Link className="link" href="/docs/core/security/" prefetch={false}>
               Authentication and access control rules
             </Link>
           </FeatureItem>
           <FeatureItem Icon={icons.ValidationIcon} index={1}>
-            <Link className="link" href="/docs/core/validation/">
+            <Link
+              className="link"
+              href="/docs/core/validation/"
+              prefetch={false}
+            >
               Advanced data validation
             </Link>
           </FeatureItem>
           <FeatureItem Icon={icons.CacheIcon} index={2}>
-            <Link className="link" href="/docs/core/performance/">
+            <Link
+              className="link"
+              href="/docs/core/performance/"
+              prefetch={false}
+            >
               Invalidation-based HTTP cache
             </Link>
           </FeatureItem>
           <FeatureItem Icon={icons.AsynchronousIcon} index={3}>
             Asynchronous state processing
           </FeatureItem>
           <FeatureItem Icon={icons.VulcainIcon} index={4}>
-            <a
+            <Link
               className="link"
-              href="https://vulcain.rocks"
-              target="_blank"
-              rel="noreferer noopener"
+              href="/docs/core/push-relations/#pushing-related-resources-using-http2"
+              prefetch={false}
             >
-              Relation preloading avec Vulcain.rocks
-            </a>
+              Relation preloading with Vulcain.rocks
+            </Link>
           </FeatureItem>
           <FeatureItem Icon={icons.CaddyIcon} index={5}>
-            Caddy server integration HTTPS & HTTP/3
+            <Link
+              className="link"
+              href="/docs/distribution/caddy/#configuring-the-caddy-web-server"
+              prefetch={false}
+            >
+            Caddy server</Link> integration HTTPS & HTTP/3
           </FeatureItem>
           <FeatureItem Icon={icons.PaginationIcon} index={6}>
-            Automatic pagination and filtering
+            Automatic <Link
+              className="link"
+              href="/docs/core/pagination/"
+              prefetch={false}
+            >
+            pagination</Link> and <Link
+              className="link"
+              href="/docs/core/filters/"
+              prefetch={false}
+            >filtering</Link>
+
           </FeatureItem>
           <FeatureItem Icon={icons.DockerIcon} index={7}>
-            <Link className="link" href="/docs/deployment/">
+            <Link className="link" href="/docs/deployment/" prefetch={false}>
               Docker & Kubernetes setups included
             </Link>
           </FeatureItem>

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

@@ -28,7 +28,7 @@ export default function RealTime() {
             className="mt-8"
             empty
             external
-            href="https://mercure.rocks"
+            href="/docs/core/mercure/"
             ariaLabel="Real time with Mercure"
           >
             Learn more

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

@@ -1,5 +1,4 @@
 import classNames from "classnames";
-import Link from "components/common/Link";
 import Image from "next/image";
 import { Reference } from "types";
 
@@ -56,7 +55,7 @@ export default function LogoItem({
   }
 
   return (
-    <Link
+    <a
       target="_blank"
       rel="noopener noreferrer"
       href={reference.link}
@@ -74,6 +73,6 @@ export default function LogoItem({
         width={200}
         className="cursor-pointer h-full w-auto brightness-0 invert"
       />
-    </Link>
+    </a>
   );
 }

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

@@ -1,7 +1,6 @@
 import Button from "components/common/Button";
 import Heading from "components/common/typography/Heading";
 import Image from "next/image";
-import Link from "components/common/Link";
 import { Reference } from "types";
 import LogoItem from "./ReferenceLogoItem";
 
@@ -71,7 +70,7 @@ export default function References({ refs, ossRefs }: ReferencesProps) {
         </div>
         <div className="flex flex-row flex-wrap py-12">
           {refs.map((ref) => (
-            <Link
+            <a
               key={ref.name}
               href={ref.link}
               target="_blank"
@@ -85,7 +84,7 @@ export default function References({ refs, ossRefs }: ReferencesProps) {
                 width={200}
                 className="max-w-[120px] mx-auto"
               />
-            </Link>
+            </a>
           ))}
         </div>
         <Button empty href="/references">