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="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Web app for keeping track of anything you want to count."> <meta name="description" content="Web app for keeping track of anything you want to count.">
<title>NCounter</title> <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> </head>
<body> <body>
<noscript> <noscript>

2
src/ncounter/About.svelte
View file

@ -1,5 +1,5 @@
<div class="about"> <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> <header>
<h1>NCounter</h1> <h1>NCounter</h1>
<h2>Release |BUILD_DATE|</h2> <h2>Release |BUILD_DATE|</h2>

4
src/ncounter/App.svelte
View file

@ -10,10 +10,10 @@
</div> </div>
{/if} {/if}
<div class="tool-bar"> <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" {#if updateAvailable}<button class="update"
class:animate="{!ignoreUpdate}" 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> <button class="about" on:click="{ () => { showAbout = true; } }">?</button>
</div> </div>
</div> </div>

17
src/ncounter/Counter.svelte
View file

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

2
src/ncounter/History.svelte
View file

@ -1,7 +1,7 @@
<div class="history-container"> <div class="history-container">
<header> <header>
<h1>{ counter.title }</h1> <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> </header>
<canvas class="chart-container" bind:this={ chartEl } width="{ window.outerWidth }" height="250"> <canvas class="chart-container" bind:this={ chartEl } width="{ window.outerWidth }" height="250">
</canvas> </canvas>

53
webpack.common.js
View file

@ -1,6 +1,5 @@
const path = require('path'); const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const GoogleFontsPlugin = require('@beyonk/google-fonts-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const LicensePlugin = require('webpack-license-plugin'); const LicensePlugin = require('webpack-license-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin');
@ -20,30 +19,26 @@ module.exports = {
excludeChunks: ['sw'], excludeChunks: ['sw'],
template: 'src/index.html' template: 'src/index.html'
}), }),
new GoogleFontsPlugin({
fonts: [
{ family: "Material Icons" }
],
local: false
}),
new LicensePlugin(), 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' {
}, from: 'src/icon/safari-pinned-tab.svg', to: 'icons'
{ },
from: 'src/icon/favicon.ico', to: 'icons' {
}, from: 'src/icon/favicon.ico', to: 'icons'
{ },
from: 'src/icon/site.webmanifest', to: 'icons' {
}, from: 'src/icon/site.webmanifest', to: 'icons'
{ },
from: 'src/icon/browserconfig.xml', to: 'icons' {
} from: 'src/icon/browserconfig.xml', to: 'icons'
]) }
]
})
], ],
output: { output: {
filename: '[name].js', filename: '[name].js',
@ -51,13 +46,6 @@ module.exports = {
}, },
module: { module: {
rules: [ rules: [
{
test: /\.html$/,
loader: 'html-loader',
options: {
interpolate: true
}
},
{ {
test: /\.svelte$/, test: /\.svelte$/,
exclude: /node_modules/, exclude: /node_modules/,
@ -87,4 +75,7 @@ module.exports = {
} }
] ]
}, },
resolve: {
conditionNames: ['svelte']
},
} }