This is an automated email from the ASF dual-hosted git repository.
weibin pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-graphar-website.git
The following commit(s) were added to refs/heads/main by this push:
new dc5c2e7 feat: adjust home page styling (#6)
dc5c2e7 is described below
commit dc5c2e7c821af49cbd4d41f869fb887ec0a9005e
Author: pomelo <[email protected]>
AuthorDate: Tue Apr 9 14:07:26 2024 +0800
feat: adjust home page styling (#6)
---
.prettierrc.cjs | 7 ++++
docusaurus.config.ts | 49 ++++++++++++-----------
src/components/HomepageFeatures/index.tsx | 22 ++++++----
src/components/HomepageFeatures/styles.module.css | 6 ++-
src/css/custom.css | 48 +++++++++++++++++++---
static/img/banner/design.svg | 1 +
static/img/banner/language.svg | 1 +
static/img/banner/search.svg | 1 +
8 files changed, 96 insertions(+), 39 deletions(-)
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
new file mode 100644
index 0000000..1e888ff
--- /dev/null
+++ b/.prettierrc.cjs
@@ -0,0 +1,7 @@
+module.exports = {
+ semi: true,
+ trailingComma: "all",
+ singleQuote: true,
+ printWidth: 120,
+ arrowParens: "avoid",
+};
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index b288c59..7e1bb4a 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -17,22 +17,20 @@
* under the License.
*/
-import {themes as prismThemes} from 'prism-react-renderer';
-import type {Config} from '@docusaurus/types';
+import { themes as prismThemes } from 'prism-react-renderer';
+import type { Config } from '@docusaurus/types';
import type * as Preset from '@docusaurus/preset-classic';
-const projectName = "GraphAr";
-const mainRepoName = "incubator-graphar";
-const siteRepoName = "incubator-graphar-website";
+const projectName = 'GraphAr';
+const mainRepoName = 'incubator-graphar';
+const siteRepoName = 'incubator-graphar-website';
const config: Config = {
- title: `Apache ${projectName} (incubating)`,
+ title: `Apache ${projectName}`,
tagline: `An open source, standard data file format for graph data storage
and retrieval`,
favicon: 'img/favicon.ico',
-
url: `https://${projectName.toLowerCase()}.apache.org/`,
baseUrl: '/',
-
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'throw',
@@ -74,8 +72,13 @@ const config: Config = {
src: 'img/logo.svg',
},
items: [
- {type: 'docSidebar', sidebarId: 'documentation', position: 'right',
label: 'Documentation'},
- {to: '/blog', label: 'Blog', position: 'right'},
+ {
+ type: 'docSidebar',
+ sidebarId: 'documentation',
+ position: 'right',
+ label: 'Documentation',
+ },
+ { to: '/blog', label: 'Blog', position: 'right' },
{
type: 'dropdown',
label: 'ASF',
@@ -83,37 +86,37 @@ const config: Config = {
items: [
{
label: 'Foundation',
- to: 'https://www.apache.org/'
+ to: 'https://www.apache.org/',
},
{
label: 'License',
- to: 'https://www.apache.org/licenses/'
+ to: 'https://www.apache.org/licenses/',
},
{
label: 'Events',
- to: 'https://www.apache.org/events/current-event.html'
+ to: 'https://www.apache.org/events/current-event.html',
},
{
label: 'Privacy',
- to:
'https://privacy.apache.org/policies/privacy-policy-public.html'
+ to:
'https://privacy.apache.org/policies/privacy-policy-public.html',
},
{
label: 'Security',
- to: 'https://www.apache.org/security/'
+ to: 'https://www.apache.org/security/',
},
{
label: 'Sponsorship',
- to: 'https://www.apache.org/foundation/sponsorship.html'
+ to: 'https://www.apache.org/foundation/sponsorship.html',
},
{
label: 'Thanks',
- to: 'https://www.apache.org/foundation/thanks.html'
+ to: 'https://www.apache.org/foundation/thanks.html',
},
{
label: 'Code of Conduct',
- to: 'https://www.apache.org/foundation/policies/conduct.html'
- }
- ]
+ to: 'https://www.apache.org/foundation/policies/conduct.html',
+ },
+ ],
},
{
href: `https://github.com/apache/${mainRepoName}`,
@@ -177,9 +180,9 @@ const config: Config = {
],
logo: {
width: 200,
- src: "/img/apache-incubator.svg",
- href: "https://incubator.apache.org/";,
- alt: "Apache Incubator logo"
+ src: '/img/apache-incubator.svg',
+ href: 'https://incubator.apache.org/',
+ alt: 'Apache Incubator logo',
},
copyright: `<div>
<p>
diff --git a/src/components/HomepageFeatures/index.tsx
b/src/components/HomepageFeatures/index.tsx
index 961b81f..608ebfc 100644
--- a/src/components/HomepageFeatures/index.tsx
+++ b/src/components/HomepageFeatures/index.tsx
@@ -22,44 +22,50 @@ import Heading from '@theme/Heading';
import styles from './styles.module.css';
type FeatureItem = {
+ Svg: string;
title: string;
- description: JSX.Element;
+ description: React.ReactNode;
};
const FeatureList: FeatureItem[] = [
{
title: 'Efficient format design',
+ Svg: require('@site/static/img/banner/design.svg').default,
description: (
<>
- GraphAr is designed to be efficient for storage and retrieval of
large-scale graph data with techniques
- such as chunking, columnar storage, and maintain CSR/CSC semantics.
+ GraphAr is designed to be efficient for storage and retrieval of
large-scale graph data with techniques such as
+ chunking, columnar storage, and maintain CSR/CSC semantics.
</>
),
},
{
title: 'Out-of-core queries',
+ Svg: require('@site/static/img/banner/search.svg').default,
description: (
<>
- Designed for out-of-core scenarios, enabling the storage and querying
of large-scale
- graphs outside of memory, such as in data lakes.
+ Designed for out-of-core scenarios, enabling the storage and querying
of large-scale graphs outside of memory,
+ such as in data lakes.
</>
),
},
{
title: 'Cross-language support',
+ Svg: require('@site/static/img/banner/language.svg').default,
description: (
<>
- Provides libraries in C++, Java, Scala with Spark, and Python with
PySpark for
- generating, accessing, and transforming files in GraphAr format.
+ Provides libraries in C++, Java, Scala with Spark, and Python with
PySpark for generating, accessing, and
+ transforming files in GraphAr format.
</>
),
},
];
-function Feature({title, description}: FeatureItem) {
+function Feature({ title, description, Svg }: FeatureItem) {
+ console.log('icon', Svg);
return (
<div className={clsx('col col--4')}>
<div className="text--center padding-horiz--md">
+ <div> {<Svg role="img" className={styles.featureSvg} />}</div>
<Heading as="h3">{title}</Heading>
<p>{description}</p>
</div>
diff --git a/src/components/HomepageFeatures/styles.module.css
b/src/components/HomepageFeatures/styles.module.css
index fb11d25..2a8f260 100644
--- a/src/components/HomepageFeatures/styles.module.css
+++ b/src/components/HomepageFeatures/styles.module.css
@@ -25,6 +25,8 @@
}
.featureSvg {
- height: 200px;
- width: 200px;
+ height: 60px;
+ width: 60px;
+ fill: var(--ifm-color-primary);
+ margin: 20px 0px;
}
diff --git a/src/css/custom.css b/src/css/custom.css
index d1ef6c4..f5c3bad 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -18,10 +18,11 @@
*/
:root {
- --ifm-color-primary: #3071a9;
+ /* #3071a9; */
+ --ifm-color-primary: #2580f1;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
- --ifm-footer-background-color:rgba(115, 150, 233, 0.61);
+ --ifm-footer-background-color: rgba(115, 150, 233, 0.61);
}
[data-theme='dark'] {
@@ -29,7 +30,20 @@
}
.navbar__logo img {
- width: 80%;
+ width: unset;
+ height: 40px;
+}
+
+.navbar__logo::after {
+ content: 'Apache GraphAr';
+ display: inline-block;
+ font-size: 1em;
+ color: var(--ifm-hero-text-color);
+ font-weight: 700;
+ text-align: center;
+ position: absolute;
+ top: 15px;
+ margin-left: 8px;
}
.header-github-link:hover {
@@ -42,18 +56,40 @@
height: 24px;
display: flex;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12
0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577
0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633
17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236
1.07 1.835 2.809 1.305
3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93
0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.52 [...]
- no-repeat;
+ no-repeat;
}
[data-theme='dark'] .header-github-link::before {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63
0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577
0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633
17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236
1.07 1.835 2.809 1.305
3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93
0-1.31.465-2.38 1.235-3.22-.135- [...]
- no-repeat;
+ no-repeat;
}
.footer__copyright {
- font-size: .7em;
+ font-size: 0.7em;
}
.footer__links {
text-align: center;
}
+.hero {
+ background: linear-gradient(to bottom right, #2580f1, #45b5aa, #30dbde);
+}
+
+.hero__title::after {
+ content: 'incubating';
+ display: block;
+ font-size: 0.4em;
+ color: var(--ifm-hero-text-color);
+ font-weight: 300;
+ text-align: center;
+ font-style: italic;
+ text-align: center;
+ transform: translate(134px, 0px);
+ margin-bottom: 0.4em;
+}
+
+@media screen and (max-width: 996px) {
+ .hero__title::after {
+ transform: translate(0, 0);
+ }
+}
diff --git a/static/img/banner/design.svg b/static/img/banner/design.svg
new file mode 100644
index 0000000..e22dc16
--- /dev/null
+++ b/static/img/banner/design.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 512 512"><!--!Font
Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License -
https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
d="M469.3 19.3l23.4 23.4c25 25 25 65.5 0 90.5l-56.4 56.4L322.3
75.7l56.4-56.4c25-25 65.5-25 90.5 0zM44.9 353.2L299.7 98.3 413.7 212.3 158.8
467.1c-6.7 6.7-15.1 11.6-24.2 14.2l-104 29.7c-8.4 2.4-17.4
.1-23.6-6.1s-8.5-15.2-6.1-23.6l29.7-104c2.6-9.2 7.5-17.5 14.2-24.2zM249.4 [...]
\ No newline at end of file
diff --git a/static/img/banner/language.svg b/static/img/banner/language.svg
new file mode 100644
index 0000000..216c19a
--- /dev/null
+++ b/static/img/banner/language.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 640 512"><!--!Font
Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License -
https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5
39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0
45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3
0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12. [...]
\ No newline at end of file
diff --git a/static/img/banner/search.svg b/static/img/banner/search.svg
new file mode 100644
index 0000000..2df7fe5
--- /dev/null
+++ b/static/img/banner/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 460 512"><!--!Font
Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License -
https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
d="M220.6 130.3l-67.2 28.2V43.2L98.7
233.5l54.7-24.2v130.3l67.2-209.3zm-83.2-96.7l-1.3 4.7-15.2 52.9C80.6 106.7 52
145.8 52 191.5c0 52.3 34.3 95.9 83.4 105.5v53.6C57.5 340.1 0 272.4 0
191.6c0-80.5 59.8-147.2 137.4-158zm311.4 447.2c-11.2 11.2-23.1 12.3-28.6
10.5-5.4-1.8-27. [...]
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
