Git Product home page Git Product logo

2016.opensource.hk's Introduction

HKOSCon 2016 Website Travis CI results Circle CI results

This site is generated by node.js gulp routine. To change anything, please follow the workflow.


Preparation

To start working, please start by installing nodejs and npm in your environment. Please make sure that the command node is callable before move on.

for Fedora, CentOS, RHEL

Most of the package manager is using to old version of nodejs, it is recommended to download from https://nodejs.org and install.

su
tar xvf node-<VERSION>-linux-*.tar.xz -C /usr/local --strip-components=1
npm install -g npm

for Ubuntu, Debian

Most of the package manager is using to old version of nodejs, it is recommended to download from https://nodejs.org and install.

sudo tar xvf node-<VERSION>-linux-*.tar.xz -C /usr/local --strip-components=1
sudo npm install -g npm

In Ubuntu, please follow these commands to install with apt-get :

sudo apt-get install nodejs
sudo ln -s /usr/bin/nodejs /usr/local/bin/node

for Mac OS

It is recommended to use Homebrew to install nodejs.

Open your terminal then type these commands:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install node

After installing node and npm

You'd need to install node packages for the repository. Go into the folder that contain this file. Run this command:

npm install

Development

Folder Structure

The repository contains these files and folders:

gulpfile.js   - gulp automation files, like Makefile in nodejs
package.json  - node js configurations
README.MD     - this file
configs/      - config files for the generation process
public/       - all files in this folder is generated from src
                should serve this folder as document root for production
src/          - a folder to contain all source codes
  css/        - all scss / css files
    lib/      - css libraries downloaded (e.g. bootstrap)
  data/       - contains data json of topics, speakers, tags and etc
  images/     - image files
  layouts/    - HTML layout files (SWIG template)
  pages/      - HTML page files (SWIG template)
  scripts/    - all javascripts
    vendors/  - javascripts to be used directly (instead of webpack bundle)

Workflow

To start working:

  1. Clone this repository
  2. Open your terminal the folder containing this README
  3. Type the command npm run dev
  4. Your browser should be opened itself. If not, open your browser and go to: http://localhost:3000
  5. Modifying files should reload the browser. If not, just manually reload it.
  6. When you're happy with the result, commit the changes and push to the origin repository.

HTML

The site HTML is generated by SWIG (a Javascript template engine). The syntax is similar to normal HTML. It should be easy to read and work with.

It supports layout, include and many nice feature to work with.

Please read their documentation for more details.

Most pages are extending the default.html, except the root index file is extending front.html.

Javascript

To change any javascript, you can modify src/scripts/client.js.

Webpack will bundle it (and its dependencies, if any) into the assets/bundle.js.

CSS

CSS file assets/style.css is generated from src/css/style.scss.

As the extension hinted, it is a SCSS file. SCSS is a superset of CSS. That means you can do ordinary CSS in there. The bootstrap css file is bundled into assets/style.css by gulp-sass.

For more information about SCSS, please read the documentation.


Production

There are 2 ways to host the site in production environment:

Method 1: Build the Site statically

  1. Build the site by command: npm run build.
  2. Host the output folder.

Method 2: Reverse Proxy with nodejs

  1. Export the parameter PORT to specify the port number which nodejs can bind to (e.g. export PORT=8080).
  2. Run npm run start
  3. Reverse proxy the port with your favorite web server (e.g. Apache, Nginx).

2016.opensource.hk's People

Contributors

dictcp avatar sammyfung avatar yookoala avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

2016.opensource.hk's Issues

Update CFP status in menu

As suggested, should update CFP label i.e. Event > Call for Proposal as “Call for proposal (closed)

Frontpage action icon readability problem

The bottom right corner of front page first scroll has an action button. The color is now white on yellow (with transparency). The text is not as readable as other pages.

The button on frontpage:

screenshot from 2016-02-21 02-12-55

This is how the same button looks like on other pages:

screenshot from 2016-02-21 02-13-21

Suggested solution: use the exact same color scheme on both places.

Need discussion here.

Buy Ticket button on mobile view

As reported by Calvin, the "buy ticket" button is not displayed directly on mobile. It is in the collapsed menu. This is not very intuitive.

Consider to:

  1. Add a "Buy Ticket" button near the hamburger button. Only display when the menu is collapsed.
  2. Hide the original button in menu when the menu is collapsed. No need to duplicate the UI element.

Bug to Programme UI Filter

How to reproduce:

  1. Open the Programme UI page. Expand the Filter.
  2. Use the browser to search "Container". You can find a talk with "Container" in the beginning.
  3. Select "Internet of Things" and "DevOps". Then click "Reset"
  4. Search for "Container" again. Now you cannot find it.

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.