Skip to content
Mutualizing documents in the public sector for innovation - a convivial web frontend for a github repository
JavaScript CSS HTML Ruby
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.sass-cache/ec97b8eba17742db687a911261cc08f76dd73bab
_includes
_layouts
assets
css
files
fonts
graphiste
images
js
old
pages
webpack
.DS_Store
.gitignore
.page.html.swp
Gemfile
Gemfile.lock
README.md
_config.yml
index.html
package-lock.json
package.json
webpack.config.js
xpage.html

README.md

APIE - Kit de l'innovation métier

Architecture

innovmetieretat.github.io/
├── README.md         <---- This file
├── Gemfile           <---- Local dev dependencies (Jekyll mainly)
├── Gemfile.lock      <---- Don't touch
├── package.json      <---- Javascript dependencies (npm, react, babel)
├── webpack.config.js <---- Webpack configuration
├── _config.yml       <---- Jekyll configuration
├── _layouts          <---- Layout
├── _includes         <---- Partials (header, footer, scripts, widgets loaders, etc...)
├── index.html        <---- Main page
├── pages             <---- All other pages (methodes.html, modeles.html, etc...)
├── webpack           <---- Where all widgets/react code goes
├── assets 
│   ├── images        <---- Where all images used in widgets goes
│   └── javascripts
│       └── bundle.js <---- Where all the webpack generated code goes
├── js                <---- All non-react javascript files 
├── css               <---- Styles
├── files             <---- All documents hosted on the platform
├── fonts             <---- Fonts
├── images            <---- Images
├── old               <---- Legacy website (needs to be removed)
├── graphiste         <---- Mockups & Design
└── xpage.html

Handled document types

  • Open source: "PDF", "ODT", "ODS", "ODP", "ODG"," ODC", "ODF", "ODB", "ODI", "ODM", "OTT", "OTS", "OTP", "OTG"
  • Closed source: "DOC", "DOCX", "PPT", "PPTX", "XLS", "XLSX"
  • Images: "PNG", "JPG", "JPEG", "GIF"

Libraries used:

Github

React

Viewer

  • ViewerJS
  • Microsoft official viewer

Misc

Local setup for review

Inspired by: https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/

  1. Clone the repository:
$ git clone https://github.com/InnovMetierEtat/innovmetieretat.github.io.git
  1. Install Ruby if you don't have it (http://rbenv.org/).

  2. Install bundler

$ gem install bundler
  1. Go in the cloned directory and run bundle install:
$ cd innovmetieretat.github.io/
$ bundle install
  1. Run jekyll (you might not need the bundle exec):
$ bundle exec jekyll serve
  1. In your browser go to: http://localhost:4000

Local setup for development

First of all, follow previous instructions for local review.

Install NPM & Node

If you don't have node install it, run:

$ [sudo] install npm -g

Install dependencies

Then install webpack, which we will use to convert our JSX/ES6 files to JS:

$ npm install webpack -g

And if you haven't already, also install jekyll (for local development). Make sure you are in the right folder (where the Gemfile is)

$ cd innovmetieretat.github.io/ 
$ bundle install

Make sure you install all javascript dependencies too. Make sure once again that you are in the right folder (where the package.json file is):

$ cd innovmetieretat.github.io/ 
$ npm install

Write your code

  • Make sure you are on the development branch and up to date:
$ git checkout development
$ git pull origin development
  • The main starting point of the react code is webpack/entry.js.
  • All the react code/files are also in the webpack/ folder.

Run your code

  1. In a terminal tab, run $ webpack --watch to compile react/ES6 to javascript;
  2. In another terminal tab, run $ bundle exec jekyll serve to build the website;
  3. In your browser go to http://localhost:4000

Have fun!

Guides

Adding a new subcategory of documents

Current categories are:

créativité
autres
communication
documentation
inventions
juridique
lieux et évènements
marchés publics
parangonnage
technologie

If you ever wish to add a new one, a few things need to be done:

Adding new places ("lieux")

For "lieux", everything takes places in this file: https://github.com/InnovMetierEtat/innovmetieretat.github.io/blob/master/_includes/widgets/map.html#L7

Each place has a set of information attached:

   markers: [
     {
       lat: -0.1279688,         // Latitude
       lng: 51.5077286,         // Longitude
       color: 'applegreen',     // Color used for the picto (see assets/images/pictos)
       icon: 'idea',            // Category used for the picto (see assets/images/pictos)
       url: 'http://google.com' // Page on which to go to when clicking on the icon
     },
     {
       lat: -0.119623, 
       lng: 51.503308,
       color: 'purple',
       icon: 'usecase',
       url: 'http://google.com'
     },
     // [...]
   ]

Adding a new one is as simple as adding a new entry to this array.

Adding a new testimony

All testimony reside inside the folder: https://github.com/InnovMetierEtat/innovmetieretat.github.io/tree/master/pages/temoignages

If you want to add a new one, just create a new file with this basic layout:

---
title: Georges B.
permalink: parole-georges.html
layout: default
---

<div>
  <div class="apie-header viewer-header blue-border">
    <img class="img-responsive center-block" src="assets/images/pictos/picto-usecase-blue.png" />
    <div class="viewer-primary page-category">
      Parole d'innovateur
      <div class="header-separator"></div>
    </div>
    <div class="page-title blue-font">
      Georges B.
    </div>
  </div>
  <div class="testimony-container">
    Lorem ipsum.
  </div>
</div>

Be clever and modify the relevant parts ;)

Then once you are done with your page, link it in the homepage like we did here: https://github.com/InnovMetierEtat/innovmetieretat.github.io/blob/master/index.html#L175

Et voilà!

You can’t perform that action at this time.