From 917dc6144b9ebd76f095f8c296ea7b1c6b3d8e1b Mon Sep 17 00:00:00 2001
From: Dobrin Dimchev <dobrin.dimchev@sap.com>
Date: Fri, 22 Dec 2023 16:54:21 +0200
Subject: [PATCH] docs(storybook): use semantic headings for better seo (#8027)

---
 .../.storybook/addons/TitleEnhancer.ts        | 33 +++++++++++++++++++
 packages/playground/.storybook/docs.tsx       |  2 +-
 packages/playground/.storybook/manager.tsx    |  1 +
 packages/playground/assets/css/api.css        |  2 +-
 4 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 packages/playground/.storybook/addons/TitleEnhancer.ts

diff --git a/packages/playground/.storybook/addons/TitleEnhancer.ts b/packages/playground/.storybook/addons/TitleEnhancer.ts
new file mode 100644
index 000000000000..261823c7ad10
--- /dev/null
+++ b/packages/playground/.storybook/addons/TitleEnhancer.ts
@@ -0,0 +1,33 @@
+import { addons } from '@storybook/manager-api';
+import { CURRENT_STORY_WAS_SET } from '@storybook/core-events';
+
+const ADDON_ID = 'title-enhancer';
+
+addons.register(ADDON_ID, (api) => {
+    const setTitle = () => {
+        const storyData = api.getCurrentStoryData();
+        const getComponentTag = (title: string) => {
+            const componentName = title.split('/').pop();
+            return `ui5-${componentName?.split(' ').join('-').toLowerCase()}`;
+        }
+
+        let keywords = "";
+
+        if (storyData?.tags?.includes('autodocs')) {
+            // autodocs generated per component
+            keywords = `${storyData.title} - ${getComponentTag(storyData.title)}`;
+        } else if (storyData?.tags?.includes('story')) {
+            // stories generated per component
+            keywords = `${storyData.title} - ${getComponentTag(storyData.title)} - ${storyData.name}`;
+        } else if (storyData?.tags?.includes('docs')) {
+            // docs generated out of the md files
+            keywords = `${storyData.title}`;
+        }
+
+        document.title = `${keywords} | UI5 Web Components | Documentation`
+    };
+
+    api.on(CURRENT_STORY_WAS_SET, () => {
+        setTitle();
+    })
+});
\ No newline at end of file
diff --git a/packages/playground/.storybook/docs.tsx b/packages/playground/.storybook/docs.tsx
index def2891ccee0..010824d6cdc5 100644
--- a/packages/playground/.storybook/docs.tsx
+++ b/packages/playground/.storybook/docs.tsx
@@ -32,7 +32,7 @@ export const DocsPage = (args: DocsPageArgs) => {
                 )}
             </header>
             <div className='sb-ui5-component-package'><b>{args.package}</b></div>
-            <div className='sb-ui5-control-tag'>&lt;{args.component}&gt;</div>
+            <h2 className='sb-ui5-control-tag'>&lt;{args.component}&gt;</h2>
             <Subtitle />
             <Description />
             <br />
diff --git a/packages/playground/.storybook/manager.tsx b/packages/playground/.storybook/manager.tsx
index 606dab7a67b5..83e994ee582a 100644
--- a/packages/playground/.storybook/manager.tsx
+++ b/packages/playground/.storybook/manager.tsx
@@ -1,6 +1,7 @@
 import { addons } from '@storybook/manager-api';
 import wcTheme from "./sbTheme";
 import './addons/github/Github';
+import './addons/TitleEnhancer';
 
 addons.setConfig({
   theme: wcTheme,
diff --git a/packages/playground/assets/css/api.css b/packages/playground/assets/css/api.css
index a0cd3c34c925..7e137939d7c7 100644
--- a/packages/playground/assets/css/api.css
+++ b/packages/playground/assets/css/api.css
@@ -456,7 +456,7 @@ body {
     padding-bottom: 1rem;
 }
 
-.sb-ui5-control-tag {
+h2.sb-ui5-control-tag {
     margin-bottom: 2rem;
     font-size: 1.1rem;
     font-weight: 300;