Optimized font loading and public directory in devdoc

Dockerfile.devdoc

@@ -25,6 +25,7 @@ RUN pnpm build
 FROM node:20.8.1-alpine
 WORKDIR /app
 COPY --from=base /app/src/apps/devdoc/.next ./.next
+COPY --from=base /app/src/apps/devdoc/public ./public
 COPY --from=base /app/src/apps/devdoc/package.json ./package.json
 COPY --from=base /app/src/apps/devdoc/node_modules ./node_modules
 

src/apps/devdoc/app/layout/theme.tsx

@@ -76,6 +76,20 @@ const Main = ({ children, pageOpts }: NextraThemeLayoutProps) => {
         <title>{title}</title>
         <meta name="og:image" content={frontMatter.image} />
         <link rel="shortcut icon" href="/favicon.ico" />
+        <link
+          rel="preload"
+          href="/fonts/inter-cyrillic-ext.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+        <link
+          rel="preload"
+          href="/fonts/familjen.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
       </Head>
       <ActiveAnchorProvider>
         {activeThemeContext.layout !== 'raw' ? (

src/apps/devdoc/fonts/Familjen-Grotesk.css

@@ -0,0 +1,33 @@
+
+  /* latin */
+  @font-face {
+    font-family: 'Familjen Grotesk';
+    font-style: normal;
+    font-weight: 400;
+    src: url("/fonts/familjen.woff2") format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Familjen Grotesk';
+    font-style: normal;
+    font-weight: 500;
+    src: url("/fonts/familjen.woff2") format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Familjen Grotesk';
+    font-style: normal;
+    font-weight: 600;
+    src: url("/fonts/familjen.woff2") format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Familjen Grotesk';
+    font-style: normal;
+    font-weight: 700;
+    src: url("/fonts/familjen.woff2") format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }

src/apps/devdoc/fonts/Inter.css

@@ -0,0 +1,87 @@
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url(/fonts/inter-cyrillic-ext.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 200;
+    font-display: swap;
+    src: url(/fonts/inter-cyrillic-ext.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(/fonts/inter-cyrillic-ext.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/fonts/inter-cyrillic-ext.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(/fonts/inter-cyrillic-ext.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url(/fonts/inter-cyrillic-ext.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/fonts/inter-cyrillic-ext.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 800;
+    font-display: swap;
+    src: url(/fonts/inter-cyrillic-ext.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url(/fonts/inter-cyrillic-ext.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }

src/apps/devdoc/pages/_app.tsx

@@ -8,6 +8,10 @@ import { SearchProvider } from '~/app/utils/use-search';
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (
     <MenuProvider>
+      <div
+        className="loading-overlay"
+        style={{ position: 'absolute', inset: 0, background: 'white' }}
+      />
       <SearchProvider>
         <Component {...pageProps} />
       </SearchProvider>

src/apps/devdoc/pages/devops-design.mdx

@@ -3,17 +3,17 @@ import Container from '~/app/components/container';
 import HorizontalTopTabDevops from '~/app/components/website/horizontal-top-tab-devops';
 import Discover from '~/app/components/website/discover-component';
 import ReadyToOps from '~/app/components/website/ready-to-ops';
-import EmbeddedData from '../public/embedded-data.svg';
-import TroubleFree from '../public/trouble-free.svg';
-import SeamlessDev from '../public/seamless-dev.svg';
-import FasterDev from '../public/faster-dev.svg';
-import ConfigDevops from '../public/devops/config-devops.svg';
-import CreateDevops from '../public/devops/create-project-devops.svg';
-import DeployDevops from '../public/devops/deploy-devops.svg';
-import SetupDevops from '../public/devops/setup-devops.svg';
+import EmbeddedData from '../images/embedded-data.svg';
+import TroubleFree from '../images/trouble-free.svg';
+import SeamlessDev from '../images/seamless-dev.svg';
+import FasterDev from '../images/faster-dev.svg';
+import ConfigDevops from '../images/devops/config-devops.svg';
+import CreateDevops from '../images/devops/create-project-devops.svg';
+import DeployDevops from '../images/devops/deploy-devops.svg';
+import SetupDevops from '../images/devops/setup-devops.svg';
 import GetStarted from '~/app/components/website/get-started';
 import SuccessStories from '~/app/components/website/success-stories';
-import Cover from '../public/devops/cover-devops.svg';
+import Cover from '../images/devops/cover-devops.svg';
 import {
   successStories,
 } from '~/app/utils/dummy-data';

src/apps/devdoc/pages/distribution-design.mdx

@@ -2,10 +2,10 @@ import { useState } from 'react';
 import Container from '~/app/components/container';
 import Discover from '~/app/components/website/discover-component';
 import ReadyToOps from '~/app/components/website/ready-to-ops';
-import DistributeDis from '../public/distribution/distribute-distribution.svg';
-import CreateDis from '../public/distribution/create-distribution.svg';
-import BuildDis from '../public/distribution/build-distribution.svg';
-import Cover from '../public/distribution/distribution-cover.svg';
+import DistributeDis from '../images/distribution/distribute-distribution.svg';
+import CreateDis from '../images/distribution/create-distribution.svg';
+import BuildDis from '../images/distribution/build-distribution.svg';
+import Cover from '../images/distribution/distribution-cover.svg';
 import GetStarted from '~/app/components/website/get-started';
 import SuccessStories from '~/app/components/website/success-stories';
 import { Button } from 'kl-design-system/atoms/button';

src/apps/devdoc/pages/index.mdx

@@ -10,7 +10,7 @@ import ProgressTracker from "~/app/components/progress-tracker"
 import {Graph, GraphItem} from "~/app/components/graph"
 import ReadyTo from "~/app/components/website/ready-to"
 
-import Illustration from "../public/illustraion1.svg"
+import Illustration from "../images/illustraion1.svg"
 
 import { cn } from '~/app/utils/commons';
 
@@ -20,19 +20,22 @@ export const suites = [
     title: "DevOps",
     desc: "Self-Serve environments crafted for development, staging and production workloads",
     img: <DevopsIcon />,
-    imgPad: "px-[74px] py-[22px] md:px-[10px] xl:px-[74px] xl:py-[22px]"
+    imgPad: "px-[74px] py-[22px] md:px-[10px] xl:px-[74px] xl:py-[22px]",
+    to:"devops-design"
   },
   {
     title: "InfraOps",
     desc: "Flexible & Cost Effective Kubernetes Cluster Management at your fingertips",
     imgPad: "px-[45px] py-[42px]",
-    img: <InfraopsIcon />
+    img: <InfraopsIcon />,
+    to:"infraops-design"
   },
   {
     title: "Distribution",
     desc: "Cloud accelerated build system and container registry to build and ship containers anywhere",
     imgPad: "px-[76px] py-[22px]",
-    img: <DistributionIcon />
+    img: <DistributionIcon />,
+    to:"distribution-design"
   },
 ]
 
@@ -207,16 +210,16 @@ export const ChangeLogCard = () => {
   </UntoldCard>
 }
 
-export const SuiteCard = ({ title, img, imgPad, desc }) => {
-  return <div key={title} className='bg-surface-basic-default flex flex-col h-full min-h-[416px]'>
+export const SuiteCard = ({ title, img, imgPad, desc, to }) => {
+  return <Link href={to} key={title} className='bg-surface-basic-default flex flex-col h-full min-h-[416px]'>
     <span className={cn("min-h-[224px] self-center", imgPad)}>
       {img}
     </span>
     <div className="flex flex-col gap-3xl px-4xl pb-4xl md:!p-xl md:!pt-0 xl:!px-4xl xl:!pb-4xl">
       <span className="heading3xl-marketing md:!heading4xl-marketing text-text-default">{title}</span>
       <span className="bodyLg md:!bodyXl-medium text-text-strong">{desc}</span>
     </div>
-  </div>
+  </Link>
 }
 
 export const Main = () => {

src/apps/devdoc/pages/infraops-design.mdx

@@ -11,9 +11,9 @@ import Discover from '~/app/components/website/discover-component';
 import GetStarted from '~/app/components/website/get-started';
 import ReadyToOps from '~/app/components/website/ready-to-ops';
 import SuccessStories from '~/app/components/website/success-stories';
-import NodePoolImg from '../public/nodepool-simple-to-use.svg';
-import FlexibleImage from '../public/flexible-illustration.svg';
-import CostIllustration from '../public/cost-illustration.svg';
+import NodePoolImg from '../images/nodepool-simple-to-use.svg';
+import FlexibleImage from '../images/flexible-illustration.svg';
+import CostIllustration from '../images/cost-illustration.svg';
 import {
   successStories,
 } from '~/app/utils/dummy-data';

src/apps/devdoc/style.css

@@ -1,5 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
+@import url('./fonts/Familjen-Grotesk.css');
+@import url('./fonts/Inter.css');
 
 @tailwind base;
 @tailwind components;
@@ -204,7 +204,7 @@ code{
     content: '';
     position: absolute;
     top: 50%;
-    background-image: url("strike.svg");
+    background-image: url("/strike.svg");
     height: 100%;
     background-repeat: no-repeat;
     width: 110%;
@@ -237,21 +237,26 @@ code{
   }
 
   .infraops-cover-graph{
-    background-image: url("infraops/graph.svg");
+    background-image: url("/infraops/graph.svg");
     background-position: center;
   }
 
   .distribution-cover-graph{
-    background-image: url("distribution/distribution-graph.svg");
+    background-image: url("/distribution/distribution-graph.svg");
     background-position: center;
   }
 
   .help-card-graph{
-    background-image: url("help-and-support/card-graph.svg");
+    background-image: url("/help-and-support/card-graph.svg");
     background-position: right top;
     background-repeat: no-repeat;
   }
 
   .shadow-filter{
     filter: drop-shadow(0px 2px 16px rgba(33, 43, 54, 0.08)) drop-shadow(0px 0px 0px rgba(6, 44, 82, 0.10));
+  }
+
+
+  .loading-overlay{
+    display: none !important;
   }

src/apps/devdoc/tsconfig.json

@@ -45,6 +45,5 @@
   },
   "exclude": [
     "node_modules/**/*",
-    "public"
   ]
 }