Upgrade to mkdocs-material 9.1.0 and move tag css into custom css (#14)

Author: SoumayaMauthoorMOJ

docs/ADRs/README.md

@@ -7,7 +7,7 @@ hide:
 
 This section demos how to record and summarise Architecture Decision Records [(ADRs)](https://cognitect.com/blog/2011/11/15/documenting-architecture-decisions) using the MkDocs Material [tags](https://squidfunk.github.io/mkdocs-material/setup/setting-up-tags/?h=tags) in-built plugin.
 
-You'll need to add a `tag` keyword to the front-matter and specify the status for example:
+You'll need to add a `tag` keyword to the front-matter and specify the ADR status for example:
 
 ```
 ---
@@ -16,6 +16,8 @@ tags:
 ---
 ```
 
-You can associate [icons](https://squidfunk.github.io/mkdocs-material/setup/setting-up-tags/?h=tags#tag-icons-and-identifiers) with the ADR status tags on the `mkdocs.yml` file.
+I have associated [icons](https://squidfunk.github.io/mkdocs-material/setup/setting-up-tags/?h=tags#tag-icons-and-identifiers) with the ADR status tags on the `mkdocs.yml` file.
 
-The tags plugin will automatically include all markdown files in the `docs` repository with a `tags` keyword. This is great because it means you don't have to list the ADRs in the `nav` section of the mkdocs.yml file. However it also means you cannot use non ADR-status tags, unless you use mkdocs-insiders with [scoped tags indexes](https://squidfunk.github.io/mkdocs-material/setup/setting-up-tags/?h=tags#+tags.tags_extra_files).
+I have modified the background colors for the ADR status tags by [adding a separate style sheet](https://squidfunk.github.io/mkdocs-material/customization/#additional-css).
+
+The tags plugin will automatically include all markdown files in the `docs` repository with a `tags` keyword. This is great because it means you don't have to list the individual ADRs in the `nav` section of the mkdocs.yml file. However it also means you cannot use non ADR-status tags, unless you use [mkdocs material Insiders](https://squidfunk.github.io/mkdocs-material/insiders/) with [scoped tags indexes](https://squidfunk.github.io/mkdocs-material/setup/setting-up-tags/?h=tags#+tags.tags_extra_files).

docs/setup/README.md

@@ -27,15 +27,19 @@ This creates the following structure:
 
 ## Configuration
 
-Update/add the following variables to `mkdocs.yml`:
+MkDocs projects settings are configured by default using a YAML configuration file in the root directory named `mkdocs.yml`. You should add the following variables to `mkdocs.yml` at minimum:
 
 ```
-- site_name: <website-name>
-- repo_url: <url>
-- theme:
+site_name: <website-name>
+repo_url: <url>
+theme:
     name: tech_docs_template
+plugins:
+    - material/search
 ```
 
+See [configuration](https://www.mkdocs.org/user-guide/configuration/) for more details and configuration values.
+
 ## Preview
 
 MkDocs includes a live preview server, so you can preview your changes as you write your documentation. The server will automatically rebuild the site upon saving. Start it with:

docs/stylesheets/tags-color.css

@@ -0,0 +1,31 @@
+/* This sets the color of the ADR status tags see https://github.com/squidfunk/mkdocs-material/discussions/5101 */
+
+.md-typeset .md-tag--draft, .md-typeset .md-tag--draft[href] {
+  background-color: #5694ca;
+  color: white;
+}
+
+.md-typeset .md-tag--accepted, .md-typeset .md-tag--accepted[href] {
+    background-color: #00703c;
+    color: white;
+  }
+
+.md-typeset .md-tag--deprecated, .md-typeset .md-tag--deprecated[href] {
+    background-color: #b1b4b6;
+    color: white;
+  }
+
+.md-typeset .md-tag--proposed, .md-typeset .md-tag--proposed[href] {
+    background-color: #003078;
+    color: white;
+  }
+  
+.md-typeset .md-tag--rejected, .md-typeset .md-tag--rejected[href] {
+    background-color: #f47738;
+    color: white;
+  }
+
+.md-typeset .md-tag--superseded, .md-typeset .md-tag--superseded[href] {
+    background-color: #505a5f;
+    color: white;
+  }

mkdocs.yml

@@ -1,7 +1,7 @@
 ---
 site_name: MkDocs Tech Docs Template
 repo_url: https://github.com/ministryofjustice/mkdocs-tech-docs-template
-
+repo_name: mkdocs-tech-docs-template
 theme:
   name: material
   custom_dir: 'tech_docs_template/'
@@ -39,7 +39,8 @@ theme:
       toggle:
         icon: material/brightness-4
         name: Switch to light mode
-
+extra_css:
+  - stylesheets/tags-color.css
 edit_uri: edit/main/docs/
 plugins:
   - material/search

requirements-doc.txt

@@ -1,4 +1,4 @@
-mkdocs-material==9.0.9
+mkdocs-material==9.1.0
 mkdocs-git-revision-date-localized-plugin==1.1.0
 mkdocs-table-reader-plugin==1.2
 mknotebooks==0.7.1

setup.cfg

@@ -19,7 +19,7 @@ packages = find:
 include_package_data = True
 zip_safe = False
 install_requires =
-	mkdocs-material
+	mkdocs-material >= 9
 
 [options.entry_points]
 mkdocs.themes =

tech_docs_template/__init__.py

@@ -1 +1 @@
-__version__ = "0.0.22"
+__version__ = "0.0.23"

tech_docs_template/assets/stylesheets/extra.css

@@ -182,8 +182,4 @@
 
 .md-typeset .md-tag-icon::before {
   background-color: white;
-}
-
-.md-typeset .md-tag[href] {
-  color: white;
 }

tech_docs_template/assets/stylesheets/tags-color.css

@@ -4,7 +4,6 @@
 {% block styles %}
   {{ super() }}
   <link rel="stylesheet" href="{{ 'assets/stylesheets/extra.css' | url }}">
-  <link rel="stylesheet" href="{{ 'assets/stylesheets/tags-color.css' | url }}">
 {% endblock %}
 
 {% block footer %}