Update New web (#315)

* Test

* Update gatsby-config.js

* Changes search result text

* Fix gatsby-config.js and title

* Change meta description

* Fix sitemap.xml for broken links

* Update landing page: Key Update and image

* Create Blog “2024-04-21-how-to-integrate-langchain-with-apache-age-for-graph-database-applications”

* Update Blog “2024-04-21-how-to-integrate-langchain-with-apache-age-for-graph-database-applications”

* Update Blog “2024-04-21-how-to-integrate-langchain-with-apache-age-for-graph-database-applications”

* Update blog, cms

* Update blog

* Fix spelling error

* Activate "blog"

* Update download page, modified blog

* modified footer, download

* Update landing image and blog scss

* modified:   src/components/styles/Blog-post.scss

* modified:   src/pages/download/index.md

* modified:   src/templates/blog-post.js

* Create Blog “2024-04-23-beyond-chatgpt-how-to-maximize-the-use-of-chatgpt-with-interactive-graph-models”

* Create Blog “2024-04-23-combating-cyber-attack-with-apache-ages-link-analysis”

* Create Blog “2024-04-23-from-data-to-connections-leveraging-hyperconnectivity-in-e-commerce-data-part-1”

* Create Blog “2024-04-23-learn-machine-learning-with-graph-in-hyperconnected-data-part-2”

* Create Blog “2024-04-23-graph-database-in-postgresql-apache-age”

* Create Blog “2024-04-23-comparison-of-apache-age-postgraphile-and-hasura”

* modified:   static/admin/config.yml

* modified:   src/components/styles/Blog-post.scss
modified:   src/components/styles/BlogRollTemplate.module.scss
modified:   src/templates/blog-post.js

* Update Blog “blog_240401”

* Match file name format

* deleted:    src/pages/blog/blog_240401.md

* Change button color

* modified:   static/sitemap.xml

* modified blog

src/components/styles/Blog-post.scss

@@ -4,7 +4,7 @@
   // 기본 스타일 설정
   padding: 0.5em 1em; // 패딩
   border: none; // 테두리 없음
-  background-color: #4CAF50; // 배경색
+  background-color: #B8145A; // 배경색
   color: white; // 텍스트 색상
   text-align: center; // 텍스트 중앙 정렬
   text-decoration: none; // 텍스트 밑줄 없음
@@ -15,7 +15,7 @@
 
   // 마우스 오버 시 스타일 변경
   &:hover {
-    background-color: #45a049; // 호버 상태의 배경색
+    background-color: #B8145A; // 호버 상태의 배경색
   }
 
   // 포커스 시 스타일 변경
@@ -26,10 +26,10 @@
 
   // 활성화(클릭) 상태 스타일
   &:active {
-    background-color: #3e8e41; // 클릭 상태의 배경색
+    background-color: #B8145A; // 클릭 상태의 배경색
   }
 }
 
 .section {
-  padding: 5% 10%; // 상하 패딩은 0, 좌우 패딩은 10%
+  padding: 1% 10%; // 상하 패딩은 0, 좌우 패딩은 10%
 }

src/components/styles/BlogRollTemplate.module.scss

@@ -17,3 +17,38 @@
     }
 }
 
+.articles {
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #ccc; // 구분선 색상과 두께 조정
+
+    &:last-child {
+      border-bottom: none; // 마지막 요소에는 구분선 없음
+    }
+  }
+
+
+.post-meta {
+    position: absolute; // 이미지를 절대 위치로 설정합니다.
+    left: 50%;         // 부모 컨테이너의 가운데로 설정합니다.
+    top: 50%;          // 부모 컨테이너의 가운데로 설정합니다.
+    transform: translate(-50%, -50%); // 정확히 중앙에 오도록 조정합니다.
+    z-index: 10;       // 다른 요소들 위에 오도록 z-index 값을 설정합니다.
+
+    // 필요한 경우 width와 height도 고정할 수 있습니다.
+    width: 100px;      // 고정된 너비를 원할 경우
+    height: 100px;     // 고정된 높이를 원할 경우
+}
+
+.featured-thumbnail {
+    position: absolute; // 이미지를 절대 위치로 설정합니다.
+    left: 50%;         // 부모 컨테이너의 가운데로 설정합니다.
+    top: 50%;          // 부모 컨테이너의 가운데로 설정합니다.
+    transform: translate(-50%, -50%); // 정확히 중앙에 오도록 조정합니다.
+    z-index: 10;       // 다른 요소들 위에 오도록 z-index 값을 설정합니다.
+
+    // 필요한 경우 width와 height도 고정할 수 있습니다.
+    width: 100px;      // 고정된 너비를 원할 경우
+    height: 100px;     // 고정된 높이를 원할 경우
+}
+

src/pages/blog/blog_240401.md → src/pages/blog/2024-04-01-easy-and-smooth-start-to-graph-databases.md

@@ -4,7 +4,7 @@ title: Easy and Smooth Start to Graph Databases
 date: 2024-04-01T17:00:00Z
 description:
 featuredpost: true
-featuredimage: '/img/blogimg01.png'
+featuredimage: 
 tags: 
   - Apache AGE
   - Graph Database

src/pages/blog/2024-04-23-beyond-chatgpt-how-to-maximize-the-use-of-chatgpt-with-interactive-graph-models.md

@@ -6,7 +6,8 @@ date: 2024-04-23T01:18:22.687Z
 description: "Beyond ChatGPT: How to Maximize the Use of ChatGPT with
   Interactive Graph Models."
 featuredpost: true
-featuredimage: /img/logo.png
+featuredimage: 
+
 ---
 <!--StartFragment-->
 

src/pages/blog/2024-04-23-combating-cyber-attack-with-apache-ages-link-analysis.md

@@ -6,7 +6,8 @@ description: |-
   Combating cyber attack with Apache AGE's link
   analysis.
 featuredpost: true
-featuredimage: /img/logo.png
+featuredimage: 
+
 ---
 <!--StartFragment-->
 

src/pages/blog/2024-04-23-comparison-of-apache-age-postgraphile-and-hasura.md

@@ -0,0 +1,48 @@
+---
+templateKey: blog-post
+title: Comparison of Apache AGE, PostGraphile, and Hasura
+date: 2024-04-23T02:17:02.242Z
+description: Comparison of Apache AGE, PostGraphile, and Hasura
+featuredpost: true
+featuredimage: 
+---
+<!--StartFragment-->
+
+### **◾ Apache AGE: Graph Database for PostgreSQL**
+
+Apache AGE extends PostgreSQL, transforming it into a graph database. This enables handling complex data relationships and graph structures, supplemented by the power of Cypher queries for graph-specific operations.
+
+
+
+- - -
+
+
+
+### **◾ PostGraphile: GraphQL API from PostgreSQL Schema**
+
+PostGraphile is a tool for building a GraphQL API on top of an existing PostgreSQL schema.\
+It's designed for efficiency in web development, allowing real-time data access and manipulation through GraphQL interface.
+
+
+
+- - -
+
+
+
+### **◾ Hasura: Real-Time GraphQL Engine for PostgreSQL**
+
+Hasura is a GraphQL server engine that dynamically generates real-time GraphQL APIs from a PostgreSQL database.\
+It emphasizes performance and developer productivity, with an easy setup process and tools for managing access and queries.
+
+
+
+- - -
+
+
+
+### **◾ Conclusion**
+
+Apache AGE is ideal for sophisticated graph data tasks within PostgreSQL.\
+PostGraphile and Hasura excel in quick GraphQL API deployment for example for web and mobile, complementing AGE's rich graph features.
+
+<!--EndFragment-->

src/pages/blog/2024-04-23-from-data-to-connections-leveraging-hyperconnectivity-in-e-commerce-data-part-1.md

@@ -0,0 +1,62 @@
+---
+templateKey: blog-post
+title: "From Data to Connections: Leveraging Hyperconnectivity in E-commerce
+  Data (Part 1.)"
+date: 2024-04-23T02:11:47.653Z
+description: "From Data to Connections: Leveraging Hyperconnectivity in E-commerce Data (Part 1.)"
+featuredpost: true
+featuredimage: 
+---
+
+
+<!--StartFragment-->
+
+Hyper-connectivity implies that everything is connected — people, data, and things — depending on the development of the internet, communication technologies, and more. When individuals generate data from various sources, such as technology or environmental sensors, the resultant connection networks are referred to as the hyper-connected society. With this heightened level of connectivity, there is significant potential to drive innovation and transformation in all aspects of society. In other words, hyper-connectivity is a term that describes the logical and interrelated connection of data throughout all services and devices.
+
+E-commerce is an example of where the data transform into connections among people (customers & sellers), data, and things (products.) It implements the commercial process of buying and selling over the Internet, moreover, oversees the production and consumption process. In this article, we'll build the concept of Hyper-connectivity by taking E-commerce sample data and let you see the data in action!
+
+##### Data Modeling with Relational Database
+
+Below is a table around a hypothetical customer's purchases at shopping mall A modeled in Relational Database, including products, stores, payment information, and the embedding relationships between stores.
+
+![img](../../img/b-028.webp)
+
+Figure 1. RDB Modeling with Payment Sample Data Table
+
+To achieve hyper-connectivity among datasets, it is crucial to understand the relationships between them. This is where the 'JOIN' method comes into play for analyzing tables. An entity-relationship diagram (ERD) visualizes real-world data and facilitates the connections between tables of varying natures. The relational database not only enables to comprehend the flow of data between tables, but also uncovers the relationships among tables.
+
+##### Data Modeling with Graph Database
+
+A graph database is a NoSQL database that stores and manages relationships in the form of visualization using 'nodes' and 'edges'. These databases enable hyperconnectivity by searching the relationships between data.
+
+![img](../../img/b-029.webp)
+
+##### Querying Graph Relationship
+
+A graph database provides a more efficient way to query data connected in a hyperconnected system. For example, Apache AGE provides a hybrid of table and graph data operations, allowing you to write intuitive queries such as Cypher (a graph query) along with SQL. Let's see how to extract and retrieve it using both Cypher and SQL.
+
+##### Querying the Single Relationships
+
+First, we can ask simple questions to find out what products customers buy and what services they use.
+
+![img](../../img/b-030.webp)
+
+Figure 3. Relationship Querying for Graph Relationships in Apache AGE
+
+The above query is a graph query (Cypher) that traverses the graph to extract the relationship in the “match (a: customer)-\[r]-(b: product)” clause and what product the customer buys. The graph query extracts the graph relationships and utilizes the hybrid query, “select\~” and “from\~” clauses available in Apache AGE to make the graph output easier to manipulate for users unfamiliar with graph databases.
+
+##### Querying the Complex Relationships
+
+You can also use Apache AGE to query for complex queries. In addition to the customer who bought the example product above, you can query complex relationships such as which product they bought, what product category, which bank they used, and more.
+
+![img](../../img/b-031.webp)
+
+Figure 4. Sophisticated Relationship Querying for Graph Relationships in Apache AGE
+
+In the MATCH clause, you can search the path you want to extract. In the {"(a: customer)-\[r1]-(b: bank {name: 'AGE bank'})"} clause, you can query what bank they used; in the (a)-\[r3]-(d: card) clause, what card they used, and in the (a)-\[r4]-(e: product)-\[r5]-(f:category_3) clause, what products they bought and what product category they belong to. These allow us to explore complex relationships and extract which customers have the same card, bank, and more.
+
+As seen above, graph database queries exhibit hyperconnectivity implementation much more efficiently. Notably, Apache AGE stands out as a database with its hybrid query capability, enabling many including non-experts in graph queries and derive results using SQL. Being a PostgreSQL extension, Apache AGE offers the flexibility to leverage extensions tailored to specific situations and domains, enhancing its practicality and adaptability.
+
+Are you interested in learning more about Apache AGE? [Learn More Now](http://agedb.io/From-Data-to-Connections-Leveraging-Hyperconnectivity-in-E-commerce-Data.jsp#).
+
+<!--EndFragment-->

src/pages/blog/2024-04-23-graph-database-in-postgresql-apache-age.md

@@ -0,0 +1,21 @@
+---
+templateKey: blog-post
+title: "Graph Database in PostgreSQL: Apache AGE"
+date: 2024-04-23T02:15:59.564Z
+description: "Graph Database in PostgreSQL: Apache AGE"
+featuredpost: true
+featuredimage: /img/logo.png
+---
+<!--StartFragment-->
+
+Graph database have gained popularity in recent years due to their ability to handle complex relationships between data. Unlike traditional relational database, which store data in tables, graph database represent data as nodes, edges, and properties. Nodes represent entities, edges represent the relationships between those entities, and properties represent the attributes of both.
+
+PostgreSQL, a popular relational database, can also function as a graph database through the use of an extension called Apache AGE. With Apache AGE, users can leverage the flexibility and scalability of graph database while still utilizing PostgreSQL's advanced SQL querying capabilities and transaction support.
+
+To use Apache AGE, users must first install it as an extension and then model their data as nodes and edges. Apache AGE comes with its own set of SQL extensions, similar to Cypher, that allows users to query their graph database. However, users can also still use SQL to query their graph database if desired.
+
+For those new to graph database, Apache AGE comes with a tutorial to help them get started. Additionally, you may use the #apache-age tag for questions on Stack Overflow, join the project's Discord channel, or open an issue on GitHub, the Apache AGE community is readily available to provide support and answer questions.
+
+Overall, graph database offer a new way of thinking about how to store and query complex relationships between data. With Apache AGE, users can easily transform their PostgreSQL database into a graph database and take advantage of the benefits that come with this type of database.
+
+<!--EndFragment-->

src/pages/blog/2024-04-23-learn-machine-learning-with-graph-in-hyperconnected-data-part-2.md

@@ -0,0 +1,71 @@
+---
+templateKey: blog-post
+title: Learn Machine Learning with Graph in Hyperconnected Data (Part 2.)
+date: 2024-04-23T02:13:19.760Z
+description: Learn Machine Learning with Graph in Hyperconnected Data (Part 2.)
+featuredpost: true
+featuredimage: 
+---
+<!--StartFragment-->
+
+Following our previous article on Hyperconnected data, this article will delve deeper into the applications of graph-based machine learning specifically in the realm of e-commerce data. We will explore the practical implementation of unsupervised learning-based 'Graph Clustering' and supervised learning-based 'Graph node/Link Prediction' techniques, highlighting their significance in storing and harnessing results within a graph database. By understanding these powerful approaches, we can uncover valuable insights and optimize decision-making processes in the dynamic world of e-commerce.
+
+[Read part 1 Now - From Data to Connections: Leveraging Hyperconnectivity in E-commerce Data.](</blog/From-Data-to-Connections-Leveraging-Hyperconnectivity-in-E-commerce-Data-(Part 1.) /index.html>)
+
+Graph Projection and Clustering Analysis
+
+![img](../../img/b-032.webp)
+
+Figure 1. Graph DB Modeling with Payment Sample Data Table
+
+Once we understand the intricate product-purchase relationships within our e-commerce data, the next step is to cluster customers based on their shared properties. To accomplish this, we employ the 'Graph Projection' technique, which constructs a unified network by projecting a graph along specific relationships. By utilizing this approach, we can effectively visualize and analyze distinct customer clusters, uncovering valuable insights that can drive personalized marketing strategies and enhance overall customer experience.
+
+![img](../../img/b-033.webp)
+
+Figure 2. Graph Database Modeling with Payment Sample Data Table
+
+The relationship between Customer A and Customer B, connected through the purchase relationships of the same product, creates a view that facilitates a seamless connection between preceding relationships. This view acts as an edge, linking the edges of the graph projection.
+
+##### Querying the Single Relationships
+
+First, we can ask simple questions to find out what products customers buy and what services they use.
+
+Essentially, we can construct a network comprising customers who have purchased the same product. From this network, we can employ a graph clustering algorithm to group customers based on structural similarities within the graph. The graph clustering algorithm analyzes the graph's structural features independently, allowing for the identification of distinctive characteristics within each cluster. Below is an example of a single network configuration and its characteristics when using the clustering algorithm, visualized as a graph.
+
+![img](../../img/b-034.webp)
+
+Figure 3. Creating Homogeneous Network and Graph Cluster in Apache AGE
+
+##### Querying Features of Clusters
+
+Focusing on products emerges a single network, revealing distinctive characteristics specific to each cluster. This network offers valuable insights and provides personalized recommendations to assist customers in finding what they truly need. Moreover, the configuration of this network unveils new meta-information beyond traditional categorization. Uncovering patterns of products purchased together suggests previously unseen characteristics of products, allowing for a deeper understanding of customer preferences and facilitating more targeted recommendations.
+
+![img](../../img/b-035.webp)
+
+Figure 4. Exploration of Cluster Graph Merging with Meta Info in Apache AGE
+
+##### Node/Link Prediction
+
+The results above demonstrate the meaningfulness of item purchases within the identified clusters. For instance, in Cluster 2, the purchase of cleaning supplies is appropriately grouped with the keyword 'Moving and Cleaning', enabling targeted product recommendations to customers in this cluster. Similarly, in Cluster 4, the purchases of furniture supplies are accurately associated with the keyword 'Interior,' allowing for precise suggestions to enhance customers interior design needs. These cluster-specific associations highlight the power of leveraging customer behavior data to provide relevant and contextually appropriate recommendations, ultimately improving the overall customer experience.
+
+Beyond the established product categories, grouping, giving meta-information, and managing products relevant to the current era are also of the AGE's capability. These can be achieved utilizing Node/Link Prediction techniques, which enable the prediction and establishment of connections for items that have not yet been categorized or linked. By leveraging this approach, we can offer tailored recommendations that suggest customers with customer's genuine needs.
+
+Node prediction operates at the individual node level within the graph, allowing for accurate predictions regarding the characteristics of a given node. This prediction is analyzed based on the relationships with irregular neighbouring nodes.
+
+Link Prediction is a technique to predict the likelihood of a connection between two individual nodes without existing connections. By successfully establishing these previously unexplored relationships, the utility of information within the network significantly enhances.
+
+In addition to traditional recommendation systems that rely on similarity-based approaches, Link prediction, when combined with Node prediction, facilitates recommendations based on similarities and discovers valuable information about the characteristics of newly defined nodes. This expanded data discovery opens up new avenues for exploration and analysis, ultimately boosting confidence in the generated results.
+
+![img](../../img/b-036.webp)
+
+Figure 5. Example of Node Prediction (Source: CS224W Chapter 6 Message passing and Node Classification)
+
+![img](../../img/b-037.webp)
+
+Figure 6. Example of Link Prediction in Apache AGE (Source: Missing Link Prediction using Common Neighbour and Centrality based Parameterized Algorithm)
+
+This article explored the concept of graph hyper-connection, the connection of table data from a relational database to a graph structure. By harnessing the power of hyperconnectivity between relational and graph databases, data can be managed flexibly, leading to the creation of new value through not only simple queries but also advanced analytics.
+
+To efficiently model and manage different types of data, an enterprise DBMS like AGEDB is an ideal solution. It enables the identification and management of relationships between data in tables, facilitating the extension of knowledge associations and enabling comprehensive analysis through graph-based approaches.
+
+<!--EndFragment-->

src/templates/blog-post.js

@@ -7,6 +7,9 @@ import Layout from "../components/Layout";
 import Content, { HTMLContent } from "../components/Content";
 import style from "../components/styles/Blog-post.scss"
 
+// 블로그 글 게시하는 곳에 대한 내용
+
+
 // eslint-disable-next-line
 export const BlogPostTemplate = ({
   content,

static/admin/config.yml

@@ -199,6 +199,6 @@ collections:
       - { label: "Publish Date", name: "date", widget: "datetime" }
       - { label: "Description", name: "description", widget: "text" }
       - { label: "Featured Post", name: "featuredpost", widget: "boolean" }
-      - { label: "Featured Image", name: "featuredimage", widget: image }
+      - { label: "Featured Image", name: "featuredimage", widget: image, required: "false" }
       - { label: "Body", name: "body", widget: "markdown" }
       - { label: "Tags", name: "tags", widget: "list" }