WebpackDev server, fixes to carousel and fontello merge

This commit is contained in:
Linux User 2020-10-01 20:57:19 +02:00
commit 8de1b46557
7 changed files with 1189 additions and 87 deletions

5
.gitignore vendored
View file

@ -1,3 +1,8 @@
#Own
src/res/fontello/css
src/res/fontello/font
#Github gitignore template
# Logs # Logs
logs logs
*.log *.log

View file

@ -4,26 +4,29 @@
"scripts": { "scripts": {
"build": "webpack", "build": "webpack",
"watch": "webpack --watch", "watch": "webpack --watch",
"server": "webpack-dev-server" "server": "webpack-dev-server",
"install-fontello":"fontello-cli install --config ./src/res/fontello/config.json --css src/res/fontello/css/ --font src/res/fontello/font",
"postinstall": "yarn install-fontello"
}, },
"main": "index.js", "main": "index.js",
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.0.1", "@typescript-eslint/eslint-plugin": "^4.0.1",
"@typescript-eslint/parser": "^4.0.1", "@typescript-eslint/parser": "^4.0.1",
"css-loader": "^4.2.2", "css-loader": "^4.3.0",
"eslint": "^7.8.1", "eslint": "^7.8.1",
"eslint-config-prettier": "^6.11.0", "eslint-config-prettier": "^6.11.0",
"extract-loader": "^5.1.0",
"file-loader": "^6.1.0", "file-loader": "^6.1.0",
"fontello-cli": "^0.5.0",
"html-loader": "^1.3.0", "html-loader": "^1.3.0",
"html-webpack-plugin": "^4.4.1", "html-webpack-plugin": "^4.4.1",
"posthtml-extend": "^0.5.0", "posthtml-extend": "^0.5.0",
"posthtml-loader": "^2.0.1", "posthtml-loader": "^2.0.1",
"prettier": "^2.1.1", "prettier": "^2.1.1",
"raw-loader": "^4.0.1", "resolve-url-loader": "^3.1.1",
"sass": "^1.26.10", "sass": "^1.26.10",
"sass-loader": "^10.0.2", "sass-loader": "^10.0.2",
"style-loader": "^1.2.1",
"ts-loader": "^8.0.3", "ts-loader": "^8.0.3",
"typescript": "^4.0.2", "typescript": "^4.0.2",
"webpack": "^4.44.1", "webpack": "^4.44.1",
@ -31,7 +34,5 @@
"webpack-dev-server": "^3.11.0" "webpack-dev-server": "^3.11.0"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^5.15.0",
"resolve-cwd": "^3.0.0"
} }
} }

View file

@ -1,4 +1,5 @@
@use "./color_scheme"; @use "./color_scheme";
@use "./res/fontello/css/fontello";
html { html {
border: 0px; border: 0px;

View file

@ -34,11 +34,11 @@ class Carousel extends HTMLElement {
connectedCallback() { connectedCallback() {
this.shadow.innerHTML = html` this.shadow.innerHTML = html`
<button class="next">${"<"}</button> <button class="next icon-left-open"></button>
<div class="container"> <div class="container">
<img src="${this.items.next().value.img}" /> <img src="${this.items.next().value.img}" />
</div> </div>
<button class="prev">${">"}</button> <button class="prev icon-right-open"></button>
<style> <style>
${Carousel.css} ${Carousel.css}
</style> </style>
@ -152,14 +152,55 @@ class Carousel extends HTMLElement {
} }
button { button {
border: 1px solid var(--background-opposite-2); border: none;
border-radius: 50%; border-radius: 50%;
background-color: var(--background-primary-2); height: 2.2em;
width: 2.2em;
background-color: var(--background-opposite-4);
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
color: var(--text-color-3); color: var(--background-primary-3);
padding: 0;
margin: -20%; margin: -20%;
} }
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: never;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-left-open:before { content: '\\e800'; } /* '' */
.icon-right-open:before { content: '\\e801'; } /* '' */
`; `;
} }
} }

View file

@ -0,0 +1,22 @@
{
"name": "",
"css_prefix_text": "icon-",
"css_use_suffix": false,
"hinting": true,
"units_per_em": 1000,
"ascent": 850,
"glyphs": [
{
"uid": "d870630ff8f81e6de3958ecaeac532f2",
"css": "left-open",
"code": 59392,
"src": "fontawesome"
},
{
"uid": "399ef63b1e23ab1b761dfbb5591fa4da",
"css": "right-open",
"code": 59393,
"src": "fontawesome"
}
]
}

View file

@ -23,11 +23,30 @@ module.exports = {
use: [ use: [
{ {
loader: "file-loader", loader: "file-loader",
options: { name: "[name].css" }, options: {
name: "[name].css",
}, },
},
"extract-loader",
"css-loader",
"resolve-url-loader",
"sass-loader", "sass-loader",
], ],
}, },
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "fontello/",
esModule: false,
},
},
],
},
{ {
test: /\.html$/, test: /\.html$/,
use: [ use: [
@ -37,20 +56,18 @@ module.exports = {
options: { options: {
plugins: [ plugins: [
/* PostHTML Plugins */ /* PostHTML Plugins */
require("posthtml-extend")({ root: src }), require("posthtml-extend")({
root: src,
}),
], ],
}, },
}, },
], ],
}, },
{
test: /\.svg$/,
loader: "svg-inline-loader",
},
], ],
}, },
resolve: { resolve: {
extensions: [".tsx", ".ts", ".js", ".svg"], extensions: [".tsx", ".ts", ".js"],
}, },
output: { output: {
filename: "bundle.js", filename: "bundle.js",

1153
yarn.lock

File diff suppressed because it is too large Load diff