chore: template configuration
This commit is contained in:
@@ -1,63 +1,4 @@
|
|||||||
# Vue-boilerplate
|
# Coverify
|
||||||
*Minimal static Vue project*
|
*Create album covers from mundane photos*
|
||||||
|
|
||||||
<!-- TODO: 1. rename app (and tool URL) -->
|
### [Tool link](https://klemek.github.io/coverify/)
|
||||||
|
|
||||||
### [Tool link](https://klemek.github.io/vue-boilerplate/)
|
|
||||||
|
|
||||||
## Use this template
|
|
||||||
|
|
||||||
<!-- TODO: 3. remove this part -->
|
|
||||||
|
|
||||||
### Creating project
|
|
||||||
|
|
||||||
#### Method 1: Using GitHub repository template
|
|
||||||
|
|
||||||
[Use this template](https://github.com/new?template_name=vue-boilerplate&template_owner=klemek)
|
|
||||||
|
|
||||||
#### Method 2: CLI forking
|
|
||||||
|
|
||||||
```bash
|
|
||||||
git clone git@github.com/klemek/vue-boilerplate.git {PROJECT}
|
|
||||||
cd {PROJECT}
|
|
||||||
git remote rename origin template
|
|
||||||
git remote add origin {PROJECT REMOTE}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Tasks
|
|
||||||
|
|
||||||
> Every task is indicated with a TODO
|
|
||||||
|
|
||||||
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](./public/style.css)
|
|
||||||
3. [ ] Remove this part and all TODO
|
|
||||||
|
|
||||||
### Updating from template
|
|
||||||
|
|
||||||
To update from templates latest changes:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
make update-template
|
|
||||||
```
|
|
||||||
|
|
||||||
### Makefile targets
|
|
||||||
|
|
||||||
```txt
|
|
||||||
Usage: make [target1] (target2) ...
|
|
||||||
|
|
||||||
Commands/Targets:
|
|
||||||
help show this message
|
|
||||||
build build static site in "dist"
|
|
||||||
dev run dev version of static site
|
|
||||||
lint lint code
|
|
||||||
fix fix and reformat code
|
|
||||||
update-template fetch and merge core changes from template
|
|
||||||
|
|
||||||
Environment:
|
|
||||||
BUN = bun
|
|
||||||
```
|
|
||||||
|
|
||||||
### 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 `<LucideIcon name=house/>` on your Vue template
|
|
||||||
|
|||||||
+1
-2
@@ -1,8 +1,7 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<!-- TODO: 1. rename app -->
|
<title>Coverify</title>
|
||||||
<title>Change this you moron</title>
|
|
||||||
<link rel="stylesheet" href="/style.css" />
|
<link rel="stylesheet" href="/style.css" />
|
||||||
<link rel="stylesheet" href="/material-colors.css" />
|
<link rel="stylesheet" href="/material-colors.css" />
|
||||||
<!-- <link rel="icon" href="/favicon.ico"> -->
|
<!-- <link rel="icon" href="/favicon.ico"> -->
|
||||||
|
|||||||
+2
-3
@@ -85,9 +85,8 @@ CUSTOM STYLE
|
|||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* https://materialui.co/colors/ */
|
/* https://materialui.co/colors/ */
|
||||||
/* TODO: 2. change hue and saturation */
|
--hue-primary: 199.53;
|
||||||
--hue-primary: 65.52;
|
--sat-primary: 28.30%;
|
||||||
--sat-primary: 20%;
|
|
||||||
--background: hsl(var(--hue-primary), var(--sat-primary), 96.08%);
|
--background: hsl(var(--hue-primary), var(--sat-primary), 96.08%);
|
||||||
--background-primary: hsl(var(--hue-primary), var(--sat-primary), 93.33%);
|
--background-primary: hsl(var(--hue-primary), var(--sat-primary), 93.33%);
|
||||||
--background-secondary: hsl(var(--hue-primary), var(--sat-primary), 90%);
|
--background-secondary: hsl(var(--hue-primary), var(--sat-primary), 90%);
|
||||||
|
|||||||
+3
-19
@@ -1,7 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted } from "vue";
|
import { ref, onMounted } from "vue";
|
||||||
import LucideIcon from "./components/LucideIcon.vue";
|
import LucideIcon from "./components/LucideIcon.vue";
|
||||||
import CustomButton from "./components/CustomButton.vue";
|
|
||||||
|
|
||||||
const visible = ref<boolean>(false);
|
const visible = ref<boolean>(false);
|
||||||
|
|
||||||
@@ -14,33 +13,18 @@ onMounted(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main :style="{ display: visible ? 'inherit' : 'none' }">
|
<main :style="{ display: visible ? 'inherit' : 'none' }">
|
||||||
<!-- TODO: 1. rename app -->
|
|
||||||
<h1>
|
<h1>
|
||||||
<LucideIcon name="package" />
|
<LucideIcon name="disc-3" />
|
||||||
Vue-Boilerplate
|
Coverify
|
||||||
</h1>
|
</h1>
|
||||||
<br />
|
<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 />
|
<hr />
|
||||||
<small class="footer">
|
<small class="footer">
|
||||||
<LucideIcon name="at-sign" />
|
<LucideIcon name="at-sign" />
|
||||||
|
|
||||||
<a href="https://github.com/klemek" target="_blank">klemek</a>
|
<a href="https://github.com/klemek" target="_blank">klemek</a>
|
||||||
-
|
-
|
||||||
<!-- TODO: 1. rename app -->
|
|
||||||
<LucideIcon name="github" />
|
<LucideIcon name="github" />
|
||||||
|
<a href="https://github.com/klemek/coverify" target="_blank">Repository</a>
|
||||||
<a href="https://github.com/klemek/vue-boilerplate" target="_blank">
|
|
||||||
Repository
|
|
||||||
</a>
|
|
||||||
- 2025
|
- 2025
|
||||||
</small>
|
</small>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
Reference in New Issue
Block a user