Merge pull request #46 from kloudlite/features/design

Features/design

.dockerignore

@@ -18,3 +18,5 @@
 src/generated/node_modules
 src/generated/plugin/node_modules
 src/design-system/node_modules
+src/apps/devdoc/node_modules
+src/apps/devdoc/.next

.github/workflows/build-container.yaml

@@ -21,6 +21,14 @@ jobs:
         app:
           - auth
           - console
+          - website
+        include:
+          - app: auth
+            dockerFile: Dockerfile
+          - app: console
+            dockerFile: Dockerfile
+          - app: website
+            dockerFile: Dockerfile.website
     runs-on: ubuntu-latest
     name: Deploy to Docker Image
     steps:
@@ -47,5 +55,5 @@ jobs:
           branch_name=${GITHUB_REF#refs/heads/}
           version_string="v${branch_name#release-}-nightly"
           
-          docker build --build-arg APP=${{matrix.app}} . -t ghcr.io/kloudlite/platform/web/${{matrix.app}}:$version_string --push
-          docker build --build-arg APP=${{matrix.app}} . -t ghcr.io/kloudlite/platform/web/${{matrix.app}}:commit-${GITHUB_SHA} --push
+          docker build --build-arg APP=${{matrix.app}} -f ${{matrix.dockerFile}} . -t ghcr.io/kloudlite/platform/web/${{matrix.app}}:$version_string --push
+          docker build --build-arg APP=${{matrix.app}} -f ${{matrix.dockerFile}} . -t ghcr.io/kloudlite/platform/web/${{matrix.app}}:commit-${GITHUB_SHA} --push

Dockerfile.website

@@ -0,0 +1,17 @@
+FROM node:20.8.1-alpine as node
+WORKDIR  /app
+
+COPY ./src/apps/devdoc ./src/apps/devdoc
+COPY ./src/design-system/tailwind-base.js ./src/design-system/tailwind-base.js
+COPY ./src/design-system/css-plugins ./src/design-system/css-plugins
+COPY ./src/design-system/css ./src/design-system/css
+COPY ./src/design-system/out ./src/design-system/out
+
+WORKDIR /app/src/apps/devdoc
+
+RUN npm i -g pnpm
+RUN pnpm i -p
+
+RUN npm run build
+
+ENTRYPOINT pnpm start

Taskfile.yaml

@@ -35,7 +35,7 @@ tasks:
 
         case $(whoami) in
           "bikash")
-            URL_SUFFIX=1
+            URL_SUFFIX=""
             ;;
 
           "vision")
@@ -170,3 +170,12 @@ tasks:
       - docker push {{.IMAGE}}/auth:{{.tag}}
       - docker build --build-arg APP=console . -t {{.IMAGE}}/console:{{.tag}}
       - docker push {{.IMAGE}}/console:{{.tag}}
+
+  docker-build-website:
+    preconditions:
+      - sh: '[[ -n "{{.tag}}" ]]'
+        msg: "var tag must have a value"
+    silent: false
+    cmds:
+      # - cd ./src/design-system && mkdir -p out && pnpm local:release
+      - docker buildx build  . -t {{.tag}} -f Dockerfile.website

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[];