From cf00b0ca1a4a7967a7538c469599c41a72c863b2 Mon Sep 17 00:00:00 2001 From: ravindk89 Date: Thu, 18 Feb 2021 13:12:32 -0500 Subject: [PATCH] Kitchen Sink page for UI/UX --- source/design.rst | 372 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 372 insertions(+) create mode 100644 source/design.rst diff --git a/source/design.rst b/source/design.rst new file mode 100644 index 00000000..93211c56 --- /dev/null +++ b/source/design.rst @@ -0,0 +1,372 @@ +:orphan: + +=========== +Design Page +=========== + +.. default-domain:: minio + +.. contents:: Table of Contents + :local: + :depth: 2 + +Overview +-------- + +This page is designed to assist MinIO UI/UX work on the documentation. Think of +it like a 'kitchen-sink' of various objects and headers to more easily see +what everything looks liker right now. If it's on this page, it exists +somewhere else in the documentation. + +If you are not working on MinIO UI/UX, this page has no useful content. +Head back to the :doc:`Index `. + +Common Markup +------------- + +Text Markup +~~~~~~~~~~~ + +*This is italics text* + +**This is bold text** + +``This is monospaced text`` + +`This is hyperlink text `__ + +.. code-block:: shell + :class: copyable + + echo "This is a code block. It includes as small copy hover in the top-right." + + echo "Syntax highlighting is automatic via pygments." + +Containers +~~~~~~~~~~ + +.. container:: + + This text is in a container. Containers can be helpful for custom rendering + of text. Add a custom class to the container to test the CSS: + + .. code-block:: shell + + .. container:: + :class: class-name + +Tabs +~~~~ + +.. tabs:: + + .. tab:: This is tab one + + Content in tab 1 + + .. tab:: This is tab two + + Content in tab 2 + +Header 1 +-------- + +This is content under a level 1 header. The header includes an +anchor tag for linking. The table of contents for this page is +configured to display up to 2 header levels. The header title should +display in the right hand TOC. + +Header 2 +~~~~~~~~ + +This is content under a level 2 header. The header includes an anchor tag +for linking. The table of contents for this page is configured to display up +to 2 header levels. The header title should display in the right hand TOC + +Header 3 +++++++++ + +This is content under a level 3 header. The header includes an anchor tag +for linking. The table of contents for this page is configured to display up to +2 header levels. The header title should *not* display in the right hand TOC. + +Header 4 +======== + +This is content under a level 4 header. The header includes an anchor tag +for linking. The table of contents for this page is configured to display up to +2 header levels. The header title should *not* display in the right hand TOC. + +Admonitions +----------- + +The MinIO documentation uses the following admonition types. +Admonition HTML code resembles the following: + +.. code-block:: shell + +

+
+ +The additional class is set when defining the admonition and can be +any arbitrary string. Sphinx has defaults around ``warning``, +``note``, and ``custom``. + +Note Admonition +~~~~~~~~~~~~~~~ + +The note admonition renders as the following: + +.. note:: + + This text is in the note body. It includes some + ``monospaced``, **bold**, and *italics*. + + This is a :doc:`link ` to another page in the documentation. + + This is a `link `__ to an external page. + +You can set custom text for the note title: + +.. admonition:: Custom title with ``monospaced`` text + :class: note + + This text is in the note body. It includes some + ``monospaced``, **bold**, and *italics*. + + This is a :doc:`link ` to another page in the documentation. + + This is a `link `__ to an external page. + +Important Admonition +~~~~~~~~~~~~~~~~~~~~ + +The important admonition renders as follows: + +.. important:: + + This text is in the important body. It includes some + ``monospaced``, **bold**, and *italics*. + + This is a :doc:`link ` to another page in the documentation. + + This is a `link `__ to an external page. + + +You can set custom text for the important title: + +.. admonition:: This is the important title with ``monospaced`` text + :class: important + + This text is in the important body. It includes some + ``monospaced``, **bold**, and *italics*. + + This is a :doc:`link ` to another page in the documentation. + + This is a `link `__ to an external page. + +Warning Admonition +~~~~~~~~~~~~~~~~~~ + +The warning admonition renders as follows: + +.. warning:: + + This text is in the warning body. It includes some + ``monospaced``, **bold**, and *italics*. + + This is a :doc:`link ` to another page in the documentation. + + This is a `link `__ to an external page. + + +You can set custom text for the warning title: + +.. admonition:: This is the warning title with ``monospaced`` text + :class: warning + + This text is in the warning body. It includes some + ``monospaced``, **bold**, and *italics*. + + This is a :doc:`link ` to another page in the documentation. + + This is a `link `__ to an external page. + +Generic Admonition +~~~~~~~~~~~~~~~~~~ + +The generic admonition can apply any arbitrary class. This may be +useful if we want to display an admonition using very specific designs. + + +.. admonition:: admonition-title + :class: class-name + + This text is in the admonition body. It includes some + ``monospaced``, **bold**, and *italics*. + + This is a :doc:`link ` to another page in the documentation. + + This is a `link `__ to an external page. + +Lists +----- + +List Table +~~~~~~~~~~ + +Sphinx has special markup for producing clean tables, vs ascii-style table +definitions. + +The following ``.. list-table`` has a single header row and multiple columns: + +.. list-table:: + :header-rows: 1 + :widths: 25 25 25 25 + :width: 100% + + * - Row Title 1 + - Row Title 2 + - Row Title 3 + - Row Title 4 + + * - Column Item 1 + - Column Item 2 + - Column Item 3 + - Column Item 4 + + * - Column Item 1 + - Column Item 2 + - Column Item 3 + - Column Item 4 + + * - Column Item 1 + - Column Item 2 + - Column Item 3 + - Column Item 4 + +The following ``.. list-table`` uses a stub column, where the first column +contains the "header" or title: + +.. list-table:: + :stub-columns: 1 + :widths: 25 25 25 25 + :width: 100% + + * - Row Title 1 + - Column Item 1 + - Column Item 2 + - Column Item 3 + + * - Row Title 2 + - Column Item 1 + - Column Item 2 + - Column Item 3 + + * - Row Title 3 + - Column Item 1 + - Column Item 2 + - Column Item 3 + + * - Row Title 4 + - Column Item 1 + - Column Item 2 + - Column Item 3 + +Bullets and Numbered Lists +~~~~~~~~~~~~~~~~~~~~~~~~~~ + +This is a bullet list: + +- Item A +- Item B + - Item B.1 + - Item B.2 +- Item C + - Item C.1 + - Item C.2 + - Item C.3 + - Item C.3.1 + - Item C.3.2 + +This is a numbered list: + +1) Item A + +2) Item B + + 1) Item B.1 + + 2) Item B.2 + +3) Item C + + 1) Item C.1 + + 2) Item C.2 + + 3) Item C.3 + + 1) Item C.3.1 + + 2) Item C.3.2 + +Definition Lists +~~~~~~~~~~~~~~~~ + +Sphinx markup includes syntax for producing a Description List and +various Description Details. These typically are *not* anchored, so their +usefulness is somewhat limited. They can be a nice way of creating visually +distinct lists for quick scrolling and view. They are used frequently +in the reference documentation. + +Description List Title 1 + This is the description body for this title. + +Description List Title 2 + This is the description body for this title. + +Description List Title 3 + This is the description body for this title. + +Reference Definition +-------------------- + +Sphinx supports creating customized reference-type directives. We use +several throughout the docs. The following section includes some example +definitions. The initial table links to each definition. + +- :mc:`foo` +- :mc-cmd:`foo bar` +- :mc-cmd-option:`foo bar baz` +- :data:`foo` +- :data:`foo.bar` + + +.. mc:: foo + +There's actually a top-level definition here for linking, but not +for display. This is intentional (For now). + +.. mc-cmd:: bar + :fullpath: + + Used for defining CLI commands. + + .. mc-cmd:: bin + + Used for defining various arguments to a CLI command + + .. mc-cmd:: baz + :option: + + Used for defining an option to a CLI command + +.. data:: foo + + A generic bit of data we can reference. + + .. data:: bar + + These are nested and linked. \ No newline at end of file