sorogon/StaticGalleryBuilder
1
0
Fork 0
mirror of https://github.com/greflm13/StaticGalleryBuilder.git synced 2026-02-05 11:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated themes

Browse Source
This commit is contained in:
Flo Greistorfer
2024-07-14 11:00:06 +02:00
parent bf16204395
commit 61c9094565
13 changed files with 165 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -166,3 +166,4 @@ test/.thumbnails
test/**/index.html test/**/index.html
test/**/.sizelist.json test/**/.sizelist.json
test/manifest.json test/manifest.json
themes/previews

69
generate_previews.py
View File

@@ -2,9 +2,12 @@ import os
import re import re
import sys import sys
import time import time
import shutil
import base64 import base64
import logging import logging
import fileinput
import urllib.parse import urllib.parse
import urllib.request
from typing import List from typing import List
from selenium import webdriver from selenium import webdriver
from selenium.webdriver.chrome.service import Service from selenium.webdriver.chrome.service import Service
@@ -16,6 +19,12 @@ from modules.svg_handling import extract_colorscheme
logging.basicConfig(level=logging.INFO, format="%(asctime)s - %(levelname)s - %(message)s") logging.basicConfig(level=logging.INFO, format="%(asctime)s - %(levelname)s - %(message)s")
def replace_all(file, search_exp, replace_exp):
for line in fileinput.input(file, inplace=1):
line = re.sub(search_exp, replace_exp, line)
sys.stdout.write(line)
def take_screenshot(html_file_path: str, css_file: str, output_file: str, driver: webdriver.Chrome) -> None: def take_screenshot(html_file_path: str, css_file: str, output_file: str, driver: webdriver.Chrome) -> None:
""" """
Takes a screenshot of the given HTML file with the specified CSS applied. Takes a screenshot of the given HTML file with the specified CSS applied.
@@ -90,6 +99,45 @@ def take_screenshot(html_file_path: str, css_file: str, output_file: str, driver
logging.error("Failed to take screenshot for %s: %s", css_file, e) logging.error("Failed to take screenshot for %s: %s", css_file, e)
def create_preview(html_file_path: str, css_file: str, previews_folder: str):
out_file = os.path.basename(css_file).removesuffix(".css") + ".html"
urllib.request.urlretrieve(html_file_path, os.path.join(previews_folder, out_file))
basename = os.path.basename(css_file)
path = css_file.removesuffix(basename)
replace_all(
os.path.join(previews_folder, out_file),
r'^\s*?<link rel="stylesheet" href=".*theme.css">\s*?$',
f' <link rel="stylesheet" href="file://{path}previews/{basename}">',
)
with open(css_file, "r", encoding="utf-8") as f:
theme = f.read()
split = theme.split(".foldericon {")
split2 = split[1].split("}", maxsplit=1)
themehead = split[0]
themetail = split2[1]
foldericon = split2[0].strip()
foldericon = re.sub(r"/\*.*\*/", "", foldericon)
for match in re.finditer(r"content: (.*);", foldericon):
foldericon = match[1]
foldericon = foldericon.replace('"', "")
break
if "url" in foldericon:
shutil.copyfile(css_file, os.path.join(path, "previews", basename))
else:
with open(os.path.join(path, foldericon.removeprefix("themes/")), "r", encoding="utf-8") as f:
svg = f.read()
if "svg.j2" in foldericon:
colorscheme = extract_colorscheme(css_file)
svg = svg.replace("{{ color1 }}", colorscheme["color1"])
svg = svg.replace("{{ color2 }}", colorscheme["color2"])
svg = svg.replace("{{ color3 }}", colorscheme["color3"])
svg = svg.replace("{{ color4 }}", colorscheme["color4"])
svg = urllib.parse.quote(svg)
os.remove(os.path.join(path, "previews", basename))
with open(os.path.join(path, "previews", basename), "x", encoding="utf-8") as f:
f.write(themehead + '\n.foldericon {\n content: url("data:image/svg+xml,' + svg + '");\n}\n' + themetail)
def write_readme(directory_path: str, themes: List[str]) -> None: def write_readme(directory_path: str, themes: List[str]) -> None:
""" """
Writes the README file with previews of included themes. Writes the README file with previews of included themes.
@@ -118,6 +166,23 @@ def write_readme(directory_path: str, themes: List[str]) -> None:
logging.error("Failed to write README.md: %s", e) logging.error("Failed to write README.md: %s", e)
def write_index(directory_path: str, themes: List[str]) -> None:
with open(os.path.join(directory_path, "index.html"), "w", encoding="utf-8") as f:
f.write(
"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Themes</title>
</head>
<body>"""
)
for theme in themes:
f.write(f'<a href="previews/{theme}.html">{theme}</a><br>\n')
f.write("</body></html>")
def main(directory_path: str, html_file_path: str) -> None: def main(directory_path: str, html_file_path: str) -> None:
""" """
Main function to take screenshots for each CSS file in the folder and update the README.md. Main function to take screenshots for each CSS file in the folder and update the README.md.
@@ -149,15 +214,19 @@ def main(directory_path: str, html_file_path: str) -> None:
themes.append(theme_name) themes.append(theme_name)
css_file = os.path.join(directory_path, filename) css_file = os.path.join(directory_path, filename)
output_file = os.path.join(directory_path, "screenshots", f"{theme_name}.png") output_file = os.path.join(directory_path, "screenshots", f"{theme_name}.png")
previews_folder = os.path.join(directory_path, "previews")
# Create screenshots folder if it doesn't exist # Create screenshots folder if it doesn't exist
os.makedirs(os.path.dirname(output_file), exist_ok=True) os.makedirs(os.path.dirname(output_file), exist_ok=True)
os.makedirs(previews_folder, exist_ok=True)
# Take screenshot for this CSS file # Take screenshot for this CSS file
take_screenshot(html_file_path, css_file, output_file, driver) take_screenshot(html_file_path, css_file, output_file, driver)
create_preview(html_file_path, css_file, previews_folder)
# Write the README file with the new previews # Write the README file with the new previews
write_readme(directory_path, themes) write_readme(directory_path, themes)
write_index(directory_path, themes)
finally: finally:
driver.quit() driver.quit()

1
themes/aritim.css
View File

@@ -25,6 +25,7 @@
/* Change the link color on hover */ /* Change the link color on hover */
.navbar li a:hover { .navbar li a:hover {
text-decoration: none; text-decoration: none;
color: var(--bcolor1);
background-color: var(--bcolor2); background-color: var(--bcolor2);
} }

2
themes/default.css
View File

@@ -49,7 +49,7 @@
.tooltiptext { .tooltiptext {
font-weight: 400; font-weight: 400;
background-color: var(--color3); background-color: var(--color2);
} }
.column img { .column img {

49
themes/icons/subfolder.svg.j2
View File

@@ -1,5 +1,46 @@
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<rect x="10" y="30" width="80" height="50" fill="{{ color1 }}" rx="5" ry="5" /> <svg
<rect x="10" y="20" width="40" height="20" fill="{{ color1 }}" rx="5" ry="5" /> width="100"
<rect x="20" y="40" width="60" height="40" fill="{{ color2 }}" rx="3" ry="3" /> height="100"
viewBox="0 0 100 100"
version="1.1"
id="svg3"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<rect
x="10"
y="30"
width="80"
height="50"
fill="{{ color1 }}"
rx="5"
ry="5"
id="rect1" />
<rect
x="10"
y="20"
width="40"
height="20"
fill="{{ color1 }}"
rx="5"
ry="5"
id="rect2" />
<rect
x="20"
y="40"
width="60"
height="40"
fill="{{ color2 }}"
rx="3"
ry="3"
id="rect3" />
<rect
x="30"
y="50"
width="40"
height="30"
fill="{{ color1 }}"
rx="2"
ry="2"
id="rect4" />
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 346 B

After

Width:  |  Height:  |  Size: 876 B

26
themes/index.html Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Themes</title>
</head>
<body><a href="previews/alpenglow.html">alpenglow</a><br>
<a href="previews/aritim-dark.html">aritim-dark</a><br>
<a href="previews/aritim.html">aritim</a><br>
<a href="previews/autumn.html">autumn</a><br>
<a href="previews/carnation.html">carnation</a><br>
<a href="previews/catpuccin.html">catpuccin</a><br>
<a href="previews/cornflower.html">cornflower</a><br>
<a href="previews/default-dark.html">default-dark</a><br>
<a href="previews/default.html">default</a><br>
<a href="previews/ivy.html">ivy</a><br>
<a href="previews/kjoe.html">kjoe</a><br>
<a href="previews/monokai-vibrant.html">monokai-vibrant</a><br>
<a href="previews/rainbow.html">rainbow</a><br>
<a href="previews/spring.html">spring</a><br>
<a href="previews/steam.html">steam</a><br>
<a href="previews/summer.html">summer</a><br>
<a href="previews/sunflower.html">sunflower</a><br>
<a href="previews/winter.html">winter</a><br>
</body></html>

BIN
themes/screenshots/alpenglow.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
themes/screenshots/monokai-vibrant.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
themes/screenshots/rainbow.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

2
themes/spring.css
View File

@@ -75,7 +75,7 @@
.tooltiptext { .tooltiptext {
font-weight: 400; font-weight: 400;
background-color: var(--bcolor2); background-color: var(--bcolor4);
font-family: "Lora", serif; font-family: "Lora", serif;
} }

1
themes/summer.css
View File

@@ -75,6 +75,7 @@
.tooltiptext { .tooltiptext {
font-weight: 400; font-weight: 400;
color: var(--bcolor1);
background-color: var(--bcolor2); background-color: var(--bcolor2);
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
} }

1
themes/sunflower.css
View File

@@ -70,6 +70,7 @@
.tooltiptext { .tooltiptext {
font-weight: 600; font-weight: 600;
color: var(--bcolor1);
background-color: var(--bcolor2); background-color: var(--bcolor2);
} }

25
themes/winter.css
View File

@@ -1,14 +1,22 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap");
* { * {
--color1: #00CED1; /* DarkTurquoise */ --color1: #00CED1;
--color2: #4682B4; /* SteelBlue */ /* DarkTurquoise */
--color3: #B0C4DE; /* LightSteelBlue */ --color2: #4682B4;
--color4: #5F9EA0; /* CadetBlue */ /* SteelBlue */
--bcolor1: #FFFFFF; /* White */ --color3: #B0C4DE;
--bcolor2: #2F4F4F; /* DarkSlateGray */ /* LightSteelBlue */
--bcolor3: #E0E0E0; /* LightGray */ --color4: #5F9EA0;
--bcolor4: #D3D3D3; /* LightGray */ /* CadetBlue */
--bcolor1: #FFFFFF;
/* White */
--bcolor2: #2F4F4F;
/* DarkSlateGray */
--bcolor3: #E0E0E0;
/* LightGray */
--bcolor4: #D3D3D3;
/* LightGray */
} }
.navbar { .navbar {
@@ -75,6 +83,7 @@
.tooltiptext { .tooltiptext {
font-weight: 400; font-weight: 400;
color: var(--bcolor3);
background-color: var(--bcolor2); background-color: var(--bcolor2);
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
} }