Drop Foundation and use Pico.css

.github/workflows/continuous-integration.yml

@@ -54,6 +54,14 @@ jobs:
       - name: "Install dependencies with Composer"
         uses: "ramsey/composer-install@v1"
 
+      - name: "Install Node"
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: "Install dependencies with Yarn"
+        run: "yarn install && yarn dev"
+
       - name: "Setup messenger queue"
         run: "php bin/console messenger:setup-transports --env=dev"
 

.github/workflows/coverage.yml

@@ -50,6 +50,14 @@ jobs:
       - name: "Install dependencies with Composer"
         uses: "ramsey/composer-install@v1"
 
+      - name: "Install Node"
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: "Install dependencies with Yarn"
+        run: "yarn install && yarn dev"
+
       - name: "Setup messenger queue"
         run: "php bin/console messenger:setup-transports --env=dev"
 

.gitignore

@@ -28,3 +28,10 @@
 .phpunit.result.cache
 /phpunit.xml
 ###< symfony/phpunit-bridge ###
+
+###> symfony/webpack-encore-bundle ###
+/node_modules/
+/public/build/
+npm-debug.log
+yarn-error.log
+###< symfony/webpack-encore-bundle ###

.nvmrc

@@ -1 +1 @@
-0.12.2
+14

README.md

@@ -97,6 +97,7 @@ You can find some of them in the [converter folder](https://github.com/j0k3r/f43
 ### Requirements
 
  - PHP >= 7.4 (with `pdo_mysql`)
+ - Nodejs 14 (for assets)
  - MySQL >= 5.7
  - [RabbitMQ](https://www.rabbitmq.com/), which is optional (see below)
  - [Supervisor](http://supervisord.org/) (only if you use RabbitMQ)
@@ -118,7 +119,7 @@ ADMINPASS="MY_HASHED_PASSWORD"
 ```
 
 > ⚠️ Don't forget to escape _understable_ variable, ie: all `$` following by a letter will be interpreted as a variable in PHP. If your hashed password is `$2y$13$BvprBNLfp6eKHtqLyN1.w.z214Q5LMEvF9LKJTn44hrMIBt3pzwNW`, the `$BvprBNLfp6eKHtqLyN1` part will be interpreted as a variable by PHP. You must escape it in your `.env.local`:
-> 
+>
 > ```
 > ADMINPASS="$2y$13\$BvprBNLfp6eKHtqLyN1.w.z214Q5LMEvF9LKJTn44hrMIBt3pzwNW"
 > ```
@@ -129,9 +130,9 @@ Follow these steps:
 git clone [email protected]:j0k3r/f43.me.git
 cd f43.me
 SYMFONY_ENV=prod composer install -o --no-dev
-npm install
+yarn install
 php bin/console doctrine:schema:create --env=prod
-./node_modules/gulp/bin/gulp.js
+yarn encore production
 ```
 
 #### Without RabbitMQ

assets/app.js

@@ -0,0 +1,84 @@
+const timeago = require('timeago.js')
+
+import './styles/app.scss'
+
+// handle timeago date on the public page
+if (document.querySelectorAll('.time-ago').length > 0) {
+    timeago.render(document.querySelectorAll('.time-ago'), { minInterval: 60 })
+}
+
+// handle show / hide of the textarea when testing config file
+const siteconfig = document.getElementById('siteconfig')
+if (siteconfig !== null) {
+    const siteconfigTextarea = siteconfig.childNodes[3]
+    if (siteconfigTextarea.value === '') {
+        siteconfigTextarea.style.display = 'none'
+    }
+
+    document.getElementById('try-siteconfig').onclick = function (event) {
+        event.preventDefault()
+
+        if (siteconfigTextarea.value != '') {
+            return false
+        }
+
+        if (siteconfigTextarea.style.display === 'none') {
+            siteconfigTextarea.style.display = 'block'
+        } else {
+            siteconfigTextarea.style.display = 'none'
+        }
+
+        return false
+    }
+}
+
+// display a confirm message when trying to delete something
+const deleteForm = document.querySelectorAll('.delete_form')
+if (deleteForm.length === 1) {
+    deleteForm[0].onsubmit = function () {
+        return window.confirm('Are you sure you want to do this action ?')
+    }
+}
+
+// handle preview of a feed
+const parsingResult = document.getElementById('preview-parsing-result')
+const previewParsing = document.getElementById('preview-parsing')
+if (previewParsing !== null) {
+    const url = previewParsing.dataset.url
+    const loader = '<a href="#" aria-busy="true">Loading content, please wait…</a>'
+
+    // internal parser
+    previewParsing.childNodes[1].onclick = async function (event) {
+        parsingResult.innerHTML = loader
+        event.preventDefault()
+
+        const response = await fetch(url + '?parser=internal', { method: 'GET' })
+
+        if (!response.ok) {
+            parsingResult.innerHTML = '<p class="error">Error while retrieving content…</a>'
+
+            return
+        }
+
+        const body = await response.text()
+
+        parsingResult.innerHTML = body
+    }
+    // external parser
+    previewParsing.childNodes[3].onclick = async function (event) {
+        parsingResult.innerHTML = loader
+        event.preventDefault()
+
+        const response = await fetch(url + '?parser=external', { method: 'GET' })
+
+        if (!response.ok) {
+            parsingResult.innerHTML = '<p class="error">Error while retrieving content…</a>'
+
+            return
+        }
+
+        const body = await response.text()
+
+        parsingResult.innerHTML = body
+    }
+}

assets/login.js

@@ -0,0 +1 @@
+import './styles/login.scss'

assets/modal.js

@@ -0,0 +1,111 @@
+/*
+ * Modal
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2021 - Licensed under MIT
+ */
+
+// Config
+const isOpenClass = 'modal-is-open';
+const openingClass = 'modal-is-opening';
+const closingClass = 'modal-is-closing';
+const animationDuration = 400; // ms
+let visibleModal = null;
+
+// Toggle modal
+const toggleModal = event => {
+  event.preventDefault();
+  const modal = document.getElementById(event.target.getAttribute('data-target'));
+  (typeof(modal) != 'undefined' && modal != null)
+    && isModalOpen(modal) ? closeModal(modal) : openModal(modal)
+}
+
+// Is modal open
+const isModalOpen = modal => {
+  return modal.hasAttribute('open') && modal.getAttribute('open') != 'false' ? true : false;
+}
+
+// Open modal
+const openModal = modal => {
+  if (isScrollbarVisible()) {
+    document.documentElement.style.setProperty('--scrollbar-width', `${getScrollbarWidth()}px`);
+  }
+  document.documentElement.classList.add(isOpenClass, openingClass);
+  setTimeout(() => {
+    visibleModal = modal;
+    document.documentElement.classList.remove(openingClass);
+  }, animationDuration);
+  modal.setAttribute('open', true);
+}
+
+// Close modal
+const closeModal = modal => {
+  visibleModal = null;
+  document.documentElement.classList.add(closingClass);
+  setTimeout(() => {
+    document.documentElement.classList.remove(closingClass, isOpenClass);
+    document.documentElement.style.removeProperty('--scrollbar-width');
+    modal.removeAttribute('open');
+  }, animationDuration);
+}
+
+// Close with a click outside
+document.addEventListener('click', event => {
+  if (visibleModal != null) {
+    const modalContent = visibleModal.querySelector('article');
+    const isClickInside = modalContent.contains(event.target);
+    !isClickInside && closeModal(visibleModal);
+  }
+});
+
+// Close with Esc key
+document.addEventListener('keydown', event => {
+  if (event.key === 'Escape' && visibleModal != null) {
+    closeModal(visibleModal);
+  }
+});
+
+// Get scrollbar width
+const getScrollbarWidth = () => {
+  // Creating invisible container
+  const outer = document.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.overflow = 'scroll'; // forcing scrollbar to appear
+  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
+  document.body.appendChild(outer);
+
+  // Creating inner element and placing it in the container
+  const inner = document.createElement('div');
+  outer.appendChild(inner);
+
+  // Calculating difference between container's full width and the child width
+  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
+
+  // Removing temporary elements from the DOM
+  outer.parentNode.removeChild(outer);
+
+  return scrollbarWidth;
+}
+
+// Is scrollbar visible
+const isScrollbarVisible = () => {
+  return document.body.scrollHeight > screen.height;
+}
+
+const openModalNodes = document.querySelectorAll('.open-modal')
+if (openModalNodes.length > 0) {
+    const previewContainer = document.getElementById('modal-preview-item').querySelector('article')
+    for (var i = openModalNodes.length - 1; i >= 0; i--) {
+        openModalNodes[i].onclick = async function (event) {
+            previewContainer.innerHTML = '<a href="#" aria-busy="true">Loading content, please wait…</a>'
+
+            toggleModal(event)
+
+            const response = await fetch(event.target.dataset.url, { method: 'GET' })
+
+            const body = await response.text()
+
+            previewContainer.innerHTML = body
+        }
+    }
+}