Designed pages distribution, devops, infraops, help-and-support

src/apps/devdoc/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+.next

src/apps/devdoc/.eslintrc.yml

@@ -7,6 +7,7 @@ extends:
   - plugin:prettier/recommended
   - plugin:@typescript-eslint/recommended
   - plugin:import/typescript
+  - next/core-web-vitals
 
 plugins:
   - import
@@ -36,6 +37,7 @@ settings:
       extensions: [.js, .jsx, .ts, .tsx, .json]
       moduleDirectory:
         - node_modules
+        - app
     typescript:
       project: ./tsconfig.json
 

src/apps/devdoc/.gitignore

@@ -1,2 +1,2 @@
 .next
-node_modules
+node_modules

src/apps/devdoc/app/components/breadcrum.tsx

@@ -2,8 +2,8 @@ import type { Item } from 'nextra/normalize-pages';
 import type { ReactElement } from 'react';
 import { Fragment } from 'react';
 import { ChevronRight } from '@jengaicons/react';
-import { cn } from '~/utiltities/commons';
 import { Anchor } from './anchor';
+import { cn } from '../utils/commons';
 
 export function Breadcrumb({
   activePath,

src/apps/devdoc/app/components/collapse.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement, ReactNode } from 'react';
 import { useEffect, useRef } from 'react';
-import { cn } from '~/utiltities/commons';
+import { cn } from '../utils/commons';
 
 export function Collapse({
   children,

src/apps/devdoc/app/components/container.tsx

@@ -1,24 +1,15 @@
 import { ReactNode } from 'react';
-import { cn } from '~/utiltities/commons';
+import { cn } from '../utils/commons';
 
 const Container = ({
   children,
   className,
-  layout,
 }: {
   children: ReactNode;
   className?: string;
-  layout?: 'default' | 'full' | 'raw';
 }) => {
-  console.log(layout);
-
   return (
-    <div
-      className={cn(
-        'w-full md:max-w-[1440px] flex-1 m-auto flex flex-row',
-        className
-      )}
-    >
+    <div className={cn('w-full max-w-[1440px] flex-1 m-auto flex', className)}>
       {children}
     </div>
   );

src/apps/devdoc/app/components/flexsearch.tsx

@@ -11,11 +11,11 @@ import Popup from 'kl-design-system/molecule/popup';
 import { Search, X } from '@jengaicons/react';
 import Link from 'next/link';
 import { IconButton } from 'kl-design-system/atoms/button';
-import { cn } from '~/utiltities/commons';
-import { DEFAULT_LOCALE } from '~/utiltities/constants';
-import useSearch from '~/utiltities/use-search';
 import ListNavigate from './list-navigate';
 import { HighlightMatches } from './highlight-matches';
+import { DEFAULT_LOCALE } from '../utils/constants';
+import { cn } from '../utils/commons';
+import useSearch from '../utils/use-search';
 
 type SearchResult = {
   children: ReactNode;

src/apps/devdoc/app/components/footer.tsx

@@ -1,8 +1,8 @@
 import { Button } from 'kl-design-system/atoms/button';
 import Link from 'next/link';
 import { ReactNode, isValidElement } from 'react';
-import { cn } from '~/utiltities/commons';
-import { IConfig } from '~/utiltities/use-config';
+import { cn } from '../utils/commons';
+import { IConfig } from '../utils/use-config';
 
 const FooterLink = ({ to, children }: { to: string; children: ReactNode }) => {
   return (

src/apps/devdoc/app/components/frequents.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { ReactNode } from 'react';
-import { cn } from '~/utiltities/commons';
+import { cn } from '../utils/commons';
 
 export const HeaderLink = ({
   to,

src/apps/devdoc/app/components/graph.tsx

@@ -0,0 +1,93 @@
+import { ReactNode } from 'react';
+import { cn } from '../utils/commons';
+
+export const Graph = ({
+  className,
+  children,
+  blurSize = 'md',
+  responsive = false,
+}: {
+  className?: string;
+  children: ReactNode;
+  blurSize?: 'md' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+  responsive?: boolean;
+}) => {
+  return (
+    <div
+      className={cn(
+        'graph',
+        {
+          'before:bg-[100%_5%,100%_5%,5%_100%,5%_100%]': blurSize === 'xs',
+          'before:bg-[100%_7%,100%_7%,7%_100%,7%_100%]': blurSize === 'sm',
+          'before:bg-[100%_10%,100%_10%,5%_100%,5%_100%] 2xl:before:bg-[100%_10%,100%_10%,10%_100%,10%_100%]':
+            blurSize === 'md' && responsive,
+          'before:bg-[100%_10%,100%_10%,10%_100%,10%_100%]':
+            blurSize === 'md' && !responsive,
+          'before:bg-[100%_13%,100%_13%,13%_100%,13%_100%]': blurSize === 'lg',
+          'before:bg-[100%_15%,100%_15%,15%_100%,15%_100%]': blurSize === 'xl',
+          'before:bg-[100%_17%,100%_17%,17%_100%,17%_100%]': blurSize === '2xl',
+          'before:bg-[100%_20%,100%_20%,20%_100%,20%_100%]': blurSize === '3xl',
+          'before:bg-[100%_23%,100%_23%,23%_100%,23%_100%]': blurSize === '4xl',
+          'before:bg-[100%_25%,100%_25%,25%_100%,25%_100%]': blurSize === '5xl',
+        },
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const GraphItem = ({
+  className,
+  children,
+}: {
+  className?: string;
+  children?: ReactNode;
+}) => {
+  const lineVertical = () => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="2"
+      height="100%"
+      viewBox="0 0 2 480"
+      fill="none"
+      preserveAspectRatio="none"
+    >
+      <path d="M1 0.000488281L1.00002 480.001" stroke="#D4D4D8" />
+    </svg>
+  );
+
+  const lineHorizontal = () => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="2"
+      viewBox="0 0 1184 2"
+      fill="none"
+      preserveAspectRatio="none"
+    >
+      <path d="M0 1.00122L1184 1.00132" stroke="#D4D4D8" />
+    </svg>
+  );
+
+  return (
+    <div className={cn('relative', className)}>
+      <div className="absolute pointer-events-none inset-0 z-10">
+        <div className="h-[calc(100%+40px)] md:h-[calc(100%+64px)] absolute -left-xs -top-[20px] md:-top-[32px]">
+          {lineVertical()}
+        </div>
+        <div className="h-[calc(100%+40px)] md:h-[calc(100%+64px)] absolute -right-xs -top-[20px] md:-top-[32px]">
+          {lineVertical()}
+        </div>
+        <div className="w-[calc(100%+40px)] md:w-[calc(100%+64px)] absolute -top-xs -left-[20px] md:-left-[32px]">
+          {lineHorizontal()}
+        </div>
+        <div className="w-[calc(100%+40px)] md:w-[calc(100%+64px)] absolute -bottom-xs -left-[20px] md:-left-[32px]">
+          {lineHorizontal()}
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+};

src/apps/devdoc/app/components/header-secondary.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import useConfig from '~/utiltities/use-config';
 import { HeaderLink } from './frequents';
+import useConfig from '../utils/use-config';
 
 const HeaderSecondary = ({
   items,

src/apps/devdoc/app/components/header.tsx

@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { PageItem } from 'nextra/normalize-pages';
-import useMenu from '~/utiltities/use-menu';
-import useSearch from '~/utiltities/use-search';
-import useConfig from '~/utiltities/use-config';
 import { HeaderLink } from './frequents';
 import { Flexsearch } from './flexsearch';
 import MenuButton from './menu-button';
 import SearchBox from './search';
+import useMenu from '../utils/use-menu';
+import useSearch from '../utils/use-search';
+import useConfig from '../utils/use-config';
 
 const Header = ({
   navitems,

src/apps/devdoc/app/components/highlightit.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 import hljs from 'highlight.js';
-import { cn } from '~/utiltities/commons';
+import { cn } from '../utils/commons';
 
 const HighlightIt = ({
   language,

src/apps/devdoc/app/components/nav-links.tsx

@@ -3,7 +3,7 @@ import { Button } from 'kl-design-system/atoms/button';
 import Link from 'next/link';
 import type { Item } from 'nextra/normalize-pages';
 import type { ReactElement } from 'react';
-import { cn } from '~/utiltities/commons';
+import { cn } from '../utils/commons';
 
 interface NavLinkProps {
   currentIndex: number;

src/apps/devdoc/app/components/search.tsx

@@ -1,7 +1,7 @@
 import { Search } from '@jengaicons/react';
 import { IconButton } from 'kl-design-system/atoms/button';
-import { cn } from '~/utiltities/commons';
-import useSearch from '~/utiltities/use-search';
+import { cn } from '../utils/commons';
+import useSearch from '../utils/use-search';
 
 const SearchBox = ({ className }: { className?: string }) => {
   const { setShow } = useSearch();

src/apps/devdoc/app/components/sidebar.tsx

@@ -20,11 +20,11 @@ import {
 } from 'react';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { ChevronRight } from '@jengaicons/react';
-import { cn } from '~/utiltities/commons';
-import useMenu from '~/utiltities/use-menu';
 import { Collapse } from './collapse';
 import { Anchor } from './anchor';
 import Search from './search';
+import useMenu from '../utils/use-menu';
+import { cn } from '../utils/commons';
 
 const TreeState: Record<string, boolean> = Object.create(null);
 

src/apps/devdoc/app/components/toc.tsx

@@ -7,11 +7,11 @@ import { Button } from 'kl-design-system/atoms/button';
 import { ArrowSquareOut } from '@jengaicons/react';
 import Link from 'next/link';
 import { LayoutGroup, motion } from 'framer-motion';
-import { useActiveAnchor } from '~/utiltities/active-anchor';
-import { cn } from '~/utiltities/commons';
-import useConfig from '~/utiltities/use-config';
-import getGitIssueUrl from '~/utiltities/get-git-issue-url';
 import { BackToTop } from './back-to-top';
+import useConfig from '../utils/use-config';
+import { useActiveAnchor } from '../utils/active-anchor';
+import { cn } from '../utils/commons';
+import getGitIssueUrl from '../utils/get-git-issue-url';
 
 export type TOCProps = {
   headings: Heading[];

src/apps/devdoc/app/components/website/discover-component.tsx

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react';
+import { Graph, GraphItem } from '../graph';
+
+interface IFeatureItem {
+  icon: any;
+  label: ReactNode;
+}
+const FeatureItem = ({ icon: Icon, label }: IFeatureItem) => {
+  return (
+    <div className="p-4xl flex flex-col justify-between gap-4xl bg-surface-basic-default min-h-[256px]">
+      <span
+        className="flex items-center justify-center rounded-full text-text-on-primary h-10xl w-10xl"
+        style={{
+          background: 'linear-gradient(170deg, #3B82F6 6.19%, #1E3A8A 95.65%)',
+        }}
+      >
+        <Icon icon={48} />
+      </span>
+      <span className="headingLg text-text-default">{label}</span>
+    </div>
+  );
+};
+
+interface IDiscover {
+  title: ReactNode;
+  desc: ReactNode;
+  features: {
+    label: string;
+    icon: any;
+  }[];
+}
+const Discover = ({ features, title, desc }: IDiscover) => {
+  return (
+    <>
+      <div className="flex flex-col gap-3xl text-center">
+        <div className="flex flex-col gap-md">
+          <p className="bodyXl-medium text-text-disabled">Salient features</p>
+          <h3 className="heading5xl-marketing text-text-default">{title}</h3>
+        </div>
+        <p className="bodyXl-medium text-text-soft">{desc}</p>
+      </div>
+      <Graph className="-mx-10xl">
+        <div className="grid grid-cols-4 gap-5xl px-10xl py-10xl">
+          {features.map((feature) => (
+            <GraphItem key={feature.label}>
+              <FeatureItem {...feature} />
+            </GraphItem>
+          ))}
+        </div>
+      </Graph>
+    </>
+  );
+};
+
+export default Discover;