From 91cfffb05a1f2160029c6eff15ef6469897de7ee Mon Sep 17 00:00:00 2001 From: Saket Narayan Date: Sun, 8 Oct 2023 02:59:26 -0400 Subject: [PATCH] Copy over telephoto's website styles --- .github/workflows/mkdocs_requirements.in | 4 + .github/workflows/mkdocs_requirements.txt | 11 ++- docs/compose/index.md | 2 +- docs/index.md | 4 +- docs/overrides/main.html | 17 ++++ docs/stylesheets/extra.css | 105 ++++++++++++++++++++++ docs/views/index.md | 2 +- mkdocs.yml | 29 +++--- 8 files changed, 159 insertions(+), 15 deletions(-) create mode 100644 docs/overrides/main.html create mode 100644 docs/stylesheets/extra.css diff --git a/.github/workflows/mkdocs_requirements.in b/.github/workflows/mkdocs_requirements.in index fe54be3..d796d18 100644 --- 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 index a887eb1..2b9606b 100644 --- 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 index 9771e59..8971730 100644 --- 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 index 586e9ea..7c985af 100644 --- 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 new file mode 100644 index 0000000..e2a1603 --- /dev/null +++ b/docs/overrides/main.html @@ -0,0 +1,17 @@ +{% extends "base.html" %} + +{% block extrahead %} + +{% if page and page.meta and page.meta.title %} + +{% elif page and page.title and not page.is_homepage %} + +{% else %} + +{% endif %} + + + + + +{% endblock %} diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css new file mode 100644 index 0000000..985c337 --- /dev/null +++ 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 index 413811b..6b9a362 100644 --- 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 index 46dbcc2..77e003b 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -9,14 +9,14 @@ 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 @@ -24,17 +24,21 @@ theme: # 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