From b397a3b834e6cf2e79e40ba9e1068abf97611192 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Krassowski?=
<5832902+krassowski@users.noreply.github.com>
Date: Tue, 26 Sep 2023 06:57:51 +0100
Subject: [PATCH] Improve docs setup (SVG logos, repo links) (#7074)
* Add SVG logo with dark mode, GitHub/Forum/Chat buttons
* Fix CSS syntax higlight
* Lint
* Add GitHub config
---
docs/source/_static/jupyter_logo.svg | 16 +++++++++
docs/source/_static/logo-rectangle-dark.svg | 14 ++++++++
docs/source/_static/logo-rectangle.svg | 14 ++++++++
docs/source/conf.py | 40 ++++++++++++++++++++-
docs/source/custom_css.md | 20 ++++++-----
5 files changed, 94 insertions(+), 10 deletions(-)
create mode 100644 docs/source/_static/jupyter_logo.svg
create mode 100644 docs/source/_static/logo-rectangle-dark.svg
create mode 100644 docs/source/_static/logo-rectangle.svg
diff --git a/docs/source/_static/jupyter_logo.svg b/docs/source/_static/jupyter_logo.svg
new file mode 100644
index 0000000000..37f040e6b1
--- /dev/null
+++ b/docs/source/_static/jupyter_logo.svg
@@ -0,0 +1,16 @@
+
diff --git a/docs/source/_static/logo-rectangle-dark.svg b/docs/source/_static/logo-rectangle-dark.svg
new file mode 100644
index 0000000000..7a79f6fe3a
--- /dev/null
+++ b/docs/source/_static/logo-rectangle-dark.svg
@@ -0,0 +1,14 @@
+
diff --git a/docs/source/_static/logo-rectangle.svg b/docs/source/_static/logo-rectangle.svg
new file mode 100644
index 0000000000..4cb08d30e8
--- /dev/null
+++ b/docs/source/_static/logo-rectangle.svg
@@ -0,0 +1,14 @@
+
diff --git a/docs/source/conf.py b/docs/source/conf.py
index 97b506d7d5..119f31ea2c 100644
--- a/docs/source/conf.py
+++ b/docs/source/conf.py
@@ -173,7 +173,45 @@
# Theme options are theme-specific and customize the look and feel of a theme
# further. For a list of options available for each theme, see the
# documentation.
-# html_theme_options = {}
+html_theme_options = {
+ "icon_links": [
+ {
+ "name": "jupyter.org",
+ "url": "https://jupyter.org",
+ "icon": "_static/jupyter_logo.svg",
+ "type": "local",
+ },
+ {
+ "name": "GitHub",
+ "url": "https://github.com/jupyter/notebook",
+ "icon": "fab fa-github-square",
+ },
+ {
+ "name": "Discourse",
+ "url": "https://discourse.jupyter.org/c/notebook/31",
+ "icon": "fab fa-discourse",
+ },
+ {
+ "name": "Gitter",
+ "url": "https://gitter.im/jupyter/jupyter",
+ "icon": "fab fa-gitter",
+ },
+ ],
+ "logo": {
+ "alt_text": "Jupyter",
+ "image_light": "_static/logo-rectangle.svg",
+ "image_dark": "_static/logo-rectangle-dark.svg",
+ },
+ "use_edit_page_button": True,
+}
+
+# Output for github to be used in links
+html_context = {
+ "github_user": "jupyter", # Username
+ "github_repo": "notebook", # Repo name
+ "github_version": "main", # Version
+ "doc_path": "docs/source/", # Path in the checkout to the docs root
+}
# Add any paths that contain custom themes here, relative to this directory.
# html_theme_path = []
diff --git a/docs/source/custom_css.md b/docs/source/custom_css.md
index 73b67d3999..ea9721ac35 100644
--- a/docs/source/custom_css.md
+++ b/docs/source/custom_css.md
@@ -6,21 +6,24 @@ To apply custom CSS, you can add a `/custom/custom.css` file in the jupyter `con
You can use a custom CSS file to modify default Jupyter styling.
-```
+```css
/* Modify Jupyter Styles */
-#top-panel-wrapper, #jp-top-bar {
- background-color: #aecad4!important;
+#top-panel-wrapper,
+#jp-top-bar {
+ background-color: #aecad4 !important;
}
-#menu-panel-wrapper, #jp-MainMenu, #menu-panel {
- background-color: #aecad4!important;
+#menu-panel-wrapper,
+#jp-MainMenu,
+#menu-panel {
+ background-color: #aecad4 !important;
}
.jp-NotebookPanel-toolbar {
- background-color: #aecad4!important;
+ background-color: #aecad4 !important;
}
.lm-MenuBar-content {
- color: #02484d
+ color: #02484d;
}
```
@@ -30,7 +33,7 @@ You can use a custom CSS file to modify default Jupyter styling.
Another potential application for custom CSS is styling markdown.
-```
+```css
/* Headings */
h1,
h2 {
@@ -44,7 +47,6 @@ h1 {
margin-bottom: 40px;
color: #10929e;
text-decoration: underline;
-
}
h2 {