feat: add recommend extension for site (#1922)

midwayjs · Apr 19, 2022 · 290179c · 290179c
1 parent 1842fef
commit 290179c
Show file tree

Hide file tree

Showing 7 changed files with 18,808 additions and 2,152 deletions.
diff --git a/site/package-lock.json b/site/package-lock.json
diff --git a/site/package.json b/site/package.json
@@ -17,9 +17,9 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.14",
-    "@docusaurus/preset-classic": "2.0.0-beta.14",
-    "@docusaurus/theme-search-algolia": "2.0.0-beta.14",
+    "@docusaurus/core": "^2.0.0-beta.18",
+    "@docusaurus/preset-classic": "^2.0.0-beta.18",
+    "@docusaurus/theme-search-algolia": "^2.0.0-beta.18",
     "@mdx-js/react": "^1.6.21",
     "@react-hook/media-query": "^1.1.1",
     "@stitches/react": "^1.0.0",
@@ -45,7 +45,7 @@
     "windups": "^1.1.9"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.14",
+    "@docusaurus/module-type-aliases": "^2.0.0-beta.18",
     "@tsconfig/docusaurus": "^1.0.4",
     "@types/file-loader": "^5.0.1",
     "@types/fs-extra": "^9.0.12",

diff --git a/site/src/components/Example.tsx b/site/src/components/Example.tsx
@@ -1,6 +1,5 @@
 import { Block } from './Block'
 import React from 'react'
-import { VAR } from '../var'
 import { styled } from '../styled'
 
 const Container = styled('div', {})

diff --git a/site/src/components/Footer.tsx b/site/src/components/Footer.tsx
@@ -3,7 +3,7 @@ import { VAR } from '../var'
 import { styled } from '../styled'
 
 const Container = styled('div', {
-  backgroundColor: VAR.backgroundSecondary,
+  backgroundColor: VAR.background,
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',

diff --git a/site/src/components/Recommend.tsx b/site/src/components/Recommend.tsx
@@ -0,0 +1,44 @@
+import { Block } from './Block';
+import React from 'react';
+import { styled } from '../styled';
+
+const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const ExtensionHref = styled('a', {
+  display: 'flex',
+  borderRadius: 8,
+});
+
+const Extension = styled('img', {
+  height: 200,
+  borderRadius: 8,
+});
+
+const RecommendList = [
+  {
+    image: 'https://img.alicdn.com/imgextra/i3/O1CN01IZJkEY1bJrCKViAAc_!!6000000003445-2-tps-600-200.png',
+    link: 'https://cool-js.com/',
+    title: 'Cool js, 面向未来的后台开发框架',
+  },
+];
+
+export function Recommend() {
+  return (
+    <Block title="Recommend" subtitle="Great extensions from the open source community" background="light">
+      <Container>
+        {RecommendList.map((item) => {
+          return (
+            <ExtensionHref key={item.link} href={item.link} target="_blank">
+              <Extension alt={item.title} src={item.image} />
+            </ExtensionHref>
+          );
+        })}
+      </Container>
+    </Block>
+  );
+}
diff --git a/site/src/components/UsedBy.tsx b/site/src/components/UsedBy.tsx
@@ -57,7 +57,7 @@ const brands = [
 
 export function UsedBy() {
   return (
-    <Block title="Used by" subtitle="Trusted by these great front-end teams" background="light">
+    <Block title="Used by" subtitle="Trusted by these great front-end teams" background="dark">
       {renderMarquee(brands)}
     </Block>
   )

diff --git a/site/src/pages/index.tsx b/site/src/pages/index.tsx
@@ -7,6 +7,7 @@ import { EssentialsComponents } from '../components/EssentialsComponents'
 import { UsedBy } from '../components/UsedBy'
 import { Footer } from '../components/Footer'
 import { Example } from '../components/Example'
+import { Recommend } from '../components/Recommend'
 
 export default function Home(): JSX.Element {
   const [hidden, setHidden] = React.useState(true)
@@ -24,6 +25,7 @@ export default function Home(): JSX.Element {
         <PreviewFunctionSyntax />
         <EssentialsComponents />
         <Example />
+        <Recommend />
         <UsedBy />
         <Footer />
       </div>