This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- index.html --> | |
| ... | |
| <head> | |
| ... | |
| <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> | |
| <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> | |
| <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet"> | |
| </head> | |
| ... |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* App.css */ | |
| body { | |
| font-family: 'Roboto Condensed', serif; | |
| } | |
| .main { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .color-guide { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // App.js | |
| import React, { Component, Fragment } from 'react'; | |
| import './App.css'; | |
| import Canvas from './canvas'; | |
| class App extends Component { | |
| render() { | |
| return ( | |
| <Fragment> | |
| <h3 style={{ textAlign: 'center' }}>Dos Paint</h3> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // canvas.js | |
| import React, { Component } from 'react'; | |
| import { v4 } from 'uuid'; | |
| class Canvas extends Component { | |
| constructor(props) { | |
| super(props); | |
| this.onMouseDown = this.onMouseDown.bind(this); | |
| this.onMouseMove = this.onMouseMove.bind(this); | |
| this.endPaintEvent = this.endPaintEvent.bind(this); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // server.js | |
| require('dotenv').config(); | |
| const express = require('express'); | |
| const bodyParser = require('body-parser'); | |
| const Pusher = require('pusher'); | |
| const app = express(); | |
| const port = process.env.PORT || 4000; | |
| const pusher = new Pusher({ | |
| appId: process.env.PUSHER_APP_ID, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // server.js | |
| const express = require('express') | |
| const app = express() | |
| const bodyParser = require('body-parser') | |
| const cors = require('cors') | |
| const Pusher = require('pusher') | |
| app.use(cors()) | |
| app.use(bodyParser.urlencoded({ extended: true })) | |
| app.use(bodyParser.json()) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // src/components/header.js | |
| import React from 'react' | |
| import Link from 'gatsby-link' | |
| const Header = ({ siteTitle }) => ( | |
| <div | |
| style={{ | |
| background: 'rebeccapurple', | |
| marginBottom: '1.45rem' | |
| }} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // src/pages/index.js | |
| import React from 'react' | |
| import Comment from '../components/comment' | |
| const IndexPage = () => ( | |
| <div> | |
| <h1>Leroy Aziz Sané left out of German squad for the world cup</h1> | |
| <p> | |
| A lot of talks is currently ongoing about the Manchester City winger Leroy Sane being left out of the German team. | |
| He was a prolific player this season with Mancity winning the premier league andthe significant contribution he brought to the team in front of Goal. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // src/components/comment.js | |
| import React, { Component } from 'react' | |
| import CommentList from './comment-list' | |
| import Pusher from 'pusher-js' | |
| /** | |
| * initialize pusher with your credentials. | |
| * Get 'key' from pusher dashboard | |
| */ | |
| const pusher = new Pusher('key', { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
| // src/components/comment-list.js | |
| import React from 'react' | |
| export default ({comments}) => { | |
| comments = comments.map((comment, i) => ( | |
| <div key={i} style={{ | |
| padding: '5px', | |
| border: '1px solid grey' | |
| }}> | |
| <p><strong>{comment.author}:</strong></p> |