Commit b266f435 authored by Jelle van der Waa's avatar Jelle van der Waa 🚧

Move from webpack to budo and ruby-sass

Instead of using webpack with sass hacked in, switch to a simpler setup
with budo for JavaScript, ruby-sass for sass watching/creation.
Introduce a simple Makefile and script to start all required development
services.
parent b2d0ce1a
/node_modules
/dist/main.js
/dist/css
/dist
/public/bundle*
.sass-cache
......@@ -4,10 +4,16 @@ localhost:8881 {
gzip
root dist
proxy /api https://reproducible.archlinux.org/ {
transparent
}
proxy / 127.0.0.1:9966 {
transparent
}
proxy /repro https://reproducible.archlinux.org/ {
without /repro
proxy /livereload 127.0.0.1:9966 {
websocket
transparent
}
}
PACKAGE_NAME=reproducible-website
# Tools
SASS ?= sass
YARN ?= yarn
# Variables
PORT ?= 9966
VERSION ?= $(shell git describe --tags --always --dirty --match=v* 2>/dev/null | sed 's/^v//' || \
cat $(CURDIR)/.version 2> /dev/null || echo 0.0.0-unreleased)
# Watchers
.PHONY: sass-watcher
sass-watcher:
$(SASS) --watch src/style.scss:public/bundle.css
.PHONY: js-watcher
js-watcher:
$(YARN) run budo src/index.js:bundle.js --dir public --port $(PORT) --live -t babelify
# Dist
.PHONY: dist
dist:
@mkdir -p "dist/${PACKAGE_NAME}-${VERSION}"
cp -avf public/index.html "dist/${PACKAGE_NAME}-${VERSION}/index.html"
$(SASS) -t compressed src/style.scss "dist/${PACKAGE_NAME}-${VERSION}/bundle.css"
$(YARN) run browserify src/index.js -o "dist/${PACKAGE_NAME}-${VERSION}/bundle.js"
cd dist && tar --owner=0 --group=0 -czvf ${PACKAGE_NAME}-${VERSION}.tar.gz "${PACKAGE_NAME}-${VERSION}"
# Yarn
.PHONY: vendor
vendor: .yarninstall
.yarninstall: package.json
@$(YARN) install --silent
@touch $@
.PHONY:
clean:
$(YARN) cache clean
@rm -rf dist
@rm -rf node_modules
@rm -f .yarninstall
......@@ -5,20 +5,22 @@ Linux. Uses rebuilderd's API to fetch the current status of reproducibility.
## Dependencies
* npm (for building/development)
* yarn (for building/development)
* caddy (for local development)
* node-sass
* browserify
## Development
```
npm run watch
./scripts/startdevelop.sh
```
## Building
## Deployment
Creating a distributable tarball can be done with:
```
npm install
npm run build
make dist
```
The build files are located in the 'dist' directory.
This diff is collapsed.
{
"name": "arch-repro-website",
"version": "0.0.1",
"version": "0.0.2",
"description": "Arch reproducible Status Website",
"author": "Jelle van der Waa",
"license": "MIT",
"private": true,
"scripts": {
"build": "NODE_ENV=production webpack --mode production",
"watch": "webpack --watch"
},
"dependencies": {
"eslint-loader": "^4.0.2",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
},
"devDependencies": {
"bulma": "^0.8.2",
"css-loader": "^3.5.3",
"eslint": "^6.8.0",
"eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.14.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1",
"terser-webpack-plugin": "^2.3.6"
"@babel/core": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"babelify": "^10.0.0",
"budo": "^11.6.3",
"bulma": "^0.8.2"
}
}
......@@ -4,8 +4,8 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Arch Linux Reproducible Status</title>
<script src="main.js" defer></script>
<link rel="stylesheet" href="css/style.css"/>
<script src="bundle.js" defer></script>
<link rel="stylesheet" href="bundle.css"/>
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<body>
......
#!/bin/sh
SESSION=reprowebsite
tmux new-session -d -s ${SESSION}
# Setup panes
tmux new-window -t ${SESSION}:0 -n "${SESSION}"
tmux split-window -v
tmux select-pane -t 0
tmux send-keys "make js-watcher" C-m
tmux select-pane -t 1
tmux send-keys "make sass-watcher" C-m
tmux split-window -v
tmux select-pane -t 2
tmux send-keys "caddy" C-m
# Set default window
tmux select-window -t $SESSION:1
# Attach to session
tmux -2 attach-session -t $SESSION
require('./style.scss');
const apiPrefix = require('Config').apiPrefix;
function displayBadPackages(suites) {
const packagesList = document.getElementById("packagesul");
const fragment = document.createDocumentFragment();
......@@ -64,7 +60,7 @@ function displayStats(suites) {
elem.appendChild(fragment);
}
fetch(`${apiPrefix}/api/v0/pkgs/list`).then((response) => {
fetch(`/api/v0/pkgs/list`).then((response) => {
return response.json();
}).then((data) => {
const suites = {};
......
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment