feat(docs): add quick tutorials articles

refactor(docs): fix links and badge

docs/_static/mdsanima.css

@@ -8,6 +8,7 @@
     --color-mdsanima-lime-600: #65A30D;
     --color-mdsanima-teal-500: #14B8A6;
     --color-mdsanima-teal-600: #0D9488;
+    --color-mdsanima-teal-700: #0F766E;
     --color-mdsanima-teal-800: #115E59;
     --color-mdsanima-orange-500: #F97316;
     --color-mdsanima-red-500: #EF4444;
@@ -21,25 +22,20 @@
     display: none;
 }
 
-/* middle content */
-/* .content {
-    width: 46em;
-} */
-
-/* sidebar right and left */
-/* .sidebar-container, .toc-drawer {
-    width: 16em;
-} */
-
 /* no line search */
 .sidebar-search {
     border-bottom: 0px;
     border-top: 0px;
 }
 
+/* brand text size */
+.sidebar-brand-text {
+    font-size: 1.0rem;
+}
+
 /* colors and fonts */
 h1, h2, h3, h4 {
-    color: var(--color-mdsanima-sky-500);
+    color: var(--color-mdsanima-teal-500);
 }
 h2, h3, h4 {
     font-family: monospace;
@@ -66,6 +62,7 @@ body:not([data-theme=light]) {
     --color-highlight-on-target: var(--color-mdsanima-code); /* target click */
     --sd-color-primary-highlight: var(--color-mdsanima-sky-800); /* badge link text hover */
     --color-admonition-title--seealso: var(--color-mdsanima-teal-500); /* color admonition */
+    --color-sidebar-link-text--top-level: var(--color-mdsanima-sky-500); /* color link sidebar */
 }
 
 /* code block python colors */
@@ -87,7 +84,7 @@ a {
     text-decoration: none;
 }
 a:hover {
-    color: var(--color-mdsanima-teal-800);
+    color: var(--color-mdsanima-teal-700);
 }
 
 /* code all */
@@ -154,31 +151,6 @@ p code.literal {
     border-color: var(--color-mdsanima-red-500) !important;
 }
 
-/* brand text size */
-.sidebar-brand-text {
-    font-size: 1.0rem;
-}
-
-/* change icon color when active installation and tutorials */
-:is(h1 :is(.sd-octicon-organization, .sd-octicon-desktop-download, .sd-octicon-mortar-board, .sd-octicon-telescope), .sidebar-tree .current>.reference :is(.sd-octicon-organization, .sd-octicon-desktop-download, .sd-octicon-mortar-board, .sd-octicon-telescope)) {
-    fill: var(--color-mdsanima-teal-500);
-}
-
-/* change icon color when active python modules */
-:is(h1 :is(.sd-octicon-beaker, .sd-octicon-file-code), .sidebar-tree .current>.reference :is(.sd-octicon-beaker, .sd-octicon-file-code)) {
-    fill: var(--color-mdsanima-teal-500);
-}
-
-/* change icon color when active terminal commands */
-:is(h1 :is(.sd-octicon-terminal, .sd-octicon-file-binary), .sidebar-tree .current>.reference :is(.sd-octicon-terminal, .sd-octicon-file-binary)) {
-    fill: var(--color-mdsanima-teal-500);
-}
-
-/* change icon color when active project */
-:is(h1 :is(.sd-octicon-plug, .sd-octicon-rocket, .sd-octicon-workflow, .sd-octicon-checklist, .sd-octicon-law), .sidebar-tree .current>.reference :is(.sd-octicon-plug, .sd-octicon-rocket, .sd-octicon-workflow, .sd-octicon-checklist, .sd-octicon-law)) {
-    fill: var(--color-mdsanima-teal-500);
-}
-
 /* animation on click */
 :is(h1 .sd-octicon, .sidebar-tree .current-page>.reference .sd-octicon) {
     animation: 0.5s ease-out 0s 1 normal none running sd-slide-from-left;
@@ -191,12 +163,10 @@ p code.literal {
     font-size: var(--font-size--small);
 }
 
-/* fix icon rotate */
-.related-pages a.prev-page svg.sd-octicon {
-    transform: rotate(0deg);
-}
-
-/* remove icon on related pages */
-.related-pages svg {
+/* remove icon on related pages and toctree */
+.related-pages svg, .toctree-wrapper svg {
     display: none;
 }
+.related-pages code.literal {
+    padding: 0%;
+}

docs/commands/converts.md

@@ -12,26 +12,20 @@ the same value on calling selected convert method for the appropriate option,
 both shell command line script and *Python* module.
 
 - Python Function
-{bdg-link-primary-line}`frames_to_timecode
-<../../module/converts/#function-frames-to-timecode>` → Console Script
-{bdg-link-warning-line}`frames-to-timecode <#converts-frames-to-timecode>`
+[frames_to_timecode](../../modules/converts/#function-frames-to-timecode>) →
+Console Script [mdsanima-dev frames-to-timecode](#converts-frames-to-timecode)
 - Python Function
-{bdg-link-primary-line}`timecode_to_frames
-<../../module/converts/#function-timecode-to-frames>` → Console Script
-{bdg-link-warning-line}`timecode-to-frames <#converts-timecode-to-frames>`
+[timecode_to_frames](../../modules/converts/#function-timecode-to-frames) →
+Console Script [mdsanima-dev timecode-to-frames](#converts-timecode-to-frames)
 ```
 
-## Command {bdg-warning-line}`mdsanima-dev`
-
-Choose converts options which you want to use.
-
-### Converts {bdg-warning-line}`frames-to-timecode`
+## CONVERTS `frames-to-timecode`
 
 ```{eval-rst}
 .. autofunction:: mdsanima_dev.utils.converts.shell_frames_to_timecode
 ```
 
-### Converts {bdg-warning-line}`timecode-to-frames`
+## CONVERTS `timecode-to-frames`
 
 ```{eval-rst}
 .. autofunction:: mdsanima_dev.utils.converts.shell_timecode_to_frames

docs/commands/index.md

@@ -1,11 +1,15 @@
-# {octicon}`terminal;1em;sd-text-secondary`{bdg-warning-line}`TERMINAL COMMANDS`
+# {octicon}`terminal;1em;sd-text-secondary` `TERMINAL COMMANDS`
 
-## Console Scripts
+## CONSOLE `SCRIPTS`
 
 This shell console script options allowing you to converting selected function
 directly in command line in the terminal window like *bash*, *zsh*,
 *PowerShell* and more.
 
+## COMMAND `mdsanima-dev`
+
+You can choose options which you want to use.
+
 ```{toctree}
 :maxdepth: 3
 

docs/development/changelog.md

@@ -1,2 +1,2 @@
-```{include} ../CHANGELOG.md
+```{include} ../../CHANGELOG.md
 ```

docs/development/index.md

@@ -1,11 +1,13 @@
-# {octicon}`rocket;1em;sd-text-secondary`{bdg-danger-line}`DEVELOPMENT`
+# {octicon}`rocket;1em;sd-text-secondary` `DEVELOPMENT`
 
-## Development Help
+## DEVELOPMENT `HELP`
 
 Helping instruction for development workflow and release deployment.
 
 ```{toctree}
 :maxdepth: 3
 
 workflow
+changelog
+license
 ```

docs/development/license.md

@@ -1,4 +1,4 @@
-# {octicon}`law;1em;sd-text-secondary`{bdg-danger-line}`LICENSE`
+# {octicon}`law;1em;sd-text-secondary` `LICENSE`
 
-```{include} ../LICENSE
+```{include} ../../LICENSE
 ```

docs/development/workflow.md

@@ -2,39 +2,41 @@
 
 Instruction steps how to implement the release version and documentation site.
 
-## Python Package Coding
+## CODING `PYTHON PACKAGE`
 
-For [Python][python] coding we're using [Visual Studio Code][vscode] and we
-love this editor so much. Editor configuration setup is defined in
-`.editorconfig` and `pyproject.toml` file, we use `black` and `isort`
-configuration defined in this file.
+For [Python {octicon}`link-external;0.8em`][python] coding we're using
+[Visual Studio Code {octicon}`link-external;0.8em`][vscode] and we love this
+editor so much. Editor configuration setup is defined in `.editorconfig` and
+`pyproject.toml` file, we use `black` and `isort` configuration defined in this
+file.
 
 Before starting writing code make sure to create **isolated environment** in
 your local system typing `virtualenv .venv` and activating
 `source .venv/bin/activate` then install requirements dependencies typing
 `pip install -r docs/requirements-dev.txt` in the terminal.
 
-### Add New Module
+### ADD `NEW MODULE`
 
-Write a new module to an existing package. Use the [black][black] code
-formatter. We always try to write *Python* code with limit all lines to a
-**maximum of 79 characters**. In addition, we try to keep the documentation and
-the `.md` markdown files according to this specification, not to exceed this
-limit as well. In some cases, unfortunately, this cannot be avoided, such as
-pasting long links.
+Write a new module to an existing package. Use the
+[black {octicon}`link-external;0.8em`][black] code formatter. We always try to
+write *Python* code with limit all lines to a **maximum of 79 characters**. In
+addition, we try to keep the documentation and the `.md` markdown files
+according to this specification, not to exceed this limit as well. In some
+cases, unfortunately, this cannot be avoided, such as pasting long links.
 
 ```{important}
-Please check the official [PEP 8 - Style Guide for Python Code][pep]
+Please check the official
+[PEP 8 - Style Guide for Python Code {octicon}`link-external;0.8em`][pep]
 specification on section maximum line length.
 ```
 
-### Add Documentation
+### ADD `DOCUMENTATION`
 
 After writing the new module, write documentation in the `.py` file and in the
 `docs` folder, add the appropriate `.md` files along with the **Sphinx**
 directives for generate documentation site.
 
-### Build Package
+### BUILD `PACKAGE`
 
 We just need to create an installable *Python* package, type in to terminal:
 
@@ -57,15 +59,18 @@ Now you're ready to [Build Documentation](#build-documentation) site localy
 and upload your distributions to [PyPI](#send-to-pypi) using `Twine`.
 
 ```{tip}
-If you have trouble, please check [Packaging Python Projects][pack] tutorial
-and [Packaging and Distributing Projects][dist] guides on official *Python*
-site.
+If you have trouble, please check
+[Packaging Python Projects {octicon}`link-external;0.8em`][pack] tutorial and
+[Packaging and Distributing Projects {octicon}`link-external;0.8em`][dist]
+guides on official *Python* site.
 ```
 
-## Build Documentation
+## BUILD `DOCUMENTATION`
 
-Documentation are created automatically using [Sphinx][sphinx] based on
-[Python][python] files and the information they contain written in comments.
+Documentation are created automatically using
+[Sphinx {octicon}`link-external;0.8em`][sphinx] based on
+[Python {octicon}`link-external;0.8em`][python] files and the information they
+contain written in comments.
 
 ```{warning}
 This options build documentaiton localy only for testing. Directory
@@ -74,7 +79,7 @@ for build documentation deployments.
 ```
 
 The first thing you need to do is [Add New Module](#add-new-module) along
-with the documentation. Then install it using the [Wheel](#build-package)
+with the documentation. Then install it using the [wheel](#build-package)
 option and finally build the documentation typing in the terminal:
 
 ```shell
@@ -106,10 +111,11 @@ specific interface use the `--bind 127.0.0.1` options.
 Now just go to your browser and enter the
 [localhost:8080](http://localhost:8080/) address.
 
-## Automate Release
+## AUTOMATE `RELEASE`
 
 Automate versioning and CHANGELOG generation, with
-[Semantic Versioning][semver] and [Conventional Commits][convcommits].
+[Semantic Versioning {octicon}`link-external;0.8em`][semver] and
+[Conventional Commits {octicon}`link-external;0.8em`][convcommits].
 Generate changelogs and release notes from a project's commit messages and
 metadata.
 
@@ -119,8 +125,8 @@ changelog file for the project and tracking version on the *Python* package
 based on commit messages.
 
 ```{important}
-Please check the [Commit Guide][convcommits] site for proper commit message
-to generate CHANGELOG file.
+Please check the [Commit Guide {octicon}`link-external;0.8em`][convcommits]
+site for proper commit message to generate CHANGELOG file.
 ```
 
 For some reason that features are only for the development mode not allow
@@ -140,7 +146,7 @@ standard-version release
 Command above for create release run script defined in `package.json` file on
 script section `standard-version --commit-all --sign` which means bumping
 version, adding changes in changelog, commiting all files and adding tag with
-[Signing Commits][gpg] using GPG keys.
+[Signing Commits {octicon}`link-external;0.8em`][gpg] using GPG keys.
 
 For checking if everything is ok, type in the terminal:
 
@@ -172,13 +178,13 @@ standard-version --skip.bump --skip.changelog --commit-all --sign
 
 After executing this command all changed files will be committed with the
 current version and new tag will be created. Commiting `package.json`,
-`__init__.py`, `CHANGELOG.md` and other file with [Signed Commits][gpg]
-approval with GPG keys.
+`__init__.py`, `CHANGELOG.md` and other file with
+[Signed Commits {octicon}`link-external;0.8em`][gpg] approval with GPG keys.
 
-## Send to PyPI
+## SEND `TO PYPI`
 
 We're almost done. If all steps is done, finally you can uploading your project
-to [PyPI](https://pypi.org/project/mdsanima-dev).
+to [PyPI {octicon}`link-external;0.8em`][pypi].
 
 When you ran the command to create your distribution, a new directory `dist`
 was created under your project's root directory. That's where you'll find your
@@ -191,25 +197,26 @@ twine check dist/*
 ```
 
 Before releasing on main PyPI repo, you might prefer training with the
-[TestPyPI](https://test.pypi.org) which is cleaned on a semi regular
-basis.
+[TestPyPI {octicon}`link-external;0.8em`](https://test.pypi.org) which is
+cleaned on a semi regular basis.
 
 Send to `TestPyPI` using `Twine`, type in the terminal:
 
 ```shell
 twine upload --repository testpypi dist/*
 ```
 
-Then go to [test.pypi.org](https://test.pypi.org/project/mdsanima-dev)
-site and check the package, if everything is ok, install it using `TestPyPI`
-with `pip`. You can tell `pip` to download packages from `TestPyPI` instead of
-`PyPI` by specifying the `--index-url` flag, type in the terminal:
+Then go to [test.pypi.org {octicon}`link-external;0.8em`][pypitest] site and
+check the package, if everything is ok, install it using `TestPyPI` with `pip`.
+You can tell `pip` to download packages from `TestPyPI` instead of `PyPI` by
+specifying the `--index-url` flag, type in the terminal:
 
 ```shell
 python3 -m pip install --index-url https://test.pypi.org/simple/ mdsanima-dev
 ```
 
-Finally we can send our package to [pypi.org](https://pypi.org/) main site.
+Finally we can send our package to
+[pypi.org {octicon}`link-external;0.8em`](https://pypi.org/) main site.
 
 Send to `PyPI` using `Twine`, type in the terminal:
 
@@ -218,8 +225,10 @@ twine upload dist/*
 ```
 
 ```{tip}
-If you have trouble, please check [Using TestPyPI][testpypi] guides and
-[Uploading your Project to PyPI][sendpypi] guides on official *Python* site.
+If you have trouble, please check
+[Using TestPyPI {octicon}`link-external;0.8em`][testpypi] guides and
+[Uploading your Project to PyPI {octicon}`link-external;0.8em`][sendpypi]
+guides on official *Python* site.
 ```
 
 [python]: https://www.python.org/
@@ -234,3 +243,5 @@ If you have trouble, please check [Using TestPyPI][testpypi] guides and
 [gpg]: https://docs.github.com/en/github-ae@latest/authentication/managing-commit-signature-verification/signing-commits
 [testpypi]: https://packaging.python.org/en/latest/guides/using-testpypi/
 [sendpypi]: https://packaging.python.org/en/latest/guides/distributing-packages-using-setuptools/#uploading-your-project-to-pypi
+[pypi]: https://pypi.org/project/mdsanima-dev
+[pypitest]: https://test.pypi.org/project/mdsanima-dev