Code Monkey home page Code Monkey logo

lyontechhub.github.io's Introduction

Lyon Tech Hub Web Site

This is the public web site that aggregates communication of group's communities. It consists of the following sections :

  • Home page
  • Calendar page
  • Communities page
  • About

Join Us

Send us a mail to [email protected] or even request to join the group, it is totally free.

If you have a tech/IT community in Lyon area, request to join Lyon Tech Hub to promote your exciting activity to the community, it is simple as :

  • Request access to Google Calendar
  • And submit a pull request to update web site (logo & JSON data).

Make sure you do a pull request on master branch including the following :

  • your community in community list data/communities.json
  • your community details in file data/[key used in list].json
  • your community logo in imgs in PNG format with a 100x100 minimum resolution

Contribute

Contact us on the Google Group, make pull-request, this web site must be managed by Lyon communities themselves.

Developers

This web site is done with plain HTML/CSS3/Javascript and AngularJS.

The website is hosted through GitHub pages at lyontechhub.github.io as Organization pages (cf. https://help.github.com/articles/user-organization-and-project-pages). Note that GitHub uses master branch to deploy, that's why we have 'dev' branch as the default one, which contains source code, that is compiled through Gulp and pushed to master for deployment (see below).

Source code

It is built upon Bootstrap, with LESS files for theme customisation (see Dev & build environment).

AngularJS is used to organize code in views sharing a common layout and to adapt content according request result on JSON files stores in data directory.

Index.html file is the main entry point that define AngularJS application. Each view is then stored in views directory.

JSON data & images

The following JSON files are used to provide content to dynamic views in 'data' directory:

  • communities.json
  • communities/[one per community].json

Images like community icons are in 'imgs' directory.

Dev & build environment

Packages are managed through NPM and Bower. So you need NodeJS but just for NPM.

After cloning, just type the following commands to have a :

npm install
npm start

Nb : npm start is configured to start a local Node web server

Gulp is used to build assets (CSS & JS) and copy other assets (data & images) used by the site.

  • 'build' task is used to build JS, CSS (from LESS) and HTML to 'dist' directory ('npm start' launch 'build' task before running the local Node web server)
  • 'watch' task is used to watch changes on source JS, LESS, HTML & assets files to trigger a build dynamically (never ending task)
  • NO MORE USED 'deploy' task is used to commit 'dist' directory content to 'master' branch (excluding 'data' & 'imgs' directories which are modified on 'master' branch directly), specify '--push' to effectively deploy on GitHub pages (i.e push on GitHub master branch)

If you want to be able to run the server and watch the files simultaneously you need to use :

npm run dev

SEO compliance

To be SEO compliant, we embed web site in a Node.js application only to use prerender.io. The application load the Node.js module for prerender.io, called the middleware (see server.js file). It use Google AJAX crawling specification to make AngularJS application search engine compliant. See https://prerender.io/.

We use a heroku application for the prerender service, which crawl the web site with PhantomJS to return full old HTML. Prerender service is at http://mighty-waters-2486.herokuapp.com/. It has been deployed with following instructions : https://github.com/prerender/prerender#deploying-your-own-on-heroku. It has whitelist enabled with Lyon Tech Hub url only (config var : heroku config to list & heroku config:set to set).

Deployment

We use heroku to host the web site. To deploy, just push dev branch to master branch of heroku git repository :

heroku git:remote -a lyontechhub #only the first time to add the heroku remote
git push heroku dev:master 

Continuous deployment use Heroku GitHub integration (was using heroku-deployer...no more now).

lyontechhub.github.io's People

Contributors

devcrafting avatar fpellet avatar franckverrot avatar jeantil avatar agallou avatar blackheaven avatar romsson avatar maxired avatar arthru avatar cfauvet avatar mmajraoui avatar michaelbaudino avatar woecifaun avatar vtourraine avatar mere-teresa avatar cexbrayat avatar aroffe avatar ramshorst avatar samy avatar srats avatar nphumbert avatar gfaivre avatar ubermuda avatar fdepierre avatar fflorent avatar ldez avatar ath0mas avatar

Watchers

James Cloos avatar Mathieu Corbin avatar  avatar

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.