[feature] Use Material theme for docs (#1535)

* [feature] Use Material theme for docs

This changes the theme to use Material with the slate (dark) theme and
the accent colour set to orange. It also replaces the swagger plugin
with one that works correctly with the Material theming.

* Add theme by @f0x52

Co-authored-by: f0x52 <f0x@cthu.lu>

* Enable social cards

The dependencies for cairosvg and pillow can be satisfied on RTD, so
this adds them to our requirements.txt and enables the social plugin.
This generates opengraph and twitter card tags as well as fancy preview
images in GTS colour style for platforms that show that as part of link
previews.

* Update Conda environment.yml

* update theme for swagger, basic light theme option

* dark mode mobile header bg color

---------

Co-authored-by: f0x52 <f0x@cthu.lu>

docs/api/swagger.md

@@ -6,4 +6,4 @@ The resulting API documentation is rendered below, for quick reference.
 
 If you'd like to do more with the spec, you can also view the [swagger.yaml](/api/swagger/swagger.yaml) directly, and then paste it into something like the [Swagger Editor](https://editor.swagger.io/) in order to autogenerate GoToSocial API clients in different languages, convert the doc to JSON or OpenAPI v3 specification, etc. See [here](https://swagger.io/tools/open-source/getting-started/) for more.
 
-!!swagger swagger.yaml!!
+<swagger-ui src="swagger.yaml"/>

docs/assets/css/colours.css

@@ -0,0 +1,25 @@
+[data-md-color-scheme="slate"] {
+	--md-primary-fg-color: #fd6a00;
+	--md-default-fg-color: #fafaff;
+	--md-default-fg-color--light: var(--md-default-fg-color);
+	--md-default-fg-color--lighter: var(--md-default-fg-color);
+	--md-default-fg-color--lightest: var(--md-default-fg-color);
+	--md-default-bg-color: #2a2b2f;
+	--md-default-bg-color--light: #35363b;
+	--md-default-bg-color--lighter: #3a3b41;
+	--md-default-bg-color--lightest: #4d4e56;
+
+	--md-typeset-color: var(--md-default-fg-color);
+	--md-typeset-a-color: #66befe;
+	--md-accent-fg-color: #89caff;
+
+	--md-footer-bg-color: var(--md-default-bg-color);
+}
+
+[data-md-color-scheme="slate"] .md-nav--primary .md-nav__title {
+	background: var(--md-default-bg-color) !important;
+}
+
+.md-content {
+	background: var(--md-default-bg-color--lightest);
+}

docs/environment.yml

@@ -5,16 +5,28 @@ dependencies:
   - _libgcc_mutex=0.1=main
   - _openmp_mutex=4.5=1_gnu
   - bzip2=1.0.8=h7b6447c_0
-  - ca-certificates=2021.10.26=h06a4308_2
+  - ca-certificates=2023.01.10=h06a4308_0
-  - certifi=2020.6.20=pyhd3eb1b0_3
+  - cairo=1.16.0=h19f5f5c_2
+  - certifi=2022.12.7=py310h06a4308_0
+  - fontconfig=2.13.1=h6c09931_0
+  - freetype=2.11.0=h70c0345_0
+  - glib=2.69.1=h4ff587b_1
+  - icu=58.2=he6710b0_3
+  - jpeg=9e=h7f8727e_0
   - ld_impl_linux-64=2.35.1=h7274673_9
   - libffi=3.3=he6710b0_2
   - libgcc-ng=9.3.0=h5101ec6_17
   - libgomp=9.3.0=h5101ec6_17
+  - libpng=1.6.37=hbc83047_0
   - libstdcxx-ng=9.3.0=hd4cf53a_17
   - libuuid=1.0.3=h7f8727e_2
+  - libxcb=1.15=h7f8727e_0
+  - libxml2=2.9.14=h74e7548_0
   - ncurses=6.3=h7f8727e_2
-  - openssl=1.1.1l=h7f8727e_0
+  - openssl=1.1.1t=h7f8727e_0
+  - pcre=8.45=h295c915_0
+  - pixman=0.40.0=h7f8727e_1
+  - pycparser=2.21=pyhd3eb1b0_0
   - python=3.10.0=h151d27f_3
   - readline=8.1=h27cfd23_0
   - sqlite=3.36.0=hc218d9a_0
@@ -22,24 +34,44 @@ dependencies:
   - tzdata=2021e=hda174b7_0
   - wheel=0.37.0=pyhd3eb1b0_1
   - xz=5.2.5=h7b6447c_0
-  - zlib=1.2.11=h7b6447c_3
+  - zlib=1.2.12=h7f8727e_2
   - pip:
-    - click==8.0.3
+      - beautifulsoup4==4.11.2
-    - ghp-import==2.0.2
+      - cairocffi==1.0.0
-    - importlib-metadata==4.8.2
+      - cairosvg==2.6.0
-    - jinja2==3.0.3
+      - cffi==1.15.1
-    - markdown==3.3.4
+      - charset-normalizer==3.0.1
-    - markupsafe==2.0.1
+      - click==8.0.3
-    - mergedeep==1.3.4
+      - colorama==0.4.6
-    - mkdocs==1.2.3
+      - cssselect2==0.7.0
-    - mkdocs-render-swagger-plugin==0.0.3
+      - defusedxml==0.7.1
-    - packaging==21.2
+      - ghp-import==2.0.2
-    - pip==21.2.4
+      - idna==3.4
-    - pyparsing==2.4.7
+      - importlib-metadata==4.8.2
-    - python-dateutil==2.8.2
+      - jinja2==3.0.3
-    - pyyaml==6.0
+      - markdown==3.3.4
-    - pyyaml-env-tag==0.1
+      - markupsafe==2.0.1
-    - setuptools==58.0.4
+      - mergedeep==1.3.4
-    - six==1.16.0
+      - mkdocs==1.4.2
-    - watchdog==2.1.6
+      - mkdocs-material==9.0.13
-    - zipp==3.6.0
+      - mkdocs-material-extensions==1.1.1
+      - mkdocs-swagger-ui-tag==0.5.2
+      - packaging==21.2
+      - pillow==9.4.0
+      - pip==21.2.4
+      - pygments==2.14.0
+      - pymdown-extensions==9.9.2
+      - pyparsing==2.4.7
+      - python-dateutil==2.8.2
+      - pyyaml==6.0
+      - pyyaml-env-tag==0.1
+      - regex==2022.10.31
+      - requests==2.28.2
+      - setuptools==58.0.4
+      - six==1.16.0
+      - soupsieve==2.4
+      - tinycss2==1.2.1
+      - urllib3==1.26.14
+      - watchdog==2.1.6
+      - webencodings==0.5.1
+      - zipp==3.6.0

docs/requirements.txt

@@ -1 +1,4 @@
-mkdocs-render-swagger-plugin==0.0.3
+mkdocs-material==9.0.13
+mkdocs-swagger-ui-tag==0.5.2
+CairoSVG==2.6.0
+Pillow==9.4.0

mkdocs.yml

@@ -1,19 +1,39 @@
 site_name: GoToSocial Documentation
-theme: readthedocs
+theme:
+  name: material
+  language: en
+  font: false
+  features:
+    - header.autohide
+  palette:
+    - scheme: slate
+      toggle:
+        icon: material/brightness-7
+        name: Switch to light mode
+    - scheme: default
+      toggle:
+        icon: material/brightness-4
+        name: Switch to dark mode
 repo_url: https://github.com/superseriousbusiness/gotosocial
 edit_uri: edit/main/docs/
 copyright: GoToSocial is licensed under the GNU AGPL v3 LICENSE. Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
 plugins:
-  - render_swagger
+  - search:
-
+      lang: en
-markdown_extensions:
+  - social:
-  - markdown.extensions.admonition
+      cards: true
-
+      cards_color:
-extra_javascript:
+        fill: "#fd6a00"
-  - assets/js/swagger-ui-bundle.js
+        text: "#fafaff"
+  - swagger-ui-tag:
+      supportedSubmitMethods: []
+      syntaxHighlightTheme: obsidian
 
 extra_css:
-  - assets/css/swagger-ui.css
+  - assets/css/colours.css
+
+markdown_extensions:
+  - admonition
 
 nav:
   - "Home": "index.md"