From a211eecc6cd07870737a1eb508f31e5b491224fb Mon Sep 17 00:00:00 2001 From: Kylie Stewart Date: Mon, 6 Jan 2020 15:50:53 -0700 Subject: [PATCH 01/10] Add react-static content for deploying docs --- .npmignore | 2 +- docs/.babelrc | 4 + docs/.eslintrc.js | 32 +++ docs/.gitignore | 31 +++ docs/CHANGELOG.md | 49 ++++ docs/README.md | 91 ++++++++ docs/{ => content}/basic-concepts.md | 18 +- docs/{ => content}/extensions.md | 0 docs/{ => content}/getting-started.md | 2 +- docs/{ => content}/props.md | 0 docs/{ => content}/tag-api.md | 10 +- docs/{ => content}/tutorial.md | 68 +++--- docs/package.json | 98 ++++++++ docs/prettier.config.js | 4 + docs/public/robots.txt | 1 + docs/public/static/bg-demo.mp4 | Bin 0 -> 872620 bytes docs/public/static/bg-demo.webm | Bin 0 -> 895101 bytes docs/public/static/bg-still.png | Bin 0 -> 13513 bytes docs/public/static/bg_hero_gray.jpg | Bin 0 -> 150836 bytes docs/public/static/bg_mountains_gray.jpg | Bin 0 -> 11000 bytes docs/public/static/favicon/browserconfig.xml | 9 + docs/public/static/favicon/favicon-32.png | Bin 0 -> 1015 bytes docs/public/static/favicon/site.webmanifest | 14 ++ docs/public/static/robots.txt | 1 + docs/public/static/svgs/amazing.svg | 1 + docs/public/static/svgs/burger.svg | 12 + docs/public/static/svgs/button.svg | 1 + docs/public/static/svgs/code-preview.svg | 1 + .../svgs/collapsed-sidebar-background.svg | 17 ++ docs/public/static/svgs/logo-sidebar.svg | 51 +++++ .../static/svgs/logo_formidable_dark.svg | 26 +++ .../static/svgs/logo_formidable_white.svg | 1 + docs/public/static/svgs/logo_spectacle.svg | 1 + docs/public/static/svgs/logo_victory.svg | 1 + .../static/svgs/pink-sidebar-background.svg | 20 ++ docs/public/static/svgs/x.svg | 11 + docs/src/app.js | 82 +++++++ docs/src/components/article-typography/h1.js | 11 + docs/src/components/article-typography/h2.js | 11 + docs/src/components/article-typography/h3.js | 11 + docs/src/components/article-typography/h4.js | 11 + docs/src/components/article-typography/h5.js | 8 + docs/src/components/article-typography/h6.js | 8 + .../components/article-typography/index.js | 7 + docs/src/components/article-typography/p.js | 8 + docs/src/components/body-copy.js | 16 ++ docs/src/components/bounce-animation.js | 8 + docs/src/components/button.js | 25 +++ docs/src/components/footer.js | 112 +++++++++ docs/src/components/header.js | 94 ++++++++ docs/src/components/markdown.js | 125 +++++++++++ docs/src/components/navigation.js | 104 +++++++++ docs/src/components/secondary-title.js | 18 ++ docs/src/components/section-title.js | 17 ++ docs/src/components/title-meta.js | 29 +++ docs/src/components/wrapper.js | 24 ++ docs/src/constants.js | 8 + docs/src/global-style.js | 83 +++++++ docs/src/google-analytics.js | 16 ++ docs/src/index.js | 21 ++ docs/src/screens/docs/article.js | 44 ++++ docs/src/screens/docs/index.js | 151 +++++++++++++ docs/src/screens/docs/sidebar.js | 150 +++++++++++++ docs/src/screens/home/_content.js | 70 ++++++ docs/src/screens/home/features.js | 50 +++++ docs/src/screens/home/get-started.js | 34 +++ docs/src/screens/home/hero.js | 212 ++++++++++++++++++ docs/src/screens/home/index.js | 30 +++ docs/src/screens/home/more-oss.js | 160 +++++++++++++ docs/src/screens/home/npm-copy.js | 91 ++++++++ docs/src/screens/home/preview.js | 42 ++++ docs/src/static/bg-demo.mp4 | Bin 0 -> 872620 bytes docs/src/static/bg-demo.webm | Bin 0 -> 895101 bytes docs/src/static/bg-still.png | Bin 0 -> 13513 bytes docs/src/static/bg_hero_badge.png | Bin 0 -> 58581 bytes docs/src/static/bg_hero_feather.jpg | Bin 0 -> 896630 bytes docs/src/static/bg_hero_gray.jpg | Bin 0 -> 150836 bytes docs/src/static/bg_mountains_gray.jpg | Bin 0 -> 11000 bytes docs/src/static/favicon/browserconfig.xml | 9 + docs/src/static/favicon/favicon-32.png | Bin 0 -> 1015 bytes docs/src/static/favicon/site.webmanifest | 14 ++ docs/src/static/robots.txt | 1 + docs/src/static/svgs/amazing.svg | 15 ++ docs/src/static/svgs/burger.svg | 12 + docs/src/static/svgs/button.svg | 15 ++ docs/src/static/svgs/code-preview.svg | 15 ++ .../svgs/collapsed-sidebar-background.svg | 17 ++ docs/src/static/svgs/header-triangle.svg | 15 ++ docs/src/static/svgs/logo-sidebar.svg | 51 +++++ .../svgs/logo_development-dashboards.svg | 1 + docs/src/static/svgs/logo_enzyme-matchers.svg | 1 + docs/src/static/svgs/logo_formidable_dark.svg | 49 ++++ .../src/static/svgs/logo_formidable_white.png | Bin 0 -> 6279 bytes docs/src/static/svgs/logo_react-animation.svg | 1 + docs/src/static/svgs/logo_spectacle.svg | 1 + .../src/static/svgs/logo_spectacle_raised.svg | 1 + docs/src/static/svgs/logo_victory.svg | 1 + docs/src/static/svgs/sidebar-background.svg | 20 ++ docs/src/static/svgs/x.svg | 11 + docs/src/template.js | 24 ++ docs/static-config-helpers/get-md-files.js | 180 +++++++++++++++ .../md-data-transforms.js | 38 ++++ docs/static-config-parts/constants.js | 18 ++ docs/static-config-parts/document.js | 61 +++++ .../static-webpack-config.js | 33 +++ docs/static.config.js | 97 ++++++++ docs/test/spectacle-integration.js | 28 +++ 107 files changed, 3147 insertions(+), 50 deletions(-) create mode 100644 docs/.babelrc create mode 100644 docs/.eslintrc.js create mode 100644 docs/.gitignore create mode 100644 docs/CHANGELOG.md create mode 100644 docs/README.md rename docs/{ => content}/basic-concepts.md (96%) rename docs/{ => content}/extensions.md (100%) rename docs/{ => content}/getting-started.md (99%) rename docs/{ => content}/props.md (100%) rename docs/{ => content}/tag-api.md (99%) rename docs/{ => content}/tutorial.md (91%) create mode 100644 docs/package.json create mode 100644 docs/prettier.config.js create mode 100644 docs/public/robots.txt create mode 100644 docs/public/static/bg-demo.mp4 create mode 100644 docs/public/static/bg-demo.webm create mode 100644 docs/public/static/bg-still.png create mode 100644 docs/public/static/bg_hero_gray.jpg create mode 100644 docs/public/static/bg_mountains_gray.jpg create mode 100644 docs/public/static/favicon/browserconfig.xml create mode 100644 docs/public/static/favicon/favicon-32.png create mode 100644 docs/public/static/favicon/site.webmanifest create mode 100644 docs/public/static/robots.txt create mode 100644 docs/public/static/svgs/amazing.svg create mode 100644 docs/public/static/svgs/burger.svg create mode 100644 docs/public/static/svgs/button.svg create mode 100644 docs/public/static/svgs/code-preview.svg create mode 100644 docs/public/static/svgs/collapsed-sidebar-background.svg create mode 100644 docs/public/static/svgs/logo-sidebar.svg create mode 100644 docs/public/static/svgs/logo_formidable_dark.svg create mode 100644 docs/public/static/svgs/logo_formidable_white.svg create mode 100644 docs/public/static/svgs/logo_spectacle.svg create mode 100644 docs/public/static/svgs/logo_victory.svg create mode 100644 docs/public/static/svgs/pink-sidebar-background.svg create mode 100644 docs/public/static/svgs/x.svg create mode 100644 docs/src/app.js create mode 100644 docs/src/components/article-typography/h1.js create mode 100644 docs/src/components/article-typography/h2.js create mode 100644 docs/src/components/article-typography/h3.js create mode 100644 docs/src/components/article-typography/h4.js create mode 100644 docs/src/components/article-typography/h5.js create mode 100644 docs/src/components/article-typography/h6.js create mode 100644 docs/src/components/article-typography/index.js create mode 100644 docs/src/components/article-typography/p.js create mode 100644 docs/src/components/body-copy.js create mode 100644 docs/src/components/bounce-animation.js create mode 100644 docs/src/components/button.js create mode 100644 docs/src/components/footer.js create mode 100644 docs/src/components/header.js create mode 100644 docs/src/components/markdown.js create mode 100644 docs/src/components/navigation.js create mode 100644 docs/src/components/secondary-title.js create mode 100644 docs/src/components/section-title.js create mode 100644 docs/src/components/title-meta.js create mode 100644 docs/src/components/wrapper.js create mode 100644 docs/src/constants.js create mode 100644 docs/src/global-style.js create mode 100644 docs/src/google-analytics.js create mode 100644 docs/src/index.js create mode 100644 docs/src/screens/docs/article.js create mode 100644 docs/src/screens/docs/index.js create mode 100644 docs/src/screens/docs/sidebar.js create mode 100644 docs/src/screens/home/_content.js create mode 100644 docs/src/screens/home/features.js create mode 100644 docs/src/screens/home/get-started.js create mode 100644 docs/src/screens/home/hero.js create mode 100644 docs/src/screens/home/index.js create mode 100644 docs/src/screens/home/more-oss.js create mode 100644 docs/src/screens/home/npm-copy.js create mode 100644 docs/src/screens/home/preview.js create mode 100644 docs/src/static/bg-demo.mp4 create mode 100644 docs/src/static/bg-demo.webm create mode 100644 docs/src/static/bg-still.png create mode 100644 docs/src/static/bg_hero_badge.png create mode 100644 docs/src/static/bg_hero_feather.jpg create mode 100644 docs/src/static/bg_hero_gray.jpg create mode 100644 docs/src/static/bg_mountains_gray.jpg create mode 100644 docs/src/static/favicon/browserconfig.xml create mode 100644 docs/src/static/favicon/favicon-32.png create mode 100644 docs/src/static/favicon/site.webmanifest create mode 100644 docs/src/static/robots.txt create mode 100644 docs/src/static/svgs/amazing.svg create mode 100644 docs/src/static/svgs/burger.svg create mode 100644 docs/src/static/svgs/button.svg create mode 100644 docs/src/static/svgs/code-preview.svg create mode 100644 docs/src/static/svgs/collapsed-sidebar-background.svg create mode 100644 docs/src/static/svgs/header-triangle.svg create mode 100644 docs/src/static/svgs/logo-sidebar.svg create mode 100644 docs/src/static/svgs/logo_development-dashboards.svg create mode 100644 docs/src/static/svgs/logo_enzyme-matchers.svg create mode 100644 docs/src/static/svgs/logo_formidable_dark.svg create mode 100644 docs/src/static/svgs/logo_formidable_white.png create mode 100644 docs/src/static/svgs/logo_react-animation.svg create mode 100644 docs/src/static/svgs/logo_spectacle.svg create mode 100644 docs/src/static/svgs/logo_spectacle_raised.svg create mode 100644 docs/src/static/svgs/logo_victory.svg create mode 100644 docs/src/static/svgs/sidebar-background.svg create mode 100644 docs/src/static/svgs/x.svg create mode 100644 docs/src/template.js create mode 100644 docs/static-config-helpers/get-md-files.js create mode 100644 docs/static-config-helpers/md-data-transforms.js create mode 100644 docs/static-config-parts/constants.js create mode 100644 docs/static-config-parts/document.js create mode 100644 docs/static-config-parts/static-webpack-config.js create mode 100644 docs/static.config.js create mode 100644 docs/test/spectacle-integration.js diff --git a/.npmignore b/.npmignore index 410139a2b..b10ad74a5 100644 --- a/.npmignore +++ b/.npmignore @@ -5,7 +5,7 @@ !/es !/lib !/src -!/docs +/docs/* __snapshots__ __mocks__ *.test.js diff --git a/docs/.babelrc b/docs/.babelrc new file mode 100644 index 000000000..f6cb5d481 --- /dev/null +++ b/docs/.babelrc @@ -0,0 +1,4 @@ +{ + "extends": "react-static/.babelrc", + "plugins": ["babel-plugin-styled-components"] +} diff --git a/docs/.eslintrc.js b/docs/.eslintrc.js new file mode 100644 index 000000000..722749f81 --- /dev/null +++ b/docs/.eslintrc.js @@ -0,0 +1,32 @@ +module.exports = { + extends: [ + "formidable/configurations/es6-react", + "prettier", + "prettier/react", + "prettier/standard" + ], + env: { + browser: true + }, + globals: { + __dirname: true, + $: true + }, + plugins: ["prettier"], + rules: { + "arrow-parens": "off", + "filenames/match-regex": ["error", "^(_|)[a-z0-9\\-\\.]+$", false], + "consistent-return": "warn", + "no-magic-numbers": "warn", + "object-curly-spacing": "off", + "react/jsx-handler-names": "off", + "import/no-extraneous-dependencies": ["error", { devDependencies: true }], + "max-params": ["error", 5], + "prettier/prettier": [ + "error", + { + singleQuote: false + } + ] + } +}; diff --git a/docs/.gitignore b/docs/.gitignore new file mode 100644 index 000000000..ed2651301 --- /dev/null +++ b/docs/.gitignore @@ -0,0 +1,31 @@ +# dependencies +/node_modules + +# testing +/coverage + +# production +/dist +/tmp + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local +\.hg +.idea + +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# build +coverage +Procfile +build +package-lock.json +yarn.lock + +test/screenshots diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md new file mode 100644 index 000000000..23d6361d2 --- /dev/null +++ b/docs/CHANGELOG.md @@ -0,0 +1,49 @@ +Spectacle Docs + +## 5.1.0 + +- [#89](https://github.com/FormidableLabs/spectacle-docs/pull/89) Design update + +## 5.0.10 + +- update `formidable-oss-badges` + +## 5.0.9 + +- Use logo badges + +## 5.0.8 + +- [#84](https://github.com/FormidableLabs/spectacle-docs/pull/84) + +## 5.0.7 + +- [#86](https://github.com/FormidableLabs/spectacle-docs/pull/86) fix formidable wordmark padding + +## 5.0.6 (2019-04-17) + +- [#85](https://github.com/FormidableLabs/spectacle-docs/pull/85) Update formidable wordmark + +## 5.0.5 (2019-04-04) + +- [#81](https://github.com/FormidableLabs/spectacle-docs/pull/81) Docs addition + +## 5.0.4 (2019-04-04) + +- [#80](https://github.com/FormidableLabs/spectacle-docs/pull/80) Fixes broken button + +## 5.0.3 (2019-04-03) + +- [#79](https://github.com/FormidableLabs/spectacle-docs/pull/79) Correct anchor tags with ampersands + +## 5.0.2 (2019-04-03) + +- [#78](https://github.com/FormidableLabs/spectacle-docs/pull/78) Additional style tweaks + +## 5.0.1 (2019-04-01) + +- [#77](https://github.com/FormidableLabs/spectacle-docs/pull/77) Fix mobile styles + +## 5.0.0 (2019-03-30) + +First redesigned `react-static` version diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 000000000..7bca8ed53 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,91 @@ +# Spectacle Documentation Site + +Now built with react-static! + +## Getting Started + +To install and run the docs site locally: + +```sh +cd docs +yarn install +yarn start +``` + +Note that paths in local development are based on a root of "/" but be careful when defining relative and absolute paths +inline or doing url parsing, as the production output root will be "open-source/spectacle." + +## Want to see if you're ready to :shipit:? + +To build the staging build output and serve it with the canonical path it'll have when built as a lander for formidable.com: + +```sh +cd docs +yarn stage +yarn serve +``` + +This step is important for validating that both the `basePath` used by the static HTML output and the `basename` used +by the client-side router are working as expected. This is also where you'll want to validate that there are no hardcoded, inlined, or malformed asset paths that worked locally but will not resolve correctly in production! + + + +## Tips for developing + +- Almost all of your code will be executed in two contexts: first in node for server-side rendering and static html generation, then client-side as a PWA. In addition to writing [node-safe code](https://github.com/nozzle/react-static/blob/master/docs/concepts.md#writing-universal-node-safe-code), this also means that it's necessary to validate that both contexts are working as expected. + +- In addition to two execution contexts, there are three stages: development, staging, and production. `yarn start` uses a local dev server with live reload that takes about one second to rebuild. This is a good choice for most local development, but it's important to keep in mind that **the development server does not build the static html.** For that, you will want to use `yarn stage && yarn serve`. The `yarn build` command is used by formidable.com within its build script that moves the output of this lander into the correct location within the overall site output. + +- When debugging an issue with the static html output, don't be shy about cracking open the `dist` folder and looking at the output! + +- When debugging an issue with the PWA or SSR-PWA coordination, consider using `yarn stage-debug` -- this builds the staging output without minification/uglification and propagates warnings/errors. + +- We have seen errors related to minification, uglification, and codesplitting before, please do not treat the debug build or the local dev server as 1:1 with production output! + +## Tips for getting the most out of react-static + webpack tooling + +We are on react-static v5 due to blocking stability issues with v6, which means... + +- You'll want to make sure that when you refer to the docs you're in the v5 branch. + +- When you install the react-static CLI tool globally, you'll want to use the v5 version (`npm install -g react-static@^5.9.12`) which currently has a wider selection of working templates that can be very useful as executable canonical references. + +- If you're looking for the client-side router documentation for react-static to see how to implement a certain behavior, the best place to start is in the [react-router docs](https://reacttraining.com/react-router/web/api/), which react-static v5 uses under the hood. There are a few additional react-static specific properties for [Router](https://github.com/nozzle/react-static/blob/v5/docs/components.md#router), [Routes](https://github.com/nozzle/react-static/blob/v5/docs/components.md#routes), and [Link](https://github.com/nozzle/react-static/blob/v5/docs/components.md#link), but if you need something from the routing that doesn't seem to covered in the react-static api, the react-router docs are pretty likely to have you covered. + +- You'll ~~want~~ need to use Webpack 3 plugins. Webpack has an [interesting approach](https://github.com/webpack/webpack.js.org/issues/1854) to documenting old versions. The existing documentation is broadly usable but you may want to familiarize yourself with this [introductory v3 to v4 migration guide](https://webpack.js.org/migrate/4/) and the relevant [react-static docs](https://github.com/nozzle/react-static/blob/v5/docs/config.md#webpack). + +- Interestingly, some webpack v4 loaders still work with v3, while some webpack v3 loaders _don't_ work with webpack v3. Version-twiddling or using a different loader for reasons that are unclear may be required. When tweaking webpack, it's extra-important to validate both PWA and static html output and clear out cached files. + +## Using this project as a template: + +This lander is designed to be easily re-used as a template for other projects. + +What to change: + +- Docs Content + - markdown content lives in `/docs/content` + - _Note:_ Any markdown files placed here will be rendered as separate pages, and header tags will be rendered into a hierarchical sidebar. Please make sure header tags do not include any special symbols as they will be used to create anchor tags and hashes. +- Main Page Content + - `src/screens/home/_content.js` includes section titles, descriptions, and assets urls + - `src/screens/home/hero.js` +- Constants + - client constants live in `src/constants.js` + - static constants live in `static-config-parts/constants.js` +- Assets + - Logos, sidebar svgs and favicons (TODO: These are all very similar svgs, and could some day live in a separate repo, and take props like color, name etc) diff --git a/docs/basic-concepts.md b/docs/content/basic-concepts.md similarity index 96% rename from docs/basic-concepts.md rename to docs/content/basic-concepts.md index 1e20f165f..7532fe098 100644 --- a/docs/basic-concepts.md +++ b/docs/content/basic-concepts.md @@ -15,7 +15,7 @@ Check it out [here](https://github.com/FormidableLabs/spectacle-boilerplate/blob ```jsx // index.js -import React, { Component } from 'react'; +import React, { Component } from "react"; import { Appear, BlockQuote, @@ -33,7 +33,7 @@ import { Quote, Slide, Text -} from 'spectacle'; +} from "spectacle"; export default class extends Component { render() { @@ -61,7 +61,7 @@ In Spectacle, themes are functions that return style objects for `screen` & `pri You can import the default theme from: ```jsx -import createTheme from 'spectacle/lib/themes/default'; +import createTheme from "spectacle/lib/themes/default"; ``` Or create your own based upon the source. @@ -79,15 +79,15 @@ Spectacle's functional theme system allows you to pass in color and font variabl ```jsx const theme = createTheme( { - primary: 'red', - secondary: 'blue' + primary: "red", + secondary: "blue" }, { - primary: 'Helvetica', + primary: "Helvetica", secondary: { - name: 'Droid Serif', + name: "Droid Serif", googleFont: true, - styles: ['400', '700i'] + styles: ["400", "700i"] } } ); @@ -115,7 +115,7 @@ Building the dist version of the slides is as easy as running `npm run build:dis If you want to deploy the slideshow to [surge](https://surge.sh/), run `npm run deploy` -_⚠️ WARNING: If you are deploying the dist version to [GitHub Pages](https://pages.github.com/ 'GitHub Pages'), note that the built bundle uses an absolute path to the `/dist/` directory while GitHub Pages requires the relative `./dist/` to find any embedded assets and/or images. A very hacky way to fix this is to edit one place in the produced bundle, as shown [in this GitHub issue](https://github.com/FormidableLabs/spectacle/issues/326#issue-233283633 'GitHub: spectacle issue #326')._ +_⚠️ WARNING: If you are deploying the dist version to [GitHub Pages](https://pages.github.com/ "GitHub Pages"), note that the built bundle uses an absolute path to the `/dist/` directory while GitHub Pages requires the relative `./dist/` to find any embedded assets and/or images. A very hacky way to fix this is to edit one place in the produced bundle, as shown [in this GitHub issue](https://github.com/FormidableLabs/spectacle/issues/326#issue-233283633 "GitHub: spectacle issue #326")._ diff --git a/docs/extensions.md b/docs/content/extensions.md similarity index 100% rename from docs/extensions.md rename to docs/content/extensions.md diff --git a/docs/getting-started.md b/docs/content/getting-started.md similarity index 99% rename from docs/getting-started.md rename to docs/content/getting-started.md index 40af7fef4..8ef43a866 100644 --- a/docs/getting-started.md +++ b/docs/content/getting-started.md @@ -196,7 +196,7 @@ Building the dist version of the slides is as easy as running `npm run build:dis If you want to deploy the slideshow to [surge](https://surge.sh/), run `npm run deploy` -_⚠️ WARNING: If you are deploying the dist version to [GitHub Pages](https://pages.github.com/ 'GitHub Pages'), note that the built bundle uses an absolute path to the `/dist/` directory while GitHub Pages requires the relative `./dist/` to find any embedded assets and/or images. A very hacky way to fix this is to edit one place in the produced bundle, as shown [in this GitHub issue](https://github.com/FormidableLabs/spectacle/issues/326#issue-233283633 'GitHub: spectacle issue #326')._ +_⚠️ WARNING: If you are deploying the dist version to [GitHub Pages](https://pages.github.com/ "GitHub Pages"), note that the built bundle uses an absolute path to the `/dist/` directory while GitHub Pages requires the relative `./dist/` to find any embedded assets and/or images. A very hacky way to fix this is to edit one place in the produced bundle, as shown [in this GitHub issue](https://github.com/FormidableLabs/spectacle/issues/326#issue-233283633 "GitHub: spectacle issue #326")._ diff --git a/docs/props.md b/docs/content/props.md similarity index 100% rename from docs/props.md rename to docs/content/props.md diff --git a/docs/tag-api.md b/docs/content/tag-api.md similarity index 99% rename from docs/tag-api.md rename to docs/content/tag-api.md index de3769dbe..f55cc956c 100644 --- a/docs/tag-api.md +++ b/docs/content/tag-api.md @@ -85,7 +85,7 @@ GitHub user [@boardfish](https://github.com/boardfish) has documented an approac With `SlideSet`, you can wrap multiple slide in it to apply the same style. ```jsx - + Slide1 Slide2 Slide3 @@ -349,7 +349,7 @@ These tags create a styled blockquote. Use them as follows: _NOTE: By default the text color of the `Quote` tag is the same as the background color and may not show up. Use the `bgColor` and/or `textColor` props on the `Slide` or `Quote` tags to make it visible._ ```jsx - +
Example Quote Author @@ -358,7 +358,7 @@ _NOTE: By default the text color of the `Quote` tag is the same as the backgroun ``` ```jsx - +
Example Quote Author @@ -417,7 +417,7 @@ render( + + + ); + } +} + +GetStarted.propTypes = { + getStartedObj: PropTypes.object +}; + +export default GetStarted; diff --git a/docs/src/screens/home/hero.js b/docs/src/screens/home/hero.js new file mode 100644 index 000000000..42b21dee4 --- /dev/null +++ b/docs/src/screens/home/hero.js @@ -0,0 +1,212 @@ +import React from "react"; +import { Link } from "react-static"; +import { Wrapper } from "../../components/wrapper"; +import styled from "styled-components"; +import badge from "../../static/bg_hero_badge.png"; +import NpmCopy from "./npm-copy"; + +const HeroContent = styled.div` + align-items: center; + display: flex; + flex-direction: column; + flex-wrap: wrap; + margin-top: 5rem; + padding: 0; + position: relative; + text-align: left; + width: 100%; + @media (min-width: 768px) { + display: grid; + grid-template-columns: 3fr 0.5fr 4fr; + grid-template-rows: repeat(5, 1fr); + grid-template-areas: + "a . b" + "a . b" + "a . b" + "a . c" + "d d d"; + margin: 20rem 2rem 0; + } +`; + +const HeroTitle = styled.h1` + font-size: 3rem; + letter-spacing: 0.15em; + margin: 0 0 2rem; + text-align: center; + text-transform: uppercase; + width: 100%; + @media (min-width: 768px) { + font-size: 5.8rem; + margin: 4rem 0 2rem; + text-align: left; + } +`; + +const HeroBody = styled.p` + font-family: Helvetica; + letter-spacing: 0.08em; + font-size: 1.4rem; + line-height: 2.2rem; + margin: 0 0 4rem; + max-width: 30rem; + text-align: left; + width: 100%; + @media (min-width: 768px) { + font-size: 2rem; + line-height: 2.8rem; + max-width: 100%; + } +`; + +const HeroLogo = styled.img` + max-width: 16rem; + position: relative; + @media (min-width: 768px) { + max-width: 40rem; + grid-area: a; + align-self: flex-start; + } + @media (min-width: 1024px) { + max-width: initial; + } +`; + +const HeroNavList = styled.ul` + border-top: 0.2rem solid #707070; + margin-top: 2.2rem; + display: flex; + flex-direction: row; + justify-content: center; + list-style: none; + padding: 2rem 0 0; + text-align: center; + width: 100%; + box-sizing: border-box; + @media (min-width: 768px) { + grid-area: d; + margin: 2.2rem 6rem 0; + width: calc(100% - 12rem); + } + @media (min-width: 1024px) { + grid-area: c; + margin: 2.2rem 0 0; + width: 100%; + border-top-color: #ffffff; + } + & li a { + color: white; + display: inline-block; + font-size: 1.7rem; + letter-spacing: 0.05em; + margin: 0 2rem; + transition: opacity 0.4s; + text-transform: uppercase; + } + & li a:hover { + color: #fc6986; + } +`; + +const HeroButtonsWrapper = styled.div` + max-width: 100%; + flex-direction: column; + justify-content: space-between; + display: flex; + @media (min-width: 1024px) { + flex-direction: row; + } + @media (max-width: 768px) { + align-items: center; + } +`; + +const HeroDocsButton = styled(Link)` + width: 30rem; + margin-left: 0rem; + height: 4rem; + font-size: 14px; + background: #ffffff; + transition: background 0.4s; + line-height: 4rem; + text-align: center; + text-transform: uppercase; + letter-spacing: 1px; + color: #383838; + border: 0; + margin-top: 1.2rem; + @media (min-width: 768px) { + margin-top: 2rem; + width: 30rem; + } + @media (min-width: 1024px) { + margin-top: 0; + margin-left: 2rem; + width: 18rem; + } + &:hover { + background: #fc6986; + } +`; + +const HeroBodyAndButtons = styled.div` + grid-area: b; +`; + +class Hero extends React.Component { + constructor() { + super(...arguments); + } + + render() { + return ( + + + + + Spectacle + + A React.js based library for creating sleek presentations using + JSX syntax that gives you the ability to live demo your code. + + + + + Documentation + + + + +
  • + + Docs + +
    • +
  • + + Issues + +
    • +
  • + + GitHub + +
    • +     +     +     + ); + } +} + +export default Hero; diff --git a/docs/src/screens/home/index.js b/docs/src/screens/home/index.js new file mode 100644 index 000000000..427250db0 --- /dev/null +++ b/docs/src/screens/home/index.js @@ -0,0 +1,30 @@ +import React from "react"; +import Features from "./features"; +import GetStarted from "./get-started"; +import MoreOSS from "./more-oss"; +import Preview from "./preview"; +import content from "./_content"; +import styled from "styled-components"; +import { Header } from "../../components/header"; +import { Footer } from "../../components/footer"; + +const Container = styled.div` + width: 100%; +`; + +class Home extends React.Component { + render() { + return ( + +
    + + + + +