diff --git a/.artifacts.yml b/.artifacts.yml deleted file mode 100644 index 200f219bbb..0000000000 --- a/.artifacts.yml +++ /dev/null @@ -1,3 +0,0 @@ -version: v1 -defaults: - - publisher diff --git a/.publisher.yml b/.publisher.yml deleted file mode 100644 index 0a5cede361..0000000000 --- a/.publisher.yml +++ /dev/null @@ -1 +0,0 @@ -subdomain: docs diff --git a/batfish.config.js b/batfish.config.js deleted file mode 100644 index 40fa62c24b..0000000000 --- a/batfish.config.js +++ /dev/null @@ -1,89 +0,0 @@ -const webpack = require('webpack'); -const mapboxAssembly = require('@mapbox/mbx-assembly'); -const path = require('path'); - -module.exports = () => { - const config = { - siteBasePath: '/mapbox-gl-js', - siteOrigin: 'https://docs.mapbox.com', - pagesDirectory: `${__dirname}/docs/pages`, - outputDirectory: path.join(__dirname, '_site'), - browserslist: mapboxAssembly.browsersList, - postcssPlugins: mapboxAssembly.postcssPipeline.plugins, - stylesheets: [ - require.resolve('@mapbox/mbx-assembly/dist/assembly.css'), - require.resolve('@mapbox/dr-ui/css/docs-prose.css'), - `${__dirname}/docs/components/site.css`, - require.resolve('@mapbox/dr-ui/css/prism.css'), - `${__dirname}/vendor/docs-page-shell/page-shell-styles.css` - ], - applicationWrapperPath: `${__dirname}/docs/components/application-wrapper.js`, - webpackLoaders: [ - // Use raw loader to get the HTML string contents of examples - { - test: /\.html$/, - use: 'raw-loader' - } - ], - ignoreWithinPagesDirectory: ['example/*.html'], - webpackPlugins: [ - // Make environment variables available within JS that Webpack compiles. - new webpack.DefinePlugin({ - // DEPLOY_ENV is used in config to pick between local/production. - 'process.env.DEPLOY_ENV': `"${process.env.DEPLOY_ENV}"` - }) - ], - inlineJs: [ - { - filename: `${__dirname}/vendor/docs-page-shell/page-shell-script.js` - } - ], - jsxtremeMarkdownOptions: { - wrapper: path.join(__dirname, './docs/components/markdown-page-shell.js'), - rehypePlugins: [ - require('@mapbox/dr-ui/plugins/add-links-to-headings'), - require('@mapbox/dr-ui/plugins/make-table-scroll') - ] - }, - dataSelectors: { - examples: ({pages}) => { - return pages - .filter(({path, frontMatter}) => /\/example\//.test(path) && frontMatter.tags) - .map(example => { - return { - path: example.path, - title: example.frontMatter.title, - description: example.frontMatter.description, - tags: example.frontMatter.tags, - pathname: example.frontMatter.pathname - }; - }); - }, - listSubfolders: data => { - const folders = data.pages - .filter(file => { - return file.path.split('/').length === 4; - }) - .map(folder => { - return folder; - }); - return folders; - } - }, - devBrowserslist: false, - babelInclude: [ - 'documentation', - 'debounce-fn', - 'mimic-fn' - ] - }; - - // Local builds treat the `dist` directory as static assets, allowing you to test examples against the - // local branch build. Non-local builds ignore the `dist` directory, and examples load assets from the CDN. - config.unprocessedPageFiles = ['**/dist/**/*.*']; - if (process.env.DEPLOY_ENV !== 'local') { - config.ignoreWithinPagesDirectory.push('**/dist/**/*.*'); - } - - return config; -}; diff --git a/docs/.eslintrc b/docs/.eslintrc deleted file mode 100644 index fdbdf88151..0000000000 --- a/docs/.eslintrc +++ /dev/null @@ -1,22 +0,0 @@ -{ - "parserOptions": { - "ecmaFeatures": { - "jsx": true - } - }, - "plugins": [ - "react" - ], - "rules": { - "flowtype/require-valid-file-annotation": [0], - "new-cap": "off", - "react/jsx-uses-vars": [2] - }, - "env": { - "browser": true - }, - "globals": { - "analytics": false, - "MapboxPageShell": false - } -} diff --git a/docs/README.md b/docs/README.md deleted file mode 100644 index a85f621ba5..0000000000 --- a/docs/README.md +++ /dev/null @@ -1,65 +0,0 @@ -Mapbox GL JS has [API documentation](#writing-api-documentation) and [examples](#writing-examples). - -## Writing API Documentation - -API documentation is written as [JSDoc comments](http://usejsdoc.org/) and processed with [documentationjs](http://documentation.js.org/). - -* Classes, methods, events, and anything else in the public interface must be documented with JSDoc comments. Everything outside of the public interface may be documented and must be tagged as `@private`. -* Text within JSDoc comments may use markdown formatting. Code identifiers must be surrounded by \`backticks\`. -* Documentation must be written in grammatically correct sentences ending with periods. -* Documentation must specify measurement units when applicable. -* Documentation descriptions must contain more information than what is obvious from the identifier and JSDoc metadata. -* Class descriptions should describe what the class *is*, or what its instances *are*. They do not document the constructor, but the class. They should begin with either a complete sentence or a phrase that would complete a sentence beginning with "A `T` is..." or "The `T` class is..." Examples: "Lists are ordered indexed dense collections." "A class used for asynchronous computations." -* Function descriptions should begin with a third person singular present tense verb, as if completing a sentence beginning with "This function..." If the primary purpose of the function is to return a value, the description should begin with "Returns..." Examples: "Returns the layer with the specified id." "Sets the map's center point." -* `@param`, `@property`, and `@returns` descriptions should be capitalized and end with a period. They should begin as if completing a sentence beginning with "This is..." or "This..." -* Functions that do not return a value (return `undefined`), should not have a `@returns` annotation. -* Member descriptions should document what a member represents or gets and sets. They should also indicate whether the member is read-only. -* Event descriptions should begin with "Fired when..." and so should describe when the event fires. Event entries should clearly document any data passed to the handler, with a link to MDN documentation of native Event objects when applicable. - -## Writing Examples - -Examples are written as [Batfish](https://github.com/mapbox/batfish) pages in `docs/pages/example`. Each example requires two files: an `.html` file containing the source -code for the example, and a `.js` file containing example boilerplate and front matter. The front matter should include the following items: - -* `title`: A short title for the example in **sentence case** as a **verb phrase** -* `description`: A one sentence description of the example -* `tags`: An array of tags for the example, which determine the sections it is listed in in the sidebar navigation, see `docs/data/tags.js` for a list of tags -* `pathname`: The relative path of the example, including leading `/mapbox-gl-js/example/` path - -In the `.html` file, write the HTML and JavaScript constituting the example. - -* Use **4 space indentation**. Exception: do not add an initial level of indentation to code within ` - - - - - -${snippet} - -`; - -// initilize puppeteer -(async() => { - const browser = await puppeteer.launch(); - const page = await browser.newPage(); - // set html for page and then wait until mapbox-gl-js loads - await page.setContent(html, {waitUntil: 'networkidle2'}); - // set viewport and double deviceScaleFactor to get a closer shot of the map - await page.setViewport({ - width: 600, - height: 600, - deviceScaleFactor: 2 - }); - // create screenshot - await page.screenshot({ - path: `./docs/img/src/${fileNameFormatted}.png`, - type: 'png', - clip: { - x: 0, - y: 0, - width: 600, - height: 250 - } - }).then(() => console.log(`Created ./docs/img/src/${fileNameFormatted}.png`)) - .catch((err) => { console.log(err); }); - await browser.close(); -})(); diff --git a/docs/components/api-item-member.js b/docs/components/api-item-member.js deleted file mode 100644 index c8422c7ae0..0000000000 --- a/docs/components/api-item-member.js +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import GithubSlugger from 'github-slugger'; -import createFormatters from 'documentation/src/output/util/formatters'; -import LinkerStack from 'documentation/src/output/util/linker_stack'; -import docs from '../components/api.json'; // eslint-disable-line import/no-unresolved -import ApiItem from '../components/api-item'; -import Icon from '@mapbox/mr-ui/icon'; - -const linkerStack = new LinkerStack({}) - .namespaceResolver(docs, (namespace) => { - const slugger = new GithubSlugger(); - return `#${slugger.slug(namespace)}`; - }); - -const formatters = createFormatters(linkerStack.link); - -class ApiItemMember extends React.Component { - constructor(props) { - super(props); - this.state = {disclosed: false}; - this.hashChange = this.hashChange.bind(this); - } - - href = m => `#${m.namespace.toLowerCase()}` - - render() { - const member = this.props; - return ( -
-
-
- -
- - {this.state.disclosed && -
- -
} -
- ); - } - - hashChange() { - if (window.location.hash === this.href(this.props)) { - this.setState({disclosed: true }); - } - } - - componentDidMount() { - window.addEventListener("hashchange", this.hashChange); - this.hashChange(); - } - - componentWillUnmount() { - window.removeEventListener("hashchange", this.hashChange); - } -} - -export default ApiItemMember; diff --git a/docs/components/api-item.js b/docs/components/api-item.js deleted file mode 100644 index c1be8e1bac..0000000000 --- a/docs/components/api-item.js +++ /dev/null @@ -1,196 +0,0 @@ -import React from 'react'; -import createFormatters from 'documentation/src/output/util/formatters'; -import LinkerStack from 'documentation/src/output/util/linker_stack'; -import GithubSlugger from 'github-slugger'; -import {highlightJavascript} from '../components/prism_highlight.js'; -import docs from '../components/api.json'; // eslint-disable-line import/no-unresolved -import ApiItemMember from './api-item-member'; -import IconText from '@mapbox/mr-ui/icon-text'; -import Feedback from '@mapbox/dr-ui/feedback'; -import constants from '../constants'; - -const linkerStack = new LinkerStack({}) - .namespaceResolver(docs, (namespace) => { - const slugger = new GithubSlugger(); - return `#${slugger.slug(namespace)}`; - }); - -const formatters = createFormatters(linkerStack.link); - -class ApiItem extends React.Component { - - constructor(props) { - super(props); - this.state = { - userName: undefined - }; - } - - componentDidMount() { - MapboxPageShell.afterUserCheck(() => { - this.setState({ userName: MapboxPageShell.getUser() ? - MapboxPageShell.getUser().id : - undefined}); - }); - } - - md = (ast, inline) => { - if (inline && ast && ast.children.length && ast.children[0].type === 'paragraph') { - ast = { - type: 'root', - children: ast.children[0].children.concat(ast.children.slice(1)) - }; - } - return ; - } - formatType = type => - - render() { - const section = this.props; - - const empty = members => !members || members.length === 0; - - const membersList = (members, title) => !empty(members) && -
-
{title}
-
- {members.map((member, i) => )} -
-
; - - return ( -
- {!this.props.nested && -
-

{section.name}

- {section.context && section.context.github && - {section.context.github.path}} -
} - - {this.md(section.description)} - - {!empty(section.augments) && -

Extends {section.augments.map((tag, i) => )}.

} - - {section.kind === 'class' && - !section.interface && - (!section.constructorComment || section.constructorComment.access !== 'private') && -
} - - {section.version &&
Version: {section.version}
} - {section.license &&
License: {section.license}
} - {section.author &&
Author: {section.author}
} - {section.copyright &&
Copyright: {section.copyright}
} - {section.since &&
Since: {section.since}
} - - {!empty(section.params) && (section.kind !== 'class' || !section.constructorComment || section.constructorComment.access !== 'private') && -
-
Parameters
-
- {section.params.map((param, i) =>
-
- {param.name} - ({this.formatType(param.type)}) - {param.default && {'('}default {param.default}{')'}} - {this.md(param.description, true)} -
- {param.properties && -
- - - - - - - - - - - - - {param.properties.map((property, i) => - - - )} - -
NameDescription
- {property.name}
- {this.formatType(property.type)}
- {property.default && default {property.default}} -
{this.md(property.description, true)}
-
} -
)} -
-
} - - {!empty(section.properties) && -
-
Properties
-
- {section.properties.map((property, i) =>
- {property.name} - ({this.formatType(property.type)}) - {property.default && {'('}default {property.default}{')'}} - {property.description && : {this.md(property.description, true)}} - {property.properties && -
    - {property.properties.map((property, i) =>
  • - {property.name} {this.formatType(property.type)} - {property.default && {'('}default {property.default}{')'}} - {this.md(property.description)} -
  • )} -
} -
)} -
-
} - - {section.returns && section.returns.map((ret, i) =>
-
Returns
- {this.formatType(ret.type)} - {ret.description && : {this.md(ret.description, true)}} -
)} - - {!empty(section.throws) && -
-
Throws
-
    - {section.throws.map((throws, i) =>
  • {this.formatType(throws.type)}: {this.md(throws.description, true)}
  • )} -
-
} - - {!empty(section.examples) && -
-
Example
- {section.examples.map((example, i) =>
- {example.caption &&

{this.md(example.caption)}

} - {highlightJavascript(example.description)} -
)} -
} - - {membersList(section.members.static, 'Static Members')} - {membersList(section.members.instance, 'Instance Members')} - {membersList(section.members.events, 'Events')} - - {!empty(section.sees) && -
-
Related
-
    {section.sees.map((see, i) =>
  • {this.md(see, true)}
  • )}
-
} - -
- -
-
- ); - } -} - -export default ApiItem; diff --git a/docs/components/api-navigation.js b/docs/components/api-navigation.js deleted file mode 100644 index f36ef4f911..0000000000 --- a/docs/components/api-navigation.js +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import docs from '../components/api.json'; // eslint-disable-line import/no-unresolved -import Icon from '@mapbox/mr-ui/icon'; - -function href(m) { - return `#${m.namespace.toLowerCase()}`; -} - -class TableOfContentsNote extends React.Component { - render() { - const doc = this.props; - return ( -
  • - {doc.name} -
  • - ); - } -} - -class TableOfContentsItem extends React.Component { - constructor(props) { - super(props); - this.state = {disclosed: false}; - } - - render() { - const doc = this.props; - - const empty = members => !members || members.length === 0; - if (empty(doc.members.static) && empty(doc.members.instance) && empty(doc.members.events)) { - return
  • {doc.name}
  • ; - } - - const membersList = (members, title, sigil) => members && members.length !== 0 && - ; - - return ( -
  • - this.setState({disclosed: !this.state.disclosed})}> - {doc.name} - - - - {this.state.disclosed && -
    - {membersList(doc.members.static, 'Static members', '.')} - {membersList(doc.members.instance, 'Instance members', '#')} - {membersList(doc.members.events, 'Events', 'â“” ')} -
    } -
  • - ); - } -} - -class ApiNavigation extends React.Component { - render() { - return ( -
    -
      - {docs.map((doc, i) => (doc.kind === 'note') ? - : - )} -
    -
    - ); - } -} - -export default ApiNavigation; diff --git a/docs/components/application-wrapper.js b/docs/components/application-wrapper.js deleted file mode 100644 index 84d0c1f266..0000000000 --- a/docs/components/application-wrapper.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -if (typeof window !== 'undefined') { - import(/* webpackChunkName: "assembly-js" */ '@mapbox/mbx-assembly/dist/assembly.js'); -} - -class ApplicationWrapper extends React.Component { - render() { - return this.props.children; - } -} - -export default ApplicationWrapper; diff --git a/docs/components/appropriate-image.js b/docs/components/appropriate-image.js deleted file mode 100644 index 2805bc305c..0000000000 --- a/docs/components/appropriate-image.js +++ /dev/null @@ -1,12 +0,0 @@ -import { scopeAppropriateImage } from '@mapbox/appropriate-images-react'; -import imageConfig from '../img/dist/image.config.json'; // eslint-disable-line import/no-unresolved -// image.config.json is generated on build - -// See https://github.com/mapbox/appropriate-images-react#appropriateimage -// The required prop is `imageId`, which must correspond to a key in the -// imageConfig. -const AppropriateImage = scopeAppropriateImage(imageConfig, { - transformUrl: url => require(`../img/dist/${url}`) -}); - -export default AppropriateImage; diff --git a/docs/components/copyable.js b/docs/components/copyable.js deleted file mode 100644 index 7e8e160c21..0000000000 --- a/docs/components/copyable.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import CodeSnippet from '@mapbox/mr-ui/code-snippet'; -import Prism from 'prismjs'; -const highlightTheme = require('raw-loader!@mapbox/dr-ui/css/prism.css'); // eslint-disable-line import/no-commonjs - -export default class extends React.Component { - - render() { - return ( -
    - { analytics.track('Copied example with clipboard'); }} - highlightedCode={Prism.highlight(this.props.children, Prism.languages[this.props.lang])} - highlightThemeCss={highlightTheme} - /> -
    - ); - } -} diff --git a/docs/components/example.js b/docs/components/example.js deleted file mode 100644 index fad1b9814e..0000000000 --- a/docs/components/example.js +++ /dev/null @@ -1,135 +0,0 @@ -import React from 'react'; -import urls from './urls'; -import md from './md'; -import PageShell from './page_shell'; -import Prism from 'prismjs'; -import supported from '@mapbox/mapbox-gl-supported'; -import Icon from '@mapbox/mr-ui/icon'; -import CodeSnippet from '@mapbox/mr-ui/code-snippet'; -import Feedback from '@mapbox/dr-ui/feedback'; -import constants from '../constants'; - -const highlightTheme = require('raw-loader!@mapbox/dr-ui/css/prism.css'); // eslint-disable-line import/no-commonjs - -export default function (html) { - return class extends React.Component { - constructor(props) { - super(props); - this.state = { - filter: '', - token: undefined, - userName: undefined - }; - } - - // Display HTML with production URLs and the logged-in user's access token (if available). - // Render HTML with possibly-local URLs and a Mapbox access token (don't bill the user for looking at examples). - - displayHTML() { - return ` - - - - ${this.props.frontMatter.title} - - - - - - - -${html.replace(" - - - - - -${html} - -`; - } - - render() { - const {frontMatter} = this.props; - frontMatter.language = ['JavaScript']; - frontMatter.contentType = 'example'; - return ( - -
    -
    -
    -

    {frontMatter.title}

    -
    {md(frontMatter.description)}
    - - {!supported() && -
    -
    -
    Mapbox GL unsupported
    -
    Mapbox GL requires WebGL support. Please check that you are using a supported browser and that WebGL is enabled.
    -
    -
    } -
    - - {supported() && -