<commit_before>import React, { Component } from 'react'
import gemup from 'gemup'
import styled from 'styled-components'
import { connect } from 'react-redux'
import { Col, Row } from 'react-styled-flexboxgrid'
import { onChangeArticle } from 'client/actions/editActions'
import { data as sd } from 'sharify'

interface State {
  text: string
}

interface Props {
  onChangeArticleAction: any
}

export class ImageGenerator extends Component<Props, State> {
  onChange = (text) => {
    this.setState({ text })
  }

  onClick = async () => {
    const { text } = this.state

    const canvas = document.getElementById('canvas')
    if (canvas) {
      const ctx = canvas.getContext('2d')
      ctx.font = '30px Helvetica'
      ctx.fillStyle = 'black'
      ctx.fillRect(0, 0, canvas.width, canvas.height)
      ctx.fillStyle = 'white'
      ctx.fillText(text, 10, 50)
      const newImage = canvas.toDataURL('image/png')

      // Create blob and upload to s3
      const blob = await (await fetch(newImage)).blob()
      this.upload(blob)
    }
  }

  upload = (image) => {
    const { onChangeArticleAction } = this.props

    gemup(image, {
      app: sd.GEMINI_APP,
      key: sd.GEMINI_KEY,
      done: (src) => {
        onChangeArticleAction('thumbnail_image', src)<commit_msg>Get custom fonts, date, and news tagline working<commit_after>import React, { Component } from 'react'
import gemup from 'gemup'
import styled from 'styled-components'
import { connect } from 'react-redux'
import { Col, Row } from 'react-styled-flexboxgrid'
import { onChangeArticle } from 'client/actions/editActions'
import { data as sd } from 'sharify'
import moment from 'moment'

interface State {
  text: string
}

interface Props {
  article: any
  onChangeArticleAction: any
}

export class ImageGenerator extends Component<Props, State> {
  onChange = (text) => {
    this.setState({ text })
  }

  onClick = async () => {
    const { article } = this.props
    const { text } = this.state

    const canvas = document.getElementById('canvas')
    if (canvas) {
      const ctx = canvas.getContext('2d')
      console.log(article.published_at || "")
      const date = moment(article.published_at || "").format('MMM DD')

      ctx.fillStyle = 'black'
      ctx.fillRect(0, 0, canvas.width, canvas.height)
      ctx.fillStyle = 'white'
      ctx.font = '32px "Unica77LLWebMedium"'
      ctx.fillText("News", 200, 50)
      ctx.fillText(date, 400, 50)
      ctx.font = '50px "Adobe Garamond W08"'
      ctx.fillText(text, 200, 200, 840)
      const newImage = canvas.toDataURL('image/png')

      // Create blob and upload to s3
      const blob = await (await fetch(newImage)).blob()
      this.upload(blob)
    }
  }

  upload = (image) => {
    const { onChangeArticleAction } = this.props

    gemup(image, {
      app: sd.GEMINI_APP,
      key: sd.GEMINI_KEY,
      done: (src) => {
        onChangeArticleAction('thumbnail_image', src)
{'fraction_non_alphanumeric': 0.12576687116564417, 'fraction_numerical': 0.013974096796182686, 'mean_word_length': 3.0991620111731844, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5209381', 'n_tokens_mistral': 969, 'n_tokens_neox': 935, 'n_words': 245}