-
- {FeatureList.map((props, idx) => (
-
- ))}
-
+
+
+ {FeatureList.map((props, idx) => (
+
+ ))}
);
diff --git a/src/components/HomepageFeatures/index.module.css b/src/components/HomepageFeatures/index.module.css
new file mode 100644
index 0000000..69e6db3
--- /dev/null
+++ b/src/components/HomepageFeatures/index.module.css
@@ -0,0 +1,64 @@
+
+.layout {
+ padding: 2rem 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+}
+
+.feature {
+ padding: 1rem 0;
+ width: 350px;
+ height: 260px;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+}
+
+.feature h3 {
+ font-family: "GT Walsheim Pro";
+ margin-top: 1rem;
+ width: fit-content;
+}
+
+.feature h3:hover {
+ color: rgb(79, 70, 229);
+ background-color: #f4f4f4;
+}
+
+.feature p {
+ width: fit-content;
+}
+
+.feature p:hover {
+ color: rgb(79, 70, 229);
+ background-color: #f4f4f4;
+}
+
+.iconContainer {
+ height: 75px;
+ width: 75px;
+ position: relative;
+}
+
+.iconContainer::after {
+ content: "";
+ position: absolute;
+ top: 12px;
+ left: 12px;
+ height: 70px;
+ width: 70px;
+ background-color: #f4f4f4;
+ border-radius: 65px;
+}
+
+.iconContainer svg {
+ height: 70px;
+ width: 70px;
+ position: relative;
+ top: 0;
+ z-index: 1;
+}
+
+
diff --git a/src/components/HomepageHeader/index.js b/src/components/HomepageHeader/index.js
new file mode 100644
index 0000000..3671da5
--- /dev/null
+++ b/src/components/HomepageHeader/index.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Translate from '@docusaurus/Translate';
+import Slider from "react-slick";
+
+import Elephant from '../../../svg/img-elephant-balloon.svg';
+import Recruit from "../../../static/img/index-recruit.jpg"
+import RecruitPhone from "../../../static/img/index-recruit-phone.jpg"
+import indexbug from '../../../static/img/indexbug.png'
+import indexbugphone from '../../../static/img/indexbugphone.png'
+import SliderIndex from '../Slider'
+import SliderPhoneIndex from '../SliderPhone'
+import SliderBug from '../SliderBug'
+import SliderBugPhone from '../SliderBugPhone'
+
+import styles from './index.module.css';
+
+// Slider in homepage
+export default function HomepageHeader() {
+ const { siteConfig } = useDocusaurusContext();
+ const settings = {
+ autoplay: true,
+ autoplaySpeed: 5000,
+ dots: true,
+ infinite: true,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ arrows: false,
+ };
+ return (
+
+
+ {/* 页面一 */}
+
+
+
+
+ {/* */}
+
+
+
+
IvorySQL
+
Open Source Oracle Compatible PostgreSQL
+
+
+ Learn More
+
+
+
+
+
+ {/* */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/index.module.css b/src/components/HomepageHeader/index.module.css
similarity index 100%
rename from src/pages/index.module.css
rename to src/components/HomepageHeader/index.module.css
diff --git a/src/components/Navigation/components/DropdownLang.js b/src/components/Navigation/components/DropdownLang.js
new file mode 100644
index 0000000..8e6a7f0
--- /dev/null
+++ b/src/components/Navigation/components/DropdownLang.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useLocation } from '@docusaurus/router';
+import {
+ Menu,
+ MenuButton,
+ MenuItem,
+ MenuItems,
+ Transition,
+} from '@headlessui/react';
+
+import { LanguageIcon } from '@heroicons/react/24/outline';
+import { classNames } from '../../../utils';
+
+/**
+ * @description language dropdown
+ * @returns
+ */
+export default function DropdownLanguage() {
+ const { i18n } = useDocusaurusContext();
+ const location = useLocation();
+ const { localeConfigs, currentLocale } = i18n;
+
+ const handleChangeLang = (langKey) => {
+ const langKeysArr = [
+ ...Object.keys(localeConfigs),
+ // production online change zh-CN to zh-cn
+ 'zh-cn'
+ ]
+ const { pathname } = location
+ // filter old langkey in path
+ const purePath = langKeysArr
+ .reduce((prev, next) => {
+ return prev.includes(next) ? prev.replace(`/${next}`, '') : prev
+ }, pathname)
+
+ window.location.replace(`/${langKey}${purePath}`)
+ }
+
+ return (
+
+ )
+}
diff --git a/src/components/Navigation/components/DropdownMenu.js b/src/components/Navigation/components/DropdownMenu.js
new file mode 100644
index 0000000..0c92b85
--- /dev/null
+++ b/src/components/Navigation/components/DropdownMenu.js
@@ -0,0 +1,84 @@
+import React from 'react'
+import Translate from '@docusaurus/Translate';
+import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import {
+ ChartPieIcon,
+ CursorArrowRaysIcon,
+ BookOpenIcon,
+ PencilSquareIcon,
+} from '@heroicons/react/24/outline'
+
+const MENUS = [{
+ name: 'Webinars',
+ description: 'Join online discussions or training sessions, sharing audio, documents, or slides',
+ href: '/webinars-page',
+ icon: CursorArrowRaysIcon
+ }, {
+ name: 'Partners',
+ description: 'Partners of IvorySQL',
+ href: '/partners-page',
+ icon: ChartPieIcon
+ }, {
+ name: 'Customer Stories',
+ description: "Customer Stories",
+ href: '/customer-stories-page',
+ icon: BookOpenIcon
+ }, {
+ name: 'Contribution Guidelines',
+ description: 'Guide how to contribulte to the IvorySQL on Github',
+ href: '/contribution-guidelines',
+ icon: PencilSquareIcon
+ }
+]
+
+/**
+ * @description resources dropdown menu
+ * @returns
+ */
+export default function DropdownMenu() {
+ return (
+
+
+
+ Resources
+
+
+
+
+
+
+
+
+ {MENUS.map((item) => (
+
+ ))}
+
+
+ )
+}
diff --git a/src/components/Navigation/index.js b/src/components/Navigation/index.js
new file mode 100644
index 0000000..f6a2782
--- /dev/null
+++ b/src/components/Navigation/index.js
@@ -0,0 +1,147 @@
+import React, { useEffect } from 'react'
+import Link from '@docusaurus/Link'
+import Translate, { translate } from '@docusaurus/Translate';
+import { useLocation } from '@docusaurus/router';
+import {
+ Disclosure,
+ DisclosureButton,
+ DisclosurePanel
+} from '@headlessui/react'
+import { Bars3Icon, XMarkIcon, ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'
+
+import ivoryIcon from '/img/ivory.png'
+import { classNames } from '../../utils'
+
+import DropdownMenu from './components/DropdownMenu'
+import DropdownLang from './components/DropdownLang'
+import './style.css'
+
+const NAVIGATIONS = [{
+ name: 'Docs',
+ href: 'https://docs.IvorySQL.org',
+ outFlag: true
+}, {
+ name: 'Blog',
+ href: '/blog'
+}, {
+ name: 'Installation',
+ href: 'https://docs.ivorysql.org/en/ivorysql-doc/v3.2/v3.2/3#quick-installation',
+ outFlag: true
+}, {
+ name: 'Downloads',
+ href: 'https://github.com/IvorySQL/IvorySQL/releases',
+ outFlag: true
+}, {
+ name: 'Releases',
+ href: '/releases-page',
+}, {
+ name: 'Community',
+ href: '/community-page'
+}, {
+ name: 'Gitee',
+ href: 'https://gitee.com/IvorySQL/',
+ outFlag: true
+}, {
+ name: 'GitHub',
+ href: 'https://github.com/IvorySQL/IvorySQL',
+ outFlag: true
+}]
+
+
+const Navigation = () => {
+ const location = useLocation();
+ useEffect(() => {
+ console.log('Naviation did mount')
+ return () => {
+ console.log('cleanup')
+ }
+ }, [])
+
+ return (
+
+
+ {({ open }) => (
+ <>
+
+
+
+ {/* Mobile menu button*/}
+
+
+ Open main menu
+ {open ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
IvorySQL
+
+
+
+ {NAVIGATIONS.map((item) => (
+
+
{item.name}
+ {item.outFlag &&
}
+
+ ))}
+
+
+
+
+
+ {/* Language dropdown */}
+
+
+
+
+ {NAVIGATIONS.map((item) => (
+
+ {item.name}
+ {item.outFlag && }
+
+ ))}
+
+
+
+ )
+}
+
+export default Navigation
\ No newline at end of file
diff --git a/src/components/Navigation/style.css b/src/components/Navigation/style.css
new file mode 100644
index 0000000..daa95d7
--- /dev/null
+++ b/src/components/Navigation/style.css
@@ -0,0 +1,7 @@
+@tailwind components;
+
+@layer components {
+ .nav-item {
+ @apply rounded-md px-3 py-2 text-sm font-medium flex justify-center items-center shrink-0
+ }
+}
\ No newline at end of file
diff --git a/src/pages/slider.js b/src/components/Slider/index.js
similarity index 99%
rename from src/pages/slider.js
rename to src/components/Slider/index.js
index c62e5ce..1305bcd 100644
--- a/src/pages/slider.js
+++ b/src/components/Slider/index.js
@@ -1,7 +1,8 @@
import React from 'react'
-import './silder.css'
import Translate, {translate} from '@docusaurus/Translate';
+import './silder.css'
+
export default function SliderIndex(){
return(
//
diff --git a/src/pages/silder.css b/src/components/Slider/silder.css
similarity index 98%
rename from src/pages/silder.css
rename to src/components/Slider/silder.css
index d388c05..f79b899 100644
--- a/src/pages/silder.css
+++ b/src/components/Slider/silder.css
@@ -119,7 +119,7 @@
.right-buttom-title{
width: 100px;
height: 100px;
- background-image: url(../../static/img/code.png);
+ background-image: url(../../../static/img/code.png);
background-size: 100%,100%;
position: relative;
top: -20px;
diff --git a/src/pages/slider-bug.js b/src/components/SliderBug/index.js
similarity index 92%
rename from src/pages/slider-bug.js
rename to src/components/SliderBug/index.js
index b314831..9d39357 100644
--- a/src/pages/slider-bug.js
+++ b/src/components/SliderBug/index.js
@@ -1,10 +1,13 @@
import React from "react"
-import "./slider-bug.css"
-import Translate, {translate} from '@docusaurus/Translate';
-import Woodpecker from '../../svg/woodpecker.svg'
-import ArrowLeft from '../../svg/arrow-left.svg'
-import ArrowRight from '../../svg/arrow-right.svg'
import Link from '@docusaurus/Link';
+import Translate, {translate} from '@docusaurus/Translate';
+
+import Woodpecker from '../../../svg/woodpecker.svg'
+import ArrowLeft from '../../../svg/arrow-left.svg'
+import ArrowRight from '../../../svg/arrow-right.svg'
+
+import "./slider-bug.css"
+
export default function SliderBug(){
return(
diff --git a/src/pages/slider-bug.css b/src/components/SliderBug/slider-bug.css
similarity index 92%
rename from src/pages/slider-bug.css
rename to src/components/SliderBug/slider-bug.css
index 734a1b8..eb4cb7e 100644
--- a/src/pages/slider-bug.css
+++ b/src/components/SliderBug/slider-bug.css
@@ -1,10 +1,10 @@
@font-face {
font-family: content;
- src: url('../../static/975MaruSC-Regular.ttf');
+ src: url('../../../static/975MaruSC-Regular.ttf');
}
@font-face {
font-family: title;
- src: url('../../static/LianMengQiYiLuShuaiZhengRuiHeiTi-2.ttf');
+ src: url('../../../static/LianMengQiYiLuShuaiZhengRuiHeiTi-2.ttf');
}
.index-bug{
width: 100%;
diff --git a/src/pages/slider-bug-phone.js b/src/components/SliderBugPhone/index.js
similarity index 100%
rename from src/pages/slider-bug-phone.js
rename to src/components/SliderBugPhone/index.js
diff --git a/src/pages/slider-bug-phone.css b/src/components/SliderBugPhone/slider-bug-phone.css
similarity index 95%
rename from src/pages/slider-bug-phone.css
rename to src/components/SliderBugPhone/slider-bug-phone.css
index 8101c3a..698eb75 100644
--- a/src/pages/slider-bug-phone.css
+++ b/src/components/SliderBugPhone/slider-bug-phone.css
@@ -1,10 +1,10 @@
@font-face {
font-family: content;
- src: url('../../static/975MaruSC-Regular.ttf');
+ src: url('../../../static/975MaruSC-Regular.ttf');
}
@font-face {
font-family: title;
- src: url('../../static/LianMengQiYiLuShuaiZhengRuiHeiTi-2.ttf');
+ src: url('../../../static/LianMengQiYiLuShuaiZhengRuiHeiTi-2.ttf');
}
.index-bug-p{
width: 80%;
diff --git a/src/pages/slider-phone.js b/src/components/SliderPhone/index.js
similarity index 97%
rename from src/pages/slider-phone.js
rename to src/components/SliderPhone/index.js
index 9f2481b..631155f 100644
--- a/src/pages/slider-phone.js
+++ b/src/components/SliderPhone/index.js
@@ -1,6 +1,7 @@
import React from 'react'
+import Translate from '@docusaurus/Translate';
+
import './slider-phone.css'
-import Translate, {translate} from '@docusaurus/Translate';
export default function SliderPhoneIndex(){
return(
diff --git a/src/pages/slider-phone.css b/src/components/SliderPhone/slider-phone.css
similarity index 96%
rename from src/pages/slider-phone.css
rename to src/components/SliderPhone/slider-phone.css
index 8736217..47eb71a 100644
--- a/src/pages/slider-phone.css
+++ b/src/components/SliderPhone/slider-phone.css
@@ -42,7 +42,7 @@
.phone-QRcode{
width: 100px;
height: 100px;
- background-image: url(../../static/img/code.png);
+ background-image: url(../../../static/img/code.png);
background-size: 100%,100%;
display: inline-block;
margin-left: 28px;
diff --git a/src/css/custom.css b/src/css/custom.css
index 1e58c21..23d778e 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -3,7 +3,6 @@
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/
-
/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #4e89e8;
@@ -23,6 +22,15 @@
*/
}
+@font-face {
+ font-family: 'GT Walsheim Pro';
+ src: url('../../static/GTWalsheimPro-Bold.woff2');
+ font-weight: 900;
+ font-style: normal;
+ font-display: swap
+}
+
+/* --- overwrite docusaurus styles - start --- */
.docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.1);
display: block;
@@ -38,4 +46,24 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
flex: auto;
color: white;
border: white;
-}
\ No newline at end of file
+}
+.navbar {
+ display: none;
+}
+/* --- overwrite docusaurus styles - end --- */
+
+/* global tailwind styles */
+.tailwind {
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+ @tailwind screens;
+}
+
+.tailwind-navbar {
+ position: sticky;
+ display: block;
+ top: 0;
+ z-index: 99;
+}
+/* global tailwind styles */
diff --git a/src/pages/index.js b/src/pages/index.js
index eb58fee..1e8e594 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,98 +1,12 @@
-import Link from '@docusaurus/Link';
-import Translate from '@docusaurus/Translate';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import clsx from 'clsx';
import React from 'react';
-import Slider from "react-slick";
-import RecruitPhone from "../../static/img/index-recruit-phone.jpg";
-import Recruit from "../../static/img/index-recruit.jpg";
-import indexbug from '../../static/img/indexbug.png';
-import indexbugphone from '../../static/img/indexbugphone.png';
-import Elephant from '../../svg/img-elephant-balloon.svg';
+import Layout from '@theme/Layout';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import HomepageFeatures from '../components/HomepageFeatures';
-import styles from './index.module.css';
-import SliderIndex from './slider';
-import SliderBug from './slider-bug';
-import SliderBugPhone from './slider-bug-phone';
-import SliderPhoneIndex from './slider-phone';
-function HomepageHeader() {
- const {siteConfig} = useDocusaurusContext();
- const settings = {
- autoplay: true,
- autoplaySpeed: 5000,
- dots: true,
- infinite: true,
- slidesToShow: 1,
- slidesToScroll: 1,
- arrows: false,
- };
- return (
-
-
- {/* 页面一 */}
-
-
-
-
- {/* */}
-
-
-
-
IvorySQL
-
Open Source Oracle Compatible PostgreSQL
-
-
- Learn More
-
-
-
-
-
- {/* */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
+import HomepageHeader from '../components/HomepageHeader';
export default function Home() {
const {siteConfig} = useDocusaurusContext();
+
return (
+
+ {children}
+
+