diff --git a/.env.sample b/.env.sample new file mode 100644 index 00000000..3b926cd6 --- /dev/null +++ b/.env.sample @@ -0,0 +1 @@ +GITHUB_TOKEN= diff --git a/.gitignore b/.gitignore index a2ab7551..adeedae8 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,5 @@ yarn-error.log .cache /public .DS_Store +.env +.env.* diff --git a/.travis.yml b/.travis.yml index 32170ba0..cb673f33 100644 --- a/.travis.yml +++ b/.travis.yml @@ -5,7 +5,7 @@ node_js: node script: - npm test - - npm run build + - 'if [ "$TRAVIS_SECURE_ENV_VARS" = "true" ]; then npm run build; fi' notifications: email: false diff --git a/README.md b/README.md index f5b6f9ae..80d653ed 100644 --- a/README.md +++ b/README.md @@ -23,19 +23,18 @@ - [Repositories](#repositories) - [Development](#development) - [Use Docker](#use-docker) +- [GitHub GraphQL API](#github-graphql-api) - [Authors](#authors) - [License](#license) ## Content -All content lives in the [`/content`](content/) & [`/data`](data/) folders utilizing GitHub Flavored Markdown and YAML. Content is organized into the above mentioned categories through subfolders. Those subfolder names, along with the file name, define the final url of a given piece of content. +All content lives in the [`/content`](content/) & [`/data`](data/) folders utilizing GitHub Flavored Markdown and YAML. Content is organized through subfolders corresponding to the sections mentioned below. Those subfolder names, along with the file name, define the final url of a given piece of content. -The final navigational organisation of the content is driven through the sidebar files under [`/data/sidebars`](data/sidebars/). +The final navigational organisation of the content is driven through the sidebar files under [`/data/sidebars`](data/sidebars/). Some global values used throughout the site can be set in [`config.js`](config.js). Have a look at [docs.oceanprotocol.com/test/](https://docs.oceanprotocol.com/test/) to see what content elements can be used in the docs. -Some global values used throughout the site can be set in [`config.js`](config.js). - ### Sections The documentation is split in multiple sections whose content lives in this repo: @@ -48,12 +47,12 @@ Those sections and their copy are defined in the [`/data/sections.yml`](data/sec TODO: Additionally, these docs live in their respective repos and are pulled into this site on build time: -- API reference +- API references - Component docs ### Editing docs -Every article on [docs.oceanprotocol.com](https://docs.oceanprotocol.com) ends with an _Edit this page on GitHub_ link. Clicking that will put you to the right place in the repository from where you can hit the _Edit_ pencil icon. +Every article on [docs.oceanprotocol.com](https://docs.oceanprotocol.com) ends with an _Edit this page on GitHub_ link. Clicking that will put you to the right place in the repository from where you can hit the _Edit_ pencil icon on GitHub. GitHub will automatically fork the repository if you are not part of the `oceanprotocol` organisation on GitHub. Members can simply push to a new branch on the original repo. @@ -62,17 +61,40 @@ The editing workflow is as follows: 1. Make your changes 2. Push your changes to a new branch in the repo, or in your fork 3. Open a pull request against `master`, automatically asking for review -4. Wait for review, possibly make request changes +4. Wait for review, possibly make requested changes 5. Wait for all checks to pass 6. Merge! ### Adding docs -... +1. Add new Markdown file under one of the folders under [`/content`](content/) +2. Add new path to one of the sidebars in [`/data/sidebars`](data/sidebars/) +3. ... ### Repositories -The repositories list is currently sourced from the [`/data/repositories.yml`](data/repositories.yml) file. The GitHub link is auto generated from the given repository name and will always be added by default. +The repositories list is currently sourced from the [`/data/repositories.yml`](data/repositories.yml) file, defining the grouping, the display order, and which repos to include. + +Including a repo requires only the `name` key and value, and it needs to be exactly the same as the repo name on GitHub: + +```yaml +- name: pleuston +``` + +Additional information about a repo will then be fetched automatically via [GitHub's GraphQL API](https://developer.github.com/v4/) on build time, and re-fetched every 5 minutes on client side. You can also add a private repo to prepare for a release, it will show up as soon as it is made public on GitHub. + +The above example will result in: + +screen shot 2018-11-10 at 22 43 41 + +Additionally, you can attach multiple links to a repo. The GitHub link is automatically added for every repository and will always be displayed. Add more links like so: + +```yaml +- name: keeper-contracts + links: + - name: Documentation + url: https://github.com/oceanprotocol/keeper-contracts/tree/develop/doc +``` - [`/data/repositories.yml`](data/repositories.yml) @@ -112,6 +134,48 @@ docker-compose up This will expose a hot-reloading server under [localhost:8000](http://localhost:8000). +## GitHub GraphQL API + +The GitHub GraphQL API integration is done through [gatsby-source-graphql](https://www.gatsbyjs.org/packages/gatsby-source-graphql/) and requires authorization. + +An environment variable `GITHUB_TOKEN` needs to present, filled with a [personal access token](https://github.com/settings/tokens) with the scope `public_repo`. + +For local development, you can simply [create a personal access token](https://github.com/settings/tokens) and use it in your local .env file: + +```bash +cp .env.sample .env +vi .env +# GITHUB_TOKEN=ADD-YOUR-TOKEN-HERE +``` + +When running the site locally, you can use the GraphiQL client running under [localhost:8000/\_\_\_graphql](http://localhost:8000/___graphql) to explore the whole GraphQL layer of the site (not just the GitHub infos). + +screen shot 2018-11-10 at 18 41 45 + +This query should get you started to explore what information you can get from GitHub: + +```graphql +query { + github { + organization(login: "oceanprotocol") { + repositories(first: 100) { + edges { + node { + name + description + url + forkCount + stargazers { + totalCount + } + } + } + } + } + } +} +``` + ## Authors - Troy McConaghy ([@ttmc](https://github.com/ttmc)) - [Ocean Protocol](https://oceanprotocol.com) diff --git a/content/concepts/bounties.md b/content/concepts/bounties.md index 9349f460..7ca5a4a7 100644 --- a/content/concepts/bounties.md +++ b/content/concepts/bounties.md @@ -5,6 +5,7 @@ description: Help with Ocean Protocol development and have Ocean Tokens rain on Explain our bounties -- [🎣 ocean-bounties](https://github.com/oceanprotocol/ocean-bounties/issues) + + - [Gitcoin](https://gitcoin.co/profile/oceanprotocol) - [bounties.network](https://explorer.bounties.network/explorer?bountyStage=active&search=ocean%20protocol) diff --git a/content/concepts/development.md b/content/concepts/development.md index 542436f7..2ddbf96c 100644 --- a/content/concepts/development.md +++ b/content/concepts/development.md @@ -7,7 +7,7 @@ description: Learn about the engineering process behind Ocean Protocol and how y Ocean Protocol uses [C4 Standard process](https://github.com/unprotocols/rfc/blob/master/1/README.md) to manage changes in the source code. Find more details in the respective [OEP-01](https://github.com/oceanprotocol/OEPs/tree/master/1). -- [🐙 Ocean Protocol Enhancement Proposals (OEPs)](https://github.com/oceanprotocol/OEPs) + ## Project management @@ -16,4 +16,5 @@ We use GitHub as a means for maintaining and tracking issues, roadmap and source - [Ocean Protocol on GitHub](https://github.com/oceanprotocol) - [Business Board (Ocean Roadmap)](https://github.com/oceanprotocol/ocean/projects/1) - [Milestones](https://github.com/oceanprotocol/ocean/milestones?direction=asc&sort=due_date&state=open) -- [🕶 dev-ocean](https://github.com/oceanprotocol/dev-ocean): Ocean Engineering Pages with documentation about Development, DevOps, QA, Security, etc. + + diff --git a/content/concepts/ecosystem.md b/content/concepts/ecosystem.md index ac205410..9c652d42 100644 --- a/content/concepts/ecosystem.md +++ b/content/concepts/ecosystem.md @@ -7,25 +7,25 @@ description: The Ocean Protocol network consists of various components. Learn ab See also [Set Up a Keeper](/setup/keeper/) -- [💧 keeper-contracts](https://github.com/oceanprotocol/keeper-contracts) + ## Aquarius Aquarius provides an off-chain database store for metadata about data assets. Every marketplace must run an instance of Aquarius. -- [🐋 aquarius](https://github.com/oceanprotocol/aquarius) + ## Brizo Brizo is the technical component executed by Publishers allowing them to provide extended data services. Brizo, as part of the Publisher ecosystem, includes the credentials to interact with the infrastructure (initially cloud, but could be on-premise). -- [brizo](https://github.com/oceanprotocol/brizo) + ## Pleuston An example marketplace front-end for consumers to explore, download, and publish data assets within the Ocean Protocol network. Implemented using React and squid-js. -- [🦄 pleuston](https://github.com/oceanprotocol/pleuston) + ## Squid @@ -39,7 +39,7 @@ Client libraries used by applications to interact with Ocean nodes, including Ke All of our core components generate Docker images automatically and we provide some handy Docker Compose scripts to help with testing, showcasing, and developing Ocean Protocol. -- [🐳 docker-images](https://github.com/oceanprotocol/docker-images) + ### Full Ocean network stack diff --git a/content/test.md b/content/test.md index d04240e9..67cabdf5 100644 --- a/content/test.md +++ b/content/test.md @@ -19,6 +19,7 @@ For more complete info, see [John Gruber's original spec](http://daringfireball. * [Horizontal Rule](#horizontal-rule) * [Line Breaks](#line-breaks) * [Videos](#videos) +* [React Components in Markdown](#react-components-in-markdown) ## Headers @@ -375,3 +376,22 @@ Or, in pure Markdown, but losing the image sizing and border: ```md [![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE) ``` + +## React Components in Markdown + +In all Markdown docs you can use some select React Components. This magic is done with [gatsby-remark-component](https://www.gatsbyjs.org/packages/gatsby-remark-component/). + +Note that the component name in Markdown needs to be always in lowercase, and have a closing tag. + +### Repository + +The `Repository` component fetching and displaying information about a GitHub repo. can be used as `` Component requires a `name` to be passed: + +``` + +``` + +Resulting in: + + + diff --git a/content/tutorials/jupyter.md b/content/tutorials/jupyter.md index 7e7e14d6..bac37b6c 100644 --- a/content/tutorials/jupyter.md +++ b/content/tutorials/jupyter.md @@ -4,4 +4,4 @@ title: Use Jupyter Notebooks to interact with the Ocean network For now, check out [the Mantaray repository](https://github.com/oceanprotocol/mantaray). In the future, we hope to have live online Jupyter notebooks. -- [mantaray](https://github.com/oceanprotocol/mantaray) + diff --git a/data/repositories.yml b/data/repositories.yml index f7a82b27..1948a560 100644 --- a/data/repositories.yml +++ b/data/repositories.yml @@ -1,36 +1,22 @@ - group: Core Components items: - name: keeper-contracts - description: '💧 Integration of TCRs, CPM and Ocean Tokens in Solidity' links: - name: Documentation url: https://github.com/oceanprotocol/keeper-contracts/tree/develop/doc - name: aquarius - description: '🐋 Off-chain database store for data assets metadata.' links: - name: API reference url: https://github.com/oceanprotocol/aquarius/blob/develop/docs/for_api_users/API.md - name: brizo - description: 'Helping publishers to expose their services' - - name: pleuston - description: '🦄 Web app for consumers to explore, download, and publish data assets.' - group: Libraries items: - name: squid-js - description: '🦑 JavaScript client library for Ocean Protocol' - - name: squid-py - description: '🦑 Python client library for Ocean Protocol' - - name: squid-java - description: '🦑 Java client library for Ocean Protocol' - - name: secret-store-client-js - description: '🔑 JavaScript implementation of the parity secret store for use in ocean.' - - name: secret-store-client-py - description: '🔑 Parity Secret Store Python Client' diff --git a/gatsby-config.js b/gatsby-config.js index 770c8454..42a4a4a8 100755 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,3 +1,12 @@ +require('dotenv').config() + +if (!process.env.GITHUB_TOKEN) { + throw new Error( + `A GitHub token is required to build the site. Check the README + \nhttps://github.com/oceanprotocol/docs.` + ) +} + const config = require('./config.js') module.exports = { @@ -36,6 +45,20 @@ module.exports = { path: `${__dirname}/node_modules/@oceanprotocol/art` } }, + { + resolve: 'gatsby-source-graphql', + options: { + typeName: 'GitHub', + fieldName: 'github', + url: 'https://api.github.com/graphql', + headers: { + Authorization: `bearer ${process.env.GITHUB_TOKEN}` + }, + // Additional options to pass to node-fetch + fetchOptions: {}, + refetchInterval: 300 // 5 min. + } + }, { resolve: 'gatsby-transformer-remark', options: { @@ -55,7 +78,8 @@ module.exports = { 'gatsby-remark-responsive-iframe', 'gatsby-remark-prismjs', 'gatsby-remark-autolink-headers', - 'gatsby-remark-copy-linked-files' + 'gatsby-remark-copy-linked-files', + 'gatsby-remark-component' ] } }, diff --git a/package.json b/package.json index 59a5d5c5..f0674565 100755 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "gatsby-plugin-sitemap": "^2.0.2", "gatsby-plugin-svgr": "^2.0.0-alpha", "gatsby-remark-autolink-headers": "^2.0.11", + "gatsby-remark-component": "^1.1.3", "gatsby-remark-copy-linked-files": "^2.0.6", "gatsby-remark-embed-video": "^1.4.0", "gatsby-remark-images": "^2.0.6", @@ -25,6 +26,7 @@ "gatsby-remark-responsive-iframe": "^2.0.6", "gatsby-remark-smartypants": "^2.0.6", "gatsby-source-filesystem": "^2.0.8", + "gatsby-source-graphql": "^2.0.6", "gatsby-transformer-remark": "^2.1.12", "gatsby-transformer-sharp": "^2.1.8", "gatsby-transformer-yaml": "^2.1.5", @@ -33,7 +35,8 @@ "prismjs": "^1.15.0", "react": "^16.6.1", "react-dom": "^16.6.1", - "react-helmet": "^5.2.0" + "react-helmet": "^5.2.0", + "rehype-react": "^3.0.3" }, "license": "Apache-2.0", "scripts": { @@ -49,6 +52,7 @@ "test": "npm run lint" }, "devDependencies": { + "dotenv": "^6.1.0", "eslint": "^5.9.0", "eslint-config-oceanprotocol": "^1.3.0", "eslint-config-prettier": "^3.1.0", diff --git a/src/components/DocContent.jsx b/src/components/DocContent.jsx index ce4237c5..e639bc02 100644 --- a/src/components/DocContent.jsx +++ b/src/components/DocContent.jsx @@ -1,15 +1,17 @@ import React from 'react' import PropTypes from 'prop-types' +import RehypeReact from 'rehype-react' +import Repository from './Repositories/Repository' import styles from './DocContent.module.scss' -const DocContent = ({ html }) => +const renderAst = new RehypeReact({ + createElement: React.createElement, + components: { repo: Repository } +}).Compiler + +const DocContent = ({ html, htmlAst }) => html ? ( -
+
{renderAst(htmlAst)}
) : (
This is a placeholder for now. Help creating it. @@ -17,7 +19,8 @@ const DocContent = ({ html }) => ) DocContent.propTypes = { - html: PropTypes.string + html: PropTypes.string, + htmlAst: PropTypes.object } export default DocContent diff --git a/src/components/DocContent.module.scss b/src/components/DocContent.module.scss index a610bdfe..2296ce31 100644 --- a/src/components/DocContent.module.scss +++ b/src/components/DocContent.module.scss @@ -14,8 +14,8 @@ margin-top: $spacer / 2; } - h1, - h2 { + > div > h1, + > div > h2 { margin-top: $spacer * $line-height; margin-bottom: $spacer / $line-height; padding-bottom: $spacer / $line-height; diff --git a/src/components/Repositories/QuickRun.jsx b/src/components/Repositories/QuickRun.jsx new file mode 100644 index 00000000..ec18ad5e --- /dev/null +++ b/src/components/Repositories/QuickRun.jsx @@ -0,0 +1,40 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { Link } from 'gatsby' +import Repository from './Repository' +import styles from './QuickRun.module.scss' + +const QuickRun = ({ name }) => ( + +) + +QuickRun.propTypes = { + name: PropTypes.string.isRequired +} + +export default QuickRun diff --git a/src/components/Repositories/QuickRun.module.scss b/src/components/Repositories/QuickRun.module.scss new file mode 100644 index 00000000..3a53f772 --- /dev/null +++ b/src/components/Repositories/QuickRun.module.scss @@ -0,0 +1,55 @@ +@import 'variables'; + +.quickrun { + padding-top: $spacer; + padding-bottom: $spacer * 2.5; + text-align: center; + + pre { + text-align: left; + margin-top: $spacer / $line-height; + } +} + +.header, +.docker { + margin: auto; + + @media (min-width: $break-point--medium) { + max-width: 33rem; + } +} + +.header { + margin-bottom: $spacer; +} + +.docker { + @media (min-width: $break-point--large) { + max-width: none; + display: flex; + justify-content: space-between; + + > pre, + > article { + flex: 0 0 48%; + margin: 0 !important; // stylelint-disable-line + } + + pre { + display: flex; + align-items: center; + + > code { + padding: $spacer / $line-height; + } + } + } +} + +.tldr { + display: block; + margin-bottom: $spacer / 2; + color: $brand-grey-light; + font-size: $font-size-h4; +} diff --git a/src/components/Repositories/Repository.jsx b/src/components/Repositories/Repository.jsx index 4fb3385f..259f62f2 100644 --- a/src/components/Repositories/Repository.jsx +++ b/src/components/Repositories/Repository.jsx @@ -1,29 +1,148 @@ import React from 'react' import PropTypes from 'prop-types' +import { StaticQuery, graphql } from 'gatsby' +import { ReactComponent as Star } from '../../images/star.svg' +import { ReactComponent as Forks } from '../../images/forks.svg' import styles from './Repository.module.scss' -const Repository = ({ name, description, links }) => ( -
-

{name}

-

{description}

+const queryGithub = graphql` + query GitHubReposInfo { + github { + organization(login: "oceanprotocol") { + repositories(first: 100, privacy: PUBLIC, isFork: false) { + edges { + node { + name + description + url + forkCount + stargazers { + totalCount + } + releases( + first: 1 + orderBy: { field: CREATED_AT, direction: DESC } + ) { + edges { + node { + tag { + name + } + } + } + } + } + } + } + } + } + } +` - -
+const Title = ({ name, releases, url }) => ( +

+ {name} + {releases.edges[0] && ( + + {releases.edges[0].node.tag.name} + + )} +

+) + +Title.propTypes = { + name: PropTypes.string.isRequired, + releases: PropTypes.object.isRequired, + url: PropTypes.string.isRequired +} + +const Links = ({ links, url }) => ( + +) + +Links.propTypes = { + links: PropTypes.array, + url: PropTypes.string.isRequired +} + +const Numbers = ({ stargazers, forkCount, url }) => ( + +) + +Numbers.propTypes = { + stargazers: PropTypes.object.isRequired, + forkCount: PropTypes.number.isRequired, + url: PropTypes.string.isRequired +} + +const Repository = ({ name, links }) => ( + { + const repositoriesGitHub = + data.github.organization.repositories.edges + + // just iterate over all repos until we have a name match, + // then return that repo, and then filter out all empty nodes + let repoFilteredArray = repositoriesGitHub + .map(({ node }) => { + if (node.name === name) return node + }) + .filter(n => n) + + const repo = repoFilteredArray[0] + + // safeguard against more empty items, + // e.g. when private repos are referenced in repositories.yml + if (repo === undefined) return null + + const { url, description, forkCount, stargazers, releases } = repo + + return ( +
+ + + <p>{!description ? '...' : description}</p> + + <footer className={styles.repositoryMeta}> + <Links links={links} url={url} /> + <Numbers + stargazers={stargazers} + forkCount={forkCount} + url={url} + /> + </footer> + </article> + ) + }} + /> ) Repository.propTypes = { name: PropTypes.string.isRequired, - description: PropTypes.string.isRequired, links: PropTypes.array } diff --git a/src/components/Repositories/Repository.module.scss b/src/components/Repositories/Repository.module.scss index a736be71..4ebbdd16 100644 --- a/src/components/Repositories/Repository.module.scss +++ b/src/components/Repositories/Repository.module.scss @@ -5,16 +5,31 @@ border: 1px solid $brand-grey-lighter; background: $brand-white; border-radius: $border-radius; - margin-bottom: 4%; - - @media (min-width: $break-point--small) { - flex: 0 0 100%; - } + font-size: $font-size-small; + text-align: left; + width: 100%; + margin-bottom: $spacer; } .repositoryName { - font-size: $font-size-large; + font-size: $font-size-h4; margin-top: 0; + border: 0; + padding: 0; +} + +.repositoryRelease { + font-family: $font-family-base; + font-weight: $font-weight-base; + font-size: $font-size-small; + color: $brand-grey-light; + display: inline-block; + margin-left: $spacer / 4; +} + +.repositoryMeta { + display: flex; + align-items: center; } .repositoryLinks { @@ -34,7 +49,40 @@ a { font-family: $font-family-button; - font-size: $font-size-small; font-weight: $font-weight-bold; } } + +.repositorynumbers { + font-size: $font-size-small; + margin-left: -($spacer / 4); + margin-bottom: -.2rem; + flex: 1; + text-align: right; + + a { + color: $brand-grey-light; + margin-left: $spacer / 4; + display: inline-block; + + &:hover, + &:focus { + color: $brand-pink; + transform: none; + + svg { + fill: $brand-pink; + } + } + + span { + margin-left: -.15rem; + } + } + + svg { + display: inline-block; + fill: $brand-grey-light; + margin-bottom: -.1rem; + } +} diff --git a/src/components/Repositories/RepositoryList.jsx b/src/components/Repositories/RepositoryList.jsx index f4579c5d..7107e178 100644 --- a/src/components/Repositories/RepositoryList.jsx +++ b/src/components/Repositories/RepositoryList.jsx @@ -14,7 +14,6 @@ const RepositoryList = ({ repositories }) => ( <Repository key={item.name} name={item.name} - description={item.description} links={item.links} /> ))} diff --git a/src/components/Repositories/index.jsx b/src/components/Repositories/index.jsx index da70e7fb..8dd742f0 100644 --- a/src/components/Repositories/index.jsx +++ b/src/components/Repositories/index.jsx @@ -1,62 +1,38 @@ import React from 'react' -import { StaticQuery, graphql, Link } from 'gatsby' +import { StaticQuery, graphql } from 'gatsby' import RepositoryList from './RepositoryList' +import QuickRun from './QuickRun' import styles from './index.module.scss' -const QuickRun = () => ( - <div className={styles.quickrun}> - <strong className={styles.tldr}>TL;DR</strong> - <strong> - Wanna quickly get an Ocean network with all{' '} - <Link to="/concepts/ecosystem/">core components</Link> running on - your machine? Check out{' '} - <a href="https://github.com/oceanprotocol/docker-images"> - 🐳 docker-images - </a> - : - </strong> - <pre className="language-bash"> - <code className="language-bash"> - <span className="token function">git</span> clone - https://github.com/oceanprotocol/docker-images.git - <br /> - <span className="token function">cd</span> docker-images/ - <br /> - <br /> - ./start_ocean.sh --latest - </code> - </pre> - </div> -) - -const Repositories = () => ( - <StaticQuery - query={graphql` - query { - allRepositoriesYaml { - edges { - node { - id - group - items { - name - description - links { - name - url - } - } +const query = graphql` + query { + allRepositoriesYaml { + edges { + node { + id + group + items { + name + links { + name + url } } } } - `} + } + } +` + +const Repositories = () => ( + <StaticQuery + query={query} render={data => { const repositories = data.allRepositoriesYaml.edges return ( <div className={styles.repositories}> - <QuickRun /> + <QuickRun name="docker-images" /> <RepositoryList repositories={repositories} /> </div> ) diff --git a/src/components/Repositories/index.module.scss b/src/components/Repositories/index.module.scss index 356dfa08..9e430c8c 100644 --- a/src/components/Repositories/index.module.scss +++ b/src/components/Repositories/index.module.scss @@ -3,23 +3,3 @@ .repositories { margin-top: $spacer * 2; } - -.quickrun { - padding-top: $spacer; - padding-bottom: $spacer * $line-height; - text-align: center; - max-width: $break-point--small; - margin: auto; - - pre { - text-align: left; - margin-top: $spacer / $line-height; - } -} - -.tldr { - display: block; - margin-bottom: $spacer / 2; - color: $brand-grey-light; - font-size: $font-size-h4; -} diff --git a/src/images/forks.svg b/src/images/forks.svg new file mode 100644 index 00000000..c09212c5 --- /dev/null +++ b/src/images/forks.svg @@ -0,0 +1 @@ +<svg viewBox="0 0 10 16" version="1.1" width="10" height="16" role="img"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg> diff --git a/src/images/star.svg b/src/images/star.svg new file mode 100644 index 00000000..65869c89 --- /dev/null +++ b/src/images/star.svg @@ -0,0 +1 @@ +<svg viewBox="0 0 14 16" version="1.1" width="14" height="16" role="img"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg> diff --git a/src/pages/index.js b/src/pages/index.js index 9976ddc4..69b76e9f 100755 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -11,6 +11,7 @@ import { ReactComponent as Arrow } from '../images/arrow.svg' import styles from './index.module.scss' const SectionLink = ({ to, title, color, children }) => { + // eslint-disable-next-line let classNames = classnames(styles.link, { [styles.purple]: color === 'purple', [styles.blue]: color === 'blue', diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 97bdd80c..94f77211 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -31,7 +31,7 @@ $font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas, $font-size-root: 15px; $font-size-base: 1rem; $font-size-large: 1.2rem; -$font-size-small: .8rem; +$font-size-small: .85rem; $font-size-mini: .65rem; $font-size-text: $font-size-base; $font-size-label: $font-size-base; diff --git a/src/templates/Doc.jsx b/src/templates/Doc.jsx index 37a75e57..6a4658e2 100644 --- a/src/templates/Doc.jsx +++ b/src/templates/Doc.jsx @@ -49,7 +49,6 @@ export default class DocTemplate extends Component { <Sidebar location={location} sidebar={section} - isPlaceholder={!post.html} /> </aside> <article className={styles.main}> @@ -57,7 +56,10 @@ export default class DocTemplate extends Component { title={title} description={description} /> - <DocContent html={post.html} /> + <DocContent + html={post.html} + htmlAst={post.htmlAst} + /> <DocFooter post={post} /> </article> </main> @@ -67,7 +69,10 @@ export default class DocTemplate extends Component { title={title} description={description} /> - <DocContent html={post.html} /> + <DocContent + html={post.html} + htmlAst={post.htmlAst} + /> <DocFooter post={post} /> </article> )} @@ -84,6 +89,7 @@ export const pageQuery = graphql` id excerpt html + htmlAst fileAbsolutePath frontmatter { title