mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
Update wip website
This commit is contained in:
MoyuScript
20
www/src/components/footer.js
Normal file
20
www/src/components/footer.js
Normal file
@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
export default () =>
|
||||
<footer
|
||||
css={{
|
||||
backgroundColor: '#558b2f',
|
||||
color: 'rgba(255,255,255,0.8)',
|
||||
fontWeight: 300,
|
||||
minHeight: '50px',
|
||||
lineHeight: '50px',
|
||||
padding: '10px 0px'
|
||||
}}
|
||||
>
|
||||
<div css={{margin: '0 auto', width: '85%'}}>
|
||||
Created by{' '}
|
||||
<a href="https://hertzen.com" css={{color: '#fff', fontWeight: 'bold'}}>
|
||||
Niklas von Hertzen
|
||||
</a>. Licensed under the MIT License.
|
||||
</div>
|
||||
</footer>;
|
||||
@ -28,7 +28,7 @@ const navStyle = {
|
||||
};
|
||||
|
||||
const links = [
|
||||
{href: '/about', text: 'About'},
|
||||
{href: '/documentation', text: 'About'},
|
||||
{href: '/getting-started', text: 'Getting started'},
|
||||
{href: '/configuration', text: 'Configuration'},
|
||||
{href: '/features', text: 'Features'},
|
||||
@ -38,9 +38,9 @@ const links = [
|
||||
|
||||
export default () =>
|
||||
<div css={navStyle}>
|
||||
<div css={{background: '#558b2f'}}>
|
||||
<img src={logo} css={{margin: 0, padding: '24px 30px 24px'}} />
|
||||
</div>
|
||||
<Link to="/" css={{background: '#558b2f', display: 'block', padding: '24px 30px 24px'}}>
|
||||
<img src={logo} css={{margin: 0}} />
|
||||
</Link>
|
||||
<ul
|
||||
style={{
|
||||
listStyle: 'none',
|
||||
|
||||
13
www/src/images/logo_icon.svg
Normal file
13
www/src/images/logo_icon.svg
Normal file
@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Proposal---Sukhumvit-Set" fill="#FFFFFF">
|
||||
<g id="Group-2" transform="translate(0.000000, 3.000000)">
|
||||
<g id="Group" fill-rule="nonzero">
|
||||
<path d="M4,12 L4,46 L37.0232558,46 L37.0232558,12 L4,12 Z M2,8 L39.0232558,8 C40.1278253,8 41.0232558,8.8954305 41.0232558,10 L41.0232558,48 C41.0232558,49.1045695 40.1278253,50 39.0232558,50 L2,50 C0.8954305,50 1.3527075e-16,49.1045695 -1.23259516e-31,48 L-2.22044605e-16,10 C-3.57315355e-16,8.8954305 0.8954305,8 2,8 Z" id="Rectangle"></path>
|
||||
<path d="M12,4 L12,38 L46,38 L46,4 L12,4 Z M10,0 L48,0 C49.1045695,-2.02906125e-16 50,0.8954305 50,2 L50,40 C50,41.1045695 49.1045695,42 48,42 L10,42 C8.8954305,42 8,41.1045695 8,40 L8,2 C8,0.8954305 8.8954305,2.02906125e-16 10,0 Z" id="Rectangle-Copy"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -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;
|
||||
|
||||
@ -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}) =>
|
||||
<div>
|
||||
<Helmet title="html2canvas" />
|
||||
<Navigation />
|
||||
<Helmet title="html2canvas - Screenshots with JavaScript" />
|
||||
{children()}
|
||||
<footer
|
||||
css={{
|
||||
marginLeft: '300px',
|
||||
backgroundColor: '#558b2f',
|
||||
color: 'rgba(255,255,255,0.8)',
|
||||
fontWeight: 300,
|
||||
minHeight: '50px',
|
||||
lineHeight: '50px',
|
||||
padding: '10px 0px'
|
||||
}}
|
||||
>
|
||||
<div css={{margin: '0 auto', width: '85%'}}>
|
||||
Created by{' '}
|
||||
<a href="https://hertzen.com" css={{color: '#fff', fontWeight: 'bold'}}>
|
||||
Niklas von Hertzen
|
||||
</a>. Licensed under the MIT License.
|
||||
</div>
|
||||
</footer>
|
||||
</div>;
|
||||
|
||||
TemplateWrapper.propTypes = {
|
||||
|
||||
@ -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 = () =>
|
||||
<div>
|
||||
<h1>Hi people</h1>
|
||||
<p>Welcome to your new Gatsby site.</p>
|
||||
<p>Now go build something great.</p>
|
||||
<Link to="/page-2/">Go to page 2</Link>
|
||||
<div
|
||||
css={{
|
||||
background: '#558b2f',
|
||||
backgroundImage: 'linear-gradient(0deg, #558b2f, #7cb342)',
|
||||
height: '100vh',
|
||||
display: 'flex'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
css={{
|
||||
maxWidth: 960,
|
||||
color: '#fff',
|
||||
margin: '0 auto',
|
||||
textAlign: 'center',
|
||||
alignSelf: 'center'
|
||||
}}
|
||||
>
|
||||
<div css={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
|
||||
<img src={logo} />
|
||||
<h1>html2canvas</h1>
|
||||
</div>
|
||||
<h4 css={{color: 'rgba(255, 255, 255, 0.6)', fontWeight: 300}}>
|
||||
Screenshots with JavaScript
|
||||
</h4>
|
||||
|
||||
<div css={{display: 'flex', justifyContent: 'center'}}>
|
||||
<div>
|
||||
<h4>HTML</h4>
|
||||
<div
|
||||
css={{marginRight: '5px'}}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `<div class="gatsby-highlight">
|
||||
<pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>capture<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #f5da55</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> </span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hello world!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code></pre>
|
||||
</div>`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4>JavaScript</h4>
|
||||
<div
|
||||
css={{marginLeft: '5px'}}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `<div class="gatsby-highlight">
|
||||
<pre class="language-javascript"><code><span class="token function">html2canvas</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#capture"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>canvas <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>canvas<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
</div>`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div css={{margin: '20px'}}>
|
||||
<Link
|
||||
css={linkStyle}
|
||||
>
|
||||
Try it out
|
||||
</Link>
|
||||
<Link
|
||||
to={'/documentation'}
|
||||
css={linkStyle}
|
||||
>
|
||||
Documentation
|
||||
</Link>
|
||||
</div>
|
||||
<div css={{display: 'flex'}}>
|
||||
<div
|
||||
css={{
|
||||
flex: 1,
|
||||
backgroundColor: '#558b2f',
|
||||
padding: '10px 20px',
|
||||
borderRadius: '10px',
|
||||
marginRight: '5px'
|
||||
}}
|
||||
>
|
||||
<Carbon />
|
||||
</div>
|
||||
<div
|
||||
css={{
|
||||
flex: 1,
|
||||
marginLeft: '5px',
|
||||
backgroundColor: '#558b2f',
|
||||
padding: '10px 20px',
|
||||
borderRadius: '10px',
|
||||
textAlign: 'left',
|
||||
marginRight: '5px'
|
||||
}}
|
||||
>
|
||||
<h6>Install NPM</h6>
|
||||
<code css={codeStyle}>npm install --save html2canvas</code>
|
||||
<h6>Install Yarn</h6>
|
||||
<code css={codeStyle}>yarn add html2canvas</code>
|
||||
<div css={{marginTop: '25px'}}>
|
||||
<a
|
||||
href={'/dist/html2canvas.js'}
|
||||
css={linkStyle}
|
||||
>
|
||||
html2canvas.js
|
||||
</a>
|
||||
<a
|
||||
href={'/dist/html2canvas.min.js'}
|
||||
css={linkStyle}
|
||||
>
|
||||
html2canvas.min.js
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
css={{
|
||||
flex: 1,
|
||||
marginLeft: '5px',
|
||||
backgroundColor: '#558b2f',
|
||||
padding: '10px 20px',
|
||||
borderRadius: '10px',
|
||||
textAlign: 'left'
|
||||
}}
|
||||
>
|
||||
<h5>Connect</h5>
|
||||
<div css={{height: '35px'}}>
|
||||
<iframe
|
||||
src="https://ghbtns.com/github-btn.html?user=niklasvh&repo=html2canvas&type=star&count=true&size=large"
|
||||
frameBorder="0"
|
||||
scrolling="0"
|
||||
width="160px"
|
||||
height="30px"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
className="twitter-follow-button"
|
||||
href="https://twitter.com/niklasvh"
|
||||
data-show-screen-name="false"
|
||||
data-size="large"
|
||||
>
|
||||
Follow @niklasvh
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>;
|
||||
|
||||
export default IndexPage;
|
||||
|
||||
@ -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}]}
|
||||
/>
|
||||
<Navigation />
|
||||
<div
|
||||
style={{
|
||||
css={{
|
||||
marginLeft: '300px',
|
||||
background: '#7cb342',
|
||||
marginBottom: '1.45rem',
|
||||
color: '#fff',
|
||||
paddingTop: '1rem',
|
||||
paddingBottom: '1rem'
|
||||
}}
|
||||
>
|
||||
<div css={{maxWidth: '960px'}}>
|
||||
<div css={{width: '85%', margin: '0 auto', display: 'flex'}}>
|
||||
<div css={{flex: 1}}>
|
||||
<h1 css={{padding: '20px 0'}}>
|
||||
{post.frontmatter.title}
|
||||
</h1>
|
||||
<h4 css={{fontWeight: 300, color: 'rgba(255, 255, 255, 0.6)'}}>
|
||||
{post.frontmatter.description}
|
||||
</h4>
|
||||
</div>
|
||||
<Carbon css={{width: '150px', marginLeft: '20px'}} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
margin: '0 auto',
|
||||
maxWidth: 960,
|
||||
marginLeft: '300px',
|
||||
paddingTop: 0
|
||||
display: 'flex',
|
||||
minHeight: '100vh',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
css={{width: '85%', margin: '0 auto'}}
|
||||
dangerouslySetInnerHTML={{__html: post.html}}
|
||||
/>
|
||||
</div>
|
||||
{(post.frontmatter.previousUrl && post.frontmatter.previousTitle) ||
|
||||
(post.frontmatter.nextUrl && post.frontmatter.nextTitle)
|
||||
? <div
|
||||
css={{
|
||||
marginLeft: '300px',
|
||||
backgroundColor: '#7cb342',
|
||||
marginTop: '30px'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: '#7cb342',
|
||||
marginBottom: '1.45rem',
|
||||
color: '#fff',
|
||||
paddingTop: '1rem',
|
||||
paddingBottom: '1rem'
|
||||
}}
|
||||
>
|
||||
<div css={{maxWidth: '960px'}}>
|
||||
<div css={{width: '85%', margin: '0 auto', display: 'flex'}}>
|
||||
<div css={{flex: 1}}>
|
||||
<h1 css={{padding: '20px 0'}}>
|
||||
{post.frontmatter.title}
|
||||
</h1>
|
||||
<h4 css={{fontWeight: 300, color: 'rgba(255, 255, 255, 0.6)'}}>
|
||||
{post.frontmatter.description}
|
||||
</h4>
|
||||
</div>
|
||||
<Carbon css={{width: '150px', marginLeft: '20px'}} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
maxWidth: 960,
|
||||
paddingTop: 0,
|
||||
flexGrow: 1
|
||||
}}
|
||||
>
|
||||
<div
|
||||
css={{width: '85%', margin: '0 auto'}}
|
||||
dangerouslySetInnerHTML={{__html: post.html}}
|
||||
/>
|
||||
</div>
|
||||
{(post.frontmatter.previousUrl && post.frontmatter.previousTitle) ||
|
||||
(post.frontmatter.nextUrl && post.frontmatter.nextTitle)
|
||||
? <div
|
||||
css={{
|
||||
width: '85%',
|
||||
display: 'flex',
|
||||
margin: '0 auto',
|
||||
alignItems: 'center',
|
||||
height: '96px'
|
||||
backgroundColor: '#7cb342',
|
||||
marginTop: '30px'
|
||||
}}
|
||||
>
|
||||
{post.frontmatter.previousUrl && post.frontmatter.previousTitle
|
||||
? <Link
|
||||
to={post.frontmatter.previousUrl}
|
||||
css={{
|
||||
flex: 1,
|
||||
color: '#fff',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end'
|
||||
}}
|
||||
>
|
||||
<div css={{height: '24px'}}>
|
||||
<img src={back} />
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
css={{
|
||||
display: 'block',
|
||||
color: 'rgba(255,255,255,.55)',
|
||||
fontSize: '15px',
|
||||
lineHeight: '18px',
|
||||
marginBottom: '1px'
|
||||
}}
|
||||
>
|
||||
Previous
|
||||
</span>
|
||||
<div
|
||||
css={{color: 'rgba(255,255,255,.87)', fontSize: '20px'}}
|
||||
>
|
||||
{post.frontmatter.previousTitle}
|
||||
<div
|
||||
css={{
|
||||
width: '85%',
|
||||
display: 'flex',
|
||||
margin: '0 auto',
|
||||
alignItems: 'center',
|
||||
height: '96px'
|
||||
}}
|
||||
>
|
||||
{post.frontmatter.previousUrl && post.frontmatter.previousTitle
|
||||
? <Link
|
||||
to={post.frontmatter.previousUrl}
|
||||
css={{
|
||||
flex: 1,
|
||||
color: '#fff',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end'
|
||||
}}
|
||||
>
|
||||
<div css={{height: '24px'}}>
|
||||
<img src={back} />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
: null}
|
||||
{post.frontmatter.nextUrl && post.frontmatter.nextTitle
|
||||
? <Link
|
||||
to={post.frontmatter.nextUrl}
|
||||
css={{
|
||||
flex: 1,
|
||||
color: '#fff',
|
||||
justifyContent: 'flex-end',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end'
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
css={{
|
||||
display: 'block',
|
||||
color: 'rgba(255,255,255,.55)',
|
||||
fontSize: '15px',
|
||||
lineHeight: '18px',
|
||||
marginBottom: '1px'
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</span>
|
||||
<div
|
||||
css={{color: 'rgba(255,255,255,.87)', fontSize: '20px'}}
|
||||
>
|
||||
{post.frontmatter.nextTitle}
|
||||
<div>
|
||||
<span
|
||||
css={{
|
||||
display: 'block',
|
||||
color: 'rgba(255,255,255,.55)',
|
||||
fontSize: '15px',
|
||||
lineHeight: '18px',
|
||||
marginBottom: '1px'
|
||||
}}
|
||||
>
|
||||
Previous
|
||||
</span>
|
||||
<div
|
||||
css={{
|
||||
color: 'rgba(255,255,255,.87)',
|
||||
fontSize: '20px'
|
||||
}}
|
||||
>
|
||||
{post.frontmatter.previousTitle}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
: null}
|
||||
{post.frontmatter.nextUrl && post.frontmatter.nextTitle
|
||||
? <Link
|
||||
to={post.frontmatter.nextUrl}
|
||||
css={{
|
||||
flex: 1,
|
||||
color: '#fff',
|
||||
justifyContent: 'flex-end',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end'
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
css={{
|
||||
display: 'block',
|
||||
color: 'rgba(255,255,255,.55)',
|
||||
fontSize: '15px',
|
||||
lineHeight: '18px',
|
||||
marginBottom: '1px'
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</span>
|
||||
<div
|
||||
css={{
|
||||
color: 'rgba(255,255,255,.87)',
|
||||
fontSize: '20px'
|
||||
}}
|
||||
>
|
||||
{post.frontmatter.nextTitle}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div css={{height: '24px'}}>
|
||||
<img src={next} />
|
||||
</div>
|
||||
</Link>
|
||||
: null}
|
||||
<div css={{height: '24px'}}>
|
||||
<img src={next} />
|
||||
</div>
|
||||
</Link>
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
: null}
|
||||
: null}
|
||||
<Footer css={{marginLeft: '300px'}} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user