overall refactoring

2025-03-13 17:12:58 +01:00
parent 8e01f4f274
commit a53cc0ad08
13 changed files with 4097 additions and 30 deletions
@@ -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
+.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,
+];
@@ -1,31 +1,50 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <title><!-- TODO -->Change this you moron</title>
-    <link rel="stylesheet" href="style.css">
-    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
-    <script type="text/javascript" src="main.js"></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta charset="UTF-8" />
+  <!-- TODO: 1. rename app -->
+  <title>Change this you moron</title>
+  <link rel="stylesheet" href="style.css" />
+  <link rel="stylesheet" href="material-colors.css" />
+  <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 -->
  <!--
    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:title" content="">
-    <meta property="twitter:title" content="">
    <meta property="og:description" content="">
-    <meta property="twitter:description" content="">
    <meta property="og:image" content="https://.../preview_640x320.jpg">
-    <meta property="twitter:image" content="">
    <meta property="org:url" content="https://...">
    -->
 </head>
+
 <body>
  <main id="app" style="display: none">
-        <h1>{{title}}</h1>
-        <br>
+    <!-- TODO: 1. rename app -->
+    <h1>
+      <i icon="package"></i>
+      Vue-Boilerplate
+    </h1>
+    <br />
    <p v-html="content"></p>
-        <br>
-        <small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github Repository</a> - {{currentYear}}</small>
+    <br />
+    <small class="grey-500">
+      <i icon="at-sign"></i>&nbsp;<a href="https://github.com/klemek" target="_blank">klemek</a>
+      -
+      <!-- TODO: 1. rename app -->
+      <i icon="github"></i>&nbsp;<a href="https://github.com/klemek/vue-boilerplate" target="_blank">Repository</a>
+      - 2025
+    </small>
  </main>
 </body>
+
 </html>
@@ -1,8 +1,20 @@
-/* exported app */
-let app = {
+import { createApp } from "vue";
+
+const utils = {
+  updateIcons() {
+    lucide.createIcons({
+      nameAttr: "icon",
+      attrs: {
+        width: "1.1em",
+        height: "1.1em",
+      },
+    });
+  },
+};
+
+const app = createApp({
  data() {
    return {
-      title: "Vue-Boilerplate",
      content:
        "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();
    },
  },
+  watch: {},
+  updated() {
+    utils.updateIcons();
+  },
+  mounted() {
+    setTimeout(this.showApp);
+    utils.updateIcons();
+  },
  methods: {
    showApp() {
      document.getElementById("app").setAttribute("style", "");
    },
  },
-  mounted: function () {
-    console.log("app mounted");
-    setTimeout(this.showApp);
-  },
-};
+});

 window.onload = () => {
-  app = Vue.createApp(app);
  app.mount("#app");
 };
@@ -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 {
  /* https://materialui.co/colors/ */
+  /* TODO: 2. change hue and saturation */
  --hue-primary: 65.52;
  --sat-primary: 20%;
  --background: hsl(var(--hue-primary), var(--sat-primary), 96.08%);
@@ -169,3 +170,41 @@ a {
    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;
+}