Skip to content

Commit beaf0bf

Browse files
ardatanardatan
committed
More changes
1 parent 1119742 commit beaf0bf

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+1494
-167
lines changed

‎README.md

+14
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
# Source Repository for graphql.org
2+
This repository contains the source code of https://graphql.org website.
3+
14
# Contributing
25

36
Organization gh-pages deploy the `master` branch, so active development occurs
@@ -16,6 +19,17 @@ Then, run the server via
1619
Open [http://localhost:8000](http://localhost:8000) to view it in the browser.
1720
Anytime you make some changes, refresh the page to see the updates.
1821

22+
### Folder structure
23+
24+
- `static` folder contains the files that will be copied directly to `public` folder which will contain the output files to be served by a static HTTP server.
25+
26+
- `src` folder contains markdown and TypeScript/JavaScript files used to generate the website;
27+
- - `assets` folder contains `less` files and those files contain stylesheets
28+
- - `components` and `Containers` folders contains React components that are used in layouts and pages
29+
- - `content` folder contains markdown files for the content of pages
30+
- - `templates` contains the layout templates
31+
- - `utils` contains helper functions
32+
1933
### Publish the Website
2034

2135
Once pushed to the `source` branch, CI will publish http://graphql.org

‎gatsby-config.js

+58-8
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ module.exports = {
77
},
88

99
plugins: [
10+
"gatsby-plugin-react-helmet",
1011
{
1112
resolve: "gatsby-source-filesystem",
1213
options: {
@@ -15,14 +16,6 @@ module.exports = {
1516
include: ["**/*.md"], // ignore files starting with a dot
1617
},
1718
},
18-
{
19-
resolve: "gatsby-source-filesystem",
20-
options: {
21-
name: "pagecontent",
22-
path: `${__dirname}/src/pagecontent`,
23-
include: ["**/*.md"], // ignore files starting with a dot
24-
},
25-
},
2619
`gatsby-transformer-remark`,
2720
{
2821
resolve: `gatsby-plugin-webfonts`,
@@ -53,5 +46,62 @@ module.exports = {
5346
trackingId: "UA-44373548-16",
5447
},
5548
},
49+
{
50+
resolve: "gatsby-plugin-feed",
51+
options: {
52+
query: `
53+
{
54+
site {
55+
siteMetadata {
56+
siteUrl
57+
}
58+
}
59+
}
60+
`,
61+
feeds: [
62+
{
63+
serialize: ({ query: { site, allMarkdownRemark } }) =>
64+
allMarkdownRemark.edges.map(
65+
({
66+
node: {
67+
excerpt,
68+
frontmatter: { title, date, permalink, byline },
69+
},
70+
}) => ({
71+
title,
72+
date,
73+
url: site.siteMetadata.siteUrl + permalink,
74+
description: excerpt,
75+
author: byline,
76+
})
77+
),
78+
query: `
79+
{
80+
allMarkdownRemark(
81+
filter: {frontmatter: {layout: {eq: "blog"}}},
82+
sort: { order: DESC, fields: [frontmatter___date] }
83+
) {
84+
edges {
85+
node {
86+
excerpt
87+
frontmatter {
88+
title
89+
date
90+
permalink
91+
byline
92+
}
93+
}
94+
}
95+
}
96+
}
97+
`,
98+
output: "/blog/rss.xml",
99+
title: "Blog | GraphQL",
100+
feed_url: "http://graphql.org/blog/rss.xml",
101+
site_url: "http://graphql.org",
102+
},
103+
],
104+
},
105+
},
56106
],
57107
}

‎gatsby-node.js

+42-20
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ exports.createPages = async ({ graphql, actions }) => {
3434
category
3535
sublinks
3636
sidebarTitle
37+
date
3738
}
3839
id
3940
}
@@ -89,29 +90,43 @@ exports.createPages = async ({ graphql, actions }) => {
8990
await Promise.all(Object.entries(pagesGroupedByFolder).map(async ([folder, pages]) => {
9091
let pagesByUrl = {}
9192
let previousPagesMap = {}
92-
93-
await Promise.all(pages.map(async (page) => {
94-
const {
95-
frontmatter: { permalink, next },
96-
} = page
97-
if (next) {
98-
previousPagesMap[next] = permalink
93+
let pagesByDate = pages.sort((a, b) => {
94+
const aDate = new Date(a.frontmatter.date || Date.now())
95+
const bDate = new Date(b.frontmatter.date || Date.now())
96+
if (aDate > bDate) {
97+
return -1;
98+
} else if (aDate < bDate) {
99+
return 1;
99100
}
100-
pagesByUrl[permalink] = page
101-
}))
101+
return 0;
102+
});
103+
104+
await Promise.all(
105+
pagesByDate.map(async page => {
106+
const {
107+
frontmatter: { permalink, next },
108+
} = page
109+
if (next) {
110+
previousPagesMap[next] = permalink
111+
}
112+
pagesByUrl[permalink] = page
113+
})
114+
)
102115

103116
let firstPage = null
104117

105-
await Promise.all(pages.map(async (page) => {
106-
const {
107-
frontmatter: { permalink },
108-
} = page
118+
await Promise.all(
119+
pagesByDate.map(async page => {
120+
const {
121+
frontmatter: { permalink },
122+
} = page
109123

110-
if (!previousPagesMap[permalink]) {
111-
firstPage = page
112-
return
113-
}
114-
}))
124+
if (!previousPagesMap[permalink] && !firstPage) {
125+
firstPage = page
126+
return
127+
}
128+
})
129+
)
115130

116131
if (!firstPage) {
117132
throw new Error(`First page not found in ${folder}`)
@@ -124,8 +139,10 @@ exports.createPages = async ({ graphql, actions }) => {
124139
let i = 0
125140
while (page && i++ < 1000) {
126141
const {
127-
frontmatter: { category, next },
142+
frontmatter,
128143
} = page
144+
const { definedCategory, next: nextPage } = frontmatter;
145+
let category = definedCategory || folder;
129146
if (!currentCategory || category !== currentCategory.name) {
130147
currentCategory && categories.push(currentCategory)
131148
currentCategory = {
@@ -134,14 +151,19 @@ exports.createPages = async ({ graphql, actions }) => {
134151
}
135152
}
136153
currentCategory.links.push(page)
137-
page = pagesByUrl[next]
154+
if (nextPage) {
155+
page = pagesByUrl[nextPage]
156+
} else {
157+
page = pagesByDate[pagesByDate.indexOf(page) + 1];
158+
}
138159
}
139160

140161
categories.push(currentCategory)
141162

142163
sideBardata[folder] = categories
143164
}))
144165

166+
145167
await Promise.all(allPages.map(async page => {
146168
createPage({
147169
path: `${page.permalink}`,

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"codemirror": "5.58.1",
1717
"codemirror-graphql": "0.12.3",
1818
"gatsby": "2.24.78",
19+
"gatsby-plugin-feed": "2.5.18",
1920
"gatsby-plugin-google-analytics": "2.3.18",
2021
"gatsby-plugin-less": "4.0.6",
2122
"gatsby-plugin-react-helmet": "3.3.14",

‎src/components/BlogLayout/index.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from "react"
2+
import BlogSidebar from "../BlogSidebar"
3+
import BlogPost from "../BlogPost"
4+
5+
interface Props {
6+
title: string
7+
date: string
8+
permalink: string
9+
byline: string
10+
guestBio: string
11+
rawMarkdownBody: string
12+
sideBarData: any
13+
}
14+
15+
const index = ({
16+
title,
17+
date,
18+
permalink,
19+
byline,
20+
guestBio,
21+
rawMarkdownBody,
22+
sideBarData,
23+
}: Props) => {
24+
return (
25+
<section>
26+
<div className="documentationContent">
27+
<BlogPost
28+
title={title}
29+
date={date}
30+
permalink={permalink}
31+
byline={byline}
32+
guestBio={guestBio}
33+
rawMarkdownBody={rawMarkdownBody}
34+
isPermalink={true}
35+
/>
36+
<BlogSidebar posts={sideBarData[0].links.sort(((a: any, b: any) => {
37+
const aDate = new Date(a.frontmatter.date);
38+
const bDate = new Date(b.frontmatter.date)
39+
if (aDate > bDate) {
40+
return -1;
41+
} else if (aDate < bDate) {
42+
return 1;
43+
}
44+
return 0;
45+
}))} currentPermalink={permalink} />
46+
</div>
47+
</section>
48+
)
49+
}
50+
51+
export default index
52+

‎src/components/BlogPost/index.tsx

+28-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,36 @@
11
import React from "react"
2+
import Marked from "../Marked"
23

34
interface Props {
4-
html: string
55
title: string
6+
date: string
7+
permalink: string
8+
byline: string
9+
guestBio: string
10+
rawMarkdownBody: string
11+
isPermalink: boolean
612
}
713

8-
const BlogPost = ({ html }: any) => {
9-
return (
10-
<div className="inner-content">
11-
<div dangerouslySetInnerHTML={{ __html: html }} />
12-
</div>
13-
)
14-
}
14+
const BlogPost = ({
15+
title,
16+
date,
17+
permalink,
18+
byline,
19+
guestBio,
20+
rawMarkdownBody,
21+
isPermalink,
22+
}: Props) => (
23+
<div className="inner-content">
24+
<h1>{isPermalink ? title : <a href={permalink}>{title}</a>}</h1>
25+
<p>
26+
{new Date(date).toLocaleDateString()} by {byline}
27+
</p>
28+
{guestBio ? null : <hr />}
29+
{guestBio && (
30+
<p className="guestBio">{`This guest article contributed by ${byline}, ${guestBio}.`}</p>
31+
)}
32+
<Marked>{rawMarkdownBody}</Marked>
33+
</div>
34+
)
1535

1636
export default BlogPost

‎src/components/BlogSidebar/index.tsx

+30-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,34 @@
11
import React from 'react';
2+
import { Link } from "gatsby"
23

3-
const BlogSidebar = () => {
4-
return (
5-
<div>
6-
SideBar
7-
</div>
8-
);
9-
};
4+
interface Props {
5+
posts: any[]
6+
currentPermalink?: string
7+
}
8+
9+
const BlogSidebar = ({ posts, currentPermalink }: Props) => (
10+
<div className="nav-docs">
11+
<div className="nav-docs-section">
12+
<h3>Subscribe</h3>
13+
<a rel="home" type="application/rss+xml" href="/blog/rss.xml">
14+
RSS
15+
</a>
16+
</div>
17+
<div className="nav-docs-section">
18+
<h3>Recent Posts</h3>
19+
<ul>
20+
{posts.map(({ frontmatter }, i) => (
21+
<li key={i}>
22+
{frontmatter.permalink === currentPermalink ? (
23+
frontmatter.title
24+
) : (
25+
<Link to={frontmatter.permalink}>{frontmatter.title}</Link>
26+
)}
27+
</li>
28+
))}
29+
</ul>
30+
</div>
31+
</div>
32+
)
1033

1134
export default BlogSidebar;

‎src/components/CodeLayout/index.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Marked from "../Marked";
2+
3+
export default ({ title, rawMarkdownBody }: any) => (
4+
<section>
5+
<div className="documentationContent">
6+
<div className="inner-content">
7+
<h1>{title}</h1>
8+
<Marked>{rawMarkdownBody}</Marked>
9+
</div>
10+
</div>
11+
</section>
12+
)

‎src/components/DocsLayout/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ interface Props {
1111
rawMarkdownBody: string
1212
}
1313

14-
const index = ({ title, nextDoc, sideBarData,rawMarkdownBody }: Props) => {
14+
const index = ({ title, nextDoc, sideBarData, rawMarkdownBody }: Props) => {
1515
return (
1616
<section>
1717
<div className="documentationContent">
1818
<div className="inner-content">
1919
<h1>{title}</h1>
2020
<Marked>{rawMarkdownBody}</Marked>
21-
{nextDoc && (
21+
{nextDoc?.frontmatter?.permalink && (
2222
<Link className="read-next" to={nextDoc.frontmatter.permalink}>
2323
<span className="read-next-continue">
2424
Continue Reading &rarr;

0 commit comments

Comments
 (0)