Skip to content

Commit

Permalink
WIP api-docs autogen, stylesheets, and auto-build process
Browse files Browse the repository at this point in the history
  • Loading branch information
sanderson committed Sep 30, 2019
1 parent 0b6db10 commit 9eec3e1
Show file tree
Hide file tree
Showing 9 changed files with 692 additions and 313 deletions.
5 changes: 4 additions & 1 deletion .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@ jobs:
command: ./deploy/ci-install-s3deploy.sh
- run:
name: Install NPM dependencies
command: sudo npm i -g postcss-cli autoprefixer
command: sudo npm i -g postcss-cli autoprefixer redoc-cli
- run:
name: Generate API documentation
command: cd api-docs && sh generate-api-docs.sh
- save_cache:
key: install-v1-{{ checksum ".circleci/config.yml" }}
paths:
Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ public
node_modules
*.log
/resources
/content/**/api.html
40 changes: 40 additions & 0 deletions api-docs/generate-api-docs.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
#!/bin/bash -e

# Get list of versions from directory names
versions="$(ls -d -- */)"

for version in $versions
do
# Trim the trailing slash off the directory name
version="${version%/}"
menu="${version//./_}_ref"

# Generate the frontmatter
frontmatter="---
title: InfluxDB $version API documentation
description: >
The InfluxDB API provides a programmatic interface for interactions with InfluxDB $version.
layout: api
menu:
$menu:
parent: InfluxDB v2 API
name: View full API docs
weight: 102
---
"

# Use Redoc to generate the API html
redoc-cli bundle -t template.hbs \
--title="InfluxDB $version API documentation" \
--options.sortPropsAlphabetically \
--options.menuToggle \
--options.hideHostname \
--templateOptions.version="$version" \
$version/swagger.yml

# Create temp file with frontmatter and Redoc html
echo "$frontmatter" >> $version.tmp
cat redoc-static.html >> $version.tmp
rm -f redoc-static.html
mv $version.tmp ../content/$version/api.html
done
28 changes: 28 additions & 0 deletions api-docs/template.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,16 @@
<meta name="description" content="The InfluxDB API provides a programmatic interface for interactions with InfluxDB {{templateOptions.version}}.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/img/favicon.png" type="image/png" sizes="32x32">

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-45024174-12"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-45024174-12');
</script>
<meta name="google-site-verification" content="_V6CNhaIIgVsTO9max_ECw7DUfPL-ZGE7G03MQgEGMU" />

<style>
body {
padding: 0;
Expand All @@ -15,10 +25,28 @@
</style>
{{#unless disableGoogleFont}}<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:500,500i,700,700i|Roboto:400,400i,700,700i|Rubik:400,400i,500,500i,700,700i" rel="stylesheet">{{/unless}}
{{{redocHead}}}
<link rel="stylesheet" type="text/css" href="/api.css">
</head>

<body>
<div id="loading">
<div class="spinner"></div>
</div>
<div id="influx-header">
<a href="/{{templateOptions.version}}">InfluxDB {{templateOptions.version}} Docs</a>
</div>
{{{redocHTML}}}
<script type="text/javascript">
function removeFadeOut( el, speed ) {
var seconds = speed/1000;
el.style.transition = "opacity "+seconds+"s ease";
el.style.opacity = 0;
setTimeout(function() {
el.parentNode.removeChild(el);
}, speed);
}
removeFadeOut(document.getElementById('loading'), 500);
</script>
</body>

</html>
266 changes: 266 additions & 0 deletions assets/styles/layouts/_api-overrides.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,266 @@
@import "tools/color-palette";
@import "tools/icomoon";

// Fonts
$rubik: 'Rubik', sans-serif;
$roboto: 'Roboto', sans-serif;
$roboto-mono: 'Roboto Mono', monospace;

// Font weights
$medium: 500;
$bold: 700;

//////////////////////////////////// LOADER ////////////////////////////////////

#loading {
position: fixed;
width: 100vw;
height: 100vh;
z-index: 1000;
background-color: $g20-white;
opacity: 1;
transition: opacity .5s;
}

@keyframes spinner {
to {transform: rotate(360deg);}
}

.spinner:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
margin-left: -25px;
border-radius: 50%;
border: 3px solid $g16-pearl;
border-top-color: $cp-comet;
animation: spinner .6s linear infinite;
}

//////////////////////////////// InfluxDB Header ///////////////////////////////

#influx-header {
font-family: $rubik;
padding: 15px 20px ;
display: block;
background-color: $wp-violentdark;
a {
color: $g20-white;
text-decoration: none;
transition: color .2s;
&:hover {
color: $b-pool;
}
&:before {
content: '\e918';
font-family: 'icomoon';
margin-right: .65rem;
}
}
}

////////////////////////////////////////////////////////////////////////////////

.cjtbAK {
h1,h2,h3,h4,h5,h6,
p,li,th,td {
font-family: $rubik !important;
}
}

#redoc {
h1,h2,h3,h4,h5,h6 {
font-weight: $medium !important;
}
}

// Section title padding
.dluJDj {
padding: 20px 0;
}

// Page h1
.dTJWQH {
color: $g7-graphite;
font-size: 2rem;
}

// Download button
.jIdpVJ {
background: $b-dodger;
color: $g20-white;
border: none;
border-radius: 3px;
font-family: $rubik;
font-size: .85rem;
font-weight: $medium;
transition: background-color .2s;
&:hover {
background-color: $b-pool;
}
}

// Tag h1s
.WxWXp {
color: $g7-graphite;
font-size: 1.75rem;
}

// Summaru h2s and table headers
.ioYTqA, .bxcHYI, .hoUoen {
color: $g7-graphite;
}

// h3s
.espozG {
color: $g8-storm;
}

// Links
.bnFPhO a { color: $b-dodger;
&:visited {color: $b-dodger;}
}

.redoc-json {
font-family: $roboto-mono !important;
}

// Inline Code
.flfxUM code,
.gDsWLk code,
.kTVySD {
font-family: $roboto-mono !important;
color: $cp-marguerite;
background: $cp-titan;
border-color: $cp-titan;
}

// Required tags
.jsTAxL {
color: $o-curacao;
}

///////////////////////////// RESPONSE COLOR BLOCKS ////////////////////////////

// Green
.hLVzSF {
background-color: rgba($gr-wasabi, .5);
color: $gr-emerald;
}

// Red
.byLrBg {
background-color: rgba($o-marmelade, .35);
color: $o-curacao;
}



/////////////////////////////////// LEFT NAV ///////////////////////////////////

// Left nav background
.gZdDsM {
background-color: $g19-ghost;
}

.gpbcFk:hover, .sc-eTuwsz.active {
background-color: rgb(237, 237, 237);
}

// List item text
.SmuWE, .gcUzvG, .bbViyS, .sc-hrWEMg label {
font-family: $rubik !important;
}

.fyUykq {
font-weight: $medium;
}

// Request method tags
.cFwMcp {
&.post { background-color: $b-curious; }
&.get { background-color: $gr-canopy; }
&.put { background-color: $cp-comet; }
&.patch { background-color: $ch-keylime; }
&.delete { background-color: $o-curacao; }
}

// Active nav section
.gcUzvG, .iNzLCk:hover {
color: $m-magenta;
}

/////////////////////////////// RIGHT CODE COLUMN //////////////////////////////

// Right column backgrounds
.dtUibw, .fLUKgj {
background-color: $wp-jagger;
h3,h4,h5,h6 {
font-family: $rubik !important;
font-weight: $medium !important;
}
}

// Code backgrounds
.irpqyy > .react-tabs__tab-panel {
background-color: $wp-telopea;
}
.dHLKeu, .fVaxnA {
padding-left: 10px;
background-color: $wp-telopea;
}

// Response code tabs
.irpqyy > ul > li {
background-color: $wp-telopea;
border-radius: 3px;
&.react-tabs__tab--selected{ color: $cp-blueviolet; }
&.tab-error { color: $o-fire; }
&.tab-success { color: $gr-viridian; }
}

// Request methods
.bNYCAJ,
.jBjYbV,
.hOczRB,
.fRsrDc,
.hPskZd {
font-family: $rubik;
font-weight: $medium;
letter-spacing: .04em;
border-radius: 3px;
}
.bNYCAJ { background-color: $b-curious; } /* Post */
.jBjYbV { background-color: $gr-canopy; } /* Get */
.hOczRB { background-color: $cp-comet; } /* Put */
.fRsrDc { background-color: $ch-chartreuse; color: $ch-olive; } /* Patch */
.hPskZd { background-color: $o-curacao; } /* Delete */

// Content type block
.gzAoUb {
background-color: rgba($wp-jagger, .4);
font-family: $rubik;
}
.iENVAs { font-family: $roboto-mono; }
.dpMbau { font-family: $rubik; }

// Code controls
.fCJmC {
font-family: $rubik;
span { border-radius: 3px; }
}

// Code blocks
.kZHJcC { font-family: $roboto-mono; }
.jCgylq {
.token.string {
color: $gr-honeydew;
& + a { color: $b-malibu; }
}
.token.boolean { color: #f955b0; }
}
4 changes: 4 additions & 0 deletions assets/styles/styles-api.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
// InfluxData API Docs style overrides
// These override styles generated by ReDoc

@import "layouts/api-overrides";
Loading

0 comments on commit 9eec3e1

Please sign in to comment.