Simple HTML page based on jQuery, Bulma, Font Awesome and webpack

23e98456 · The GAFAM tech collective · 022474e3 · 23e98456 · 23e98456 · 23e98456
Commit 23e98456 authored Jan 12, 2018 by The GAFAM tech collective
15 changed files
--- a/.bumpversion.cfg
+++ b/.bumpversion.cfg
+[bumpversion]
+current_version = 0.0.0
+files = package.json src/js/version.js
+search =
+	"version": "{current_version}",
+	__version__ = '{current_version}';
+commit = True
+tag = True
+tag_name = {new_version}
+allow_dirty = True
+
--- a/.gitignore
+++ b/.gitignore
+/.idea
+.DS_Store
+/htdocs/static/assets/*
+!/htdocs/static/assets/README.txt
+/node_modules
+yarn-error.log
+yarn.lock
+/.venv27
--- a/CHANGES.rst
+++ b/CHANGES.rst
+======================
+www.gafam.info CHANGES
+======================
+
+
+in progress
+-----------
+
+2018-01-11 0.0.0
+----------------
+- Simple HTML page based on jQuery, Bulma, Font Awesome and webpack
--- a/Makefile
+++ b/Makefile
+# ===========
+# bumpversion
+# ===========
+
+$(eval venvpath     := .venv27)
+$(eval bumpversion  := $(venvpath)/bin/bumpversion)
+
+virtualenv:
+	@test -e $(venvpath)/bin/python || `command -v virtualenv` --python=`command -v python` --no-site-packages $(venvpath)
+
+bumpversion: virtualenv
+	@$(venvpath)/bin/pip install bumpversion
+	$(bumpversion) $(bump)
+
+
+# =======
+# release
+# =======
+
+push:
+	git push && git push --tags
+
+
+release: bumpversion push
+
+
+# ======
+# ptrace
+# ======
+
+# Don't commit media assets (screenshots, other large files etc.) to the repository
+# or send them using email or instant messaging.
+# Instead, upload them to https://ptrace.gafam.info/
+ptrace_target := root@ptrace.gafam.info:/srv/www/organizations/collab42/ptrace.gafam.info/htdocs/
+ptrace_http   := https://ptrace.gafam.info/
+ptrace: check-ptrace-options
+	$(eval prefix := $(shell date --iso-8601))
+	$(eval name   := $(shell basename $(source)))
+	$(eval id     := $(prefix)_$(name))
+
+	@# debugging
+	@#echo "name: $(name)"
+	@#echo "id:   $(id)"
+
+	@scp '$(source)' '$(ptrace_target)$(id)'
+
+	$(eval url    := $(ptrace_http)$(id))
+	@echo "Access URL: $(url)"
+
+check-ptrace-options:
+	@if test "$(source)" = ""; then \
+		echo "ERROR: 'source' not set"; \
+		exit 1; \
+	fi
--- a/README.rst
+++ b/README.rst
+##############
+www.gafam.info
+##############
+
+
+About
+=====
+This repository contains the sources of https://www.gafam.info/.
+
+Contributions are welcome!
+
+
+How to work with it
+===================
+Bundle Javascript and CSS assets using webpack::
+
+    yarn install
+    yarn run build
+
+Watch files for rebundling::
+
+    yarn run watch
+
+Have a look::
+
+    open ./htdocs/index.html
+
--- a/htdocs/index.html
+++ b/htdocs/index.html
+<!DOCTYPE html>
+<html>
+
+<head>
+
+    <meta charset="UTF-8"/>
+
+    <title>The GAFAM resource toolkit</title>
+    <meta name="description" content="We collect, maintain and care for localization of material from the LQDN GAFAM campaign. CC0 licensed and a friendly community.">
+    <meta name="keywords" content="gafam, information, localization">
+
+    <!-- Let browser know website is optimized for mobile -->
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+
+    <!-- Load whole application -->
+
+    <!-- Development -->
+    <script type="text/javascript" src="./static/assets/commons.bundle.js"></script>
+    <script type="text/javascript" src="./static/assets/app.bundle.js"></script>
+
+    <!-- Production -->
+    <!--
+    <script type="text/javascript" src="./static/assets/commons.bundle.min.js"></script>
+    <script type="text/javascript" src="./static/assets/app.bundle.min.js"></script>
+    -->
+
+</head>
+
+<body>
+
+    <a class="github-fork-ribbon" href="https://github.com/gafam/www.gafam.info" target="_blank" title="Fork me on GitHub">Fork me on GitHub</a>
+
+    <section class="hero is-info site-header">
+        <div class="hero-body columns">
+            <div class="column is-9">
+                <div class="container header-container">
+                    <h1 class="title is-spaced">
+                        The GAFAM resource toolkit
+                    </h1>
+                    <p class="subtitle">
+                        We collect, maintain and care for localization of material from the
+                        <strong><a target="_blank" href="https://twitter.com/laquadrature/status/942764007286591490">LQDN GAFAM</a></strong> campaign.
+                        <br/>
+                        CC0 licensed and a friendly community.
+                    </p>
+                </div>
+            </div>
+            <div class="column is-3">
+                <img src="static/img/gafam-pictograms.jpg"/>
+            </div>
+        </div>
+    </section>
+
+</body>
+
+</html>
--- a/htdocs/static/assets/README.txt
+++ b/htdocs/static/assets/README.txt
+webpack bundles will be dropped into this folder.
--- a/htdocs/static/img/gafam-pictograms.jpg
+++ b/htdocs/static/img/gafam-pictograms.jpg
--- a/package.json
+++ b/package.json
+{
+    "name": "www.gafam.info",
+    "description": "Sources of www.gafam.info.",
+    "version": "0.0.0",
+    "license": "CC0-1.0",
+    "author": {
+        "name": "Gafam Tech",
+        "email": "tech@gafam.info"
+    },
+    "keywords": [
+        "gafam",
+        "information",
+        "localization"
+    ],
+    "homepage": "https://github.com/gafam/www.gafam.info",
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/gafam/www.gafam.info.git"
+    },
+    "bugs": {
+        "url": "https://github.com/gafam/www.gafam.info/issues"
+    },
+    "scripts": {
+        "watch": "webpack --config=webpack.develop.config.js --watch --hot",
+        "build": "webpack --config=webpack.develop.config.js --display detailed --display-error-details --progress",
+        "release": "webpack --config=webpack.release.config.js --display detailed --display-error-details --progress"
+    },
+    "devDependencies": {
+        "jquery": "^3.2.1",
+        "bulma": "^0.6.2",
+        "font-awesome": "^4.7.0",
+        "github-fork-ribbon-css": "^0.2.1",
+        "style-loader": "^0.19.0",
+        "css-loader": "^0.28.7",
+        "expose-loader": "^0.7.3",
+        "file-loader": "^1.1.5",
+        "webpack": "^3.5.6",
+        "webpack-dev-server": "^2.7.1",
+        "webpack-notifier": "^1.5.0"
+    }
+}
--- a/src/css/main.css
+++ b/src/css/main.css
+/* Baseline */
+.github-fork-ribbon {
+    -webkit-box-sizing: content-box !important;
+    box-sizing: content-box !important;
+}
+
+/* Customizations */
+.site-header .header-container {
+    margin-left: 2em;
+}
+
+.site-header .subtitle {
+    line-height: 1.6em;
+}
--- a/src/js/main.js
+++ b/src/js/main.js
+require('jquery');
+require('font-awesome/css/font-awesome.css');
+require('bulma/css/bulma.css');
+require('github-fork-ribbon-css/gh-fork-ribbon.css');
+
+require('../css/main.css');
+
+require('./version.js');
+$(document).ready(function() {
+    $('#version').html(__version__);
+});
--- a/src/js/version.js
+++ b/src/js/version.js
+__version__ = '0.0.0';
--- a/webpack.config.js
+++ b/webpack.config.js
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+
+    cache: true,
+    devtool: "cheap-source-map",
+
+    entry: {
+        'app': [
+            path.resolve('src', 'js', 'main'),
+            //path.resolve('htdocs', 'index.html'),
+        ],
+    },
+
+    amd: {
+        'jquery': true,
+        'backbone': true,
+        'backbone.marionette': true,
+        'classie': true,
+        'localforage.nopromises': true,
+        'localforage.backbone': true,
+        'backbone-relational': true,
+    },
+
+    output: {
+        path: path.resolve(__dirname, 'htdocs', 'static', 'assets'),
+        filename: '[name].bundle.js',
+        publicPath: './static/assets/',
+    },
+
+    module: {
+        rules: [
+            // Do these to expose their symbols to the template namespace
+            {
+                test: require.resolve('jquery'),
+                use: [
+                    {
+                        loader: 'expose-loader',
+                        options: 'jQuery',
+                    },
+                    {
+                        loader: 'expose-loader',
+                        options: '$',
+                    },
+                ],
+            },
+            {
+                test: /\.css$/,
+                use: [
+                    'style-loader',
+                    'css-loader'
+                ]
+            },
+            {
+                test: /\.(woff|woff2|eot|ttf|otf)$/,
+                use: [
+                    'file-loader'
+                ]
+            },
+            {
+                test: /\.(png|svg|jpg|gif|swf|ico)$/,
+                use: [
+                    'file-loader'
+                ]
+            }
+        ]
+    },
+
+    resolve: {
+        // Options for resolving module requests (does not apply to resolving to loaders)
+
+        // Directories where to look for modules
+        modules: [
+            "node_modules",
+        ],
+
+        extensions: [".js", ".jsx", ".min.js", ".json", ".css"],
+
+        alias: {
+        }
+    },
+
+    plugins: [
+
+        // https://webpack.js.org/plugins/provide-plugin/
+        new webpack.ProvidePlugin({
+            '$': 'jquery',
+            'jQuery': 'jquery',
+        }),
+
+    ],
+
+};
--- a/webpack.develop.config.js
+++ b/webpack.develop.config.js
+const config = require('./webpack.config');
+const webpack = require('webpack');
+const WebpackNotifierPlugin = require('webpack-notifier');
+
+config.plugins.push(
+
+    // https://www.npmjs.com/package/webpack-notifier
+    new WebpackNotifierPlugin(),
+
+    // https://webpack.js.org/plugins/commons-chunk-plugin/
+    new webpack.optimize.CommonsChunkPlugin({
+        name: "commons",
+        filename: "commons.bundle.js",
+    })
+
+);
+
+module.exports = config;
--- a/webpack.release.config.js
+++ b/webpack.release.config.js
+var os = require('os');
+const config = require('./webpack.config');
+const webpack = require('webpack');
+
+config.output.filename = '[name].bundle.min.js';
+config.plugins.push(
+
+    // https://webpack.js.org/plugins/commons-chunk-plugin/
+    new webpack.optimize.CommonsChunkPlugin({
+        name: "commons",
+        filename: "commons.bundle.min.js",
+    }),
+
+    // https://webpack.js.org/plugins/uglifyjs-webpack-plugin/
+    new webpack.optimize.UglifyJsPlugin({
+        parallel: {
+            cache: true,
+            workers: os.cpus().length - 1,
+        },
+        ie8: false,
+        sourceMap: true,
+        compress: {
+            warnings: false,
+            properties: true,
+            sequences: true,
+            dead_code: true,
+            conditionals: true,
+            comparisons: true,
+            evaluate: true,
+            booleans: true,
+            unused: true,
+            loops: true,
+            hoist_funs: true,
+            cascade: true,
+            if_return: true,
+            join_vars: true,
+            //drop_console: true,
+            drop_debugger: true,
+            unsafe: true,
+            hoist_vars: true,
+            negate_iife: true,
+            //side_effects: true
+        },
+        mangle: {
+            toplevel: true,
+            sort: true,
+            eval: true,
+            properties: true
+        },
+        output: {
+            comments: false,
+        },
+    })
+
+);
+
+module.exports = config;