diff --git a/docs/knowledge-hub/_category_.yaml b/docs/knowledge-hub/_category_.yaml new file mode 100644 index 0000000..80f8149 --- /dev/null +++ b/docs/knowledge-hub/_category_.yaml @@ -0,0 +1,4 @@ +position: 3 +label: 'Knowledge Hub' +collapsible: true +collapsed: true diff --git a/docs/quality-maturity-model/01-overview.md b/docs/quality-maturity-model/01-overview.md index 8243034..6433edd 100644 --- a/docs/quality-maturity-model/01-overview.md +++ b/docs/quality-maturity-model/01-overview.md @@ -46,7 +46,7 @@ In terms of levels within each dimension, it's important to understand the nuanc - **Level 4**: introduces the power of data, enabling better, data-based decisions based on relevant metrics. - **Level 5**: the project is not just following practices. Rather, it's continuously improving, learning from data and experience to continuously refine the approach. This implies early problem detection and prevention, ensuring potential challenges are addressed even before they surface. -![Reactive vs. proactive](/img/quality-maturity-model/reactive-proactive.png) +Reactive vs. proactive This tiered model provides a clear roadmap for **continuous improvement**, enabling projects and organizations to set goals, assess effectiveness, and adapt proactively. diff --git a/docs/quality-maturity-model/03-how-it-works.md b/docs/quality-maturity-model/03-how-it-works.md index 2b72564..cd3c61e 100644 --- a/docs/quality-maturity-model/03-how-it-works.md +++ b/docs/quality-maturity-model/03-how-it-works.md @@ -1,6 +1,6 @@ # How it works -Strategy illustration +Strategy illustration ## The process diff --git a/docs/quality-strategy/01-getting-started.md b/docs/quality-strategy/01-getting-started.md index 713546e..831ed55 100644 --- a/docs/quality-strategy/01-getting-started.md +++ b/docs/quality-strategy/01-getting-started.md @@ -24,7 +24,7 @@ The **quality strategy** is a holistic plan outlining the project’s approach t **The Quality Strategy is about envisioning success and paving the way to achieve it.** -Strategy illustration +Strategy illustration The quality strategy tool is designed to foster a structured and proactive approach to quality in software development projects. It ensures that every phase of the product's development adheres to high-quality standards, leaving no detail unconsidered, thereby improving both the efficiency and outcomes of all projects. diff --git a/docs/quality-strategy/03-background.md b/docs/quality-strategy/03-background.md index b0e7bdf..bffe911 100644 --- a/docs/quality-strategy/03-background.md +++ b/docs/quality-strategy/03-background.md @@ -26,7 +26,7 @@ Poor software quality drains resources and erodes trust. The true cost of poor software is not just in dollars, but in **lost trust and opportunities**. -Cost of poor software +Cost of poor software ## The complexity of software engineering @@ -40,7 +40,7 @@ In this field, **success** is about delivering **real value** to users and creat IO's here to create impactful products that resonate with users' needs, delivering solutions that enhance lives and drive the business forward. -Targets illustration +Targets illustration ## Strategy & quality diff --git a/docs/quality-strategy/resources/01-faqs.md b/docs/quality-strategy/resources/01-faqs.md index db12de6..dd88484 100644 --- a/docs/quality-strategy/resources/01-faqs.md +++ b/docs/quality-strategy/resources/01-faqs.md @@ -199,7 +199,7 @@ Finally, many aspects of a quality strategy, such as testing and continuous inte The quality strategy serves as a guiding framework for the team/project, highlighting the essential actions required to build top-notch products. However, it doesn't prescribe specific methods or processes. Instead, it empowers the team with the autonomy and creative freedom to determine the best approach and techniques to achieve the desired quality outcomes. This balance ensures that while quality remains a core focus, innovation and adaptability are not compromised. -Rulebooks and frameworks +Rulebooks and frameworks ### A software quality strategy is only necessary for large organizations or complex software projects diff --git a/docusaurus.config.ts b/docusaurus.config.ts index c80f2a4..72f007f 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -58,8 +58,7 @@ const config: Config = { ], themeConfig: { - // TODO: Replace with your project's social card - // image: 'img/docusaurus-social-card.jpg', + image: 'img/social-card.png', colorMode: { disableSwitch: true, }, @@ -68,8 +67,6 @@ const config: Config = { logo: { alt: 'IO Quality Engineering', src: 'img/logo.svg', - height: 28, - width: 45, }, items: [ { diff --git a/src/css/custom.css b/src/css/custom.css index db93af8..47b5ed5 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -71,12 +71,55 @@ article img { background-color: #fff; } -@media (min-width: 800px) { - article img.small { - max-width: 50%; +.markdown { + line-height: 1.65; +} + +.markdown h1 { + font-size: 2rem; +} + +.markdown h2 { + font-size: 1.8rem; +} + +.markdown h3 { + font-size: 1.5rem; +} + +.markdown h4 { + font-size: 1rem; +} + +.markdown h5 { + font-size: 0.875rem; +} + +.markdown h6 { + font-size: 0.75rem; +} + +.menu { + padding: 24px !important; +} + +@media (min-width: 768px) { + .markdown { + padding: 32px 0 16px 0px !important; } } +@media (min-width: 1024px) { + .markdown { + padding: 56px !important; + padding-right: 0 !important; + } +} + +.hash-link::before { + content: '' !important; +} + article .img-reference { font-size: 0.75rem; text-align: center; @@ -84,11 +127,6 @@ article .img-reference { max-width: 90%; } -.navbar__toggle { - order: 9999; - margin-left: auto; -} - .navbar__title { font-family: 'Lexend', sans-serif; font-weight: 400; @@ -98,16 +136,16 @@ article .img-reference { display: none; } -@media (min-width: 500px) { - .navbar__title { - display: block; - } -} - div:has(> .dsla-search-wrapper) { padding: 0; } +@media (max-width: 996px) { + div:has(> .dsla-search-wrapper) { + margin-right: 45px; + } +} + .aa-DetachedSearchButton { border: none !important; } @@ -219,3 +257,10 @@ div:has(> .dsla-search-wrapper) { justify-content: space-between; align-items: center; } + +.default-sized-image { + width: 318px !important; + height: 318px !important; + box-shadow: none; + padding: 20px 10px !important; +} diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 44f873d..3dea8a6 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -33,7 +33,7 @@ .heroTitle { font-size: 2rem; font-weight: 800; - font-family: 'Heiti TC', Lexend, sans-serif; + font-family: 'Heiti TC', 'Lexend', 'sans-serif' !important; line-height: 1.33; color: var(--color-grey-1); letter-spacing: -1px; @@ -59,9 +59,9 @@ .heroImage { display: block; position: absolute; - bottom: -13%; + bottom: -10%; right: var(--ifm-spacing-horizontal); - width: 50%; + width: 41%; } } @@ -111,6 +111,7 @@ } .featureHeading h3 { margin: 0; + font-size: 24px; } .featureImage { @@ -141,6 +142,12 @@ text-underline-offset: 4px; } +.featureCta a:hover { + background-color: var(--color-red-1); + text-decoration: none; + color: var(--color-white-1); +} + .illustration { height: 263px; overflow: hidden; diff --git a/src/theme/Logo/index.tsx b/src/theme/Logo/index.tsx new file mode 100644 index 0000000..d6cf178 --- /dev/null +++ b/src/theme/Logo/index.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import Link from '@docusaurus/Link'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import { useThemeConfig, type NavbarLogo } from '@docusaurus/theme-common'; +import ThemedImage from '@theme/ThemedImage'; +import type { Props } from '@theme/Logo'; +import useMediaQuery from '@site/src/hooks/useMediaQuery'; + +function LogoThemedImage({ logo, alt, imageClassName }: { logo: NavbarLogo; alt: string; imageClassName?: string }) { + const isDesktopUp = useMediaQuery('(min-width: 997px)'); + const sources = { + light: useBaseUrl(isDesktopUp ? 'img/logo-and-name.svg' : logo.src), + dark: useBaseUrl(logo.srcDark || logo.src), + }; + const themedImage = ( + + ); + + // Is this extra div really necessary? + // introduced in https://github.com/facebook/docusaurus/pull/5666 + return imageClassName ?
{themedImage}
: themedImage; +} + +export default function Logo(props: Props): JSX.Element { + const { + siteConfig: { title }, + } = useDocusaurusContext(); + const { + navbar: { title: navbarTitle, logo }, + } = useThemeConfig(); + + const { imageClassName, titleClassName, ...propsRest } = props; + const logoLink = useBaseUrl(logo?.href || '/'); + + // If visible title is shown, fallback alt text should be + // an empty string to mark the logo as decorative. + const fallbackAlt = navbarTitle ? '' : title; + + // Use logo alt text if provided (including empty string), + // and provide a sensible fallback otherwise. + const alt = logo?.alt ?? fallbackAlt; + + return ( + + {logo && } + {navbarTitle != null && {navbarTitle}} + + ); +} diff --git a/src/theme/Navbar/Content/index.tsx b/src/theme/Navbar/Content/index.tsx new file mode 100644 index 0000000..03b3b5a --- /dev/null +++ b/src/theme/Navbar/Content/index.tsx @@ -0,0 +1,84 @@ +import React, { type ReactNode } from 'react'; +import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common'; +import { splitNavbarItems, useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'; +import NavbarItem, { type Props as NavbarItemConfig } from '@theme/NavbarItem'; +import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle'; +import SearchBar from '@theme/SearchBar'; +import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle'; +import NavbarLogo from '@theme/Navbar/Logo'; +import NavbarSearch from '@theme/Navbar/Search'; + +import styles from './styles.module.css'; +import { useLocation } from '@docusaurus/router'; +import clsx from 'clsx'; + +function useNavbarItems() { + // TODO temporary casting until ThemeConfig type is improved + return useThemeConfig().navbar.items as NavbarItemConfig[]; +} + +function NavbarItems({ items }: { items: NavbarItemConfig[] }): JSX.Element { + return ( + <> + {items.map((item, i) => ( + + new Error( + `A theme navbar item failed to render. + Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config: + ${JSON.stringify(item, null, 2)}`, + ) + } + > + + + ))} + + ); +} + +function NavbarContentLayout({ left, right }: { left: ReactNode; right: ReactNode }) { + const { pathname } = useLocation(); + return ( +
+
{left}
+
{right}
+
+ ); +} + +export default function NavbarContent(): JSX.Element { + const mobileSidebar = useNavbarMobileSidebar(); + + const items = useNavbarItems(); + const [leftItems, rightItems] = splitNavbarItems(items); + + const searchBarItem = items.find((item) => item.type === 'search'); + + return ( + + + + + } + right={ + // TODO stop hardcoding items? + // Ask the user to add the respective navbar items => more flexible + <> + + + {!searchBarItem && ( + + + + )} + {!mobileSidebar.disabled && } + + } + /> + ); +} diff --git a/src/theme/Navbar/Content/styles.module.css b/src/theme/Navbar/Content/styles.module.css new file mode 100644 index 0000000..4c9471e --- /dev/null +++ b/src/theme/Navbar/Content/styles.module.css @@ -0,0 +1,8 @@ +/* +Hide color mode toggle in small viewports + */ +@media (max-width: 996px) { + .colorModeToggle { + display: none; + } +} diff --git a/static/img/favicon.ico b/static/img/favicon.ico index e2871a5..4339b84 100644 Binary files a/static/img/favicon.ico and b/static/img/favicon.ico differ diff --git a/static/img/logo-and-name.svg b/static/img/logo-and-name.svg new file mode 100644 index 0000000..ff5ed8a --- /dev/null +++ b/static/img/logo-and-name.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/social-card.png b/static/img/social-card.png new file mode 100644 index 0000000..685b78f Binary files /dev/null and b/static/img/social-card.png differ