overall refactoring
This commit is contained in:
Klemek
@@ -0,0 +1,12 @@
|
|||||||
|
# EditorConfig is awesome: https://EditorConfig.org
|
||||||
|
|
||||||
|
# top-most EditorConfig file
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
end_of_line = lf
|
||||||
|
charset = utf-8
|
||||||
|
trim_trailing_whitespace = false
|
||||||
|
insert_final_newline = true
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
name: Lint
|
||||||
|
|
||||||
|
on: [push]
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
eslint:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v2
|
||||||
|
- name: Install modules
|
||||||
|
run: npm ci
|
||||||
|
- name: Run ESLint
|
||||||
|
run: npm run lint
|
||||||
@@ -1 +1,3 @@
|
|||||||
.idea
|
.idea
|
||||||
|
.vscode
|
||||||
|
node_modules
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
*.html
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"tabWidth": 2,
|
||||||
|
"useTabs": false
|
||||||
|
}
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
# Vue-boilerplate
|
||||||
|
*Minimal static Vue project*
|
||||||
|
|
||||||
|
<!-- TODO: 1. rename app (and tool URL) -->
|
||||||
|
|
||||||
|
### [Tool link](https://klemek.github.io/vue-boilerplate/)
|
||||||
|
|
||||||
|
## Use this template
|
||||||
|
|
||||||
|
<!-- TODO: 3. remove this part -->
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone git@github.com/klemek/vue-boilerplate.git {PROJECT}
|
||||||
|
cd {PROJECT}
|
||||||
|
git remote rename origin template
|
||||||
|
git remote add origin {PROJECT REMOTE}
|
||||||
|
# everytime you want to update your fork
|
||||||
|
git fetch --all
|
||||||
|
git merge template/master
|
||||||
|
```
|
||||||
|
|
||||||
|
> Every task is indicated with a TODO
|
||||||
|
|
||||||
|
1. [ ] Rename app in [README.md](./README.md), [index.html](./index.html) and [package.json](./package.json)
|
||||||
|
2. [ ] Change app hue and saturation in [style.css](./style.css)
|
||||||
|
3. [ ] Remove this part and all TODO
|
||||||
|
|
||||||
|
|
||||||
|
## Tips
|
||||||
|
|
||||||
|
* [Material design colors](https://materialui.co/colors/) are available, you can use `class="red-500"` on your HTML
|
||||||
|
* [Lucide icons](https://lucide.dev/icons) are available, you can use `<i icon=house></i>` on your HTML
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
import eslintConfigPrettier from "eslint-config-prettier";
|
||||||
|
import globals from "globals";
|
||||||
|
import pluginJs from "@eslint/js";
|
||||||
|
import pluginVue from "eslint-plugin-vue";
|
||||||
|
|
||||||
|
/** @type {import('eslint').Linter.Config[]} */
|
||||||
|
export default [
|
||||||
|
{
|
||||||
|
languageOptions: {
|
||||||
|
globals: {
|
||||||
|
...globals.browser,
|
||||||
|
lucide: "readonly",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
pluginJs.configs.all,
|
||||||
|
...pluginVue.configs["flat/recommended"],
|
||||||
|
{
|
||||||
|
rules: {
|
||||||
|
"no-magic-numbers": "off",
|
||||||
|
"sort-keys": "off",
|
||||||
|
"no-warning-comments": "off",
|
||||||
|
"no-ternary": "off",
|
||||||
|
"one-var": "off",
|
||||||
|
"max-statements": ["warn", 50],
|
||||||
|
"max-params": ["warn", 5],
|
||||||
|
"max-lines": "off",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
rules: {},
|
||||||
|
},
|
||||||
|
eslintConfigPrettier,
|
||||||
|
];
|
||||||
+33
-14
@@ -1,31 +1,50 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<title><!-- TODO -->Change this you moron</title>
|
<!-- TODO: 1. rename app -->
|
||||||
<link rel="stylesheet" href="style.css">
|
<title>Change this you moron</title>
|
||||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
<link rel="stylesheet" href="style.css" />
|
||||||
<script type="text/javascript" src="main.js"></script>
|
<link rel="stylesheet" href="material-colors.css" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<script src="https://unpkg.com/lucide@0"></script>
|
||||||
|
<script type="importmap">
|
||||||
|
{
|
||||||
|
"imports": {
|
||||||
|
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script type="module" src="main.js"></script>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<!-- card related -->
|
<!-- card related -->
|
||||||
<!--
|
<!--
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
<meta property="og:title" content="">
|
<meta property="og:title" content="">
|
||||||
<meta property="twitter:title" content="">
|
|
||||||
<meta property="og:description" content="">
|
<meta property="og:description" content="">
|
||||||
<meta property="twitter:description" content="">
|
|
||||||
<meta property="og:image" content="https://.../preview_640x320.jpg">
|
<meta property="og:image" content="https://.../preview_640x320.jpg">
|
||||||
<meta property="twitter:image" content="">
|
|
||||||
<meta property="org:url" content="https://...">
|
<meta property="org:url" content="https://...">
|
||||||
-->
|
-->
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<main id="app" style="display: none">
|
<main id="app" style="display: none">
|
||||||
<h1>{{title}}</h1>
|
<!-- TODO: 1. rename app -->
|
||||||
<br>
|
<h1>
|
||||||
|
<i icon="package"></i>
|
||||||
|
Vue-Boilerplate
|
||||||
|
</h1>
|
||||||
|
<br />
|
||||||
<p v-html="content"></p>
|
<p v-html="content"></p>
|
||||||
<br>
|
<br />
|
||||||
<small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github Repository</a> - {{currentYear}}</small>
|
<small class="grey-500">
|
||||||
|
<i icon="at-sign"></i> <a href="https://github.com/klemek" target="_blank">klemek</a>
|
||||||
|
-
|
||||||
|
<!-- TODO: 1. rename app -->
|
||||||
|
<i icon="github"></i> <a href="https://github.com/klemek/vue-boilerplate" target="_blank">Repository</a>
|
||||||
|
- 2025
|
||||||
|
</small>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,8 +1,20 @@
|
|||||||
/* exported app */
|
import { createApp } from "vue";
|
||||||
let app = {
|
|
||||||
|
const utils = {
|
||||||
|
updateIcons() {
|
||||||
|
lucide.createIcons({
|
||||||
|
nameAttr: "icon",
|
||||||
|
attrs: {
|
||||||
|
width: "1.1em",
|
||||||
|
height: "1.1em",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const app = createApp({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
title: "Vue-Boilerplate",
|
|
||||||
content:
|
content:
|
||||||
"Fill this page with <i>whatever</i> you're going to develop.<br><b>Then enjoy!</b>",
|
"Fill this page with <i>whatever</i> you're going to develop.<br><b>Then enjoy!</b>",
|
||||||
};
|
};
|
||||||
@@ -12,18 +24,21 @@ let app = {
|
|||||||
return new Date().getFullYear();
|
return new Date().getFullYear();
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
watch: {},
|
||||||
|
updated() {
|
||||||
|
utils.updateIcons();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
setTimeout(this.showApp);
|
||||||
|
utils.updateIcons();
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
showApp() {
|
showApp() {
|
||||||
document.getElementById("app").setAttribute("style", "");
|
document.getElementById("app").setAttribute("style", "");
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted: function () {
|
});
|
||||||
console.log("app mounted");
|
|
||||||
setTimeout(this.showApp);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
window.onload = () => {
|
window.onload = () => {
|
||||||
app = Vue.createApp(app);
|
|
||||||
app.mount("#app");
|
app.mount("#app");
|
||||||
};
|
};
|
||||||
|
|||||||
+1650
File diff suppressed because it is too large
Load Diff
Generated
+2221
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"name": "vue-boilerplate",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"lint": "eslint",
|
||||||
|
"fix": "eslint --fix"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/klemek/vue-boilerplate.git"
|
||||||
|
},
|
||||||
|
"author": "klemek",
|
||||||
|
"license": "ISC",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/klemek/vue-boilerplate/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://klemek.github.io/vue-boilerplate",
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.21.0",
|
||||||
|
"eslint": "^9.21.0",
|
||||||
|
"eslint-config-prettier": "^10.0.2",
|
||||||
|
"eslint-plugin-vue": "^9.32.0",
|
||||||
|
"globals": "^16.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -85,6 +85,7 @@ CUSTOM STYLE
|
|||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* https://materialui.co/colors/ */
|
/* https://materialui.co/colors/ */
|
||||||
|
/* TODO: 2. change hue and saturation */
|
||||||
--hue-primary: 65.52;
|
--hue-primary: 65.52;
|
||||||
--sat-primary: 20%;
|
--sat-primary: 20%;
|
||||||
--background: hsl(var(--hue-primary), var(--sat-primary), 96.08%);
|
--background: hsl(var(--hue-primary), var(--sat-primary), 96.08%);
|
||||||
@@ -169,3 +170,41 @@ a {
|
|||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
=================================================
|
||||||
|
APP STYLE
|
||||||
|
=================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 1em;
|
||||||
|
margin-bottom: 0.75em;
|
||||||
|
border: 1px solid var(--color-primary);
|
||||||
|
border-radius: 0.5em;
|
||||||
|
background-color: var(--background);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.333em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: var(--background-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
svg.lucide {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: text-top;
|
||||||
|
}
|
||||||
|
|
||||||
|
b .lucide,
|
||||||
|
h1 .lucide,
|
||||||
|
h2 .lucide,
|
||||||
|
h3 .lucide,
|
||||||
|
h4 .lucide,
|
||||||
|
h5 .lucide,
|
||||||
|
h6 .lucide {
|
||||||
|
stroke-width: 3;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user