Skip to content

Commit 1b384f5

Browse files
syrusakbarysyrusakbary
committed
Added support for custom doc themes
1 parent 43997ed commit 1b384f5

18 files changed

+996
-68
lines changed

‎gatsby-config.js

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ module.exports = {
22
siteMetadata: {
33
title: `Graphene-Python.org`
44
},
5+
pathPrefix: `/__PATH_PREFIX__/`,
56
plugins: [
67
`gatsby-plugin-react-helmet`,
78
`gatsby-plugin-styled-jsx`,

‎netlify.toml

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
[[headers]]
2+
for = "/*.woff2"
3+
[headers.values]
4+
Access-Control-Allow-Origin = "*"

‎package.json

+9-6
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
"version": "1.0.0",
55
"author": "Kyle Mathews <[email protected]>",
66
"dependencies": {
7-
"@jacobmischka/gatsby-plugin-react-svg": "git+https://github.com/jacobmischka/gatsby-plugin-react-svg.git",
7+
"@jacobmischka/gatsby-plugin-react-svg":
8+
"git+https://github.com/jacobmischka/gatsby-plugin-react-svg.git",
89
"gatsby": "^1.9.73",
910
"gatsby-link": "^1.6.22",
1011
"gatsby-plugin-react-helmet": "^1.0.8",
@@ -17,15 +18,17 @@
1718
"rucksack-css": "^1.0.2",
1819
"styled-jsx-plugin-postcss": "0.1.0"
1920
},
20-
"keywords": [
21-
"gatsby"
22-
],
21+
"keywords": ["gatsby"],
2322
"license": "MIT",
2423
"main": "n/a",
2524
"scripts": {
26-
"build": "gatsby build",
25+
"clean": "rm -rf ./public",
26+
"create-sphinx-theme": "./scripts/create_package",
27+
"build":
28+
"yarn clean && gatsby build --prefix-paths && ./scripts/replace && yarn create-sphinx-theme",
2729
"develop": "gatsby develop",
28-
"format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'",
30+
"format":
31+
"prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'",
2932
"test": "echo \"Error: no test specified\" && exit 1"
3033
},
3134
"devDependencies": {

‎scripts/create_package

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
cp public/docs/index.html sphinx_theme/sphinx_graphene_theme/layout.html
2+
cd sphinx_theme
3+
zip -r sphinx_graphene_theme.zip .
4+
cp sphinx_graphene_theme.zip ../public
5+
6+
# Ping read the docs to rebuild the graphene-python website
7+
curl -X POST -d "token=cb70e0ca4aaf808df8d07deb3d9619c2e128212b" https://readthedocs.org/api/v2/webhook/graphene-python/29558/
8+
9+
# Ping read the docs to rebuild the graphene-django website
10+
curl -X POST -d "token=e9cf13643c471cfb8cdebf8b0bd121bbb40b5f97" https://readthedocs.org/api/v2/webhook/graphene-django/29559/
11+
12+
# Ping read the docs to rebuild the graphene-sqlalchemy website
13+
curl -X POST -d "token=6f1fb097f31454e13e63d8ab62512b3da51be147" https://readthedocs.org/api/v2/webhook/graphene-sqlalchemy/29561/
14+
15+
# Ping read the docs to rebuild the graphene-gae website
16+
curl -X POST -d "token=d35f550310f2f068156b1abc702f6ab91dc88e71" https://readthedocs.org/api/v2/webhook/graphene-gae/29562/

‎scripts/replace

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# We replace the docs ones
2+
find public/docs \( -name \*.js -o -name \*.css -o -name \*.html \) -type f -exec sed -i 's/\/__PATH_PREFIX__/http:\/\/graphene-python.org/g' {} \;
3+
4+
# We remove the script tags
5+
# find public/docs \( -name \*.html \) -type f -exec sed -i -e ':a' -e 'N' -e '$!ba' -e 's/\n/ˇ/g' -e 's~<script.*</script>~~g' -e 's/ˇ//g' {} \;
6+
7+
8+
# We replace the rest
9+
find public \( -name \*.js -o -name \*.css -o -name \*.html \) -type f -exec sed -i 's/\/__PATH_PREFIX__//g' {} \;

‎sphinx_theme/setup.cfg

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
[build_sphinx]
2+
source-dir = sphinx_graphene_theme
3+
build-dir = build
4+
5+
[upload_sphinx]
6+
upload-dir = build/html

‎sphinx_theme/setup.py

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# -*- coding: utf-8 -*-
2+
"""`sphinx_graphene_theme` lives on `Github`_.
3+
.. _github: https://github.com/graphql-python/graphene-python.org
4+
"""
5+
from setuptools import setup
6+
from sphinx_graphene_theme import __version__
7+
8+
9+
setup(
10+
name='sphinx_graphene_theme',
11+
version=__version__,
12+
license='MIT',
13+
author='Syrus Akbary',
14+
author_email='[email protected]',
15+
description='Graphene-Python.org theme for Sphinx.',
16+
zip_safe=False,
17+
packages=['sphinx_graphene_theme'],
18+
package_data={'sphinx_graphene_theme': [
19+
'theme.conf',
20+
'*.html',
21+
]},
22+
include_package_data=True,
23+
classifiers=[
24+
'Development Status :: 3 - Alpha',
25+
'License :: OSI Approved :: BSD License',
26+
'Environment :: Console',
27+
'Environment :: Web Environment',
28+
'Intended Audience :: Developers',
29+
'Programming Language :: Python :: 2.7',
30+
'Programming Language :: Python :: 3',
31+
'Operating System :: OS Independent',
32+
'Topic :: Documentation',
33+
'Topic :: Software Development :: Documentation',
34+
],
35+
)

‎sphinx_theme/sphinx_graphene_theme/__init__.py

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
"""Sphinx Graphene theme.
2+
From https://github.com/graphql-python/graphene-python.org.
3+
"""
4+
import os
5+
import time
6+
7+
__version__ = '0.1.{}'.format(str(time.mktime(time.gmtime())))
8+
__version_full__ = __version__
9+
10+
11+
def get_html_theme_path():
12+
"""Return list of HTML theme paths."""
13+
cur_dir = os.path.abspath(os.path.dirname(os.path.dirname(__file__)))
14+
return cur_dir

‎sphinx_theme/sphinx_graphene_theme/theme.conf

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
[theme]
2+
inherit = basic
3+
stylesheet = app.css
4+
5+
[options]
6+
typekit_id = hiw1hhg
7+
analytics_id =
8+
sticky_navigation = False
9+
logo_only =
10+
collapse_navigation = False
11+
display_version = True
12+
navigation_depth = 4

‎src/layouts/graphene-logo-white.svg

+18
Loading

‎src/layouts/index.css

+50
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,24 @@ body {
5050
.container-fluid:after {
5151
clear: both;
5252
}
53+
.callout {
54+
background: #000000;
55+
color: #ffffff;
56+
display: inline-block;
57+
font-family: "klavika-web", Helvetica, sans-serif;
58+
font-size: 18px;
59+
font-weight: 400;
60+
line-height: 1;
61+
margin: 0;
62+
padding: 5px;
63+
letter-spacing: 0.05em;
64+
text-transform: uppercase;
65+
}
66+
.callout.inverse {
67+
color: #000000;
68+
background: #ffffff;
69+
}
70+
5371
.half {
5472
box-sizing: border-box;
5573
position: relative;
@@ -137,6 +155,38 @@ h6 {
137155
background: #df4a2e;
138156
border: 1px solid #eb1919;
139157
}
158+
.flat-button.primary {
159+
border: 1px solid #e14b2e;
160+
color: #e14b2e;
161+
}
162+
163+
.flat-button {
164+
border: 1px solid #7b8a8e;
165+
color: #7b8a8e;
166+
display: inline-block;
167+
font-family: "klavika-web", Helvetica, sans-serif;
168+
font-size: 15px;
169+
font-weight: 600;
170+
letter-spacing: 1px;
171+
margin-bottom: 4px;
172+
padding: 10px 30px;
173+
text-transform: uppercase;
174+
text-decoration: none;
175+
}
176+
.flat-button:hover {
177+
border: 1px solid #333;
178+
color: #333;
179+
}
180+
.flat-button.primary:hover {
181+
color: #df4a2e;
182+
border: 1px solid #df4a2e;
183+
}
184+
ul,
185+
ol {
186+
margin: 0;
187+
padding: 0;
188+
list-style: none;
189+
}
140190

141191
a {
142192
color: #337ab7;

‎src/layouts/index.js

+47-25
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ import Helmet from "react-helmet";
55
import GrapheneLogo from "./graphene-logo.svg";
66
import Arrow from "./arrow.svg";
77
import LogoOnWhite from "./logo-on-white.svg";
8+
import GrapheneLogoWhite from "./graphene-logo-white.svg";
89

910
import "./index.css";
1011

11-
const Header = () => (
12+
const Header = ({ docs }) => (
1213
<div>
1314
<header className="graphene-header">
1415
<div className="container">
15-
<Link to="/">
16+
<Link to="http://graphene-python.org/">
1617
<GrapheneLogo className="graphene-logo" />
1718
</Link>
1819
<a className="tagline" href="//graphene.tools/">
@@ -21,16 +22,20 @@ const Header = () => (
2122
</a>
2223
</div>
2324
</header>
24-
<header className="container navbar-header">
25-
<Link to="/">
26-
<LogoOnWhite />
27-
</Link>
28-
<nav>
29-
<a href="//docs.graphene-python.org/">Documentation</a>
30-
<a href="/blog">Blog</a>
31-
<a href="https://github.com/graphql-python/graphene">Github</a>
32-
</nav>
25+
<header
26+
className={`navbar-header ${docs ? "navbar-header-contrast" : ""}`}
27+
>
28+
<div className="container">
29+
<a href="http://graphene-python.org/" className="logo-link">
30+
{docs ? <GrapheneLogoWhite /> : <LogoOnWhite />}
31+
</a>
32+
<nav>
33+
<a href="http://docs.graphene-python.org/">Documentation</a>
34+
<a href="https://github.com/graphql-python/graphene">Github</a>
35+
</nav>
36+
</div>
3337
</header>
38+
3439
<style jsx>{`
3540
.graphene-header {
3641
background: #000000;
@@ -72,11 +77,18 @@ const Header = () => (
7277
position: relative;
7378
top: 2px;
7479
}
80+
.navbar-header-contrast {
81+
background-image: linear-gradient(-180deg, #f67049 0%, #e14b2e 100%);
82+
}
83+
7584
.navbar-header {
7685
height: 94px;
77-
align-items: center;
86+
}
87+
.navbar-header :global(.container) {
7888
display: flex;
89+
align-items: center;
7990
}
91+
8092
.navbar-header nav {
8193
height: 100%;
8294
display: block;
@@ -99,24 +111,34 @@ const Header = () => (
99111
.navbar-header nav a:hover {
100112
color: black;
101113
}
114+
.navbar-header-contrast nav a {
115+
color: white;
116+
}
117+
.navbar-header-contrast nav a:hover {
118+
color: #eee;
119+
}
120+
102121
@import url("https://fonts.googleapis.com/css?family=Fira+Mono|Open+Sans:400,600");
103122
`}</style>
104123
</div>
105124
);
106125

107-
const TemplateWrapper = ({ children }) => (
108-
<div>
109-
<Helmet
110-
title="Graphene-Python"
111-
meta={[
112-
{ name: "description", content: "Graphene framework for Python" },
113-
{ name: "keywords", content: "graphene, graphql, python, framework" }
114-
]}
115-
/>
116-
<Header />
117-
<div>{children()}</div>
118-
</div>
119-
);
126+
const TemplateWrapper = ({ children, ...otherProps }) => {
127+
const docs = otherProps.location.pathname.indexOf("/docs") > -1;
128+
return (
129+
<div>
130+
<Helmet
131+
title="Graphene-Python"
132+
meta={[
133+
{ name: "description", content: "Graphene framework for Python" },
134+
{ name: "keywords", content: "graphene, graphql, python, framework" }
135+
]}
136+
/>
137+
<Header docs={docs} />
138+
<div>{children()}</div>
139+
</div>
140+
);
141+
};
120142

121143
TemplateWrapper.propTypes = {
122144
children: PropTypes.func

0 commit comments

Comments
 (0)