Merge remote-tracking branch 'template/master'

.editorconfig

@@ -5,8 +5,12 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 2
+indent_size = 4
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
+
+[Makefile]
+indent_style = tab
+indent_size = 2

.github/workflows/ci.yml

@@ -17,7 +17,6 @@ jobs:
 
   build:
     runs-on: ubuntu-latest
-    needs: eslint
     steps:
       - uses: actions/checkout@v2
       - uses: oven-sh/setup-bun@v2

Makefile

@@ -0,0 +1,40 @@
+ifeq ($(shell which bun &>/dev/null && echo 1 || echo 0), 1)
+	NPM ?= bun
+endif
+
+NPM ?= npm
+
+.PHONY: help
+help: ## show this message
+	@echo "Usage: make [target1] (target2) ..."
+	@echo ""
+	@echo "Commands/Targets:"
+	@grep -E '(^[a-zA-Z0-9_%-]+:.*?##.*$$)|(^##)' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}{printf "\033[32m%-20s\033[0m %s\n", $$1, $$2}' | sed -e 's/\[32m##/[33m/'
+	@echo ""
+	@echo "Environment:"
+	@grep -E '^[a-zA-Z0-9_-]+\s*[?:]?=.*$$' $(MAKEFILE_LIST) | grep -Eo '^[a-zA-Z0-9_-]+' | xargs -I {} make -s print-{}
+
+.PHONY: print-%
+print-%:
+	@echo -e '\033[32m$*\033[0m = $($*)'
+
+build: ## build static site in "dist"
+	@$(NPM) run build
+
+.PHONY: run
+def: ## run dev version of static site
+	@$(NPM) run dev
+
+lint: ## lint code
+	@$(NPM) run lint
+
+fix: ## fix and reformat code
+	@$(NPM) run format
+	@$(NPM) run lint-fix
+
+update-template: ## update code from template
+	@(git remote | grep template &>/dev/null) || git remote add template https://github.com/klemek/vue-boilerplate.git
+	git fetch template
+	git merge template/master --allow-unrelated-histories
+
+

package.json

@@ -13,7 +13,7 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
     "lint": "eslint . --cache",
-    "fix": "eslint . --fix --cache",
+    "lint-fix": "eslint . --fix --cache",
     "format": "prettier --write --experimental-cli src/"
   },
   "dependencies": {

src/App.vue

@@ -1,70 +1,70 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import LucideIcon from "./components/LucideIcon.vue";
-import CustomButton from "./components/CustomButton.vue"
+import CustomButton from "./components/CustomButton.vue";
 
 const visible = ref<boolean>(false);
 
 onMounted(() => {
-  setTimeout(() => {
-    visible.value = true;
-  });
+    setTimeout(() => {
+        visible.value = true;
+    });
 });
 </script>
 
 <template>
-  <main :style="{ display: visible ? 'inherit' : 'none' }">
-    <!-- TODO: 1. rename app -->
-    <h1>
-      <LucideIcon name="package" />
-      Vue-Boilerplate
-    </h1>
-    <br />
-    <p>
-      Fill this page with <i>whatever</i> you're going to develop.
-      <br>
-      <b>Then enjoy!</b>
-    </p>
-    <CustomButton>
-      <LucideIcon name="square-arrow-right"/> This is a sample button yay
-    </CustomButton>
-    <br />
-    <hr />
-    <small class="footer">
-      <LucideIcon name="at-sign" />
-      &nbsp;
-      <a href="https://github.com/klemek" target="_blank">klemek</a>
-      -
-      <!-- TODO: 1. rename app -->
-      <LucideIcon name="github" />
-      &nbsp;
-      <a href="https://github.com/klemek/vue-boilerplate" target="_blank">
-        Repository
-      </a>
-      - 2025
-    </small>
-  </main>
+    <main :style="{ display: visible ? 'inherit' : 'none' }">
+        <!-- TODO: 1. rename app -->
+        <h1>
+            <LucideIcon name="package" />
+            Vue-Boilerplate
+        </h1>
+        <br />
+        <p>
+            Fill this page with <i>whatever</i> you're going to develop.
+            <br />
+            <b>Then enjoy!</b>
+        </p>
+        <CustomButton>
+            <LucideIcon name="square-arrow-right" /> This is a sample button yay
+        </CustomButton>
+        <br />
+        <hr />
+        <small class="footer">
+            <LucideIcon name="at-sign" />
+            &nbsp;
+            <a href="https://github.com/klemek" target="_blank">klemek</a>
+            -
+            <!-- TODO: 1. rename app -->
+            <LucideIcon name="github" />
+            &nbsp;
+            <a href="https://github.com/klemek/vue-boilerplate" target="_blank">
+                Repository
+            </a>
+            - 2025
+        </small>
+    </main>
 </template>
 
 <style scoped>
 .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;
+    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);
+    background-color: var(--background-secondary);
 }
 
 .footer {
-  opacity: 50%;
+    opacity: 50%;
 }
 </style>

src/components/CustomButton.vue

@@ -1,36 +1,36 @@
 <script setup lang="ts">
 interface Props {
-  href?: string;
-  color?: string;
+    href?: string;
+    color?: string;
 }
 
 defineProps<Props>();
 </script>
 
 <template>
-  <component
-    :is="href ? 'a' : 'div'"
-    :class="`button ${color ? 'b-' + color + ' ' + color : ''}`"
-  >
-    <slot></slot>
-  </component>
+    <component
+        :is="href ? 'a' : 'div'"
+        :class="`button ${color ? 'b-' + color + ' ' + color : ''}`"
+    >
+        <slot></slot>
+    </component>
 </template>
 
 <style scoped>
 .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;
+    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);
+    background-color: var(--background-secondary);
 }
 </style>

src/components/LucideIcon.vue

@@ -3,27 +3,30 @@ import { computed, onMounted } from "vue";
 import * as icons from "lucide-vue-next";
 
 interface Props {
-  name: string;
-  color?: string;
-  strokeWidth?: string;
-  defaultClass?: string;
+    name: string;
+    color?: string;
+    strokeWidth?: string;
+    defaultClass?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  color: "currentColor",
-  strokeWidth: "2",
-  defaultClass: "lucide",
+    color: "currentColor",
+    strokeWidth: "2",
+    defaultClass: "lucide",
 });
 
 function kebab2camel(kebab: string): string {
-  return kebab
-    .split("-")
-    .map((item) => item.charAt(0).toUpperCase() + item.slice(1).toLowerCase())
-    .join("");
+    return kebab
+        .split("-")
+        .map(
+            (item) =>
+                item.charAt(0).toUpperCase() + item.slice(1).toLowerCase(),
+        )
+        .join("");
 }
 
 onMounted(() => {
-  console.log(kebab2camel(props.name));
+    console.log(kebab2camel(props.name));
 });
 
 // @ts-expect-error: cannot infer type of all exported data
@@ -31,10 +34,10 @@ const icon = computed(() => icons[kebab2camel(props.name)]);
 </script>
 
 <template>
-  <component
-    :is="icon"
-    :color="color"
-    :stroke-width="strokeWidth"
-    :default-class="defaultClass"
-  />
+    <component
+        :is="icon"
+        :color="color"
+        :stroke-width="strokeWidth"
+        :default-class="defaultClass"
+    />
 </template>