Skip to content

Add support for tabs (and other UX components) to docs - #36041

Merged
uranusjr merged 7 commits into
apache:mainfrom
josh-fell:code-example-tab-docs
Dec 6, 2023
Merged

Add support for tabs (and other UX components) to docs#36041
uranusjr merged 7 commits into
apache:mainfrom
josh-fell:code-example-tab-docs

Conversation

@josh-fell

@josh-felljosh-fell commented Dec 4, 2023

Copy link
Copy Markdown
Contributor

This PR introduces the sphinx-design extension which provides numerous UX components such as tabs, cards, and dropdowns for documentation.

There are different ways or flavors of implementing or achieving the same result in Airflow whether that be in configuration, DAG authoring, etc. The current documentation explicitly lists these options as they appear which can lead to some lengthy doc pages as well as inconsistency in their presentation. Adding the ability to render these different options as tabs should combat both the verboseness and inconsistencies.

Closes: #29267

Comment threaddocs/apache-airflow/howto/operator/python.rst Outdated
@josh-fell

Copy link
Copy Markdown
ContributorAuthor

An example of using tabs to display both the TaskFlow API and operator-style in the Python how-to doc:

Screen.Recording.2023-12-03.at.10.51.52.PM.mov

@josh-fell
josh-fell requested a review from BasPHDecember 4, 2023 03:53
@josh-fell
josh-fell marked this pull request as ready for review December 4, 2023 03:59

@BasPHBasPH left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will be a great addition to the docs! One minor comment

Comment threadsetup.py Outdated
@potiuk

Copy link
Copy Markdown
Member

Oh.. Fantastic ! :) . And you can also rebase now, after the pytest-asyncio test collection has been solved (0.23.2 relased with a fix after I raised an issue to them).

@josh-fell
josh-fellforce-pushed the code-example-tab-docs branch from 498794d to 41a9a8bCompareDecember 4, 2023 19:27
@eladkal

Copy link
Copy Markdown
Contributor

I noticed that when you change tab the URL stays fixed.
so is it not possible to send deep link that will view a specific tab?

@BasPH

BasPH commented Dec 4, 2023

Copy link
Copy Markdown
Contributor

I noticed that when you change tab the URL stays fixed. so is it not possible to send deep link that will view a specific tab?

Don't think it's currently possible. Found this PR: executablebooks/sphinx-design#104 but it's still open

@josh-fell

Copy link
Copy Markdown
ContributorAuthor

I noticed that when you change tab the URL stays fixed. so is it not possible to send deep link that will view a specific tab?

I agree with @BasPH. It's not entirely obvious, but maybe it's possible with the other attributes you can set on each item like class-container? I don't know CSS at all though.

@josh-fell
josh-fellforce-pushed the code-example-tab-docs branch from e2986fd to 7e737f2CompareDecember 4, 2023 23:59
@josh-fell

josh-fell commented Dec 5, 2023

Copy link
Copy Markdown
ContributorAuthor

The latest and greatest version of the Python operators doc. I ended up splitting the example_python_operator DAG into the example_python_operator and example_python_decorator pattern with other operators that have TaskFlow equivalents. I also tried to make each chapter consistent, although not a total deep-dive.

Screen.Recording.2023-12-04.at.7.00.17.PM.mov

Comment threadairflow/example_dags/example_python_operator.py Outdated
This PR introduces the [`sphinx-design`](https://sphinx-design.readthedocs.io/en/alabaster-theme/index.html) extension which provides numerous UX components such as tabs, cards, and dropdowns for documentation.
There are different ways or flavors of implementing or achieving the same result in Airflow whether that be in configuration, DAG authoring, etc. The current documentation explicitly lists these options as they appear which can lead to some lengthy doc pages as well as inconsistency in their presentation. Any the ability to render these different options for as tabs should combat both the verboseness and inconsistencies.
@josh-fell
josh-fellforce-pushed the code-example-tab-docs branch from 7e737f2 to ff1eb7aCompareDecember 5, 2023 18:47
@uranusjr
uranusjr merged commit 58e264c into apache:mainDec 6, 2023
@ephraimbuddyephraimbuddy added the type:doc-only Changelog: Doc Only label Dec 6, 2023
@ephraimbuddyephraimbuddy added this to the Airflow 2.8.0 milestone Dec 6, 2023
ephraimbuddy pushed a commit that referenced this pull request Dec 6, 2023
@josh-fell
josh-fell deleted the code-example-tab-docs branch December 6, 2023 16:20
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support tabs in docs

6 participants

@josh-fell@potiuk@eladkal@BasPH@uranusjr@ephraimbuddy