diff --git a/src/client-side/index.ts b/src/client-side/index.ts index da2c060d..b45d4d7f 100644 --- a/src/client-side/index.ts +++ b/src/client-side/index.ts @@ -92,10 +92,10 @@ function setupNavHandlers() { setupNavHandlers(); -function openModalIFrame(url:string) { +function openModalIFrame(url: string) { const template = document.querySelector('#modal-iframe-template'); - const frag = template?.content.cloneNode(true) as DocumentFragment; + const frag = template?.content.cloneNode(true) as DocumentFragment; console.log(frag) if (frag) { const div = frag.querySelector(".modal-iframe"); @@ -161,3 +161,10 @@ const openDetailsOnFragmentIdNavigation = () => { openDetailsOnFragmentIdNavigation(); window.addEventListener("hashchange", openDetailsOnFragmentIdNavigation); +// Ensure all links open in the same tab +const allLinks: NodeListOf = document.querySelectorAll('a'); +allLinks.forEach((link: HTMLAnchorElement) => { + link.setAttribute('target', '_self'); +}); + + diff --git a/src/pages/_data/navigation/headerNav.json5 b/src/pages/_data/navigation/headerNav.json5 index 2e501d97..2137bd38 100644 --- a/src/pages/_data/navigation/headerNav.json5 +++ b/src/pages/_data/navigation/headerNav.json5 @@ -4,6 +4,7 @@ { title: "Ideology", url: "/ideology/", class:"" }, { title: "Concepts", url: "/concepts/", class:"" }, { title: "Developer Onboarding", url: "/dev-onboarding/", class:"" }, - { title: "Glossary", url: "/glossary/", class:"" }, + { title: "Training", url: "/training/", class:"" }, + { title: "Help", url: "/help/", class:"" }, ] } \ No newline at end of file diff --git a/src/pages/_data/navigation/mainNav.json5 b/src/pages/_data/navigation/mainNav.json5 index 1a0db24e..65633fd3 100644 --- a/src/pages/_data/navigation/mainNav.json5 +++ b/src/pages/_data/navigation/mainNav.json5 @@ -1,24 +1,30 @@ { - links: [ + "links": [ { - title: "Getting Started", url: "/getting-started/", children: [ + "title": "Getting Started", + "url": "/getting-started/", + "children": [ { - title: "Where to start", children: [ - { title: "Start from Scratch", url: "/getting-started/from-scratch/" }, - { title: "IOS", url: "/getting-started/frameworks/ios/" }, - { title: "Ruby", url: "/getting-started/frameworks/ruby/" }, - { title: "Android", url: "/getting-started/frameworks/android/" }, - { title: "Python", url: "/getting-started/frameworks/python/" }, - { title: "Laravel", url: "/getting-started/frameworks/laravel/" }, - { title: "Django", url: "/getting-started/frameworks/django/" }, - { title: "Flask", url: "/getting-started/frameworks/flask/" }, - { title: "React", url: "/getting-started/frameworks/react/" }, - { title: "Spring", url: "/getting-started/frameworks/spring/" }, - { title: "Groovy", url: "/getting-started/frameworks/groovy/" },] + "title": "Where to start", + "children": [ + { "title": "Start from Scratch", "url": "/getting-started/from-scratch/" }, + { "title": "IOS", "url": "/getting-started/frameworks/ios/" }, + { "title": "Ruby", "url": "/getting-started/frameworks/ruby/" }, + { "title": "Android", "url": "/getting-started/frameworks/android/" }, + { "title": "Python", "url": "/getting-started/frameworks/python/" }, + { "title": "Laravel", "url": "/getting-started/frameworks/laravel/" }, + { "title": "Django", "url": "/getting-started/frameworks/django/" }, + { "title": "Flask", "url": "/getting-started/frameworks/flask/" }, + { "title": "React", "url": "/getting-started/frameworks/react/" }, + { "title": "Spring", "url": "/getting-started/frameworks/spring/" }, + { "title": "Groovy", "url": "/getting-started/frameworks/groovy/" } + ] }, { - title: "Development Theatre", url: "/getting-started/development-theatre/", children: [] - }, + "title": "Development Theatre", + "url": "/getting-started/development-theatre/", + "children": [] + } ] }, { @@ -29,98 +35,62 @@ "title": "Learn", "url": "/dev-onboarding/learn/", "children": [ - { - "title": "Building a Root Skill View", - "url": "/dev-onboarding/learn/rootskillview/" - }, - { - "title": "Managing your Family Members", - "url": "/dev-onboarding/learn/members/" - }, - { - "title": "Managing your Metadata", - "url": "/dev-onboarding/learn/metadata/" - }, - { - "title": "Creating Multi-card Forms", - "url": "/dev-onboarding/learn/multi-card-forms/" - }, - { - "title": "Generating Personalized Stories", - "url": "/dev-onboarding/learn/personalized-stories/" - }, - { - "title": "Long Running Operations", - "url": "/dev-onboarding/learn/long-running-operations/" - }, - { - "title": "Sharing the Story", - "url": "/dev-onboarding/learn/share-story/" - } - ] - }, - { - "title": "Train", - "url": "/dev-onboarding/train/", - "children": [ - { - "title": "Errors", - "url": "/dev-onboarding/train/errors/" - }, - { - "title": "Schemas", - "url": "/dev-onboarding/train/schemas/" - }, - { - "title": "Stores", - "url": "/dev-onboarding/train/stores/" - }, - { - "title": "Events", - "url": "/dev-onboarding/train/events/" - }, - { - "title": "Tests", - "url": "/dev-onboarding/train/tests/" - }, - { - "title": "Views", - "url": "/dev-onboarding/train/views/" - }, - { - "title": "Listeners", - "url": "/dev-onboarding/train/listeners/" - }, - { - "title": "Mercury", - "url": "/dev-onboarding/train/mercury/" - } + { "title": "Building a Root Skill View", "url": "/dev-onboarding/learn/rootskillview/" }, + { "title": "Managing your Family Members", "url": "/dev-onboarding/learn/members/" }, + { "title": "Managing your Metadata", "url": "/dev-onboarding/learn/metadata/" }, + { "title": "Creating Multi-card Forms", "url": "/dev-onboarding/learn/multi-card-forms/" }, + { "title": "Generating Personalized Stories", "url": "/dev-onboarding/learn/personalized-stories/" }, + { "title": "Long Running Operations", "url": "/dev-onboarding/learn/long-running-operations/" }, + { "title": "Sharing the Story", "url": "/dev-onboarding/learn/share-story/" } ] } ] }, { - title: "Concepts", url: "/concepts/", children: [ - { title: "Errors", url: "/concepts/mercury/" }, - { title: "Events", url: "/concepts/views/" }, - { title: "Listeners", url: "/concepts/tests/" }, - { title: "Schemas", url: "/concepts/events/" }, - { title: "Stores", url: "/concepts/stores/" }, - { title: "Tests", url: "/concepts/schemas/" }, - { title: "Views", url: "/concepts/listeners/" }, - { title: "Mercury", url: "/concepts/errors/" }, + "title": "Training", + "url": "/training/", + "children": [ + { "title": "Building a Root Skill View", "url": "/training/errors/" }, + { "title": "Managing your Family Members", "url": "/training/schemas/" }, + { "title": "Managing your Metadata", "url": "/training/stores/" }, + { "title": "Creating Multi-card Forms", "url": "/training/events/" }, + { "title": "Generating Personalized Stories", "url": "/training/tests/" }, + { "title": "Long Running Operations", "url": "/training/views/" }, + { "title": "Sharing the Story", "url": "/training/listeners/" }, + { "title": "Sharing the Story", "url": "/training/mercury/" } ] }, { - title: "Ideology", url: "/ideology/", children: [ - { title: "Architecture", url: "/ideology/architecture/" }, - { title: "Test-Driven Development", url: "/ideology/tdd/" }, - { title: "Clean Code", url: "/ideology/clean-code/" }, + "title": "Concepts", + "url": "/concepts/", + "children": [ + { "title": "Errors", "url": "/concepts/errors/" }, + { "title": "Events", "url": "/concepts/views/" }, + { "title": "Listeners", "url": "/concepts/tests/" }, + { "title": "Schemas", "url": "/concepts/events/" }, + { "title": "Stores", "url": "/concepts/stores/" }, + { "title": "Tests", "url": "/concepts/schemas/" }, + { "title": "Views", "url": "/concepts/listeners/" }, + { "title": "Mercury", "url": "/concepts/mercury/" }, + { "title": "Permissions", "url": "/concepts/permissions/" } ] }, { - title: "Glossary", url: "/glossary/", children: [ + "title": "Ideology", + "url": "/ideology/", + "children": [ + { "title": "Architecture", "url": "/ideology/architecture/" }, + { "title": "Test-Driven Development", "url": "/ideology/tdd/" }, + { "title": "Clean Code", "url": "/ideology/clean-code/" } ] }, + { + "title": "Help", + "url": "/help/", + "children": [ + { "title": "Glossary", "url": "/help/glossary/" }, + { "title": "Contact", "url": "/help/contact/" } + ] + } ] -} +} \ No newline at end of file diff --git a/src/pages/_includes/widgets/home-tiles.njk b/src/pages/_includes/widgets/home-tiles.njk index 531c30ee..54ba6e60 100644 --- a/src/pages/_includes/widgets/home-tiles.njk +++ b/src/pages/_includes/widgets/home-tiles.njk @@ -30,4 +30,20 @@

Onboarding materials that ensure a seamless initiation process into the Sprucebot ecosystem.

{% endlinkTile %} + + {% linkTile "/training/" | url, "home-tile" %} + {{ personReadingIcon() }} +
+

Training

+

Learn how to use Sprucebot to its full potential.

+
+ {% endlinkTile %} + + {% linkTile "/help/" | url, "home-tile" %} + {{ rocketshipIcon() }} +
+

Help

+

Get help with Sprucebot.

+
+ {% endlinkTile %} \ No newline at end of file diff --git a/src/pages/_includes/widgets/navigation.njk b/src/pages/_includes/widgets/navigation.njk index df8daa05..faaa3739 100644 --- a/src/pages/_includes/widgets/navigation.njk +++ b/src/pages/_includes/widgets/navigation.njk @@ -9,8 +9,8 @@ Getting Started Ideology Concepts - Developer Onboarding - Glossary + Training + Help {% for topLink in mainNavData.links %} {% set isCurrentParent = topLink.url == activeParent.url %} diff --git a/src/pages/concepts/concepts.md b/src/pages/concepts/concepts.md index 003ef92a..4aaff59e 100644 --- a/src/pages/concepts/concepts.md +++ b/src/pages/concepts/concepts.md @@ -1,44 +1,6 @@ --- title: Concepts --- - Concepts are a key part of spruce development, they handle the different parts of a sprucebot application, such as errors, stores, events, etc. This section of our guide offers a breakdown of all the sprucebot concepts. @@ -75,27 +37,4 @@ Concepts are a key part of spruce development, they handle the different parts o Section 8 Mercury - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/pages/concepts/permissions.md b/src/pages/concepts/permissions.md new file mode 100644 index 00000000..1b5b0520 --- /dev/null +++ b/src/pages/concepts/permissions.md @@ -0,0 +1,3 @@ +--- +title:: Permissions +--- \ No newline at end of file diff --git a/src/pages/dev-onboarding/dev-onboarding.md b/src/pages/dev-onboarding/dev-onboarding.md index 4e6b4057..e1875463 100644 --- a/src/pages/dev-onboarding/dev-onboarding.md +++ b/src/pages/dev-onboarding/dev-onboarding.md @@ -1,44 +1,6 @@ --- title: Developer Onboarding --- - Welcome to the Developer Onboarding Guide for Spruce. This guide serves as your comprehensive roadmap, crafted to seamlessly introduce you to the intricacies of the Sprucebot platform. At its core, this guide utilizes an engaging, hands-on approach: you will develop a family-centric AI story generator, which acts as a practical tool for learning. @@ -59,26 +21,3 @@ In this section of our guide, we provide a series of katas, or structured exerci Train - - diff --git a/src/pages/dev-onboarding/learn/learn.md b/src/pages/dev-onboarding/learn/learn.md index 3fae9c1e..86555ccf 100644 --- a/src/pages/dev-onboarding/learn/learn.md +++ b/src/pages/dev-onboarding/learn/learn.md @@ -1,44 +1,7 @@ --- title: Learn +script: frameworks.js --- - You've reached the "Learn" section, a step towards unleashing the full potential of your programming skills within the Spruce ecosystem. @@ -62,56 +25,33 @@ Let's Get Started! The following chapter's break down how each building block is placed in creating a story generator using sprucebot: -
- - Chapter 1 - Building a RootSkillView +
+ + Chapter 1 + Building a RootSkillView - - Chapter 2 - Managing your Metadata + + Chapter 2 + Managing your Metadata - - Chapter 3 - Managing your Family Members + + Chapter 3 + Managing your Family Members - - Chapter 4 - Creating Multi-Card Forms + + Chapter 4 + Creating Multi-Card Forms - - Chapter 5A - Generating Personalized Stories with ChatGPT + + Chapter 5A + Generating Personalized Stories with ChatGPT - - Chapter 5B - Long Running Operations + + Chapter 5B + Long Running Operations - - Chapter 6 - Sharing the Story + + Chapter 6 + Sharing the Story -
- - \ No newline at end of file +
\ No newline at end of file diff --git a/src/pages/dev-onboarding/learn/rootskillview.md b/src/pages/dev-onboarding/learn/rootskillview.md index a075bc4d..2a726522 100644 --- a/src/pages/dev-onboarding/learn/rootskillview.md +++ b/src/pages/dev-onboarding/learn/rootskillview.md @@ -33,28 +33,6 @@ tocData: href: preview-on-a-device --- - -
diff --git a/src/pages/getting-started/frameworks/android.md b/src/pages/getting-started/frameworks/android.md index 55f485f4..53d686b1 100644 --- a/src/pages/getting-started/frameworks/android.md +++ b/src/pages/getting-started/frameworks/android.md @@ -1,59 +1,6 @@ --- title: Transitioning from Android to Spruce --- - Android development typically involves Java or Kotlin, while Spruce is a TypeScript-based platform. diff --git a/src/pages/getting-started/frameworks/django.md b/src/pages/getting-started/frameworks/django.md index 278a5509..43302430 100644 --- a/src/pages/getting-started/frameworks/django.md +++ b/src/pages/getting-started/frameworks/django.md @@ -1,59 +1,6 @@ --- title: Transitioning from Django to Spruce --- - Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. Spruce is a TypeScript-based framework that offers full-stack development capabilities. This guide will help Django developers understand how to transition their skills to work with Spruce. diff --git a/src/pages/getting-started/frameworks/flask.md b/src/pages/getting-started/frameworks/flask.md index b769acd0..87fe9db6 100644 --- a/src/pages/getting-started/frameworks/flask.md +++ b/src/pages/getting-started/frameworks/flask.md @@ -1,59 +1,6 @@ --- title: Transitioning from Flask to Spruce --- - Flask is a Python web framework that provides the tools necessary for building simple web applications quickly. On the other hand, Spruce is a TypeScript-based full-stack framework designed to create scalable web applications with a focus on modern web development practices. This guide will help Flask developers understand how to transition to Spruce. diff --git a/src/pages/getting-started/frameworks/groovy.md b/src/pages/getting-started/frameworks/groovy.md index 556d437f..915de567 100644 --- a/src/pages/getting-started/frameworks/groovy.md +++ b/src/pages/getting-started/frameworks/groovy.md @@ -1,59 +1,6 @@ --- title: Transitioning from Groovy to Spruce --- - Groovy is a dynamic language with static-typing and static compilation capabilities, for the Java platform. It integrates smoothly with any Java program and immediately delivers to your application powerful features, including scripting capabilities, Domain-Specific Language authoring, runtime and compile-time meta-programming and functional programming. Transitioning to Spruce, a TypeScript-based framework, from a Groovy and potentially Grails background involves adapting to a new ecosystem centered around JavaScript and TypeScript for full-stack web development. diff --git a/src/pages/getting-started/frameworks/ios.md b/src/pages/getting-started/frameworks/ios.md index c4263349..50da2053 100644 --- a/src/pages/getting-started/frameworks/ios.md +++ b/src/pages/getting-started/frameworks/ios.md @@ -1,59 +1,6 @@ --- title: Transitioning from iOS --- - iOS development typically involves Swift or Objective C, while Spruce is a TypeScript-based platform. diff --git a/src/pages/getting-started/frameworks/laravel.md b/src/pages/getting-started/frameworks/laravel.md index 16807fc9..5e1dc611 100644 --- a/src/pages/getting-started/frameworks/laravel.md +++ b/src/pages/getting-started/frameworks/laravel.md @@ -1,59 +1,6 @@ --- title: Transitioning from Laravel to Spruce --- - Laravel is a PHP framework designed for web application development that follows the MVC (Model-View-Controller) architectural pattern. Spruce, in contrast, is a TypeScript-based framework that also covers full-stack development but leverages JavaScript's ecosystem. This guide will help you draw parallels between familiar Laravel concepts and Spruce's architecture, offering a clear path to apply your existing Laravel skills to Spruce development. diff --git a/src/pages/getting-started/frameworks/python.md b/src/pages/getting-started/frameworks/python.md index 564ad925..6e075428 100644 --- a/src/pages/getting-started/frameworks/python.md +++ b/src/pages/getting-started/frameworks/python.md @@ -1,59 +1,6 @@ --- title: Transitioning from Python to Spruce --- - Python development often involves using dynamic scripting languages and various frameworks like Django or Flask. Spruce, on the other hand, uses TypeScript. This guide will help you connect your Python expertise to Spruce’s architecture, showing how to adapt and apply your existing skills in a new environment. diff --git a/src/pages/getting-started/frameworks/react.md b/src/pages/getting-started/frameworks/react.md index 8dfda5d5..07a36eb9 100644 --- a/src/pages/getting-started/frameworks/react.md +++ b/src/pages/getting-started/frameworks/react.md @@ -1,59 +1,6 @@ --- title: Transitioning from React to Spruce --- - React is a library for building user interfaces, primarily focused on the front-end. Spruce is a full-stack framework that uses TypeScript, expanding on the concepts you're familiar with from React and applying them throughout the entire stack. This guide will help you understand how to transition from React's component-based architecture to Spruce's full-stack development approach. diff --git a/src/pages/getting-started/frameworks/ruby.md b/src/pages/getting-started/frameworks/ruby.md index 94a6d9cd..6a957dde 100644 --- a/src/pages/getting-started/frameworks/ruby.md +++ b/src/pages/getting-started/frameworks/ruby.md @@ -1,59 +1,6 @@ --- title: Transitioning from Ruby on Rails to Spruce --- - Ruby on Rails is a full-stack framework that uses Ruby, while Spruce is built on TypeScript. This guide will assist you in drawing parallels between Rails development and Spruce's architecture, helping you understand how to apply your existing Rails knowledge in Spruce. diff --git a/src/pages/getting-started/frameworks/spring.md b/src/pages/getting-started/frameworks/spring.md index bd0cc83c..35168f58 100644 --- a/src/pages/getting-started/frameworks/spring.md +++ b/src/pages/getting-started/frameworks/spring.md @@ -1,59 +1,6 @@ --- title: Transitioning from Spring to Spruce --- - Spring is a framework for creating complex, enterprise-level applications in Java. It provides a wide range of functionalities, from dependency injection to security, and much more. Spruce, on the other hand, is a TypeScript-based framework designed for building scalable web applications. This guide will help Spring developers understand how to transition to Spruce. diff --git a/src/pages/getting-started/from-scratch.md b/src/pages/getting-started/from-scratch.md index 2e801bc4..f0a8234e 100644 --- a/src/pages/getting-started/from-scratch.md +++ b/src/pages/getting-started/from-scratch.md @@ -1,27 +1,6 @@ --- title: Start from Scratch --- - -
diff --git a/src/pages/getting-started/getting-started.md b/src/pages/getting-started/getting-started.md index 545bbfd5..fa8dc717 100644 --- a/src/pages/getting-started/getting-started.md +++ b/src/pages/getting-started/getting-started.md @@ -1,60 +1,6 @@ --- title: Introduction to Getting Started with Spruce --- - - Before you start working with Spruce, it's important to get a feel for how it's different from the programming language or system you're used to. diff --git a/src/pages/help/contact.md b/src/pages/help/contact.md new file mode 100644 index 00000000..7479b02d --- /dev/null +++ b/src/pages/help/contact.md @@ -0,0 +1,3 @@ +--- +title: Contact +--- \ No newline at end of file diff --git a/src/pages/glossary/glossary.md b/src/pages/help/glossary.md similarity index 100% rename from src/pages/glossary/glossary.md rename to src/pages/help/glossary.md diff --git a/src/pages/help/help.md b/src/pages/help/help.md new file mode 100644 index 00000000..2d5855e7 --- /dev/null +++ b/src/pages/help/help.md @@ -0,0 +1,3 @@ +--- +title: Help +--- \ No newline at end of file diff --git a/src/pages/dev-onboarding/train/errors.md b/src/pages/training/errors.md similarity index 100% rename from src/pages/dev-onboarding/train/errors.md rename to src/pages/training/errors.md diff --git a/src/pages/dev-onboarding/train/events.md b/src/pages/training/events.md similarity index 100% rename from src/pages/dev-onboarding/train/events.md rename to src/pages/training/events.md diff --git a/src/pages/dev-onboarding/train/listeners.md b/src/pages/training/listeners.md similarity index 100% rename from src/pages/dev-onboarding/train/listeners.md rename to src/pages/training/listeners.md diff --git a/src/pages/dev-onboarding/train/mercury.md b/src/pages/training/mercury.md similarity index 100% rename from src/pages/dev-onboarding/train/mercury.md rename to src/pages/training/mercury.md diff --git a/src/pages/dev-onboarding/train/schemas.md b/src/pages/training/schemas.md similarity index 100% rename from src/pages/dev-onboarding/train/schemas.md rename to src/pages/training/schemas.md diff --git a/src/pages/dev-onboarding/train/stores.md b/src/pages/training/stores.md similarity index 100% rename from src/pages/dev-onboarding/train/stores.md rename to src/pages/training/stores.md diff --git a/src/pages/dev-onboarding/train/tests.md b/src/pages/training/tests.md similarity index 100% rename from src/pages/dev-onboarding/train/tests.md rename to src/pages/training/tests.md diff --git a/src/pages/dev-onboarding/train/train.md b/src/pages/training/train.md similarity index 100% rename from src/pages/dev-onboarding/train/train.md rename to src/pages/training/train.md diff --git a/src/pages/training/training.md b/src/pages/training/training.md new file mode 100644 index 00000000..cf141264 --- /dev/null +++ b/src/pages/training/training.md @@ -0,0 +1,3 @@ +--- +title: Training +--- \ No newline at end of file diff --git a/src/pages/dev-onboarding/train/views.md b/src/pages/training/views.md similarity index 100% rename from src/pages/dev-onboarding/train/views.md rename to src/pages/training/views.md diff --git a/src/scss/_markdown-docs-styles.scss b/src/scss/_markdown-docs-styles.scss new file mode 100644 index 00000000..4ff32c01 --- /dev/null +++ b/src/scss/_markdown-docs-styles.scss @@ -0,0 +1,79 @@ +// Interactive Button Styles +.guide-sections { + display: flex; + flex-direction: column; + gap: 10px; +} + +.section-link { + display: flex; + align-items: center; + text-decoration: none; + padding: 10px; + border-radius: 5px; + background-color: #f0f0f0; + color: #333; + transition: background-color 0.3s, transform 0.3s; +} + +.section-link:hover { + background-color: #0EDDD3; + transform: scale(1.05); +} + +.section-number { + font-weight: bold; + margin-right: 10px; +} + +.disabled { + opacity: 0.5; + cursor: default; +} + +.disabled:hover { + background-color: #f0f0f0; + transform: none; +} + +// Video Container Styles +.video-container { + position: relative; + padding-bottom: 56.25%; + padding-top: 25px; + height: 0; + margin-bottom: 20px; + box-shadow: 0 4px 8px rgba(0,0,0,0.1); + border-radius: 10px; + overflow: hidden; +} + +.video-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; +} + +// Frameworks Table Styles +table { + width: 100%; + border-collapse: collapse; + margin-bottom: 20px; + } + + th, td { + border: 1px solid #ddd; + padding: 8px; + text-align: left; + } + + th { + background-color: #f2f2f2; + } + + tr:nth-child(even) { + background-color: #f9f9f9; + } \ No newline at end of file diff --git a/src/scss/site.scss b/src/scss/site.scss index f5cb49c8..addf3fff 100644 --- a/src/scss/site.scss +++ b/src/scss/site.scss @@ -24,6 +24,7 @@ body { @import 'widgets'; @import 'header'; @import 'navigation'; + @import '_markdown-docs-styles'; @import 'page-specific/default-page-type';