Surcharge du javascript.

Ai enlevé preque toutes les références à jquery. M'en rete qu'une mais ça va aps être trop dur je pense

gulpfile.js

@@ -0,0 +1,92 @@
+'use strict';
+
+const gulp = require('gulp');
+const $ = require('gulp-load-plugins')();
+
+require('es6-promise').polyfill();
+
+const webpack = require("webpack");
+const webpackStream = require("webpack-stream");
+const webpackConfig = require("./webpack.config");
+
+const src_paths = {
+  sass: ['src/scss/*.scss'],
+  script: ['src/js/*.js'],
+};
+
+const dest_paths = {
+  style: 'static/css/',
+  script: 'static/js/',
+};
+
+function lint_sass() {
+  return gulp.src(src_paths.sass)
+    .pipe($.plumber({
+      errorHandler: function(err) {
+        console.log(err.messageFormatted);
+        this.emit('end');
+      }
+    }))
+    .pipe($.stylelint({
+      config: {
+        extends: [
+          "stylelint-config-recommended",
+          "stylelint-scss",
+          "stylelint-config-recommended-scss"
+        ],
+        rules: {
+          "block-no-empty": null,
+          "no-descending-specificity": null
+        }
+      },
+      reporters: [{
+        formatter: 'string',
+        console: true
+      }]
+    }));
+};
+
+function style_sass() {
+  return gulp.src(src_paths.sass)
+    .pipe($.plumber({
+      errorHandler: function(err) {
+        console.log(err.messageFormatted);
+        this.emit('end');
+      }
+    }))
+    .pipe($.sass({
+      outputStyle: 'expanded'
+    }).on( 'error', $.sass.logError ))
+    .pipe($.autoprefixer({
+        cascade: false
+    }))
+    .pipe(gulp.dest(dest_paths.style))
+    .pipe($.cssnano())
+    .pipe($.rename({ suffix: '.min' }))
+    .pipe(gulp.dest(dest_paths.style));
+}
+
+function lint_eslint() {
+  return gulp.src(src_paths.script)
+    .pipe($.eslint.format())
+    .pipe($.eslint.failAfterError());
+};
+
+function script() {
+  return webpackStream(webpackConfig, webpack)
+    .on('error', function (e) {
+      this.emit('end');
+    })
+    .pipe(gulp.dest("dist"));
+};
+
+function watch_files(done) {
+  gulp.watch(src_paths.sass).on('change', gulp.series(lint_sass, style_sass));
+  gulp.watch(src_paths.script).on('change', gulp.series(lint_eslint, script));
+}
+
+exports.lint = gulp.parallel(lint_sass, lint_eslint);
+exports.style = style_sass;
+exports.script = script;
+exports.watch = watch_files;
+exports.default = gulp.series(gulp.parallel(lint_sass, lint_eslint), gulp.parallel(style_sass, script));

layouts/partials/head.html

@@ -18,8 +18,6 @@
 <link rel="shortcut icon" href="{{ "favicon.png" | absURL }}">
 {{ partial "meta/chroma.html" . -}}
 <script defer src="{{ .Site.BaseURL }}/js/fontawesome6/all.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/jquery.easing@1.4.1/jquery.easing.min.js" integrity="sha256-H3cjtrm/ztDeuhCN9I4yh4iN2Ybx/y1RM7rMmAesA0k=" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js" integrity="sha256-4XodgW4TwIJuDtf+v6vDJ39FVxI0veC/kSCCmnFp7ck=" crossorigin="anonymous"></script>
 <script src="{{ "js/bundle.js" | absURL }}"></script>
 {{- partial "meta/tag-manager.html" . -}}

package.json

@@ -1,5 +1,122 @@
 {
+  "name": "accueil-stan",
+  "version": "0.1.0",
+  "description": "mon site",
+  "main": "gulpfile.js",
+  "author": "Thingsym",
+  "license": "MIT",
   "devDependencies": {
-    "flexbox-grid-mixins": "^0.3.4"
+    "@babel/core": "^7.24.0",
+    "@babel/plugin-transform-runtime": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "autoprefixer": "^10.4.18",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^9.1.3",
+    "browser-sync": "~3.0.2",
+    "chokidar-cli": "^3.0.0",
+    "core-js": "^3.36.0",
+    "cross-env": "^7.0.3",
+    "cssnano": "^6.1.0",
+    "es6-promise": "~4.2.8",
+    "eslint": "^8.57.0",
+    "flexbox-grid-mixins": "~0.3.4",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^9.0.0",
+    "gulp-cssnano": "~2.1.3",
+    "gulp-eslint": "^6.0.0",
+    "gulp-load-plugins": "~2.0.8",
+    "gulp-plumber": "~1.2.1",
+    "gulp-rename": "~2.0.0",
+    "gulp-sass": "~5.1.0",
+    "gulp-stylelint": "^13.0.0",
+    "gulp-util": "^1.0.0",
+    "gulp-watch": "^5.0.1",
+    "npm-check-updates": "^16.14.15",
+    "npm-run-all": "^4.1.5",
+    "postcss-cli": "^11.0.0",
+    "run-sequence": "~2.2.1",
+    "sass": "^1.71.1",
+    "stylelint": "^16.16.0",
+    "stylelint-config-recommended": "^14.0.0",
+    "stylelint-config-recommended-scss": "^14.0.0",
+    "stylelint-scss": "^6.2.1",
+    "webpack": "^5.90.3",
+    "webpack-cli": "^5.1.4",
+    "webpack-stream": "^7.0.0"
+  },
+  "browserslist": [
+    "last 2 versions"
+  ],
+  "postcss": {
+    "map": true,
+    "plugins": {
+      "postcss-import": {},
+      "autoprefixer": {
+        "browsers": [
+          "last 2 Chrome versions",
+          "last 2 Firefox versions",
+          "last 2 Safari versions",
+          "last 2 Edge versions",
+          "last 2 Opera versions",
+          "last 2 iOS versions",
+          "last 1 Android version",
+          "last 1 ChromeAndroid version",
+          "ie 11",
+          "> 1%"
+        ]
+      }
+    }
+  },
+  "stylelint": {
+    "extends": [
+      "stylelint-config-recommended",
+      "stylelint-scss",
+      "stylelint-config-recommended-scss"
+    ],
+    "rules": {
+      "no-descending-specificity": null,
+      "no-duplicate-selectors": null,
+      "block-no-empty": null
+    }
+  },
+  "eslintConfig": {
+    "env": {
+      "²ser": true,
+      "es6": true
+    },
+    "extends": "eslint:recommended",
+    "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly",
+      "jQuery": true,
+      "$": false
+    },
+    "parserOptions": {
+      "ecmaVersion": 2018
+    },
+    "rules": {
+      "no-unused-vars": "off"
+    }
+  },
+  "scripts": {
+    "default": "gulp --tasks",
+    "ncu": "ncu",
+    "gulp": "gulp",
+    "build": "run-p build:*",
+    "build:js": "npm-run-all -p webpack",
+    "build:css": "run-p sass:**",
+    "webpack": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
+    "sass:style": "sass src/scss/theme.scss static/css/theme.css --style expanded --no-source-map && postcss --use autoprefixer --no-map -r static/css/theme.css",
+    "sass:style:minify": "sass src/scss/theme.scss static/css/theme.min.css --style expanded --no-source-map && postcss --use autoprefixer --use cssnano --no-map -r static/css/theme.min.css",
+    "sass:chroma": "sass src/scss/chroma.scss static/css/chroma.css --style expanded --no-source-map && postcss --use autoprefixer --no-map -r static/css/chroma.css",
+    "sass:chroma:minify": "sass src/scss/chroma.scss static/css/chroma.min.css --style expanded --no-source-map && postcss --use autoprefixer --use cssnano --no-map -r static/css/chroma.min.css",
+    "lint": "run-p lint:*",
+    "lint:es": "eslint static/js/bundle.js",
+    "lint:es:fix": "eslint static/js/bundle.js --fix",
+    "lint:css": "stylelint static/css/*.css css/**/*.css !static/css/*.min.css !css/**/*.min.css",
+    "lint:scss": "stylelint src/scss/*.scss src/scss/**/*.scss",
+    "watch": "run-p watch:*",
+    "watch:css": "chokidar \"src/scss/*.scss\" \"src/scss/**/*.scss\" -c \"npm run build:css\" --initial --polling",
+    "watch:js": "chokidar \"src/js/*.js\" \"src/js/**/*.js\" -c \"npm run build:js\" --initial --polling"
   }
 }

src/js/code.js

@@ -0,0 +1,33 @@
+(function() {
+  window.onload = function() {
+    new ClipboardJS('.copy', {
+      target: function(trigger) {
+        return trigger.nextElementSibling;
+      }
+      }).on('success', function(e) {
+        showTooltip(e.trigger, 'Copied!');
+        e.clearSelection();
+      }).on('error', function(e) {
+        console.error('Action:', e.action);
+        console.error('Trigger:', e.trigger);
+    });
+  }
+
+  document.addEventListener('DOMContentLoaded', function(){
+    const btns = document.querySelectorAll('.copy');
+
+    btns.forEach(( el ) => {
+      el.addEventListener('animationend', clearTooltip);
+    });
+  });
+
+  function showTooltip(e, msg) {
+    e.setAttribute('class', 'copy-btn copy tooltipped');
+    e.setAttribute('aria-label', msg);
+  }
+
+  function clearTooltip(e) {
+    e.currentTarget.setAttribute('class', 'copy-btn copy');
+    e.currentTarget.setAttribute('aria-label', 'Copy this code.');
+  }
+})();

src/js/headerlink.js

@@ -0,0 +1,22 @@
+(function() {
+  document.addEventListener('DOMContentLoaded', function(){
+    const targetElements = document.querySelector('main').querySelectorAll('h1, h2, h3, h4, h5, h6');
+
+    targetElements.forEach(( el ) => {
+      if (el.id) {
+        const headerlink = document.createElement('a');
+        headerlink.setAttribute('class', 'headerlink');
+        headerlink.setAttribute('href', '#' + el.id);
+        headerlink.setAttribute('title', 'Permalink to this headline');
+
+        const icon = document.createElement('i');
+        icon.setAttribute('class', 'fas fa-hashtag');
+        icon.setAttribute('aria-hidden', 'true');
+
+        headerlink.append(icon);
+
+        el.append(headerlink);
+      }
+    });
+  });
+})();

src/js/keydown-nav.js

@@ -0,0 +1,18 @@
+(function() {
+  document.addEventListener('DOMContentLoaded', function(){
+    const nav_prev = document.querySelector('.nav-prev');
+    const nav_next = document.querySelector('.nav-next');
+
+    // prev links - left arrow key
+    document.addEventListener( 'keydown', event => {
+      if (nav_prev && event.key === 'ArrowLeft') {
+        location.href = nav_prev.getAttribute('href');
+      }
+
+      // next links - right arrow key
+      if (nav_next && event.key === 'ArrowRight') {
+        location.href = nav_next.getAttribute('href');
+      }
+    });
+  });
+})();

src/js/main.js

@@ -0,0 +1,4 @@
+require( './sidebar-menu.js' );
+require( './keydown-nav.js' );
+require( './headerlink.js' );
+require( './code.js' );

src/js/sidebar-menu.js

@@ -0,0 +1,22 @@
+(function() {
+  document.addEventListener('DOMContentLoaded', function(){
+    let slideMenu = document.querySelector(".slide-menu");
+    slideMenu.addEventListener("click", function(event) {
+      let target = event.target;
+      if (target.classList.contains("mark")) {
+        event.preventDefault()
+        let subMenu = target.parentNode.parentNode.querySelector(".sub-menu");
+        let text = "";
+        if (target.innerHTML === "-") {
+          text = "+";
+          subMenu.style.display = "none";
+        }
+        if (target.innerHTML === "+") {
+          text = "-";
+          subMenu.style.display = "unset";
+        }
+        target.innerHTML = text;
+      }
+    })
+  });
+})();

static/css/theme.css

@@ -43,6 +43,7 @@ h1 {
  * 2. Show the overflow in Edge and IE.
  */
 hr {
+  -webkit-box-sizing: content-box;
           box-sizing: content-box; /* 1 */
   height: 0; /* 1 */
   overflow: visible; /* 2 */
@@ -76,6 +77,7 @@ abbr[title] {
   border-bottom: none; /* 1 */
   /* stylelint-disable */
   text-decoration: underline; /* 2 */
+  -webkit-text-decoration: underline dotted;
           text-decoration: underline dotted; /* 2 */
   /* stylelint-enable */
 }
@@ -217,6 +219,7 @@ fieldset {
  *    `fieldset` elements in all browsers.
  */
 legend {
+  -webkit-box-sizing: border-box;
           box-sizing: border-box; /* 1 */
   color: inherit; /* 2 */
   display: table; /* 1 */
@@ -245,6 +248,7 @@ textarea {
  */
 [type=checkbox],
 [type=radio] {
+  -webkit-box-sizing: border-box;
           box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
 }
@@ -318,6 +322,7 @@ template {
 		Reset
 *-----------------------*/
 * {
+  -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
 
@@ -391,6 +396,7 @@ fieldset {
 		Element v1.0.0-custom
 *-----------------------*/
 * {
+  -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
 
@@ -399,6 +405,7 @@ fieldset {
   line-height: 1.6666666667;
   color: #000;
   font-family: var(--custom-font-family-base, -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "メイリオ", Meiryo, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+  -webkit-font-feature-settings: "pwid";
           font-feature-settings: "pwid";
 }
 
@@ -688,34 +695,58 @@ body {
 .container {
   width: 100%;
   height: 100%;
+  -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: column nowrap;
           flex-flow: column nowrap;
   margin: auto;
 }
 
 .content-container {
+  -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 auto;
           flex: 1 0 auto;
   box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
           justify-content: center;
 }
 
 main {
+  -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 75%;
           flex: 0 0 75%;
   max-width: 75%;
 }
 main:only-child {
+  -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 100%;
           flex: 0 0 100%;
   max-width: 100%;
 }
 
 .sidebar {
+  -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 25%;
           flex: 0 0 25%;
+  -webkit-box-ordinal-group: 0;
+      -ms-flex-order: -1;
           order: -1;
   overflow-x: hidden;
   overflow-y: scroll;
@@ -723,25 +754,45 @@ main:only-child {
 
 @media screen and (max-width: 896px) {
   .content-container {
+    -webkit-box-sizing: border-box;
             box-sizing: border-box;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-flow: column nowrap;
             flex-flow: column nowrap;
   }
   main {
+    -webkit-box-sizing: border-box;
             box-sizing: border-box;
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
             flex: 0 0 auto;
     min-width: 100%;
   }
   .sidebar {
+    -webkit-box-sizing: border-box;
             box-sizing: border-box;
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
             flex: 0 0 auto;
+    -webkit-box-ordinal-group: 2;
+        -ms-flex-order: 1;
             order: 1;
   }
 }
 .pagination {
+  -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
           justify-content: space-between;
   font-weight: bold;
 }
@@ -751,9 +802,17 @@ main:only-child {
 
 @media screen and (max-width: 480px) {
   .pagination {
+    -webkit-box-sizing: border-box;
             box-sizing: border-box;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-flow: column nowrap;
             flex-flow: column nowrap;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
             align-items: center;
   }
   .nav-next {
@@ -972,9 +1031,15 @@ figure > figcaption h4 {
 .ais-Pagination-list {
   list-style: none;
   padding-left: 0;
+  -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -ms-flex-wrap: wrap;
       flex-wrap: wrap;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
           justify-content: center;
 }
 
@@ -983,12 +1048,19 @@ figure > figcaption h4 {
 }
 
 .code {
+  -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
 .code .filename {
+  -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 75%;
           flex: 0 0 75%;
   max-width: 75%;
   font-size: 80%;
@@ -1007,7 +1079,10 @@ figure > figcaption h4 {
   outline: none;
 }
 .code .code-content {
+  -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 100%;
           flex: 0 0 100%;
   max-width: 100%;
 }
@@ -1020,12 +1095,20 @@ figure > figcaption h4 {
   position: absolute;
   left: 50%;
   top: -1.8rem;
+  -webkit-transform: translate(-50%, 0);
           transform: translate(-50%, 0);
   font-size: 0.75rem;
   padding: 4px 10px 6px 10px;
+  -webkit-animation: fade-tooltip 0.5s 1s 1 forwards;
           animation: fade-tooltip 0.5s 1s 1 forwards;
 }
 
+@-webkit-keyframes fade-tooltip {
+  to {
+    opacity: 0;
+  }
+}
+
 @keyframes fade-tooltip {
   to {
     opacity: 0;
@@ -1087,8 +1170,14 @@ header .github {
   font-size: 80%;
 }
 .global-menu li.parent:hover > ul.sub-menu {
+  -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: column nowrap;
           flex-flow: column nowrap;
 }
 @media screen and (max-width: 480px) {
@@ -1221,5 +1310,3 @@ main {
   text-align: right;
   color: #999;
 }
-
-/*# sourceMappingURL=theme.css.map */

static/js/bundle.js

@@ -0,0 +1 @@
+!function(){var e={127:function(){document.addEventListener("DOMContentLoaded",(function(){var e=document.querySelector(".nav-prev"),t=document.querySelector(".nav-next");document.addEventListener("keydown",(function(n){e&&"ArrowLeft"===n.key&&(location.href=e.getAttribute("href")),t&&"ArrowRight"===n.key&&(location.href=t.getAttribute("href"))}))}))},219:function(){!function(){function e(e){e.currentTarget.setAttribute("class","copy-btn copy"),e.currentTarget.setAttribute("aria-label","Copy this code.")}window.onload=function(){new ClipboardJS(".copy",{target:function(e){return e.nextElementSibling}}).on("success",(function(e){!function(e){e.setAttribute("class","copy-btn copy tooltipped"),e.setAttribute("aria-label","Copied!")}(e.trigger),e.clearSelection()})).on("error",(function(e){console.error("Action:",e.action),console.error("Trigger:",e.trigger)}))},document.addEventListener("DOMContentLoaded",(function(){document.querySelectorAll(".copy").forEach((function(t){t.addEventListener("animationend",e)}))}))}()},447:function(){document.addEventListener("DOMContentLoaded",(function(){document.querySelector("main").querySelectorAll("h1, h2, h3, h4, h5, h6").forEach((function(e){if(e.id){var t=document.createElement("a");t.setAttribute("class","headerlink"),t.setAttribute("href","#"+e.id),t.setAttribute("title","Permalink to this headline");var n=document.createElement("i");n.setAttribute("class","fas fa-hashtag"),n.setAttribute("aria-hidden","true"),t.append(n),e.append(t)}}))}))},738:function(){document.addEventListener("DOMContentLoaded",(function(){document.querySelector(".slide-menu").addEventListener("click",(function(e){var t=e.target;if(t.classList.contains("mark")){e.preventDefault();var n=t.parentNode.parentNode.querySelector(".sub-menu"),r="";"-"===t.innerHTML&&(r="+",n.style.display="none"),"+"===t.innerHTML&&(r="-",n.style.display="unset"),t.innerHTML=r}}))}))}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n(738),n(127),n(447),n(219)}();

webpack.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  mode: "production",
+  entry: './src/js/main.js',
+  output: {
+    filename: '../static/js/bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /.jsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+            plugins: ['@babel/plugin-transform-runtime']
+          }
+        }
+      }
+    ],
+  },
+};