Merge pull request #296 from CaptainFact/staging

Release 0.9.1

.babelrc

@@ -1,12 +1,10 @@
 {
-  "presets": [
-    "es2015",
-    "react"
-  ],
+  "presets": ["es2015", "react"],
   "plugins": [
     "transform-decorators-legacy",
     "transform-runtime",
     "transform-class-properties",
-    "transform-object-rest-spread"
+    "transform-object-rest-spread",
+    "babel-plugin-styled-components"
   ]
-}
+}

.eslintrc.yml

@@ -4,7 +4,7 @@ env:
   jest: true
   node: true
   cypress/globals: true
-extends: "airbnb"
+extends: 'airbnb'
 parser: babel-eslint
 parserOptions:
   ecmaFeatures:
@@ -20,61 +20,61 @@ plugins:
 rules:
   max-len:
     - warn
-    - code: 80
+    - code: 90
       ignoreStrings: true
       ignoreTemplateLiterals: true
       ignoreRegExpLiterals: true
-  indent: ["warn", 2]
-  linebreak-style: ["error", "unix"]
-  quotes: ["warn", "single", { avoidEscape: true }]
-  semi: ["error", "never"]
-  import/first: ["warn"]
-  no-trailing-spaces: ["warn"]
+  indent: ['warn', 2]
+  linebreak-style: ['error', 'unix']
+  quotes: ['warn', 'single', { avoidEscape: true }]
+  semi: ['error', 'never']
+  import/first: ['warn']
+  no-trailing-spaces: ['warn']
   no-continue: off
   no-plusplus: off
   radix: off
-  eol-last: ["warn"]
-  no-nested-ternary: ["warn"]
-  prefer-const: ["warn"]
-  import/no-named-as-default: ["warn"]
-  no-restricted-globals: ["error", "event", "fdescribe"]
-  no-mixed-operators: ["warn"]
+  eol-last: ['warn']
+  no-nested-ternary: ['warn']
+  prefer-const: ['warn']
+  import/no-named-as-default: ['warn']
+  no-restricted-globals: ['error', 'event', 'fdescribe']
+  no-mixed-operators: ['warn']
   # See https://github.com/cypress-io/eslint-plugin-cypress#chai-and-no-unused-expressions
   no-unused-expressions: 0
   chai-friendly/no-unused-expressions: 2
   # React
   react/destructuring-assignment: off
-  react/no-multi-comp: ["warn"]
-  react/jsx-no-bind: ["warn"]
-  react/jsx-indent-props: ["warn"]
-  react/jsx-first-prop-new-line: ["warn"]
-  react/jsx-closing-bracket-location: ["warn"]
-  react/jsx-curly-spacing: ["warn"]
-  react/jsx-tag-spacing: ["warn", { beforeSelfClosing: "allow" }]
-  react/jsx-wrap-multilines: ["warn"]
-  react/no-unused-state: ["warn"]
-  react/jsx-max-props-per-line: ["warn", { when: "multiline" }]
-  react/jsx-closing-tag-location: ["warn"]
-  react/no-unescaped-entities: ["warn"]
-  react/no-unused-prop-types: ["warn"]
-  react/self-closing-comp: ["warn"]
-  react/jsx-indent: ["warn"]
-  react/no-array-index-key: ["warn"]
-  react/prefer-stateless-function: ["warn"]
+  react/no-multi-comp: ['warn']
+  react/jsx-no-bind: ['warn']
+  react/jsx-indent-props: ['warn']
+  react/jsx-first-prop-new-line: ['warn']
+  react/jsx-closing-bracket-location: ['warn']
+  react/jsx-curly-spacing: ['warn']
+  react/jsx-tag-spacing: ['warn', { beforeSelfClosing: 'allow' }]
+  react/jsx-wrap-multilines: ['warn']
+  react/no-unused-state: ['warn']
+  react/jsx-max-props-per-line: ['warn', { when: 'multiline' }]
+  react/jsx-closing-tag-location: ['warn']
+  react/no-unescaped-entities: ['warn']
+  react/no-unused-prop-types: ['warn']
+  react/self-closing-comp: ['warn']
+  react/jsx-indent: ['warn']
+  react/no-array-index-key: ['warn']
+  react/prefer-stateless-function: ['warn']
   # JSX
   jsx-a11y/anchor-is-valid:
     - warn
-    - components: ["Link"]
-      specialLink: ["To"]
-  jsx-a11y/alt-text: ["warn"]
-  jsx-a11y/label-has-for: ["warn"]
+    - components: ['Link']
+      specialLink: ['To']
+  jsx-a11y/alt-text: ['warn']
+  jsx-a11y/label-has-for: ['warn']
   jsx-a11y/label-has-associated-control:
     - warn
     - controlComponents:
-        - "Field"
-  jsx-a11y/click-events-have-key-events: ["warn"]
-  jsx-a11y/no-static-element-interactions: ["warn"]
-  jsx-a11y/media-has-caption: ["warn"]
+        - 'Field'
+  jsx-a11y/click-events-have-key-events: ['warn']
+  jsx-a11y/no-static-element-interactions: ['warn']
+  jsx-a11y/media-has-caption: ['warn']
   jsx-a11y/anchor-has-content: off
 
   # Following rule haves been disabled for compatibility with

README.md

@@ -59,6 +59,18 @@ app
 └── router.jsx => Application router and main entry point
 ```
 
+#### Styling
+
+Styling is based on [Bulma](https://bulma.io/documentation/) and was initially
+customized with SASS. However we now include [styled-components](https://github.com/emotion-js/emotion), [styled-system](https://github.com/jxnblk/styled-system) and [@rebass/grid](https://github.com/rebassjs/grid)
+. This has become the prefered way to build new components.
+
+#### Icons
+
+We bundle a custom font icon built with icomoon. You can find scripts and config
+for this in `dev/` but the preferred (and easiest) way to add new icons today
+is to use `https://styled-icons.js.org/`.
+
 ## Main Libraries / Frameworks
 
 - ES6 with Babel

app/API/graphql_queries.js

@@ -0,0 +1,23 @@
+import gql from 'graphql-tag'
+
+export const VideosQuery = gql`
+  query VideosIndex($offset: Int! = 1, $limit: Int! = 16, $filters: VideoFilter = {}) {
+    videos(limit: $limit, offset: $offset, filters: $filters) {
+      pageNumber
+      totalPages
+      entries {
+        hash_id: hashId
+        provider_id: providerId
+        provider
+        title
+        insertedAt
+        isPartner
+        speakers {
+          full_name: fullName
+          id
+          slug
+        }
+      }
+    }
+  }
+`

app/API/matomo.js

@@ -0,0 +1,41 @@
+import { IS_DEV } from '../config'
+
+/**
+ * Low-level function to push an event to matomo **only** if instanciated. If
+ * Matomo is not instanciated (which is, if `window._paq` is undefined) the event
+ * is simply ignored.
+ *
+ * @param {string} context The context where this happens (eg. Home, UserProfile...)
+ * @param {string} action The type of action (Click, Close...)
+ * @param {string} (optional) name
+ * @param {number} (optional) numeric value
+ */
+export const pushEvent = (context, action, name, value) => {
+  // Generate the event
+  let event = null
+  if (name && value) {
+    event = ['trackEvent', context, action, name, value]
+  } else if (name) {
+    event = ['trackEvent', context, action, name]
+  } else {
+    event = ['trackEvent', context, action]
+  }
+
+  // Push the event
+  if ((window._paq === undefined || !window._paq) && IS_DEV) {
+    console.debug('[Matomo] Push event', event)
+  } else {
+    window._paq.push(event)
+  }
+}
+
+/**
+ * Register a click on Matomo.
+ *
+ * @param {string} context The context where this happens (eg. Home, UserProfile...)
+ * @param {string} type of the element (eg. Link, Button)
+ * @param {string} name The name of the link / button (eg. signin, register...)
+ */
+export const registerClick = (context, type, name) => {
+  pushEvent(context, 'Click', `${type}-${name}`)
+}

app/components/Home/AllAmbassadors.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Link } from 'react-router'
+import styled from 'styled-components'
+import { Flex } from '@rebass/grid'
+
+import imgBasile from '../../assets/ambassadors/basile.jpg'
+import imgDorian from '../../assets/ambassadors/dorian.jpg'
+import imgFrederic from '../../assets/ambassadors/frederic.jpg'
+import imgThimothee from '../../assets/ambassadors/timothee.jpg'
+
+const AMBASSADORS = [
+  { name: 'Frédéric Bouffetier', username: 'DocFred', img: imgFrederic },
+  { name: 'Timothée Rolland', username: 'Troplent', img: imgThimothee },
+  { name: 'Dorian Cazottes', username: 'DodoLaSoudure', img: imgDorian },
+  { name: 'Basile Asti', username: 'Basile', img: imgBasile }
+]
+
+const AmbassadorPicture = styled.img`
+  border-radius: 1em;
+  margin: 0 1em;
+  height: 70px;
+`
+
+/**
+ * Render all CaptainFact ambassadors
+ */
+const AllAmbassadors = () => (
+  <Flex flexWrap="wrap" justifyContent={['center', 'left']}>
+    {AMBASSADORS.map(({ name, username, img }) => (
+      <Link to={`/u/${username}`} key={name}>
+        <AmbassadorPicture title={name} src={img} alt={name} />
+      </Link>
+    ))}
+  </Flex>
+)
+
+export default AllAmbassadors

app/components/Home/AllPartners.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Flex, Box } from '@rebass/grid'
+
+import ExternalLinkNewTab from '../Utils/ExternalLinkNewTab'
+
+import imgImago from '../../assets/partners/imago.jpg'
+import imgDemocratieOuverte from '../../assets/partners/democratie-ouverte.jpg'
+import imgHeureka from '../../assets/partners/heureka.jpg'
+import imgSystemeD from '../../assets/partners/systemed.jpg'
+import imgTedxNoumea from '../../assets/partners/tedxnoumea.jpg'
+import imgThinkerView from '../../assets/partners/thinkerview.jpg'
+import imgTroncheEnBiais from '../../assets/partners/troncheenbiais.jpg'
+import imgYesWeHack from '../../assets/partners/yeswehack.jpg'
+
+// prettier-ignore
+const PARTNERS = [
+  { name: 'ThinkerView', img: imgThinkerView, url: 'https://thinkerview.com' },
+  { name: 'Heu?reka', img: imgHeureka, url: 'https://www.youtube.com/channel/UC7sXGI8p8PvKosLWagkK9wQ' },
+  { name: 'La Tronche en Biais', img: imgTroncheEnBiais, url: 'https://www.youtube.com/user/TroncheEnBiais' },
+  { name: 'Système D', img: imgSystemeD, url: 'https://www.systeme-d.co/' },
+  { name: 'Démocratie Ouverte', img: imgDemocratieOuverte, url: 'https://democratieouverte.org' },
+  { name: 'IMAGO', img: imgImago, url: 'https://imagotv.fr' },
+  { name: 'TedX Nouméa', img: imgTedxNoumea, url: 'https://tedxnoumea.com' },
+  { name: 'YesWeHack', img: imgYesWeHack, url: 'https://yeswehack.com' },
+]
+
+/**
+ * Render all CaptainFact partners
+ */
+const AllPartners = () => (
+  <Flex flexWrap="wrap" alignItems="center" justifyContent="space-around">
+    {PARTNERS.map(({ name, url, img }) => (
+      <Box key={name} mb="1em">
+        <ExternalLinkNewTab href={url} title={name}>
+          <figure className="image is-96x96">
+            <img src={img} alt={name} />
+          </figure>
+        </ExternalLinkNewTab>
+      </Box>
+    ))}
+  </Flex>
+)
+
+export default AllPartners