From bcbb6702ccf8c17ffaa03569343022df68c0f323 Mon Sep 17 00:00:00 2001 From: fabianfgross Date: Wed, 25 Sep 2024 15:18:55 +0200 Subject: [PATCH] refactor: better CSS --- EXAMPLE/prometheus-advanced.html | 323 +++++++++++++++++++--------- EXAMPLE/prometheus.html | 246 ++++++++++++++++++++-- EXAMPLE/style.css | 246 ++++++++++++++++++++-- README.md | 37 +++- writer/doc_writer.py | 349 +++++++++++++++++++++---------- writer/doc_writer_test.py | 323 +++++++++++++++++++--------- 6 files changed, 1181 insertions(+), 343 deletions(-) diff --git a/EXAMPLE/prometheus-advanced.html b/EXAMPLE/prometheus-advanced.html index c269008..ca8e877 100644 --- a/EXAMPLE/prometheus-advanced.html +++ b/EXAMPLE/prometheus-advanced.html @@ -5,113 +5,248 @@ prometheus - helm chart documentation diff --git a/EXAMPLE/prometheus.html b/EXAMPLE/prometheus.html index 80d708b..56fe7e3 100644 --- a/EXAMPLE/prometheus.html +++ b/EXAMPLE/prometheus.html @@ -6,41 +6,247 @@ prometheus - helm chart documentation diff --git a/EXAMPLE/style.css b/EXAMPLE/style.css index cd2131f..706d3bd 100644 --- a/EXAMPLE/style.css +++ b/EXAMPLE/style.css @@ -1,36 +1,242 @@ -body { - font-family: sans-serif; - margin: auto; - padding: 10px; - max-width: 80%; +html { + --blue: #A8DADC; /* Pastel Cyan */ + --dark-blue: #457B9D; /* Steel Blue */ + --light-blue: #F1FAEE; /* Honeydew */ + --light-gray: #F8F9FA; /* Light Gray */ + --gray: #D8E2DC; /* Soft Gray */ + --dark-gray: #264653; /* Deep Green */ + --dark-bg: #343A40; /* Charcoal */ + --dark-card-bg: #495057; /* Granite */ + --dark-text: #E9ECEF; /* Light Gray Text for Dark Mode */ + --darker-text: #121212; /* Dark text for Dark Mode */ + --dark-gray-text: #264653; /* Deep Green for Dark Mode Text */ + --dark-link: #A8DADC; /* Pastel Cyan for Links */ + --dark-link-hover: #81B1BD; /* Steel Blue for Hover */ + --primary-gradient: linear-gradient(135deg, #A8DADC, #F1FAEE); /* Cyan to Honeydew */ + --secondary-gradient: linear-gradient(135deg, #457B9D, #A8DADC); /* Steel Blue to Cyan */ + --margin-top: 3em; + --border-radius: 15px; +} + +body, html { + height: 100%; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + background-color: var(--light-gray); + color: var(--dark-gray); + transition: all 0.3s; +} + +#navbar-outer { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: auto; + background: var(--secondary-gradient); + overflow-x: hidden; + margin-top: 0; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + z-index: 1000; + transition: all 0.3s; +} + +#navbar, .container { + max-width: 80%; + margin: auto; +} + +#navbar a { + padding: 1em; + text-decoration: none; + color: var(--light-gray); + display: inline-block; + transition: background-color 0.3s, transform 0.3s; + border-radius: var(--border-radius); +} + +#navbar a:first-child { + background: var(--primary-gradient); + font-weight: bold; + color: var(--dark-gray); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +#navbar a:hover { + background: var(--primary-gradient); + transform: translateY(-2px); + color: var(--dark-gray); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); +} + +#search { + position: relative; + padding: 15px; + width: 98%; + margin: 20px auto; + display: block; + font-size: medium; + color: var(--dark-gray); + border: none; + border-radius: var(--border-radius); + background: var(--light-gray); + box-shadow: inset 6px 6px 12px #ccc, inset -6px -6px 12px #fff; + transition: all 0.3s; +} + +#search:focus { + box-shadow: inset 6px 6px 12px #bbb, inset -6px -6px 12px #eee, 0 0 8px 2px rgba(248, 241, 225, 0.5); + outline: none; +} + +.content { + padding: 25px; + margin-top: var(--margin-top); + background-color: white; + border-radius: var(--border-radius); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: all 0.3s; + background: var(--light-gray); +} + +.container { + padding: 25px; + border-radius: var(--border-radius); + box-shadow: 4px 4px 8px #ccc, -4px -4px 8px #fff; + background-color: var(--light-gray); + transition: all 0.3s; +} + +.table-container { + padding: 0 1em; + overflow: auto; } table { - font-family: Arial, Helvetica, sans-serif; - border-collapse: collapse; - display: block; - overflow-x: auto; + border-collapse: collapse; + width: 100%; + background-color: white; + border-radius: var(--border-radius); + box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); + margin-bottom: 20px; + overflow: hidden; + transition: all 0.3s; } td, th { - border: 1px solid #ddd; - padding: 8px; + border: 1px solid var(--gray); + padding: 12px; + transition: background-color 0.3s; } -tr:nth-child(even){background-color: #f2f2f2;} +tr:nth-child(even) { + background-color: #E9ECEF; /* Soft Light Gray */ +} -tr:hover {background-color: #E0F2FF;} +tr:hover { + background-color: #D8E2DC; /* Very Soft Gray */ +} th { - padding-top: 12px; - padding-bottom: 12px; - text-align: left; - background-color: #0288d1; - color: white; + padding-top: 14px; + padding-bottom: 14px; + text-align: left; + background: var(--secondary-gradient); + color: var(--light-gray); } pre { background-color: #E4E4E4; - padding: 0.5em; - border-radius: 5px; + padding: 15px; + border-radius: var(--border-radius); + overflow-x: auto; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); + transition: all 0.3s; +} + +h1, h2, h3, h4, h5, h6 { + scroll-margin-top: var(--margin-top); + color: var(--dark-gray); + transition: color 0.3s; +} + +/* Dark Mode */ +@media (prefers-color-scheme: dark) { + body, html { + background-color: var(--dark-bg); + color: var(--dark-text); + } + + #navbar-outer { + background: var(--primary-gradient); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); + } + + #navbar a { + color: var(--dark-gray-text); /* Make navbar links text darker */ + } + + #navbar a:first-child { + background: var(--secondary-gradient); + color: var(--light-gray); + } + + #navbar a:hover { + background: var(--secondary-gradient); + color: var(--light-gray); + } + + #search { + background: var(--dark-card-bg); + color: var(--dark-text); + box-shadow: inset 6px 6px 12px #292d31, inset -6px -6px 12px #5a616a; + } + + #search:focus { + box-shadow: inset 6px 6px 12px #292d31, inset -6px -6px 12px #5a616a, 0 0 8px 2px rgba(168, 218, 220, 0.5); + } + + .content, .container { + background: var(--dark-card-bg); + box-shadow: 4px 4px 8px #292d31, -4px -4px 8px #5a616a; + } + + table { + background-color: var(--dark-card-bg); + box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); + } + + td, th { + border: 1px solid #555; + } + + tr:nth-child(even) { + background-color: #42474d; /* Dark Granite */ + } + + tr:hover { + background-color: #3c3f41; /* Slightly lighter dark granite */ + } + + th { + background: var(--primary-gradient); + color: var(--dark-gray-text); /* Make table header text darker */ + } + + pre { + background-color: #333; + } + + h1, h2, h3, h4, h5, h6 { + color: var(--light-blue); + } + + a { + color: var(--dark-link); + transition: color 0.3s; + } + + a:hover { + color: var(--dark-link-hover); + } } diff --git a/README.md b/README.md index 481eb92..7f632f5 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ It supports simple templating, so custom templates for output can be used as well. Will read metadata such as `Chart.yaml`, `values.yaml` or the present templates and generate a Markdown or HTML documentation from that data. -## Example +## Example For an example output when running `stella` for the [prometheus](https://github.com/prometheus-community/helm-charts/tree/main/charts/prometheus) @@ -30,7 +30,7 @@ helm chart, follow these links: ## Usage -### Docker Image +### 🐳 Docker Image | | Note | @@ -46,7 +46,7 @@ docker run -v ${full_path_to_host_chart_dir}:/tmp/chart ghcr.io/very-doge-wow/st ``` -### Installation +### 🛠 Installation To run it natively on your machine using pipenv: @@ -66,7 +66,7 @@ pip install pyyaml markdown python stella.py --help ``` -### General Usage +### 📚 General Usage ```text @@ -94,7 +94,7 @@ additional functionality which would break when using custom CSS. It will create a static html site with dynamic navbar and a search for the chart's values. -## Adding `stella` Docstrings to your Chart +## ⎈ Adding `stella` Docstrings to your Chart Metadata is read from the present files of your chart. Additionally, you should also document the options given @@ -155,7 +155,7 @@ Will yield the output: -## Custom Templating +## 📄 Custom Templating To specify a custom template, create a text/markdown file, then pass it to stella using the config parameter. @@ -172,14 +172,14 @@ You can use the following fields inside your template: * `{{ stella.objects }}` * `{{ stella.values }}` -## Contributing to `stella` +## 💫 Contributing to `stella` You want to contribute? Awesome! Feel free to propose changes, report bugs or request features and improvements. But first, please read the [contribution guidelines](https://github.com/very-doge-wow/stella/blob/main/CONTRIBUTING.md). -## Why `stella`? +## 💭 Why `stella`? `stella` is named after [Tilemann Stella](https://de.wikipedia.org/wiki/Tilemann_Stella), @@ -187,3 +187,24 @@ a scholar from the Renaissance era. He is most famously known for being a cartographer and for creating multiple waterways, which is fitting when considering the tool should create helm chart docs. + +## 🧑‍💻 Development +
+Expand for more info + +### Running Unit Tests + +```shell +pipenv install -d +pipenv run pytest -vv --cov --cov-report=xml +``` + +### Updating Example Outputs + +``` +pipenv install +pipenv run python stella.py -fh -css EXAMPLE/style.css -hcp EXAMPLE/prometheus -o EXAMPLE/prometheus.html +pipenv run python stella.py -fh --advanced-html -hcp EXAMPLE/prometheus -o EXAMPLE/prometheus-advanced.html +``` + +
\ No newline at end of file diff --git a/writer/doc_writer.py b/writer/doc_writer.py index cf309eb..fe705c5 100644 --- a/writer/doc_writer.py +++ b/writer/doc_writer.py @@ -113,113 +113,248 @@ def write(output: str, doc: dict, template: str, format_html: bool, advanced_htm REPLACE_STRING_TITLE diff --git a/writer/doc_writer_test.py b/writer/doc_writer_test.py index 3352022..d990cb7 100644 --- a/writer/doc_writer_test.py +++ b/writer/doc_writer_test.py @@ -487,113 +487,248 @@ def test_writer_advanced_html(): unittest - helm chart documentation