From 1879d3a420a97fb017723ce7d9c06ca0e039b4a2 Mon Sep 17 00:00:00 2001
From: CheddarCrisp <cheddar@crispbyte.dev>
Date: Fri, 12 Apr 2024 12:17:52 -0400
Subject: [PATCH] remove html-loader and add static font link
---
src/index.html | 11 +++++++-
src/ncounter/About.svelte | 2 +-
src/ncounter/App.svelte | 4 +--
src/ncounter/Counter.svelte | 17 +++++-------
src/ncounter/History.svelte | 2 +-
webpack.common.js | 53 +++++++++++++++----------------------
6 files changed, 42 insertions(+), 47 deletions(-)
diff --git a/src/index.html b/src/index.html
index 9a5b8d3..1274b78 100644
--- a/src/index.html
+++ b/src/index.html
@@ -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>
diff --git a/src/ncounter/About.svelte b/src/ncounter/About.svelte
index 3818b11..82eaad9 100644
--- a/src/ncounter/About.svelte
+++ b/src/ncounter/About.svelte
@@ -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>
diff --git a/src/ncounter/App.svelte b/src/ncounter/App.svelte
index 1c9f4be..87fe8f9 100644
--- a/src/ncounter/App.svelte
+++ b/src/ncounter/App.svelte
@@ -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>
diff --git a/src/ncounter/Counter.svelte b/src/ncounter/Counter.svelte
index ded3176..f4fe74b 100644
--- a/src/ncounter/Counter.svelte
+++ b/src/ncounter/Counter.svelte
@@ -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;
diff --git a/src/ncounter/History.svelte b/src/ncounter/History.svelte
index 41c1679..87d3bfd 100644
--- a/src/ncounter/History.svelte
+++ b/src/ncounter/History.svelte
@@ -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>
diff --git a/webpack.common.js b/webpack.common.js
index 9a3de4a..08fc3f6 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -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,30 +19,26 @@ module.exports = {
excludeChunks: ['sw'],
template: 'src/index.html'
}),
- new GoogleFontsPlugin({
- fonts: [
- { family: "Material Icons" }
- ],
- local: false
- }),
new LicensePlugin(),
- new CopyWebpackPlugin([
- {
- from: 'src/icon/*.png', to: 'icons', flatten: true
- },
- {
- from: 'src/icon/safari-pinned-tab.svg', to: 'icons'
- },
- {
- from: 'src/icon/favicon.ico', to: 'icons'
- },
- {
- from: 'src/icon/site.webmanifest', to: 'icons'
- },
- {
- from: 'src/icon/browserconfig.xml', to: 'icons'
- }
- ])
+ new CopyWebpackPlugin({
+ patterns: [
+ {
+ from: 'src/icon/*.png', to: path.resolve(__dirname, 'dist', 'icons', '[name][ext]')
+ },
+ {
+ from: 'src/icon/safari-pinned-tab.svg', to: 'icons'
+ },
+ {
+ from: 'src/icon/favicon.ico', to: 'icons'
+ },
+ {
+ from: 'src/icon/site.webmanifest', to: 'icons'
+ },
+ {
+ 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']
+ },
}
\ No newline at end of file