cheddar/ncounter
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

remove html-loader and add static font link

Browse source
This commit is contained in:
CheddarCrisp 2024-04-12 12:17:52 -04:00
parent e52dbb6b9a
commit 1879d3a420
6 changed files with 42 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/index.html
View file

@ -5,7 +5,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Web app for keeping track of anything you want to count.">
<title>NCounter</title>
${require('./icon/html_code.html')}
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="manifest" href="icons/site.webmanifest">
<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#3a86b7">
<link rel="shortcut icon" href="icons/favicon.ico">
<meta name="msapplication-TileColor" content="#dce6ef">
<meta name="msapplication-config" content="icons/browserconfig.xml">
<meta name="theme-color" content="#dce6ef">
</head>
<body>
<noscript>

2
src/ncounter/About.svelte
View file

@ -1,5 +1,5 @@
<div class="about">
<button class="close" on:click={ () => { dispatch('close'); } }><i class="material-icons">close</i></button>
<button class="close" on:click={ () => { dispatch('close'); } }><span class="material-symbols-outlined">close</span></button>
<header>
<h1>NCounter</h1>
<h2>Release |BUILD_DATE|</h2>

4
src/ncounter/App.svelte
View file

@ -10,10 +10,10 @@
</div>
{/if}
<div class="tool-bar">
<button class="add" on:click="{ showAdd }"><i class="material-icons">add</i></button>
<button class="add" on:click="{ showAdd }"><span class="material-symbols-outlined">add</span></button>
{#if updateAvailable}<button class="update"
class:animate="{!ignoreUpdate}"
on:click={() => { ignoreUpdate = true; showUpdateMessage = !showUpdateMessage; }}><i class="material-icons">arrow_upward</i></button>{/if}
on:click={() => { ignoreUpdate = true; showUpdateMessage = !showUpdateMessage; }}><span class="material-symbols-outlined">arrow_upward</span></button>{/if}
<button class="about" on:click="{ () => { showAbout = true; } }">?</button>
</div>
</div>

17
src/ncounter/Counter.svelte
View file

@ -5,14 +5,14 @@
<MyProgress value={ counter.value } max={ counter.max }></MyProgress>
{/if}
<div class="controls">
<button on:click={ () => { showIncrement = true; } }><i class="material-icons">add</i></button>
<button on:click={ () => { showSet = true; } }><i class="material-icons">edit</i></button>
<button class="reset" on:click={ reset }><i class="material-icons">replay</i></button>
<button on:click={ () => { showIncrement = true; } }><span class="material-symbols-outlined">add</span></button>
<button on:click={ () => { showSet = true; } }><span class="material-symbols-outlined">edit</span></button>
<button class="reset" on:click={ reset }><span class="material-symbols-outlined">replay</span></button>
{#if counter.saveHistory}
<button class="history" on:click={ () => { showHistory = true; } }><i class="material-icons">show_chart</i></button>
<button class="history" on:click={ () => { showHistory = true; } }><span class="material-symbols-outlined">show_chart</span></button>
{/if}
<button on:click={ startEdit }><i class="material-icons">settings</i></button>
<button on:click={ remove }><i class="material-icons">delete</i></button>
<button on:click={ startEdit }><span class="material-symbols-outlined">settings</span></button>
<button on:click={ remove }><span class="material-symbols-outlined">delete</span></button>
</div>
{#if showValueDialog}
<div class="dialog">
@ -40,14 +40,9 @@
</form>
</div>
{/if}
{#if showHistory}
<History { counterId } on:close={ () => { showHistory = false; } }></History>
{/if}
</div>
<script>
import MyProgress from './MyProgress.svelte';
import History from './History.svelte';
import { tick } from 'svelte';
import { counters } from './db.js';
export let counterId;

2
src/ncounter/History.svelte
View file

@ -1,7 +1,7 @@
<div class="history-container">
<header>
<h1>{ counter.title }</h1>
<button class="close" on:click={ close }><i class="material-icons">close</i></button>
<button class="close" on:click={ close }><span class="material-symbols-outlined">close</span></button>
</header>
<canvas class="chart-container" bind:this={ chartEl } width="{ window.outerWidth }" height="250">
</canvas>

25
webpack.common.js
View file

@ -1,6 +1,5 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const GoogleFontsPlugin = require('@beyonk/google-fonts-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const LicensePlugin = require('webpack-license-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
@ -20,16 +19,11 @@ module.exports = {
excludeChunks: ['sw'],
template: 'src/index.html'
}),
new GoogleFontsPlugin({
fonts: [
{ family: "Material Icons" }
],
local: false
}),
new LicensePlugin(),
new CopyWebpackPlugin([
new CopyWebpackPlugin({
patterns: [
{
from: 'src/icon/*.png', to: 'icons', flatten: true
from: 'src/icon/*.png', to: path.resolve(__dirname, 'dist', 'icons', '[name][ext]')
},
{
from: 'src/icon/safari-pinned-tab.svg', to: 'icons'
@ -43,7 +37,8 @@ module.exports = {
{
from: 'src/icon/browserconfig.xml', to: 'icons'
}
])
]
})
],
output: {
filename: '[name].js',
@ -51,13 +46,6 @@ module.exports = {
},
module: {
rules: [
{
test: /\.html$/,
loader: 'html-loader',
options: {
interpolate: true
}
},
{
test: /\.svelte$/,
exclude: /node_modules/,
@ -87,4 +75,7 @@ module.exports = {
}
]
},
resolve: {
conditionNames: ['svelte']
},
}