You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@age.apache.org by hb...@apache.org on 2022/08/29 08:21:53 UTC
[age-website] branch new-web updated: modified landing page (#69)
This is an automated email from the ASF dual-hosted git repository.
hbshin pushed a commit to branch new-web
in repository https://gitbox.apache.org/repos/asf/age-website.git
The following commit(s) were added to refs/heads/new-web by this push:
new ac1b2a0 modified landing page (#69)
ac1b2a0 is described below
commit ac1b2a0cd409c1b78d9c52c0eb83fbaeb71e6fb5
Author: ohshinyeop <46...@users.noreply.github.com>
AuthorDate: Mon Aug 29 17:21:48 2022 +0900
modified landing page (#69)
* RQ-1004
* community-join / landing page
* landing page style
* landing page / footer / add perfect scrollbar module
* 220823
* edit projectDetai.js
* 220826
* edit reddit spinner
* edit navbar link
* edit landing page
* modified landing page
Co-authored-by: Hanbyeol Shin / David Shin / 신한별 <76...@users.noreply.github.com>
---
src/components/AgeInfos.js | 4 +--
src/components/Layout.js | 2 ++
src/components/ProjectDetail.js | 4 ++-
src/components/ProjectList.js | 10 +++----
src/components/styles/Ageinfos.module.scss | 3 ++
src/components/styles/Navbar.module.scss | 6 ++--
src/components/styles/ProjectDtail.module.scss | 39 +++++++++++++++-----------
src/components/styles/ProjectList.module.scss | 12 ++++++--
src/pages/index.md | 5 ----
src/templates/index-page.js | 17 ++++++-----
src/templates/styles/index.module.scss | 35 +++++++++++++++--------
src/templates/styles/overview.module.scss | 4 +--
12 files changed, 86 insertions(+), 55 deletions(-)
diff --git a/src/components/AgeInfos.js b/src/components/AgeInfos.js
index 5116bd9..cea551b 100644
--- a/src/components/AgeInfos.js
+++ b/src/components/AgeInfos.js
@@ -16,14 +16,14 @@ const Ageinfos = () => {
<div className={styles.root}>
<div>
{isLoading ? <Spin /> : <></>}
- <span className={styles.Count}>{ageInfo.startCount}</span>
+ <a target="_blank" href='https://github.com/apache/age/stargazers' className={styles.Count}>{ageInfo.startCount}</a>
<br />
<span className={styles.Label}>✭ Star</span>
</div>
<div></div>
<div>
{isLoading ? <Spin /> : <></>}
- <span className={styles.Count}>{ageInfo.memberCount} +</span>
+ <a href='/team' className={styles.Count}>{ageInfo.memberCount} +</a>
<br />
<span className={styles.Label}>Team Members</span>
</div>
diff --git a/src/components/Layout.js b/src/components/Layout.js
index 4fb1483..9d79c76 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -15,6 +15,7 @@ import '../components/styles/font/font.css';
import './styles/media.scss';
// styles
import * as styles from './styles/Layout.module.scss';
+import favicon from '../../static/img/agedb-favicon.png';
const TemplateWrapper = ({ children }) => {
const { title, description } = useSiteMetadata();
@@ -40,6 +41,7 @@ const TemplateWrapper = ({ children }) => {
<Helmet>
<html lang="en" />
<title>{title}</title>
+ <link rel="icon" href={favicon} />
<meta name="description" content={description} />
{/* Global site tag (gtag.js) - Google Analytics */}
<script async src="https://www.googletagmanager.com/gtag/js?id=G-VPCE2QF63F" />
diff --git a/src/components/ProjectDetail.js b/src/components/ProjectDetail.js
index 21fd8f8..59bf209 100644
--- a/src/components/ProjectDetail.js
+++ b/src/components/ProjectDetail.js
@@ -28,7 +28,9 @@ const ProjectDetail = (props) => {
update on {projectDateMaker(project.updatedAt)}
</p>
<p className={styles.title}>{project.title}</p>
- <p className={styles.desc}>{project.shortDescription}</p>
+ <p className={styles.desc}>
+ {(project.shortDescription) == undefined ? "No description" : project.shortDescription }
+ </p>
</div>
<a className={styles.link} href={project.url} target="_blank">
View Details
diff --git a/src/components/ProjectList.js b/src/components/ProjectList.js
index 98c7837..37cd788 100644
--- a/src/components/ProjectList.js
+++ b/src/components/ProjectList.js
@@ -76,9 +76,9 @@ const ProjectList = ({ mode }) => {
<button
className={styles.MoreBtn}
onClick={() =>
- (window.location.href =
- 'https://github.com/shinhanbyeol?tab=projects&type=new')
- }
+ (window.location.href =
+ 'https://github.com/shinhanbyeol?tab=projects&type=new')
+ }
>
View on GitHub
</button>
@@ -86,9 +86,7 @@ const ProjectList = ({ mode }) => {
else return <></>;
})()}
</p>
- <p style={{ textAlign: 'center' }}>
- <button className={styles.MoreBtn}>Guideline</button>
- </p>
+
</ul>
</>
);
diff --git a/src/components/styles/Ageinfos.module.scss b/src/components/styles/Ageinfos.module.scss
index 0ad2124..4711878 100644
--- a/src/components/styles/Ageinfos.module.scss
+++ b/src/components/styles/Ageinfos.module.scss
@@ -17,6 +17,9 @@
border: 4px solid #cfb3ff;
border-radius: 4.6875rem;
opacity: 1;
+ a:hover {
+ color: #7c219f;
+ }
div {
display: flex;
flex-direction: column;
diff --git a/src/components/styles/Navbar.module.scss b/src/components/styles/Navbar.module.scss
index ad11caf..365ff2e 100644
--- a/src/components/styles/Navbar.module.scss
+++ b/src/components/styles/Navbar.module.scss
@@ -98,16 +98,18 @@
align-items: center;
color: #fff;
padding: 0.625rem;
- font: $h4;
+ font: $h5;
height: 2.5rem;
/* UI Properties */
background: transparent linear-gradient(90deg, #143a84 0%, #d30d52 100%)
0% 0% no-repeat padding-box;
border-radius: 16px;
+ opacity: 0.5;
}
.Download:hover {
color: #FFFFFF;
- opacity: 0.5;
+ opacity: 1;
+ border: 1px solid white;
}
}
}
diff --git a/src/components/styles/ProjectDtail.module.scss b/src/components/styles/ProjectDtail.module.scss
index 7ed811f..44bd546 100644
--- a/src/components/styles/ProjectDtail.module.scss
+++ b/src/components/styles/ProjectDtail.module.scss
@@ -1,8 +1,8 @@
@import '../../common/variable.scss';
.root {
- width: 360px;
- height: 330px;
+ width: 22.5rem;
+ height: 16.375rem;
/* UI Properties */
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid #e0e0e0;
@@ -13,21 +13,25 @@
align-items: center;
div {
width: 100%;
- padding: 66px 30px 0px;
+ padding: 20px 20px 0px;
}
p {
margin: 0;
padding: 0;
width: 100%;
- white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
color: $primayrColor;
}
.title {
font-weight: bold;
font-size: 24px;
- margin-bottom: 1.875rem;
+ margin-bottom: 1rem;
+ height: 80px;
+
}
.update {
font-weight: normal;
@@ -36,22 +40,24 @@
.desc {
font-weight: normal;
font-size: 16px;
- height: 64px;
- margin-bottom: 44px;
- white-space: normal;
- overflow-y: auto;
- word-break: break-word;
+ height: 55px;
+ margin-bottom: 1rem;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
}
.link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
- height: 5rem;
+ height: 3rem;
/* UI Properties */
background-color: $thirdColor;
color: #fff;
border-radius: 0px 0px 30px 30px;
+ font-size: 1.3rem;
}
.link:hover {
background-color: $primayrColor;
@@ -60,11 +66,11 @@
}
.root:hover {
width: 356px;
- height: 326px;
+ height: 280px;
overflow: hidden;
div {
background-color: $secondColor;
- padding: 62px 26px 0px;
+ padding: 20px 20px 0px;
p {
color: #fff;
}
@@ -73,15 +79,16 @@
background-color: #fff;
color: $secondColor;
cursor: pointer;
- font-size: 1.75rem;
+ font-size: 1.3rem;
+ font-weight: bold;
}
border: 4px solid #fff;
box-shadow: $shodow;
}
.rootToggle {
- width: 356px;
- height: 326px;
+ width: 22.5rem;
+ height: 16.375rem;
padding: 62px 26px 0px;
border: 4px solid $primayrColor;
box-shadow: $shodow;
diff --git a/src/components/styles/ProjectList.module.scss b/src/components/styles/ProjectList.module.scss
index c0eb6f0..ed9d44c 100644
--- a/src/components/styles/ProjectList.module.scss
+++ b/src/components/styles/ProjectList.module.scss
@@ -12,13 +12,11 @@
width: auto;
//1644 * 766
max-width: 102.75rem;
- max-height: 47.875rem;
- margin-bottom: 5rem;
+ margin-bottom: 4rem;
// overflow-y: scroll;
}
.MoreBtn {
cursor: pointer;
- margin-top: 3.75rem;
width: 13rem;
height: 2.5rem;
/* UI Properties */
@@ -29,6 +27,14 @@
color: #fff;
border: none;
}
+.MoreBtn a {
+ background: $secondColor;
+ color: #fff;
+}
+.MoreBtn a:hover {
+ background-color: #fff;
+ color: $primayrColor;
+}
.MoreBtn:hover {
background-color: #fff;
color: $primayrColor;
diff --git a/src/pages/index.md b/src/pages/index.md
index 15512e7..e36483a 100644
--- a/src/pages/index.md
+++ b/src/pages/index.md
@@ -7,11 +7,6 @@ bannerContents: >-
PostgreSQL</h1>
- <div class="bannerDesc">
-
- </div>
-
-
<a class="bannerLink bnLk1" href="#">Learn More</a>
<a class="bannerLink bnLk2" href="#">Ask Forum</a>
diff --git a/src/templates/index-page.js b/src/templates/index-page.js
index 6b36160..02d5aa7 100644
--- a/src/templates/index-page.js
+++ b/src/templates/index-page.js
@@ -47,7 +47,7 @@ export const IndexPageTemplate = ({
/>
</div>
- <section style={{backgroundPosition: 'center', backgroundSize: 'contain', backgroundRepeat: 'no-repeat'}}>
+ <section style={{backgroundPosition: 'center', backgroundSize: 'contain', backgroundRepeat: 'no-repeat'}} className={styles.topSection}>
<div className={styles.topContent}>
<div className={styles.card}>
<div className={styles.cardLeft}>
@@ -77,22 +77,22 @@ export const IndexPageTemplate = ({
<div className={styles.keyFeaturesImgContainer}>
<div>
<img src={keyFeaturesImg01}></img>
- <div>Graph Database Plugin For Postgre SQL</div>
+ <div>Graph Database Plugin<br></br> For Postgre SQL</div>
<div>Allow The Access To Query And Visualize Graph Data From A Postgresql Compatible Relational Database.</div>
</div>
<div>
<img src={keyFeaturesImg02}></img>
- <div>Hybrid Queries (Opencypher And SQL)</div>
+ <div>Hybrid Queries<br></br> (Opencypher And SQL)</div>
<div>Hybrid Query Technology Simultaneously Performs The Queries For Relational Data And Graph Data</div>
</div>
<div>
<img src={keyFeaturesImg03}></img>
- <div>Fast Graph Query Processing</div>
+ <div>Fast Graph Query <br></br>Processing</div>
<div>Achieve Both Fast Indexing And Efficient Query Processing.</div>
</div>
<div>
<img src={keyFeaturesImg04}></img>
- <div>Graph Visualization And Analytics</div>
+ <div>Graph Visualization <br></br> And Analytics</div>
<div>Provides The Visualization Of Graph And Relational Data For Easier, Enhanced Understanding And Analyzing Of Data</div>
</div>
</div>
@@ -104,8 +104,11 @@ export const IndexPageTemplate = ({
<h2>AGE Projects</h2>
<p>
Everyone is welcome to join and contribute to Apache AGE Project,
- not only with code contributions. <br /> You can learn more about
- Apache AGE by working with other developers.
+ not only with code contributions. <br />
+ You can learn more about
+ Apache AGE by working with other developers. <br />
+ You can find out more information on how to join the projects by the following
+ <a>Guideline.</a>
</p>
<ProjectList />
</div>
diff --git a/src/templates/styles/index.module.scss b/src/templates/styles/index.module.scss
index f1d7740..c231a3f 100644
--- a/src/templates/styles/index.module.scss
+++ b/src/templates/styles/index.module.scss
@@ -8,17 +8,21 @@
display: flex;
flex-direction: column;
justify-content: center;
+ .topSection{
+ padding-bottom: 0px !important;
+ }
section {
width: 100%;
padding: 3.75rem 1rem !important;
+
.topContent{
display: flex;
align-content: center;
justify-content: center;
align-items: center;
- position: relative;
+
+
flex-direction: column;
- top: -7rem;
padding: 0 10%;
.card {
display: flex;
@@ -35,6 +39,8 @@
flex-wrap: wrap;
text-align: left;
padding: 2rem;
+ position: relative;
+ top: -8rem;
.cardContent {
padding: 3rem 3rem 2rem 0;
@@ -66,11 +72,13 @@
}
.keyFeatures {
width: 100%;
+ position: relative;
+ top: -6rem;
h2 {
font: $h1;
color: #fff;
text-align: center;
- margin: 5rem 0;
+ margin: 1rem 0 3rem 0;
}
.keyFeaturesImgContainer {
display: grid;
@@ -87,16 +95,16 @@
div {
text-align: center;
img {
- width: 13.5rem;
- height: 13.5rem;
- padding: 10%;
+ width: 16.5rem;
+ height: 16.5rem;
+ padding: 5%;
}
div {
- padding: 5% 0;
+ padding: 0 0 10% 0;
}
div:nth-child(n+1):nth-child(-n+2) {
width: 100%;
- font: normal normal bold 20px/28px Mark Pro;
+ font: normal normal bold 22px/28px Mark Pro;
letter-spacing: 0.6px;
color: #eee;
}
@@ -126,10 +134,15 @@
font-size: 1.25rem;
color: #fff;
margin-bottom: 3.75rem;
+ > a {
+ color: white;
+ text-decoration: underline;
+ }
}
+
// youtube
.Youtube {
- max-width: 80rem;
+ max-width: 73.75rem;
margin: 0 auto;
}
// Subscribe mail image
@@ -223,7 +236,7 @@
min-height: 27.5rem;
height: 100%;
width: 100%;
- padding: 1rem 1rem 5rem;
+ padding: 1rem 1rem 15rem;
.bannerContent {
max-width: $landingConWidth;
margin: 0 auto;
@@ -252,7 +265,7 @@
justify-content: center;
align-items: center;
float: left;
- margin: 0 0.625rem;
+ margin: 2rem 0.625rem;
padding: 0.5rem;
text-align: center;
vertical-align: middle;
diff --git a/src/templates/styles/overview.module.scss b/src/templates/styles/overview.module.scss
index 93ce404..88e482a 100644
--- a/src/templates/styles/overview.module.scss
+++ b/src/templates/styles/overview.module.scss
@@ -94,8 +94,8 @@
div {
text-align: center;
img {
- width: 13.5rem;
- height: 13.5rem;
+ width: 16.5rem;
+ height: 16.5rem;
padding: 10%;
}
div {