Copy over telephoto's website styles

saket · Oct 8, 2023 · 91cfffb · 91cfffb
1 parent 9f43115
commit 91cfffb
Show file tree

Hide file tree

Showing 8 changed files with 159 additions and 15 deletions.
diff --git a/.github/workflows/mkdocs_requirements.in b/.github/workflows/mkdocs_requirements.in
@@ -1,4 +1,8 @@
 mkdocs==1.4.2
+mkdocs-macros-plugin==0.7.0
+mkdocs-material==9.0.6
+
+# FYI the latest version breaks link colors.
 mkdocs-material==9.0.6
 
 # Force use newer versions of these dependencies. Their older versions had security vulnerabilities.

diff --git a/.github/workflows/mkdocs_requirements.txt b/.github/workflows/mkdocs_requirements.txt
@@ -23,6 +23,7 @@ importlib-metadata==6.0.0
 jinja2==3.1.2
     # via
     #   mkdocs
+    #   mkdocs-macros-plugin
     #   mkdocs-material
 markdown==3.3.7
     # via
@@ -36,7 +37,10 @@ mergedeep==1.3.4
 mkdocs==1.4.2
     # via
     #   -r .github/workflows/mkdocs_requirements.in
+    #   mkdocs-macros-plugin
     #   mkdocs-material
+mkdocs-macros-plugin==0.7.0
+    # via -r .github/workflows/mkdocs_requirements.in
 mkdocs-material==9.0.6
     # via -r .github/workflows/mkdocs_requirements.in
 mkdocs-material-extensions==1.1.1
@@ -50,10 +54,13 @@ pymdown-extensions==10.0
     #   -r .github/workflows/mkdocs_requirements.in
     #   mkdocs-material
 python-dateutil==2.8.2
-    # via ghp-import
+    # via
+    #   ghp-import
+    #   mkdocs-macros-plugin
 pyyaml==6.0
     # via
     #   mkdocs
+    #   mkdocs-macros-plugin
     #   pymdown-extensions
     #   pyyaml-env-tag
 pyyaml-env-tag==0.1
@@ -66,6 +73,8 @@ requests==2.31.0
     #   mkdocs-material
 six==1.16.0
     # via python-dateutil
+termcolor==2.3.0
+    # via mkdocs-macros-plugin
 urllib3==1.26.14
     # via requests
 watchdog==2.2.1

diff --git a/docs/compose/index.md b/docs/compose/index.md
@@ -7,7 +7,7 @@
 [drop_down_menu]: https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#DropdownMenu(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.unit.DpOffset,androidx.compose.ui.window.PopupProperties,kotlin.Function1)
 
 ```groovy
-implementation "me.saket.cascade:cascade-compose:2.3.0"
+implementation "me.saket.cascade:cascade-compose:{{ versions.cascade }}"
 implementation "androidx.compose.material3:material3:…" // https://d.android.com/jetpack/androidx/releases/compose-material3
 ```
 

diff --git a/docs/index.md b/docs/index.md
@@ -5,8 +5,8 @@
 `cascade` builds nested popup menus with smooth height animations. It is designed to be a *drop-in* replacement for both [PopupMenu](https://developer.android.com/reference/androidx/appcompat/widget/PopupMenu) and [DropdownMenu](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#DropdownMenu(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.unit.DpOffset,androidx.compose.ui.window.PopupProperties,kotlin.Function1)), so using it in your project is beautifully only a word away. Try out the [sample app](https://github.com/saket/cascade/releases/download/2.0.0-rc01/cascade_v2.0.0-rc01_sample.apk) to see it in action.
 
 ```groovy
-implementation "me.saket.cascade:cascade:2.3.0"
-implementation "me.saket.cascade:cascade-compose:2.3.0"
+implementation "me.saket.cascade:cascade:{{ versions.cascade }}"
+implementation "me.saket.cascade:cascade-compose:{{ versions.cascade }}"
 ```
 
 === "Compose UI"

diff --git a/docs/overrides/main.html b/docs/overrides/main.html
@@ -0,0 +1,17 @@
+{% extends "base.html" %}
+
+{% block extrahead %}
+<meta property="og:url" content="{{ page.canonical_url }}">
+{% if page and page.meta and page.meta.title %}
+<meta property="og:title" content="{{ page.meta.title }}">
+{% elif page and page.title and not page.is_homepage %}
+<meta property="og:title" content="{{ config.site_name }} - {{ page.title }}">
+{% else %}
+<meta property="og:title" content="{{ config.site_name }}">
+{% endif %}
+<meta property="og:description" content="{{ config.site_description }}">
+<meta property="og:image" content="{{ config.site_url }}/assets/social_image.png">
+<meta property="og:image:type" content="image/png">
+<meta property="og:image:width" content="707">
+<meta property="og:image:height" content="353">
+{% endblock %}
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
@@ -0,0 +1,105 @@
+@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@125,600&display=swap');
+
+.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 {
+  font-family: "Archivo", "Helvetica Neue", helvetica, sans-serif;
+  line-height: normal;
+  color: var(--md-default-fg-color);
+}
+
+.md-header__title {
+  font-family: "Archivo", "Helvetica Neue", helvetica, sans-serif;
+}
+.md-header {
+  box-shadow: none !important;
+  padding: 0.7rem 0rem;
+  background-color: var(--md-header-bg-color);
+}
+
+@media screen and (max-width: 76.1875em) {
+  /* Side drawer's header. */
+  .md-nav--primary .md-nav__title[for=__drawer] {
+    background-color: var(--md-header-bg-color);
+  }
+  /* Repository link shown in side drawer. */
+  .md-nav__source {
+    background-color: var(--md-header-bg-color);
+  }
+}
+
+.md-search__form {
+  border-radius: 0.24rem;
+  background-color: var(--md-header-search-bg-color);
+}
+.md-search__input {
+  color: var(--md-default-fg-color);
+}
+
+/* Active links on the left sidebar aren't very obvious in light mode. Increase their font-weight. */
+.md-nav__item .md-nav__link--active {
+  font-weight: 600;
+}
+
+/* Code blocks, both inline and multi-line. */
+.md-typeset code {
+  background: var(--md-inline-code-bg-color);
+  border: 0.1em solid var(--md-code-border-color);
+  border-radius: 0.25rem;
+}
+/* Code blocks. */
+.md-typeset pre>code {
+  background: var(--md-code-bg-color);
+  border-radius: 0.5rem;
+}
+
+.md-typeset video {
+  background: var(--md-video-bg-color);
+  outline: 0.1em solid var(--md-code-border-color);
+  border-radius: 0.3rem;
+}
+
+table {
+  font-size: 1em !important;
+}
+
+/*
+ * Reduce the main column's width because it looks too
+ * wide with the right sidebar (table of contents) hidden.
+ */
+.md-grid {
+  max-width: 50rem;
+}
+@media screen and (min-width: 76.25em) {
+  .md-content__inner {
+    margin-right: 2rem;
+  }
+}
+
+
+[data-md-color-scheme="default"] {
+  --md-header-bg-color: #DAE6CB;
+  --md-accent-fg-color: #386A20;
+  --md-primary-fg-color: var(--md-accent-fg-color);
+  --md-primary-fg-color--dark: var(--md-accent-fg-color);
+  --md-primary-bg-color: var(--md-default-fg-color);
+  --md-primary-bg-color--light: #666;
+  --md-default-bg-color: #F0F3E8;
+  --md-inline-code-bg-color: #FEFEFE;
+  --md-code-bg-color: var(--md-inline-code-bg-color);
+  --md-video-bg-color: var(--md-code-bg-color);
+  --md-code-border-color: var(--md-header-bg-color);
+  --md-header-search-bg-color: var(--md-default-bg-color);
+  --md-code-hl-color: #e5ff76a3;
+}
+
+[data-md-color-scheme="slate"] {
+  --md-header-bg-color: #22232F;
+  --md-accent-fg-color: #B6F397;
+  --md-primary-fg-color: var(--md-accent-fg-color);
+  --md-primary-fg-color--dark: var(--md-accent-fg-color);
+  --md-primary-bg-color: var(--md-default-fg-color);
+  --md-default-bg-color: #2E303E;
+  --md-video-bg-color: #393C4E;
+  --md-inline-code-bg-color: var(--md-code-bg-color);
+  --md-code-border-color: transparent;
+  --md-header-search-bg-color: var(--md-default-bg-color);
+}
diff --git a/docs/views/index.md b/docs/views/index.md
@@ -5,7 +5,7 @@
 `cascade` offers a drop-in replacement for [PopupMenu](https://developer.android.com/reference/androidx/appcompat/widget/PopupMenu). For guidance on creating & nesting menus, the [official documentation](https://developer.android.com/develop/ui/views/components/menus) can be followed while replacing any usages of `PopupMenu` with `CascadePopupMenu`.
 
 ```groovy
-implementation "me.saket.cascade:cascade:2.3.0"
+implementation "me.saket.cascade:cascade:{{ versions.cascade }}"
 ```
 
 ```diff

diff --git a/mkdocs.yml b/mkdocs.yml
@@ -9,32 +9,36 @@ remote_branch: gh-pages
 
 theme:
   name: 'material'
+  custom_dir: 'docs/overrides'
   font:
+    text: 'Roboto'
     code: 'JetBrains Mono'
   palette:
     # Palette toggle for light mode
     - scheme: default
       media: "(prefers-color-scheme: light)"
-      primary: 'teal'
-      accent: 'pink'
       toggle:
         icon: material/brightness-7
         name: Switch to dark mode
 
     # Palette toggle for dark mode
     - scheme: slate
       media: "(prefers-color-scheme: dark)"
-      primary: 'teal'
-      accent: 'pink'
       toggle:
         icon: material/brightness-4
         name: Switch to light mode
   features:
-    - navigation.tabs
     - content.tabs.link
-    - content.code.copy # For showing a copy button in code blocks.
+    - content.code.copy # Show a copy button in code blocks.
+    - navigation.instant # Instant loading of pages. Behave like a Single Page Application.
+    - toc.integrate
+
+extra_css:
+  - 'stylesheets/extra.css'
 
 markdown_extensions:
+  - toc: # Table of contents.
+      permalink: true # Anchor linking with headings.
   - pymdownx.highlight:
       use_pygments: true
       anchor_linenums: true
@@ -43,15 +47,20 @@ markdown_extensions:
   - pymdownx.tabbed:
       alternate_style: true
 
-nav:
-  - 'Cascade':
-    - 'Overview': index.md
+plugins:
+  - search
+  - macros # For extra.versions.cascade below.
+
+extra:
+  versions:
+    cascade: '2.3.0' # Env var for the latest version on maven.
 
+nav:
+  - 'Overview': index.md
   - 'Compose UI':
     - 'Overview': compose/index.md
     - 'Navigation': compose/navigation.md
     - 'Theming': compose/theming.md
-
   - 'Views':
       - 'Overview': views/index.md
       - 'Navigation': views/navigation.md