diff --git a/assets/shared-bundle.js b/assets/shared-bundle.js index 7a0ff7f4d..079ceab78 100644 --- a/assets/shared-bundle.js +++ b/assets/shared-bundle.js @@ -19850,30 +19850,21 @@ var getIntrinsic = function GetIntrinsic(name, allowMissing) { var callBind$3 = {exports: {}}; -var esDefineProperty; -var hasRequiredEsDefineProperty; +var GetIntrinsic$3 = getIntrinsic; -function requireEsDefineProperty () { - if (hasRequiredEsDefineProperty) return esDefineProperty; - hasRequiredEsDefineProperty = 1; - - var GetIntrinsic = getIntrinsic; - - /** @type {import('.')} */ - var $defineProperty = GetIntrinsic('%Object.defineProperty%', true) || false; - if ($defineProperty) { - try { - $defineProperty({}, 'a', { value: 1 }); - } catch (e) { - // IE 8 has a broken defineProperty - $defineProperty = false; - } +/** @type {import('.')} */ +var $defineProperty$2 = GetIntrinsic$3('%Object.defineProperty%', true) || false; +if ($defineProperty$2) { + try { + $defineProperty$2({}, 'a', { value: 1 }); + } catch (e) { + // IE 8 has a broken defineProperty + $defineProperty$2 = false; } - - esDefineProperty = $defineProperty; - return esDefineProperty; } +var esDefineProperty = $defineProperty$2; + var GetIntrinsic$2 = getIntrinsic; var $gOPD$1 = GetIntrinsic$2('%Object.getOwnPropertyDescriptor%', true); @@ -19889,7 +19880,7 @@ if ($gOPD$1) { var gopd$1 = $gOPD$1; -var $defineProperty$1 = requireEsDefineProperty(); +var $defineProperty$1 = esDefineProperty; var $SyntaxError = syntax; var $TypeError$3 = type; @@ -19944,7 +19935,7 @@ var defineDataProperty$1 = function defineDataProperty( } }; -var $defineProperty = requireEsDefineProperty(); +var $defineProperty = esDefineProperty; var hasPropertyDescriptors = function hasPropertyDescriptors() { return !!$defineProperty; @@ -20019,7 +20010,7 @@ callBind$3.exports; var $call = GetIntrinsic('%Function.prototype.call%'); var $reflectApply = GetIntrinsic('%Reflect.apply%', true) || bind.call($call, $apply); - var $defineProperty = requireEsDefineProperty(); + var $defineProperty = esDefineProperty; var $max = GetIntrinsic('%Math.max%'); module.exports = function callBind(originalFunction) { diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css index 600a9a713..c3ed274df 100644 --- a/assets/tailwind-output.css +++ b/assets/tailwind-output.css @@ -700,6 +700,10 @@ video { grid-column: span 4 / span 4; } +.col-span-full { + grid-column: 1 / -1; +} + .\!my-auto { margin-top: auto !important; margin-bottom: auto !important; @@ -771,6 +775,10 @@ video { margin-right: 1rem; } +.mt-11 { + margin-top: 2.75rem; +} + .mt-12 { margin-top: 3rem; } @@ -779,6 +787,14 @@ video { margin-top: 0.5rem; } +.mt-4 { + margin-top: 1rem; +} + +.mt-5 { + margin-top: 1.25rem; +} + .mt-\[1\.875rem\] { margin-top: 1.875rem; } @@ -922,6 +938,10 @@ video { height: 1.5rem; } +.h-full { + height: 100%; +} + .min-h-4 { min-height: 1rem; } @@ -1466,6 +1486,11 @@ video { padding-right: 1rem; } +.px-gap-large { + padding-left: 1rem; + padding-right: 1rem; +} + .px-margin-extension { padding-left: 1rem; padding-right: 1rem; @@ -1506,6 +1531,11 @@ video { padding-bottom: 4.84375rem; } +.py-gap-medium { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + .py-margin-mobile-dense { padding-top: 0.75rem; padding-bottom: 0.75rem; @@ -1857,6 +1887,15 @@ video { -moz-osx-font-smoothing: grayscale; } +.heading-1 { + font-family: var(--font-basel-grotesk); + font-size: 3.25rem; + font-weight: 485; + line-height: 3.75rem; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + .heading-2 { font-family: var(--font-basel-grotesk); font-size: 2.25rem; @@ -2569,6 +2608,92 @@ video { } } +.CategoryPage, +.SectionPage { + .article-list-item { + grid-column: span 4 / span 4; + } + .article-list-item { + a { + position: relative; + } + a { + font-family: var(--font-basel-grotesk); + font-size: 1rem; + font-weight: 485; + line-height: 1/5rem; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + a { + &:before { + top: 0.75rem; + } + &:before { + right: 1rem; + } + &:before { + opacity: 0; + } + &:before { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + } + &:where(.dark, .dark *):before { + display: none; + } + &:before { + display: block; + position: absolute; + content: ''; + background-image: url('../assets/right-arrow-light.svg'); + background-size: 1.5rem 1.5rem; + height: 1.5rem; + width: 1.5rem; + } + &:hover:before { + opacity: 1; + } + &:after { + top: 0.75rem; + } + &:after { + right: 1rem; + } + &:after { + display: none; + } + &:after { + opacity: 0; + } + &:after { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + } + &:where(.dark, .dark *):after { + display: block; + } + &:after { + position: absolute; + content: ''; + background-image: url('../assets/right-arrow-dark.svg'); + background-size: 1.5rem 1.5rem; + height: 1.5rem; + width: 1.5rem; + } + } + } + .see-all-articles-button { + margin-top: 1rem; + } +} + html:has(.ArticlePage) { scroll-behavior: smooth; scroll-padding-top: 90px !important; @@ -2651,6 +2776,11 @@ html:has(.ArticlePage) { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.group:hover .group-hover\:text-light-accent-1 { + --tw-text-opacity: 1; + color: rgb(245 13 180 / var(--tw-text-opacity)); +} + .group:hover .group-hover\:text-light-neutral-1 { --tw-text-opacity: 1; color: rgb(34 34 34 / var(--tw-text-opacity)); @@ -3089,6 +3219,11 @@ html:has(.ArticlePage) { color: rgb(252 116 254 / var(--tw-text-opacity)); } +.group:hover .group-hover\:dark\:text-dark-accent-1:where(.dark, .dark *) { + --tw-text-opacity: 1; + color: rgb(252 116 254 / var(--tw-text-opacity)); +} + .group:hover .group-hover\:dark\:text-dark-neutral-1:where(.dark, .dark *) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); diff --git a/rollup.config.mjs b/rollup.config.mjs index 59f8cc016..6615a153e 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -39,6 +39,8 @@ export default defineConfig([ footer: 'src/modules/footer/index.ts', homepage: 'src/modules/homepage/index.ts', 'article-page': 'src/modules/article-page/index.ts', + 'category-page': 'src/modules/category-page/index.ts', + 'section-page': 'src/modules/section-page/index.ts', }, output: { dir: 'assets', diff --git a/src/lib/types.ts b/src/lib/types.ts index 4c1f8ecd1..94e54b739 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -218,3 +218,11 @@ export type HomepageData = { export type ArticlePageData = { article: Article; }; + +export type CategoryPageData = { + category: Category; +}; + +export type SectionPageData = { + section: Section; +}; diff --git a/src/modules/article-page/ArticlePageModule.tsx b/src/modules/article-page/ArticlePageModule.tsx index 3c36b8a17..e0555d334 100644 --- a/src/modules/article-page/ArticlePageModule.tsx +++ b/src/modules/article-page/ArticlePageModule.tsx @@ -6,10 +6,12 @@ type Props = { articlePageData: ArticlePageData; }; +// We are not using reusable component since we are having issue navigation and footer not rendering when we use reusable component accross page. +// If you change breadcrumbs, you should also update the breadcrumbs in the CategoryPageModule.tsx file to have consistant design. export const ArticleBreadcrumbs: FC = ({ articlePageData }) => { return ( <> -
+
Home @@ -27,6 +29,12 @@ export const ArticleBreadcrumbs: FC = ({ articlePageData }) => { ); })} + + + + {articlePageData.article.title} + +
); diff --git a/src/modules/category-page/CategoryPageModule.tsx b/src/modules/category-page/CategoryPageModule.tsx new file mode 100644 index 000000000..ce8bb8a09 --- /dev/null +++ b/src/modules/category-page/CategoryPageModule.tsx @@ -0,0 +1,62 @@ +import { FC } from 'react'; +import { CategoryPageData } from '../../lib/types'; +import cn from 'classnames'; + +type Props = { + categoryPageData: CategoryPageData; +}; + +// We are not using reusable component since we are having issue navigation and footer not rendering when we use reusable component accross page. +// If you change breadcrumbs, you should also update the breadcrumbs in the ArticlePageModule.tsx file to have consistant design. +export const CategoryBreadcrumbs: FC = ({ categoryPageData }) => { + const category = categoryPageData.category; + const pathSteps = [{ name: category.name, url: category.url, target: '_self' }]; + + return ( + <> +
+ + + Home + + + {pathSteps.map((step) => { + return ( + <> + + + + {step.name} + + + + ); + })} +
+ + ); +}; + +const Chevron: FC<{ + color?: 'neutral-1'; +}> = ({ color = 'neutral-1' }) => { + return ( + + + + ); +}; diff --git a/src/modules/category-page/index.ts b/src/modules/category-page/index.ts new file mode 100644 index 000000000..0ef684ffb --- /dev/null +++ b/src/modules/category-page/index.ts @@ -0,0 +1 @@ +export { renderCategoryBreadcrumbs } from './renderCategoryPage'; diff --git a/src/modules/category-page/renderCategoryPage.tsx b/src/modules/category-page/renderCategoryPage.tsx new file mode 100644 index 000000000..ec328bb9c --- /dev/null +++ b/src/modules/category-page/renderCategoryPage.tsx @@ -0,0 +1,18 @@ +import { render } from 'react-dom'; +import { CategoryPageData } from '../../lib/types'; +import { Settings } from '../shared'; +import { createTheme, ThemeProviders } from '../shared'; +import { CategoryBreadcrumbs } from './CategoryPageModule'; + +export async function renderCategoryBreadcrumbs( + settings: Settings, + categoryPageData: CategoryPageData, + container: HTMLElement +) { + render( + + + , + container + ); +} diff --git a/src/modules/homepage/HomepageModule.tsx b/src/modules/homepage/HomepageModule.tsx index 301a69790..8b7f17d97 100644 --- a/src/modules/homepage/HomepageModule.tsx +++ b/src/modules/homepage/HomepageModule.tsx @@ -170,7 +170,7 @@ const ArticleLinkCard: FC<{ title: string; description: string; url: string }> = className="col-span-4 group flex flex-row transition rounded-medium py-padding-small px-padding-medium bg-light-surface-2 dark:bg-dark-surface-2 hover:bg-light-accent-2 hover:dark:bg-dark-accent-2" target="_self" > -
+

{title}

diff --git a/src/modules/section-page/SectionPageModule.tsx b/src/modules/section-page/SectionPageModule.tsx new file mode 100644 index 000000000..82eb1c326 --- /dev/null +++ b/src/modules/section-page/SectionPageModule.tsx @@ -0,0 +1,66 @@ +import { FC } from 'react'; +import { SectionPageData } from '../../lib/types'; +import cn from 'classnames'; + +type Props = { + sectionPageData: SectionPageData; +}; + +// We are not using reusable component since we are having issue navigation and footer not rendering when we use reusable component accross page. +// If you change breadcrumbs, you should also update the breadcrumbs in the ArticlePageModule.tsx and SectionPageModule.tsxfile to have consistant design. +export const SectionBreadcrumbs: FC = ({ sectionPageData }) => { + const article = sectionPageData.section.articles[0]; + + if (!article) { + return null; + } + const pathSteps = article.path_steps; + + return ( + <> +
+ + + Home + + + {pathSteps.map((step) => { + return ( + <> + + + + {step.name} + + + + ); + })} +
+ + ); +}; + +const Chevron: FC<{ + color?: 'neutral-1'; +}> = ({ color = 'neutral-1' }) => { + return ( + + + + ); +}; diff --git a/src/modules/section-page/index.ts b/src/modules/section-page/index.ts new file mode 100644 index 000000000..ff19c18a3 --- /dev/null +++ b/src/modules/section-page/index.ts @@ -0,0 +1 @@ +export { renderSectionBreadcrumbs } from './renderSectionPage'; diff --git a/src/modules/section-page/renderSectionPage.tsx b/src/modules/section-page/renderSectionPage.tsx new file mode 100644 index 000000000..dd2542b38 --- /dev/null +++ b/src/modules/section-page/renderSectionPage.tsx @@ -0,0 +1,18 @@ +import { render } from 'react-dom'; +import { SectionPageData } from '../../lib/types'; +import { Settings } from '../shared'; +import { createTheme, ThemeProviders } from '../shared'; +import { SectionBreadcrumbs } from './SectionPageModule'; + +export async function renderSectionBreadcrumbs( + settings: Settings, + sectionPageData: SectionPageData, + container: HTMLElement +) { + render( + + + , + container + ); +} diff --git a/styles/main.css b/styles/main.css index 9a8e317a3..bd2699340 100644 --- a/styles/main.css +++ b/styles/main.css @@ -198,6 +198,46 @@ } } +.CategoryPage, +.SectionPage { + .article-list-item { + @apply col-span-4; + + a { + @apply relative body-2; + + &:before { + @apply top-gap-medium right-gap-large dark:hidden transition opacity-0; + display: block; + position: absolute; + content: ''; + background-image: url('../assets/right-arrow-light.svg'); + background-size: 1.5rem 1.5rem; + height: 1.5rem; + width: 1.5rem; + } + + &:hover:before { + @apply opacity-100; + } + + &:after { + @apply top-gap-medium right-gap-large hidden dark:block transition opacity-0; + position: absolute; + content: ''; + background-image: url('../assets/right-arrow-dark.svg'); + background-size: 1.5rem 1.5rem; + height: 1.5rem; + width: 1.5rem; + } + } + } + + .see-all-articles-button { + @apply mt-4; + } +} + html:has(.ArticlePage) { scroll-behavior: smooth; scroll-padding-top: 90px !important; diff --git a/templates/category_page.hbs b/templates/category_page.hbs index bd7702002..611ad7886 100644 --- a/templates/category_page.hbs +++ b/templates/category_page.hbs @@ -1,63 +1,62 @@ -
-
-
- {{breadcrumbs}} -
- - {{search scoped=settings.scoped_kb_search submit=false}} -
-
-
-
-
-

{{category.name}}

- {{#if category.description}} -

{{category.description}}

- {{/if}} -
- -
- {{#each sections}} -
-

- {{name}} -

- {{#if articles}} -
    - {{#each articles}} -
  • - {{#if promoted}} - - - - {{/if}} - {{title}} - {{#if internal}} - - - - - {{/if}} -
    • - {{/each}} -
- {{#if more_articles}} - - {{t 'show_all_articles' count=article_count}} +
+ +
+
+
+
+

{{category.name}}

+
+ {{#each sections}} +

+ + {{name}} +

+ {{#if articles}} + + {{#if more_articles}} +
+ + + {{t 'show_all_articles' count=article_count}} + + +
+ {{/if}} {{/if}} - {{/if}} -
- {{else}} - - {{t 'empty'}} - - {{/each}} + + {{else}} + + {{t 'empty'}} + + {{/each}} +
+ + \ No newline at end of file diff --git a/templates/document_head.hbs b/templates/document_head.hbs index bc58c25c1..3a3a99a7b 100644 --- a/templates/document_head.hbs +++ b/templates/document_head.hbs @@ -17,6 +17,8 @@ "footer": "{{asset 'footer-bundle.js'}}", "homepage": "{{asset 'homepage-bundle.js'}}", "article-page": "{{asset 'article-page-bundle.js'}}", + "category-page": "{{asset 'category-page-bundle.js'}}", + "section-page": "{{asset 'section-page-bundle.js'}}", "new-request-form-translations": "{{asset 'new-request-form-translations-bundle.js'}}", "shared": "{{asset 'shared-bundle.js'}}", "wysiwyg": "{{asset 'wysiwyg-bundle.js'}}", diff --git a/templates/section_page.hbs b/templates/section_page.hbs index 8a5226cea..537dd80d9 100644 --- a/templates/section_page.hbs +++ b/templates/section_page.hbs @@ -1,72 +1,47 @@ -
-
-
- {{breadcrumbs}} -
- - {{search scoped=settings.scoped_kb_search submit=false}} + +
+ +
+
+
+
+

{{section.name}}

+
+ {{#if section.articles}} + + {{else}} + + {{t 'empty'}} + + {{/if}} + {{!-- cannot find any article that needs pagination, we might need to add style on this in the future as app grows --}} + {{pagination "section.articles"}} +
+
+
-
-
-
-

{{section.name}}

- {{#if settings.show_follow_section}} -
{{subscribe}}
- {{/if}} - {{#if section.description}} -

{{section.description}}

- {{/if}} -
- - {{#if section.sections}} - - {{/if}} + \ No newline at end of file