NEW
diff --git a/js/banner.js b/js/banner.js
new file mode 100644
index 0000000..292e56c
--- /dev/null
+++ b/js/banner.js
@@ -0,0 +1,263 @@
+import { getPattern } from './data/patterns';
+import { getMainElements } from "./helpers/elements";
+import { isLocalDevelopment } from './helpers/helpers';
+
+const {
+ bannerImage,
+ bannerTitle,
+ bannerSubtitle,
+ toolbox,
+ toolboxDecorations,
+ toolboxBackground,
+} = getMainElements();
+
+function updateBanner(theme) {
+ console.table(theme);
+ console.log('•ᴗ• Updating Banner ...');
+ applyTheme(theme);
+ if (!theme.ignoreSave) saveTheme(theme);
+}
+
+function applyTheme({
+ padding,
+ background,
+ titleColor,
+ subtitleColor,
+ borderColor,
+ borderSize,
+ borderRadius,
+ textAlign,
+ decoration,
+ decorationSize,
+ pattern,
+ patternColor,
+ patternOpacity,
+ patternSize,
+ titleFont,
+ subtitleFont,
+ titleFontSize,
+ subtitleFontSize,
+ title,
+ subtitle,
+ decorationLocal = false
+}) {
+ if (padding) {
+ let paddingValue = `${padding}px`;
+ bannerImage.style.padding = paddingValue;
+
+ document.querySelectorAll('.img-decoration-container img')
+ .forEach(dec => {
+ if (dec.style.left === 'auto')
+ dec.style.right = paddingValue;
+ else
+ dec.style.left = paddingValue;
+ });
+ }
+ if (background) bannerImage.style.backgroundColor = background;
+ if (titleColor) bannerTitle.style.color = titleColor;
+ if (subtitleColor) bannerSubtitle.style.color = subtitleColor;
+ if (borderColor && borderSize && borderRadius) {
+ bannerImage.style.border = `solid ${borderColor} ${borderSize}px`;
+ bannerImage.style.borderRadius = `${borderRadius}px`;
+ }
+ if (borderColor) bannerImage.style.borderColor = borderColor;
+ if (textAlign) {
+ bannerImage.style.alignItems = textAlign;
+
+ // const paddingValue = document.querySelector('#paddings-input').value || 25;
+ const paddingValue = padding || 25;
+ const paddingPx = `${paddingValue}px`;
+ const imageDecoration = document.querySelector('.img-decoration-container img');
+ if (textAlign === 'flex-end') {
+ document.querySelector('.img-decoration-container .img-decoration-2')?.remove();
+ imageDecoration.style.left = paddingPx;
+ imageDecoration.style.right = 'auto';
+ } else if (textAlign === 'flex-start') {
+ document.querySelector('.img-decoration-container .img-decoration-2')?.remove();
+ imageDecoration.style.left = 'auto';
+ imageDecoration.style.right = paddingPx;
+ } else if (textAlign === 'center') {
+ imageDecoration.style.left = 'auto';
+ imageDecoration.style.right = paddingPx;
+ if (!document.querySelector('.img-decoration-container .img-decoration-2')) {
+ const clonedImageDecoration = imageDecoration.cloneNode(true);
+ clonedImageDecoration.style.left = paddingPx;
+ clonedImageDecoration.style.right = 'auto';
+ clonedImageDecoration.className = 'img-decoration-2';
+ const imageDecorationContainer = document.querySelector('.img-decoration-container');
+ imageDecorationContainer.appendChild(clonedImageDecoration)
+ }
+ }
+ }
+ if (decoration) {
+ const imageDecoration = bannerImage.querySelector('.img-decoration-container .img-decoration');
+ const otherImageDecoration = bannerImage.querySelector('.img-decoration-container .img-decoration-2');
+
+ if (decoration === 'none') {
+ imageDecoration.style.display = 'none';
+ if (otherImageDecoration)
+ otherImageDecoration.style.display = 'none';
+ } else {
+ let imageSrc = decorationLocal ? decoration : `images/decorations/${decoration}`;
+
+ imageDecoration.style.display = 'block';
+ imageDecoration.src = imageSrc;
+ if (otherImageDecoration) {
+ otherImageDecoration.style.display = 'block';
+ otherImageDecoration.src = imageSrc;
+ }
+ }
+ }
+ if (decorationSize) {
+ const imageDecoration = bannerImage.querySelector('.img-decoration-container .img-decoration');
+ const otherImageDecoration = bannerImage.querySelector('.img-decoration-container .img-decoration-2');
+
+ imageDecoration.style.width = `${decorationSize}px`;
+ if (otherImageDecoration)
+ otherImageDecoration.style.width = `${decorationSize}px`;
+ }
+ if (pattern || patternColor || patternOpacity || patternSize) {
+ bannerImage.style.backgroundImage = getPattern(pattern, patternColor.replace('#', ''), patternOpacity);
+ bannerImage.style.backgroundSize = `${patternSize}px`;
+ }
+ if (titleFont && subtitleFont) {
+ // document.fonts.ready.then(() => {
+ bannerTitle.style.fontFamily = `"${titleFont}"`;
+ bannerSubtitle.style.fontFamily = `"${subtitleFont}"`;
+ // });
+ }
+ if (titleFontSize || subtitleFontSize) {
+ bannerTitle.style.fontSize = `${titleFontSize}px`;
+ bannerSubtitle.style.fontSize = `${subtitleFontSize}px`;
+ }
+ if (title || subtitle) {
+ bannerTitle.innerText = title || '';
+ bannerSubtitle.innerText = subtitle || '';
+ }
+}
+
+function saveTheme(theme) {
+ console.log('•ᴗ• Saving theme ...')
+ // if (!theme.persistText) {
+ // delete theme['title'];
+ // delete theme['subtitle'];
+ // }
+ const oldTheme = JSON.parse(localStorage.getItem('theme'));
+ let newTheme;
+ if (oldTheme) {
+ newTheme = { ...oldTheme, ...theme };
+ } else {
+ newTheme = theme;
+ }
+ localStorage.setItem('theme', JSON.stringify(newTheme));
+
+ if (isLocalDevelopment) {
+ // console.log(theme);
+ console.table(newTheme);
+ }
+}
+
+function updateUIOptions({
+ padding = 25,
+ background,
+ titleColor,
+ subtitleColor,
+ borderColor,
+ borderSize,
+ borderRadius,
+ textAlign,
+ decoration,
+ decorationSize,
+ pattern,
+ patternColor,
+ patternSize,
+ patternOpacity,
+ titleFont,
+ subtitleFont,
+ titleFontSize = 40,
+ subtitleFontSize = 20,
+ title,
+ subtitle
+}) {
+ console.log('•ᴗ• Updating UI Options ...')
+
+ if (padding) {
+ const paddingInput = document.querySelector('#paddings-input');
+ paddingInput.value = padding;
+ paddingInput.nextElementSibling.value = padding;
+ }
+ if (background) {
+ const mainTabBgColorSelector = document.querySelector('.color-selectors-container input#main-bg-color-selector');
+ const backgroundTabBgColorSelector = document.querySelector('.bg-color-selectors input#background-bg-color-selector');
+ mainTabBgColorSelector.value = background;
+ backgroundTabBgColorSelector.value = background;
+ }
+ if (titleColor) {
+ const mainTabtitleColorSelector = toolbox.querySelector('.color-selectors-container input#title-color-selector');
+ mainTabtitleColorSelector.value = titleColor;
+ }
+ if (subtitleColor) {
+ const mainTabSubtitleColorSelector = toolbox.querySelector('.color-selectors-container input#subtitle-color-selector');
+ mainTabSubtitleColorSelector.value = subtitleColor;
+ }
+ if (borderColor || borderSize || borderRadius) {
+ const borderColorSelector = toolboxBackground.querySelector('.bg-color-selectors input#border-color-selector');
+ const borderInput = toolboxBackground.querySelector('.border-inputs input#border-input');
+ const borderRadiusInput = toolboxBackground.querySelector('.border-inputs input#border-radius-input');
+ borderColorSelector.value = borderColor;
+ borderInput.value = borderSize;
+ borderInput.nextElementSibling.value = borderSize;
+ borderRadiusInput.value = borderRadius;
+ borderRadiusInput.nextElementSibling.value = borderRadius;
+ }
+ if (textAlign) { }
+ if (decoration) { }
+ if (decorationSize) {
+ const decorationSizeInput = toolboxDecorations.querySelector('.decorations-size-inputs input#decoration-size-input');
+ decorationSizeInput.value = decorationSize;
+ decorationSizeInput.nextElementSibling.value = decorationSize;
+ }
+ if (pattern) { }
+ if (patternSize) {
+ const patternSizeInput = toolboxBackground.querySelector('.pattern-inputs input#pattern-size-input');
+ patternSizeInput.value = patternSize;
+ patternSizeInput.nextElementSibling.value = patternSize;
+
+ }
+ if (patternColor || patternOpacity) {
+ const patternOpacityInput = toolboxBackground.querySelector('.pattern-inputs input#pattern-opacity-input');
+ const patternColorSelector = toolboxBackground.querySelector('.pattern-inputs input#pattern-color-selector');
+ patternOpacityInput.value = patternOpacity
+ patternOpacityInput.nextElementSibling.value = patternOpacity
+ patternColorSelector.value = patternColor;
+ }
+ if (titleFont || subtitleFont) {
+ toolbox.querySelector('.font-selectors-container #title-font-selector').value = titleFont ?? 'Red Hat Display';
+ toolbox.querySelector('.font-selectors-container #subtitle-font-selector').value = subtitleFont ?? 'Kalam';
+ }
+ if (titleFontSize || subtitleFontSize) {
+ const titleFontSizeInput = toolbox.querySelector('.font-size-inputs input#title-font-size-input');
+ titleFontSizeInput.value = titleFontSize;
+ titleFontSizeInput.nextElementSibling.value = titleFontSize;
+
+ const subtitleFontSizeInput = toolbox.querySelector('.font-size-inputs input#subtitle-font-size-input');
+ subtitleFontSizeInput.value = subtitleFontSize;
+ subtitleFontSizeInput.nextElementSibling.value = subtitleFontSize;
+ }
+ if (title || subtitle) {
+ toolbox.querySelector('.text-inputs input#title-input').value = title;
+ toolbox.querySelector('.text-inputs input#subtitle-input').value = subtitle;
+ }
+}
+
+function getSavedThemeProp(prop) {
+ if (!prop) return '';
+ const theme = JSON.parse(localStorage.getItem('theme'));
+ return theme[prop];
+}
+
+export {
+ updateBanner,
+ updateUIOptions,
+ getSavedThemeProp
+};
diff --git a/js/data/themes.json b/js/data/presets.json
similarity index 81%
rename from js/data/themes.json
rename to js/data/presets.json
index 0a7db00..6f02209 100644
--- a/js/data/themes.json
+++ b/js/data/presets.json
@@ -1,6 +1,7 @@
[
{
"background": "#446BAF",
+ "padding": 25,
"titleColor": "#FFFFFF",
"subtitleColor": "#FFFFFF",
"borderColor": "#FFFFFF",
@@ -11,13 +12,17 @@
"decorationSize": 77,
"pattern": "bubbles",
"patternColor": "#FFFFFF",
+ "patternSize": 200,
"patternOpacity": 0.15,
- "titleFont": "Tahoma",
- "subtitleFont": "Quattrocento",
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
+ "titleFont": "Red Hat Display",
+ "subtitleFont": "Kalam",
"previewImage": "theme-1-preview.png"
},
{
"background": "#112137",
+ "padding": 25,
"titleColor": "#FFFFFF",
"subtitleColor": "#05F1FA",
"borderColor": "#eeff00",
@@ -28,11 +33,15 @@
"decorationSize": 100,
"pattern": "i-like-food",
"patternColor": "#FFFFFF",
+ "patternSize": 225,
"patternOpacity": 0.25,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"previewImage": "theme-2-preview.png"
},
{
"background": "#000000",
+ "padding": 25,
"titleColor": "#FFFFFF",
"subtitleColor": "#c671d9",
"borderColor": "#FFFFFF",
@@ -43,11 +52,15 @@
"decorationSize": 100,
"pattern": "endless-constellation",
"patternColor": "#87d2ff",
+ "patternSize": 250,
"patternOpacity": 0.7,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"previewImage": "theme-3-preview.png"
},
{
"background": "#ff0066",
+ "padding": 25,
"titleColor": "#FFFFFF",
"subtitleColor": "#0f0006",
"borderColor": "#FFFFFF",
@@ -58,11 +71,15 @@
"decorationSize": 100,
"pattern": "temple",
"patternColor": "#FFFFFF",
+ "patternSize": 100,
"patternOpacity": 0.25,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"previewImage": "theme-4-preview.png"
},
{
"background": "#FFFFFF",
+ "padding": 25,
"titleColor": "#f7b3ce",
"subtitleColor": "#55c1ae",
"borderColor": "#88aedc",
@@ -73,11 +90,15 @@
"decorationSize": 100,
"pattern": "bubbles",
"patternColor": "#f3f095",
+ "patternSize": 200,
"patternOpacity": 0.7,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"previewImage": "theme-5-preview.png"
},
{
"background": "#207e78",
+ "padding": 25,
"titleColor": "#d0b506",
"subtitleColor": "#8fd100",
"borderColor": "#ffffff",
@@ -88,11 +109,15 @@
"decorationSize": 100,
"pattern": "i-like-food",
"patternColor": "#1b96f3",
+ "patternSize": 225,
"patternOpacity": 0.45,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"previewImage": "theme-6-preview.png"
},
{
"background": "#000000",
+ "padding": 25,
"titleColor": "#4cfca7",
"subtitleColor": "#0ad6ff",
"borderColor": "#ffffff",
@@ -103,11 +128,15 @@
"decorationSize": 145,
"pattern": "overlapping-circles",
"patternColor": "#ffffff",
+ "patternSize": 80,
"patternOpacity": 0.3,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"previewImage": "theme-7-preview.png"
},
{
"background": "#9340bf",
+ "padding": 25,
"titleColor": "#fbff00",
"subtitleColor": "#ffffff",
"borderColor": "#ffffff",
@@ -118,13 +147,17 @@
"decorationSize": 100,
"pattern": "jigsaw",
"patternColor": "#ffffff",
+ "patternSize": 100,
"patternOpacity": 0.25,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"titleFont": "Life Savers",
"subtitleFont": "Della Respira",
"previewImage": "theme-8-preview.png"
},
{
"background": "#012d4e",
+ "padding": 25,
"titleColor": "#5affb7",
"subtitleColor": "#00d6bd",
"borderColor": "#ffffff",
@@ -135,13 +168,17 @@
"decorationSize": 122,
"pattern": "circuit-board",
"patternColor": "#94ffdb",
+ "patternSize": 304,
"patternOpacity": 0.3,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"titleFont": "Ubuntu",
"subtitleFont": "Courier New",
"previewImage": "theme-9-preview.png"
},
{
"background": "#002a52",
+ "padding": 25,
"titleColor": "#ffffff",
"subtitleColor": "#ffffff",
"borderColor": "#b4b701",
@@ -152,13 +189,17 @@
"decorationSize": 91,
"pattern": "lisbon",
"patternColor": "#bbff00",
+ "patternSize": 80,
"patternOpacity": 0.5,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"titleFont": "Della Respira",
"subtitleFont": "Quattrocento",
"previewImage": "theme-10-preview.png"
},
{
"background": "#96349d",
+ "padding": 25,
"titleColor": "#ffffff",
"subtitleColor": "#bef3fe",
"borderColor": "#ffffff",
@@ -169,13 +210,17 @@
"decorationSize": 95,
"pattern": "endless-clouds",
"patternColor": "#ffffff",
+ "patternSize": 112,
"patternOpacity": 0.25,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"titleFont": "Maven Pro",
"subtitleFont": "Quattrocento",
"previewImage": "theme-11-preview.png"
},
{
"background": "#6cbf40",
+ "padding": 25,
"titleColor": "#ffffff",
"subtitleColor": "#e7eb00",
"borderColor": "#ffffff",
@@ -186,13 +231,17 @@
"decorationSize": 80,
"pattern": "leaf",
"patternColor": "#ffffff",
+ "patternSize": 80,
"patternOpacity": 0.25,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"titleFont": "Della Respira",
"subtitleFont": "Della Respira",
"previewImage": "theme-12-preview.png"
},
{
"background": "#252646",
+ "padding": 25,
"titleColor": "#fdbf00",
"subtitleColor": "#64e1dc",
"borderColor": "#ffffff",
@@ -203,13 +252,17 @@
"decorationSize": 116,
"pattern": "github",
"patternColor": "#ffffff",
+ "patternSize": 40,
"patternOpacity": 0.1,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"titleFont": "Tahoma",
"subtitleFont": "Quattrocento",
"previewImage": "theme-13-preview.png"
},
{
"background": "#001061",
+ "padding": 25,
"titleColor": "#ffffff",
"subtitleColor": "#ffffff",
"borderColor": "#ffffff",
@@ -220,13 +273,17 @@
"decorationSize": 59,
"pattern": "endless-constellation",
"patternColor": "#ffffff",
+ "patternSize": 250,
"patternOpacity": 0.5,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"titleFont": "Maven Pro",
"subtitleFont": "Maven Pro",
"previewImage": "theme-14-preview.png"
},
{
"background": "#b83700",
+ "padding": 25,
"titleColor": "#ffd500",
"subtitleColor": "#41d7e1",
"borderColor": "#ffffff",
@@ -237,13 +294,17 @@
"decorationSize": 100,
"pattern": "falling-triangles",
"patternColor": "#fff700",
+ "patternSize": 36,
"patternOpacity": 0.15,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"titleFont": "Ubuntu",
"subtitleFont": "Trebuchet MS",
"previewImage": "theme-15-preview.png"
},
{
"background": "#4099bf",
+ "padding": 25,
"titleColor": "#ffffff",
"subtitleColor": "#ffc6b1",
"borderColor": "#ffffff",
@@ -254,13 +315,17 @@
"decorationSize": 100,
"pattern": "bubbles",
"patternColor": "#ffffff",
+ "patternSize": 200,
"patternOpacity": 0.25,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"titleFont": "Ubuntu",
"subtitleFont": "Quattrocento",
"previewImage": "theme-16-preview.png"
},
{
"background": "#eeb25d",
+ "padding": 25,
"titleColor": "#ffffff",
"subtitleColor": "#000000",
"borderColor": "#ffffff",
@@ -271,13 +336,17 @@
"decorationSize": 69,
"pattern": "bubbles",
"patternColor": "#ffffff",
+ "patternSize": 200,
"patternOpacity": 0.25,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"titleFont": "Della Respira",
"subtitleFont": "Life Savers",
"previewImage": "theme-17-preview.png"
},
{
"background": "#000000",
+ "padding": 25,
"titleColor": "#ffffff",
"subtitleColor": "#ffffff",
"borderColor": "#299900",
@@ -288,13 +357,17 @@
"decorationSize": 60,
"pattern": "i-like-food",
"patternColor": "#27eb00",
+ "patternSize": 225,
"patternOpacity": 0.35,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"titleFont": "Maven Pro",
"subtitleFont": "Maven Pro",
"previewImage": "theme-18-preview.png"
},
{
"background": "#000000",
+ "padding": 25,
"titleColor": "#ffffff",
"subtitleColor": "#00c732",
"borderColor": "#ffffff",
@@ -305,13 +378,17 @@
"decorationSize": 100,
"pattern": "circuit-board",
"patternColor": "#00ff6e",
+ "patternSize": 304,
"patternOpacity": 0.4,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"titleFont": "Courier New",
"subtitleFont": "Courier New",
"previewImage": "theme-19-preview.png"
},
{
"background": "#37cd8c",
+ "padding": 25,
"titleColor": "#d5fe06",
"subtitleColor": "#85ffd0",
"borderColor": "#ffffff",
@@ -322,13 +399,17 @@
"decorationSize": 64,
"pattern": "temple",
"patternColor": "#ffffff",
+ "patternSize": 100,
"patternOpacity": 0.25,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"titleFont": "Lancelot",
"subtitleFont": "Athiti",
"previewImage": "theme-20-preview.png"
},
{
"background": "#262626",
+ "padding": 25,
"titleColor": "#ffffff",
"subtitleColor": "#b0b0b0",
"borderColor": "#ffffff",
@@ -339,7 +420,10 @@
"decorationSize": 100,
"pattern": "bathroom-floor",
"patternColor": "#000000",
+ "patternSize": 100,
"patternOpacity": 1,
+ "titleFontSize": 40,
+ "subtitleFontSize": 20,
"titleFont": "Passero One",
"subtitleFont": "Source Code Pro",
"previewImage": "theme-21-preview.png"
diff --git a/js/helpers/elements.js b/js/helpers/elements.js
index 1c7fce4..49a32c5 100644
--- a/js/helpers/elements.js
+++ b/js/helpers/elements.js
@@ -1,13 +1,13 @@
function getMainElements() {
- let bannerImageContainer = document.querySelector('.header-image-container');
- let bannerImage = document.querySelector('#github-header-image');
- let bannerTitle = bannerImage.querySelector('.title');
- let bannerSubtitle = bannerImage.querySelector('.subtitle');
+ const bannerImageContainer = document.querySelector('.header-image-container');
+ const bannerImage = document.querySelector('#github-header-image');
+ const bannerTitle = bannerImage.querySelector('.title');
+ const bannerSubtitle = bannerImage.querySelector('.subtitle');
- let toolbox = document.querySelector('.toolbox');
- let toolboxBackground = document.querySelector('.toolbox-background');
- let toolboxDecorations = document.querySelector('.toolbox-decorations');
- let toolboxPresets = document.querySelector('.toolbox-presets');
+ const toolbox = document.querySelector('.toolbox');
+ const toolboxBackground = document.querySelector('.toolbox-background');
+ const toolboxDecorations = document.querySelector('.toolbox-decorations');
+ const toolboxPresets = document.querySelector('.toolbox-presets');
return {
bannerImageContainer,
diff --git a/js/helpers/fonts.js b/js/helpers/fonts.js
deleted file mode 100644
index 24cfc7a..0000000
--- a/js/helpers/fonts.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { getMainElements } from "./elements";
-
-const {
- bannerTitle,
- bannerSubtitle,
- toolbox,
-} = getMainElements();
-
-function setFontValues() {
- let titleFontSelect = toolbox.querySelector('.font-selectors-container #title-font-selector');
- let subtitleFontSelect = toolbox.querySelector('.font-selectors-container #subtitle-font-selector');
-
- document.fonts.ready.then(() => {
- bannerTitle.style.fontFamily = `"${titleFontSelect.value}"`;
- bannerSubtitle.style.fontFamily = `"${subtitleFontSelect.value}"`;
- });
-}
-
-export { setFontValues };
\ No newline at end of file
diff --git a/js/helpers/helpers.js b/js/helpers/helpers.js
index 877a329..8fc67dd 100644
--- a/js/helpers/helpers.js
+++ b/js/helpers/helpers.js
@@ -1,149 +1,23 @@
-import themes from "../data/themes.json";
-import { getMainElements } from "./elements";
-import { getPattern } from '../data/patterns';
+const isLocalDevelopment = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
-const {
- bannerImageContainer,
- bannerImage,
- bannerTitle,
- bannerSubtitle,
- toolbox,
- toolboxDecorations,
- toolboxBackground,
-} = getMainElements();
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const isDevOptions = urlParams.get('devOptions');
-function getAllThemes() {
- return themes
-}
-
-function getTheme(index) {
- return themes[index]
-}
-
-function getRandomTheme() {
- let random = Math.floor(Math.random() * themes.length);
- return themes[random];
-}
-
-function updateBanner({
- background,
- titleColor,
- subtitleColor,
- borderColor,
- borderSize,
- borderRadius,
- textAlign,
- decoration,
- decorationSize,
- pattern,
- patternColor,
- patternOpacity,
- patternSize,
- titleFont,
- subtitleFont
-}) {
- if (background) bannerImage.style.backgroundColor = background;
- if (titleColor) bannerTitle.style.color = titleColor;
- if (subtitleColor) bannerSubtitle.style.color = subtitleColor;
- if (borderColor && borderSize && borderRadius) {
- bannerImage.style.border = `solid ${borderColor} ${borderSize}px`;
- bannerImage.style.borderRadius = `${borderRadius}px`;
- }
- if (borderColor) bannerImage.style.borderColor = borderColor;
- if (textAlign)
- document.querySelector(`.align-buttons button[data-align-value="${textAlign}"]`).click();
- if (decoration)
- document.querySelector(`.decorations-buttons button[data-decoration-value="${decoration}"]`).click();
- if (decorationSize) { }
- if (pattern || patternColor || patternOpacity || patternSize) {
- const formatedColor = patternColor.replace('#', '');
+function saveImageOnLocalStorage(img) {
+ var canvas = document.createElement('canvas');
+ var ctx = canvas.getContext('2d');
- bannerImage.style.backgroundImage = getPattern(pattern, formatedColor, patternOpacity);
- bannerImage.style.backgroundSize = `${patternSize}px`;
- }
- // if (patternColor || patternOpacity) {
- // }
- if (titleFont || subtitleFont) {
- // document.fonts.ready.then(() => {
- bannerTitle.style.fontFamily = `"${titleFont}"`;
- bannerSubtitle.style.fontFamily = `"${subtitleFont}"`;
- // });
- }
-}
-
-function updateUIOptions({
- background,
- titleColor,
- subtitleColor,
- borderColor,
- borderSize,
- borderRadius,
- textAlign,
- decoration,
- decorationSize,
- pattern,
- patternColor,
- patternOpacity,
- titleFont,
- subtitleFont
-}) {
- if (background) {
- const mainTabBgColorSelector = document.querySelector('.color-selectors-container input#main-bg-color-selector');
- const backgroundTabBgColorSelector = document.querySelector('.bg-color-selectors input#background-bg-color-selector');
- mainTabBgColorSelector.value = background;
- backgroundTabBgColorSelector.value = background;
- }
- if (titleColor) {
- const mainTabtitleColorSelector = document.querySelector('.color-selectors-container input#title-color-selector');
- mainTabtitleColorSelector.value = titleColor;
- }
- if (subtitleColor) {
- const mainTabSubtitleColorSelector = document.querySelector('.color-selectors-container input#subtitle-color-selector');
- mainTabSubtitleColorSelector.value = subtitleColor;
- }
- if (borderColor || borderSize || borderRadius) {
- const borderColorSelector = document.querySelector('.bg-color-selectors input#border-color-selector');
- const borderInput = document.querySelector('.border-inputs input#border-input');
- const borderRadiusInput = document.querySelector('.border-inputs input#border-radius-input');
- borderColorSelector.value = borderColor;
- borderInput.value = borderSize;
- borderInput.nextElementSibling.value = borderSize;
- borderRadiusInput.value = borderRadius;
- borderRadiusInput.nextElementSibling.value = borderRadius;
- }
- if (textAlign) { }
- if (decoration) { }
- if (decorationSize) {
- const decorationSizeInput = document.querySelector('.decorations-size-inputs input#decoration-size-input');
- decorationSizeInput.value = decorationSize;
- decorationSizeInput.nextElementSibling.value = decorationSize;
- }
- if (pattern) { }
- if (patternColor || patternOpacity) {
- const patternOpacityInput = document.querySelector('.pattern-inputs input#pattern-opacity-input');
- const patternColorSelector = document.querySelector('.pattern-inputs input#pattern-color-selector');
- patternOpacityInput.value = patternOpacity
- patternOpacityInput.nextElementSibling.value = patternOpacity
- patternColorSelector.value = patternColor;
- }
- if (titleFont || subtitleFont) {
- document.querySelector('.font-selectors-container #title-font-selector').value = titleFont ?? 'Red Hat Display';
- document.querySelector('.font-selectors-container #subtitle-font-selector').value = subtitleFont ?? 'Kalam';
- }
-}
-
-function setTheme(theme) {
- // logTheme(theme);
- updateUIOptions(theme);
- updateBanner(theme);
- document.querySelector(`.patterns-buttons button[data-pattern-value="${theme.pattern}"]`).click();
-}
+ canvas.width = img.width;
+ canvas.height = img.height;
+ ctx.drawImage(img, 0, 0, img.width, img.height);
-function logTheme(theme) {
- if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
- console.log(theme);
- console.table(theme);
- }
+ var dataURL = canvas.toDataURL('image/png');
+ localStorage.setItem('savedImage', dataURL);
}
-export { getAllThemes, getTheme, getRandomTheme, setTheme, updateBanner };
\ No newline at end of file
+export {
+ isLocalDevelopment,
+ isDevOptions,
+ saveImageOnLocalStorage
+};
diff --git a/js/main.js b/js/main.js
index fe1cbb7..fa19c0c 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,32 +1,55 @@
-import { setFontValues } from './helpers/fonts';
-import { getRandomTheme, setTheme } from './helpers/helpers';
import { snapdom } from '@zumer/snapdom';
import { getMainElements } from './helpers/elements';
+import { isDevOptions, isLocalDevelopment } from './helpers/helpers';
+import { getAllPresets, getRandomPreset, setPreset } from './presets';
/* ************** Elements ************** */
const {
bannerImageContainer,
bannerImage,
- bannerTitle,
- bannerSubtitle,
toolbox,
- toolboxDecorations,
- toolboxBackground,
} = getMainElements();
/* ************** Options ************** */
+const initialTheme = {
+ ...getAllPresets()[15],
+ background: "#62518d",
+ borderSize: 5,
+ decoration: 'dino-border.png',
+ subtitleColor: "#FFF2B3",
+ titleFont: 'Red Hat Display',
+ subtitleFont: 'Kalam'
+}
+
// Init
-document.querySelector('.toolbox .size-inputs input#width-input').value = bannerImageContainer.clientWidth;
-let titleFontSelect = toolbox.querySelector('.font-selectors-container #title-font-selector');
-let subtitleFontSelect = toolbox.querySelector('.font-selectors-container #subtitle-font-selector');
-titleFontSelect.value = 'Red Hat Display';
-subtitleFontSelect.value = 'Kalam';
+toolbox.querySelector('.size-inputs input#width-input').value = bannerImageContainer.clientWidth;
+document.addEventListener("DOMContentLoaded", (event) => {
+ const theme = localStorage.getItem('theme');
+ if (theme)
+ setPreset(JSON.parse(theme), true);
+ else
+ setPreset(initialTheme, true);
+});
// Demo reset after ended
document.querySelector('.how-to-section video.demo').onended = (e) => e.target.currentTime = 0;
+// Decoration
+
+const imageDecorationContainer = document.querySelector('.img-decoration-container');
+const imgDecorationElement = document.createElement('img');
+imgDecorationElement.className = 'img-decoration';
+imgDecorationElement.style.position = 'absolute';
+imgDecorationElement.style.bottom = 'calc(50%)';
+imgDecorationElement.style.transform = 'translateY(50%)'
+imgDecorationElement.style.left = 'auto';
+imgDecorationElement.style.right = '25px';
+imgDecorationElement.style.width = '0px';
+imgDecorationElement.alt = 'Header image decoration'
+imageDecorationContainer.appendChild(imgDecorationElement)
+
/* ************** Header image options ************** */
// Download button
@@ -35,13 +58,14 @@ document.querySelector('.download-button')
document.querySelector('.download-button img').src = './images/icons/loading.gif'
try {
- const el = document.querySelector('#github-header-image');
- await snapdom.download(el, {
- embedFonts: true,
- format: 'png',
- filename: 'github-header-banner',
- scale: 2
- });
+ await snapdom.download(
+ bannerImage,
+ {
+ embedFonts: true,
+ format: 'png',
+ filename: 'github-header-banner',
+ scale: 2
+ });
document.querySelector('.download-button img').src = './images/icons/download.svg'
} catch (error) {
console.error('Image capture or download failed:', error);
@@ -54,7 +78,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
const miniatureButton = document.querySelector('.miniature-button');
const testFontsTab = document.querySelector('.tablinks[data-name="test-fonts-section"]');
- if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+ if (isLocalDevelopment && isDevOptions == 1) {
const el = document.querySelector('#github-header-image');
const container = document.querySelector('.header-image-container')
@@ -97,29 +121,74 @@ document.querySelector('.dark-mode-button')
let resultBox = document.querySelector('.result-box');
const toogleDarkModeButton = document.querySelector('.dark-mode-button');
const toogleRandomizeButton = document.querySelector('.randomize-button');
+ const toogleResetButton = document.querySelector('.reset-button');
const toogleDownloadButton = document.querySelector('.download-button');
const size = 20;
resultBox.classList.toggle('light-mode');
if (resultBox.className.includes('light')) {
- toogleDarkModeButton.innerHTML = `
GH Light`
+ toogleDarkModeButton.innerHTML = `
Light`
toogleRandomizeButton.innerHTML = `
Random`
+ toogleResetButton.innerHTML = `
Reset`
toogleDownloadButton.innerHTML = `
Download`
} else {
- toogleDarkModeButton.innerHTML = `
GH Dark`
+ toogleDarkModeButton.innerHTML = `
Dark`
toogleRandomizeButton.innerHTML = `
Random`
+ toogleResetButton.innerHTML = `
Reset`
toogleDownloadButton.innerHTML = `
Download`
}
});
// Randomize
-
document.querySelector('.randomize-button')
.addEventListener('click', (e) => {
- const theme = getRandomTheme();
- setTheme(theme);
+ const theme = getRandomPreset();
+ setPreset(theme);
+ });
+document.querySelector('.reset-button')
+ .addEventListener('click', (e) => {
+ localStorage.clear();
+ setPreset(initialTheme);
});
+/* ************** Tabs ************** */
+
+function openTab(e, name) {
+ let i, tabcontent, tablinks;
+
+ tabcontent = document.getElementsByClassName("tabcontent");
+ for (i = 0; i < tabcontent.length; i++) {
+ tabcontent[i].style.display = "none";
+ }
+
+ tablinks = document.getElementsByClassName("tablinks");
+ for (i = 0; i < tablinks.length; i++) {
+ tablinks[i].className = tablinks[i].className.replace(" active", "");
+ }
+
+ document.getElementById(name).style.display = "block";
+ e.currentTarget.className += " active";
+}
+
+document.querySelectorAll('.tab .tablinks')
+ .forEach(button => {
+ button.addEventListener('click', (e) => {
+ const name = e.target.getAttribute('data-name');
+ localStorage.setItem('openTab', name)
+ openTab(e, name);
+ });
+ })
+
+// Saved tab
+document.addEventListener("DOMContentLoaded", (event) => {
+ const openTab = localStorage.getItem('openTab');
+ if (openTab) {
+ document.querySelector(`[data-name="${openTab}"]`).click();
+ } else {
+ document.getElementById("defaultOpenTag").click();
+ }
+});
+
/* ************** ************** ************** */
diff --git a/js/presets.js b/js/presets.js
new file mode 100644
index 0000000..445c7b9
--- /dev/null
+++ b/js/presets.js
@@ -0,0 +1,27 @@
+import presets from "./data/presets.json";
+import { updateBanner, updateUIOptions } from "./banner";
+
+function getAllPresets() {
+ return presets;
+}
+
+function getPreset(index) {
+ return presets[index];
+}
+
+function getRandomPreset() {
+ let random = Math.floor(Math.random() * presets.length);
+ return presets[random];
+}
+
+function setPreset(preset, ignoreSave = null) {
+ updateUIOptions(preset);
+ updateBanner({ ...preset, ignoreSave });
+}
+
+export {
+ getAllPresets,
+ getPreset,
+ getRandomPreset,
+ setPreset,
+};
diff --git a/js/tabs.js b/js/tabs.js
deleted file mode 100644
index 98e22b1..0000000
--- a/js/tabs.js
+++ /dev/null
@@ -1,36 +0,0 @@
-function openTab(e, name) {
- let i, tabcontent, tablinks;
-
- tabcontent = document.getElementsByClassName("tabcontent");
- for (i = 0; i < tabcontent.length; i++) {
- tabcontent[i].style.display = "none";
- }
-
- tablinks = document.getElementsByClassName("tablinks");
- for (i = 0; i < tablinks.length; i++) {
- tablinks[i].className = tablinks[i].className.replace(" active", "");
- }
-
- document.getElementById(name).style.display = "block";
- e.currentTarget.className += " active";
-}
-
-document.querySelectorAll('.tab .tablinks')
- .forEach(button => {
- button.addEventListener('click', (e) => {
- const name = e.target.getAttribute('data-name');
- localStorage.setItem('openTab', name)
- openTab(e, name);
- });
- })
-
-/* ************** Open tab ************** */
-
-document.addEventListener("DOMContentLoaded", (event) => {
- const openTab = localStorage.getItem('openTab');
- if (openTab) {
- document.querySelector(`[data-name="${openTab}"]`).click();
- } else {
- document.getElementById("defaultOpenTag").click();
- }
-});
\ No newline at end of file
diff --git a/js/toolbox-background.js b/js/toolbox-background.js
index 95b918f..87c7f09 100644
--- a/js/toolbox-background.js
+++ b/js/toolbox-background.js
@@ -1,5 +1,5 @@
+import { getSavedThemeProp, updateBanner } from './banner';
import { getPatternDefaultSize } from './data/patterns';
-import { updateBanner } from './helpers/helpers';
import { getMainElements } from './helpers/elements';
/* ************** Elements ************** */
@@ -8,12 +8,10 @@ const {
toolboxBackground,
} = getMainElements();
-// init
-let selectedPattern = 'bubbles';
-let selectedPatternOpacity = 0.15;
-let selectedPatternColor = 'FFF';
-let selectedPatternSize = 200;
-setPatternBackground();
+let selectedPattern = getSavedThemeProp('pattern');
+let selectedPatternOpacity;
+let selectedPatternColor;
+let selectedPatternSize;
/* ************** Color selectors ************** */
@@ -24,7 +22,7 @@ function setBgColorValues() {
updateBanner({
background: bgColorSelector.value,
borderColor: borderColorSelector.value,
- })
+ });
let mainTabBgColorSelector = document.querySelector('.color-selectors-container input#main-bg-color-selector');
mainTabBgColorSelector.value = bgColorSelector.value;
diff --git a/js/toolbox-decorations.js b/js/toolbox-decorations.js
index 83471b6..9feeeaa 100644
--- a/js/toolbox-decorations.js
+++ b/js/toolbox-decorations.js
@@ -1,4 +1,6 @@
+import { updateBanner } from "./banner";
import { getMainElements } from "./helpers/elements";
+import { saveImageOnLocalStorage } from "./helpers/helpers";
/* ************** Elements ************** */
@@ -11,13 +13,9 @@ const {
function setDecorationSize() {
let selectedDecorationSize = toolboxDecorations.querySelector('.decorations-size-inputs input#decoration-size-input').value;
- const imageDecoration = document.querySelector('.img-decoration-container .img-decoration');
- imageDecoration.style.width = `${selectedDecorationSize}px`;
-
- const otherImageDecoration = document.querySelector('.img-decoration-container .img-decoration-2');
- if (otherImageDecoration) {
- otherImageDecoration.style.width = `${selectedDecorationSize}px`;
- }
+ updateBanner({
+ decorationSize: selectedDecorationSize,
+ });
}
toolboxDecorations.querySelectorAll('.decorations-size-inputs input[type="range"]')
@@ -30,25 +28,6 @@ toolboxDecorations.querySelectorAll('.decorations-size-inputs input[type="range"
/* ************** Decorations ************** */
-function setDecoration(decorationValue) {
- const imageDecoration = document.querySelector('.img-decoration-container .img-decoration');
- const otherImageDecoration = document.querySelector('.img-decoration-container .img-decoration-2');
-
- if (decorationValue === 'none') {
- imageDecoration.style.display = 'none';
- if (otherImageDecoration) {
- otherImageDecoration.style.display = 'none';
- }
- } else {
- imageDecoration.style.display = 'block';
- imageDecoration.src = `images/decorations/${decorationValue}`;
- if (otherImageDecoration) {
- otherImageDecoration.style.display = 'block';
- otherImageDecoration.src = `images/decorations/${decorationValue}`;
- }
- }
-}
-
toolboxDecorations.querySelectorAll('.decorations-buttons button')
.forEach(button => {
button.addEventListener('click', (e) => {
@@ -56,7 +35,10 @@ toolboxDecorations.querySelectorAll('.decorations-buttons button')
e.target.parentNode :
e.target;
const decorationValue = element.getAttribute('data-decoration-value');
- setDecoration(decorationValue);
+ updateBanner({
+ decoration: decorationValue,
+ decorationLocal: false
+ });
setDecorationSize();
});
})
@@ -70,10 +52,13 @@ toolboxDecorations.querySelector('#decoration-upload-input')
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
+ updateBanner({
+ decoration: this.result,
+ decorationLocal: true
+ });
+
const decoration = document.querySelector('.img-decoration');
- decoration.src = this.result;
- const otherDecoration = document.querySelector('.img-decoration-2');
- if (otherDecoration) otherDecoration.src = this.result;
+ saveImageOnLocalStorage(decoration);
}
})
diff --git a/js/toolbox-main.js b/js/toolbox-main.js
index 80a4a13..2b96266 100644
--- a/js/toolbox-main.js
+++ b/js/toolbox-main.js
@@ -1,32 +1,28 @@
+import { updateBanner } from './banner';
import { getMainElements } from './helpers/elements';
-import { setFontValues } from './helpers/fonts';
/* ************** Elements ************** */
const {
bannerImageContainer,
bannerImage,
- bannerTitle,
- bannerSubtitle,
toolbox,
} = getMainElements();
/* ************** Info text inputs ************** */
-function setInfoValues() {
- let titleInput = toolbox.querySelector('.text-inputs input#title-input');
- let subtitleInput = toolbox.querySelector('.text-inputs input#subtitle-input');
-
- bannerTitle.innerText = titleInput.value || '';
- bannerSubtitle.innerText = subtitleInput.value || '';
-}
-
toolbox.querySelectorAll('.text-inputs input')
.forEach(input => {
input.addEventListener('click', () => input.select());
input.addEventListener('keyup', (e) => {
- setInfoValues();
+ let titleInput = toolbox.querySelector('.text-inputs input#title-input');
+ let subtitleInput = toolbox.querySelector('.text-inputs input#subtitle-input');
+
+ updateBanner({
+ title: titleInput.value,
+ subtitle: subtitleInput.value
+ });
});
})
@@ -37,9 +33,11 @@ function setColorValues() {
let titleColorSelector = toolbox.querySelector('.color-selectors-container input#title-color-selector');
let subtitleColorSelector = toolbox.querySelector('.color-selectors-container input#subtitle-color-selector');
- bannerImage.style.backgroundColor = bgColorSelector.value;
- bannerTitle.style.color = titleColorSelector.value;
- bannerSubtitle.style.color = subtitleColorSelector.value;
+ updateBanner({
+ background: bgColorSelector.value,
+ titleColor: titleColorSelector.value,
+ subtitleColor: subtitleColorSelector.value,
+ });
let backgroundTabBgColorSelector = document.querySelector('.bg-color-selectors input#background-bg-color-selector');
backgroundTabBgColorSelector.value = bgColorSelector.value;
@@ -69,29 +67,19 @@ function setSizeValues() {
function setPaddingValues() {
let paddingInput = toolbox.querySelector('.size-inputs input#paddings-input');
- let paddingValue = `${paddingInput.value}px`;
-
- bannerImage.style.padding = paddingValue;
- document.querySelectorAll('.img-decoration-container img')
- .forEach(decoration => {
- if (decoration.style.left === 'auto') {
- decoration.style.right = paddingValue;
- } else {
- decoration.style.left = paddingValue;
- }
- });
+ updateBanner({ padding: paddingInput.value });
}
toolbox.querySelectorAll('.size-inputs input')
.forEach(input => {
- if (input.type === 'text') {
+ if (['width-input', 'height-input'].includes(input.id)) {
input.addEventListener('click', () => input.select());
input.addEventListener('keyup', (e) => {
setSizeValues();
});
- } else {
+ } else if (input.id = 'paddings-input') {
input.addEventListener('input', (e) => {
e.target.nextElementSibling.value = e.target.value
setPaddingValues();
@@ -101,24 +89,6 @@ toolbox.querySelectorAll('.size-inputs input')
/* ************** Align buttons ************** */
-// Github theme
-
-let paddingValue = document.querySelector('#paddings-input').value || 25;
-let padding = `${paddingValue}px`;
-
-const imageDecorationContainer = document.querySelector('.img-decoration-container');
-const imgDecorationElement = document.createElement('img');
-imgDecorationElement.className = 'img-decoration';
-imgDecorationElement.src = './images/decorations/my-octocat.png';
-imgDecorationElement.style.position = 'absolute';
-imgDecorationElement.style.bottom = 'calc(50%)';
-imgDecorationElement.style.transform = 'translateY(50%)'
-imgDecorationElement.style.left = 'auto';
-imgDecorationElement.style.right = padding;
-imgDecorationElement.style.width = '77px';
-imgDecorationElement.alt = 'Header image decoration'
-imageDecorationContainer.appendChild(imgDecorationElement)
-
toolbox.querySelectorAll('.align-buttons button')
.forEach(button => {
button.addEventListener('click', (e) => {
@@ -126,30 +96,11 @@ toolbox.querySelectorAll('.align-buttons button')
e.target.parentNode :
e.target;
const alignValue = element.getAttribute('data-align-value');
- bannerImage.style.alignItems = alignValue;
-
- const paddingValue = document.querySelector('#paddings-input').value || 25;
- const padding = `${paddingValue}px`;
- const imageDecoration = document.querySelector('.img-decoration-container img');
- if (alignValue === 'flex-end') {
- document.querySelector('.img-decoration-container .img-decoration-2')?.remove();
- imageDecoration.style.left = padding;
- imageDecoration.style.right = 'auto';
- } else if (alignValue === 'flex-start') {
- document.querySelector('.img-decoration-container .img-decoration-2')?.remove();
- imageDecoration.style.left = 'auto';
- imageDecoration.style.right = padding;
- } else if (alignValue === 'center') {
- imageDecoration.style.left = 'auto';
- imageDecoration.style.right = padding;
- if (!document.querySelector('.img-decoration-container .img-decoration-2')) {
- const clonedImageDecoration = imageDecoration.cloneNode(true);
- clonedImageDecoration.style.left = padding;
- clonedImageDecoration.style.right = 'auto';
- clonedImageDecoration.className = 'img-decoration-2';
- imageDecorationContainer.appendChild(clonedImageDecoration)
- }
- }
+
+ updateBanner({
+ textAlign: alignValue
+ });
+
});
})
@@ -158,7 +109,13 @@ toolbox.querySelectorAll('.align-buttons button')
toolbox.querySelectorAll('.font-selectors-container')
.forEach(button => {
button.addEventListener('change', (e) => {
- setFontValues();
+ let titleFontSelect = toolbox.querySelector('.font-selectors-container #title-font-selector');
+ let subtitleFontSelect = toolbox.querySelector('.font-selectors-container #subtitle-font-selector');
+
+ updateBanner({
+ titleFont: titleFontSelect.value,
+ subtitleFont: subtitleFontSelect.value,
+ });
});
})
@@ -166,10 +123,12 @@ toolbox.querySelectorAll('.font-selectors-container')
function setFontSizeValues() {
let titleFontSizeInput = toolbox.querySelector('.font-size-inputs input#title-font-size-input');
- let subtitleFontSizeInput = toolbox.querySelector('.font-size-inputs input#sutitle-font-size-input');
+ let subtitleFontSizeInput = toolbox.querySelector('.font-size-inputs input#subtitle-font-size-input');
- bannerTitle.style.fontSize = `${titleFontSizeInput.value}px`;
- bannerSubtitle.style.fontSize = `${subtitleFontSizeInput.value}px`;
+ updateBanner({
+ titleFontSize: titleFontSizeInput.value,
+ subtitleFontSize: subtitleFontSizeInput.value,
+ });
}
toolbox.querySelectorAll('.font-size-inputs input')
diff --git a/js/toolbox-presets.js b/js/toolbox-presets.js
index 516acbd..bae9d1c 100644
--- a/js/toolbox-presets.js
+++ b/js/toolbox-presets.js
@@ -1,7 +1,7 @@
-import { getAllThemes, setTheme } from "./helpers/helpers";
+import { getAllPresets, setPreset } from "./presets";
import { getMainElements } from "./helpers/elements"
-const themes = getAllThemes();
+const themes = getAllPresets();
const { toolboxPresets } = getMainElements();
document.addEventListener('DOMContentLoaded', function () {
@@ -20,7 +20,7 @@ document.addEventListener('DOMContentLoaded', function () {
img.alt = 'Theme image';
img.addEventListener('click', (e) => {
- setTheme(theme);
+ setPreset(theme);
});
div.appendChild(img);
diff --git a/package.json b/package.json
index 29b7809..30c7aaf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "github-profile-header-generator",
- "version": "2.0.0",
+ "version": "2.1.0",
"description": "A simple but nice header image generator for your Github profile",
"scripts": {
"dev": "vite",
diff --git a/partials/head.html b/partials/head.html
index 459ebe9..c6a7299 100644
--- a/partials/head.html
+++ b/partials/head.html
@@ -62,3 +62,4 @@
data-utcoffset="-5">
+
diff --git a/partials/how-to.html b/partials/how-to.html
index 8281682..f63e680 100644
--- a/partials/how-to.html
+++ b/partials/how-to.html
@@ -21,4 +21,6 @@
How to use it?
+
+
You can use it for your repo banners too!
\ No newline at end of file
diff --git a/partials/scripts.html b/partials/scripts.html
index eedad1a..836a59d 100644
--- a/partials/scripts.html
+++ b/partials/scripts.html
@@ -1,9 +1,9 @@
+
-
\ No newline at end of file
diff --git a/partials/toolbox/main.html b/partials/toolbox/main.html
index abfabb1..8c5fe70 100644
--- a/partials/toolbox/main.html
+++ b/partials/toolbox/main.html
@@ -81,7 +81,7 @@
Garamond
Courier New
-
Brush Script MT
+
- GH Dark
+ Dark
Random
+
+ Reset
+