This is an automated email from the ASF dual-hosted git repository.
luzhijing pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new 446847eba5e (feat) update styles & fix bugs (#382)
446847eba5e is described below
commit 446847eba5e7dc5646f444f62d42b6f82dabef52
Author: hututu <[email protected]>
AuthorDate: Wed Jan 3 19:38:55 2024 +0800
(feat) update styles & fix bugs (#382)
---
docusaurus.config.js | 4 +-
src/components/PageBanner/index.tsx | 22 -----
src/components/link-arrow/index.tsx | 4 +-
src/components/recent-blogs/index.tsx | 20 ++++
src/components/recent-blogs/recent-blogs.data.ts | 18 ++++
src/constant/core-capabilities.data.tsx | 34 +++----
src/hooks/use-animation-frame.ts | 21 ++---
src/pages/download/index.tsx | 16 ++--
src/pages/index.scss | 8 +-
src/pages/index.tsx | 5 +-
src/pages/users/index.tsx | 50 ++++++++--
src/pages/users/user-item.tsx | 2 +-
src/scss/components/breadcrumbs.scss | 6 +-
src/scss/components/markdown.scss | 1 -
src/scss/components/navbar.scss | 2 +-
src/scss/components/search.scss | 4 +
src/theme/BlogListItem/HeadItem/index.tsx | 10 +-
src/theme/BlogPostItem/index.tsx | 113 ++++++++++++-----------
src/theme/BlogPostPage/Metadata/index.tsx | 28 ++++++
src/theme/BlogPostPage/index.tsx | 67 ++++++++++++++
src/theme/DocSidebarItem/Category/style.scss | 2 +-
src/theme/Footer/index.tsx | 18 ++--
src/theme/Footer/styles.scss | 1 -
src/theme/SearchBar/SearchBar.jsx | 3 +-
src/theme/SearchBar/SearchBar.module.css | 5 +-
static/js/custom-script.js | 7 ++
versioned_sidebars/version-2.0-sidebars.json | 55 +++--------
27 files changed, 336 insertions(+), 190 deletions(-)
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 43478327a7a..2c61f606d58 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -54,7 +54,7 @@ const config = {
},
},
},
- // scripts: ['/js/redirect.js'],
+ scripts: ['/js/custom-script.js'],
stylesheets: [
'https://cdn-font.hyperos.mi.com/font/css?family=MiSans:100,200,300,400,450,500,600,650,700,900:Chinese_Simplify,Latin&display=swap',
'https://cdn-font.hyperos.mi.com/font/css?family=MiSans_Latin:100,200,300,400,450,500,600,650,700,900:Latin&display=swap',
@@ -64,6 +64,7 @@ const config = {
customFields: {},
plugins: [
'docusaurus-plugin-sass',
+ // Use custom blog plugin
versionsPlugin,
[
'content-docs',
@@ -134,6 +135,7 @@ const config = {
],
},
],
+
async function tailwindcssPlugin(context, options) {
return {
name: 'docusaurus-tailwindcss',
diff --git a/src/components/PageBanner/index.tsx
b/src/components/PageBanner/index.tsx
index 00644ac8422..95ccfaa38f3 100644
--- a/src/components/PageBanner/index.tsx
+++ b/src/components/PageBanner/index.tsx
@@ -38,28 +38,6 @@ export default function PageBanner(props: PageBannerProps):
JSX.Element {
key={index}
>
{btn.label}
- <svg
- xmlns="http://www.w3.org/2000/svg";
- width="19"
- height="18"
- viewBox="0 0 19 18"
- fill="none"
- >
- <path
- d="M10.6251 13.5L15.125 9L10.6251
4.5"
- stroke="currentColor"
- stroke-width="1.5"
- stroke-linecap="round"
- stroke-linejoin="round"
- />
- <path
- d="M3.87506 9.00055L15.1251
9.00055"
- stroke="currentColor"
- stroke-width="1.5"
- stroke-linecap="round"
- stroke-linejoin="round"
- />
- </svg>
</Link>
) : (
<div
diff --git a/src/components/link-arrow/index.tsx
b/src/components/link-arrow/index.tsx
index 9c48bf39ff4..d4ae9d84d43 100644
--- a/src/components/link-arrow/index.tsx
+++ b/src/components/link-arrow/index.tsx
@@ -1,10 +1,11 @@
import Link from '@docusaurus/Link';
-import React from 'react';
+import React, { CSSProperties } from 'react';
interface ReadMoreProps {
to: string;
className?: string;
text: string | React.ReactNode;
+ style?: CSSProperties;
}
export default function LinkWithArrow(props: ReadMoreProps) {
@@ -12,6 +13,7 @@ export default function LinkWithArrow(props: ReadMoreProps) {
<Link
className={`flex group text-primary items-center text-base
cursor-pointer hover:no-underline ${props?.className}`}
to={props.to}
+ style={props.style}
>
<span className="mr-2">{props.text}</span>
<span className="transition-slide">
diff --git a/src/components/recent-blogs/index.tsx
b/src/components/recent-blogs/index.tsx
new file mode 100644
index 00000000000..cfb3a3009bf
--- /dev/null
+++ b/src/components/recent-blogs/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { RECENT_BLOGS_POSTS } from './recent-blogs.data';
+import Link from '@docusaurus/Link';
+import LinkWithArrow from '@site/src/components/link-arrow';
+
+export default function RecentBlogs() {
+ return (
+ <div className="pl-4 mt-20 text-[#1D1D1D] ">
+ <div className=" text-[2rem] leading-[3.25rem]">Recent posts</div>
+ <div className="mt-4 flex flex-col">
+ {RECENT_BLOGS_POSTS.map(({ label, link }) => (
+ <Link className="text-lg leading-10 hover:no-underline
hover:text-[#444FD9]" to={link}>
+ {label}
+ </Link>
+ ))}
+ </div>
+ <LinkWithArrow className="mt-4" to="/blog" text="View all blogs" />
+ </div>
+ );
+}
diff --git a/src/components/recent-blogs/recent-blogs.data.ts
b/src/components/recent-blogs/recent-blogs.data.ts
new file mode 100644
index 00000000000..1ef0bbbcbe6
--- /dev/null
+++ b/src/components/recent-blogs/recent-blogs.data.ts
@@ -0,0 +1,18 @@
+export const RECENT_BLOGS_POSTS = [
+ {
+ label: 'Apache Doris speeds up data reporting, tagging, and data lake
analytics',
+ link:
'https://doris.apache.org/blog/apache-doris-speeds-up-data-reporting-tagging-and-data-lake-analytics',
+ },
+ {
+ label: 'From Elasticsearch to Apache Doris: upgrading an observability
platform',
+ link:
'https://doris.apache.org/blog/from-elasticsearch-to-apache-doris-upgrading-an-observability-platform',
+ },
+ {
+ label: 'Apache Doris 2.0.3 just released',
+ link: 'https://doris.apache.org/blog/release-note-2.0.3',
+ },
+ {
+ label: 'Empowering cyber security by enabling 7 times faster log
analysis',
+ link:
'https://doris.apache.org/blog/empowering-cyber-security-by-enabling-seven-times-faster-log-analysis',
+ },
+];
diff --git a/src/constant/core-capabilities.data.tsx
b/src/constant/core-capabilities.data.tsx
index fa5b6402a48..38ffae64932 100644
--- a/src/constant/core-capabilities.data.tsx
+++ b/src/constant/core-capabilities.data.tsx
@@ -5,23 +5,6 @@ export const CoreCapabilitiesData = [
title: 'Real-time ingestion and storage',
content:
'Push-based micro-batch and pull-based streaming data ingestion
within a second. Storage engine with real-time upsert, append and
pre-aggregation.',
- icon: (
- <svg xmlns="http://www.w3.org/2000/svg"; width="48" height="48"
viewBox="0 0 48 48" fill="none">
- <path
- d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0
24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48ZM22.6666
29.3337L18.6666 25.3337L11.9999 25.3337C11.9999 25.3337 12.7333 21.2937 14.6666
20.0004C16.8266 18.5604 21.3333 20.0004 21.3333 20.0004L21.1748 20.3173C21.2272
20.2336 21.28 20.1502 21.3333 20.067C22.8868 17.583 25.0501 15.5377 27.6173
14.1258C30.1844 12.7138 33.0702 11.9822 35.9999 12.0003C35.9999 15.627 34.9599
22.0003 27.9999 26.667C27.9999 2 [...]
- fill="#444FD9"
- />
- <path
- d="M14.9332 29.2177C12.9332 30.8977 12.2665 35.8844
12.2665 35.8844C12.2665 35.8844 17.2532 35.2177 18.9332 33.2177C19.8799 32.0977
19.8665 30.3777 18.8132 29.3377C18.2949 28.8431 17.6123 28.5572 16.8962
28.5351C16.1801 28.5129 15.481 28.756 14.9332 29.2177Z"
- fill="#DFE0F7"
- />
- </svg>
- ),
- },
- {
- title: 'Lightning-fast query',
- content:
- 'Optimize for high-concurrency and high-throughput queries with
columnar storage engine, MPP architecture, cost based query optimizer,
vectorized execution engine.',
icon: (
<svg xmlns="http://www.w3.org/2000/svg"; width="48" height="48"
viewBox="0 0 48 48" fill="none">
<g clip-path="url(#clip0_1665_614)">
@@ -50,6 +33,23 @@ export const CoreCapabilitiesData = [
</svg>
),
},
+ {
+ title: 'Lightning-fast query',
+ content:
+ 'Optimize for high-concurrency and high-throughput queries with
columnar storage engine, MPP architecture, cost based query optimizer,
vectorized execution engine.',
+ icon: (
+ <svg xmlns="http://www.w3.org/2000/svg"; width="48" height="48"
viewBox="0 0 48 48" fill="none">
+ <path
+ d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0
24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48ZM22.6666
29.3337L18.6666 25.3337L11.9999 25.3337C11.9999 25.3337 12.7333 21.2937 14.6666
20.0004C16.8266 18.5604 21.3333 20.0004 21.3333 20.0004L21.1748 20.3173C21.2272
20.2336 21.28 20.1502 21.3333 20.067C22.8868 17.583 25.0501 15.5377 27.6173
14.1258C30.1844 12.7138 33.0702 11.9822 35.9999 12.0003C35.9999 15.627 34.9599
22.0003 27.9999 26.667C27.9999 2 [...]
+ fill="#444FD9"
+ />
+ <path
+ d="M14.9332 29.2177C12.9332 30.8977 12.2665 35.8844
12.2665 35.8844C12.2665 35.8844 17.2532 35.2177 18.9332 33.2177C19.8799 32.0977
19.8665 30.3777 18.8132 29.3377C18.2949 28.8431 17.6123 28.5572 16.8962
28.5351C16.1801 28.5129 15.481 28.756 14.9332 29.2177Z"
+ fill="#DFE0F7"
+ />
+ </svg>
+ ),
+ },
{
title: 'Federated querying',
content:
diff --git a/src/hooks/use-animation-frame.ts b/src/hooks/use-animation-frame.ts
index eb9cceeedd5..9c71d2b741e 100644
--- a/src/hooks/use-animation-frame.ts
+++ b/src/hooks/use-animation-frame.ts
@@ -9,18 +9,17 @@ export const useAnimationFrame = (callback, stop) => {
* The callback function is automatically passed a timestamp indicating
* the precise time requestAnimationFrame() was called.
*/
+ const animate = time => {
+ if (previousTimeRef.current !== undefined) {
+ const deltaTime = time - previousTimeRef.current;
+ callback(deltaTime);
+ }
+ previousTimeRef.current = time;
+ if (requestRef.current) cancelAnimationFrame(requestRef.current);
+ if (!stop) requestRef.current = requestAnimationFrame(animate);
+ };
React.useEffect(() => {
- const animate = time => {
- if (previousTimeRef.current !== undefined) {
- const deltaTime = time - previousTimeRef.current;
- callback(deltaTime);
- }
- previousTimeRef.current = time;
- if (requestRef.current) cancelAnimationFrame(requestRef.current);
- if (!stop) requestRef.current = requestAnimationFrame(animate);
- };
-
if (!stop) {
requestRef.current = requestAnimationFrame(animate);
}
@@ -30,5 +29,5 @@ export const useAnimationFrame = (callback, stop) => {
cancelAnimationFrame(requestRef.current);
}
};
- }, [stop]); // Make sure the effect runs only once
+ });
};
diff --git a/src/pages/download/index.tsx b/src/pages/download/index.tsx
index fabec89c9f3..346ee9ba0c6 100644
--- a/src/pages/download/index.tsx
+++ b/src/pages/download/index.tsx
@@ -155,13 +155,17 @@ export default function Download() {
</div>
</Link>
) : (
- <div className="relative bg-white flex
cursor-pointer flex-col items-center justify-center overflow-hidden rounded-lg
border-b-4 border-b-[#444FD9] py-[2rem] px-4 lg:px-[1.5rem]
shadow-[inset_0_0_0_1px_#444FD9] hover:no-underline">
- <div className="text-2xl
text-[#1D1D1D]">{item.title}</div>
- <div className="mt-4 text-base text-center
text-[#4C576C]">{item.description}</div>
- <div className="flex items-center mt-4">
- <span>Coming soon</span>
+ <section>
+ <div className="relative bg-white flex
cursor-pointer flex-col items-center justify-center overflow-hidden rounded-lg
border-b-4 border-b-[#444FD9] py-[2rem] px-4 lg:px-[1.5rem]
shadow-[inset_0_0_0_1px_#444FD9] hover:no-underline">
+ <div className="text-2xl
text-[#1D1D1D]">{item.title}</div>
+ <div className="mt-4 text-base
text-center text-[#4C576C]">
+ {item.description}
+ </div>
+ <div className="flex items-center
mt-4">
+ <span>Coming soon</span>
+ </div>
</div>
- </div>
+ </section>
),
)}
</ul>
diff --git a/src/pages/index.scss b/src/pages/index.scss
index 74f6a581df8..f9056a4a803 100644
--- a/src/pages/index.scss
+++ b/src/pages/index.scss
@@ -402,11 +402,10 @@
}
}
.ant-collapse-item {
- border-bottom: 0px;
+ border-bottom: 0.5px solid #dfe5f0;
.ant-collapse-header {
align-items: center;
padding: 1rem 0;
- border-bottom: 0.5px solid #dfe5f0;
.ant-collapse-expand-icon {
padding: 0;
transition-property: all;
@@ -418,7 +417,7 @@
height: 12rem;
padding: 0;
margin-top: 0.75rem;
- margin-bottom: 0.75rem;
+ margin-bottom: 1rem;
.cases-bg-datalake {
background: url('/static/images/cases-bg-datalake.png')
no-repeat center;
@@ -449,3 +448,6 @@
}
}
}
+
+@media (max-width: 1024px) {
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 70c15a5b7bc..72ef1e0b0dc 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -597,7 +597,8 @@ export default function Home(): JSX.Element {
<div className="flex mt-3
gap-2">
{links.map(({ content, to
}) => (
<LinkWithArrow
-
className="text-start text-[10px] leading-[17px]"
+ style={{ fontSize:
'10px', lineHeight: '17px' }}
+
className="text-start"
to={to}
text={content}
/>
@@ -637,7 +638,7 @@ export default function Home(): JSX.Element {
>
<div>{content}</div>
- <div className="flex mt-14
gap-2">
+ <div className="flex mt-14
gap-10">
{links.map(({ content, to
}) => (
<LinkWithArrow
className="text-start" to={to} text={content} />
))}
diff --git a/src/pages/users/index.tsx b/src/pages/users/index.tsx
index 68639010f6f..29db9e83811 100644
--- a/src/pages/users/index.tsx
+++ b/src/pages/users/index.tsx
@@ -16,6 +16,7 @@ import useIsBrowser from '@docusaurus/useIsBrowser';
import UserItem from './user-item';
import USERS from '../../constant/users.data.json';
import ReadMore from '@site/src/components/ReadMore';
+import LinkWithArrow from '@site/src/components/link-arrow';
const ALL_TEXT = 'All';
@@ -85,7 +86,7 @@ export default function Users(): JSX.Element {
{!isPhone && (
<div
onClick={handlePrevious}
- className="swiper-button-prev"
+ className="swiper-button-prev invisible
group-hover:visible"
style={{ position: 'absolute', top: 'calc(50% -
2rem)', left: '-3rem', zIndex: 99 }}
></div>
)}
@@ -129,7 +130,7 @@ export default function Users(): JSX.Element {
{!isPhone && (
<div
onClick={handleNext}
- className="swiper-button-next"
+ className="swiper-button-next invisible
group-hover:visible"
style={{ position: 'absolute', top: 'calc(50% -
2rem)', right: '-3rem', zIndex: 99 }}
></div>
)}
@@ -159,8 +160,11 @@ export default function Users(): JSX.Element {
</div>
}
/>
- <section className="users-wall container
lg:pt-[88px]">{renderSwiper()}</section>
- <section className="lg:pt-[5.5rem] container">
+
+ <section className="group">
+ <div className="users-wall container lg:pt-[88px]
">{renderSwiper()}</div>
+ </section>
+ <section className="lg:pt-[5.5rem] container pb-[88px]">
<div className="blog-list-wrap row mt-28 lg:mt-0">
<ul className="container scrollbar-none mt-0 m-auto flex
flex-wrap gap-3 overflow-auto lg:w-[58rem] text-[#4C576C] lg:mt-8
lg:justify-center lg:gap-6 ">
{USER_STORIES_CATEGORIES.map((item: any) => (
@@ -176,11 +180,45 @@ export default function Users(): JSX.Element {
))}
</ul>
</div>
- <ul className="mt-6 grid gap-1 grid-cols-2 lg:gap-6 lg:mt-12
lg:grid-cols-4 pb-[88px]">
- {users.map(user => (
+ <ul className="mt-6 grid gap-1 grid-cols-2 lg:gap-8 lg:mt-12
lg:grid-cols-4 ">
+ {users.slice(0, currentSize).map(user => (
<UserItem key={user.name} {...user} />
))}
</ul>
+ {currentSize < users.length && (
+ <div
+ onClick={() => setCurrentSize(currentSize =>
Math.min(currentSize + PAGE_SIZE, users.length))}
+ className="justify-center flex mt-9"
+ >
+ <div className="flex items-center cursor-pointer px-8
py-4 border border-[#444FD9] rounded text-[#444FD9] text-base">
+ <span className="mr-1">View more</span>
+ <span>
+ <svg
+ xmlns="http://www.w3.org/2000/svg";
+ width="17"
+ height="17"
+ viewBox="0 0 17 17"
+ fill="none"
+ >
+ <path
+ d="M4.5 9.82226L8.5 13.8222L12.5
9.82227"
+ stroke="#444FD9"
+ stroke-width="1.37143"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ <path
+ d="M8.49951 3.82227L8.49951 13.8223"
+ stroke="#444FD9"
+ stroke-width="1.37143"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ </span>
+ </div>
+ </div>
+ )}
</section>
</Layout>
);
diff --git a/src/pages/users/user-item.tsx b/src/pages/users/user-item.tsx
index f56a4c5fc95..6fa52e589a6 100644
--- a/src/pages/users/user-item.tsx
+++ b/src/pages/users/user-item.tsx
@@ -13,7 +13,7 @@ interface UserItemProps {
export default function UserItem(props: UserItemProps) {
return (
- <div className="group cursor-pointer flex flex-col items-center
swipe-top-button lg:h-[17.5rem] lg:w-[17.5rem] h-[12rem] w-[12rem]
shadow-[0px_2px_8px_0px_rgba(49,77,136,0.16)] rounded-lg">
+ <div className="group cursor-pointer flex flex-col items-center
swipe-top-button shadow-[0px_2px_8px_0px_rgba(49,77,136,0.16)] rounded-lg">
<div className="group-hover:hidden flex justify-between py-2 px-2
lg:px-[2.375rem] lg:pt-[4.25rem] lg:pb-[2.375rem] flex-col items-center h-full
w-full gap-[2.375rem]">
<img src={props?.image} alt={props?.name} />
<span className="text-xs lg:text-base">{props?.name}</span>
diff --git a/src/scss/components/breadcrumbs.scss
b/src/scss/components/breadcrumbs.scss
index ba43197f157..14ada126a48 100644
--- a/src/scss/components/breadcrumbs.scss
+++ b/src/scss/components/breadcrumbs.scss
@@ -7,6 +7,7 @@
.breadcrumbs {
display: flex;
+ align-items: center;
&__item {
display: flex;
align-items: center;
@@ -29,7 +30,9 @@
background: transparent;
padding-left: 0;
padding-right: 0;
-
+ > svg {
+ top: 0px;
+ }
@media (max-width: 996px) {
display: inline-flex;
align-items: center;
@@ -37,7 +40,6 @@
vertical-align: middle;
> svg {
- top: -1px;
}
}
}
diff --git a/src/scss/components/markdown.scss
b/src/scss/components/markdown.scss
index 5d3b5b9df93..066a601b2e0 100644
--- a/src/scss/components/markdown.scss
+++ b/src/scss/components/markdown.scss
@@ -40,7 +40,6 @@
background-color: #edf2fa;
border: none;
padding: 3px 4px;
- margin: 0 8px;
font-size: 14px;
color: #4c576c;
}
diff --git a/src/scss/components/navbar.scss b/src/scss/components/navbar.scss
index 8d1829d705a..9ecdbb24bf6 100644
--- a/src/scss/components/navbar.scss
+++ b/src/scss/components/navbar.scss
@@ -332,7 +332,7 @@
.navbar-left {
.navbar-logo-wrapper {
.navbar__logo {
- height: 1.5625rem;
+ height: auto;
}
.docs {
svg {
diff --git a/src/scss/components/search.scss b/src/scss/components/search.scss
index 27360312775..d8a739112f8 100644
--- a/src/scss/components/search.scss
+++ b/src/scss/components/search.scss
@@ -72,6 +72,10 @@ p[class*='searchResultItemSummary'] {
.navbar__search-input {
width: 100% !important;
}
+
+ > span {
+ width: 100%;
+ }
}
}
}
diff --git a/src/theme/BlogListItem/HeadItem/index.tsx
b/src/theme/BlogListItem/HeadItem/index.tsx
index d894ff5014b..b6547f8de2d 100644
--- a/src/theme/BlogListItem/HeadItem/index.tsx
+++ b/src/theme/BlogListItem/HeadItem/index.tsx
@@ -55,10 +55,14 @@ export default function HeadItem(props: any) {
to={permalink}
className={`hover:no-underline hover:decoration-none
transition-scale group relative ${
large ? 'h-full' : 'h-auto'
- } flex flex-col rounded-lg border border-[#DFE5F0]
hover:border-[#0065FD]`}
+ } flex flex-col `}
>
- <img src={image} alt="" />
- <div className="flex flex-col-reverse justify-between lg:flex-row
lg:py-0 py-6 lg:space-x-10 px-6">
+ <img
+ className="rounded-t-lg border border-b-0 border-[#DFE5F0]
group-hover:border-[#0065FD]"
+ src={image}
+ alt=""
+ />
+ <div className="rounded-b-lg border border-t-0 border-[#DFE5F0]
group-hover:border-[#0065FD] h-full flex flex-col-reverse justify-between
lg:flex-row lg:py-0 py-6 lg:space-x-10 px-6">
<div className="flex-1">
<h1 className=" mt-4 line-clamp-2 text-2xl font-medium
text-black-dark lg:text-[2rem] lg:leading-[3rem]">
{title}
diff --git a/src/theme/BlogPostItem/index.tsx b/src/theme/BlogPostItem/index.tsx
index 29306e7bf92..3e341103a81 100644
--- a/src/theme/BlogPostItem/index.tsx
+++ b/src/theme/BlogPostItem/index.tsx
@@ -36,51 +36,53 @@ export default function BlogPostItem(props) {
const tagsExists = tags.length > 0;
const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
const authorsExists = authors && authors.length > 0;
+ console.log(metadata);
return (
- <article
- className={!isBlogPostPage ? 'margin-bottom--xl' :
'blog-article-content'}
- itemProp="blogPost"
- itemScope
- itemType="http://schema.org/BlogPosting";
- >
- <header>
- <div className="text-center mb-4">
- <Link className="text-[#8592A6] cursor-pointer
hover:no-underline" to="/blog">
- Blog
- </Link>
- <span className="px-2 text-[#8592A6]">/</span>
- <span>
- <span className="s-tags">
- {tags.map((tag, i) => (
- <span className="s-tag" key={i}>
- {tag.label}
- </span>
- ))}
- </span>
- </span>
- </div>
- <TitleHeading className="blog-post-title text-[2.5rem]
text-center" itemProp="headline">
- {isBlogPostPage ? (
- title
- ) : (
- <Link itemProp="url" to={permalink}>
- {title}
+ <>
+ <article
+ className={!isBlogPostPage ? 'margin-bottom--xl' :
'blog-article-content'}
+ itemProp="blogPost"
+ itemScope
+ itemType="http://schema.org/BlogPosting";
+ >
+ <header>
+ <div className="text-center mb-4">
+ <Link className="text-[#8592A6] cursor-pointer
hover:no-underline" to="/blog">
+ Blog
</Link>
- )}
- </TitleHeading>
- <div className="blog-info text-center flex justify-center
text-sm text-black">
- {authorsExists && (
- <>
- <span className="authors">
- {authors.map((author, i) => (
- <span className="s-author text-black"
key={i}>
- {author.name}
+ <span className="px-2 text-[#8592A6]">/</span>
+ <span>
+ <span className="s-tags">
+ {tags.map((tag, i) => (
+ <span className="s-tag" key={i}>
+ {tag.label}
</span>
))}
</span>
- </>
- )}
- {/* {tagsExists && (
+ </span>
+ </div>
+ <TitleHeading className="blog-post-title text-[2.5rem]
text-center" itemProp="headline">
+ {isBlogPostPage ? (
+ title
+ ) : (
+ <Link itemProp="url" to={permalink}>
+ {title}
+ </Link>
+ )}
+ </TitleHeading>
+ <div className="blog-info text-center flex justify-center
text-sm text-black">
+ {authorsExists && (
+ <>
+ <span className="authors">
+ {authors.map((author, i) => (
+ <span className="s-author text-black"
key={i}>
+ {author.name}
+ </span>
+ ))}
+ </span>
+ </>
+ )}
+ {/* {tagsExists && (
<>
<span className="split-line"></span>
<span className="s-tags">
@@ -92,22 +94,23 @@ export default function BlogPostItem(props) {
</span>
</>
)} */}
- <time dateTime={date} itemProp="datePublished"
className="text-black ml-4">
- {formattedDate}
- </time>
- </div>
- </header>
+ <time dateTime={date} itemProp="datePublished"
className="text-black ml-4">
+ {formattedDate}
+ </time>
+ </div>
+ </header>
- {/* {image && <meta itemProp="image" content={withBaseUrl(image, {
absolute: true })} />} */}
+ {/* {image && <meta itemProp="image"
content={withBaseUrl(image, { absolute: true })} />} */}
- <div
- // This ID is used for the feed generation to locate the main
content
- id={isBlogPostPage ? blogPostContainerID : undefined}
- className="markdown"
- itemProp="articleBody"
- >
- <MDXContent>{children}</MDXContent>
- </div>
- </article>
+ <div
+ // This ID is used for the feed generation to locate the
main content
+ id={isBlogPostPage ? blogPostContainerID : undefined}
+ className="markdown"
+ itemProp="articleBody"
+ >
+ <MDXContent>{children}</MDXContent>
+ </div>
+ </article>
+ </>
);
}
diff --git a/src/theme/BlogPostPage/Metadata/index.tsx
b/src/theme/BlogPostPage/Metadata/index.tsx
new file mode 100644
index 00000000000..1f56fdfec61
--- /dev/null
+++ b/src/theme/BlogPostPage/Metadata/index.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { PageMetadata } from '@docusaurus/theme-common';
+import { useBlogPost } from '@docusaurus/theme-common/internal';
+
+export default function BlogPostPageMetadata(): JSX.Element {
+ const { assets, metadata } = useBlogPost();
+ const { title, description, date, tags, authors, frontMatter } = metadata;
+
+ const { keywords } = frontMatter;
+ const image = assets.image ?? frontMatter.image;
+ return (
+ <PageMetadata title={title} description={description}
keywords={keywords} image={image}>
+ <meta property="og:type" content="article" />
+ <meta property="article:published_time" content={date} />
+ {/* TODO double check those article meta array syntaxes, see
https://ogp.me/#array */}
+ {authors.some(author => author.url) && (
+ <meta
+ property="article:author"
+ content={authors
+ .map(author => author.url)
+ .filter(Boolean)
+ .join(',')}
+ />
+ )}
+ {tags.length > 0 && <meta property="article:tag"
content={tags.map(tag => tag.label).join(',')} />}
+ </PageMetadata>
+ );
+}
diff --git a/src/theme/BlogPostPage/index.tsx b/src/theme/BlogPostPage/index.tsx
new file mode 100644
index 00000000000..0a75fb8a1ae
--- /dev/null
+++ b/src/theme/BlogPostPage/index.tsx
@@ -0,0 +1,67 @@
+import React, { type ReactNode } from 'react';
+import clsx from 'clsx';
+import { HtmlClassNameProvider, ThemeClassNames } from
'@docusaurus/theme-common';
+import { BlogPostProvider, useBlogPost } from
'@docusaurus/theme-common/internal';
+import BlogLayout from '@theme/BlogLayout';
+import BlogPostItem from '@theme/BlogPostItem';
+import BlogPostPaginator from '@theme/BlogPostPaginator';
+import BlogPostPageMetadata from '@theme/BlogPostPage/Metadata';
+import TOC from '@theme/TOC';
+import type { Props } from '@theme/BlogPostPage';
+import type { BlogSidebar } from '@docusaurus/plugin-content-blog';
+import Link from '@docusaurus/Link';
+import RecentBlogs from '@site/src/components/recent-blogs';
+
+function BlogPostPageContent(props: { sidebar: BlogSidebar; children:
ReactNode }): JSX.Element {
+ const { sidebar, children } = props;
+ const { metadata, toc } = useBlogPost();
+
+ const { nextItem, prevItem, frontMatter, tags } = metadata;
+ const {
+ hide_table_of_contents: hideTableOfContents,
+ toc_min_heading_level: tocMinHeadingLevel,
+ toc_max_heading_level: tocMaxHeadingLevel,
+ } = frontMatter;
+
+ return (
+ <BlogLayout
+ sidebar={sidebar}
+ toc={
+ !hideTableOfContents && toc.length > 0 ? (
+ <TOC toc={toc} minHeadingLevel={tocMinHeadingLevel}
maxHeadingLevel={tocMaxHeadingLevel} />
+ ) : undefined
+ }
+ >
+ <BlogPostItem>{children}</BlogPostItem>
+ <div className="scrollbar-none w-[100%] mt-6 custom-scrollbar
m-auto flex gap-3 overflow-auto text-[#4C576C] lg:mt-12 lg:gap-4 pl-4">
+ {tags.map((item: any, index) => (
+ <Link className="py-px"
to={`/blog?currentPage=1¤tCategory=${item.label}`} key={index}>
+ <span
+ className={`block cursor-pointer whitespace-nowrap
rounded-[2.5rem] px-4 py-2 text-sm bg-[#F7F9FE] hover:bg-[#444FD9]
hover:text-white lg:px-6 lg:py-3 lg:text-base `}
+ >
+ {item.label}
+ </span>
+ </Link>
+ ))}
+ </div>
+ {/* {(nextItem || prevItem) && <BlogPostPaginator
nextItem={nextItem} prevItem={prevItem} />} */}
+ <RecentBlogs />
+ </BlogLayout>
+ );
+}
+
+export default function BlogPostPage(props: Props): JSX.Element {
+ const BlogPostContent = props.content;
+ return (
+ <BlogPostProvider content={props.content} isBlogPostPage>
+ <HtmlClassNameProvider
+ className={clsx(ThemeClassNames.wrapper.blogPages,
ThemeClassNames.page.blogPostPage)}
+ >
+ <BlogPostPageMetadata />
+ <BlogPostPageContent sidebar={props.sidebar}>
+ <BlogPostContent />
+ </BlogPostPageContent>
+ </HtmlClassNameProvider>
+ </BlogPostProvider>
+ );
+}
diff --git a/src/theme/DocSidebarItem/Category/style.scss
b/src/theme/DocSidebarItem/Category/style.scss
index da25dbcf0fe..beb4682f6bf 100644
--- a/src/theme/DocSidebarItem/Category/style.scss
+++ b/src/theme/DocSidebarItem/Category/style.scss
@@ -27,7 +27,7 @@
background-color: rgba(237, 238, 250, 0.6);
}
.menu__list-item {
- .menu__link {
+ a.menu__link {
line-height: 2rem;
padding: 0 0.625rem;
color: #4c576c;
diff --git a/src/theme/Footer/index.tsx b/src/theme/Footer/index.tsx
index 30143f48b90..4ccdd308049 100644
--- a/src/theme/Footer/index.tsx
+++ b/src/theme/Footer/index.tsx
@@ -37,24 +37,24 @@ function Footer() {
if (isDocsPage) {
return (
- <div className="docs-footer">
- <div className="logo">
+ <div className="docs-footer flex-col lg:flex-row">
+ <div className="logo w-full lg:w-[var(--doc-sidebar-width)]
pt-28 lg:h-auto">
<FooterLogo logo={logo} />
</div>
- <div className="content">
+ <div className="content container">
<div className="my-7 text-[#8592A6] text-sm">
- <div className="flex pb-3 border-b border-[#F7F9FE]
flex-wrap">
- <div className=" w-40">RESOURCES</div>
+ <div className="flex flex-col lg:flex-row pb-3
border-b border-[#F7F9FE] flex-wrap">
+ <div className=" w-40 mb-3 lg:mb-0">RESOURCES</div>
{ResourcesItems.map(({ label, href }) => (
- <Link className="w-40 no-underline "
href={href}>
+ <Link className="w-40 no-underline mb-2"
href={href}>
{label}
</Link>
))}
</div>
- <div className="flex pt-3 flex-wrap">
- <div className="w-40">COMMUNITY</div>
+ <div className="flex flex-col lg:flex-row pt-3
flex-wrap">
+ <div className="w-40 mb-3 lg:mb-0">COMMUNITY</div>
{CommunityItems.map(({ label, href }) => (
- <Link className="w-40 no-underline "
href={href}>
+ <Link className="w-40 no-underline mb-2"
href={href}>
{label}
</Link>
))}
diff --git a/src/theme/Footer/styles.scss b/src/theme/Footer/styles.scss
index fd5017ed819..e70eebf6ee3 100644
--- a/src/theme/Footer/styles.scss
+++ b/src/theme/Footer/styles.scss
@@ -217,7 +217,6 @@
display: flex;
border-top: 1px solid #edf2fa;
.logo {
- width: var(--doc-sidebar-width);
position: relative;
.footer__logo {
position: absolute;
diff --git a/src/theme/SearchBar/SearchBar.jsx
b/src/theme/SearchBar/SearchBar.jsx
index 40b546ffb80..3b6fbaf0a31 100644
--- a/src/theme/SearchBar/SearchBar.jsx
+++ b/src/theme/SearchBar/SearchBar.jsx
@@ -129,6 +129,7 @@ export default function SearchBar({ handleSearchBarToggle
}) {
const div = document.createElement('div');
div.className = styles.hitFooter;
div.appendChild(a);
+ console.log(div);
return div;
},
},
@@ -244,7 +245,7 @@ export default function SearchBar({ handleSearchBarToggle
}) {
}, [location.pathname, location.search, location.hash, history]);
return (
<div
- className={clsx('navbar__search ', styles.searchBarContainer, {
+ className={clsx('navbar__search', styles.searchBarContainer, {
[styles.searchIndexLoading]: loading && inputChanged,
[styles.focused]: focused,
})}
diff --git a/src/theme/SearchBar/SearchBar.module.css
b/src/theme/SearchBar/SearchBar.module.css
index 74e14ebdf62..dfaf47d6e76 100644
--- a/src/theme/SearchBar/SearchBar.module.css
+++ b/src/theme/SearchBar/SearchBar.module.css
@@ -23,14 +23,13 @@
border-radius: 0.5rem;
}
-@media (max-width: 576px) {
+@media (max-width: 996px) {
:global(.navbar__search-input):not(:focus) {
width: 2rem;
}
.searchBar .dropdownMenu {
- width: var(--search-local-modal-width-sm, 340px);
- max-width: calc(100vw - var(--ifm-navbar-padding-horizontal) * 2);
+ width: 100%;
}
}
diff --git a/static/js/custom-script.js b/static/js/custom-script.js
new file mode 100644
index 00000000000..4527b14de19
--- /dev/null
+++ b/static/js/custom-script.js
@@ -0,0 +1,7 @@
+<script type="text/javascript">
+ (function(c,l,a,r,i,t,y){
+ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+ t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+ y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+ })(window, document, "clarity", "script", "kfyqejiz0g");
+</script>
\ No newline at end of file
diff --git a/versioned_sidebars/version-2.0-sidebars.json
b/versioned_sidebars/version-2.0-sidebars.json
index 7bb5231282a..77410e4e616 100644
--- a/versioned_sidebars/version-2.0-sidebars.json
+++ b/versioned_sidebars/version-2.0-sidebars.json
@@ -3,10 +3,7 @@
{
"type": "category",
"label": "Getting Started",
- "items": [
- "get-starting/quick-start",
- "get-starting/what-is-apache-doris"
- ]
+ "items": ["get-starting/quick-start",
"get-starting/what-is-apache-doris"]
},
{
"type": "category",
@@ -97,9 +94,7 @@
{
"type": "category",
"label": "Import Advanced",
- "items": [
-
"data-operate/import/import-advanced/min-load-replica-num"
- ]
+ "items":
["data-operate/import/import-advanced/min-load-replica-num"]
}
]
},
@@ -132,25 +127,17 @@
{
"type": "category",
"label": "Alter Table",
- "items": [
- "advanced/alter-table/schema-change",
- "advanced/alter-table/replace-table"
- ]
+ "items": ["advanced/alter-table/schema-change",
"advanced/alter-table/replace-table"]
},
{
"type": "category",
"label": "Doris Partition",
- "items": [
- "advanced/partition/dynamic-partition",
- "advanced/partition/table-temp-partition"
- ]
+ "items": ["advanced/partition/dynamic-partition",
"advanced/partition/table-temp-partition"]
},
{
"type": "category",
"label": "Data Cache",
- "items": [
- "advanced/cache/partition-cache"
- ]
+ "items": ["advanced/cache/partition-cache"]
},
"advanced/autobucket",
"advanced/broker",
@@ -254,9 +241,7 @@
{
"type": "category",
"label": "UDAF",
- "items": [
-
"ecosystem/udaf/remote-user-defined-aggregation-function"
- ]
+ "items":
["ecosystem/udaf/remote-user-defined-aggregation-function"]
}
]
},
@@ -1108,9 +1093,7 @@
{
"type": "category",
"label": "Operators",
- "items": [
- "sql-manual/sql-reference/Operators/in"
- ]
+ "items": ["sql-manual/sql-reference/Operators/in"]
},
{
"type": "category",
@@ -1164,9 +1147,7 @@
{
"type": "category",
"label": "Monitor Metrics",
- "items": [
-
"admin-manual/maint-monitor/monitor-metrics/metrics"
- ]
+ "items":
["admin-manual/maint-monitor/monitor-metrics/metrics"]
},
"admin-manual/maint-monitor/disk-capacity",
"admin-manual/maint-monitor/tablet-repair-and-balance",
@@ -1202,17 +1183,12 @@
{
"type": "category",
"label": "User Privilege and Ldap",
- "items": [
- "admin-manual/privilege-ldap/user-privilege",
- "admin-manual/privilege-ldap/ldap"
- ]
+ "items": ["admin-manual/privilege-ldap/user-privilege",
"admin-manual/privilege-ldap/ldap"]
},
{
"type": "category",
"label": "System Table",
- "items": [
- "admin-manual/system-table/rowsets"
- ]
+ "items": ["admin-manual/system-table/rowsets"]
},
"admin-manual/workload-group",
"admin-manual/multi-tenant",
@@ -1310,19 +1286,12 @@
{
"type": "category",
"label": "FAQ",
- "items": [
- "faq/install-faq",
- "faq/data-faq",
- "faq/sql-faq"
- ]
+ "items": ["faq/install-faq", "faq/data-faq", "faq/sql-faq"]
},
{
"type": "category",
"label": "Benchmark",
- "items": [
- "benchmark/ssb",
- "benchmark/tpch"
- ]
+ "items": ["benchmark/ssb", "benchmark/tpch"]
},
{
"type": "category",
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
