klemek/tape-record
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build: full build with vite

Browse Source
This commit is contained in:
klemek
2025-12-20 15:08:58 +01:00
parent 209c54e906
commit dc63ea7d1f
22 changed files with 4155 additions and 1354 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/ci.yml
+44
View File
@@ -0,0 +1,44 @@
name: CI
on: [push]
jobs:
eslint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: oven-sh/setup-bun@v2
with:
bun-version: latest
- name: Install modules
run: bun ci
- name: Run ESLint
run: bun run lint
build:
runs-on: ubuntu-latest
needs: eslint
steps:
- uses: actions/checkout@v2
- uses: oven-sh/setup-bun@v2
with:
bun-version: latest
- name: Install modules
run: bun ci
- name: Build site
run: bun run build
- name: Upload static files as artifact
uses: actions/upload-pages-artifact@v3
with:
path: dist/
# deploy:
# environment:
# name: github-pages
# url: ${{ steps.deployment.outputs.page_url }}
# runs-on: ubuntu-latest
# needs: build
# steps:
# - name: Deploy to GitHub Pages
# id: deployment
# uses: actions/deploy-pages@v4
.github/workflows/lint.yml
-13
View File
@@ -1,13 +0,0 @@
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
.gitignore
+2
View File
@@ -1,3 +1,5 @@
.idea
.vscode
node_modules
.eslintcache
dist
.prettierignore
-1
View File
@@ -1 +0,0 @@
*.html
.prettierrc
-5
View File
@@ -1,5 +0,0 @@
{
"tabWidth": 2,
"useTabs": false,
"htmlWhitespaceSensitivity": "ignore"
}
README.md
+2 -2
View File
@@ -21,7 +21,7 @@ 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)
1. [ ] Rename app in [README.md](./README.md), [index.html](./index.html), [App.vue](./src/App.vue) and [package.json](./package.json)
2. [ ] Change app hue and saturation in [style.css](./style.css)
3. [ ] Remove this part and all TODO
@@ -29,4 +29,4 @@ git merge template/master
## 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
* [Lucide icons](https://lucide.dev/icons) are available, you can use `<LucideIcon name=house/>` on your Vue template
env.d.ts
Vendored
+1
View File
@@ -0,0 +1 @@
/// <reference types="vite/client" />
eslint.config.mjs
+20 -30
View File
@@ -1,34 +1,24 @@
import eslintConfigPrettier from "eslint-config-prettier";
import globals from "globals";
import pluginJs from "@eslint/js";
import { globalIgnores } from "eslint/config";
import {
defineConfigWithVueTs,
vueTsConfigs,
} from "@vue/eslint-config-typescript";
import pluginVue from "eslint-plugin-vue";
import skipFormatting from "@vue/eslint-config-prettier/skip-formatting";
import { configureVueProject } from "@vue/eslint-config-typescript";
/** @type {import('eslint').Linter.Config[]} */
export default [
configureVueProject({ scriptLangs: ["ts", "tsx"] });
export default defineConfigWithVueTs(
{
languageOptions: {
globals: {
...globals.browser,
lucide: "readonly",
name: "app/files-to-lint",
files: ["**/*.{ts,mts,tsx,vue}"],
},
},
},
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,
];
globalIgnores(["**/dist/**"]),
pluginVue.configs["flat/recommended"],
vueTsConfigs.strictTypeChecked,
vueTsConfigs.stylisticTypeChecked,
skipFormatting,
);
index.html
+8 -34
View File
@@ -1,22 +1,13 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<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" />
<link rel="stylesheet" href="/style.css" />
<link rel="stylesheet" href="/material-colors.css" />
<!-- <link rel="icon" href="/favicon.ico"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- card related -->
<!--
<meta name="twitter:card" content="summary_large_image">
@@ -26,25 +17,8 @@
<meta property="org:url" content="https://...">
-->
</head>
<body>
<main id="app" style="display: none">
<!-- TODO: 1. rename app -->
<h1>
<i icon="package"></i>
Vue-Boilerplate
</h1>
<br />
<p v-html="content"></p>
<br />
<small class="footer">
<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>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
main.js
-44
View File
@@ -1,44 +0,0 @@
import { createApp } from "vue";
const utils = {
updateIcons() {
lucide.createIcons({
nameAttr: "icon",
attrs: {
width: "1.1em",
height: "1.1em",
},
});
},
};
const app = createApp({
data() {
return {
content:
"Fill this page with <i>whatever</i> you're going to develop.<br><b>Then enjoy!</b>",
};
},
computed: {
currentYear() {
return new Date().getFullYear();
},
},
watch: {},
updated() {
utils.updateIcons();
},
mounted() {
setTimeout(this.showApp);
utils.updateIcons();
},
methods: {
showApp() {
document.getElementById("app").setAttribute("style", "");
},
},
});
window.onload = () => {
app.mount("#app");
};
package-lock.json
Generated
+3808 -1169
View File
File diff suppressed because it is too large Load Diff
package.json
+32 -17
View File
@@ -1,25 +1,40 @@
{
"name": "vue-boilerplate",
"version": "1.0.0",
"version": "0.0.0",
"private": true,
"type": "module",
"engines": {
"node": "^20.19.0 || >=22.12.0"
},
"scripts": {
"lint": "eslint",
"fix": "eslint --fix"
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build",
"lint": "eslint . --cache",
"fix": "eslint . --fix --cache",
"format": "prettier --write --experimental-cli src/"
},
"repository": {
"type": "git",
"url": "git+https://github.com/klemek/vue-boilerplate.git"
"dependencies": {
"lucide-vue-next": "^0.562.0",
"vue": "^3.5.25"
},
"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"
"@tsconfig/node24": "^24.0.3",
"@types/node": "^24.10.1",
"@vitejs/plugin-vue": "^6.0.2",
"@vue/eslint-config-prettier": "^10.2.0",
"@vue/eslint-config-typescript": "^14.6.0",
"@vue/tsconfig": "^0.8.1",
"eslint": "^9.39.1",
"eslint-plugin-vue": "~10.5.1",
"jiti": "^2.6.1",
"npm-run-all2": "^8.0.4",
"prettier": "3.6.2",
"typescript": "~5.9.0",
"vite": "^7.2.4",
"vite-plugin-vue-devtools": "^8.0.5",
"vue-tsc": "^3.1.5"
}
}
material-colors.css → public/material-colors.css
View File
style.css → public/style.css
+11 -23
View File
@@ -22,7 +22,7 @@ https://www.joshwcomeau.com/css/custom-css-reset/
3. Allow percentage-based heights in the application
*/
html,
body {
body, div#app {
height: 100%;
}
/*
@@ -145,6 +145,12 @@ ol {
color: var(--text-secondary);
}
hr {
opacity: 25%;
border-bottom: 0;
margin-bottom: 0.5em;
}
textarea,
input,
select,
@@ -172,26 +178,12 @@ a {
}
/*
=================================================
APP STYLE
=================================================
* LUCIDE ICONS
*/
.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);
.lucide {
width: 1.1em;
height: 1.1em;
}
svg.lucide {
@@ -208,7 +200,3 @@ h5 .lucide,
h6 .lucide {
stroke-width: 3;
}
.footer {
opacity: 50%;
}
src/App.vue
+70
View File
@@ -0,0 +1,70 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import LucideIcon from "./components/LucideIcon.vue";
import CustomButton from "./components/CustomButton.vue"
const visible = ref<boolean>(false);
onMounted(() => {
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>
</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;
}
.button:hover {
background-color: var(--background-secondary);
}
.footer {
opacity: 50%;
}
</style>
src/components/CustomButton.vue
+36
View File
@@ -0,0 +1,36 @@
<script setup lang="ts">
interface Props {
href?: string;
color?: string;
}
defineProps<Props>();
</script>
<template>
<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;
}
.button:hover {
background-color: var(--background-secondary);
}
</style>
src/components/LucideIcon.vue
+40
View File
@@ -0,0 +1,40 @@
<script setup lang="ts">
import { computed, onMounted } from "vue";
import * as icons from "lucide-vue-next";
interface Props {
name: string;
color?: string;
strokeWidth?: string;
defaultClass?: string;
}
const props = withDefaults(defineProps<Props>(), {
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("");
}
onMounted(() => {
console.log(kebab2camel(props.name));
});
// @ts-expect-error: cannot infer type of all exported data
const icon = computed(() => icons[kebab2camel(props.name)]);
</script>
<template>
<component
:is="icon"
:color="color"
:stroke-width="strokeWidth"
:default-class="defaultClass"
/>
</template>
src/main.ts
+4
View File
@@ -0,0 +1,4 @@
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");
tsconfig.app.json
+12
View File
@@ -0,0 +1,12 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"paths": {
"@/*": ["./src/*"]
}
}
}
tsconfig.json
+11
View File
@@ -0,0 +1,11 @@
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
}
]
}
tsconfig.node.json
+19
View File
@@ -0,0 +1,19 @@
{
"extends": "@tsconfig/node24/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*",
"eslint.config.*"
],
"compilerOptions": {
"noEmit": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
}
}
vite.config.ts
+19
View File
@@ -0,0 +1,19 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
],
publicDir: "public",
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
}
})