Customized mkdocs templates

README.md

@@ -10,20 +10,15 @@ It is based on the [fl_chart](https://pub.dev/packages/fl_chart) Flutter package
 
 ## Documentation
 
-Detailed documentation to this package can be found [here](https://flet-dev.github.io/flet-charts/).
+Detailed documentation to this package can be found [here](https://flet-charts.docs.flet.dev/).
 
 ## Platform Support
 
 This package supports the following platforms:
 
-| Platform | Supported |
-|----------|:---------:|
-| Windows  |     ✅     |
-| macOS    |     ✅     |
-| Linux    |     ✅     |
-| iOS      |     ✅     |
-| Android  |     ✅     |
-| Web      |     ✅     |
+| Platform | Windows | macOS | Linux | iOS | Android | Web |
+|----------|---------|-------|-------|-----|---------|-----|
+| Supported|    ✅    |   ✅   |   ✅   |  ✅  |    ✅    |  ✅  |
 
 ## Usage
 
@@ -42,11 +37,6 @@ To install the `flet-charts` package and add it to your project dependencies:
     ```
     After this, you will have to manually add this package to your `requirements.txt` or `pyproject.toml`.
 
-- Using `poetry`:
-    ```bash
-    poetry add flet-charts
-    ```
-
 ### Examples
 
 For examples, see [these](./examples).

docs/bar_chart.md

@@ -1,3 +1,10 @@
+---
+class_name: flet_charts.bar_chart.BarChart
+image: assets/bar-chart-diagram.svg
+---
+
+{{ class_summary(class_name, image) }}
+
 ## Examples
 
 ### Example 1
@@ -20,4 +27,4 @@
 --8<-- "examples/charts_example/src/bar_chart/example_2.py"
 ```
 
-::: flet_charts.bar_chart.BarChart
+{{ class_members(class_name) }}

docs/bar_chart_group.md

@@ -1 +1 @@
-::: flet_charts.bar_chart_group.BarChartGroup
+{{ class_all_options("flet_charts.bar_chart_group.BarChartGroup") }}

docs/bar_chart_rod.md

@@ -1 +1 @@
-::: flet_charts.bar_chart_rod.BarChartRod
+{{ class_all_options("flet_charts.bar_chart_rod.BarChartRod") }}

docs/bar_chart_rod_stack_item.md

@@ -1 +1 @@
-::: flet_charts.bar_chart_rod_stack_item.BarChartRodStackItem
+{{ class_all_options("flet_charts.bar_chart_rod_stack_item.BarChartRodStackItem") }}

docs/chart_axis.md

@@ -1 +1 @@
-::: flet_charts.chart_axis.ChartAxis
+{{ class_all_options("flet_charts.chart_axis.ChartAxis") }}

docs/chart_axis_label.md

@@ -1 +1 @@
-::: flet_charts.chart_axis.ChartAxisLabel
+{{ class_all_options("flet_charts.chart_axis.ChartAxisLabel") }}

docs/extras/css/mkdocstrings.css

@@ -0,0 +1,88 @@
+/* Material Symbols font with selected icons */
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,200,1,200&icon_names=account_tree,bolt,build,category,deployed_code");
+
+/* Hide the original label text */
+code.doc-symbol { font-size: 0; }
+
+/* Show only the icon */
+code.doc-symbol::before {
+  font-family: "Material Symbols Outlined";
+  font-variation-settings: 'FILL' 1, 'GRAD' 200, 'opsz' 24, 'wght' 200;
+  font-size: .82rem;
+  position: relative;
+  top: .25em;
+}
+
+.doc-heading .doc-symbol::before {
+  font-size: 1.0rem;
+  top: .21em;
+}
+
+code.doc-symbol-class::before {
+  content: "category"; 
+}
+
+code.doc-symbol-attribute::before {
+  content: "build"; 
+}
+
+code.doc-symbol-event::before {
+  content: "bolt"; 
+}
+
+code.doc-symbol-method::before {
+  content: "deployed_code"; 
+}
+
+/* Overrides */
+[data-md-color-scheme="default"] {
+  --doc-symbol-class-fg-color: #f0a502;
+  --doc-symbol-attribute-fg-color: #0b8dd9; /* ae106f */
+  --doc-symbol-attribute-bg-color: #9500721a;
+
+  --doc-symbol-event-fg-color: #f8aa01;
+  --doc-symbol-event-bg-color: #e5ff001a;
+}
+
+[data-md-color-scheme="slate"] {
+  --doc-symbol-class-fg-color: #f0a502;
+  --doc-symbol-attribute-fg-color: #0b8dd9; /* ae106f */
+  --doc-symbol-attribute-bg-color: #9500721a;
+
+  --doc-symbol-event-fg-color: #f8aa01;
+  --doc-symbol-event-bg-color: #e5ff001a;
+}
+
+code.doc-symbol-event,
+a code.doc-symbol-event {
+  color: var(--doc-symbol-event-fg-color);
+  background-color: var(--doc-symbol-event-bg-color);
+}
+
+/* Overrides */
+
+/* Command symbol */
+:root, :host,
+    /* Light mode */
+[data-md-color-scheme="default"] {
+    --doc-symbol-command-fg-color: #9538001;
+    --doc-symbol-command-bg-color: #9538001a;
+}
+
+/* Dark mode */
+[data-md-color-scheme="slate"] {
+    --doc-symbol-command-fg-color: #ffa6571;
+    --doc-symbol-command-bg-color: #ffa6571a;
+}
+
+code.doc-symbol-command,
+a code.doc-symbol-command {
+    color: var(--doc-symbol-command-fg-color);
+    background-color: var(--doc-symbol-command-bg-color);
+}
+
+code.doc-symbol-command::after {
+    content: "cmd";
+}
+
+/* Command symbol */

docs/extras/macros/__init__.py

@@ -0,0 +1,46 @@
+def define_env(env):
+    @env.macro
+    def class_all_options(class_name, separate_signature=True):
+        return f"""
+::: {class_name}
+    options:
+        show_root_toc_entry: true
+        show_bases: true
+        separate_signature: {str(separate_signature).lower()}
+        extra:
+            show_class_docstring: true
+            show_children: true
+        summary:
+            attributes: true
+            functions: true
+"""
+
+    @env.macro
+    def class_summary(class_name, image=None):
+        control_name = class_name.split(".")[-1]
+        image_md = f"\n\n![{control_name}]({image})\n\n" if image else ""
+        return f"""
+::: {class_name}
+    options:
+        show_root_toc_entry: true
+        extra:
+            show_class_docstring: true
+
+{image_md}
+
+::: {class_name}
+    options:
+        show_bases: true
+        summary:
+            attributes: true
+            functions: true
+"""
+
+    @env.macro
+    def class_members(class_name):
+        return f"""
+::: {class_name}
+    options:
+        extra:
+            show_children: true
+"""

docs/index.md

@@ -1,25 +1,20 @@
-# flet-charts
+# Getting started
 
 [![pypi](https://img.shields.io/pypi/v/flet-charts.svg)](https://pypi.python.org/pypi/flet-charts)
 [![downloads](https://static.pepy.tech/badge/flet-charts/month)](https://pepy.tech/project/flet-charts)
 [![license](https://img.shields.io/github/license/flet-dev/flet-charts.svg)](https://github.com/flet-dev/flet-charts/blob/main/LICENSE)
 
-A [Flet](https://flet.dev) extension for creating interactive charts and graphs.
+`flet-charts` is a [Flet](https://flet.dev) extension for creating interactive charts and graphs.
 
 It is based on the [fl_chart](https://pub.dev/packages/fl_chart) Flutter package.
 
 ## Platform Support
 
-This package supports the following platforms:
+This package is supported on the following platforms:
 
-| Platform | Supported |
-|----------|:---------:|
-| Windows  |     ✅     |
-| macOS    |     ✅     |
-| Linux    |     ✅     |
-| iOS      |     ✅     |
-| Android  |     ✅     |
-| Web      |     ✅     |
+| Windows | macOS | Linux | iOS | Android | Web |
+|---------|-------|-------|-----|---------|-----|
+|    ✅    |   ✅   |   ✅   |  ✅  |    ✅    |  ✅  |
 
 ## Usage
 
@@ -39,11 +34,6 @@ To install the `flet-charts` package and add it to your project dependencies:
 
     1. After this, you will have to manually add this package to your `requirements.txt` or `pyproject.toml`.
 
-=== "poetry"
-    ```bash
-    poetry add flet-charts
-    ```
-
 ## Examples
 
 You can find examples in the respective documentation pages for each chart type:

docs/line_chart.md

@@ -1,3 +1,10 @@
+---
+class_name: flet_charts.line_chart.LineChart
+image: assets/line-chart-diagram.svg
+---
+
+{{ class_summary(class_name, image) }}
+
 ## Examples
 
 ### Example 1
@@ -20,4 +27,4 @@
 --8<-- "examples/charts_example/src/line_chart/example_2.py"
 ```
 
-::: flet_charts.line_chart.LineChart
+{{ class_members(class_name) }}

docs/line_chart_data.md

@@ -1 +1 @@
-::: flet_charts.line_chart_data.LineChartData
+{{ class_all_options("flet_charts.line_chart_data.LineChartData") }}

docs/line_chart_data_point.md

@@ -1 +1 @@
-::: flet_charts.line_chart_data_point.LineChartDataPoint
+{{ class_all_options("flet_charts.line_chart_data_point.LineChartDataPoint") }}