- 
-
+
+ -
+
diff --git a/www/src/layouts/index.css b/www/src/layouts/index.css
index 1f27d5f..1c96277 100644
--- a/www/src/layouts/index.css
+++ b/www/src/layouts/index.css
@@ -16,6 +16,17 @@ h4 {
margin: 1.14rem 0 .912rem 0;
}
+h5 {
+ font-size: 1.28rem;
+ line-height: 110%;
+ margin: 1.14rem 0 .912rem 0;
+}
+
+h6 {
+ line-height: 110%;
+ margin: 1.14rem 0 .912rem 0;
+}
+
a {
color: #7cb342;
text-decoration: none;
diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js
index 37b5a8e..7977bfa 100644
--- a/www/src/layouts/index.js
+++ b/www/src/layouts/index.js
@@ -1,33 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
-import Navigation from '../components/navigation';
require('prismjs/themes/prism-solarizedlight.css');
import './index.css';
const TemplateWrapper = ({children}) =>
-
;
TemplateWrapper.propTypes = {
diff --git a/www/src/pages/index.js b/www/src/pages/index.js
index 4971ec9..07c1711 100644
--- a/www/src/pages/index.js
+++ b/www/src/pages/index.js
@@ -1,12 +1,174 @@
import React from 'react';
import Link from 'gatsby-link';
+import logo from '../images/logo_icon.svg';
+import Footer from '../components/footer';
+import Carbon from '../components/carbon';
+
+const codeStyle = {
+ backgroundColor: '#7cb342',
+ textShadow: '0 1px 0 rgba(23, 31, 35, 0.5)',
+ color: '#fff',
+ padding: '8px 16px',
+ borderRadius: '3px',
+ width: '100%',
+ whiteSpace: 'pre-wrap'
+};
+
+const linkStyle = {
+ padding: '4px 8px',
+ margin: '10px',
+ border: '2px solid #fff',
+ color: '#fff'
+};
const IndexPage = () =>
-
;
export default IndexPage;
diff --git a/www/src/templates/docs.js b/www/src/templates/docs.js
index d1d35b4..f373fa5 100644
--- a/www/src/templates/docs.js
+++ b/www/src/templates/docs.js
@@ -3,7 +3,9 @@ import Link from 'gatsby-link';
import back from '../images/ic_arrow_back_black_24px.svg';
import next from '../images/ic_arrow_forward_black_24px.svg';
import Carbon from '../components/carbon';
+import Footer from '../components/footer';
import Helmet from 'react-helmet';
+import Navigation from '../components/navigation';
export default ({data}) => {
const post = data.markdownRemark;
@@ -14,132 +16,146 @@ export default ({data}) => {
title={`${post.frontmatter.title} - html2canvas`}
meta={[{name: 'description', content: post.frontmatter.description}]}
/>
+ Hi people
-Welcome to your new Gatsby site.
-Now go build something great.
- Go to page 2 +
+
+
+
+
+
+
+ html2canvas
++ Screenshots with JavaScript +
+ +
+
+
+
+
+ HTML
+
+
`
+ }}
+ />
+ <div id="capture" style="padding: 10px; background: #f5da55">
+ <h4 style="color: #000; ">Hello world!</h4>
+</div>
+
+
+ JavaScript
+
+
`
+ }}
+ />
+ html2canvas(document.querySelector("#capture")).then(canvas => {
+ document.body.appendChild(canvas)
+});
+
+
+ Try it out
+
+
+ Documentation
+
+
+
+
+
+
+
+
+
+ Install NPM
+npm install --save html2canvas
+ Install Yarn
+yarn add html2canvas
+
+
-
-
-
-
-
-
-
- - {post.frontmatter.title} -
-- {post.frontmatter.description} -
-
-
- {(post.frontmatter.previousUrl && post.frontmatter.previousTitle) ||
- (post.frontmatter.nextUrl && post.frontmatter.nextTitle)
- ?
-
);
};
+
+
+
+
+
+
+
+ + {post.frontmatter.title} +
++ {post.frontmatter.description} +
+
+
+
+ {(post.frontmatter.previousUrl && post.frontmatter.previousTitle) ||
+ (post.frontmatter.nextUrl && post.frontmatter.nextTitle)
+ ?
- {post.frontmatter.previousUrl && post.frontmatter.previousTitle
- ?
-
- 
-
-
-
- Previous
-
-
- : null}
+ : null}
+
+
- {post.frontmatter.previousTitle}
+
-
+ {post.frontmatter.previousUrl && post.frontmatter.previousTitle
+ ?
+
-
- : null}
- {post.frontmatter.nextUrl && post.frontmatter.nextTitle
- ?
-
+
-
-
- Next
-
-
- {post.frontmatter.nextTitle}
+
-
+
+ Previous
+
+
+
+ : null}
+ {post.frontmatter.nextUrl && post.frontmatter.nextTitle
+ ?
+
+ {post.frontmatter.previousTitle}
+
+
+
+ Next
+
+
-
+ {post.frontmatter.nextTitle}
+
- 
-
-
- : null}
+
+
+
+
+ : null}
+