refactor(landing-page): redesign tabs (#191)

* chore: wip * chore: add new tab * chore(landing): move feature walls -> articles tabs * chore(landing): adjust tabs icon preview * feat(loading): add dashboard holder section * style(landing): fix bg style of user voice * refactor(intros): discuss tab redesign * refactor(intros): kanban done * refactor(intros): add drag concept * refactor(intros): add drag target concept * refactor(intros): add drag target concept * refactor(intros): wip * refactor(intros): wip * refactor(intros): wip * refactor(intros): wip * refactor(intros): wip * refactor(intros): wip * refactor(intros): wip * refactor(intros): wip * refactor(intros): changelog make awesome * refactor(intros): wip * chore: wip * refactor(intros): wip * refactor(intros): wip * refactor(intros): help feat wip * chore: wip * chore: wip * chore(help): wip * chore(help): done * chore(help): rename -> tab
groupher · Dec 7, 2023 · 9cf95c0 · 9cf95c0
1 parent 4a03f22
commit 9cf95c0
Show file tree

Hide file tree

Showing 178 changed files with 4,970 additions and 3,332 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "@next/bundle-analyzer": "^12.2.5",
     "@soywod/pin-field": "^0.1.9",
     "@tippyjs/react": "^4.2.6",
+    "@udecode/plate": "^26.0.5",
     "@urql/core": "^4.1.4",
     "@urql/next": "^1.1.0",
     "chalk": "^2.4.1",
@@ -101,6 +102,10 @@
     "sanitize-html": "^2.5.2",
     "scroll-into-view-if-needed": "1.5.0",
     "sentry-testkit": "^2.1.0",
+    "slate": "^0.101.1",
+    "slate-history": "^0.100.0",
+    "slate-hyperscript": "^0.100.0",
+    "slate-react": "^0.101.1",
     "sonner": "^1.0.0",
     "store": "^2.0.12",
     "stringz": "^2.0.0",

diff --git a/src/app/editor/page.tsx b/src/app/editor/page.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import React from 'react'
+import { Plate, PlateContent } from '@udecode/plate-common'
+
+import { Wrapper } from './styles'
+
+const BasicEditorDefaultDemo = () => {
+  return (
+    <Wrapper>
+      <Plate onChange={(data) => console.log('## onChange: ', data)}>
+        <PlateContent placeholder="Type..." />
+      </Plate>
+    </Wrapper>
+  )
+}
+
+export default BasicEditorDefaultDemo
diff --git a/src/app/editor/styles/index.tsx b/src/app/editor/styles/index.tsx
@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.div`
+  margin-top: 10%;
+  width: 800px;
+  height: 300px;
+  border: 1px solid;
+`
+export const holder = 1
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,14 +1,10 @@
 'use client'
 
-import Link from 'next/link'
-
 import LandingPage from '@/containers/content/LandingPage'
 
 export default function Page() {
   return (
     <div>
-      <Link href="/home">go to home </Link>
-
       <LandingPage />
     </div>
   )

diff --git a/src/app/test/error.tsx b/src/app/test/error.tsx
diff --git a/src/app/test/page.tsx b/src/app/test/page.tsx
diff --git a/...tainers/content/LandingPage/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/CoverPreview.tsx b/...tainers/content/LandingPage/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/CoverPreview.tsx
@@ -0,0 +1,29 @@
+import { FC } from 'react'
+
+import {
+  Wrapper,
+  Header,
+  Dot,
+  BlocksWrapper,
+  BlocksSolidIcon,
+} from '../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/cover_preview'
+
+const CoverPreview: FC = () => {
+  return (
+    <Wrapper>
+      <Header>
+        <Dot />
+        <Dot />
+        <Dot />
+      </Header>
+      <BlocksWrapper>
+        <BlocksSolidIcon />
+        <BlocksSolidIcon />
+        <BlocksSolidIcon />
+        <BlocksSolidIcon />
+      </BlocksWrapper>
+    </Wrapper>
+  )
+}
+
+export default CoverPreview
diff --git a/...ontent/LandingPage/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/EditorPreview/Toolbox.tsx b/...ontent/LandingPage/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/EditorPreview/Toolbox.tsx
@@ -0,0 +1,50 @@
+import { FC } from 'react'
+
+import {
+  Wrapper,
+  ICON,
+  Item,
+  Title,
+  ColorBall,
+} from '../../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/editor_preview/toolbox'
+
+const EditorToolbox: FC = () => {
+  return (
+    <Wrapper>
+      <Item>
+        <ICON.Rotate />
+        <Title>旋转</Title>
+      </Item>
+      <Item>
+        <ICON.Arch />
+        <Title>弧度</Title>
+      </Item>
+      <Item>
+        <ICON.Shadow />
+        <Title>阴影</Title>
+      </Item>
+      <Item>
+        <ICON.Position />
+        <Title>位置</Title>
+      </Item>
+      <Item>
+        <ICON.Size />
+        <Title>大小</Title>
+      </Item>
+      <Item>
+        <ICON.Light />
+        <Title>灯光</Title>
+      </Item>
+      <Item>
+        <ICON.Ratio />
+        <Title>比例</Title>
+      </Item>
+      <Item>
+        <ColorBall />
+        <Title>背景</Title>
+      </Item>
+    </Wrapper>
+  )
+}
+
+export default EditorToolbox
diff --git a/.../content/LandingPage/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/EditorPreview/index.tsx b/.../content/LandingPage/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/EditorPreview/index.tsx
@@ -0,0 +1,54 @@
+import { FC } from 'react'
+
+import TagNode from '@/widgets/TagNode'
+import { COLOR_NAME } from '@/constant/colors'
+
+import Toolbox from './Toolbox'
+import CoverPreview from '../CoverPreview'
+
+import {
+  Wrapper,
+  Header,
+  Title,
+  Version,
+  Bar,
+  Cover,
+  TagsWrapper,
+  TagItem,
+  Content,
+} from '../../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/editor_preview'
+
+const EditorPreview: FC = () => {
+  return (
+    <Wrapper>
+      <Header>
+        <Title>
+          文章封面图编辑器 <Version>v2.0</Version>
+        </Title>
+
+        <TagsWrapper>
+          <TagItem>
+            <TagNode color={COLOR_NAME.GREEN} hashSize={10} hashRight={4} opacity={0.6} boldHash />
+            Web
+          </TagItem>
+
+          <TagItem>
+            <TagNode color={COLOR_NAME.ORANGE} hashSize={10} hashRight={4} opacity={0.6} boldHash />
+            Mobile
+          </TagItem>
+        </TagsWrapper>
+      </Header>
+      <Cover>
+        <CoverPreview />
+      </Cover>
+      <Toolbox />
+      <Content>
+        <Bar height={6} width={159} right={7} opacity={0.15} />
+        <Bar height={6} width={100} opacity={0.1} />
+        <Bar height={6} width={60} opacity={0.1} />
+      </Content>
+    </Wrapper>
+  )
+}
+
+export default EditorPreview
diff --git a/...ontainers/content/LandingPage/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/EmotionBar.tsx b/...ontainers/content/LandingPage/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/EmotionBar.tsx
@@ -0,0 +1,38 @@
+import { FC } from 'react'
+
+import {
+  Wrapper,
+  Item,
+  EmojiImg,
+  Count,
+} from '../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/emotion_bar'
+
+const EMOTION_STATIC = '/icons/static/emotion'
+
+const EditorPreview: FC = () => {
+  return (
+    <Wrapper>
+      <Item>
+        <EmojiImg src={`${EMOTION_STATIC}/tada.png`} />
+        <Count>41</Count>
+      </Item>
+
+      <Item>
+        <EmojiImg src={`${EMOTION_STATIC}/beer.png`} />
+        <Count>32</Count>
+      </Item>
+
+      <Item>
+        <EmojiImg src={`${EMOTION_STATIC}/biceps.png`} />
+        <Count>17</Count>
+      </Item>
+
+      <Item>
+        <EmojiImg src={`${EMOTION_STATIC}/popcorn.png`} />
+        <Count>10</Count>
+      </Item>
+    </Wrapper>
+  )
+}
+
+export default EditorPreview
diff --git a/...ainers/content/LandingPage/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/EmotionBarBad.tsx b/...ainers/content/LandingPage/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/EmotionBarBad.tsx
@@ -0,0 +1,33 @@
+import { FC } from 'react'
+
+import {
+  Wrapper,
+  Item,
+  EmojiImg,
+  Count,
+} from '../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/emotion_bar_bad'
+
+const EMOTION_STATIC = '/icons/static/emotion'
+
+const EditorPreview: FC = () => {
+  return (
+    <Wrapper>
+      <Item>
+        <EmojiImg src={`${EMOTION_STATIC}/downvote.png`} />
+        <Count>14</Count>
+      </Item>
+
+      <Item>
+        <EmojiImg src={`${EMOTION_STATIC}/confused.png`} />
+        <Count>12</Count>
+      </Item>
+
+      <Item>
+        <EmojiImg src={`${EMOTION_STATIC}/pill.png`} />
+        <Count>35</Count>
+      </Item>
+    </Wrapper>
+  )
+}
+
+export default EditorPreview
diff --git a/...ners/content/LandingPage/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/MainList/Footer.tsx b/...ners/content/LandingPage/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/MainList/Footer.tsx
@@ -0,0 +1,41 @@
+import { FC } from 'react'
+
+import { mockUsers } from '@/mock'
+
+import { SpaceGrow } from '@/widgets/Common'
+import Facepile from '@/widgets/Facepile'
+
+import {
+  Wrapper,
+  UpvoteWrapper,
+  UpvoteIcon,
+  UpvoteCount,
+  UsersWrapper,
+  PublishDate,
+} from '../../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/main_list/footer'
+
+type TProps = {
+  upvotesCount?: number
+  date?: string
+}
+
+const Footer: FC<TProps> = ({ upvotesCount = 24, date = '2013-12-01' }) => {
+  const users = mockUsers(3)
+
+  return (
+    <Wrapper>
+      <UpvoteWrapper>
+        <UpvoteIcon />
+        <UpvoteCount>{upvotesCount}</UpvoteCount>
+      </UpvoteWrapper>
+      <UsersWrapper>
+        <Facepile users={users} />
+      </UsersWrapper>
+      <SpaceGrow />
+
+      <PublishDate>{date}</PublishDate>
+    </Wrapper>
+  )
+}
+
+export default Footer