Fix mkdocs content tabs bug.

eli64s · Oct 7, 2024 · c564adc · c564adc
1 parent 2666cb7
commit c564adc
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 95 deletions.
diff --git a/docs/customization/badges.md b/docs/customization/badges.md
@@ -1,108 +1,100 @@
 # Badges
 
-A badge is a simple embeddable icon that displays various metrics such as the the number of stars or forks for a repository, languages used in the project, CI/CD build status, test coverage, the license of the project, and more. Badges are a great way to provide quick information about your project to users and visitors.
+A badge is a simple embeddable icon that displays various metrics such as the number of stars or forks for a repository, languages used in the project, CI/CD build status, test coverage, the license of the project, and more. Badges are a great way to provide quick information about your project to users and visitors.
 
 README-AI offers various badge styles to enhance your project's README. This guide explains how to use and customize these badges.
 
 ## Badge Styles
 
 Use the `--badge-style` option to select from the following styles:
 
-<div class="grid" markdown>
-
 === "default"
+
     ![Default Badge](https://img.shields.io/github/license/eli64s/readme-ai?flat&color=0080ff&logo=opensourceinitiative&logoColor=white)
     ![Default Badge](https://img.shields.io/github/last-commit/eli64s/readme-ai?flat&color=0080ff&logo=git&logoColor=white)
     ![Default Badge](https://img.shields.io/github/languages/top/eli64s/readme-ai?flat&color=0080ff)
     ![Default Badge](https://img.shields.io/github/languages/count/eli64s/readme-ai?flat&color=0080ff)
 
 === "flat"
+
     ![Flat Badge](https://img.shields.io/badge/Python-3776AB.svg?&style=flat&logo=Python&logoColor=white)
 
 === "flat-square"
+
     ![Flat-Square Badge](https://img.shields.io/badge/Python-3776AB.svg?&style=flat-square&logo=Python&logoColor=white)
 
 === "for-the-badge"
+
     ![For-the-Badge Badge](https://img.shields.io/badge/Python-3776AB.svg?&style=for-the-badge&logo=Python&logoColor=white)
 
 === "plastic"
+
     ![Plastic Badge](https://img.shields.io/badge/Python-3776AB.svg?&style=plastic&logo=Python&logoColor=white)
 
 === "skills"
+
     ![Skills Badge](https://skillicons.dev/icons?i=py)
 
 === "skills-light"
+
     ![Skills-Light Badge](https://skillicons.dev/icons?i=py&theme=light)
 
 === "social"
-    ![Social Badge](https://img.shields.io/badge/Python-3776AB.svg?&style=social&logo=Python&logoColor=FFD845)
 
-</div>
+    ![Social Badge](https://img.shields.io/badge/Python-3776AB.svg?&style=social&logo=Python&logoColor=FFD845)
 
 ## How It Works
 
 README-AI automatically detects your project's dependencies and technologies during the repository ingestion process. It then uses these dependencies and technologies to generate a comprehensive list of relevant badges for your project.
 
 When you provide the `--badge-style` option to the `readmeai` command, two sets of badges are generated:
 
-1. **Default Metadata Badges**: The default set is always included in the generated README file. The default badges includes the project `license`, `last commit`, `top language`, and `total languages`.
+1. **Default Metadata Badges**: The default set is always included in the generated README file. The default badges include the project `license`, `last commit`, `top language`, and `total languages`.
 2. **Project Dependency Badges**: When the `--badge-style` argument is provided to the CLI, a second badge set is generated, representing the extracted dependencies and metadata from your codebase.
 
-The badge sets are formatted in the README header, and provide the reader with a quick overview of the project's key metrics and technologies.
+The badge sets are formatted in the README header and provide the reader with a quick overview of the project's key metrics and technologies.
 
 ## Example Usage
 
 Let's generate a README with custom badge colors and styles using the `--badge-color` and `--badge-style` options:
 
 ```bash
-readmeai --badge-color orange
-         --badge-style flat-square
+readmeai --badge-color orange \
+         --badge-style flat-square \
          --repository https://github.com/eli64s/readme-ai
 ```
 
 The command above generates a README with the following badge configuration:
 
-<div class="grid cards" markdown>
-
--
-    {{ start_of_header }}
+!!! example
 
-    {{ project_logo }}
+    === "Badge Generation"
 
-    {{ project_name }}
+        <!-- other neader content -->
+        ![License](https://img.shields.io/github/license/eli64s/readme-ai?style=flat-square&color=orange&logo=opensourceinitiative&logoColor=white)
+        ![Last Commit](https://img.shields.io/github/last-commit/eli64s/readme-ai?style=flat-square&color=orange&logo=git&logoColor=white)
+        ![Top Language](https://img.shields.io/github/languages/top/eli64s/readme-ai?style=flat-square&color=orange)
+        ![Language Count](https://img.shields.io/github/languages/count/eli64s/readme-ai?style=flat-square&color=orange)
 
-    {{ project_slogan }}
+        *Built with the tools and technologies:*
 
-    <img src="https://img.shields.io/github/license/eli64s/readme-ai?style=flat-square&color=orange&logo=opensourceinitiative&logoColor=white">
-    <img src="https://img.shields.io/github/last-commit/eli64s/readme-ai?style=flat-square&color=orange&logo=git&logoColor=white">
-    <img src="https://img.shields.io/github/languages/top/eli64s/readme-ai?style=flat-square&color=orange">
-    <img src="https://img.shields.io/github/languages/count/eli64s/readme-ai?style=flat-square&color=orange">
-    <br>
+        ![pre-commit](https://img.shields.io/badge/precommit-FAB040.svg?style=flat-square&logo=pre-commit&logoColor=black)
+        ![Ruff](https://img.shields.io/badge/Ruff-FCC21B.svg?style=flat-square&logo=Ruff&logoColor=black)
+        ![GNU Bash](https://img.shields.io/badge/GNU%20Bash-4EAA25.svg?style=flat-square&logo=GNU-Bash&logoColor=white)
+        ![Pytest](https://img.shields.io/badge/Pytest-0A9EDC.svg?style=flat-square&logo=Pytest&logoColor=white)
+        ![Docker](https://img.shields.io/badge/Docker-2496ED.svg?style=flat-square&logo=Docker&logoColor=white)
+        ![Python](https://img.shields.io/badge/Python-3776AB.svg?style=flat-square&logo=Python&logoColor=white)
+        ![GitHub Actions](https://img.shields.io/badge/GitHub%20Actions-2088FF.svg?style=flat-square&logo=GitHub-Actions&logoColor=white)
+        ![Poetry](https://img.shields.io/badge/Poetry-60A5FA.svg?style=flat-square&logo=Poetry&logoColor=white)
+        ![AIOHTTP](https://img.shields.io/badge/AIOHTTP-2C5BB4.svg?style=flat-square&logo=AIOHTTP&logoColor=white)
+        ![Material for MkDocs](https://img.shields.io/badge/Material%20for%20MkDocs-526CFE.svg?style=flat-square&logo=Material-for-MkDocs&logoColor=white)
+        ![OpenAI](https://img.shields.io/badge/OpenAI-412991.svg?style=flat-square&logo=OpenAI&logoColor=white)
+        ![Google Gemini](https://img.shields.io/badge/Google%20Gemini-8E75B2.svg?style=flat-square&logo=Google-Gemini&logoColor=white)
+        ![Pydantic](https://img.shields.io/badge/Pydantic-E92063.svg?style=flat-square&logo=Pydantic&logoColor=white)
 
-    <em>Built with the tools and technologies:</em>
 
-    <img src="https://img.shields.io/badge/precommit-FAB040.svg?style=flat-square&logo=pre-commit&logoColor=black" alt="precommit">
-    <img src="https://img.shields.io/badge/Ruff-FCC21B.svg?style=flat-square&logo=Ruff&logoColor=black" alt="Ruff">
-    <img src="https://img.shields.io/badge/GNU%20Bash-4EAA25.svg?style=flat-square&logo=GNU-Bash&logoColor=white" alt="GNU%20Bash">
-    <img src="https://img.shields.io/badge/Pytest-0A9EDC.svg?style=flat-square&logo=Pytest&logoColor=white" alt="Pytest">
-    <img src="https://img.shields.io/badge/Docker-2496ED.svg?style=flat-square&logo=Docker&logoColor=white" alt="Docker">
-    <img src="https://img.shields.io/badge/Python-3776AB.svg?style=flat-square&logo=Python&logoColor=white" alt="Python">
-    <img src="https://img.shields.io/badge/GitHub%20Actions-2088FF.svg?style=flat-square&logo=GitHub-Actions&logoColor=white" alt="GitHub%20Actions">
-    <br>
-    <img src="https://img.shields.io/badge/Poetry-60A5FA.svg?style=flat-square&logo=Poetry&logoColor=white" alt="Poetry">
-    <img src="https://img.shields.io/badge/AIOHTTP-2C5BB4.svg?style=flat-square&logo=AIOHTTP&logoColor=white" alt="AIOHTTP">
-    <img src="https://img.shields.io/badge/Material%20for%20MkDocs-526CFE.svg?style=flat-square&logo=Material-for-MkDocs&logoColor=white" alt="Material%20for%20MkDocs">
-    <img src="https://img.shields.io/badge/OpenAI-412991.svg?style=flat-square&logo=OpenAI&logoColor=white" alt="OpenAI">
-    <img src="https://img.shields.io/badge/Google%20Gemini-8E75B2.svg?style=flat-square&logo=Google-Gemini&logoColor=white" alt="Google%20Gemini">
-    <img src="https://img.shields.io/badge/Pydantic-E92063.svg?style=flat-square&logo=Pydantic&logoColor=white" alt="Pydantic">
-    <br>
+The `--badge-color` option **only** modifies the default badge set, while the `--badge-style` option is applied to **both** the default and project dependency badges
 
-    {{ end_of_header }}
-
-</div>
-
-!!! note
-    The `--badge-color` option **only** modifies the default badge set, while the `--badge-style` option is applied to **both** the default and project dependency badges.
 
 ## Tips for Using Badges
 
@@ -120,5 +112,6 @@ Thank you to the following projects for providing the badges used in this projec
 - [Aveek-Saha/GitHub-Profile-Badges](https://github.com/Aveek-Saha/GitHub-Profile-Badges)
 - [Ileriayo/Markdown-Badges](https://github.com/Ileriayo/markdown-badges)
 - [tandpfun/skill-icons](https://github.com/tandpfun/skill-icons)
+```
 
 ---
diff --git a/docs/customization/header.md b/docs/customization/header.md
@@ -58,6 +58,7 @@ The `--header-style` option supports the following values:
 - **compact**: Left-aligned logo and a compact project title.
 - **modern**: Right-aligned logo with a modern aesthetic for the header.
 
+<!--
 ## Customizing Header Alignment
 
 Additionally, you can customize the alignment of the header sections using the `--align` option. Supported alignments are `center`, `left`, or `right`.
@@ -141,3 +142,4 @@ HeaderTemplate.HEADER_TEMPLATES[HeaderStyleOptions.CUSTOM] = """\
 By customizing and extending the header templates, you can fully control the look and feel of your README header to match your project’s branding and style.
 
 ---
+-->
diff --git a/docs/customization/project_logo.md b/docs/customization/project_logo.md
@@ -6,32 +6,29 @@ A project logo is a visual representation of your project that appears at the to
 
 Use the `--image` option to select from the following logo styles:
 
+=== "Blue"
 
-<div class="grid" markdown>
+    ![Blue Logo](https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/ec559a9f6bfd399b82bb44393651661b08aaf7ba/icons/folder-markdown-open.svg){: style="width:100px"}
 
+=== "Gradient"
 
-=== "blue"
-        ![Blue Logo](https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/ec559a9f6bfd399b82bb44393651661b08aaf7ba/icons/folder-markdown-open.svg){: style="width:100px"}
+    ![Gradient Logo](https://img.icons8.com/?size=512&id=55494&format=png){: style="width:100px"}
 
-=== "gradient"
-        ![Gradient Logo](https://img.icons8.com/?size=512&id=55494&format=png){: style="width:100px"}
+=== "Black"
 
-=== "black"
-        ![Black Logo](https://img.icons8.com/external-tal-revivo-regular-tal-revivo/96/external-readme-is-a-easy-to-build-a-developer-hub-that-adapts-to-the-user-logo-regular-tal-revivo.png){: style="width:100px"}
+    ![Black Logo](https://img.icons8.com/external-tal-revivo-regular-tal-revivo/96/external-readme-is-a-easy-to-build-a-developer-hub-that-adapts-to-the-user-logo-regular-tal-revivo.png){: style="width:100px"}
 
-=== "cloud"
-        ![Cloud Logo](https://cdn-icons-png.flaticon.com/512/6295/6295417.png){: style="width:100px"}
+=== "Cloud"
 
-=== "purple"
-        ![Purple Logo](https://img.icons8.com/external-tal-revivo-duo-tal-revivo/100/external-markdown-a-lightweight-markup-language-with-plain-text-formatting-syntax-logo-duo-tal-revivo.png){: style="width:100px"}
+    ![Cloud Logo](https://cdn-icons-png.flaticon.com/512/6295/6295417.png){: style="width:100px"}
 
-=== "grey"
-        ![Grey Logo](https://img.icons8.com/external-tal-revivo-filled-tal-revivo/96/external-markdown-a-lightweight-markup-language-with-plain-text-formatting-syntax-logo-filled-tal-revivo.png){: style="width:100px"}
+=== "Purple"
 
-=== "green"
-        ![Green Logo](https://img.icons8.com/external-tal-revivo-filled-tal-revivo/96/external-markdown-a-lightweight-markup-language-with-plain-text-formatting-syntax-logo-filled-tal-revivo.png){: style="width:100px"}
+    ![Purple Logo](https://img.icons8.com/external-tal-revivo-duo-tal-revivo/100/external-markdown-a-lightweight-markup-language-with-plain-text-formatting-syntax-logo-duo-tal-revivo.png){: style="width:100px"}
 
-</div>
+=== "Grey"
+
+    ![Grey Logo](https://img.icons8.com/external-tal-revivo-filled-tal-revivo/96/external-markdown-a-lightweight-markup-language-with-plain-text-formatting-syntax-logo-filled-tal-revivo.png){: style="width:100px"}
 
 ## How It Works
 
@@ -67,7 +64,7 @@ You will be prompted to provide an image file path or URL:
 Provide an image file path or URL:
 ```
 
-### Generating a Logo with LLM
+### LLM Generated Logo
 
 To generate a logo using an LLM API (e.g., OpenAI), use the `--image llm` option:
 
@@ -81,28 +78,26 @@ This will generate a unique project logo using the specified LLM API.
 
 Here's an example of how a generated README header might look with a logo:
 
-!!! example "Generated README Header with Logo"
-
-    ```markdown
-    <p align="center">
-      <img src="path/to/generated/logo.png" width="200" alt="Project Logo">
-    </p>
+!!! example
 
-    <h1 align="center">Your Project Name</h1>
+    === "Generated README Header with Logo"
 
-    <p align="center">
-      Your project's tagline or brief description
-    </p>
-
-    <!-- Badges and other header content -->
-    ```
+        <p align="center">
+        <img src="https://github.com/eli64s/readme-ai/blob/main/docs/assets/images/dalle/readme-ai.png?raw=true" width="200" alt="Project Logo">
+        </p>
+        <h1 align="center">Your Project Name</h1>
+        <p align="center">
+        Your project's tagline or brief description
+        </p>
+        <!-- Badges and other header content -->
 
 ## LLM-Generated Logo Example
 
 Here's an example of a logo generated using the OpenAI DALL-E model:
 
+
 <figure markdown>
-  ![LLM Generated Logo](https://github.com/eli64s/readme-ai/blob/main/examples/assets/project-logo-dalle.png?raw=true){ width="300" }
+  ![LLM Generated Logo](https://github.com/eli64s/readme-ai/blob/main/docs/assets/images/dalle/readme-ai.png?raw=true){ width="300" }
   <figcaption>Logo generated using OpenAI's DALL-E model</figcaption>
 </figure>
 

diff --git a/docs/examples/gallery.md b/docs/examples/gallery.md
@@ -1,7 +1,9 @@
-## Example README Files
+# Example Gallery
+
+Here are some examples of README files generated by readme-ai for various projects using different languages and frameworks.
 
 | Language/Framework | Output File | Input Repository | Description |
-|--------------------|-------------|------------------|-------------|
+| :--: | :--: | :--: | :--: |
 | Python | [readme-python.md][0a] | [readme-ai][0b] | Core readme-ai project |
 | TypeScript & React | [readme-typescript.md][1a] | [ChatGPT App][1b] | React Native ChatGPT app |
 | PostgreSQL & DuckDB | [readme-postgres.md][2a] | [Buenavista][2b] | Postgres proxy server |
@@ -14,26 +16,28 @@
 | Jupyter Notebook | [readme-mlops.md][9a] | [mlops-course][9b] | MLOps course repository |
 | Apache Flink | [readme-local.md][10a] | Local Directory | Example using a local directory |
 
-<sub>See additional README file examples [here](https://github.com/eli64s/readme-ai/tree/main/examples/markdown)</sub>
+<sub>See additional README files generated by readme-ai [here](https://github.com/eli64s/readme-ai/tree/main/examples/markdown)</sub>
+
 
-[0a]: https://github.com/eli64s/readme-ai/blob/main/examples/markdown/readme-python.md "readme-python.md"
+<!-- README Example Links -->
+[0a]: https://github.com/eli64s/readme-ai/blob/main/examples/readme-ai.md "readme-python.md"
 [0b]: https://github.com/eli64s/readme-ai "readme-ai"
-[1a]: https://github.com/eli64s/readme-ai/blob/main/examples/markdown/readme-typescript.md "readme-typescript.md"
+[1a]: https://github.com/eli64s/readme-ai/blob/main/examples/readme-typescript.md "readme-typescript.md"
 [1b]: https://github.com/Yuberley/ChatGPT-App-React-Native-TypeScript "ChatGPT App"
-[2a]: https://github.com/eli64s/readme-ai/blob/main/examples/markdown/readme-postgres.md "readme-postgres.md"
+[2a]: https://github.com/eli64s/readme-ai/blob/main/examples/readme-postgres.md "readme-postgres.md"
 [2b]: https://github.com/jwills/buenavista "Buenavista"
-[3a]: https://github.com/eli64s/readme-ai/blob/main/examples/markdown/readme-kotlin.md "readme-kotlin.md"
+[3a]: https://github.com/eli64s/readme-ai/blob/main/examples/readme-kotlin.md "readme-kotlin.md"
 [3b]: https://github.com/rumaan/file.io-Android-Client "file.io Client"
-[4a]: https://github.com/eli64s/readme-ai/blob/main/examples/markdown/readme-streamlit.md "readme-streamlit.md"
+[4a]: https://github.com/eli64s/readme-ai/blob/main/examples/readme-streamlit-v0.5.88.md "readme-streamlit.md"
 [4b]: https://github.com/eli64s/readme-ai-streamlit "readme-ai-streamlit"
-[5a]: https://github.com/eli64s/readme-ai/blob/main/examples/markdown/readme-rust-c.md "readme-rust-c.md"
+[5a]: https://github.com/eli64s/readme-ai/blob/main/examples/readme-rust-c.md "readme-rust-c.md"
 [5b]: https://github.com/DownWithUp/CallMon "CallMon"
-[6a]: https://github.com/eli64s/readme-ai/blob/main/examples/markdown/readme-go.md "readme-go.md"
+[6a]: https://github.com/eli64s/readme-ai/blob/main/examples/readme-docker-go.md "readme-docker-go.md"
 [6b]: https://github.com/olliefr/docker-gs-ping "docker-gs-ping"
-[7a]: https://github.com/eli64s/readme-ai/blob/main/examples/markdown/readme-java.md "readme-java.md"
+[7a]: https://github.com/eli64s/readme-ai/blob/main/examples/readme-java.md "readme-java.md"
 [7b]: https://github.com/avjinder/Minimal-Todo "Minimal-Todo"
-[8a]: https://github.com/eli64s/readme-ai/blob/main/examples/markdown/readme-fastapi-redis.md "readme-fastapi-redis.md"
+[8a]: https://github.com/eli64s/readme-ai/blob/main/examples/readme-fastapi-redis.md "readme-fastapi-redis.md"
 [8b]: https://github.com/FerrariDG/async-ml-inference "async-ml-inference"
-[9a]: https://github.com/eli64s/readme-ai/blob/main/examples/markdown/readme-mlops.md "readme-mlops.md"
+[9a]: https://github.com/eli64s/readme-ai/blob/main/examples/readme-mlops.md "readme-mlops.md"
 [9b]: https://github.com/GokuMohandas/mlops-course "mlops-course"
-[10a]: https://github.com/eli64s/readme-ai/blob/main/examples/markdown/readme-local.md "readme-local.md"
+[10a]: https://github.com/eli64s/readme-ai/blob/main/examples/readme-local.md "readme-local.md"
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -60,19 +60,17 @@ theme:
     - toc.follow
     # - toc.integrate
   palette:
-    - media: "(prefers-color-scheme: light)"
-      scheme: default
+    - scheme: default
       primary: black
       accent: deep-purple
       toggle:
-        icon: material/brightness-7
+        icon: material/brightness-4
         name: Switch to dark mode
-    - media: "(prefers-color-scheme: dark)"
-      scheme: slate
+    - scheme: slate
       primary: indigo
       accent: deep-purple
       toggle:
-        icon: material/brightness-4
+        icon: material/brightness-7
         name: Switch to light mode
   font:
     text: Roboto
@@ -103,6 +101,7 @@ markdown_extensions:
   - attr_list
   - def_list
   - md_in_html
+  - codehilite
   - toc:
       permalink: true
   - pymdownx.arithmatex:

diff --git a/pyproject.toml b/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "readmeai"
-version = "0.5.088"
+version = "0.5.089"
 description = "Automated README file generator, powered by AI."
 authors = ["Eli <egsalamie@gmail.com>"]
 license = "MIT"