diff --git a/docs/assets/scss/docs-common.scss b/docs/assets/scss/docs-common.scss index cbc7e47..e50e466 100644 --- a/docs/assets/scss/docs-common.scss +++ b/docs/assets/scss/docs-common.scss @@ -33,4 +33,5 @@ @import "docs-common/code"; @import "docs-common/snackbar"; @import "docs-common/tooltip"; +@import "docs-common/external-link"; @import "docs-common/anchor-icon"; diff --git a/docs/assets/scss/docs-common/_external-link.scss b/docs/assets/scss/docs-common/_external-link.scss new file mode 100644 index 0000000..e1c9ccd --- /dev/null +++ b/docs/assets/scss/docs-common/_external-link.scss @@ -0,0 +1,53 @@ +/*! + * Copyright 2025, TeamDev. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Redistribution and use in source and/or binary forms, with or without + * modification, must retain the above copyright notice and the following + * disclaimer. + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS + * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT + * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR + * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT + * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, + * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT + * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, + * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY + * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT + * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE + * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + */ + +.external-link { + white-space: nowrap; + + &:after { + content: '\2192'; + font-weight: 300; + width: 8px; + height: 8px; + overflow: hidden; + text-align: right; + line-height: 6px; + text-indent: -11px; + opacity: .8; + transform: rotate(-45deg); + transition: opacity .16s ease-in; + vertical-align: super; + font-size: smaller; + text-decoration: none; + display: inline-block; + } + + &:hover { + &:after { + color: inherit; + } + } +} diff --git a/docs/assets/scss/docs/modules/_article-text.scss b/docs/assets/scss/docs/modules/_article-text.scss index 0944597..95c53ba 100644 --- a/docs/assets/scss/docs/modules/_article-text.scss +++ b/docs/assets/scss/docs/modules/_article-text.scss @@ -38,34 +38,6 @@ color: $link-hover-color; text-decoration: underline; } - - &.external-link { - white-space: nowrap; - - &:after { - content: '\2192'; - font-weight: 300; - width: 8px; - height: 8px; - overflow: hidden; - text-align: right; - line-height: 6px; - text-indent: -11px; - opacity: .6; - transform: rotate(-45deg); - transition: opacity .16s ease-in; - vertical-align: super; - font-size: smaller; - text-decoration: none; - display: inline-block; - } - - &:hover { - &:after { - color: $second-brand-color; - } - } - } } ol, ul, li { diff --git a/docs/assets/scss/docs/modules/_diagram.scss b/docs/assets/scss/docs/modules/_diagram.scss index 9668f0a..78ac6b1 100644 --- a/docs/assets/scss/docs/modules/_diagram.scss +++ b/docs/assets/scss/docs/modules/_diagram.scss @@ -24,6 +24,8 @@ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ +$diagram-content-text-size: 15px; + .diagram-box { margin: 24px 0 32px; } @@ -43,6 +45,14 @@ } } +.diagram-actions { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 24px; + margin-bottom: 32px; +} + .full-screen-preview { font-family: $main-font; @@ -50,6 +60,13 @@ padding: 24px 24px 16px; border-bottom: 1px solid rgba(0, 0, 0, .12); + .preview-text-container { + display: flex; + align-items: flex-end; + justify-content: space-between; + flex-wrap: wrap; + } + .preview-title { font-size: 1.25rem; font-weight: 700; @@ -60,13 +77,17 @@ } .preview-subtitle { - font-size: 15px; + font-size: $diagram-content-text-size; color: $text-color; line-height: 1.6; margin: 8px 0 16px; max-width: 500px; } + .download-pdf-link { + margin-bottom: 16px; + } + .close-btn-wrapper { float: right; @@ -101,14 +122,35 @@ } } -p.full-screen-link { - margin-bottom: 24px; +.diagram-link { + display: flex; + align-items: center; + width: max-content; + font-family: $main-font; + font-size: $diagram-content-text-size; + color: $link-color; i { - margin-right: 8px; + font-size: 18px; + margin-right: 10px; + + &.icon-pdf { + margin-right: 8px; + + &:before { + font-size: 22px; + margin-left: -3px; + } + } } - span { - font-size: 15px; + &:hover, + &:focus { + color: $link-hover-color; + text-decoration: none !important; + + span { + text-decoration: underline; + } } } diff --git a/docs/content/docs/1/introduction/architecture.md b/docs/content/docs/1/introduction/architecture.md index fdff314..8bf50a8 100644 --- a/docs/content/docs/1/introduction/architecture.md +++ b/docs/content/docs/1/introduction/architecture.md @@ -15,14 +15,21 @@ with only some of them are not shaded on the diagram. The rest is handled by the framework. Click on a component to navigate to its definition from the -[Concepts](docs/introduction/concepts/) page. +[Concepts](docs/introduction/concepts/) page.
-

- - - View full screen - -

+
+{{< diagram-link + label="View full screen" + icon_class="far fa-expand" + url="docs/introduction/diagrams/spine-architecture-diagram-full-screen/" >}} + +{{< diagram-link + label="Download PDF" + icon_class="icon-pdf" + url="docs/introduction/diagrams/Spine-Architecture-Diagram.pdf" + is_external="true" + class="download-pdf-link" >}} +
{{< read-relative-asset "diagrams/spine-architecture-diagram.svg" >}}
diff --git a/docs/content/docs/1/introduction/diagrams/Spine-Architecture-Diagram.pdf b/docs/content/docs/1/introduction/diagrams/Spine-Architecture-Diagram.pdf new file mode 100644 index 0000000..6efcbe0 Binary files /dev/null and b/docs/content/docs/1/introduction/diagrams/Spine-Architecture-Diagram.pdf differ diff --git a/docs/content/docs/1/introduction/diagrams/spine-architecture-diagram-full-screen.html b/docs/content/docs/1/introduction/diagrams/spine-architecture-diagram-full-screen.html index c61ba75..0dd728a 100644 --- a/docs/content/docs/1/introduction/diagrams/spine-architecture-diagram-full-screen.html +++ b/docs/content/docs/1/introduction/diagrams/spine-architecture-diagram-full-screen.html @@ -13,11 +13,19 @@
-

Application Architecture

-

This diagram shows - all server-side components - of a cloud application. When developing with Spine, you will be interacting with - some of them.

+

Application Architecture

+
+

This diagram shows + all server-side components + of a cloud application. When developing with Spine, you will be interacting with + some of them.

+ {{< diagram-link + label="Download PDF" + icon_class="icon-pdf" + url="docs/introduction/diagrams/Spine-Architecture-Diagram.pdf" + is_external="true" + class="download-pdf-link" >}} +
diff --git a/docs/layouts/_shortcodes/diagram-link.html b/docs/layouts/_shortcodes/diagram-link.html new file mode 100644 index 0000000..11398d0 --- /dev/null +++ b/docs/layouts/_shortcodes/diagram-link.html @@ -0,0 +1,19 @@ +{{- /* +Renders the diagram link with an icon. +*/ -}} + +{{ $label := .Get "label" }} +{{ $iconClass := .Get "icon_class" }} +{{ $url := .Get "url" }} +{{ $isExternal := .Get "is_external" | default false }} +{{ $class := .Get "class" }} + + + {{ with $iconClass }} + + {{ end }} + + {{ $label }} +