-
-
Improve the Documentation
-
We hope you have enjoyed reading the Neos documentation. Do you want to help extending this documentation?
-
-
-
`
}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Footer/Footer.scss b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Footer/Footer.scss
index 909c26f2..8a4dd70b 100755
--- a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Footer/Footer.scss
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Footer/Footer.scss
@@ -1,29 +1,56 @@
+@use "../../../../public/Frontend/scss/screen";
+
.main-footer {
- margin-top: 40px;
- background-color: transparent;
- border-top: 1px solid $border-color;
+ background-color: #f9fcff;
+ border-top: 1px solid var(--c-divider-light);
font-size: 0.9rem;
color: inherit;
+ h5 {
+ color: var(--c-text-light);
+ font-size: 1rem;
+ }
+
+ p {
+ color: var(--c-text-light);
+ }
+
.footer-copyright {
- color: inherit;
+ color: var(--c-text-light);
background-color: transparent;
font-style: italic;
}
- a {
- @extend .grey-text.text-darken-2;
+ &.page-footer {
+ padding-top: 40px;
+ padding-bottom: 20px;
+ }
+}
- &:active,
- &:hover,
- &:focus {
- color: map-get($brand-colors, primary) !important;
- }
- }
+.footer-grid {
+ display: grid;
+ place-content: center;
+ gap: 40px;
+ @include screen.xl {
+ grid-template-columns: 2fr 3fr;
+ }
+ margin: 0 auto 40px;
+}
- .container {
- @media #{$medium-and-down} {
- text-align: center;
- }
- }
-}
\ No newline at end of file
+.socials {
+ display: flex;
+ list-style: none;
+ padding-left: 0;
+ margin-bottom: 30px;
+ gap: 1.5rem 2rem;
+ flex-wrap: wrap;
+
+ li a {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ &:hover {
+ text-decoration: none;
+ }
+ }
+}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Header/Header.fusion b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Header/Header.fusion
index 08a7a98e..20cabf93 100755
--- a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Header/Header.fusion
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Header/Header.fusion
@@ -1,38 +1,55 @@
prototype(Neos.DocsNeosIo:Component.Header) < prototype(Neos.Fusion:Component) {
- navigationRoot = false
homeLink = Neos.Neos:NodeUri {
node = ${site}
}
- logoUri = Neos.Fusion:ResourceUri {
- path = 'resource://Neos.DocsNeosIo/Public/Frontend/img/neos_primary.svg'
+
+ sidebarOnlyMobile = false
+
+ logo = Neos.Fusion:ResourceUri {
+ path = "resource://Neos.DocsNeosIo/Public/Frontend/img/neos-logo-small.svg"
+ }
+
+ # rendering
+ @context {
+ startingPoint = ${this.startingPoint}
+ node = ${this.startingPoint}
+ renderCurrentPath = ${this.renderCurrentPath}
}
renderer = afx`
-
+
+
+
+
+
+
+
+
+
Neos Dev Docs
+
+
+
+
`
@cache {
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Header/Header.js b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Header/Header.js
old mode 100755
new mode 100644
index 2f55eb13..e13bcfc1
--- a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Header/Header.js
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Header/Header.js
@@ -1,19 +1,21 @@
-(function($) {
- let header = document.querySelector('.main-header');
- if(!header) {
- return;
- }
+(() => {
+ const sidebar = document.querySelector('.sidebar');
+ const sidebarButton = document.querySelector('.sidebar-button');
+ const sidebarBackdrop = document.querySelector('.sidebar-mobile-backdrop');
- // Detect touch screen and enable scrollbar if necessary
- function is_touch_device() {
- try {
- document.createEvent('TouchEvent');
- return true;
- } catch (e) {
- return false;
+ function toggleSidebar(open = undefined) {
+ sidebar.classList.toggle('open', open);
+ const expand = open ?? sidebarButton.getAttribute('aria-expanded') !== 'true';
+ sidebarButton.setAttribute('aria-expanded', expand ? 'true' : 'false');
+ sidebarButton.setAttribute('aria-label', expand ? 'close menu' : 'open menu');
+ if (expand) {
+ sidebar.focus();
}
}
- if (is_touch_device()) {
- $('.main-header #nav-mobile').css({ overflow: 'auto' });
- }
-})(jQuery);
\ No newline at end of file
+
+ document.body.addEventListener('keydown', event => event.key === 'Escape' && toggleSidebar(false));
+
+ sidebarButton.addEventListener('click', () => toggleSidebar());
+
+ sidebarBackdrop.addEventListener('click', () => toggleSidebar(false))
+})()
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Header/Header.scss b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Header/Header.scss
old mode 100755
new mode 100644
index b1e78dc8..e69de29b
--- a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Header/Header.scss
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Header/Header.scss
@@ -1,233 +0,0 @@
-.main-header {
-
- a.sidenav-trigger.top-nav {
- color: map-get($brand-colors, primary);
- }
-
- #logo-container {
- height: 57px;
- margin-bottom: 32px;
- }
-
- #front-page-logo {
- display: inline-block;
- height: 100%;
- pointer-events: none;
- }
-
- // custom styled sidebar
- ul.sidenav.sidenav-fixed {
- overflow: hidden;
- box-shadow: none;
- border-right: 1px solid $border-color;
-
- .neos-top-navigation + & {
- @media #{$medium-and-up} {
- top: $top-navigation-height;
- }
- }
-
- li.logo {
- text-align: center;
- margin-top: 32px;
- margin-bottom: 136px;
-
- @media #{$medium-and-down} {
- margin-top: 60px;
- }
-
- &:hover,
- #logo-container:hover {
- background-color: transparent;
- }
- }
-
- > li:last-child {
- margin-bottom: 40px;
- }
-
- li {
- line-height: 1;
-
- &.active > a {
- background-color: rgba(50, 50, 50, 0.03);
- }
-
- &.current {
- background-color: rgba(50, 50, 50, 0.03);
-
- > a {
- background-color: rgba(50, 50, 50, 0.06);
- }
- }
-
- a {
- line-height: 1.5;
- height: unset;
- padding: 0 30px;
- }
-
- .badge {
- margin-top: 0;
- background: map-get($brand-colors, primary);
- text-transform: uppercase;
- font-weight: 400;
- }
- }
-
- ul.collapsible-accordion {
- background-color: #fff;
-
- a.collapsible-header {
- padding: 0 30px;
- }
-
- .collapsible-body li a {
- font-weight: 400;
- padding: 0 37.5px 0 45px;
- }
- }
-
- // Only show scrollbar on hover
- &:hover {
- overflow-y: auto;
- overflow-y: overlay;
- -ms-overflow-style: -ms-autohiding-scrollbar;
- }
-
-
- @media #{$small-and-down} {
- border: 0;
- }
-
- .navigation-item {
- display: flex;
- flex-direction: column;
-
- .navigation-link {
- padding: 0.7rem 1.5rem;
- }
- &:first-child .navigation-link {
- padding-top: 1rem;
- }
-
- .navigation-item--level-2 {
- a {
- padding-left: 3rem;
- }
- }
-
- .navigation-item--level-3 {
- a {
- padding-left: 4rem;
- }
- }
-
- .navigation-item--level-4 {
- a {
- padding-top: 0.4rem;
- padding-bottom: 0.4rem;
- padding-left: 5rem;
- }
- }
- }
- }
-
- // Search
- #nav-mobile li.search {
- &:hover {
- background-color: #fff;
- }
-
- position: absolute;
- left: 0;
- right: 0;
- top: 160px;
- margin-top: 1px;
- padding: 1px 0 0 0;
- z-index: 2;
-
- .search-wrapper {
- &.focused .search-results:not(:empty) {
- border-bottom: 1px solid $border-color;
- }
-
- color: #777;
- margin-top: -1px;
- border-top: 1px solid $border-color;
- transition: margin 0.25s ease;
-
- .search-input {
- &:focus {
- outline: none;
- box-shadow: none;
- }
-
- color: #777;
- display: block;
- font-size: 16px;
- font-weight: 300;
- width: 100%;
- height: 62px;
- margin: 0;
- box-sizing: border-box;
- padding: 0 45px 0 30px;
- border: 0;
- }
-
- .search-button {
- position: absolute;
- top: 21px;
- right: 10px;
- cursor: pointer;
- border: 0;
- background: white;
-
- &:active,
- &:hover,
- &:focus {
- background: none;
- transform: scale(1.1);
- }
- }
- }
-
- .search-results {
- margin: 0;
- border-top: 1px solid $border-color;
- background-color: #fff;
-
- &:not(:empty) {
- border-bottom: 1px solid $border-color;
- }
-
- .progress {
- margin: 20px 15px;
- width: auto;
- }
- }
-
- .search-result {
- &:hover,
- &.focused {
- background-color: #eee;
- outline: none;
- }
-
- .title {
- font-size: 14px;
- font-weight: 300;
- white-space: nowrap;
- display: block;
- line-height: 44px;
- height: 44px;
- padding: 0 30px;
- }
-
- .highlight,
- .breadcrumbs {
- display: none;
- }
- }
- }
-}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Icon/Icon.fusion b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Icon/Icon.fusion
index 369c3f76..9482f6a0 100644
--- a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Icon/Icon.fusion
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Icon/Icon.fusion
@@ -6,35 +6,45 @@ prototype(Neos.DocsNeosIo:Component.Icon) < prototype(Neos.Fusion:Component) {
# If the link class is empty, we will detect the type from the given uri
fromLinkTypeUri = false
+ ariaLabel = null
+
# rendering
@context {
iconClass = ${this.iconClass}
fromLinkTypeUri = ${this.fromLinkTypeUri}
}
iconClassFinal = Neos.Fusion:Case {
+ overrideExternalLinkIcon {
+ condition = ${iconClass && iconClass == 'fas fa-external-link-alt'}
+ renderer = 'fas fa-external-link-square-alt'
+ }
hasClass {
condition = ${iconClass && iconClass != ''}
renderer = ${iconClass}
}
linkIsGithub {
- condition = ${String.startsWith(fromLinkTypeUri, 'https://github.com')}
+ condition = ${String.startsWith(fromLinkTypeUri, 'https://github.com/')}
renderer = ${'fab fa-github'}
}
+ linkIsYoutube {
+ condition = ${String.startsWith(fromLinkTypeUri, 'https://www.youtube.com/')}
+ renderer = ${'fab fa-youtube'}
+ }
linkIsDiscuss {
- condition = ${String.startsWith(fromLinkTypeUri, 'https://discuss.neos.io')}
+ condition = ${String.startsWith(fromLinkTypeUri, 'https://discuss.neos.io/')}
renderer = ${'fas fa-comments'}
}
fallbackByLinkType {
condition = ${fromLinkTypeUri}
renderer = Carbon.Link:Type {
link = ${fromLinkTypeUri}
- @process.convert = ${value=='external' ? 'fas fa-external-link-alt' : (value=='node' ? 'fas fa-link' : false)}
+ @process.convert = ${value=='external' ? 'fas fa-external-link-square-alt' : (value=='node' ? 'fas fa-link' : false)}
}
}
}
iconClassWithoutNamespace = ${String.replace(String.replace(String.replace(this.iconClass, 'fab ', ''), 'fas ', ''), 'fa ', '')}
iconNameFallback = ${String.firstLetterToUpperCase(String.replace(String.replace(this.iconClassWithoutNamespace, 'fa-', ''), '-', ' '))}
renderer = afx`
-
+
`
}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Layout/IframeLayout.fusion b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Layout/IframeLayout.fusion
new file mode 100755
index 00000000..04ac7776
--- /dev/null
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Layout/IframeLayout.fusion
@@ -0,0 +1,28 @@
+prototype(Neos.DocsNeosIo:Component.IframeLayout) < prototype(Neos.Neos:ContentComponent) {
+ authors = false
+ title = false
+ subtitle = false
+ content = ''
+ navCollection = false
+ fullwidth = false
+ tags = false
+ navbarRoot = false
+ sidebarRoot = false
+
+ sidebarOnlyMobile = false
+ localNav = true
+
+ renderer = afx`
+
+
+ {props.content}
+
+
+ `
+}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Layout/Layout.Default.fusion b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Layout/Layout.Default.fusion
deleted file mode 100755
index debe8403..00000000
--- a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Layout/Layout.Default.fusion
+++ /dev/null
@@ -1,94 +0,0 @@
-prototype(Neos.DocsNeosIo:Component.Layout.Default) < prototype(Neos.Neos:ContentComponent) {
- authors = false
- title = false
- subtitle = false
- content = ''
- navCollection = false
- fullwidth = false
- tags = false
- navigationRoot = false
- showSupportCall2Action = true
-
- @context.tags = ${this.tags}
- tagNotices = Neos.Fusion:Collection {
- collection = ${tags}
- itemName = 'node'
- itemRenderer = Neos.DocsNeosIo:Component.Notice {
- @if.hasTitle = ${String.trim(q(node).property('noticeTitle'))}
- type = ${q(node).property('noticeType')}
- title = ${q(node).property('noticeTitle')}
- content = ${q(node).property('noticeText')}
- }
- }
- prevNextNavigation = Neos.DocsNeosIo:Component.PrevNextNavigation {
- @if.showPrevNextNavigation = ${q(node).property('showPrevNextNavigation')}
- prevNode = ${q(documentNode).prevAll('[instanceof Neos.Neos:Document][_hidden != TRUE][_hiddenInIndex != TRUE][hideFromMainMenu != TRUE]').last().get(0)}
- nextNode = ${q(documentNode).nextAll('[instanceof Neos.Neos:Document][_hidden != TRUE][_hiddenInIndex != TRUE][hideFromMainMenu != TRUE]').get(0)}
-
- @cache {
- mode = 'cached'
- entryIdentifier.node = ${documentNode}
- entryTags {
- 1 = ${Neos.Caching.nodeTypeTag('Neos.Neos:Document', documentNode)}
- }
- }
- }
-
- renderer = afx`
-
-
-
-
-
-
-
-
-
{props.subtitle}
-
-
-
-
-
-
-
{props.subtitle}
-
-
-
-
-
Written by
- {Array.first(props.authors).label}
-
-
-
-
-
-
-
-
-
- {props.tagNotices}
- {props.content}
-
-
-
-
-
-
- {props.tagNotices}
- {props.content}
- {props.prevNextNavigation}
-
-
-
-
-
-
-
-
-
- `
-}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Layout/Layout.Default.scss b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Layout/Layout.Default.scss
deleted file mode 100755
index 2c63dec8..00000000
--- a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Layout/Layout.Default.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-
-#index-banner {
- border-bottom: 1px solid $border-color;
-
- @media #{$large-and-up} {
- // align with the search top border
- min-height: 162px;
- }
-
- .neos-top-navigation ~ main & {
- @media #{$medium-and-up} {
- margin-top: $top-navigation-height;
- }
- }
-
- .container {
- position: relative;
- }
-
- h1,
- .image-container {
- margin-top: 16px;
- }
-
- h4 {
- margin-bottom: 40px;
- line-height: 44px;
- color: rgba(0, 0, 0, 0.7);
- }
-
- @media #{$medium-and-up} {
- & > .container {
- width: 100%;
- }
- }
-
- @media #{$medium-and-down} {
- h1,
- .image-container {
- margin-top: 70px;
- }
- h4 {
- margin-bottom: 15px;
- }
- }
-
- @media #{$small-and-down} {
- h4 {
- margin-bottom: 0;
- }
- }
-}
-
-.profile-image {
- width: 200px;
- border-radius: 50%;
-}
-
-.fullwidth-layout {
- max-width: none;
-
- .neos-contentcollection > *:not(.docs-youtube):not(.docs-section),
- .authors,
- .docs-section > *:first-child { // spacing for the headline
- max-width: 960px;
- padding-left: 1.5rem;
- padding-right: 1.5rem;
- }
-
- .docs-youtube {
- &:first-child {
- margin-top: 0;
- }
- &:last-child {
- margin-bottom: -40px;
- }
- }
- .docs-section .docs-youtube {
- margin-top: 16px;
- margin-bottom: 16px;
- }
-}
-
-.support-call2action {
- overflow: hidden;
- background: #00adee;
- color: white;
- padding-left: 2rem !important;
- padding-right: 2rem !important;
- margin-bottom: 2rem !important;
-
- @media #{$small-and-down} {
- display: none;
- }
-
- .btn {
- padding: 0;
- background-color: $primary-color-light;
- margin-bottom: 2rem;
- }
-
- .btn__content {
- color: $secondary-color;
- padding-left: 0.5rem;
- padding-right: 0.5rem;
- }
-}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Layout/Layout.fusion b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Layout/Layout.fusion
new file mode 100755
index 00000000..11c39709
--- /dev/null
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Layout/Layout.fusion
@@ -0,0 +1,92 @@
+prototype(Neos.DocsNeosIo:Component.Layout) < prototype(Neos.Neos:ContentComponent) {
+ authors = false
+ title = false
+ subtitle = false
+ content = ''
+ navCollection = false
+ fullwidth = false
+ fullContent = false
+ tags = false
+ navbarRoot = false
+ sidebarRoot = false
+
+ sidebarOnlyMobile = false
+ localNav = true
+
+ @context.tags = ${this.tags}
+ tagNotices = Neos.Fusion:Loop {
+ items = ${tags}
+ itemName = 'node'
+ itemRenderer = Neos.DocsNeosIo:Component.Notice {
+ @if.hasTitle = ${String.trim(q(node).property('noticeTitle'))}
+ type = ${q(node).property('noticeType')}
+ title = ${q(node).property('noticeTitle')}
+ content = ${q(node).property('noticeText')}
+ }
+ }
+ prevNextNavigation = Neos.DocsNeosIo:Component.PrevNextNavigation {
+ @if.showPrevNextNavigation = ${q(node).property('showPrevNextNavigation')}
+ prevNode = ${q(documentNode).prevAll('[instanceof Neos.Neos:Document][_hidden != TRUE][_hiddenInIndex != TRUE][hideFromMainMenu != TRUE]').last().get(0)}
+ nextNode = ${q(documentNode).nextAll('[instanceof Neos.Neos:Document][_hidden != TRUE][_hiddenInIndex != TRUE][hideFromMainMenu != TRUE]').get(0)}
+
+ @cache {
+ mode = 'cached'
+ entryIdentifier.node = ${documentNode}
+ entryTags {
+ 1 = ${Neos.Caching.nodeTypeTag('Neos.Neos:Document', documentNode)}
+ }
+ }
+ }
+
+ renderer = afx`
+
+
+ {props.banner}
+
+
+
+ {props.tagNotices}
+ {props.content}
+
+
+
+
+
+
+
{props.title}
+
{props.subtitle}
+
+ {props.tagNotices}
+ {props.content}
+ {props.prevNextNavigation}
+
+
+
+
+
+
+
+ `
+}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Layout/Layout.scss b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Layout/Layout.scss
new file mode 100755
index 00000000..cb34fc72
--- /dev/null
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Layout/Layout.scss
@@ -0,0 +1,106 @@
+@use "../../../../public/Frontend/scss/screen";
+@use "../../../../public/Frontend/scss/helpers";
+
+.profile-image {
+ width: 200px;
+ border-radius: 50%;
+}
+
+.fullwidth-layout {
+ max-width: none;
+ flex-grow: 1;
+
+ .neos-contentcollection > *:not(.docs-youtube):not(.docs-section):not(.full):not(.jonnitto-prettyembed-wrapper),
+ .authors,
+ .docs-section > *:first-child { // spacing for the headline
+ max-width: var(--content-width);
+ padding: 0 var(--content-padding-x);
+ margin: auto;
+ }
+
+ .authors {
+ margin: 1rem auto;
+ }
+
+ .docs-youtube {
+ &:first-child {
+ margin-top: 0;
+ }
+ &:last-child {
+ margin-bottom: -40px;
+ }
+ }
+ .docs-section .docs-youtube {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
+
+ .fullwidth-header {
+ display: grid;
+ }
+}
+
+.main-container {
+ display: flow-root;
+ flex-grow: 1;
+ margin-bottom: 40px;
+}
+
+@include screen.xl {
+ .main-container.has-local-navigation {
+ display: grid;
+ grid-template-columns: 1fr 320px;
+ }
+}
+
+.main-content {
+ max-width: var(--content-width);
+ padding: 0 var(--content-padding-x);
+ margin: 0 auto;
+ width: 100%;
+}
+
+.spacing-wrapper {
+ max-width: var(--spacing-container-width);
+ padding: 0 var(--content-padding-x);
+ margin: 0 auto;
+ width: 100%;
+ @include screen.xl {
+ margin: auto;
+ }
+}
+
+.lead {
+ font-size: 1.35rem;
+}
+
+.content-section {
+ margin-bottom: 2rem;
+}
+
+.cookbook-title {
+ display: block;
+ background-color: var(--c-text);
+ color: white;
+ padding: 5px 10px;
+ @include helpers.neos-borders;
+}
+
+.banner {
+ display: grid;
+ place-content: center;
+ padding: 40px 1.5rem;
+ min-height: 300px;
+ background-color: #00adee;
+
+ h1 {
+ font-size: 2.5rem;
+ }
+
+ .cta-buttons {
+ margin-top: 20px;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
+ gap: 20px;
+ }
+}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/LocalNavigation/LocalNavigation.LevelRenderer.fusion b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/LocalNavigation/LocalNavigation.LevelRenderer.fusion
index eb835434..2e258f71 100644
--- a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/LocalNavigation/LocalNavigation.LevelRenderer.fusion
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/LocalNavigation/LocalNavigation.LevelRenderer.fusion
@@ -1,32 +1,22 @@
prototype(Neos.DocsNeosIo:Component.LocalNavigation.LevelRenderer) < prototype(Neos.Fusion:Component) {
- attributes = Neos.Fusion:Attributes
- collection = false
+ items = false
# rendering
- @context.collection = ${this.collection && this.collection.filter('[instanceof Neos.DocsNeosIo:Constraint.Content.LocalNavigation.Item]')}
- items = Neos.Fusion:Collection {
- collection = ${collection}
- itemName = 'node'
- itemRenderer = Neos.Fusion:Component {
- id = Neos.DocsNeosIo:Helper.StringToHash {
- value = ${q(node).property('title') || node.identifier}
- }
- title = ${q(node).property('title')}
- children = ${q(node).children()}
- renderer = afx`
+ filteredItems = ${props.items && props.items.filter('[instanceof Neos.DocsNeosIo:Constraint.Content.LocalNavigation.Item]')}
+ renderer = afx`
+
0}>On this page
+
`
}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/LocalNavigation/LocalNavigation.fusion b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/LocalNavigation/LocalNavigation.fusion
index 4193b5af..45ad2aeb 100644
--- a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/LocalNavigation/LocalNavigation.fusion
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/LocalNavigation/LocalNavigation.fusion
@@ -1,12 +1,14 @@
prototype(Neos.DocsNeosIo:Component.LocalNavigation) < prototype(Neos.Fusion:Component) {
- collection = false
+ items = false
renderer = afx`
-
-
-
- This navigation updates only after a reload.
-
+
`
}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/LocalNavigation/LocalNavigation.js b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/LocalNavigation/LocalNavigation.js
index f7a3d7e7..60ef9960 100644
--- a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/LocalNavigation/LocalNavigation.js
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/LocalNavigation/LocalNavigation.js
@@ -1,43 +1,17 @@
-(function($) {
- let localNav = $('.local-navigation');
- if(!localNav.length) {
- return;
- }
-
- function throttle(type, name, obj) {
- obj = obj || window;
- let running = false;
- const func = function() {
- if (running) { return; }
- running = true;
- requestAnimationFrame(function() {
- obj.dispatchEvent(new CustomEvent(name));
- running = false;
- });
- };
- obj.addEventListener(type, func);
- }
- /* init - you can init any event */
- throttle('resize', 'optimizedResize');
-
- // Floating-Fixed table of contents
- const indexBanner = $('#index-banner');
- const supportCall2action = $('.support-call2action');
- const toc = localNav.find('.table-of-contents');
- const footer = $('.main-footer');
- function alignLocalNavigation() {
- const topOffset = indexBanner.length ? $('#index-banner').outerHeight(true) : 0;
- const supportCall2actionOffset = supportCall2action.length ? supportCall2action.outerHeight(true) : 0;
- const tocHeight = toc.length ? toc.height() : 0;
- const footerOffset = footer.length ? footer.offset().top : 0;
- const bottomOffset = footerOffset - tocHeight;
-
- localNav.pushpin({
- top: topOffset + supportCall2actionOffset,
- bottom: bottomOffset
+(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => {
+ const id = entry.target.getAttribute('id');
+ const target = document.querySelector(`.toc li a[href="#${id}"]`)
+ target?.classList.toggle('active', entry.intersectionRatio > .1);
});
- }
+ }, {
+ threshold: .1,
+ rootMargin: '-58px 0px 0px'
+ });
- requestAnimationFrame(alignLocalNavigation);
- window.addEventListener('optimizedResize', alignLocalNavigation);
-})(jQuery);
+ // Track all sections that have an `id` applied
+ document.querySelectorAll('.content-section[id],.content-navigation[id]').forEach((section) => {
+ observer.observe(section);
+ });
+})()
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/LocalNavigation/LocalNavigation.scss b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/LocalNavigation/LocalNavigation.scss
index e89be7ca..d5524c26 100644
--- a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/LocalNavigation/LocalNavigation.scss
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/LocalNavigation/LocalNavigation.scss
@@ -1,30 +1,45 @@
+@use "../../../../public/Frontend/scss/screen";
+
.local-navigation {
- position: relative;
- margin-top: 42px;
+ display: none;
+ @include screen.xl {
+ display:block;
+ }
+ height: auto!important;
- &.pin-bottom {
- margin-top: 84px;
- }
+ .toc {
+ top: calc(var(--header-height) + 32px);
+ position: sticky;
+
+ ul {
+ list-style: none;
+ padding-left: 2px;
+ }
- .table-of-contents {
- margin-top: 0;
- padding-top: 48px;
+ li {
+ line-height: normal;
+ }
a {
+ display: block;
+ padding: .5rem 0 .5rem .5rem;
+ border-left: 2px solid #eee;
+
&.active {
- color: rgba(0, 0, 0, 0.8);
- border-left: 2px solid map-get($brand-colors, primary);
+ color: var(--c-accent-dark);
}
+ &.active,
&:not(.active):hover {
- border-left: 1px solid map-get($brand-colors, primary);
+ border-left: 2px solid var(--c-brand);
}
- color: rgba(0, 0, 0, 0.55);
- font-weight: 400;
- }
- ul {
- padding-left: 10px;
+ &:hover {
+ color: var(--c-brand);
+ text-decoration: none;
+ }
+
+ color: var(--c-accent);
}
}
}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBar.fusion b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBar.fusion
new file mode 100644
index 00000000..91872473
--- /dev/null
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBar.fusion
@@ -0,0 +1,54 @@
+prototype(Neos.DocsNeosIo:Component.NavBar) < prototype(Neos.Fusion:Component) {
+ logo = Neos.Fusion:ResourceUri {
+ path = "resource://Neos.DocsNeosIo/Public/Frontend/img/neos-logo-small.svg"
+ }
+
+ # rendering
+ @context {
+ startingPoint = ${this.startingPoint}
+ node = ${this.startingPoint}
+ renderCurrentPath = ${this.renderCurrentPath}
+ }
+
+ @context.navBarNodeDepth = ${this.node.depth - this.startingPoint.depth}
+ node = ${node}
+ itemTitle = ${q(node).property('titleOverride') || q(node).property('title')}
+ itemStatus = ${q(node).property('status')}
+ itemClass = Neos.Fusion:DataStructure {
+ base = 'navigation-item'
+ level = ${'navigation-item--level-' + navBarNodeDepth}
+ current = 'current'
+ current.@if.isCurrent = ${node == documentNode}
+ active = 'active'
+ active.@if.isActive = ${node == documentNode || (navBarNodeDepth != 1 && (q(documentNode).parents('[_identifier = "' + node.identifier + '"]').count() > 0))}
+ }
+ navigationClass = ${'navigation-level navigation-level--level-' + (navBarNodeDepth + 1)}
+ navigationItems = Neos.Fusion:Loop {
+ items = ${q(node).children('[instanceof Neos.Neos:Document][_hidden != TRUE][_hiddenInIndex != TRUE][hideFromMainMenu != TRUE]')}
+ @if.notEmpty = ${this.items.count() > 0}
+ itemName = 'node'
+ itemRenderer = Neos.DocsNeosIo:Component.NavBarItem
+ }
+
+ renderer = afx`
+
+
+
Neos Dev Docs
+
+
+
+ `
+}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBar.scss b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBar.scss
new file mode 100644
index 00000000..3043f52b
--- /dev/null
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBar.scss
@@ -0,0 +1,396 @@
+@use "../../../../public/Frontend/scss/screen";
+@use "../../../../public/Frontend/scss/helpers";
+
+.nav-bar {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: var(--z-index-navbar);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid var(--c-divider);
+ padding: 0.7rem 1.5rem 0.7rem 4rem;
+ height: var(--header-height);
+ background-color: var(--c-bg);
+}
+
+@include screen.sm {
+ .nav-bar {
+ padding: 0.7rem 1.5rem;
+ }
+}
+
+.flex-grow {
+ flex-grow: 1;
+}
+
+
+:where(.nav-link) {
+ a {
+ text-decoration: none;
+ }
+
+ .item {
+ display: block;
+ padding: 0 1.5rem;
+ line-height: 36px;
+ font-size: 1rem;
+ font-weight: 600;
+ color: var(--c-text);
+ white-space: nowrap
+ }
+
+ .item:hover, .item.active {
+ text-decoration: none;
+ color: var(--c-brand);
+ }
+
+ @include screen.sm {
+ .item {
+ border-bottom: 2px solid transparent;
+ padding: 0;
+ line-height: 24px;
+ font-size: .9rem;
+ font-weight: 500;
+ }
+
+ .item:hover,
+ .item.active {
+ color: var(--c-brand);
+ border-bottom-color: var(--c-brand);
+ }
+
+ .item.active {
+ font-weight: 520;
+ }
+ }
+}
+
+.nav-bar-title {
+ font-size: 1.3rem;
+ font-weight: 600;
+ color: var(--c-accent);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-right: auto;
+}
+
+.nav-bar-title:hover {
+ color: var(--c-accent-dark);
+ text-decoration: none
+}
+
+:where(.nav-bar) .logo {
+ margin-right: .75rem;
+ height: 1.3rem;
+ width: 1.3rem;
+ vertical-align: bottom
+}
+
+:where(.nav-dropdown-link-item) {
+ .item {
+ display: block;
+ padding: 0.5rem 0.5rem 0.5rem 2.5rem;
+ line-height: normal;
+ @include screen.sm {
+ padding: 0 1.5rem 0 2.5rem;
+ line-height: 32px;
+ white-space: nowrap;
+ }
+ font-size: .9rem;
+ font-weight: 500;
+ color: var(--c-text);
+ }
+
+ @include screen.sm {
+ .item {
+ padding: 0 24px 0 12px;
+ line-height: 32px;
+ font-size: .85rem;
+ font-weight: 500;
+ color: var(--c-text);
+ white-space: nowrap
+ }
+
+ .item.active .arrow {
+ opacity: 1
+ }
+ }
+
+ .item:hover, .item.active {
+ text-decoration: none;
+ color: var(--c-brand)
+ }
+
+ .item.external:hover {
+ border-bottom-color: transparent;
+ color: var(--c-text)
+ }
+
+ @include screen.sm {
+ .arrow {
+ display: inline-block;
+ margin-right: 8px;
+ border-top: 6px solid #ccc;
+ border-right: 4px solid transparent;
+ border-bottom: 0;
+ border-left: 4px solid transparent;
+ vertical-align: middle;
+ opacity: 0;
+ transform: translateY(-2px) rotate(-90deg)
+ }
+ }
+}
+
+.nav-dropdown-link {
+ position: relative;
+ @include screen.sm {
+ height: 36px;
+ }
+ overflow: hidden;
+ cursor: pointer;
+ .dialog {
+ display: none;
+ }
+}
+
+@include screen.sm {
+ .nav-dropdown-link {
+ height: auto;
+ overflow: visible
+ }
+
+ .nav-dropdown-link:hover .dialog {
+ display: block
+ }
+}
+
+.nav-dropdown-link.open {
+ height: auto;
+ .dialog {
+ display: block
+ }
+}
+
+.nav-links .search-form__wrapper,
+.nav-dropdown-link .button {
+ display: block;
+ border: 0;
+ padding: 0.5rem 0.5rem 0.5rem 1.5rem;
+ line-height: normal;
+ @include screen.sm {
+ padding: 0 1.5rem;
+ line-height: 36px;
+ white-space: nowrap;
+ }
+ width: 100%;
+ text-align: left;
+ font-family: var(--font-family-base);
+ font-size: 1rem;
+ font-weight: 600;
+ color: var(--c-text);
+ background-color: transparent;
+ cursor: pointer
+}
+
+.nav-links .search-form__wrapper {
+ margin-top: 0.75rem;
+ margin-bottom: -0.75rem;
+ padding: 0;
+ border-top: 1px solid var(--c-divider);
+
+ input {
+ flex-grow: 1;
+ border-radius: 0;
+ appearance: none;
+ font-size: inherit;
+ width: inherit;
+ }
+}
+
+@include screen.sm {
+ .nav-links .search-form__wrapper,
+ .nav-dropdown-link .button {
+ border-bottom: 2px solid transparent;
+ padding: 0;
+ line-height: 24px;
+ font-size: .9rem;
+ font-weight: 500
+ }
+
+ .nav-links {
+ .search-form__wrapper {
+ border: none;
+ margin-top: -0.5rem;
+
+ form {
+ font-size: 0.9rem;
+ }
+
+ input {
+ flex-grow: 0;
+ flex-shrink: 0;
+ padding: 0.75rem 0.25rem 0.75rem 0.75rem;
+
+ &:not(:focus,:active) {
+ width: 80px;
+ }
+ }
+ }
+ }
+}
+
+.nav-dropdown-link .button-arrow {
+ display: inline-block;
+ margin-top: -1px;
+ margin-left: 8px;
+ border-top: 6px solid #ccc;
+ border-right: 4px solid transparent;
+ border-bottom: 0;
+ border-left: 4px solid transparent;
+ vertical-align: middle
+}
+
+.nav-dropdown-link .button-arrow.right {
+ transform: rotate(-90deg)
+}
+
+@include screen.sm {
+ .nav-dropdown-link .button-arrow.right {
+ transform: rotate(0)
+ }
+}
+
+.nav-dropdown-link .dialog ul {
+ margin: 0;
+ padding: 0;
+ list-style: none
+}
+
+@include screen.sm {
+ .nav-dropdown-link .dialog {
+ display: none;
+ position: absolute;
+ top: 26px;
+ right: -8px;
+ width: max-content;
+ min-width: 128px;
+ filter: drop-shadow(0 12px 32px rgba(12, 6, 48, 0.16)) drop-shadow(0 2px 6px rgba(12, 6, 48, 0.16));
+
+ ul {
+ padding: 12px 0;
+ background-color: var(--c-bg);
+ @include helpers.neos-borders(12px);
+ }
+ }
+}
+
+.nav-links {
+ padding: .75rem 0;
+ border-bottom: 1px solid var(--c-divider)
+}
+
+@include screen.sm {
+ .nav-links {
+ display: flex;
+ align-items: baseline;
+ border-bottom: 0
+ }
+
+ :where(.nav-links) .item + .item {
+ padding-left: 24px
+ }
+}
+
+
+.sidebar-button {
+ appearance: none;
+ border: none;
+ background: none;
+ display: none;
+ padding: .4rem;
+ cursor: pointer;
+ @include helpers.neos-borders;
+}
+
+.sidebar-button:focus, .sidebar-button.active {
+ background: #eee;
+}
+
+.sidebar-button {
+ svg {
+ display: block;
+ }
+
+ &[aria-expanded="false"] {
+ .menu-close {
+ display: none;
+ }
+ }
+ &[aria-expanded="true"] {
+ .menu-open {
+ display: none;
+ }
+ }
+}
+
+@media screen and (max-width: #{screen.$sm - 1}) {
+ .sidebar-button {
+ display: block
+ }
+}
+
+.nav-bar {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: var(--z-index-navbar);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid var(--c-divider);
+ padding: .7rem 1rem;
+ gap: 0.5rem;
+ height: var(--header-height);
+ background-color: var(--c-bg)
+}
+
+@include screen.sm {
+ .nav-bar {
+ padding: .7rem 1.5rem
+ }
+}
+
+.flex-grow {
+ flex-grow: 1
+}
+
+:where(.nav-bar) .nav {
+ display: none
+}
+
+@include screen.sm {
+ :where(.nav-bar) .nav {
+ display: block
+ }
+
+ :where(.sidebar) nav {
+ display: none;
+ }
+}
+
+.nav-links .external-icon {
+ display: none;
+ line-height: 32px;
+}
+
+.nav-links a.link-external .external-icon {
+ display: inline;
+ color: var(--c-divider-dark);
+ float: right;
+ margin-left: 0.5rem;
+}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBarContent.fusion b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBarContent.fusion
new file mode 100644
index 00000000..5bf05a65
--- /dev/null
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBarContent.fusion
@@ -0,0 +1,31 @@
+prototype(Neos.DocsNeosIo:Component.NavBarContent) < prototype(Neos.Fusion:Component) {
+
+ @context.navBarNodeDepth = ${this.node.depth - this.startingPoint.depth}
+ node = ${node}
+ itemTitle = ${q(node).property('titleOverride') || q(node).property('title')}
+ itemStatus = ${q(node).property('status')}
+ itemClass = Neos.Fusion:DataStructure {
+ base = 'navigation-item'
+ level = ${'navigation-item--level-' + navBarNodeDepth}
+ current = 'current'
+ current.@if.isCurrent = ${node == documentNode}
+ active = 'active'
+ active.@if.isActive = ${node == documentNode || (navBarNodeDepth != 1 && (q(documentNode).parents('[_identifier = "' + node.identifier + '"]').count() > 0))}
+ }
+ navigationClass = ${'navigation-level navigation-level--level-' + (navBarNodeDepth + 1)}
+ navigationItems = Neos.Fusion:Loop {
+ items = ${q(node).children('[instanceof Neos.Neos:Document][_hidden != TRUE][_hiddenInIndex != TRUE][hideFromMainMenu != TRUE]')}
+ @if.notEmpty = ${this.items.count() > 0}
+ itemName = 'node'
+ itemRenderer = Neos.DocsNeosIo:Component.NavBarItem
+ }
+
+ renderer = afx`
+
+
+
+ `
+}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBarItem.fusion b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBarItem.fusion
new file mode 100644
index 00000000..92a00933
--- /dev/null
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBarItem.fusion
@@ -0,0 +1,10 @@
+prototype(Neos.DocsNeosIo:Component.NavBarItem) < prototype(Neos.Fusion:Component) {
+ node = ${node}
+
+ renderer = afx`
+
+ 0} node={props.node} />
+
+
+ `
+}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBarItemDialog.fusion b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBarItemDialog.fusion
new file mode 100644
index 00000000..1b6c3a11
--- /dev/null
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBarItemDialog.fusion
@@ -0,0 +1,24 @@
+prototype(Neos.DocsNeosIo:Component.NavBarItemDialog) < prototype(Neos.Fusion:Component) {
+ node = ${node}
+ itemTitle = ${q(node).property('titleOverride') || q(node).property('title')}
+ navigationItems = ${q(node).children('[instanceof Neos.Neos:Document][_hidden != TRUE][_hiddenInIndex != TRUE][hideFromMainMenu != TRUE]')}
+
+ renderer = afx`
+
+
+
+
+
+ `
+}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBarItemDialogItem.fusion b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBarItemDialogItem.fusion
new file mode 100644
index 00000000..b3fa1031
--- /dev/null
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBarItemDialogItem.fusion
@@ -0,0 +1,22 @@
+prototype(Neos.DocsNeosIo:Component.NavBarItemDialogItem) < prototype(Neos.Fusion:Component) {
+ node = ${node}
+
+ itemTitle = ${q(node).property('titleOverride') || q(node).property('title')}
+
+ itemClass = Neos.Fusion:DataStructure {
+ base = 'item'
+ active = 'active'
+ active.@if.isActive = ${node == documentNode || String.indexOf(q(node).property('target'), documentNode.identifier) > -1}
+ }
+
+ isExternal = false
+ renderer = afx`
+
+
+
+ { props.itemTitle }
+
+
+
+ `
+}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBarItemLink.fusion b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBarItemLink.fusion
new file mode 100644
index 00000000..9057f362
--- /dev/null
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/NavBarItemLink.fusion
@@ -0,0 +1,19 @@
+prototype(Neos.DocsNeosIo:Component.NavBarItemLink) < prototype(Neos.Fusion:Component) {
+ node = ${node}
+
+ itemTitle = ${q(node).property('titleOverride') || q(node).property('title')}
+
+ itemClass = Neos.Fusion:DataStructure {
+ base = 'item'
+ active = 'active'
+ active.@if.isActive = ${node == documentNode || String.indexOf(q(node).property('target'), documentNode.identifier) > -1}
+ }
+
+ renderer = afx`
+
+
+ { props.itemTitle }
+
+
+ `
+}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/OutboundLinkIcon.fusion b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/OutboundLinkIcon.fusion
new file mode 100644
index 00000000..f0057021
--- /dev/null
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/NavBar/OutboundLinkIcon.fusion
@@ -0,0 +1,23 @@
+prototype(Neos.DocsNeosIo:Component.OutboundLinkIcon) < prototype(Neos.Fusion:Component) {
+ renderer = afx`
+
+ `
+}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Navigation/Navigation.LevelRenderer.fusion b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Navigation/Navigation.LevelRenderer.fusion
deleted file mode 100755
index 32521304..00000000
--- a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Navigation/Navigation.LevelRenderer.fusion
+++ /dev/null
@@ -1,35 +0,0 @@
-prototype(Neos.DocsNeosIo:Component.Navigation.LevelRenderer) < prototype(Neos.Fusion:Component) {
- @context.nodeDepth = ${this.node.depth - startingPoint.depth}
- node = ${node}
- itemTitle = ${q(node).property('titleOverride') || q(node).property('title')}
- itemStatus = ${q(node).property('status')}
- itemClass = Neos.Fusion:RawArray {
- base = 'navigation-item'
- level = ${'navigation-item--level-' + nodeDepth}
- current = 'current'
- current.@if.isCurrent = ${node == documentNode}
- active = 'active'
- active.@if.isActive = ${node == documentNode || (nodeDepth != 1 && (q(documentNode).parents('[_identifier = "' + node.identifier + '"]').count() > 0))}
- }
- navigationClass = ${'navigation-level navigation-level--level-' + (nodeDepth + 1)}
- navigationItems = Neos.Fusion:Collection {
- @if.notEmpty = ${this.collection.count() > 0}
- collection = ${q(node).children('[instanceof Neos.Neos:Document][_hidden != TRUE][_hiddenInIndex != TRUE][hideFromMainMenu != TRUE]')}
- itemName = 'node'
- itemRenderer = Neos.DocsNeosIo:Component.Navigation.LevelRenderer
- }
-
- renderNextLevel = ${renderCurrentPath && (node == documentNode || ((q(documentNode).closest('[_identifier = "' + node.identifier + '"]').count() > 0))) && this.navigationItems}
-
- renderer = afx`
-
-
- {props.itemTitle}
-
-
-
- {props.navigationItems}
-
-
- `
-}
diff --git a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Notice/Notice.fusion b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Notice/Notice.fusion
index 67f12a43..99adfcfb 100644
--- a/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Notice/Notice.fusion
+++ b/DistributionPackages/Neos.DocsNeosIo/Resources/Private/Fusion/Component/Notice/Notice.fusion
@@ -10,16 +10,17 @@ prototype(Neos.DocsNeosIo:Component.Notice) < prototype(Neos.Neos:ContentCompone
warning = ${value == 'warning' ? 'fas fa-exclamation-circle' : value}
danger = ${value == 'danger' ? 'fas fa-exclamation-triangle' : value}
tip = ${value == 'tip' ? 'fas fa-lightbulb' : value}
+ todo = ${value == 'todo' ? 'fas fa-list' : value}
backend = ${value == 'backend' ? 'fas fa-edit' : value}
}
renderer = afx`
-
-