From 38cc0f91af6dcc22f8a872fcaa0d4a4da77a4e86 Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Tue, 2 Jan 2018 19:50:32 -0600 Subject: [PATCH] Font support (#149) * Add font family/font size support * Load fonts with css * Change settings item order --- README.md | 1 + components/Carbon.js | 11 +++-- components/FontSelect.js | 84 ++++++++++++++++++++++++++++++++++++ components/Meta.js | 3 +- components/Settings.js | 12 ++++++ components/Slider.js | 4 +- components/style/Font.js | 93 ++++++++++++++++++++++++++++++++++++++++ lib/constants.js | 10 +++++ pages/editor.js | 28 ++++++------ 9 files changed, 224 insertions(+), 22 deletions(-) create mode 100644 components/FontSelect.js create mode 100644 components/style/Font.js diff --git a/README.md b/README.md index 3f111f5..732570c 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,7 @@ Carbon is a project by
briandennis](https://github.com/briandennis)
[💻](https://github.com/dawnlabs/carbon/commits?author=briandennis "Code") [📖](https://github.com/dawnlabs/carbon/commits?author=briandennis "Documentation") [🚇](#infra-briandennis "Infrastructure (Hosting, Build-Tools, etc)") [👀](#review-briandennis "Reviewed Pull Requests") | [
mfix22](https://github.com/mfix22)
[💬](#question-mfix22 "Answering Questions") [💻](https://github.com/dawnlabs/carbon/commits?author=mfix22 "Code") [🤔](#ideas-mfix22 "Ideas, Planning, & Feedback") | [
jakedex](https://github.com/jakedex)
[💬](#question-jakedex "Answering Questions") [💻](https://github.com/dawnlabs/carbon/commits?author=jakedex "Code") [🎨](#design-jakedex "Design") [📹](#video-jakedex "Videos") | [
andrewda](https://github.com/andrewda)
[💬](#question-andrewda "Answering Questions") [💻](https://github.com/dawnlabs/carbon/commits?author=andrewda "Code") [🐛](https://github.com/dawnlabs/carbon/issues?q=author%3Aandrewda "Bug reports") [👀](#review-andrewda "Reviewed Pull Requests") | [
yeskunall](https://github.com/yeskunall)
[💻](https://github.com/dawnlabs/carbon/commits?author=yeskunall "Code") [📖](https://github.com/dawnlabs/carbon/commits?author=yeskunall "Documentation") [🔧](#tool-yeskunall "Tools") [🐛](https://github.com/dawnlabs/carbon/issues?q=author%3Ayeskunall "Bug reports") | [
stoshfabricius](https://github.com/stoshfabricius)
[💻](https://github.com/dawnlabs/carbon/commits?author=stoshfabricius "Code") | [
jkling38](https://github.com/jkling38)
[📖](https://github.com/dawnlabs/carbon/commits?author=jkling38 "Documentation") | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | | [
otobrglez](https://github.com/otobrglez)
[💻](https://github.com/dawnlabs/carbon/commits?author=otobrglez "Code") | [
darahak](https://github.com/darahak)
[📖](https://github.com/dawnlabs/carbon/commits?author=darahak "Documentation") | [
dom96](https://github.com/dom96)
[💻](https://github.com/dawnlabs/carbon/commits?author=dom96 "Code") | [
elrumordelaluz](https://github.com/elrumordelaluz)
[💻](https://github.com/dawnlabs/carbon/commits?author=elrumordelaluz "Code") | [
cjb](https://github.com/cjb)
[💻](https://github.com/dawnlabs/carbon/commits?author=cjb "Code") | [
Krzysztof-Cieslak](https://github.com/Krzysztof-Cieslak)
[💻](https://github.com/dawnlabs/carbon/commits?author=Krzysztof-Cieslak "Code") | [
fernahh](https://github.com/fernahh)
[📖](https://github.com/dawnlabs/carbon/commits?author=fernahh "Documentation") | diff --git a/components/Carbon.js b/components/Carbon.js index 9148fd4..6acc4dd 100644 --- a/components/Carbon.js +++ b/components/Carbon.js @@ -1,7 +1,6 @@ import { EOL } from 'os' import * as hljs from 'highlight.js' import React from 'react' -import domtoimage from 'dom-to-image' import Spinner from 'react-spinner' import toHash from 'tohash' import debounce from 'lodash.debounce' @@ -26,7 +25,9 @@ const DEFAULT_SETTINGS = { dropShadowBlurRadius: '68px', theme: 'seti', windowTheme: 'none', - language: DEFAULT_LANGUAGE + language: DEFAULT_LANGUAGE, + fontFamily: 'Fira Code', + fontSize: '14px' } class Carbon extends React.Component { @@ -198,8 +199,10 @@ class Carbon extends React.Component { min-width: inherit; padding: 18px 18px; ${config.lineNumbers ? 'padding-left: 12px;' : ''} border-radius: 5px; - font-family: Hack, monospace !important; - font-size: 0.8rem; + font-family: ${config.fontFamily}; + font-size: ${config.fontSize}; + font-variant-ligatures: contextual; + font-feature-settings: 'calt' 1; user-select: none; } diff --git a/components/FontSelect.js b/components/FontSelect.js new file mode 100644 index 0000000..e8a7284 --- /dev/null +++ b/components/FontSelect.js @@ -0,0 +1,84 @@ +import React from 'react' +import Checkmark from './svg/Checkmark' +import { COLORS, FONTS } from '../lib/constants' + +export default class extends React.Component { + constructor(props) { + super() + this.state = { isVisible: false } + this.select = this.select.bind(this) + this.toggle = this.toggle.bind(this) + } + + select(fontId) { + if (this.props.selected !== fontId) { + this.props.onChange(fontId) + } + } + + toggle() { + this.setState({ isVisible: !this.state.isVisible }) + } + + renderListItems() { + return FONTS.map((font, i) => ( +
+ {font.name} + {this.props.selected === font.id ? : null} + +
+ )) + } + + render() { + const selectedFont = FONTS.filter(font => font.id === this.props.selected)[0] + return ( +
+
+ Font family + {selectedFont.name} +
+
{this.renderListItems()}
+ +
+ ) + } +} diff --git a/components/Meta.js b/components/Meta.js index 3ead14f..997c228 100644 --- a/components/Meta.js +++ b/components/Meta.js @@ -1,6 +1,7 @@ import Head from 'next/head' import { THEMES, COLORS } from '../lib/constants' import Reset from './style/Reset' +import Font from './style/Font' import Typography from './style/Typography' export default () => ( @@ -45,10 +46,10 @@ export default () => ( } /> ))} - + +) diff --git a/lib/constants.js b/lib/constants.js index 88c5410..b4570b6 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -1,5 +1,15 @@ import toHash from 'tohash' +export const FONTS = [ + { id: 'Anonymous Pro', name: 'Anonymous Pro' }, + { id: 'Droid Sans Mono', name: 'Droid Sans Mono' }, + { id: 'Fira Code', name: 'Fira Code' }, + { id: 'Hack', name: 'Hack' }, + { id: 'Inconsolata', name: 'Inconsolata' }, + { id: 'Source Code Pro', name: 'Source Code Pro' }, + { id: 'Ubuntu Mono', name: 'Ubuntu Mono' } +] + export const THEMES = [ { id: '3024-night', diff --git a/pages/editor.js b/pages/editor.js index 30b1b1d..ab03ccc 100644 --- a/pages/editor.js +++ b/pages/editor.js @@ -190,21 +190,19 @@ class Editor extends React.Component { )} - + ) }