add location to site

intl/en.js

@@ -18,8 +18,13 @@ export default {
   year: 'Years',
   attendees: 'Attendees',
   speakers: 'Speakers',
-  confirmed_speakers: 'Confirmed speakers',
+  confirmed_speakers: 'Confirmed Speakers',
   sponsors: 'Sponsors',
+  confirmed_sponsors: 'Some of our Sponsors',
+  location: 'Location',
+  location_title: 'Location',
+  hotel: 'Intercontinental Nanjing',
+  address: 'No.1 Zhongyang Road, Gulou District, Nanjing, China',
   tickets: 'Tickets',
   buy_tickets: 'buy tickets',
 
@@ -66,6 +71,8 @@ export default {
   <p>NingJS Conf has three sponsorship levels: gold, silver, bronze. Your support is very important to the conference, and the conference committee ensures that these contributions are well recognized. We list the benefits and costs below. We are open to any sponsorship needs - chat with an organizer about package details at <a href='mailto:[email protected]'>[email protected]</a>.</p>`,
   call_for_sponsors_mini_intro: 'Interested in supporting the local JavaScript community in China? There is no better way then helping sponsor JSConf 2016 in Nanjing.',
   gold_sponsor: 'Gold Sponsor',
+
+  call_for_volunteers_intro: 'Are you a fan of Javascript/Node.js/React, etc.? Do you want to be a part of an international developer community? Do you think you can be up for a big challenge?',
   silver_sponsor: 'Silver Sponsor',
   bronze_sponsor: 'Bronze Sponsor',
   what_else_sponsor: 'What else can you sponsor?',

intl/zh-cn.js

@@ -19,6 +19,11 @@ export default {
   speakers: '讲师',
   confirmed_speakers: '已确认讲师',
   sponsors: '赞助商',
+  confirmed_sponsors: '部分赞助商',
+  location: '地址',
+  location_title: '大会地址',
+  hotel: '南京绿地洲际酒店',
+  address: '南京市鼓楼区中央路1号(地铁1号线鼓楼站4A口出北行170米)',
   tickets: '购票',
   buy_tickets: '购票参会',
 
@@ -63,6 +68,7 @@ export default {
   <h4>赞助方案</h4>
   <p>2016宁JS提供三个等级的赞助方案: 金，银，铜。您的支持对于大会来说非常重要，能够保证大会主办人员更好地组织与筹办这次活动。我们将详细列出不同方案的特权以及费用，如果您对于赞助文档有任何的需求与疑问，请告诉我们！<a href='mailto:[email protected]'>[email protected]</a></p>`,
   call_for_sponsors_mini_intro: '有兴趣支持JavaScript中国社区？成为我们2016宁JS的赞助商吧',
+  call_for_volunteers_intro: '你是Javascript/Node.js/React的忠实粉丝吗？想要成为国际开发者社区的一员吗？你愿意接受更大的挑战吗？',
   gold_sponsor: '金牌赞助商',
   silver_sponsor: '银牌赞助商',
   bronze_sponsor: '铜牌赞助商',

package.json

@@ -46,7 +46,8 @@
     "lodash": "^4.6.1",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
-    "react-router": "^2.0.1"
+    "react-router": "^2.0.1",
+    "leaflet": "~0.7.7"
   },
   "homepage": "https://github.com/jsconfcn/ningjs#readme"
 }

src/Components/Map.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
+
+const position = [32.06257,118.7781];
+
+export default class MapComponent extends Component {
+
+  render() {
+    return (
+      <Map center={position} zoom={13}>
+        <TileLayer
+          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
+          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        />
+        <Marker position={position}>
+          <Popup>
+            <span><strong></strong><span>鼓楼区中央路1号(地铁1号线鼓楼站4A口出北行170米)</span>
+          </Popup>
+        </Marker>
+      </Map>
+    )
+  }
+}

src/Components/NavTab.js

@@ -22,9 +22,23 @@ export default class NavTab extends Component {
       pageScrollTopAnimate(about.offsetTop, timeInMS)
     }, 0)
   }
-  scrollToSpeakers(evt) {
+  scrollToSchedule(evt) {
     setTimeout(() => {
-      const element = document.querySelector('#speakers')
+      const element = document.querySelector('#schedule')
+      const timeInMS = 500
+      pageScrollTopAnimate(element.offsetTop - 100, timeInMS)
+    }, 0)
+  }
+  scrollToSponsor(evt) {
+    setTimeout(() => {
+      const element = document.querySelector('#sponsors')
+      const timeInMS = 500
+      pageScrollTopAnimate(element.offsetTop - 100, timeInMS)
+    }, 0)
+  }
+  scrollToLocation(evt) {
+    setTimeout(() => {
+      const element = document.querySelector('#location')
       const timeInMS = 500
       pageScrollTopAnimate(element.offsetTop - 100, timeInMS)
     }, 0)
@@ -53,22 +67,33 @@ export default class NavTab extends Component {
           className='toggle-button'
           onClick={this.openMenu.bind(this)}/>
         <nav>
+          <Link onClick={this.scrollToAbout}
+            to={{ pathname: '/', query }} >
+            {__('about_us')}
+          </Link>
           <Link className={isActive('/sponsors') ? 'active' : ''}
             to={{ pathname: '/sponsors', query }}
             onClick={this.active.bind(this, 'sponsors')}>
             {__('call_for_sponsors')}
           </Link>
-          <Link onClick={this.scrollToSpeakers}
+          <Link onClick={this.scrollToSchedule}
             to={{ pathname: '/', query }} >
             {__('Schedule')}
           </Link>
-          <Link onClick={this.scrollToAbout}
+          <Link onClick={this.scrollToLocation}
             to={{ pathname: '/', query }} >
-            {__('about_us')}
+            {__('location')}
+          </Link>
+          { /*
+            <Link onClick={this.scrollToSponsor}
+            to={{ pathname: '/', query }} >
+            {__('sponsors')}
           </Link>
+          */ }
+
           <a href='http://www.bagevent.com/event/58905' target='new' className='ticket'>{__('tickets')}</a>
         </nav>
-        </div>
+      </div>
     )
   }
 

src/Components/pages/Home.js

@@ -7,6 +7,8 @@
 import React, { Component,createElement } from 'react'
 import { Link } from 'react-router'
 import Schedule from '../schedule'
+import Sponsors from '../sponsors'
+// import Map from '../Map'
 
 export default class Home extends Component {
 
@@ -17,7 +19,6 @@ export default class Home extends Component {
         <section id='hero'>
           <div className='bg-container'>
             <div className='box'>
-
               <div className='masthead'>
                 <h1>{__('ningjs')} · {__('jsconf_china_2016')}</h1>
                 <h4>2016.09.03 - 09.04 @ {__('nanjing')}</h4>
@@ -33,12 +34,12 @@ export default class Home extends Component {
         </section>
 
         <section id='call-for-speakers'>
-          <Link to='' className='col-2'>
+          <a href='https://jinshuju.net/f/HsuWJ5' className='col-2' target='new'>
             <h2>{__('call_for_volunteers')}</h2>
-            <p></p>
-            <button className='button green'>{__('coming_soon')}</button>
+            <p>{__('call_for_volunteers_intro')}</p>
+            <button className='button green'>{__('apply_now')}</button>
             <div className='bg'></div>
-          </Link>
+          </a>
           <Link to={{ pathname: '/sponsors', query }} className='col-2'>
             <h2>{__('call_for_sponsors')}</h2>
             <p>{__('get_out_ads_go_ahead')}</p>
@@ -104,11 +105,37 @@ export default class Home extends Component {
           <img src='./assets/images/map.jpg' className='map' />
         </section>
 
-        <section id='speakers' className='wrapper'>
-          <h2>{__('Schedule')}</h2>
-          <Schedule __={__}/>
+        <section id='schedule'>
+          <div className='wrapper'>
+            <h2>{__('Schedule')}</h2>
+            <Schedule __={__}/>
+          </div>
         </section>
 
+        <section id='location'>
+          <div className='wrapper'>
+            <h2>{__('location_title')}</h2> 
+            <div className='address'>
+              <h3>{__('hotel')}</h3>
+              <p>{__('address')}</p>
+            </div>
+            <div className='imgs'>
+              <img src='./assets/images/address.jpg' />
+              <img src='./assets/images/address1.jpg' />
+            </div>
+          </div>
+
+        </section>
+
+
+  {/*        <section id='sponsors'>
+  //        <div className='wrapper'>
+  //        <h2>{__('confirmed_sponsors')}</h2>
+  //      <Sponsors __={__}/>
+  //   </div>
+  // </section>*/}
+
+
         <ul id='display-list'>
           <li><img src='./assets/images/media-01.jpg' /></li>
           <li><img src='./assets/images/media-02.jpg' /><img src='./assets/images/media-03.jpg' /></li>

src/Components/schedule/index.js

@@ -8,7 +8,7 @@ export default class Index extends Component {
 
   speakers() {
     return {
-      'DAY ONE': [{
+      'Day 1': [{
         time: '8:15',
         title: 'Check In'
       },{
@@ -40,7 +40,7 @@ export default class Index extends Component {
       }, {
         time: '11:30',
         name: '严清',
-        avatar: '/assets/images/speakers/yanqing.png',
+        avatar: '/assets/images/speakers/yanqing.jpg',
         title: '聊聊 JS 测试框架',
         social: 'https://github.com/zensh',
         company: 'Teambition'
@@ -104,10 +104,10 @@ export default class Index extends Component {
         time: '18:10',
         title: 'After Party Announcements'
       }],
-      'DAY TWO': [{
+      'Day 2': [{
         time: '9:45',
         name: '孙坤鹏',
-        avatar: '/assets/images/speakers/sunkunpeng.png',
+        avatar: '/assets/images/speakers/sunkunpeng.jpg',
         title: '单页应用“联邦制”实践',
         social: 'http://weibo.com/u/3275479734',
         company: 'UCloud'
@@ -161,7 +161,7 @@ export default class Index extends Component {
       },{
         time: '15:10',
         name: '梁伟盛',
-        avatar: '/assets/images/speakers/dasheng.png',
+        avatar: '/assets/images/speakers/dasheng.jpg',
         title: '移动海量服务下基于React的高性能同构实践',
         social: '/',
         company: 'Tencent IMWeb Team'
@@ -208,18 +208,13 @@ export default class Index extends Component {
   render() {
     const { __, query } = this.props
     const speakers = this.speakers();
-    const days = Object.keys(speakers)
+    const days = Object.keys(speakers);
     const schedules = this.covert(speakers[days[0]], speakers[days[1]])
     return (
       <div className='speakers-container'>
         <div className='days'>
-        {
-          days.map((i, j)=> {
-            return (
-              <h3 className='title' key={j}>{i}</h3>
-            )
-          })
-        }
+          <div><h3>Day 1</h3><i>09.03</i></div>
+          <div><h3>Day 2</h3><i>09.04</i></div>
         </div>
         {
           Object.keys(schedules).map((i, j) => <Item time={i} speakers={schedules[i]} __={__} key={j}/>)

src/Components/schedule/item.js

@@ -5,9 +5,9 @@ class Article extends Component {
 
   render() {
     const { __, name, avatar, title, desc, social, company } = this.props
-    const avatarEl = avatar ? <img className='avatar' src={avatar} /> : null
-    const companyEL = company ? <h5>From {company}</h5> : null
-    const nameEl = name ? <div><a href={social}>By {name}</a></div> : null
+    const avatarEl = avatar ? <div className='avatar'><img src={avatar} /></div> : null
+    const companyEL = company ? <h5>{company}</h5> : null
+    const nameEl = name ? <div><a href={social}>{name}</a></div> : null
     return (
       <article>
         { avatarEl }

src/Components/sponsors/LevelItem.js

@@ -0,0 +1,20 @@
+import React, {Component} from 'react'
+
+export default class LevelItem extends Component {
+	render () {
+    const {level, data} = this.props
+    const sponsorArray = data.map((sponsor, i) => {
+      return (
+        <a key={i} href={sponsor.link} ><img src={sponsor.logo} /></a>
+      )
+    })
+    return (
+     <div className='level'>
+      <h3>{ level }</h3>
+      <div className='list'>
+      { sponsorArray } 
+      </div>
+    </div>
+    )
+  }
+}

src/Components/sponsors/index.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import _ from 'lodash'
+import LevelItem from './LevelItem'
+
+import 'styles/speakers/style.scss'
+
+/* Sponsor data */
+const sponsorData = require('./sponsors.json')
+
+export default class Index extends Component {
+
+  covert(arr1, arr2, arr3) {
+    return arr1.reduce((p, n) => {
+      p[n.name] = [n].concat(arr2.filter(i => i.name === n.name))
+      return p
+    }, {})
+  }
+
+  render() {
+    const { __, query } = this.props
+
+    const levels = Object.keys(sponsorData).map((level, i) => {
+      return (<LevelItem key={i} level={level} data={sponsorData[level]} />)
+    })
+    return (
+      <div className='sponsors-container'>
+        { levels }
+      </div>
+    )
+  }
+}

src/Components/sponsors/sponsors.json

@@ -0,0 +1,49 @@
+{
+  "Organizer": [{
+    "name": "Wiredcraft",
+    "logo": "/assets/images/sponsors/wiredcraft.png",
+    "link": "https://wiredcraft.com/"
+  }],
+  "Gold": [{
+    "name": "Ucloud",
+    "logo": "/assets/images/sponsors/ucloud.png",
+    "link": "https://www.ucloud.cn/"
+  }],
+
+  "Silver": [{
+    "name": "Teambition",
+    "logo": "/assets/images/sponsors/teambition.png",
+    "link": "https://www.teambition.com/"
+  }, {
+    "name": "Qiniu",
+    "logo": "/assets/images/sponsors/qiniu.png",
+    "link": "https://github.com/yyx990803"
+  }, {
+    "name": "Mapbox",
+    "logo": "/assets/images/sponsors/mapbox.png",
+    "link": "https://www.mapbox.com/"
+  }, {
+    "name": "aliyun",
+    "logo": "/assets/images/sponsors/aliyun.png",
+    "link": "https://www.aliyun.com/"
+
+  }, {
+    "name": "goyoo",
+    "logo": "/assets/images/sponsors/goyoo.png",
+    "link": "http://www.goyoo.com/"
+  }],
+  "Bronze": [{
+    "name": "Oneapm",
+    "logo": "/assets/images/sponsors/oneapm.png",
+    "link": "http://www.oneapm.com/"
+  }],
+  "Media": [{
+    "name": "Segmentfault",
+    "logo": "/assets/images/sponsors/sf.png",
+    "link": "https://segmentfault.com/"
+  }, {
+    "name": "Technode",
+    "logo": "/assets/images/sponsors/technode.png",
+    "link": "http://technode.com/"
+  }]
+}