├── release.js ├── lib ├── custom │ └── modes │ │ ├── graphql.js │ │ ├── elixir.js │ │ └── apache.js ├── highlight-languages.js ├── client.js ├── util.js ├── api.js └── routing.js ├── .npmrc ├── cypress ├── util.js ├── config.json ├── support │ └── index.js ├── plugins │ └── index.js └── integration │ ├── embed.spec.js │ ├── gist.spec.js │ ├── localStorage.spec.js │ ├── security.spec.js │ ├── background-color.spec.js │ ├── basic.spec.js │ └── visual-testing.spec.js ├── public ├── favicon.ico ├── static │ ├── presets │ │ ├── 0.png │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.png │ │ └── 9.png │ ├── brand │ │ ├── banner.png │ │ ├── icon.png │ │ ├── desktop.png │ │ ├── logo-banner.png │ │ ├── logo-square.png │ │ ├── social-banner.png │ │ ├── apple-touch-icon.png │ │ └── logo-banner-transparent.png │ ├── svg │ │ ├── person.svg │ │ ├── snippets.svg │ │ └── github.svg │ ├── themes │ │ ├── verminal.min.css │ │ ├── nord.min.css │ │ ├── one-light.min.css │ │ ├── night-owl.min.css │ │ ├── one-dark.min.css │ │ └── synthwave-84.min.css │ └── react-crop.css ├── robots.txt └── manifest.json ├── .vercelignore ├── .prettierrc ├── SECURITY.md ├── .gitignore ├── components ├── ApiContext.js ├── FontFace.js ├── svg │ ├── Remove.js │ ├── Arrows.js │ ├── Checkmark.js │ ├── Copy.js │ ├── Controls.js │ ├── Theme.js │ ├── Settings.js │ ├── Language.js │ └── WindowThemes.js ├── ConfirmButton.js ├── ReferralLink.js ├── WindowPointer.js ├── PhotoCredit.js ├── Overlay.js ├── Toolbar.js ├── AuthContext.js ├── Header.js ├── MenuButton.js ├── Spinner.js ├── Input.js ├── Page.js ├── ColorPicker.js ├── FontSelect.js ├── Button.js ├── Toggle.js ├── hooks.js ├── Footer.js ├── Popout.js ├── WidthHandler.js ├── Slider.js ├── ShareMenu.js ├── ThemeSelect.js ├── Announcement.js ├── style │ ├── Typography.js │ ├── Font.js │ └── Reset.js ├── Themes │ ├── GlobalHighlights.js │ └── index.js ├── RandomImage.js ├── EditorContainer.js ├── Toasts.js ├── LoginButton.js ├── ListSetting.js ├── WindowControls.js ├── Meta.js ├── SelectionEditor.js ├── SnippetToolbar.js ├── CopyMenu.js ├── BackgroundSelect.js └── ExportMenu.js ├── .github ├── PULL_REQUEST_TEMPLATE.md ├── dependabot.yml ├── ISSUE_TEMPLATE │ ├── other.md │ ├── feature_request.md │ └── bug_report.md ├── workflows │ └── validate.yml ├── FUNDING.yml ├── ranger.yml ├── CONTRIBUTING.md └── CODE_OF_CONDUCT.md ├── vercel.json ├── bin └── deploy.sh ├── pages ├── _document.js ├── [id].js ├── embed │ ├── [id].js │ └── index.js ├── index.js └── api │ ├── oembed.js │ └── image │ └── [id].js ├── .eslintrc.js ├── LICENSE ├── next.config.js └── package.json /release.js: -------------------------------------------------------------------------------- 1 | module.exports = require('now-release') 2 | -------------------------------------------------------------------------------- /lib/custom/modes/graphql.js: -------------------------------------------------------------------------------- 1 | import 'codemirror-graphql/mode' 2 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | registry=https://registry.npmjs.org 3 | -------------------------------------------------------------------------------- /cypress/util.js: -------------------------------------------------------------------------------- 1 | export const environment = { width: 1000, height: 768, name: 'chrome' } 2 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/static/presets/0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/static/presets/0.png -------------------------------------------------------------------------------- /public/static/presets/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/static/presets/1.png -------------------------------------------------------------------------------- /public/static/presets/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/static/presets/2.png -------------------------------------------------------------------------------- /public/static/presets/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/static/presets/3.png -------------------------------------------------------------------------------- /public/static/presets/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/static/presets/4.png -------------------------------------------------------------------------------- /public/static/presets/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/static/presets/5.png -------------------------------------------------------------------------------- /public/static/presets/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/static/presets/6.png -------------------------------------------------------------------------------- /public/static/presets/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/static/presets/7.png -------------------------------------------------------------------------------- /public/static/presets/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/static/presets/8.png -------------------------------------------------------------------------------- /public/static/presets/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/static/presets/9.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: Twitterbot 2 | Allow: /* 3 | 4 | User-agent: * 5 | Disallow: /*?* 6 | Allow: /* -------------------------------------------------------------------------------- /public/static/brand/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/static/brand/banner.png -------------------------------------------------------------------------------- /public/static/brand/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/static/brand/icon.png -------------------------------------------------------------------------------- /.vercelignore: -------------------------------------------------------------------------------- 1 | .github 2 | LICENSE 3 | README.md 4 | bin 5 | node_modules 6 | cypress 7 | cypress.json 8 | docs 9 | -------------------------------------------------------------------------------- /public/static/brand/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/static/brand/desktop.png -------------------------------------------------------------------------------- /public/static/brand/logo-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/static/brand/logo-banner.png -------------------------------------------------------------------------------- /public/static/brand/logo-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/static/brand/logo-square.png -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "printWidth": 100, 4 | "semi": false, 5 | "arrowParens": "avoid" 6 | } 7 | -------------------------------------------------------------------------------- /cypress/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "baseUrl": "https://carbon.now.sh/", 3 | "projectId": "p2tbx4", 4 | "video": false 5 | } 6 | -------------------------------------------------------------------------------- /public/static/brand/social-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/static/brand/social-banner.png -------------------------------------------------------------------------------- /public/static/brand/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/static/brand/apple-touch-icon.png -------------------------------------------------------------------------------- /lib/custom/modes/elixir.js: -------------------------------------------------------------------------------- 1 | // Require Codemirror elixir mode from npm modules and register it here 2 | import 'codemirror-mode-elixir' 3 | -------------------------------------------------------------------------------- /public/static/brand/logo-banner-transparent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-app/carbon/HEAD/public/static/brand/logo-banner-transparent.png -------------------------------------------------------------------------------- /cypress/support/index.js: -------------------------------------------------------------------------------- 1 | /* global cy */ 2 | // import '@applitools/eyes-cypress/commands' 3 | export const editorVisible = () => cy.get('.editor').should('be.visible') 4 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | Please contact us at [carbon.now.sh+security@gmail.com](mailto:carbon.now.sh+security@gmail.com) to privately inform us of any security vulnerability or issue. 4 | -------------------------------------------------------------------------------- /lib/highlight-languages.js: -------------------------------------------------------------------------------- 1 | import { LANGUAGES } from './constants' 2 | 3 | export default LANGUAGES.filter(l => l.highlight) 4 | .map(l => l.short || l.mode) 5 | .map(lang => [lang, require(`highlight.js/lib/languages/${lang}`)]) 6 | -------------------------------------------------------------------------------- /cypress/plugins/index.js: -------------------------------------------------------------------------------- 1 | module.exports = (/* on, config */) => { 2 | // `on` is used to hook into various events Cypress emits 3 | // `config` is the resolved Cypress config 4 | } 5 | 6 | require('@applitools/eyes-cypress')(module) 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env* 3 | .next 4 | dist 5 | out 6 | cypress/videos 7 | cypress/screenshots 8 | .idea 9 | .DS_Store 10 | packaged 11 | coverage 12 | public/service-worker.js 13 | private-key.json 14 | .now 15 | .vercel 16 | *.log -------------------------------------------------------------------------------- /components/ApiContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import api from '../lib/api' 3 | 4 | const Context = React.createContext(api) 5 | 6 | export function useAPI() { 7 | return React.useContext(Context) 8 | } 9 | 10 | export default Context 11 | -------------------------------------------------------------------------------- /public/static/svg/person.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/svg/snippets.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 7 | 8 | - [ ] Integration tests (if applicable) 9 | 10 | Closes # 11 | -------------------------------------------------------------------------------- /cypress/integration/embed.spec.js: -------------------------------------------------------------------------------- 1 | /* global cy */ 2 | describe('Embed', () => { 3 | it('Should render the Carbon editor but no toolbar', () => { 4 | cy.visit('/embed') 5 | 6 | cy.get('.export-container').should('be.visible') 7 | cy.get('.export-menu-container').should('not.exist') 8 | }) 9 | }) 10 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "alias": "carbon.now.sh", 3 | "version": 2, 4 | "public": true, 5 | "github": { 6 | "autoAlias": false 7 | }, 8 | "functions": { 9 | "pages/api/image/**/*.js": { 10 | "maxDuration": 10 11 | }, 12 | "pages/api/snippets/**/*.js": { 13 | "maxDuration": 5 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /bin/deploy.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | set -e 3 | 4 | vercel switch carbon-app 5 | 6 | VERCEL_URL=$(vercel) 7 | 8 | yarn cy:run --config baseUrl="$VERCEL_URL" 9 | 10 | echo "$VERCEL_URL"| tee /dev/tty | pbcopy 11 | 12 | read -p "Deploy to production (y/N)?" -r 13 | echo 14 | if [[ $REPLY =~ ^[Yy]$ ]] 15 | then 16 | vercel alias "$VERCEL_URL" carbon.now.sh 17 | fi -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Document, { Html, Head, Main, NextScript } from 'next/document' 3 | 4 | export default class Doc extends Document { 5 | render() { 6 | return ( 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | ) 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /components/FontFace.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function FontFace(config) { 4 | return ( 5 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | # Configuration for npm 4 | - package-ecosystem: 'npm' 5 | directory: '/' 6 | schedule: 7 | interval: 'daily' 8 | allow: 9 | dependency-type: 'development' 10 | # labels: 11 | # - 'dependencies' 12 | # ignore: 13 | # https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/configuration-options-for-dependency-update 14 | -------------------------------------------------------------------------------- /components/svg/Remove.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function Remove({ color = 'black', style }) { 4 | return ( 5 | 13 | 17 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /components/ConfirmButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Button from './Button' 3 | 4 | export default function ConfirmButton(props) { 5 | const [confirmed, setConfirmed] = React.useState(false) 6 | return ( 7 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Carbon", 3 | "short_name": "Carbon", 4 | "background_color": "#121212", 5 | "theme_color": "#121212", 6 | "description": "Carbon is the easiest way to create and share beautiful images of your source code.", 7 | "display": "standalone", 8 | "start_url": "/", 9 | "icons": [ 10 | { 11 | "src": "/static/brand/icon.png", 12 | "type": "image/png", 13 | "sizes": "448x448", 14 | "purpose": "any maskable" 15 | }, 16 | { 17 | "src": "/static/brand/desktop.png", 18 | "type": "image/png", 19 | "sizes": "512x512" 20 | } 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/other.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Other 3 | about: Let us know about something else 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the change** 11 | A clear and concise description of your proposal. 12 | 13 | **Screenshots** 14 | If applicable, add screenshots to help explain the issue. 15 | 16 | **Info (please complete the following information):** 17 | 18 | - OS [e.g. macOS, Linux, Windows, iOS]: 19 | - Browser [e.g. Chrome, Safari, Firefox]: 20 | 21 |
22 | Code snippet 23 | 
24 |   
25 |
26 |
27 | -------------------------------------------------------------------------------- /.github/workflows/validate.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v3 10 | - name: Use Node.js 11 | uses: actions/setup-node@v3 12 | - name: npm install, lint, build, and test 13 | run: | 14 | yarn 15 | npm run lint --if-present 16 | npm run build --if-present 17 | npm start & npx wait-on http://localhost:3000 && npm run cy:run -- --config baseUrl=http://localhost:3000 18 | # --record --key 26c0b9eb-40f9-4ca6-b91d-a39f03652011 19 | env: 20 | CI: true 21 | CYPRESS_CI: true 22 | -------------------------------------------------------------------------------- /components/ReferralLink.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { COLORS } from '../lib/constants' 4 | 5 | export default function ReferralLink(props) { 6 | return ( 7 | 8 | {props.children} 9 | 23 | 24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [carbon-app, mfix22] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 2 | open_collective: # carbon-app/contribute 3 | patreon: # Replace with a single Patreon username 4 | ko_fi: # Replace with a single Ko-fi username 5 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 6 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 7 | liberapay: # Replace with a single Liberapay username 8 | issuehunt: # Replace with a single IssueHunt username 9 | otechie: # Replace with a single Otechie username 10 | custom: [] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: enhancement 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /components/svg/Arrows.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Up = ({ color = 'white' }) => ( 4 | 5 | 6 | 7 | ) 8 | 9 | const Down = ({ color = 'white' }) => ( 10 | 11 | 12 | 13 | ) 14 | 15 | const Right = ({ color = 'white' }) => ( 16 | 17 | 18 | 19 | ) 20 | 21 | export { Up, Down, Right } 22 | -------------------------------------------------------------------------------- /components/WindowPointer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function WindowPointer({ fromLeft, fromRight, color = '#fff' }) { 4 | return ( 5 |
6 |
7 | 22 |
23 | ) 24 | } 25 | -------------------------------------------------------------------------------- /cypress/integration/gist.spec.js: -------------------------------------------------------------------------------- 1 | /* global cy Cypress */ 2 | import { editorVisible } from '../support' 3 | 4 | describe('Gist', () => { 5 | const test = Cypress.env('CI') ? it.skip : it 6 | 7 | test('Should pull text from the first Gist file', () => { 8 | cy.visit('/3208813b324d82a9ebd197e4b1c3bae8') 9 | editorVisible() 10 | 11 | cy.contains('Y-Combinator implemented in JavaScript') 12 | cy.get('#downshift-input-JavaScript').should('have.value', 'JavaScript') 13 | }) 14 | 15 | const pages = ['/', '/embed/', '/82d742f4efad9757cc826d20f2a5e5af'] 16 | 17 | pages.forEach(page => { 18 | test(`${page} should not contain a query string in the url`, () => { 19 | cy.visit(page) 20 | 21 | cy.url().should('not.contain', '?') 22 | }) 23 | }) 24 | }) 25 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { es6: true, jest: true }, 3 | extends: ['eslint:recommended', 'plugin:jsx-a11y/recommended', 'next'], 4 | rules: { 5 | 'import/no-unresolved': 'error', 6 | 'no-duplicate-imports': 'error', 7 | 'react/display-name': 'off', 8 | 'react/jsx-no-target-blank': 'error', 9 | 'react/jsx-uses-react': 'error', 10 | 'react/jsx-uses-vars': 'error', 11 | 'jsx-a11y/click-events-have-key-events': 'off', 12 | 'react-hooks/rules-of-hooks': 'error', 13 | 'react-hooks/exhaustive-deps': 'error', 14 | 'no-console': ['error', { allow: ['error'] }], 15 | // TODO re-enable these 16 | '@next/next/no-img-element': 'off', 17 | '@next/next/no-html-link-for-pages': 'off', 18 | '@next/next/link-passhref': 'off', 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /components/PhotoCredit.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function PhotoCredit({ photographer }) { 4 | return ( 5 |
6 | Photo by{' '} 7 | 8 | {photographer.name} 9 | 10 | 27 |
28 | ) 29 | } 30 | -------------------------------------------------------------------------------- /components/Overlay.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Overlay = props => ( 4 |
5 | {props.isOver ?
{props.title}
: null} 6 | {props.children} 7 | 28 |
29 | ) 30 | 31 | export default Overlay 32 | -------------------------------------------------------------------------------- /public/static/svg/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help fix something about Carbon 4 | title: '' 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 16 | 1. Go to '…' 17 | 2. Click on '…' 18 | 3. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Info (please complete the following information):** 27 | 28 | - OS [e.g. macOS, Linux, Windows, iOS]: 29 | - Browser [e.g. Chrome, Safari, Firefox]: 30 | - Carbon URL [e.g. carbon.now.sh?bg=pink]: 31 | 32 | 33 |
34 | Code snippet 35 | 
36 |   
37 |
38 |
39 | -------------------------------------------------------------------------------- /pages/[id].js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Router from 'next/router' 3 | 4 | import IndexPage from './index' 5 | 6 | import api from '../lib/api' 7 | 8 | export async function getServerSideProps({ req, res, query }) { 9 | const { id: path, filename } = query 10 | const parameter = path.length >= 19 && path.indexOf('.') < 0 ? path : null 11 | 12 | let snippet 13 | if (parameter) { 14 | const host = req ? req.headers.host : undefined 15 | snippet = await api.snippet.get(parameter, { host, filename }) 16 | if (snippet) { 17 | return { props: { snippet, host } } 18 | } 19 | 20 | // 404 Not found 21 | if (res) { 22 | res.writeHead(302, { 23 | Location: '/', 24 | }) 25 | res.end() 26 | } else { 27 | Router.push('/') 28 | } 29 | } 30 | 31 | return { props: {} } 32 | } 33 | 34 | export default React.memo(function IdPage(props) { 35 | return 36 | }) 37 | -------------------------------------------------------------------------------- /components/Toolbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Toolbar = props => ( 4 |
5 | {props.children} 6 | 35 |
36 | ) 37 | 38 | export default Toolbar 39 | -------------------------------------------------------------------------------- /pages/embed/[id].js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Router from 'next/router' 3 | 4 | import EmbedPage from './index' 5 | 6 | import api from '../../lib/api' 7 | 8 | export async function getServerSideProps({ req, res, query }) { 9 | const { id: path, filename } = query 10 | 11 | const parameter = path.length >= 19 && path.indexOf('.') < 0 ? path : null 12 | 13 | let snippet 14 | if (parameter) { 15 | const host = req ? req.headers.host : undefined 16 | snippet = await api.snippet.get(parameter, { host, filename }) 17 | if (snippet /* && snippet.gist_id */) { 18 | return { props: { snippet } } 19 | } 20 | 21 | // 404 Not found 22 | if (res) { 23 | res.writeHead(302, { 24 | Location: '/embed', 25 | }) 26 | res.end() 27 | } else { 28 | Router.push('/embed') 29 | } 30 | } 31 | 32 | return { props: {} } 33 | } 34 | 35 | export default React.memo(function EmbedIdPage(props) { 36 | return 37 | }) 38 | -------------------------------------------------------------------------------- /components/AuthContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import firebase from '../lib/client' 3 | // IDEA: just read from firebase store at request time? 4 | import { client } from '../lib/api' 5 | 6 | export const Context = React.createContext(null) 7 | 8 | export function useAuth() { 9 | return React.useContext(Context) 10 | } 11 | 12 | function AuthContext(props) { 13 | const [user, setState] = React.useState(null) 14 | 15 | React.useEffect(() => { 16 | if (firebase) { 17 | firebase.auth().onAuthStateChanged(newUser => setState(newUser)) 18 | } 19 | }, []) 20 | 21 | React.useEffect(() => { 22 | if (user) { 23 | user.getIdToken().then(jwt => { 24 | client.defaults.headers['Authorization'] = jwt ? `Bearer ${jwt}` : undefined 25 | }) 26 | } else { 27 | delete client.defaults.headers['Authorization'] 28 | } 29 | }, [user]) 30 | 31 | return {props.children} 32 | } 33 | 34 | export default AuthContext 35 | -------------------------------------------------------------------------------- /components/svg/Checkmark.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function Checkmark({ width = 18, height = 18, color = '#FFFFFF' }) { 4 | return ( 5 | 12 | 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /.github/ranger.yml: -------------------------------------------------------------------------------- 1 | _extends: reporanger/superpowers 2 | 3 | labels: 4 | dependencies: merge 5 | contributor: 6 | action: comment 7 | delay: 0s 8 | message: '@all-contributors add @$AUTHOR for code' 9 | translator: 10 | action: comment 11 | delay: 0s 12 | message: '@all-contributors add @$AUTHOR for translation' 13 | duplicate: 14 | action: close 15 | delay: 2 days 16 | comment: ⚠️ This has been marked to be closed in $DELAY. 17 | 'theme/language': 18 | action: close 19 | delay: 3 days 20 | comment: | 21 | This issue has been marked "$LABEL". As of Carbon `4.0.0`, the Carbon core team is no longer implementing new themes or languages, except for in extenuating circumstances. You can create your own theme in the "Themes" dropdown. 22 | 23 | This issue will remain open for $DELAY for further consideration. 24 | 25 | commits: 26 | - action: label 27 | pattern: 'upgrade dep' 28 | labels: 29 | - maintenance 30 | - action: label 31 | user: 'allcontributors[bot]' 32 | labels: 33 | - 'squash when passing' 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Carbon 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Logo from './svg/Logo' 3 | 4 | const Header = ({ enableHeroText }) => ( 5 |
6 |
7 | 8 | 9 | 10 | {enableHeroText ? ( 11 |

12 | Create and share beautiful images of your source code. 13 |
14 | Start typing or drop a file into the text area to get started. 15 |

16 | ) : null} 17 |
18 | 45 |
46 | ) 47 | 48 | export default Header 49 | -------------------------------------------------------------------------------- /components/MenuButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Button from './Button' 4 | import { COLORS } from '../lib/constants' 5 | import * as Arrows from './svg/Arrows' 6 | 7 | const MenuButton = React.memo(({ name, select, selected, noArrows }) => { 8 | return ( 9 |
10 | 22 | 43 |
44 | ) 45 | }) 46 | 47 | export default MenuButton 48 | -------------------------------------------------------------------------------- /components/svg/Copy.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const SVG_RATIO = 0.81 4 | 5 | const Copy = ({ size, color }) => { 6 | const width = size * SVG_RATIO 7 | const height = size 8 | 9 | return ( 10 | 17 | 21 | 22 | ) 23 | } 24 | 25 | Copy.defaultProps = { 26 | size: 16, 27 | } 28 | 29 | export default Copy 30 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | // Theirs 2 | import React from 'react' 3 | import { withRouter } from 'next/router' 4 | import Either from 'eitherx' 5 | 6 | // Ours 7 | import EditorContainer from '../components/EditorContainer' 8 | import Page from '../components/Page' 9 | import { MetaLinks } from '../components/Meta' 10 | 11 | class Index extends React.Component { 12 | componentDidMount() { 13 | if (window.workbox && window.workbox.register) { 14 | window.workbox.register() 15 | } 16 | } 17 | componentWillUnmount() { 18 | if ('serviceWorker' in navigator) { 19 | navigator.serviceWorker.ready.then(registration => { 20 | registration.unregister() 21 | }) 22 | } 23 | } 24 | 25 | shouldComponentUpdate = () => false 26 | 27 | render() { 28 | return ( 29 | 30 | 31 | 32 | 33 |

34 | An unexpected error has occurred. Please{' '} 35 | 36 | file an issue here 37 | 38 | . 39 |

40 | 41 | 42 | ) 43 | } 44 | } 45 | 46 | export default withRouter(Index) 47 | -------------------------------------------------------------------------------- /components/Spinner.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export function Spinner({ size = 24 }) { 4 | return ( 5 |
6 |
7 |
8 | 47 |
48 | ) 49 | } 50 | -------------------------------------------------------------------------------- /cypress/integration/localStorage.spec.js: -------------------------------------------------------------------------------- 1 | /* global cy */ 2 | import { editorVisible } from '../support' 3 | 4 | // usually we can visit the page before each test 5 | // but these tests use the url, which means wasted page load 6 | // so instead visit the desired url in each test 7 | 8 | describe('localStorage', () => { 9 | const themeDropdown = () => cy.get('.toolbar .dropdown-container').first() 10 | 11 | const pickTheme = (name = 'Blackboard') => 12 | themeDropdown() 13 | .click() 14 | .contains(name) 15 | .click() 16 | 17 | it.skip('is empty initially', () => { 18 | cy.visit('/') 19 | editorVisible() 20 | cy.window() 21 | .its('localStorage') 22 | .should('have.length', 0) 23 | }) 24 | 25 | it('saves on theme change', () => { 26 | cy.visit('/') 27 | editorVisible() 28 | pickTheme('Blackboard') 29 | themeDropdown() 30 | .click() 31 | .contains('Blackboard') 32 | 33 | cy.wait(1500) // URL updates are debounced 34 | 35 | cy.window() 36 | .its('localStorage.CARBON_STATE') 37 | .then(JSON.parse) 38 | .its('theme') 39 | .should('equal', 'blackboard') 40 | 41 | // visiting page again restores theme from localStorage 42 | cy.visit('/') 43 | pickTheme('Cobalt') 44 | cy.wait(1500) // URL updates are debounced 45 | 46 | cy.url().should('contain', 't=cobalt') 47 | }) 48 | }) 49 | -------------------------------------------------------------------------------- /lib/client.js: -------------------------------------------------------------------------------- 1 | import firebase from 'firebase/app' 2 | import 'firebase/auth' 3 | 4 | if (firebase.apps.length === 0) { 5 | if (process.env.NEXT_PUBLIC_FIREBASE_API_KEY && process.env.NEXT_PUBLIC_FIREBASE_FE_APP_ID) { 6 | firebase.initializeApp({ 7 | apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, 8 | authDomain: `${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.firebaseapp.com`, 9 | databaseURL: `https://${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.firebaseio.com`, 10 | projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, 11 | storageBucket: `${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.appspot.com`, 12 | messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID, 13 | appId: process.env.NEXT_PUBLIC_FIREBASE_FE_APP_ID, 14 | }) 15 | } 16 | } 17 | 18 | export function logout() { 19 | return firebase.auth().signOut().catch(console.error) 20 | } 21 | 22 | export function login(provider) { 23 | return firebase 24 | .auth() 25 | .setPersistence(firebase.auth.Auth.Persistence.LOCAL) 26 | .then(() => firebase.auth().signInWithPopup(provider)) 27 | .catch(console.error) 28 | } 29 | 30 | export function loginGitHub() { 31 | const provider = new firebase.auth.GithubAuthProvider() 32 | provider.setCustomParameters({ 33 | allow_signup: 'true', 34 | }) 35 | return login(provider) 36 | } 37 | 38 | export default firebase.apps.length ? firebase : null 39 | -------------------------------------------------------------------------------- /components/Input.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { COLORS } from '../lib/constants' 4 | 5 | const Input = React.forwardRef( 6 | ( 7 | { 8 | color = COLORS.SECONDARY, 9 | align = 'right', 10 | width = '100%', 11 | fontSize = '12px', 12 | label, 13 | ...props 14 | }, 15 | ref 16 | ) => ( 17 | 18 | {label && } 19 | 20 | 55 | 56 | ) 57 | ) 58 | 59 | export default Input 60 | -------------------------------------------------------------------------------- /components/svg/Controls.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export const Controls = () => ( 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | ) 12 | 13 | export const ControlsBW = () => ( 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ) 22 | 23 | export const ControlsBoxy = () => ( 24 | 25 | 26 | 30 | 31 | 32 | 33 | ) 34 | -------------------------------------------------------------------------------- /pages/api/oembed.js: -------------------------------------------------------------------------------- 1 | /* 2 | * See oEmbed standard here: https://oembed.com/ 3 | */ 4 | const url = require('url') 5 | 6 | const toIFrame = (url, width, height) => 7 | ` 15 | ` 16 | 17 | module.exports = (req, res) => { 18 | let embedUrl = req.query.url 19 | 20 | try { 21 | embedUrl = decodeURIComponent(embedUrl) 22 | } catch (e) { 23 | // eslint-disable-next-line 24 | console.log(e) 25 | /* URL is already decoded */ 26 | } 27 | 28 | try { 29 | const { query: queryString, pathname } = url.parse(embedUrl) 30 | 31 | const snippetID = pathname.split('/').pop() 32 | 33 | const width = Math.min(Number(req.query.maxwidth) || Infinity, 1024) 34 | const height = Math.min(Number(req.query.maxheight) || Infinity, 480) 35 | 36 | const obj = { 37 | version: '1.0', 38 | type: 'rich', 39 | provider_name: 'Carbon', 40 | width, 41 | height, 42 | html: toIFrame( 43 | `${snippetID && snippetID !== 'undefined' ? `/${snippetID}` : ''}?${ 44 | queryString ? queryString : '' 45 | }`, 46 | width, 47 | height 48 | ), 49 | } 50 | 51 | return res.status(200).json(obj) 52 | } catch (e) { 53 | // eslint-disable-next-line 54 | console.error(e) 55 | return res.status(500).send(e.message) 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | If you have discovered a bug or have a feature suggestion, feel free to create an issue on GitHub. You don't need to be assigned an issue in order to work on it—consider all issues free rein. 4 | 5 | If you'd like to make some changes yourself, see the following: 6 | 7 | 1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device 8 | 1. Make sure yarn is globally installed (`npm install -g yarn`) 9 | 1. Run `yarn` to download required packages 10 | 1. Build and start the application: `yarn dev` 11 | 1. Finally, submit a [pull request](https://help.github.com/articles/creating-a-pull-request-from-a-fork/) with your changes! 12 | 13 | This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification, and uses the [@all-contributors](https://allcontributors.org/docs/en/bot/usage) bot to add new contributors. 14 | 15 | Contributions of any kind are welcome! 16 | 17 | ### Adding themes/languages/fonts 18 | 19 | We are not currently accepting new themes, languages, or fonts into Carbon, except for in extenuating circumstances. Instead, we want to continue to provide ways for users to add their own themes and presets. Please feel free to still open an issue or PR for consideration, but know that there is a chance it will get closed without addition. 20 | 21 | ## Stats 22 | ![Alt](https://repobeats.axiom.co/api/embed/471ed135120d0b6c3ec17fa4e8aa371c9173bd87.svg "Repobeats analytics image") 23 | 24 | -------------------------------------------------------------------------------- /cypress/integration/security.spec.js: -------------------------------------------------------------------------------- 1 | /* global cy */ 2 | import { editorVisible } from '../support' 3 | 4 | describe('security', () => { 5 | it('should not alert from bg query parameter', () => { 6 | const stub = cy.stub() 7 | cy.on('window:alert', stub) 8 | 9 | // https://github.com/carbon-app/carbon/issues/192 10 | cy.visit(`?bg=rgba(171, 184, 195, 1)