Configure CI build via GitHub workflow, setup code style checks for C…

…SS and JavaScript
patrickrobrecht · Mar 30, 2024 · 3e11d26 · 3e11d26
1 parent 7b30822
commit 3e11d26
Show file tree

Hide file tree

Showing 8 changed files with 8,114 additions and 176 deletions.
diff --git a/.github/workflows/code-style.yml b/.github/workflows/code-style.yml
@@ -0,0 +1,33 @@
+name: Check code style
+
+on: push
+
+jobs:
+  code-style:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: 8.2
+
+      - name: Install Composer dependencies
+        run: composer install --prefer-dist --no-interaction
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install npm dependencies
+        run: npm clean-install
+
+      - name: Check code style for PHP
+        run: composer cs
+
+      - name: Check code style for CSS and JavaScript
+        run: npm run cs
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
+/node_modules/
 /vendor/
 *.min.css
 *.min.js
diff --git a/.travis.yml b/.travis.yml
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 - Updated dependencies, including the Chartist library used for the charts
+- Configure CI build via GitHub workflow, setup code style checks for CSS and JavaScript
 
 
 ## Version 1.1.4

diff --git a/assets/functions.js b/assets/functions.js
@@ -1,149 +1,174 @@
+// eslint-disable-next-line no-unused-vars
 function posts_and_users_stats_export_table_to_csv(table, filename) {
-    // Temporary delimiters unlikely to be typed by keyboard to avoid accidentally splitting the actual contents
-    const tmpColDelim = String.fromCharCode(11),
-        tmpRowDelim = String.fromCharCode(0),
-        // actual delimiters for CSV
-        colDelim = '","',
-        rowDelim = '"\r\n"',
-        forbiddenStartCharacters = ['+', '-', '=', '@'],
-        rows = table.find('tr'),
-        csv = '"' + rows
-            .map(function (i, row) {
-                const $row = jQuery(row),
-                    $cols = $row.find('td,th');
-                return $cols
-                    .map(function (j, col) {
-                        const $col = jQuery(col);
-                        let text = $col.text();
-                        // Escape double quotes and trim result.
-                        text = text.replace(/"/g, '""').trim();
-                        // Prevent CSV injection.
-                        let startCharacter = text.substring(0, 1);
-                        if (forbiddenStartCharacters.includes(startCharacter)) {
-                            text = "'" + text;
-                        }
-                        return text;
-                    })
-                    .get()
-                    .join(tmpColDelim);
-            }).get()
-            .join(tmpRowDelim)
-            .split(tmpRowDelim)
-            .join(rowDelim)
-            .split(tmpColDelim)
-            .join(colDelim) + '"',
-        csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
-    jQuery(this).attr({
-        'download': filename,
-        'href': csvData
-    });
+	// Temporary delimiters unlikely to be typed by keyboard to avoid accidentally splitting the actual contents
+	const tmpColDelim = String.fromCharCode(11),
+		tmpRowDelim = String.fromCharCode(0),
+		// actual delimiters for CSV
+		colDelim = '","',
+		rowDelim = '"\r\n"',
+		forbiddenStartCharacters = ['+', '-', '=', '@'],
+		rows = table.find('tr'),
+		csv =
+			'"' +
+			rows
+				.map(function (i, row) {
+					const $row = jQuery(row),
+						$cols = $row.find('td,th');
+					return $cols
+						.map(function (j, col) {
+							const $col = jQuery(col);
+							let text = $col.text();
+							// Escape double quotes and trim result.
+							text = text.replace(/"/g, '""').trim();
+							// Prevent CSV injection.
+							const startCharacter = text.substring(0, 1);
+							if (
+								forbiddenStartCharacters.includes(
+									startCharacter
+								)
+							) {
+								text = "'" + text;
+							}
+							return text;
+						})
+						.get()
+						.join(tmpColDelim);
+				})
+				.get()
+				.join(tmpRowDelim)
+				.split(tmpRowDelim)
+				.join(rowDelim)
+				.split(tmpColDelim)
+				.join(colDelim) +
+			'"',
+		csvData =
+			'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
+	jQuery(this).attr({
+		download: filename,
+		href: csvData,
+	});
 }
 
-function posts_and_users_stats_bar_chart(div, xData, yData, xAxisTitle, yAxisTitle) {
-    const data = {
-        labels: xData,
-        series: [
-            yData
-        ]
-    };
+// eslint-disable-next-line no-unused-vars
+function posts_and_users_stats_bar_chart(
+	div,
+	xData,
+	yData,
+	xAxisTitle,
+	yAxisTitle
+) {
+	const data = {
+		labels: xData,
+		series: [yData],
+	};
 
-    const options = {
-        seriesBarDistance: 20,
-        chartPadding: {
-            top: 20,
-            right: 30,
-            bottom: 30,
-            left: 30
-        },
-        axisY: {
-            onlyInteger: true
-        },
-        plugins: [
-            Chartist.plugins.ctAxisTitle({
-                axisX: {
-                    axisTitle: xAxisTitle,
-                    axisClass: 'ct-axis-title ct-x-axis-title',
-                    offset: {
-                        x: 0,
-                        y: 40
-                    },
-                    textAnchor: 'middle'
-                },
-                axisY: {
-                    axisTitle: yAxisTitle,
-                    axisClass: 'ct-axis-title ct-y-axis-title',
-                    offset: {
-                        x: 0,
-                        y: 25
-                    },
-                    flipTitle: true
-                }
-            })
-        ]
-    };
+	const options = {
+		seriesBarDistance: 20,
+		chartPadding: {
+			top: 20,
+			right: 30,
+			bottom: 30,
+			left: 30,
+		},
+		axisY: {
+			onlyInteger: true,
+		},
+		plugins: [
+			Chartist.plugins.ctAxisTitle({
+				axisX: {
+					axisTitle: xAxisTitle,
+					axisClass: 'ct-axis-title ct-x-axis-title',
+					offset: {
+						x: 0,
+						y: 40,
+					},
+					textAnchor: 'middle',
+				},
+				axisY: {
+					axisTitle: yAxisTitle,
+					axisClass: 'ct-axis-title ct-y-axis-title',
+					offset: {
+						x: 0,
+						y: 25,
+					},
+					flipTitle: true,
+				},
+			}),
+		],
+	};
 
-    const responsiveOptions = [
-        ['screen and (max-width: 640px)', {
-            seriesBarDistance: 5,
-            axisX: {
-                labelInterpolationFnc: function (value) {
-                    return value[0];
-                }
-            }
-        }]
-    ];
+	const responsiveOptions = [
+		[
+			'screen and (max-width: 640px)',
+			{
+				seriesBarDistance: 5,
+				axisX: {
+					labelInterpolationFnc(value) {
+						return value[0];
+					},
+				},
+			},
+		],
+	];
 
-    new Chartist.BarChart(div, data, options, responsiveOptions);
+	new Chartist.BarChart(div, data, options, responsiveOptions);
 }
 
-function posts_and_users_stats_time_line_chart(div, seriesData, dateFormat, xAxisTitle, yAxisTitle) {
-    const data = {
-        series: [
-            {
-                name: 'series-1',
-                data: seriesData
-            }
-        ]
-    };
+// eslint-disable-next-line no-unused-vars
+function posts_and_users_stats_time_line_chart(
+	div,
+	seriesData,
+	dateFormat,
+	xAxisTitle,
+	yAxisTitle
+) {
+	const data = {
+		series: [
+			{
+				name: 'series-1',
+				data: seriesData,
+			},
+		],
+	};
 
-    const options = {
-        chartPadding: {
-            top: 20,
-            right: 30,
-            bottom: 30,
-            left: 30
-        },
-        axisX: {
-            type: Chartist.FixedScaleAxis,
-            divisor: 5,
-            labelInterpolationFnc: function (value) {
-                return moment(value).format(dateFormat);
-            }
-        },
-        lineSmooth: Chartist.Interpolation.step(),
-        plugins: [
-            Chartist.plugins.ctAxisTitle({
-                axisX: {
-                    axisTitle: xAxisTitle,
-                    axisClass: 'ct-axis-title ct-x-axis-title',
-                    offset: {
-                        x: 0,
-                        y: 40
-                    },
-                    textAnchor: 'middle'
-                },
-                axisY: {
-                    axisTitle: yAxisTitle,
-                    axisClass: 'ct-axis-title ct-y-axis-title',
-                    offset: {
-                        x: 0,
-                        y: 25
-                    },
-                    flipTitle: true
-                }
-            })
-        ]
-    };
+	const options = {
+		chartPadding: {
+			top: 20,
+			right: 30,
+			bottom: 30,
+			left: 30,
+		},
+		axisX: {
+			type: Chartist.FixedScaleAxis,
+			divisor: 5,
+			labelInterpolationFnc(value) {
+				return moment(value).format(dateFormat);
+			},
+		},
+		lineSmooth: Chartist.Interpolation.step(),
+		plugins: [
+			Chartist.plugins.ctAxisTitle({
+				axisX: {
+					axisTitle: xAxisTitle,
+					axisClass: 'ct-axis-title ct-x-axis-title',
+					offset: {
+						x: 0,
+						y: 40,
+					},
+					textAnchor: 'middle',
+				},
+				axisY: {
+					axisTitle: yAxisTitle,
+					axisClass: 'ct-axis-title ct-y-axis-title',
+					offset: {
+						x: 0,
+						y: 25,
+					},
+					flipTitle: true,
+				},
+			}),
+		],
+	};
 
-    new Chartist.LineChart(div, data, options)
+	new Chartist.LineChart(div, data, options);
 }