[fit-#1007] 首页样式修改

website/src/components/AppCards/index.jsx

@@ -10,11 +10,11 @@ const AppCards = () => {
  }, [])
 
  return (
- <section className="w-full space-y-6 dark:bg-[#1a1b1e] bg-wave bg-contain bg-top">
+ <section className="w-full md:h-[600px] space-y-6 dark:bg-[#1a1b1e] bg-wave md:bg-contain bg-cover md:bg-top bg-bottom md:bg-repeat bg-no-repeat">
  <section data-aos="zoom-in" className="w-full dark:text-[#797a7d]">
- <h1 data-aos="fade-down" className="text-center lg:text-3xl text-4xl font-bold font-mono dark:text-[#797a7d] from-blue-400 bg-gradient-to-r via-indigo-500 to-purple-600 bg-clip-text text-transparent capitalize">Core features
+ <h1 data-aos="fade-down" className="text-center md:text-3xl text-2xl font-bold font-mono dark:text-[#797a7d] from-green-400 bg-gradient-to-r to-purple-600 bg-clip-text text-transparent capitalize">Core features
  </h1>
- <div className="grid md:grid-cols-3 grid-cols-2 md:gap-y-6 gap-8 justify-items-center lg:p-6 p-4">
+ <div className="grid md:grid-cols-3 grid-cols-2 md:gap-y-24 md:gap-x-12 gap-8 justify-items-center lg:p-6 p-4">
  <div className="w-full flex flex-col items-center space-y-6">
  <img className="card" src={require('../../assets/svg/code.svg').default} alt="code" />
  <Text className="card-text">基于json、sql 构建任务</Text>

website/src/components/AppContainer/index.jsx

@@ -136,15 +136,13 @@ const AppContainer = ({ children, data, category }) => {
  return (
  <>
  <Seo title="纯钧" />
-
  <AppHeader />
- <div className=" dark:bg-[#1a1b1e] dark:text-gray-300  relative border dark:border-black justify-between bg-white text-[ #ccc] flex z-20 shadow-lg">
+ <div className="dark:bg-[#1a1b1e] dark:text-gray-300 relative border dark:border-black justify-between bg-white text-black flex z-20 shadow-lg">
  {menuData.children &&
  menuData.children.length > 0 &&
  AsideMenu(menuData)}
  {children}
  </div>
-
  <AppFooter />
  </>
  )

website/src/components/AppCustomers/index.jsx

@@ -142,14 +142,14 @@ const AppCustomers = () => {
  setTimeout(() => {
  setActive(origin => [...origin, ...imagesList[0]])
  }, 500)
- }, 1500)
+ }, 3000)
 
  return () => {
  clearInterval(timer)
  }
  }, [])
  return (
- <section className="py-[50px] pb-[50px] w-[80%] m-auto">
+ <section className="p-8">
  <p className="mb-[20px] text-[27px]">
  <span className="border-b-2 pb-[5px] text-[22px] font-bold text-gray-700 border-gray-300 inline-block">
  合作伙伴

website/src/components/AppFooter/index.jsx

@@ -4,8 +4,8 @@ import Link from "../Link"
 
 const AppFooter = () => {
  return (
- <footer className="dark:text-white dark:bg-[#1a1b1e] text-center">
- <div className="h-[558px] items-center flex flex-col md:flex-row justify-center">
+ <footer className="dark:text-white p-8 dark:bg-[#1a1b1e] text-center">
+ <div className="items-center flex flex-col md:flex-row justify-center h-[400px]">
  <div className="h-full w-full flex justify-center items-center bg-block dark:bg-none bg-contain bg-center bg-no-repeat">
  <Card component="a" className="left__cards--card bg-transparent">
  <Card.Section className="flex justify-center items-center">

website/src/components/AppGithubMember/index.jsx

@@ -13,7 +13,7 @@ const AppMembers = () => {
  <div className="flex flex-wrap m-[-7px]">
  {members.map(item => {
  return (
- <div className="border border-gray-200 flex items-center justify-center m-[7px] hover:bg-slate-300 block">
+ <div key={item.id} className="border border-gray-200 flex items-center justify-center m-[7px] hover:bg-gray-50">
  <img
  width={40}
  height={40}

website/src/components/AppMedium/index.jsx

@@ -1,5 +1,7 @@
 import React, { useEffect } from 'react'
 import Aos from 'aos'
+import { Card, Text, Button, Group } from '@mantine/core'
+import { navigate } from 'gatsby-link'
 
 const AppMedium = () => {
  useEffect(() => {
@@ -8,20 +10,60 @@ const AppMedium = () => {
  })
  }, [])
  // data-aos="fade-up"
- return <section className="w-full dark:bg-[#1a1b1e] bg-[#dff9fb] lg:p-6 p-4">
- <h1 className="font-mono mb-8 lg:text-3xl text-4xl capitalize text-center font-bold from-green-400 bg-gradient-to-r to-purple-600 bg-clip-text text-transparent">easy to learn. easy to use.</h1>
- <div className="w-full flex items-center flex-col md:flex-row space-x-6">
- <div className='h-[400px] w-1/3 bg-black rounded-md p-6'>
- <pre className='lang-java h-3/5 w-full rounded-md'>
- <code className='h-full w-full'>
-
- </code>
- </pre>
- </div>
- <div className="flex-1 flex flex-col h-[400px] space-y-4 rounded-md">
- <div className='h-1/2 w-full rounded-md bg-white'></div>
- <div className='h-1/2 w-full rounded-md bg-white'></div>
- </div>
+ return <section className="w-full dark:bg-[#1a1b1e] lg:p-6 p-4 md:h-[500px] h-auto">
+ <h1 data-aos="fade-up" className="font-mono mb-24 md:text-3xl text-xl capitalize text-center font-bold from-green-400 bg-gradient-to-r to-purple-600 bg-clip-text text-transparent">easy to learn. easy to use.</h1>
+ <div className="grid md:grid-cols-3 grid-cols-1 md:gap-6 gap-3">
+ <Card data-aos="fade-up" shadow="none" p="md" data-aos-delay="0">
+ <Card.Section className='flex justify-center'>
+ <img src={require('../../assets/svg/apacheflink.svg').default} alt="flink" height={100} className='object-contain' />
+ </Card.Section>
+
+ <Group position="apart" className='my-3 text-center'>
+ <Text weight={500} className="font-bold w-full text-lg capitalize">基于Flink</Text>
+ </Group>
+
+ <Text size="md" className='text-gray-600 leading-6 text-center capitalize'>
+ 兼容Flink SQL语法,如果您使用过Flink,那么您可以很快的上手chunjun!
+ </Text>
+
+ <Button onClick={() => navigate('/documents')} variant="light" color="green" fullWidth className='mt-[14px]'>
+ 阅读文档
+ </Button>
+ </Card>
+ <Card data-aos="fade-up" shadow="none" p="md" data-aos-delay="150">
+ <Card.Section className='flex justify-center'>
+ <img src={require('../../assets/svg/docker.svg').default} alt="flink" height={100} className='object-contain' />
+ </Card.Section>
+
+ <Group position="apart" className='my-3 text-center'>
+ <Text weight={500} className="font-bold w-full text-lg capitalize">部署支持</Text>
+ </Group>
+
+ <Text size="md" className='text-gray-600 leading-6 text-center capitalize'>
+ 支持Docker一键部署、K8S 部署运行,在您所青睐的平台上部署chunjun应用。
+ </Text>
+
+ <Button onClick={() => navigate('/documents')} variant="light" color="blue" fullWidth className='mt-[14px]'>
+ 如何部署
+ </Button>
+ </Card>
+ <Card data-aos="fade-up" shadow="none" p="md" data-aos-delay="300">
+ <Card.Section className='flex justify-center'>
+ <img src={require('../../assets/svg/flex.svg').default} alt="flink" height={100} className='object-contain' />
+ </Card.Section>
+
+ <Group position="apart" className='my-3 text-center'>
+ <Text weight={500} className="font-bold w-full text-lg capitalize">易拓展，高灵活</Text>
+ </Group>
+
+ <Text size="md" className='text-gray-600 leading-6 text-center capitalize'>
+ 插件开发者无需关心其他插件的代码逻辑，新拓展的数据源插件可以与现有数据源插件即时互通。
+ </Text>
+
+ <Button onClick={() => navigate('/documents')} variant="light" color="violet" fullWidth className='mt-[14px]'>
+ 拓展插件
+ </Button>
+ </Card>
  </div>
  </section>
 }

website/src/components/AppShowCase/index.jsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react'
+import members from '../../../githubInfo/members.json'
+import Aos from 'aos'
+
+const AppShowCase = () => {
+ useEffect(() => {
+ Aos.init({
+ duration: 1000
+ })
+ }, [])
+ return <section className='md:p-8 p-4'>
+ <h1 data-aos="zoom-in" className="font-mono mb-8 md:text-3xl text-2xl capitalize text-center font-bold from-green-400 bg-gradient-to-r to-purple-600 bg-clip-text text-transparent">Become a contributor to Chunjun</h1>
+ <div className="grid md:grid-cols-6 gap-2 grid-cols-2">
+ {members.map((item, index) => <div data-aos="fade-up" data-aos-delay={index * 50} key={item.id} className="border shadow-sm border-gray-200 flex items-center justify-between m-sm hover:bg-gray-50 hover:scale-110 hover:shadow-md transition-all duration-100">
+ <img
+ width={40}
+ height={40}
+ src={`https://github.com/${item.login}.png?size=40`}
+ alt=""
+ />{' '}
+ <a href={item.html_url} target="blank" className='flex-1 text-center'>
+ <span className="font-mono text-gray-600 text-sm"> {item.login} </span>
+ </a>
+ </div>)}
+ </div>
+ </section>
+}
+
+export default AppShowCase

website/src/components/documentsMenu/menu.jsx

@@ -33,91 +33,6 @@ const MenuLayout = ({ children }) => {
  }
  `)
 
- // function buildMenu(nodes) {
- // let id = 1
- // const root = { children: [] }
- // function linkToRoot(structrue, node) {
- // let rootRef = root
-
- // for (let i = 0; i < structrue.length - 1; i++) {
- // let dirname = structrue[i]
- // let nextRef = rootRef.children.find(item => item.name === dirname)
- // if (!nextRef) {
- // nextRef = {
- // type: "dir",
- // name: dirname,
- // id: id++,
- // children: [],
- // parent: rootRef,
- // }
- // rootRef.children.push(nextRef)
- // }
- // rootRef = nextRef
- // }
- // rootRef.children.push({
- // type: "file",
- // name: node.name,
- // data: node,
- // parent: rootRef,
- // })
- // }
- // for (let i = 0; i < nodes.length; i++) {
- // let node = nodes[i]
- // let structrue = node.relativePath.split("/")
- // if (structrue.length === 1) {
- // root.children.push({
- // type: "file",
- // name: node.name,
- // data: node,
- // parent: root,
- // })
- // } else {
- // linkToRoot(structrue, node)
- // }
- // }
- // return root
- // }
-
- // const menuData = buildMenu(data.allFile.edges.map(item => item.node))
- // const currentPage = window.location.href.split("/").pop()
-
- // const buildChildren = children => {
- // return children.map(c => {
- // if (c.type === "dir") {
- // return (
- // <Accordion iconPosition="right">
- // <Accordion.Item label={c.name}>{buildChildren(c.children)}</Accordion.Item>
- // </Accordion>
- // )
- // } else {
- // return (
- // <Link to={`/documents/${c.data.id}`} className={`w-full px-[20px] m-0 rounded-sm cursor-pointer hover:bg-gray-100 h-[48px] flex items-center ${c.data.id === currentPage ? "active" : null}`}>
- // {c.name}
- // </Link>
- // )
- // }
- // })
- // }
-
- // const asideMenu = menu => {
- // const { children } = menu
- // return (
- // <Navbar className="hidden md:inline-block" hiddenBreakpoint="sm" width={{ sm: 200, lg: 256 }} height="100%" p="xs" style={{ zIndex: "1", height: "calc(100vh - 90px)", overflowY: "auto" }}>
- // {children.map(item => {
- // return item.type === "file" ? (
- // <Link to={`/documents/${item.data.id}`} className={`w-full px-[20px] m-0 rounded-sm cursor-pointer hover:bg-gray-100 h-[48px] flex items-center ${item.data.id === currentPage ? "active" : null}`}>
- // {item.name}
- // </Link>
- // ) : (
- // <Accordion iconPosition="right">
- // <Accordion.Item label={item.name}>{buildChildren(item.children)}</Accordion.Item>
- // </Accordion>
- // )
- // })}
- // </Navbar>
- // )
- // }
-
  return (
  <AppContainer data={data} category="/documents">
  {children}

website/src/pages/examples/json/{jsonContent.parent__(File)__id}.jsx

@@ -8,7 +8,7 @@ const BlogPost = props => {
  let json = {}
  try {
  json = JSON.parse(props.data.jsonContent.content)
- } catch {}
+ } catch { }
  const theme = {
  scheme: "monokai",
  author: "wimer hazenberg (http://www.monokai.nl)",
@@ -37,11 +37,11 @@ const BlogPost = props => {
  return (
  <animated.section
  style={aprops}
- className="w-full relative 2xl:flex  2xl:justify-center 2xl:items-center 2xl:text-2xl text-base"
+ className="w-full px-6 py-4 relative 2xl:flex 2xl:justify-center 2xl:items-center 2xl:text-2xl text-base"
  >
  <JSONTree
- valueRenderer={raw => <em>{raw}</em>}
- labelRenderer={([key]) => <strong>{key}</strong>}
+ valueRenderer={raw => <em className="italic">{raw}</em>}
+ labelRenderer={([key]) => <strong className="font-mono">{key}</strong>}
  shouldExpandNode={() => true}
  hideRoot={() => true}
  theme={theme}

website/src/pages/examples/sql/index.scss

@@ -29,3 +29,7 @@
  }
  }
 }
+
+#text {
+ color: #333;
+}

website/src/pages/examples/sql/{jsonContent.parent__(File)__id}.jsx

@@ -7,15 +7,15 @@ const BlogPost = props => {
  let sql = ""
  try {
  sql = props.data.jsonContent.content
- } catch {}
+ } catch { }
  const aprops = useSpring({
  to: { opacity: 1, left: 0 },
  from: { opacity: 0, left: 100 },
  })
  return (
  <animated.section
  style={{ ...aprops }}
- className="w-full relative 2xl:flex 2xl:justify-center 2xl:items-center   overflow-x-auto justify-center 2xl:text-2xl text-base"
+ className="w-full relative 2xl:flex 2xl:justify-center 2xl:items-center px-6 py-4 overflow-x-auto justify-center 2xl:text-2xl text-base"
  >
  <Highlight className="sql w-full overflow-x-hidden" language="sql">
  {sql}

website/src/pages/index.js

@@ -1,14 +1,13 @@
-import * as React from 'react'
-import AppHeader from '../components/AppHeader'
-import AppBanner from '../components/AppBannner'
-import AppFooter from '../components/AppFooter'
-import AppCards from '../components/AppCards'
-import AppMedium from '../components/AppMedium'
-// import AppShowcase from "../components/AppShowcase"
-import Seo from '../components/seo'
-import 'aos/dist/aos.css'
-import AppCustomers from '../components/AppCustomers'
-import AppMembers from '../components/AppGithubMember'
+import * as React from "react"
+import AppHeader from "../components/AppHeader"
+import AppBanner from "../components/AppBannner"
+import AppFooter from "../components/AppFooter"
+import AppCards from "../components/AppCards"
+import AppMedium from "../components/AppMedium"
+import AppShowCase from "../components/AppShowCase"
+import Seo from "../components/seo"
+import "aos/dist/aos.css"
+import AppCustomers from "../components/AppCustomers"
 const IndexPage = () => (
  <>
  <Seo title="纯钧" />
@@ -18,8 +17,8 @@ const IndexPage = () => (
 
  <AppCards />
  <AppMedium />
+ <AppShowCase />
  <AppCustomers />
- <AppMembers />
 
  <AppFooter />
  </section>