diff --git a/.gitignore b/.gitignore index b9bc505..ec9d20b 100644 --- a/.gitignore +++ b/.gitignore @@ -165,4 +165,5 @@ test/.static test/.thumbnails test/**/index.html test/**/.sizelist.json -test/manifest.json \ No newline at end of file +test/manifest.json +themes/previews \ No newline at end of file diff --git a/generate_previews.py b/generate_previews.py index d6dc800..5e05032 100644 --- a/generate_previews.py +++ b/generate_previews.py @@ -2,9 +2,12 @@ import os import re import sys import time +import shutil import base64 import logging +import fileinput import urllib.parse +import urllib.request from typing import List from selenium import webdriver 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") +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: """ 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) +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*?\s*?$', + f' ', + ) + 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: """ 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) +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( + """ + + + + + Themes + +""" + ) + for theme in themes: + f.write(f'{theme}
\n') + f.write("") + + 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. @@ -149,15 +214,19 @@ def main(directory_path: str, html_file_path: str) -> None: themes.append(theme_name) css_file = os.path.join(directory_path, filename) 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 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(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_readme(directory_path, themes) + write_index(directory_path, themes) finally: driver.quit() diff --git a/themes/aritim.css b/themes/aritim.css index 62c56a2..b5348b4 100644 --- a/themes/aritim.css +++ b/themes/aritim.css @@ -25,6 +25,7 @@ /* Change the link color on hover */ .navbar li a:hover { text-decoration: none; + color: var(--bcolor1); background-color: var(--bcolor2); } diff --git a/themes/default.css b/themes/default.css index 27acbe1..c344e04 100644 --- a/themes/default.css +++ b/themes/default.css @@ -49,7 +49,7 @@ .tooltiptext { font-weight: 400; - background-color: var(--color3); + background-color: var(--color2); } .column img { diff --git a/themes/icons/subfolder.svg.j2 b/themes/icons/subfolder.svg.j2 index 9acfef2..c4a1323 100644 --- a/themes/icons/subfolder.svg.j2 +++ b/themes/icons/subfolder.svg.j2 @@ -1,5 +1,46 @@ - - - - + + + + + + \ No newline at end of file diff --git a/themes/index.html b/themes/index.html new file mode 100644 index 0000000..e10a0b6 --- /dev/null +++ b/themes/index.html @@ -0,0 +1,26 @@ + + + + + + Themes + +alpenglow
+aritim-dark
+aritim
+autumn
+carnation
+catpuccin
+cornflower
+default-dark
+default
+ivy
+kjoe
+monokai-vibrant
+rainbow
+spring
+steam
+summer
+sunflower
+winter
+ \ No newline at end of file diff --git a/themes/screenshots/alpenglow.png b/themes/screenshots/alpenglow.png index 7360f2c..f87b3c4 100644 Binary files a/themes/screenshots/alpenglow.png and b/themes/screenshots/alpenglow.png differ diff --git a/themes/screenshots/monokai-vibrant.png b/themes/screenshots/monokai-vibrant.png index 6ddaf63..a6f326a 100644 Binary files a/themes/screenshots/monokai-vibrant.png and b/themes/screenshots/monokai-vibrant.png differ diff --git a/themes/screenshots/rainbow.png b/themes/screenshots/rainbow.png index d03767b..81bc85e 100644 Binary files a/themes/screenshots/rainbow.png and b/themes/screenshots/rainbow.png differ diff --git a/themes/spring.css b/themes/spring.css index 171e13d..dd6eb9f 100644 --- a/themes/spring.css +++ b/themes/spring.css @@ -75,7 +75,7 @@ .tooltiptext { font-weight: 400; - background-color: var(--bcolor2); + background-color: var(--bcolor4); font-family: "Lora", serif; } diff --git a/themes/summer.css b/themes/summer.css index 791d2fb..c0bd549 100644 --- a/themes/summer.css +++ b/themes/summer.css @@ -75,6 +75,7 @@ .tooltiptext { font-weight: 400; + color: var(--bcolor1); background-color: var(--bcolor2); font-family: "Roboto", sans-serif; } diff --git a/themes/sunflower.css b/themes/sunflower.css index 1164d78..3db6714 100644 --- a/themes/sunflower.css +++ b/themes/sunflower.css @@ -70,6 +70,7 @@ .tooltiptext { font-weight: 600; + color: var(--bcolor1); background-color: var(--bcolor2); } diff --git a/themes/winter.css b/themes/winter.css index eabb0bd..6776b41 100644 --- a/themes/winter.css +++ b/themes/winter.css @@ -1,14 +1,22 @@ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"); * { - --color1: #00CED1; /* DarkTurquoise */ - --color2: #4682B4; /* SteelBlue */ - --color3: #B0C4DE; /* LightSteelBlue */ - --color4: #5F9EA0; /* CadetBlue */ - --bcolor1: #FFFFFF; /* White */ - --bcolor2: #2F4F4F; /* DarkSlateGray */ - --bcolor3: #E0E0E0; /* LightGray */ - --bcolor4: #D3D3D3; /* LightGray */ + --color1: #00CED1; + /* DarkTurquoise */ + --color2: #4682B4; + /* SteelBlue */ + --color3: #B0C4DE; + /* LightSteelBlue */ + --color4: #5F9EA0; + /* CadetBlue */ + --bcolor1: #FFFFFF; + /* White */ + --bcolor2: #2F4F4F; + /* DarkSlateGray */ + --bcolor3: #E0E0E0; + /* LightGray */ + --bcolor4: #D3D3D3; + /* LightGray */ } .navbar { @@ -75,6 +83,7 @@ .tooltiptext { font-weight: 400; + color: var(--bcolor3); background-color: var(--bcolor2); font-family: "Montserrat", sans-serif; } @@ -101,4 +110,4 @@ body { font-optical-sizing: auto; font-weight: 400; font-style: normal; -} +} \ No newline at end of file