This is an automated email from the ASF dual-hosted git repository.
ako 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 30b19d44 Update landing page (#264)
30b19d44 is described below
commit 30b19d449b12007d8b42eaeb403d66745472ba48
Author: dpdjvhxm <[email protected]>
AuthorDate: Mon Mar 18 17:50:39 2024 +0900
Update landing page (#264)
* Update index.md
* Update index.md
* Update gatsby-config.js
* Update package.json
* Add files via upload
* Add files via upload
* Add files via upload
* Update Navbar.js
* Update Footer
Update Download version and file link
Update Landing Page (News & Events)
* Update Landing page: Comparison
* Add files via upload
* Add files via upload
* Add files via upload
* Add files via upload
* Add files via upload
* Add files via upload
* Add files via upload
* Add files via upload
---
src/components/Navbar.js | 6 +-
src/templates/index-page.js | 76 +++++-------
src/templates/styles/index.module.scss | 153 ++++++++++++++++++++++++
static/img/blog1.html | 206 +++++++++++++++++++++++++++++++++
static/img/blogimg01.png | Bin 0 -> 236648 bytes
static/img/image1.png | Bin 0 -> 82812 bytes
static/img/image2.png | Bin 0 -> 446413 bytes
static/img/image3.png | Bin 0 -> 218333 bytes
static/img/image4.png | Bin 0 -> 505500 bytes
static/img/image5.png | Bin 0 -> 7497 bytes
static/img/image6.png | Bin 0 -> 110552 bytes
static/img/image7.png | Bin 0 -> 26284 bytes
12 files changed, 396 insertions(+), 45 deletions(-)
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 7557ffc7..82251ab9 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -87,11 +87,12 @@ const Navbar = () => {
Code Convention
</Link>
</Menu.Item>
+ {/* 더 이상 운영 안함
<Menu.Item>
<Link className="navbar-item" to="/contribution/volunteers">
Volunteer Guideline
</Link>
- </Menu.Item>
+ </Menu.Item>*/}
<Menu.Item>
<Link className="navbar-item" to="/contribution/requirements">
Committer Requirements
@@ -131,11 +132,14 @@ const Navbar = () => {
</Menu.Item>
</Menu.SubMenu>
+ {/* 블로그 페이지:임시 제외
<Menu.Item key="Blog">
<a className="navbar-item" href="https://apache-age.medium.com/";
target="_blank" rel="noopener noreferrer">
Blog
</a>
</Menu.Item>
+ */}
+
{/* 상단 메뉴 변경: Apache AGE GitHub
diff --git a/src/templates/index-page.js b/src/templates/index-page.js
index 4ced72cc..10fbcd9b 100644
--- a/src/templates/index-page.js
+++ b/src/templates/index-page.js
@@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react'; // React와 필요한 훅을 한 번에
import
import PropTypes from 'prop-types';
import { graphql } from 'gatsby';
+
// component
import Layout from '../components/Layout';
import Content, { HTMLContent } from '../components/Content';
@@ -15,6 +16,8 @@ import bg05 from '../../static/img/IMG-BG05.jpg';
import bg06 from '../../static/img/IMG-BG06.jpg';
import ageLogo from '../../static/img/logo.png';
+import blogimg01 from '../../static/img/blogimg01.png';
+
import keyFeaturesImg01 from '../../static/img/keyfeature01.png';
import keyFeaturesImg02 from '../../static/img/keyfeature02.png';
import keyFeaturesImg03 from '../../static/img/keyfeature03.png';
@@ -67,32 +70,32 @@ export const IndexPageTemplate = ({
News & Events
<div className={styles.cardContent}>
<div><b>Apache AGE on Microsoft Azure PostgreSQL</b></div>
- <div>Support the integration of Microsoft Azure PostgreSQL
with Apache AGE by casting your vote!</div>
+
+ <div>Support the integration of Microsoft Azure PostgreSQL
with Apache AGE by casting your vote and feedback!</div>
<div>
- <a
href="https://feedback.azure.com/d365community/idea/4ba45e52-63b9-ee11-92bc-6045bd7aea25";
target="_blank">Read more</a>
+ <a href="https://github.com/apache/age/issues/1524";
target="_blank">Read more</a>
</div>
<br></br>
- <div><b>Easy and Smooth Start to Graph Databases</b></div>
- <div>Get to know the newest tool that makes using Apache AGE
easy as pie</div>
+ <div><b>PostgresPro adapted Apache AGE</b></div>
+ <div>Apache_AGE is a Postgres Pro extension that provides
graph database functionality. The goal of the project is to create single
storage that can handle both relational and graph model data so that users can
use standard ANSI SQL along with openCypher.</div>
<div>
- <a
href="https://dev.to/markgomer/easy-and-smooth-start-to-graph-databases-5epk";
target="_blank">Read more</a>
+ <a
href="https://postgrespro.com/docs/enterprise/15/apache-age";
target="_blank">Read more</a>
+
</div>
<br></br>
<div><b>Apache AGE is now compatible with PostgreSQL
16!</b></div>
<div>Check the changelog for the latest version</div>
<div>
- <a href="https://news.ycombinator.com/item?id=39674765";
target="_blank">Read more</a>
+
+ <a
href="https://github.com/apache/age/releases/tag/PG16%2Fv1.5.0-rc0";
target="_blank">Read more</a>
+
</div>
<br></br>
- <div><b>Apache AGE, PostGraphile, and Hasura</b></div>
- <div>Join the comparison discussion on Reddit</div>
- <div>
- <a
href="https://www.reddit.com/r/PostgreSQL/comments/1bcdo9z/apache_age_postgraphile_and_hasura/";
target="_blank">Read more</a>
- </div>
+
</div>
</div>
</div>
@@ -162,41 +165,26 @@ export const IndexPageTemplate = ({
PostGraphile and Hasura excel in quick GraphQL API deployment
for example for web and mobile, complementing AGE's rich graph
features.<br></br>
</p>
-
</div>
</div>
</section>
- <div className={styles.keyFeatures}>
- <h2>Key Features</h2>
- <div className={styles.keyFeaturesImgContainer}>
- <div>
- <img src={keyFeaturesImg01}></img>
- <div>Graph Database Plugin<br></br> for PostgreSQL</div>
- <div>
- Gain access to query and visualize graph data in a
PostgreSQL compatible relational databases
- </div>
- </div>
- <div>
- <img src={keyFeaturesImg02}></img>
- <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 <br></br>Processing</div>
- <div>Achieve both fast indexing and efficient query
processing.</div>
- </div>
- <div>
- <img src={keyFeaturesImg04}></img>
- <div>Graph Visualization <br></br> and Analytics</div>
- <div>
- Provides visualization of graph and relational data for
clearer understanding of data
- </div>
- </div>
- </div>
+ <div><br></br></div>
+ <div><br></br></div>
+ <div><br></br></div>
+ <div><br></br></div>
+ <div><br></br></div>
+ <div><br></br></div>
+
+ <div className={styles.card1}>
+ <div className={styles.content}>
+ <h2><b>This week article by community</b></h2><hr></hr>
+ <iframe src="./img/blog1.html" style={{ border: 'none' }}
width="100%" height="600" title="Embedded Page"></iframe>
+
</div>
</div>
+ </div>
+
</section>
{/* <section style={{ backgroundPosition: 'center', backgroundSize:
'contain', backgroundRepeat: 'no-repeat' }} hidden > */}
{/* <div className={styles.content}>
@@ -228,9 +216,10 @@ export const IndexPageTemplate = ({
</section>
*/}
<section hidden></section>
+
<section>
- <div className={styles.content}>
- <div className={styles.Subscribe}>
+ <div className={styles.content1}>
+ <div className={styles.Subscribe1}>
<img src={landingMailImg} alt="mail-image"></img>
</div>
<h2>Subscribe Mailing List</h2>
@@ -238,7 +227,7 @@ export const IndexPageTemplate = ({
Get help using Apache AGE or contribute to the project on our
mailing lists!
</p>
- <div className={styles.SubscribeLink}>
+ <div className={styles.SubscribeLink1}>
<div>
<a
target="_blank"
@@ -266,7 +255,6 @@ export const IndexPageTemplate = ({
</a>
<a href="mailto:[email protected]";>Subscribe</a>
</div>
-
</div>
</div>
</section>
diff --git a/src/templates/styles/index.module.scss
b/src/templates/styles/index.module.scss
index 1b90b817..fa28c211 100644
--- a/src/templates/styles/index.module.scss
+++ b/src/templates/styles/index.module.scss
@@ -149,6 +149,7 @@
}
}
+
// youtube
.Youtube {
max-width: 73.75rem;
@@ -169,6 +170,7 @@
display: block;
content: '';
}
+
// invite discord
.inviteDiscord {
display: flex;
@@ -331,3 +333,154 @@
}
}
}
+
+// 랜딩페이지 Blog 섹션
+.card1 {
+ display: flex;
+ align-content: center;
+ justify-content: space-around;
+ align-items: flex-start;
+ position: relative;
+ flex-direction: row;
+ border: 0.0625rem solid white;
+ background-color: white;
+ height: max-content;
+ border-radius: 10px;
+ width: 100%;
+ flex-wrap: wrap;
+ text-align: left;
+ padding: 2rem;
+ position: relative;
+ margin-top: -8rem;
+ box-shadow: 0rem 0.75rem 1.5rem #00000029;
+
+ .cardContent1 {
+ padding: 3rem 3rem 2rem 0;
+ color: black;
+ font: normal normal normal 1.25rem/1.875rem Mark Pro;
+
+ }
+ .cardLeft1 {
+ font: normal normal 500 1.875rem/3.6875rem Mark Pro;
+ color: $primayrColor;
+ text-transform: none;
+ flex: 1 1 40%;
+ padding: 0 0 0 3rem;
+ text-align: center;
+
+ }
+
+ .cardRight1 {
+ font: normal normal 500 1.875rem/3.6875rem Mark Pro;
+ color: $primayrColor;
+ text-transform: none;
+ flex: 1 1 40%;
+ padding: 0 0 0 3rem;
+ text-align: center;
+ }
+}
+
+ .content1 {
+ width: 100%;
+ max-width: $landingConWidth;
+ margin: 0 auto;
+ > h2 {
+ font: $h1;
+ color: $primayrColor;
+ text-align: center;
+ }
+ > h3 {
+ font: $h4;
+ color: $primayrColor;
+ text-align: center;
+ }
+ > p {
+ text-align: center;
+ font-size: 1.25rem;
+ text-align: center;
+ color: $textColor;
+ margin-bottom: 1.75rem;
+ > a {
+ color: white;
+ text-decoration: underline;
+ }
+ }
+ }
+
+ // Subscribe mail image
+ .Subscribe1 {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ img {
+ width: 15.375rem;
+ height: 17.375rem;
+ }
+ }
+
+ .SubscribeLink1 {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-row-gap: 1rem;
+ justify-items: center;
+ margin: 0 auto;
+ width: auto;
+ grid-template-columns: repeat(auto-fill, minmax(33%, auto));
+ padding: 0px 10%;
+ @media screen and (max-width: 48rem) {
+ grid-template-columns: repeat(auto-fill, minmax(100%, auto));
+ }
+ a {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ width: 12.5rem;
+ height: 2.5rem;
+ font: normal normal 500 1.125rem Mark Pro;
+ border: solid 2px #fff;
+ border-radius: 40px;
+ margin-bottom: 1rem;
+ color: $primayrColor;
+ }
+
+
+ a:nth-child(odd) {
+ background-color: white;
+ border: 1px solid $primayrColor;
+ }
+ a:nth-child(odd):hover {
+ background-color: $secondColor;
+ color: white;
+ }
+ a:nth-child(even) {
+ background-color: $primayrColor;
+ border: 1px solid $primayrColor;
+ color: white;
+ }
+ a:nth-child(even):hover {
+ background-color: $secondColor;
+ color: white;
+ }
+ }
+
+/* 버튼에 대한 CSS 스타일 */
+.button {
+ display: inline-block; /* 인라인 블록 요소로 표시하여 다른 요소와 옆으로 나란히 배치되도록 함 */
+ font-size: 16px; /* 버튼의 글꼴 크기 설정 */
+ text-align: center; /* 버튼 내부 텍스트의 정렬 설정 */
+ border: none; /* 테두리 없앰 */
+ width: 12.5rem;
+ height: 2.5rem;
+ border-radius: 40px;
+ cursor: pointer; /* 마우스 커서를 포인터로 변경하여 클릭 가능한 요소임을 나타냄 */
+ background : #b8145a;; /* 버튼의 배경 이미지 설정 */
+ background-size: cover; /* 배경 이미지가 버튼에 꽉 차도록 설정 */
+ color: #ffffff; /* 버튼 텍스트 색상 설정 */
+ line-height: 2.5rem; /* 버튼의 높이와 같은 값으로 설정하여 텍스트를 수직으로 가운데 정렬함 */
+}
+
+/* 마우스를 올렸을 때의 버튼 스타일 */
+.button:hover {
+ opacity: 0.8; /* 마우스를 올렸을 때 버튼의 투명도를 줄여 약간 어둡게 만듦 */
+}
\ No newline at end of file
diff --git a/static/img/blog1.html b/static/img/blog1.html
new file mode 100644
index 00000000..947aa612
--- /dev/null
+++ b/static/img/blog1.html
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <link
+
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css";
+ rel="stylesheet"
+
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+ crossorigin="anonymous"
+ />
+ <title>Document</title>
+ <style>
+ .published {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 20px;
+ }
+ .avatar {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ }
+ .info {
+ display: flex;
+ flex-direction: column;
+ }
+ @media only screen and (max-width: 600px) {
+ .combating-heading {
+ font-size: 25px !important;
+ }
+ }
+
+ /* 스크롤바 및 트랙 스타일 */
+ ::-webkit-scrollbar {
+ width: 12px; /* 스크롤바 너비 */
+ }
+
+ ::-webkit-scrollbar-track {
+ background: #f1f1f1; /* 스크롤바 트랙 배경색 */
+ border-radius: 10px; /* 트랙 모서리 둥글게 */
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: #888; /* 스크롤바 썸(슬라이더) 색상 */
+ border-radius: 10px; /* 썸 모서리 둥글게 */
+ }
+
+ ::-webkit-scrollbar-thumb:hover {
+ background: #555; /* 썸에 마우스 호버 시 색상 */
+ }
+
+ </style>
+ </head>
+ <body>
+ <div class="container mt-5">
+ <div>
+ <div class="text-center">
+ <img src="../../img/image2.png" alt="hero-img" style="border-radius:
25px" width="20%" class="img-fluid" />
+ </div>
+ <h2 class="mt-5 text-center combating-heading" style="color: #150136;
font-size: 36px; font-weight: 800">
+ Easy and Smooth Start to Graph Databases
+ </h2>
+
+ <div class="mx-auto" style="width: 80%">
+ <div class="published mt-5">
+ <div class="info">
+ <span class="org" style="font-weight: 600">ApacheAGE</span>
+ <div>
+ <p>Published in ApacheAge, 3 min read, Jan 24</p>
+ <!-- <span class="pub_in">Published in ApacheAge,</span>
+ <span class="blog_time">3 min read,</span>
+ <span class="blog_month">Jan 24</span> -->
+ </div>
+ </div>
+ </div>
+
+ <div class="detail-section mt-5">
+ <p>
+ Graph databases are like digital maps that show how different
pieces of information are connected. Apache AGE makes these maps using the
+ popular relational database called PostgreSQL, making it
smarter. Graphizer is a tool developed by Bitnine for Apache AGE to make
+ creating and understanding these maps easier for everyone.
+ </p>
+
+ <h5 class="mt-5">The Need for Simplicity in Graph Databases></h5>
+ <p>
+ Starting with graph databases can be tough, like learning a new
language. It's hard to see how information connects and to ask the right
+ questions. Tools like Graphizer are important because they make
this learning journey smoother, letting more people use these smart
+ databases without getting lost.
+ </p>
+
+ <div class="text-center mt-5 mb-4">
+ <img src="../../img/image4.png" alt="img" class="img-fluid" />
+ </div>
+
+ <div style="display: flex; justify-content: center">
+ <p style="text-align: center; width: 80%">Image: Graphizer</p>
+ </div>
+
+ <p class="mt-5">
+ One of the standout features of Graphizer is its ability to
create graph models and data without needing to learn or use openCypher. For
+ many who are used to traditional relational databases, the jump
to graph databases can be scary, primarily due to the need to understand
+ new querying languages like openCypher. Graphizer simplifies
this transition. It offers intuitive tools that allow users to build and
+ explore graph data with visual interfaces, bypassing the
complexity of coding queries. This means you can focus on what your data tells
+ you, not on memorizing syntax and commands, making the move to
graph databases smoother and more approachable for relational database
+ users.
+ </p>
+
+ <p class="mt-5">Take for example the following openCypher
query:</p>
+
+ <p class="mt-5">MATCH
(m:Movie)<-[:Act_in]-(p:Person)-[:Produced]->(m), <br />RETURN p, m</p>
+
+ <p class="mt-5">
+ Which looks for a pattern within the graph database where a
person has acted in one movie and also produced it. With Graphizer you can
+ just enter a “Visual Query” like in the following image, having
the same result as the openCypher query we used. Simply like that, you
+ are in the world of graph databases.
+ </p>
+
+ <div class="text-center mt-5 mb-4">
+ <img src="../../img/image1.png" alt="img" class="img-fluid" />
+ </div>
+
+ <div style="display: flex; justify-content: center">
+ <p style="text-align: center; width: 80%">Image: Visual Query in
Graphizer</p>
+ </div>
+
+ <h5 class="mt-5">Graph Data Viewing Feature</h5>
+
+ <p>
+ Graphizer lets you see the connections between points of
information (nodes) and the lines that connect them (edges) easily. Imagine
+ looking at a family tree; Graphizer helps you see who is related
to whom at a glance, without having to dig through lots of details.
+ </p>
+
+ <div class="text-center mt-5 mb-4">
+ <img src="../../img/image6.png" alt="img" class="img-fluid" />
+ </div>
+
+ <h5 class="mt-5">Data Loading Feature</h5>
+ <p>
+ Graphizer is great at taking lists of information, like those in
table data files (CSV and RDB files), and turning them into a graph.
+ This is like turning a flat picture into a 3D model, showing how
everything is connected in a way that’s easy to understand.
+ </p>
+
+ <div class="text-center mt-5 mb-4">
+ <img src="../../img/image7.png" alt="img" class="img-fluid" />
+ </div>
+
+ <div class="text-center mt-5 mb-4">
+ <img src="../../img/image5.png" alt="img" class="img-fluid" />
+ </div>
+
+ <h5 class="mt-5">Exploring Feature</h5>
+
+ <p>
+ With Graphizer, you can dive into your data like a detective,
using tools to find out how things are related. It's like having a
+ magnifying glass to see the clues in your data, helping you make
sense of it through pictures, patterns and filters.
+ </p>
+
+ <div class="text-center mt-5 mb-4">
+ <img src="../../img/image3.png" alt="img" class="img-fluid" />
+ </div>
+
+ <h5 class="mt-5">Integrating Graphizer with Apache AGE</h5>
+ <p>
+ Graphizer and Apache AGE are packaged together and work along
seamlessly. It's like having a guide while exploring a new city, making it
+ easier to navigate and discover connections within your data.
This teamwork makes starting with graph databases as easy as starting a
+ car.
+ </p>
+
+ <h5 class="mt-5">Practical Applications</h5>
+
+ <p>
+ Graphizer and Apache AGE can be used in cool ways, like figuring
out who knows whom on
+ <span style="color: #ce697d">ocial media, spotting fraudsters,
or recommending what book you should read next</span>. They turn complex
+ info into easy-to-understand maps, making solving problems or
finding opportunities easier.
+ </p>
+
+ <h5 style="text-align: center">* * *</h5>
+
+ <p class="mt-5">
+ Graphizer, along with Apache AGE, is like a pair of glasses that
brings the world of graph databases into clear focus. Whether you're
+ new to this world or have been exploring it for a while, these
tools make the journey easier and more enjoyable.
+ </p>
+
+ <h5 class="mt-5">Call to Action</h5>
+
+ <p class="mt-5">
+ Give Graphizer and Apache AGE a try! They're here to help you
navigate the complex world of graph databases with ease. Whether you're
+ looking for guides, tutorials, or a community to join, there's
plenty of support to get you started on your adventure. Visit Apache
+ AGE’s GitHub page, you can contribute or send your question
through the <span style="color: #ce697d">issues:</span>
+ </p>
+
+ <p class="mt-5">Apache AGE’s website: <a
href="https://age.apache.org/";>https://age.apache.org/</a></p>
+ <p>Apache AGE’s GitHub repository: <a
href="https://github.com/apache/age";>https://github.com/apache/age</a></p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <script
+
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js";
+
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+ crossorigin="anonymous"
+ ></script>
+ </body>
+</html>
diff --git a/static/img/blogimg01.png b/static/img/blogimg01.png
new file mode 100644
index 00000000..7070d4e9
Binary files /dev/null and b/static/img/blogimg01.png differ
diff --git a/static/img/image1.png b/static/img/image1.png
new file mode 100644
index 00000000..8d68ceda
Binary files /dev/null and b/static/img/image1.png differ
diff --git a/static/img/image2.png b/static/img/image2.png
new file mode 100644
index 00000000..de50d1a6
Binary files /dev/null and b/static/img/image2.png differ
diff --git a/static/img/image3.png b/static/img/image3.png
new file mode 100644
index 00000000..c0543b42
Binary files /dev/null and b/static/img/image3.png differ
diff --git a/static/img/image4.png b/static/img/image4.png
new file mode 100644
index 00000000..6f78e864
Binary files /dev/null and b/static/img/image4.png differ
diff --git a/static/img/image5.png b/static/img/image5.png
new file mode 100644
index 00000000..0528f0a9
Binary files /dev/null and b/static/img/image5.png differ
diff --git a/static/img/image6.png b/static/img/image6.png
new file mode 100644
index 00000000..0a92eb31
Binary files /dev/null and b/static/img/image6.png differ
diff --git a/static/img/image7.png b/static/img/image7.png
new file mode 100644
index 00000000..73342ac5
Binary files /dev/null and b/static/img/image7.png differ
