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 462a8fb9 Add FAQ page and Update landing page (#266)
462a8fb9 is described below
commit 462a8fb90b100f8ba5d50f35eaf2fde91f647b2d
Author: dpdjvhxm <[email protected]>
AuthorDate: Wed Mar 20 09:48:53 2024 +0900
Add FAQ page and Update landing page (#266)
* Update Footer
Update Download version and file link
Update Landing Page (News & Events)
* Update landing page and add FAQ page
* Fix double MenuToggle button issue and css
Fixing bugs with two menu buttons on the responsive screen Fixing the
phenomenon that the scrollbar obscures the menu buttons
---------
Co-authored-by: Hanbyeol Shin / David Shin / 신한별
<[email protected]>
---
src/components/FAQ.js | 116 +++++++++++++++++++++++++++
src/components/Layout.js | 1 +
src/components/Navbar.js | 26 +++----
src/components/styles/FAQ.scss | 59 ++++++++++++++
src/components/styles/Navbar.module.scss | 1 +
src/pages/faq/faq.md | 12 +++
src/pages/faq/index.js | 129 +++++++++++++++++++++++++++++++
src/templates/index-page.js | 28 +++----
8 files changed, 343 insertions(+), 29 deletions(-)
diff --git a/src/components/FAQ.js b/src/components/FAQ.js
new file mode 100644
index 00000000..f88aef15
--- /dev/null
+++ b/src/components/FAQ.js
@@ -0,0 +1,116 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Link, graphql, StaticQuery } from 'gatsby'
+import PreviewCompatibleImage from './PreviewCompatibleImage'
+
+class FAQTemplate extends React.Component {
+ render() {
+ const { data } = this.props
+ const { edges: posts } = data.allMarkdownRemark
+
+ return (
+ <div className="columns is-multiline">
+ {posts &&
+ posts.map(({ node: post }) => (
+ <div className="is-parent column is-6" key={post.id}>
+ <article
+ className={`faq-list-item tile is-child box notification ${
+ post.frontmatter.featuredpost ? 'is-featured' : ''
+ }`}
+ >
+ <header>
+ {post.frontmatter.featuredimage ? (
+ <div className="featured-thumbnail">
+ <PreviewCompatibleImage
+ imageInfo={{
+ image: post.frontmatter.featuredimage,
+ alt: `featured image thumbnail for post
${post.frontmatter.title}`,
+ width:
+ post.frontmatter.featuredimage.childImageSharp
+ .gatsbyImageData.width,
+ height:
+ post.frontmatter.featuredimage.childImageSharp
+ .gatsbyImageData.height,
+ }}
+ />
+ </div>
+ ) : null}
+ <p className="post-meta">
+ <Link
+ className="title has-text-primary is-size-4"
+ to={post.fields.slug}
+ >
+ {post.frontmatter.title}
+ </Link>
+ <span> • </span>
+ <span className="subtitle is-size-5 is-block">
+ {post.frontmatter.date}
+ </span>
+ </p>
+ </header>
+ <p>
+ {post.excerpt}
+ <br />
+ <br />
+ <Link className="button" to={post.fields.slug}>
+ FAQ입니다
+ </Link>
+ </p>
+ </article>
+ </div>
+ ))}
+ </div>
+ )
+ }
+}
+
+FAQRoll.propTypes = {
+ data: PropTypes.shape({
+ allMarkdownRemark: PropTypes.shape({
+ edges: PropTypes.array,
+ }),
+ }),
+}
+
+
+export default function FAQRoll() {
+ return (
+ <StaticQuery
+ query={graphql`
+ query FAQQuery {
+ allMarkdownRemark(
+ sort: { order: DESC, fields: [frontmatter___date] }
+ filter: { frontmatter: { templateKey: { eq: "faq" } } }
+ ) {
+ edges {
+ node {
+ excerpt(pruneLength: 400)
+ id
+ fields {
+ slug
+ }
+ frontmatter {
+ title
+ templateKey
+ date(formatString: "MMMM DD, YYYY")
+ featuredpost
+ featuredimage {
+ childImageSharp {
+ gatsbyImageData(
+ width: 120
+ quality: 100
+ layout: CONSTRAINED
+ )
+
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ `}
+ render={(data, count) => <FAQTemplate data={data} count={count} />}
+ />
+ );
+}
diff --git a/src/components/Layout.js b/src/components/Layout.js
index 67584811..be0afe1f 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -43,6 +43,7 @@ const TemplateWrapper = ({ children }) => {
'/overview' : 'Overview | Apache AGE',
'/team' : 'Team | Apache AGE',
'/release-notes' : 'Release Notes | Apache AGE',
+ '/faq' : 'FAQ | Apache AGE',
'/joinus' : 'Community | Apache AGE',
'/contribution/how' : 'Contribution | Apache AGE',
'/contribution/guide' : 'Code Convention | Apache AGE',
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 82251ab9..11522487 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -40,6 +40,11 @@ const Navbar = () => {
Release Notes
</Link>
</Menu.Item>
+ <Menu.Item>
+ <Link className="navbar-item" to="/faq">
+ F A Q
+ </Link>
+ </Menu.Item>
</Menu.SubMenu>
<Menu.SubMenu title="Community">
<Menu.Item>
@@ -184,6 +189,11 @@ const Navbar = () => {
Release Notes
</Link>
</Menu.Item>
+ <Menu.Item>
+ <Link className="navbar-item" to="/faq">
+ F A Q
+ </Link>
+ </Menu.Item>
</Menu.SubMenu>
<Menu.SubMenu title="Community">
<Menu.Item>
@@ -325,22 +335,6 @@ const Navbar = () => {
Apache AGE GitHub
</a>
</div>
- <div className={styles.MenuToggle}>
- <button
- className={`${styles.Toggle} ${menuToggle === 'toggled' ?
styles.Toggled : ''
- }`}
- onClick={() => {
- const state = menuToggle === 'toggled' ? 'untogle' : 'toggled';
- setMenuToggle(state);
- }}
- >
- {menuToggle === 'toggled' ? (
- <MenuUnfoldOutlined />
- ) : (
- <MenuOutlined />
- )}
- </button>
- </div>
</div>
</nav>
);
diff --git a/src/components/styles/FAQ.scss b/src/components/styles/FAQ.scss
new file mode 100644
index 00000000..53ab3e9b
--- /dev/null
+++ b/src/components/styles/FAQ.scss
@@ -0,0 +1,59 @@
+@import '../../common/variable.scss';
+
+.accordion-header {
+ cursor: pointer;
+ font-weight: bold;
+ padding: 10px;
+ margin: 5px 0;
+ background-color: #c5c5c5;
+ border: none;
+ text-align: left;
+ outline: none;
+ font-size: 15px;
+ transition: background-color 0.2s ease;
+ margin-bottom: 0px; // 원하는 간격으로 조절하세요.
+}
+
+.accordion-header:hover {
+ background-color: #cecece;
+}
+
+.accordion-content {
+ padding: 0 15px;
+ margin: 5px 0;
+ padding-top: 0 20px;
+ padding-right: 0 30px;
+ padding-bottom: 0 20px;
+ padding-left: 0 30px;
+ background-color: rgb(255, 213, 213);
+ overflow: hidden;
+ transition: max-height 0.2s ease-out;
+ margin-bottom: 20px; // 원하는 간격으로 조절하세요.
+}
+
+/* 상태에 따라 클래스를 토글하여 애니메이션을 적용할 수 있습니다. */
+.accordion-content.open {
+ max-height: 2500px; /* 답변의 내용에 따라 적절하게 조절하세요. */
+}
+
+.accordion-content.closed {
+ max-height: 0;
+}
+
+.content {
+ padding-left: 15%; // 왼쪽에 공백을 추가합니다.
+ padding-right: 15%; // 오른쪽에 공백을 추가합니다.
+
+ @media (max-width: 768px) {
+ padding-left: 5%;
+ padding-right: 5%;
+ }
+}
+
+.faq-item {
+ margin-bottom: 20px; // 마지막 아이템을 제외한 각 항목 하단에 간격을 추가합니다.
+}
+
+.faq-item:last-child {
+ margin-bottom: 40px; // 마지막 항목의 마진을 제거합니다.
+}
\ No newline at end of file
diff --git a/src/components/styles/Navbar.module.scss
b/src/components/styles/Navbar.module.scss
index 21f27e23..3ac9fabe 100644
--- a/src/components/styles/Navbar.module.scss
+++ b/src/components/styles/Navbar.module.scss
@@ -61,6 +61,7 @@
.MenuToggle {
align-items: center;
height: 100%;
+ margin-right: 1.25rem;
.Toggle {
background-color: #ffffff00;
border: none;
diff --git a/src/pages/faq/faq.md b/src/pages/faq/faq.md
new file mode 100644
index 00000000..35960be1
--- /dev/null
+++ b/src/pages/faq/faq.md
@@ -0,0 +1,12 @@
+---
+templateKey: docs-template
+path: /Apache AGE/faq
+title: FAQ
+---
+
+<div class="설명">
+
+# How to Contribute
+There are multiple ways you can contribute to the Apache AGE and Apache AGE
Viewer projects. If you are interested in the project and looking for ways to
help, consult the list of projects in the Apache AGE and AGE Viewer GitHubs, or
ask on the Apache AGE dev mailing list.
+
+</div>
\ No newline at end of file
diff --git a/src/pages/faq/index.js b/src/pages/faq/index.js
new file mode 100644
index 00000000..710a19ad
--- /dev/null
+++ b/src/pages/faq/index.js
@@ -0,0 +1,129 @@
+import * as React from 'react';
+import Layout from "../../components/Layout";
+
+import "../../components/styles/FAQ.scss"; // SCSS 파일 임포트
+
+// FAQ 컴포넌트 수정
+class FAQ extends React.Component {
+ state = {
+ openItemId: null,
+ };
+
+ toggleItem = (id) => {
+ this.setState((prevState) => ({
+ openItemId: prevState.openItemId === id ? null : id
+ }));
+ };
+
+ render() {
+
+ const faqData = [
+ { id: 1, question: 'What is the graph database, and how is it different
from the relational database?'
+ , answer: 'A graph database is a specialized type of database designed
for storing, managing, and querying highly interconnected data more efficiently
than traditional databases. Unlike relational databases that store data in
tables with rows and columns, graph databases use graph structures comprising
nodes (entities), edges (relationships), and properties (attributes) to
represent and store data. The main differences between graph databases and
relational databases include: Data [...]
+
+ { id: 2, question: 'What is the best way for someone to get started with
Apache AGE? Are there any recommended resources or tutorials which you could
recommend for a comprehensive introduction?'
+ , answer: 'The best way to start with Apache AGE is by exploring the
official documentation on the Apache AGE website. For a comprehensive
introduction, visit the Apache AGE documentation and the GitHub repository for
in-depth guides, examples, and community resources.' },
+
+ { id: 3, question: 'How does the integration of Apache AGE with
PostgreSQL benefit developers and organizations?'
+ , answer: 'The integration of Apache AGE with PostgreSQL offers
developers and organizations the ability to manage both graph and relational
data within a single, powerful database system, facilitating complex data
analyses and relationships with the efficiency and reliability of PostgreSQL.'
},
+
+ { id: 4, question: 'Is Apache AGE compatible with all PostgreSQL
versions?'
+ , answer: 'Apache AGE is compatible with PostgreSQL versions up to 16.
Please check https://github.com/apache/age/releases.' },
+
+ { id: 5, question: 'What is the reason for people to use Apache AGE when
there are other graph databases?'
+ , answer: 'People use Apache AGE for its seamless integration with
PostgreSQL, allowing them to leverage graph database capabilities alongside
relational data within a familiar SQL environment, without the need to adopt a
separate graph database system.' },
+
+ { id: 6, question: 'What query language does Apache AGE use for graph
operations?'
+ , answer: 'openCypher' },
+
+ { id: 7, question: 'Do I need to pay to use Apache AGE?'
+ , answer: 'Apache AGE is an open source project and free to use. But
there are some vendors providing commercial support such as AGEDB in Canada.' },
+
+ { id: 8, question: 'How can I install Apache AGE?'
+ , answer: 'Source codes and binaries are available at
https://github.com/apache/age/releases.https://hub.docker.com/r/apache/age.Please
refer to https://age.apache.org/age-manual/master/intro/overview.html' },
+
+ { id: 9, question: 'How does Apache AGE stand out compared to other
similar tools?'
+ , answer: 'Apache AGE stands out by integrating graph database
capabilities directly into PostgreSQL, allowing users to manage graph and
relational data within the same database system. This unique approach offers
the robustness, scalability, and familiarity of PostgreSQL while enabling
complex graph queries and analyses without the need for separate graph database
solutions.' },
+
+ { id: 10, question: 'Could you provide instances of industries wherein
Apache AGE could be utilized?'
+ , answer: 'Apache AGE is beneficial in industries like social
networking, for analyzing relationships; finance, for fraud detection and
customer insights; healthcare, for patient data and relationships;
telecommunications, for network infrastructure management; and logistics, for
route optimization and supply chain analysis.' },
+
+ { id: 11, question: 'How often is Apache AGE updated, and how can I stay
informed about new releases?'
+ , answer: 'Apache AGE updates vary based on development progress and
community contributions. To stay informed about new releases, follow the Apache
AGE project on GitHub, subscribe to their mailing list, or join their community
forums.' },
+
+ { id: 12, question: 'Is there a community or support forum for Apache
AGE?'
+ , answer: 'GitHub dicussion and Issues, mailing lists:
[email protected], [email protected]' },
+
+ { id: 13, question: 'How can I contribute to the development of Apache
AGE?'
+ , answer: 'Please refer to https://age.apache.org/contribution/how' },
+
+ // 여기에 추가 질문과 답변을 넣을 수 있습니다.
+ ];
+ const { openItemId } = this.state;
+
+
+ return (
+ <div>
+ {faqData.map(({ id, question, answer }) => (
+ <div key={id} className="faq-item">
+ <div
+ className={`accordion-header ${openItemId === id ? 'active' :
''}`}
+ onClick={() => this.toggleItem(id)}
+ >
+ {question}
+ </div>
+ <div
+ className={`accordion-content ${openItemId === id ? 'open' :
'closed'}`}
+ >
+ {answer}
+ </div>
+ </div>
+ ))}
+ </div>
+ );
+ }
+ }
+
+
+// FAQIndexPage 컴포넌트 수정
+export default class FAQIndexPage extends React.Component {
+ render() {
+ return (
+ <Layout>
+ <div
+ className="full-width-image-container margin-top-0"
+ style={{
+ backgroundImage: `url('')`,
+ }}
+ >
+ <h1
+ className="has-text-weight-bold is-size-1"
+ style={{
+ boxShadow: "0.5rem 0 0 #f40, -0.5rem 0 0 #f40",
+ backgroundColor: "rgb(184, 20, 90)",
+ color: "white",
+ padding: "1rem",
+ textAlign: "center"
+ }}
+ >
+ Frequently Asked Questions
+ </h1>
+ </div>
+ <section className="section">
+ <div className="container">
+ <div className="content">
+ <br></br>
+ <h2>Thank you for visiting our FAQ page. If you can't find the
question you're looking for, please leave your comments or questions in the
+ <strong><a href="https://github.com/apache/age/issues";
target="_blank"> issues</a></strong> or
+ <strong><a href="https://github.com/apache/age/discussions";
target="_blank"> discussions</a></strong> section on the
+ <strong><a href="https://github.com/apache/age";
target="_blank"> Apache AGE GitHub page</a></strong>. We look forward to
hearing from you.
+ </h2><hr></hr>
+ <br></br>
+ <FAQ />
+ </div>
+ </div>
+ </section>
+ </Layout>
+ );
+ }
+}
diff --git a/src/templates/index-page.js b/src/templates/index-page.js
index 10fbcd9b..c666375e 100644
--- a/src/templates/index-page.js
+++ b/src/templates/index-page.js
@@ -104,8 +104,7 @@ export const IndexPageTemplate = ({
<div><br></br></div>
<div><br></br></div>
<div><br></br></div>
- <div><br></br></div>
- <div><br></br></div>
+
{/* 메인화면: 유튜브 영상
<section className={styles.videos}>
@@ -123,8 +122,21 @@ export const IndexPageTemplate = ({
</div>
</section>
*/ }
-
+
<section>
+ <div className={styles.card1}>
+ <div className={styles.content}>
+ <h2><b>This week's 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>
+ </section>
+
+ <div><br></br></div>
+ <div><br></br></div>
+ <div><br></br></div>
+ <div><br></br></div>
+
<div className={styles.card}>
<div className={styles.content}>
@@ -167,22 +179,12 @@ export const IndexPageTemplate = ({
</div>
</div>
- </section>
<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>
