You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
carbon/pages/about.js

87 lines
2.8 KiB
JavaScript

import Page from '../components/Page'
import { COLORS } from '../lib/constants'
export default () => (
<Page>
<div className="about">
<div className="mb4">
<h2>What does this do?</h2>
7 years ago
<p>
You know all of those code screenshots you see on Twitter? Although the code&apos;s
usually impressive, we saw room for improvement in the aesthetic department. Carbon is the
easiest way to create beautiful images of your source code. So what are you waiting for?
Go impress all of your followers with your newfound design prowess.{' '}
<span role="img" aria-label="Palette">
🎨
</span>
7 years ago
</p>
</div>
<div className="mb4">
<h2>How do I use it?</h2>
<h4 className="mb0">Import</h4>
<p className="mb1 mt2">There are a few different ways to import code into Carbon:</p>
<ul className="mt0 mb3">
<li>Drop a file into the editor</li>
7 years ago
<li>
Append a GitHub gist id to the url (
<a className="link" href="/0db00e81d5416c339181e59481c74b59">
7 years ago
example
</a>
)
7 years ago
</li>
<li>Paste your code directly</li>
</ul>
<h4 className="mb0">Customization</h4>
7 years ago
<p className="mt2 mb3">
Once you&apos;ve got all of your code into Carbon, you can customize your image by
changing the syntax theme, background color/image, window theme, or padding.
</p>
<p className="mt2 mb3">
You can even drop an image file onto the editor to set the background to that image. Give
it a try!
7 years ago
</p>
<h4 className="mb0">Export/Sharing</h4>
<p className="mt2 mb3">
After you&apos;ve customized your image you can Tweet a link to the image, or save it
directly.
7 years ago
</p>
<p className="mt2 mb3">
If you use the &apos;Tweet&apos; button, Carbon will automatically make your image
accessible. However, if you want to manually tweet your carbon image, please check
out <a className="link" href="https://help.twitter.com/en/using-twitter/picture-descriptions">this page</a>
{' '}to found out how to make your Twitter images accessible.
</p>
</div>
<div>
<h2>I want to make this better.</h2>
7 years ago
<p>
7 years ago
<a className="link" href="https://github.com/dawnlabs/carbon">
Please do.
</a>
7 years ago
</p>
</div>
</div>
<style jsx>
{`
p,
li {
color: ${COLORS.GRAY};
}
span {
color: #fff;
}
ul {
list-style-position: inside;
list-style-type: circle;
}
.about {
max-width: 632px;
}
`}
</style>
</Page>
)