Added a compiler for sass, js and html
Guusvanmeerveld
2 years ago
parent
4607c918d9
commit
3fb419d530
@ -0,0 +1,23 @@
|
||||
name: deploy
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
|
||||
jobs:
|
||||
typescript:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Setup checkout
|
||||
uses: actions/checkout@v2
|
||||
- name: Setup NodeJS v12
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 12
|
||||
- name: Install Dependencies
|
||||
run: yarn install
|
||||
- name: Check for syntax errors
|
||||
run: yarn test-build
|
||||
- name: ESlint check
|
||||
run: yarn lint
|
||||
@ -1,2 +1,4 @@
|
||||
Magister Auto-Login.crx
|
||||
Magister Auto-Login.pem
|
||||
Magister Auto-Login.pem
|
||||
node_modules
|
||||
dist
|
||||
@ -0,0 +1,9 @@
|
||||
{
|
||||
"trailingComma": "es5",
|
||||
"useTabs": true,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"tabWidth": 2,
|
||||
"printWidth": 100,
|
||||
"arrowParens": "always"
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"prettier.configPath": ".prettierrc"
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
module.exports = {
|
||||
paths: {
|
||||
"@stylesheets": "css",
|
||||
"@scripts": "js",
|
||||
"@pages": "html",
|
||||
"@icons": "icons",
|
||||
"@libraries": "lib"
|
||||
},
|
||||
interpreter: [
|
||||
{
|
||||
input: '.',
|
||||
output: '.',
|
||||
type: 'js',
|
||||
},
|
||||
{
|
||||
input: 'pages/scripts',
|
||||
output: 'js',
|
||||
type: 'js',
|
||||
},
|
||||
{
|
||||
input: 'pages',
|
||||
output: 'html',
|
||||
type: 'html',
|
||||
},
|
||||
{
|
||||
input: 'stylesheets',
|
||||
output: 'css',
|
||||
type: 'sass',
|
||||
},
|
||||
{
|
||||
input: 'icons',
|
||||
output: 'icons',
|
||||
type: 'other',
|
||||
},
|
||||
{
|
||||
input: 'lib',
|
||||
output: 'lib',
|
||||
type: 'other',
|
||||
},
|
||||
{
|
||||
input: 'manifest.json',
|
||||
output: 'manifest.json',
|
||||
type: 'file',
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
body {
|
||||
background-color: #282a2d;
|
||||
}
|
||||
* {
|
||||
color: #c5c5c5!important;
|
||||
}
|
||||
.input-group-text {
|
||||
color: #fff;
|
||||
background-color: #1e2226;
|
||||
border-color: #383f47;
|
||||
}
|
||||
.form-control, .bg-light {
|
||||
background-color: #22262a!important;
|
||||
color: #fff!important;
|
||||
border-color: #383f47;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: #0167d4;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #0056b2;
|
||||
}
|
||||
.active.btn-primary {
|
||||
background-color: #0052aa!important;
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
|
||||
if (changeInfo.status == 'complete' && tab.active) {
|
||||
chrome.tabs.executeScript(tab.ib, {
|
||||
file: 'js/login.js'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
chrome.runtime.onInstalled.addListener(function () {
|
||||
// open options.html
|
||||
window.open('/options/index.html', '_blank');
|
||||
|
||||
chrome.storage.sync.set({
|
||||
"enabled": true
|
||||
});
|
||||
chrome.browserAction.setBadgeText({
|
||||
text: 'ON'
|
||||
});
|
||||
});
|
||||
@ -1,69 +0,0 @@
|
||||
const d = document.getElementById.bind(document);
|
||||
const q = document.querySelector.bind(document);
|
||||
document.querySelector('img[alt="Magister"]').remove(); // verwijderen van animatie linksboven
|
||||
|
||||
// user object moet gemaakt worden vanuit chrome.storage.sync
|
||||
|
||||
var snooze = ms => new Promise(res => setTimeout(res, ms));
|
||||
function login() {
|
||||
chrome.storage.sync.get(['school', 'number', 'password'], async function (result) {
|
||||
|
||||
if (d("scholenkiezer_value")) {
|
||||
await waitForSel("#scholenkiezer_value");
|
||||
|
||||
if (d("scholenkiezer_value") && result.school) {
|
||||
d("scholenkiezer_value").value = result.school;
|
||||
d("scholenkiezer_value").dispatchEvent(new Event("input"));
|
||||
};
|
||||
|
||||
await waitForSel(".selected");
|
||||
|
||||
if (q(".selected")) {
|
||||
q(".selected").click();
|
||||
}
|
||||
}
|
||||
|
||||
await waitForSel("#username");
|
||||
|
||||
if (d("username") && result.number) {
|
||||
d("username").value = result.number;
|
||||
d("username").dispatchEvent(new Event("input"));
|
||||
};
|
||||
|
||||
await waitForSel("#username_submit")
|
||||
if (d("username_submit")) {
|
||||
d("username_submit").click();
|
||||
};
|
||||
|
||||
await waitForSel("#rswp_password")
|
||||
|
||||
if (d("rswp_password") && result.password) {
|
||||
d("rswp_password").value = result.password;
|
||||
d("rswp_password").dispatchEvent(new Event("input"));
|
||||
};
|
||||
|
||||
await waitForSel("[id*=_submit]")
|
||||
if (d("rswp_submit")) {
|
||||
d("rswp_submit").click();
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function waitForSel(s) {
|
||||
return new Promise(res => {
|
||||
setInterval(() => {
|
||||
if (q(s)) {
|
||||
res()
|
||||
}
|
||||
}, 10);
|
||||
});
|
||||
};
|
||||
|
||||
chrome.storage.sync.get(['enabled'], function (result){
|
||||
if(result.enabled){
|
||||
login();
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
|
||||
@ -1,93 +0,0 @@
|
||||
const d = document.getElementById.bind(document);
|
||||
const qAll = document.querySelectorAll.bind(document);
|
||||
|
||||
d("save").addEventListener("click", save);
|
||||
|
||||
qAll(".login").forEach(s => {
|
||||
s.addEventListener("keydown", e => {
|
||||
if (e.key == "Enter") {
|
||||
if (e.target.id == "school") {
|
||||
d("number").focus()
|
||||
};
|
||||
if (e.target.id == "number") {
|
||||
d("password").focus()
|
||||
};
|
||||
if (e.target.id == "password") {
|
||||
save()
|
||||
};
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function save() {
|
||||
|
||||
var school = d("school").value;
|
||||
var number = d("number").value;
|
||||
var password = d("password").value;
|
||||
|
||||
try {
|
||||
chrome.storage.sync.set({
|
||||
"school": school,
|
||||
"number": number,
|
||||
"password": password
|
||||
});
|
||||
|
||||
d("save").innerHTML = "Opgeslagen!"
|
||||
} catch (e) {
|
||||
d("save").innerHTML = "Fout"
|
||||
d("save").className = "btn btn-danger float-right"
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
function onLoad() {
|
||||
chrome.storage.sync.get(['school', 'number', 'password'], function (result) {
|
||||
if (result.school !== undefined) {
|
||||
|
||||
d("school").value = result.school
|
||||
};
|
||||
|
||||
if (result.number !== undefined){
|
||||
|
||||
d("number").value = result.number
|
||||
};
|
||||
|
||||
if (result.password !== undefined) {
|
||||
d("password").value = "lolleukgeprobeerd"
|
||||
};
|
||||
});
|
||||
|
||||
chrome.storage.sync.get(['enabled'], function (result) {
|
||||
d("switch").checked = result.enabled
|
||||
});
|
||||
|
||||
chrome.storage.sync.get(['darkmode'], function (result) {
|
||||
d("dark-mode").checked = result.darkmode
|
||||
d("dark-link").disabled = !d("dark-mode").checked
|
||||
});
|
||||
|
||||
d("switch").addEventListener("click", toggle)
|
||||
d("dark-mode").addEventListener("click", darkMode)
|
||||
};
|
||||
|
||||
function toggle() {
|
||||
var checked = d("switch").checked;
|
||||
chrome.storage.sync.set({
|
||||
"enabled": checked
|
||||
});
|
||||
|
||||
chrome.browserAction.setBadgeText({
|
||||
text: checked ? "ON" : "OFF"
|
||||
});
|
||||
};
|
||||
|
||||
function darkMode() {
|
||||
chrome.storage.sync.set({
|
||||
"darkmode": d("dark-mode").checked
|
||||
});
|
||||
|
||||
d("dark-link").disabled = !d("dark-mode").checked
|
||||
|
||||
}
|
||||
|
||||
onLoad()
|
||||
@ -1,29 +0,0 @@
|
||||
{
|
||||
"name": "Magister Auto-Login",
|
||||
"version": "2.0",
|
||||
"manifest_version": 2,
|
||||
"description": "Auto-Login for Magister 6 webapp.",
|
||||
"options_page": "options/index.html",
|
||||
"homepage_url": "http://mb-o.nl/autologin",
|
||||
"background": {
|
||||
"scripts": [
|
||||
"js/background.js"
|
||||
],
|
||||
"persistent": true
|
||||
},
|
||||
"browser_action": {
|
||||
"default_title": "Auto-login",
|
||||
"default_popup": "/popup/index.html"
|
||||
},
|
||||
"icons": {
|
||||
"16": "/icons/16x.png",
|
||||
"32": "/icons/32x.png",
|
||||
"48": "/icons/48x.png",
|
||||
"128": "/icons/128x.png",
|
||||
"256": "/icons/256x.png"
|
||||
},
|
||||
"permissions": [
|
||||
"https://accounts.magister.net/*",
|
||||
"storage"
|
||||
]
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
.material-switch > input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.material-switch > label {
|
||||
cursor: pointer;
|
||||
margin-top: .8rem;
|
||||
float: right;
|
||||
height: 0px;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.material-switch > label::before {
|
||||
background: rgb(0, 0, 0);
|
||||
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
content: '';
|
||||
height: 16px;
|
||||
margin-top: -8px;
|
||||
position:absolute;
|
||||
opacity: 0.3;
|
||||
transition: all 0.4s ease-in-out;
|
||||
width: 40px;
|
||||
}
|
||||
.material-switch > label::after {
|
||||
background: rgb(255, 255, 255);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
height: 24px;
|
||||
left: -4px;
|
||||
margin-top: -8px;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
width: 24px;
|
||||
}
|
||||
.material-switch > input[type="checkbox"]:checked + label::before {
|
||||
background: #007bff;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.material-switch > input[type="checkbox"]:checked + label::after {
|
||||
background: #007bff;
|
||||
left: 20px;
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
.screen {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.copyright {
|
||||
position: absolute;
|
||||
margin: 7px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.switch-span {
|
||||
width: 2rem;
|
||||
}
|
||||
.enable {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
bottom: 1.7rem;
|
||||
}
|
||||
|
||||
.darkcheck{
|
||||
position: absolute;
|
||||
margin: 7px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 20rem;
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Options | Magister Auto-Login</title>
|
||||
<link rel="shortcut icon" href="/icons/128x.png">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<link rel="stylesheet" href="/materials-switches.css">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" id="dark-link" disabled href="/dark-mode.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<input id="dark-mode" type="checkbox" class="darkcheck"></input>
|
||||
<div class="d-flex align-items-center screen">
|
||||
<div class="container mt-3">
|
||||
<div class="row">
|
||||
<h1 class="mb-3">Magister Auto-Login</h1>
|
||||
<span class="position-relative switch-span">
|
||||
<div class="material-switch pull-right enable">
|
||||
<input id="switch" type="checkbox">
|
||||
<label for="switch" class="label-primary"></label>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<label for="">School:</label>
|
||||
<input type="text" class="form-control mb-3 login" autofocus name="school" id="school" placeholder="Vul je school in">
|
||||
<hr class="bg-light mb-3">
|
||||
<label for="">Stamnummer</label>:</label>
|
||||
<input type="text" class="form-control mb-3 login" autofocus name="number" id="number"
|
||||
placeholder="Vul je stamnummer in">
|
||||
<hr class="bg-light mb-3">
|
||||
<label for="">Wachtwoord:</label>
|
||||
<input type="password" class="form-control mb-3 login" name="password" id="password"
|
||||
placeholder="Vul je wachtwoord in">
|
||||
<hr class="bg-light mb-3">
|
||||
<button class="btn-primary btn float-right" id="save">Opslaan</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="copyright" title="Kleine credit naar Sam Taen">Door Martijn Oosterhuis & Guus van Meerveld</p>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="/js/save.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,15 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"chalk": "^4.1.1",
|
||||
"chokidar": "^3.5.2",
|
||||
"fs-extra": "^10.0.0",
|
||||
"minify": "^7.0.2",
|
||||
"prettier": "^2.3.2",
|
||||
"sass": "^1.36.0"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "node src/builder/watch",
|
||||
"build": "node src/builder",
|
||||
"prettify": "prettier --write src"
|
||||
}
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
body {
|
||||
min-width: 20rem;
|
||||
min-height: 24rem;
|
||||
}
|
||||
|
||||
.darkcheck{
|
||||
position: absolute;
|
||||
margin: 7px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.enable {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<link rel="stylesheet" href="/materials-switches.css">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" id="dark-link" disabled href="/dark-mode.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<input id="dark-mode" type="checkbox" class="darkcheck"></input>
|
||||
<div class="d-flex align-items-center screen">
|
||||
<div class="container fluid mt-3">
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<label for="">School:</label>
|
||||
<input type="text" class="form-control mb-3 login" autofocus name="school" id="school"
|
||||
placeholder="Vul je school in">
|
||||
<hr class="bg-light mb-3">
|
||||
<label for="">Gebruikersnaam:</label>
|
||||
<input type="text" class="form-control mb-3 login" autofocus name="number" id="number"
|
||||
placeholder="Vul je gebruikersnaam in">
|
||||
<hr class="bg-light mb-3">
|
||||
<label for="">Wachtwoord:</label>
|
||||
<input type="password" class="form-control mb-3 login" name="password" id="password"
|
||||
placeholder="Vul je wachtwoord in">
|
||||
<hr class="bg-light mb-3">
|
||||
<button class="btn-primary btn float-right" id="save">Opslaan</button>
|
||||
<div class="material-switch pull-right enable">
|
||||
<input id="switch" type="checkbox">
|
||||
<label for="switch" class="label-primary"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/save.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,27 @@
|
||||
// Runs when the extensions is updated
|
||||
const updated = (tabId, changeInfo, tab) => {
|
||||
if (changeInfo.status == 'complete' && tab.active) {
|
||||
chrome.tabs.executeScript(tab.ib, {
|
||||
file: 'login.js',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Run when extensions is installed
|
||||
const installed = () => {
|
||||
window.open('@pages/options.html', '_blank');
|
||||
|
||||
chrome.storage.sync.get('accounts', (accounts) => {
|
||||
chrome.storage.sync.set({
|
||||
enabled: true,
|
||||
accounts: accounts || [],
|
||||
});
|
||||
});
|
||||
|
||||
chrome.browserAction.setBadgeText({
|
||||
text: 'ON',
|
||||
});
|
||||
};
|
||||
|
||||
chrome.tabs.onUpdated.addListener(updated);
|
||||
chrome.runtime.onInstalled.addListener(installed);
|
||||
@ -0,0 +1,128 @@
|
||||
const fs = require('fs-extra');
|
||||
const { join } = require('path');
|
||||
|
||||
const minify = require('minify');
|
||||
const sass = require('sass');
|
||||
const chalk = require('chalk');
|
||||
|
||||
const sassExtension = '.sass';
|
||||
|
||||
const config = require(join(process.cwd(), 'builder.config.js'));
|
||||
|
||||
/**
|
||||
* Compiles files in a directory to a given directory
|
||||
* @param {string} dir - The input directory
|
||||
* @param {string} outDir - The output directory
|
||||
* @param {string} fileExtension - The file extension
|
||||
* @returns
|
||||
*/
|
||||
const builder = (dir, outDir, fileExtension) =>
|
||||
dirChecker(outDir, () =>
|
||||
fs.readdir(dir, (err, files) => {
|
||||
if (err) throw new Error(err);
|
||||
|
||||
// Filter out other files
|
||||
files = files.filter((file) => file.endsWith(fileExtension));
|
||||
|
||||
// Minify the files & write them to the build directory
|
||||
files.forEach((file) => {
|
||||
const t0 = performance.now();
|
||||
|
||||
compile(join(dir, file), fileExtension, (data) => {
|
||||
const withPaths = replacePaths(data);
|
||||
|
||||
if (fileExtension === 'sass') {
|
||||
file = file.replace(sassExtension, '.min.css');
|
||||
}
|
||||
|
||||
fs.writeFile(join(outDir, file), withPaths, (err) => {
|
||||
if (err) throw new Error(err);
|
||||
|
||||
const t1 = performance.now();
|
||||
|
||||
console.log(`${chalk.gray(file)} ${Math.round(t1 - t0)}ms`);
|
||||
});
|
||||
});
|
||||
});
|
||||
})
|
||||
);
|
||||
|
||||
/**
|
||||
* Compiles a string of data.
|
||||
* @param {string} data
|
||||
* @param {'sass' | 'js' | 'html'} type
|
||||
* @param {(data) => void} callback
|
||||
*/
|
||||
const compile = (file, type, callback) => {
|
||||
switch (type) {
|
||||
case 'sass':
|
||||
sass.render({ file, outputStyle: 'compressed' }, (err, data) =>
|
||||
callback(data.css.toString())
|
||||
);
|
||||
|
||||
return;
|
||||
default:
|
||||
|
||||
return minify(file).then(callback).catch(console.log('Error compiling file ' + file))
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Compiles a file
|
||||
* @param {string} file - The input file
|
||||
*/
|
||||
const fileBuilder = (file, output) =>
|
||||
fs.readFile(file, { encoding: 'utf-8' }, (err, data) => {
|
||||
if (err) throw new Error(err);
|
||||
|
||||
const t0 = performance.now();
|
||||
|
||||
const withPaths = replacePaths(data);
|
||||
|
||||
fs.writeFile(output, withPaths, (err) => {
|
||||
if (err) throw new Error(err);
|
||||
|
||||
const t1 = performance.now();
|
||||
|
||||
const path = file.split('/');
|
||||
const fileName = path[path.length - 1];
|
||||
|
||||
console.log(`${chalk.gray(fileName)} ${Math.round(t1 - t0)}ms`);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Replaces all specified paths in builder.config.js with their definitions
|
||||
* @param {string} data - The data that needs its paths replaced
|
||||
* @returns
|
||||
*/
|
||||
const replacePaths = (data) => {
|
||||
if (config.paths) {
|
||||
Object.keys(config.paths).forEach((key) => {
|
||||
data = data.replace(new RegExp(key, 'g'), '/' + config.paths[key]);
|
||||
});
|
||||
|
||||
data = data.replace(sassExtension, '.min.css');
|
||||
}
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if a directory exists and creates it if it doesn't.
|
||||
* @param {string} dir - The directory to check
|
||||
* @param {() => void} callback - The callback function
|
||||
*/
|
||||
const dirChecker = (dir, callback) => {
|
||||
if (!fs.existsSync(dir)) {
|
||||
fs.mkdir(dir, { recursive: true }, () => callback());
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
builder,
|
||||
fileBuilder,
|
||||
};
|
||||
@ -0,0 +1,24 @@
|
||||
const { join } = require('path');
|
||||
const fs = require('fs-extra');
|
||||
|
||||
const srcDir = join(process.cwd(), 'src');
|
||||
const distDir = join(process.cwd(), 'dist');
|
||||
|
||||
const config = require(join(process.cwd(), 'builder.config.js'));
|
||||
|
||||
const { builder, fileBuilder, sassBuilder } = require('./builders');
|
||||
|
||||
if (config.interpreter) {
|
||||
config.interpreter.forEach((interpreter) => {
|
||||
const input = join(srcDir, interpreter.input);
|
||||
const output = join(distDir, interpreter.output);
|
||||
|
||||
if (interpreter.type === 'js' || interpreter.type === 'html' || interpreter.type === 'sass') {
|
||||
builder(input, output, interpreter.type);
|
||||
} else if (interpreter.type === 'file') {
|
||||
fileBuilder(input, output);
|
||||
} else if (interpreter.type === 'other') {
|
||||
fs.copy(input, output);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
const chokidar = require('chokidar');
|
||||
const { join } = require('path');
|
||||
|
||||
const srcDir = join(process.cwd(), 'src');
|
||||
|
||||
const watcher = chokidar.watch(srcDir, {
|
||||
persistent: true
|
||||
});
|
||||
|
||||
// Check for changes in the src directory
|
||||
watcher.on('change', (path) => {
|
||||
const fileExtension = path.split('.').pop();
|
||||
})
|
||||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 382 B After Width: | Height: | Size: 382 B |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 829 B After Width: | Height: | Size: 829 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
@ -0,0 +1,9 @@
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url(./fonts/Roboto.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
|
||||
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
Binary file not shown.
@ -0,0 +1,647 @@
|
||||
/*!
|
||||
* Milligram v1.4.1
|
||||
* https://milligram.io
|
||||
*
|
||||
* Copyright (c) 2020 CJ Patoilo
|
||||
* Licensed under the MIT license
|
||||
*/
|
||||
|
||||
*,
|
||||
*:after,
|
||||
*:before {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #606c76;
|
||||
font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||||
font-size: 1.6em;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 0.3rem solid #d1d1d1;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
blockquote *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.button,
|
||||
button,
|
||||
input[type='button'],
|
||||
input[type='reset'],
|
||||
input[type='submit'] {
|
||||
background-color: #9b4dca;
|
||||
border: 0.1rem solid #9b4dca;
|
||||
border-radius: 0.4rem;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
height: 3.8rem;
|
||||
letter-spacing: 0.1rem;
|
||||
line-height: 3.8rem;
|
||||
padding: 0 3rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.button:focus,
|
||||
.button:hover,
|
||||
button:focus,
|
||||
button:hover,
|
||||
input[type='button']:focus,
|
||||
input[type='button']:hover,
|
||||
input[type='reset']:focus,
|
||||
input[type='reset']:hover,
|
||||
input[type='submit']:focus,
|
||||
input[type='submit']:hover {
|
||||
background-color: #606c76;
|
||||
border-color: #606c76;
|
||||
color: #fff;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.button[disabled],
|
||||
button[disabled],
|
||||
input[type='button'][disabled],
|
||||
input[type='reset'][disabled],
|
||||
input[type='submit'][disabled] {
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.button[disabled]:focus,
|
||||
.button[disabled]:hover,
|
||||
button[disabled]:focus,
|
||||
button[disabled]:hover,
|
||||
input[type='button'][disabled]:focus,
|
||||
input[type='button'][disabled]:hover,
|
||||
input[type='reset'][disabled]:focus,
|
||||
input[type='reset'][disabled]:hover,
|
||||
input[type='submit'][disabled]:focus,
|
||||
input[type='submit'][disabled]:hover {
|
||||
background-color: #9b4dca;
|
||||
border-color: #9b4dca;
|
||||
}
|
||||
|
||||
.button.button-outline,
|
||||
button.button-outline,
|
||||
input[type='button'].button-outline,
|
||||
input[type='reset'].button-outline,
|
||||
input[type='submit'].button-outline {
|
||||
background-color: transparent;
|
||||
color: #9b4dca;
|
||||
}
|
||||
|
||||
.button.button-outline:focus,
|
||||
.button.button-outline:hover,
|
||||
button.button-outline:focus,
|
||||
button.button-outline:hover,
|
||||
input[type='button'].button-outline:focus,
|
||||
input[type='button'].button-outline:hover,
|
||||
input[type='reset'].button-outline:focus,
|
||||
input[type='reset'].button-outline:hover,
|
||||
input[type='submit'].button-outline:focus,
|
||||
input[type='submit'].button-outline:hover {
|
||||
background-color: transparent;
|
||||
border-color: #606c76;
|
||||
color: #606c76;
|
||||
}
|
||||
|
||||
.button.button-outline[disabled]:focus,
|
||||
.button.button-outline[disabled]:hover,
|
||||
button.button-outline[disabled]:focus,
|
||||
button.button-outline[disabled]:hover,
|
||||
input[type='button'].button-outline[disabled]:focus,
|
||||
input[type='button'].button-outline[disabled]:hover,
|
||||
input[type='reset'].button-outline[disabled]:focus,
|
||||
input[type='reset'].button-outline[disabled]:hover,
|
||||
input[type='submit'].button-outline[disabled]:focus,
|
||||
input[type='submit'].button-outline[disabled]:hover {
|
||||
border-color: inherit;
|
||||
color: #9b4dca;
|
||||
}
|
||||
|
||||
.button.button-clear,
|
||||
button.button-clear,
|
||||
input[type='button'].button-clear,
|
||||
input[type='reset'].button-clear,
|
||||
input[type='submit'].button-clear {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: #9b4dca;
|
||||
}
|
||||
|
||||
.button.button-clear:focus,
|
||||
.button.button-clear:hover,
|
||||
button.button-clear:focus,
|
||||
button.button-clear:hover,
|
||||
input[type='button'].button-clear:focus,
|
||||
input[type='button'].button-clear:hover,
|
||||
input[type='reset'].button-clear:focus,
|
||||
input[type='reset'].button-clear:hover,
|
||||
input[type='submit'].button-clear:focus,
|
||||
input[type='submit'].button-clear:hover {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: #606c76;
|
||||
}
|
||||
|
||||
.button.button-clear[disabled]:focus,
|
||||
.button.button-clear[disabled]:hover,
|
||||
button.button-clear[disabled]:focus,
|
||||
button.button-clear[disabled]:hover,
|
||||
input[type='button'].button-clear[disabled]:focus,
|
||||
input[type='button'].button-clear[disabled]:hover,
|
||||
input[type='reset'].button-clear[disabled]:focus,
|
||||
input[type='reset'].button-clear[disabled]:hover,
|
||||
input[type='submit'].button-clear[disabled]:focus,
|
||||
input[type='submit'].button-clear[disabled]:hover {
|
||||
color: #9b4dca;
|
||||
}
|
||||
|
||||
code {
|
||||
background: #f4f5f6;
|
||||
border-radius: 0.4rem;
|
||||
font-size: 86%;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #f4f5f6;
|
||||
border-left: 0.3rem solid #9b4dca;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
padding: 1rem 1.5rem;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 0.1rem solid #f4f5f6;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
input[type='color'],
|
||||
input[type='date'],
|
||||
input[type='datetime'],
|
||||
input[type='datetime-local'],
|
||||
input[type='email'],
|
||||
input[type='month'],
|
||||
input[type='number'],
|
||||
input[type='password'],
|
||||
input[type='search'],
|
||||
input[type='tel'],
|
||||
input[type='text'],
|
||||
input[type='url'],
|
||||
input[type='week'],
|
||||
input:not([type]),
|
||||
textarea,
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
background-color: transparent;
|
||||
border: 0.1rem solid #d1d1d1;
|
||||
border-radius: 0.4rem;
|
||||
box-shadow: none;
|
||||
box-sizing: inherit;
|
||||
height: 3.8rem;
|
||||
padding: 0.6rem 1rem 0.7rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type='color']:focus,
|
||||
input[type='date']:focus,
|
||||
input[type='datetime']:focus,
|
||||
input[type='datetime-local']:focus,
|
||||
input[type='email']:focus,
|
||||
input[type='month']:focus,
|
||||
input[type='number']:focus,
|
||||
input[type='password']:focus,
|
||||
input[type='search']:focus,
|
||||
input[type='tel']:focus,
|
||||
input[type='text']:focus,
|
||||
input[type='url']:focus,
|
||||
input[type='week']:focus,
|
||||
input:not([type]):focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: #9b4dca;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23d1d1d1" d="M0,0l6,8l6-8"/></svg>')
|
||||
center right no-repeat;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%239b4dca" d="M0,0l6,8l6-8"/></svg>');
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
background: none;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 6.5rem;
|
||||
}
|
||||
|
||||
label,
|
||||
legend {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.label-inline {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: 112rem;
|
||||
padding: 0 2rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row.row-no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.row.row-no-padding > .column {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.row.row-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.row.row-top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.row.row-bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.row.row-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row.row-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.row.row-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.row .column {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
margin-left: 0;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-10 {
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-20 {
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-25 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-33,
|
||||
.row .column.column-offset-34 {
|
||||
margin-left: 33.3333%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-40 {
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-50 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-60 {
|
||||
margin-left: 60%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-66,
|
||||
.row .column.column-offset-67 {
|
||||
margin-left: 66.6666%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-75 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-80 {
|
||||
margin-left: 80%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-90 {
|
||||
margin-left: 90%;
|
||||
}
|
||||
|
||||
.row .column.column-10 {
|
||||
flex: 0 0 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
|
||||
.row .column.column-20 {
|
||||
flex: 0 0 20%;
|
||||
max-width: 20%;
|
||||
}
|
||||
|
||||
.row .column.column-25 {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.row .column.column-33,
|
||||
.row .column.column-34 {
|
||||
flex: 0 0 33.3333%;
|
||||
max-width: 33.3333%;
|
||||
}
|
||||
|
||||
.row .column.column-40 {
|
||||
flex: 0 0 40%;
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
.row .column.column-50 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.row .column.column-60 {
|
||||
flex: 0 0 60%;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.row .column.column-66,
|
||||
.row .column.column-67 {
|
||||
flex: 0 0 66.6666%;
|
||||
max-width: 66.6666%;
|
||||
}
|
||||
|
||||
.row .column.column-75 {
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.row .column.column-80 {
|
||||
flex: 0 0 80%;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.row .column.column-90 {
|
||||
flex: 0 0 90%;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.row .column .column-top {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.row .column .column-bottom {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.row .column .column-center {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
.row {
|
||||
flex-direction: row;
|
||||
margin-left: -1rem;
|
||||
width: calc(100% + 2rem);
|
||||
}
|
||||
.row .column {
|
||||
margin-bottom: inherit;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #9b4dca;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
color: #606c76;
|
||||
}
|
||||
|
||||
dl,
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
dl dl,
|
||||
dl ol,
|
||||
dl ul,
|
||||
ol dl,
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul dl,
|
||||
ul ol,
|
||||
ul ul {
|
||||
font-size: 90%;
|
||||
margin: 1.5rem 0 1.5rem 3rem;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal inside;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: circle inside;
|
||||
}
|
||||
|
||||
.button,
|
||||
button,
|
||||
dd,
|
||||
dt,
|
||||
li {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
fieldset,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
form,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
table,
|
||||
ul {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border-bottom: 0.1rem solid #e1e1e1;
|
||||
padding: 1.2rem 1.5rem;
|
||||
}
|
||||
|
||||
td:first-child,
|
||||
th:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
td:last-child,
|
||||
th:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
table {
|
||||
display: table;
|
||||
overflow-x: initial;
|
||||
}
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.1rem;
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4.6rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3.6rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2.8rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 2.2rem;
|
||||
letter-spacing: -0.08rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: -0.05rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.6rem;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=milligram.css.map */
|
||||
@ -0,0 +1,351 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||