Git Product home page Git Product logo

coscup2016-website's Introduction

coscup 2016 website

TODO

  • 建議網頁可以產生 jsonld,參考
  • 議程表 filter 作 sticky 版
  • 部份文字需要 text-align: justify;
  • 交通頁面地圖資訊與 RWD 可優化
  • 議程表加入 hashtag 開啟某議程的功能

環境準備

npm 版本過舊可能會導致之後 build 失敗
更新 node, npm 參考資料

安裝套件管理器至全域

npm install -g gulp

安裝 build 網頁時會用到的前處理器

npm install

Debug

gulp debug 會重 build 整個網頁並建制臨時的小型網頁伺服 livereload 修改
gulp debug 不會執行壓縮

Build

gulp 會從 build 整個網頁,並關閉 debug mode,壓縮可壓縮的檔案

Source Code

所有 source code 都位於 app/

文案

  • API 撈
  • app/html/copy/
  • app/js/json/

Pages

app/*.html 會被視為各頁面,i.e.
app/index.html -> build/index.html
app/schedule.html -> build/schedule.html
...

html

html 拆成多個部份放在資料夾 app/html/ 下,由 app/*.html include ,可遞迴地 include
include 方式如

<div id="some-block">
	__@w@include('./html/path_to_source.html')
</div>

scss

所有 app/scss/*.scss 都會被 build 成 build/css/*.css
要被 import 的 parital 放在 app/scss/**/*.scss

javascript & react

所有 app/js/*.js 都會被 build 成 build/js/*.js

  • react component: app/js/components/
  • react state: app/js/stores/
    • provide function to let UI to change the state/data
    • component can regist callback triggering while state change
    • no need relarive/absolute path to require module in this folder
  • API dataloader: app/js/dataloaders/
    • load data from server and format loaded data for front-end used
    • no need relarive/absolute path to require module in this folder
  • library: app/js/lib/
    • third-part library
    • self code library
    • no need relarive/absolute path to require module in this folder
  • static json: app/js/json/

favicon

app/favicon*

image

app/images/**/*

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.