added parcel js and moved js scripts into modules

.prettierrc

@@ -10,6 +10,9 @@
   "jsonEnable": [
     "json"
   ],
+  "jsEnable": [
+    "js"
+  ],
   "cssEnable": [
     "scss",
     "css"

_config.yml

@@ -27,7 +27,7 @@ baseurl: "" # the subpath of your site, e.g. /blog
 url: "" # the base hostname & protocol for your site, e.g. http://example.com
 permalink: /:categories/news/:year/:title:output_ext
 discordID: 737678270924849183
-twitchChannel: bnjmnjns
+twitchChannel: reclaimfutures
 
 
 # Build settings
@@ -48,14 +48,13 @@ plugins:
 # exclude:
 #  - .sass-cache/
 #  - .jekyll-cache/
+#  - .cache/
 #  - gemfiles/
 #  - Gemfile
 #  - Gemfile.lock
 #  - node_modules/
-#   - vendor/bundle/
-#   - vendor/cache/
-#   - vendor/gems/
-#   - vendor/ruby/
+#  - src/
+#  - vendor/
 
 # Generation of pages for participants + events
 age_gen-dirs: true

package.json

@@ -4,11 +4,22 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "bundle exec jekyll serve",
+    "start": "run-p start-jekyll start-parcel",
     "build": "JEKYLL_ENV=production jekyll build",
+    "start-jekyll": "bundle exec jekyll serve",
+    "start-parcel": "parcel src/index.js -d assets/js",
+    "build-jekyll": "JEKYLL_ENV=production jekyll build",
     "deploy-dev": "yarn build && scp -r -P 7833 ./_site/* amemasu@185.203.114.165:/var/www/dev.reclaimfutures.org",
     "deploy-prod": "yarn build && scp -r -P 7833 ./_site/* amemasu@185.203.114.165:/var/www/reclaimfutures.org"
   },
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "npm-run-all": "^4.1.5",
+    "parcel-bundler": "^1.12.4"
+  },
+  "dependencies": {
+    "countdown": "^2.6.0",
+    "spacetime": "^6.6.3"
+  }
 }

src/.eslintrc.js

@@ -0,0 +1,78 @@
+module.exports = {
+  globals: {
+    __PATH_PREFIX__: true,
+  },
+  extends: `airbnb`,
+  env: {
+    es6: true,
+    browser: true,
+  },
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaVersion: 8,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  rules: {
+    'linebreak-style': 'off',
+    'implicit-arrow-linebreak': 0,
+    camelcase: 0,
+    'operator-linebreak': 0,
+    'max-len': ['error', 110],
+    'comma-dangle': 1,
+    'no-use-before-define': 0,
+    'class-methods-use-this': 0,
+    'react/prefer-stateless-function': 0,
+    'arrow-body-style': 0,
+    'arrow-parens': 0,
+    'react/require-default-props': 0,
+    'react/destructuring-assignment': 0,
+    'react/jsx-no-bind': 0,
+    'react/prop-types': ['warn', { ignore: ['className', 'css', 'children', 'theme', 'map'] }],
+    'react/jsx-one-expression-per-line': 0,
+    'object-curly-newline': 0,
+    'import/no-named-as-default-member': 0,
+    'no-confusing-arrow': 0,
+    'function-paren-newline': 0,
+    'react/jsx-props-no-spreading': 0,
+    'react / state-in-constructor': 'off',
+    'react / static-property-placement': 'off',
+    'react / jsx-props-no-spreading': 'off',
+    'react/jsx-filename-extension': [
+      1,
+      {
+        extensions: ['.js', '.jsx'],
+      },
+    ],
+    'no-plusplus': [
+      'error',
+      {
+        allowForLoopAfterthoughts: true,
+      },
+    ],
+    'import/prefer-default-export': 0,
+    'jsx-a11y/accessible-emoji': 0,
+    'jsx-a11y/anchor-is-valid': 0,
+    'jsx-a11y/no-static-element-interactions': 0,
+    'jsx-a11y/click-events-have-key-events': 0,
+    'import/order': 0,
+    'react/sort-comp': [
+      1,
+      {
+        order: [
+          'propTypes',
+          'defaultProps',
+          'instance-variables',
+          'static-methods',
+          'lifecycle',
+          'everything-else',
+          'render',
+          '/^render.+$/',
+        ],
+      },
+    ],
+    'react/no-array-index-key': 0,
+  },
+};

src/index.js

@@ -0,0 +1,11 @@
+import scrollHandler from './modules/scrollHandler';
+import clock from './modules/clock';
+import countdownBanner from './modules/countdown';
+
+const app = () => {
+  scrollHandler();
+  clock();
+  countdownBanner();
+};
+
+app();

src/modules/clock.js

@@ -0,0 +1,22 @@
+import spacetime from 'spacetime';
+
+const clockContainer = document.querySelector('#clock p');
+
+const getTime = () => {
+  const d = spacetime(new Date(), 'Europe/Zurich');
+  return d.format('{hour-24-pad}:{minute-pad}:{second-pad}');
+};
+
+const setTime = () => {
+  clockContainer.innerHTML = `<span class="time">${getTime()}</span> (CEST)`;
+};
+
+const clock = () => {
+  if (clockContainer)
+  {
+    setTime();
+    setInterval(setTime, 1000);
+  }
+};
+
+export default clock;

src/modules/countdown.js

@@ -0,0 +1,37 @@
+import countdown from 'countdown';
+
+const banner = document.getElementById('full-banner');
+const cdTime = banner?.querySelector('.cd-time');
+let bannerVisible = false;
+
+function getCountdown() {
+  return countdown(
+    new Date(),
+    new Date('Wed Sep 18 2020 10:30:00 GMT+0200 (Central European Summer Time)'),
+    0,
+    3)
+    .toString();
+}
+
+function setCountdown() {
+  const cd = getCountdown();
+  if (cdTime.innerHTML !== cd) {
+    cdTime.innerHTML = cd;
+  }
+}
+
+const countdownBanner = () => {
+  if (banner) {
+    banner.classList.add('hidden');
+    getCountdown();
+
+    if (!bannerVisible) {
+      banner.classList.remove('hidden');
+      bannerVisible = true;
+    }
+
+    setInterval(setCountdown, 1000);
+  }
+}
+
+export default countdownBanner;

src/modules/scrollHandler.js

@@ -0,0 +1,16 @@
+export default () => {
+  if (window && document) {
+    const sideTitles = document.querySelectorAll('.side-title');
+
+    const handleScroll = function handleScroll() {
+      if (window.scrollY > 100) {
+        sideTitles.forEach((title) => title.classList.remove('hidden'));
+      } else {
+        sideTitles.forEach((title) => title.classList.add('hidden'));
+      }
+    };
+
+    handleScroll();
+    window.addEventListener('scroll', handleScroll);
+  }
+};