klemek/legume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Kleπek
2025-11-04 11:24:35 +01:00
committed by GitHub
commit 88ff356351
13 changed files with 4304 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.editorconfig
+12
View File
@@ -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 = true
insert_final_newline = true
.github/workflows/lint.yml
+13
View File
@@ -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
.gitignore
+3
View File
@@ -0,0 +1,3 @@
.idea
.vscode
node_modules
.prettierignore
+1
View File
@@ -0,0 +1 @@
*.html
.prettierrc
+5
View File
@@ -0,0 +1,5 @@
{
"tabWidth": 2,
"useTabs": false,
"htmlWhitespaceSensitivity": "ignore"
}
README.md
+32
View File
@@ -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
eslint.config.mjs
+34
View File
@@ -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,
];
index.html
+50
View File
@@ -0,0 +1,50 @@
<!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" />
<!-- card related -->
<!--
<meta name="twitter:card" content="summary_large_image">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="https://.../preview_640x320.jpg">
<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>
</body>
</html>
main.js
+44
View File
@@ -0,0 +1,44 @@
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");
};
material-colors.css
+1650
View File
File diff suppressed because it is too large Load Diff
package-lock.json
Generated
+2221
View File
File diff suppressed because it is too large Load Diff
package.json
+25
View File
@@ -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"
}
}
style.css
+214
View File
@@ -0,0 +1,214 @@
/*
=================================================
https://www.joshwcomeau.com/css/custom-css-reset/
=================================================
*/
/*
1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/*
2. Remove default margin
*/
* {
margin: 0;
}
/*
3. Allow percentage-based heights in the application
*/
html,
body {
height: 100%;
}
/*
Typographic tweaks!
4. Add accessible line-height
5. Improve text rendering
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/*
7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
font: inherit;
}
/*
8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/*
9. Create a root stacking context
*/
#root,
#__next {
isolation: isolate;
}
/*
=================================================
CUSTOM STYLE
=================================================
*/
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
: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%);
--background-primary: hsl(var(--hue-primary), var(--sat-primary), 93.33%);
--background-secondary: hsl(var(--hue-primary), var(--sat-primary), 90%);
--color-primary: hsl(var(--hue-primary), var(--sat-primary), 50%);
--text-primary: hsl(var(--hue-primary), var(--sat-primary), 25%);
--text-secondary: hsl(var(--hue-primary), var(--sat-primary), 30%);
}
/*
=================================================
https://blog.koley.in/2019/339-bytes-of-responsive-css
https://www.swyx.io/css-100-bytes
https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41
=================================================
*/
html,
body {
padding: 0;
max-width: 100%;
color: var(--text-primary);
font-family: "Roboto", Verdana, serif;
}
body {
background-color: var(--background);
}
main {
padding: 1.5rem;
margin: auto;
background-color: var(--background-primary);
min-height: 100%;
}
table {
border-collapse: collapse;
width: 100%;
font-size: 0.9em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 1em 0 0.5em;
}
p,
ul,
ol {
margin-bottom: 2em;
color: var(--text-secondary);
}
textarea,
input,
select,
.mono {
font-family: "Roboto Mono", monospace;
}
textarea {
width: 100%;
min-width: 100%;
max-width: 100%;
}
a {
color: inherit;
}
@media only screen and (min-width: 768px) {
main {
max-width: 42rem;
}
table {
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;
}
.footer {
opacity: 50%;
}