fix: repaire pdf titles ml-364 (#373)

* feat(bot): add requirement to start with a title ml-364

* fix(frontend): fix inconsistent header hierarchy for PDF  ml-364

* feat(frontend): change heading size ml-364

---------

Co-authored-by: Farid Shabanov <[email protected]>

Author: Roman-PRV

apps/frontend/src/libs/components/meeting-pdf/libs/components/render-node.tsx

@@ -1,11 +1,11 @@
 import { Text, View } from "~/libs/components/components.js";
-import { HEADING_LEVEL_PRIMARY } from "~/libs/constants/constants.js";
 import {
 	type BlockContent,
 	type ListItem,
 	type PhrasingContent,
 } from "~/libs/types/types.js";
 
+import { getHeadingStyle } from "../helpers/get-heading-style.js";
 import { styles } from "../styles/meeting-pdf.styles.js";
 
 type MdNode = BlockContent | ListItem | PhrasingContent;
@@ -42,10 +42,7 @@ const renderNode = (node: MdNode, key: string): React.ReactElement => {
 
 	switch (node.type) {
 		case "heading": {
-			const style =
-				node.depth === HEADING_LEVEL_PRIMARY
-					? styles.heading1
-					: styles.heading2;
+			const style = getHeadingStyle(node.depth);
 
 			return (
 				<Text key={key} style={style}>

apps/frontend/src/libs/components/meeting-pdf/libs/helpers/get-heading-style.ts

@@ -0,0 +1,43 @@
+import { HeadingLevel } from "~/libs/enums/enums.js";
+
+import { styles } from "../styles/meeting-pdf.styles.js";
+
+const getHeadingStyle = (
+	depth: number,
+): {
+	fontSize: number;
+	fontWeight: string;
+	marginBottom: number;
+} => {
+	switch (depth) {
+		case HeadingLevel.H1: {
+			return styles.heading1;
+		}
+
+		case HeadingLevel.H2: {
+			return styles.heading2;
+		}
+
+		case HeadingLevel.H3: {
+			return styles.heading3;
+		}
+
+		case HeadingLevel.H4: {
+			return styles.heading4;
+		}
+
+		case HeadingLevel.H5: {
+			return styles.heading5;
+		}
+
+		case HeadingLevel.H6: {
+			return styles.heading6;
+		}
+
+		default: {
+			return styles.heading1;
+		}
+	}
+};
+
+export { getHeadingStyle };

apps/frontend/src/libs/components/meeting-pdf/libs/styles/meeting-pdf.styles.ts

@@ -3,16 +3,57 @@ import { StyleSheet } from "@react-pdf/renderer";
 const styles = StyleSheet.create({
 	bold: { fontWeight: "bold" },
 	bullet: { fontSize: 12, width: 10 },
-	heading1: { fontSize: 18, fontWeight: "bold", marginBottom: 8 },
-	heading2: { fontSize: 16, fontWeight: "bold", marginBottom: 7 },
+	heading1: {
+		fontSize: 20,
+		fontWeight: "bold",
+		marginBottom: 10,
+	},
+	heading2: {
+		fontSize: 18,
+		fontWeight: "bold",
+		marginBottom: 8,
+	},
+	heading3: {
+		fontSize: 16,
+		fontWeight: "600",
+		marginBottom: 7,
+	},
+	heading4: {
+		fontSize: 16,
+		fontStyle: "italic",
+		fontWeight: "600",
+		marginBottom: 6,
+	},
+	heading5: {
+		fontSize: 14,
+		fontStyle: "italic",
+		fontWeight: "500",
+		marginBottom: 5,
+	},
+	heading6: {
+		fontSize: 12,
+		fontStyle: "italic",
+		fontWeight: "500",
+		marginBottom: 4,
+	},
 	italic: { fontStyle: "italic" },
+	line: {
+		borderBottomColor: "#000",
+		borderBottomWidth: 1,
+		marginVertical: 8,
+	},
 	list: {},
 	listItem: { flexDirection: "row" },
 	page: { padding: 50 },
 	paragraph: { fontSize: 12, lineHeight: 1.4, marginBottom: 6 },
 	section: { marginBottom: 20 },
+	sectionHeader: {
+		fontSize: 20,
+		fontWeight: "bold",
+		margin: "auto",
+	},
 	text: { fontSize: 12, lineHeight: 1.5 },
-	title: { fontSize: 20, fontWeight: "bold", marginBottom: 10 },
+	title: { fontSize: 22, fontWeight: "bold", marginBottom: 10 },
 });
 
 export { styles };

apps/frontend/src/libs/components/meeting-pdf/meeting-pdf.tsx

@@ -21,12 +21,17 @@ const MeetingPdf: React.FC<MeetingPdfProperties> = ({
 				</Text>
 			</View>
 
+			<Text style={styles.sectionHeader}>SUMMARY SECTION</Text>
+			<View style={styles.line} />
 			<View style={styles.section}>{renderMarkdown(summary)}</View>
 
+			<Text style={styles.sectionHeader}>ACTION POINTS</Text>
+			<View style={styles.line} />
 			<View style={styles.section}>{renderMarkdown(actionItems)}</View>
 
 			<View style={styles.section}>
-				<Text style={styles.heading1}>Transcript</Text>
+				<Text style={styles.sectionHeader}>TRANSCRIPTION</Text>
+				<View style={styles.line} />
 				{renderMarkdown(transcription)}
 			</View>
 		</Page>

apps/frontend/src/libs/constants/constants.ts

@@ -1,6 +1,5 @@
 export { ACCEPTED_IMAGE_TYPES } from "./avatar-types.constant.js";
 export { CREATE_MEETING_FORM_DEFAULT_VALUES } from "./create-meeting-form-default-values.constant.js";
-export { HEADING_LEVEL_PRIMARY } from "./heading-level-primary.js";
 export { NAVIGATION_ITEMS } from "./navigation-items.constant.js";
 export {
 	EMPTY_ARRAY_LENGTH,

apps/frontend/src/libs/constants/heading-level-primary.ts

@@ -10,6 +10,7 @@ export { ContactInfo } from "./contact-info.enum.js";
 export { DataStatus } from "./data-status.enum.js";
 export { DOMEvent } from "./dom-event.enum.js";
 export { FeatureAnimation } from "./feature-animation.enum.js";
+export { HeadingLevel } from "./heading-level.enum.js";
 export { InputPasswordType } from "./input-password-type.enum.js";
 export {
 	LandingBgRingType,

apps/frontend/src/libs/enums/enums.ts

@@ -0,0 +1,10 @@
+const HeadingLevel = {
+	H1: 1,
+	H2: 2,
+	H3: 3,
+	H4: 4,
+	H5: 5,
+	H6: 6,
+} as const;
+
+export { HeadingLevel };