Remove deprecations, upgrade node to 16.x, replace markdown lib, remove jquery stuff, fixes #719

---------

Co-authored-by: Yanick Minder <[email protected]>
Co-authored-by: Niklas Jäggi <[email protected]>
Co-authored-by: Mountain Star <[email protected]>
Co-authored-by: megli2 <[email protected]>

Author: 4 people

.github/workflows/build.yml

@@ -52,7 +52,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: '14.18.0'
+          node-version: '16.16.0'
 
       # Npm global packages caching
       - name: Cache global npm modules
@@ -82,6 +82,9 @@ jobs:
       - name: Install bundler
         run: gem install bundler:2.3.13
 
+      - name: Set node_options
+        run: export NODE_OPTIONS=--openssl-legacy-provider
+
       - name: Create database
         run: bundle exec rails db:setup
 

CHANGELOG.md

@@ -1 +1 @@
-[Changelog](frontend/markdown/CHANGELOG.md)
+public/CHANGELOG.md

Dockerfile

@@ -10,7 +10,7 @@ ARG BUNDLE_WITHOUT='development:test'
 ARG BUNDLER_VERSION=2.3.13
 
 # install nodejs
-RUN curl -sL https://deb.nodesource.com/setup_14.x | bash - 
+RUN curl -sL https://deb.nodesource.com/setup_16.x | bash - 
 RUN apt-get install -y nodejs
 
 # yarn sources

VERSION

@@ -1 +1 @@
-5.2
+5.0

config/docker/development/Ember.dockerfile

@@ -1,4 +1,4 @@
-FROM danlynn/ember-cli:3.28.2-node_14.18
+FROM danlynn/ember-cli:4.5.0-node_16.16
 
 RUN chown 1000:1000 /myapp
 

frontend/app/components/changelog.js

@@ -1,3 +1,16 @@
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 
-export default class Changelog extends Component {}
+export default class Changelog extends Component {
+  @tracked content = "";
+
+  constructor() {
+    super(...arguments);
+    this.loadMarkdown();
+  }
+
+  async loadMarkdown() {
+    const response = await fetch("./CHANGELOG.md");
+    this.content = await response.text();
+  }
+}

frontend/app/components/folder/show.js

@@ -58,16 +58,15 @@ export default class ShowComponent extends Component {
   scrollToFolder() {
     if (!this.isSelectedFolder) return;
 
-    const SPEED = 700;
     const FOLDER_ID = this.args.folder.id;
-    const OFFSET = $(`#folder-header-${FOLDER_ID}`).offset().top - 15;
+    const element = document.querySelector(`#folder-header-${FOLDER_ID}`);
+    const rect = element.getBoundingClientRect();
+    const OFFSET = rect.top + document.body.getBoundingClientRect().top - 15;
 
-    $("html, body").animate(
-      {
-        scrollTop: OFFSET
-      },
-      SPEED
-    );
+    window.scrollTo({
+      top: OFFSET,
+      behavior: "smooth" // Enable smooth scrolling behavior
+    });
   }
 
   get isExpanded() {

frontend/app/components/password-strength-meter.js

@@ -1,28 +1,28 @@
-import { inject as service } from "@ember/service";
 import Component from "@ember/component";
 import { tracked } from "@glimmer/tracking";
 import { isPresent } from "@ember/utils";
+import zxcvbn from "zxcvbn";
 
 export default class PasswordStrengthMeterComponent extends Component {
-  @service passwordStrength;
-
   @tracked barWidth = 0;
   @tracked score = 0;
 
   constructor() {
     super(...arguments);
+  }
+
+  get passwordStrengthScore() {
+    const { score } = zxcvbn(this.password);
 
-    this.passwordStrength.load();
+    return score;
   }
 
   didReceiveAttrs() {
     super.didReceiveAttrs();
     if (isPresent(this.password) && this.password !== "") {
-      this.passwordStrength.strength(this.password).then((strength) => {
-        this.score = strength.score;
-        if (this.score === 0) this.score = 1;
-        this.barWidth = this.score * 25;
-      });
+      this.score = this.passwordStrengthScore;
+      if (this.score === 0) this.score = 1;
+      this.barWidth = this.score * 25;
     } else {
       this.score = 0;
       this.barWidth = 0;

frontend/app/components/side-nav-bar.js

@@ -22,8 +22,15 @@ export default class SideNavBar extends Component {
 
   setupModal(element) {
     /* eslint-disable no-undef  */
-    $(element).on("show.bs.collapse", ".collapse", function () {
-      $(element).find(".collapse.in").collapse("hide");
+    // Attach the event handler to the element
+    element.addEventListener("show.bs.collapse", function () {
+      // Find visible collapse elements within the parent container
+      const visibleCollapses = element.querySelectorAll(".collapse.in");
+
+      // Hide the visible collapse elements
+      visibleCollapses.forEach(function (collapse) {
+        collapse.classList.remove("in");
+      });
     });
     /* eslint-enable no-undef  */
   }

frontend/app/helpers/markdown-to-html.js

@@ -0,0 +1,7 @@
+import { helper } from "@ember/component/helper";
+import MarkdownIt from "markdown-it";
+
+export default helper(function markdownToHtml([markdown]) {
+  const md = new MarkdownIt();
+  return md.render(markdown);
+});