-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #51 from kadoshita/add-new-toppage
Add new toppage
- Loading branch information
Showing
10 changed files
with
162 additions
and
27 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains 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
This file contains 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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,84 @@ | ||
| import React, { Component } from 'react'; | ||
| import { Grid, Button, Paper, Fade } from '@material-ui/core'; | ||
| import { Link } from 'react-router-dom'; | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | ||
| import { faGithub, faTwitter } from '@fortawesome/free-brands-svg-icons'; | ||
| import { faShareSquare, faCode, faTerminal } from '@fortawesome/free-solid-svg-icons'; | ||
|
|
||
| export class Home extends Component { | ||
| static displayName = Home.name; | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| isHoverItem1: false, | ||
| isHoverItem2: false, | ||
| isHoverItem3: false | ||
| }; | ||
| } | ||
|
|
||
| render () { | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <h1>Hello, world!</h1> | ||
| <p>Welcome to your new single-page application, built with:</p> | ||
| <ul> | ||
| <li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li> | ||
| <li><a href='https://facebook.github.io/react/'>React</a> for client-side code</li> | ||
| <li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li> | ||
| </ul> | ||
| <p>To help you get started, we have also set up:</p> | ||
| <ul> | ||
| <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li> | ||
| <li><strong>Development server integration</strong>. In development mode, the development server from <code>create-react-app</code> runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.</li> | ||
| <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and your <code>dotnet publish</code> configuration produces minified, efficiently bundled JavaScript files.</li> | ||
| </ul> | ||
| <p>The <code>ClientApp</code> subdirectory is a standard React application based on the <code>create-react-app</code> template. If you open a command prompt in that directory, you can run <code>npm</code> commands such as <code>npm test</code> or <code>npm install</code>.</p> | ||
| </div> | ||
| <Grid container spacing={4}> | ||
| <Grid item xs={12} style={{ textAlign: 'center' }}> | ||
| <h1 style={{ color: '#55B2B8' }}>Live Share Editor</h1> | ||
| <h2>ソースコードをリアルタイムで共有できるオンラインエディタ</h2> | ||
| <Link to='/editor'> | ||
| <Button variant='outlined' color='primary'>作業を始める</Button> | ||
| </Link> | ||
| </Grid> | ||
| <Grid item xs={12}> | ||
| <Paper elevation={4}> | ||
| <img src='screenshot.png' alt='logo' style={{ width: '100%', height: 'auto', border: '2px solid #F8BBD0' }}></img> | ||
| </Paper> | ||
| </Grid> | ||
| <Grid item xs={12}> | ||
| <Grid container spacing={2} style={{ textAlign: 'center' }}> | ||
| <Grid item xs={4}> | ||
| <Paper elevation={4} onMouseOver={() => this.setState({ isHoverItem1: true })} onMouseLeave={() => this.setState({ isHoverItem1: false })}> | ||
| <h3>コーディングをリアルタイムで配信・共有</h3> | ||
| <div className='hover-item-parent'> | ||
| <FontAwesomeIcon icon={faShareSquare} color='#55B2B8' className='hover-item-icon' fixedWidth size='9x'></FontAwesomeIcon> | ||
| <Fade in={this.state.isHoverItem1} className='hover-item-fade'> | ||
| <div><p>ASP.NET Core SignalRにより、低遅延でコーディングを配信・共有できます。</p></div> | ||
| </Fade> | ||
| </div> | ||
| </Paper> | ||
| </Grid> | ||
| <Grid item xs={4}> | ||
| <Paper elevation={4} onMouseOver={() => this.setState({ isHoverItem2: true })} onMouseLeave={() => this.setState({ isHoverItem2: false })}> | ||
| <h3>12言語・10カラーテーマに対応</h3> | ||
| <div className='hover-item-parent'> | ||
| <FontAwesomeIcon icon={faCode} color='#F8BBD0' className='hover-item-icon' fixedWidth size='9x'></FontAwesomeIcon> | ||
| <Fade in={this.state.isHoverItem2} className='hover-item-fade'> | ||
| <div><p>C/C++、C#、Java、Python、PHP、Ruby、Go、JavaScript等、多数の言語のシンタックスハイライトが使用できます。</p></div> | ||
| </Fade> | ||
| </div> | ||
| </Paper> | ||
| </Grid> | ||
| <Grid item xs={4}> | ||
| <Paper elevation={4} onMouseOver={() => this.setState({ isHoverItem3: true })} onMouseLeave={() => this.setState({ isHoverItem3: false })}> | ||
| <h3>ブラウザ上で実行結果を確認</h3> | ||
| <div className='hover-item-parent'> | ||
| <FontAwesomeIcon icon={faTerminal} color='#55B2B8' className='hover-item-icon' fixedWidth size='9x'></FontAwesomeIcon> | ||
| <Fade in={this.state.isHoverItem3} className='hover-item-fade'> | ||
| <div> | ||
| <p><a href='https://wandbox.org' target='_blank' rel='noopener noreferrer'>Wandbox</a>のWebAPIを使用して、書いたコードの実行結果をブラウザ上で確認できます。</p> | ||
| </div> | ||
| </Fade> | ||
| </div> | ||
| </Paper> | ||
| </Grid> | ||
| </Grid> | ||
| </Grid> | ||
| <Grid item xs={12} style={{ height: '64px', textAlign: 'right' }}> | ||
| <a href='https://github.com/kadoshita/live-share-editor' target='_blank' rel='noopener noreferrer'> | ||
| <FontAwesomeIcon icon={faGithub} size='3x'></FontAwesomeIcon> | ||
| </a> | ||
| <a href='https://twitter.com/intent/tweet?text=ソースコードをリアルタイムで共有できるオンラインエディタ - Live Share Editor&url=https%3A%2F%2Flive-share-editor.azurewebsites.net' target='_blank' rel='noopener noreferrer'> | ||
| <FontAwesomeIcon icon={faTwitter} size='3x'></FontAwesomeIcon> | ||
| </a> | ||
| </Grid> | ||
| </Grid > | ||
| ); | ||
| } | ||
| } |
This file contains 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
This file contains 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
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { createMuiTheme } from '@material-ui/core/styles'; | ||
|
|
||
| const palette = { | ||
| primary: { main: '#55B2B8' }, | ||
| secondary: { main: '#F8BBD0' } | ||
| }; | ||
| const themeName = 'main theme color'; | ||
|
|
||
| export default createMuiTheme({ palette, themeName }); |