@san-siva/blogkit 1.1.20 → 1.1.22

package/src/staticComponents/BlogSectionStatic.tsx

@@ -6,31 +6,20 @@ interface BlogSectionStaticProperties {
 	title?: string;
 	category?: string;
 	children?: ReactNode;
-	increaseMarginBottom?: boolean;
 }
 
 const BlogSectionStatic = ({
 	title = '',
 	category = '',
 	children = null,
-	increaseMarginBottom = false,
 }: BlogSectionStaticProperties) => {
 	const titleWithCategory = category ? `${category} - ${title}` : title;
 	const id = generateIdForBlogTitle(titleWithCategory);
 
 	return (
-		<div
-			className={`${styles['blog-section']}
-				${
-					increaseMarginBottom
-						? styles['margin-bottom--9']
-						: styles['margin-bottom--6']
-				}`}
-			data-title={title}
-			data-id={id}
-		>
+		<div className={styles['blog-section']} data-title={title} data-id={id}>
 			{title ? (
-				<h4 className={styles['blog-section__title']}>{title}</h4>
+				<h3 className={styles['blog-section__title']}>{title}</h3>
 			) : null}
 			{children}
 		</div>

package/src/staticComponents/TocNodeStatic.tsx

@@ -0,0 +1,52 @@
+import type { MouseEvent } from 'react';
+
+import styles from '../styles/TocNode.module.scss';
+
+export interface TocNode {
+	id: string;
+	title: string;
+	depth: number;
+	children: TocNode[];
+}
+
+interface TocNodeProperties {
+	node: TocNode;
+	index: number;
+	visibleTitle: string | null;
+	onClick: (e: MouseEvent<HTMLParagraphElement>) => void;
+}
+
+const TocNode = ({ node, index, visibleTitle, onClick }: TocNodeProperties) => (
+	<div>
+		<p
+			data-idx={index}
+			data-id={node.id}
+			className={[
+				styles['toc-node__title'],
+				node.id === visibleTitle ? styles['toc-node__title--active'] : '',
+				node.depth === 1 ? styles['toc-node__title--sub'] : '',
+				node.depth === 2 ? styles['toc-node__title--sub-sub'] : '',
+			].join(' ')}
+			onClick={onClick}
+		>
+			{node.title}
+		</p>
+		{node.children.length > 0 && (
+			<div
+				className={`${styles['toc-node__children']} ${styles[`toc-node__children--${node.depth === 0 ? 'sub' : 'sub-sub'}`]}`}
+			>
+				{node.children.map((child, i) => (
+					<TocNode
+						key={child.id}
+						node={child}
+						index={i}
+						visibleTitle={visibleTitle}
+						onClick={onClick}
+					/>
+				))}
+			</div>
+		)}
+	</div>
+);
+
+export default TocNode;

package/src/styles/Blog.module.scss

@@ -22,36 +22,6 @@
 		padding-top: $top;
 		padding-right: 0;
 		border-radius: styles.$border-radius--1;
-
-		> .category__title {
-			display: block;
-			margin-bottom: styles.space(1);
-			font-size: styles.$font-size--p-small;
-			font-weight: styles.$font-weight--500;
-			cursor: pointer;
-
-			animation: fadeInDown 0.3s ease-in-out;
-			transition: all 0.3s ease-in-out;
-
-			&--active,
-			&:hover {
-				text-decoration: underline;
-				text-decoration-color: styles.$color--primary;
-			}
-
-			&--active {
-				color: styles.$color--primary;
-			}
-
-			&--sub {
-				font-size: styles.$font-size--small;
-				font-weight: styles.$font-weight--400;
-			}
-
-			&:last-child {
-				margin-bottom: 0;
-			}
-		}
 	}
 }
 

package/src/styles/Blog.module.scss.d.ts

@@ -3,11 +3,7 @@ declare const styles: {
   readonly 'blog__content': string;
   readonly 'blog__sidebar': string;
   readonly 'margin-bottom--3': string;
-  readonly 'margin-bottom-imp--2': string;
   readonly 'category__header': string;
-  readonly 'category__title': string;
-  readonly 'category__title--active': string;
-  readonly 'category__title--sub': string;
 };
 
 export default styles;

package/src/styles/BlogHeader.module.scss

@@ -1,12 +1,13 @@
 @use '@san-siva/stylekit/styles/index.module.scss' as stylekit;
 
 .blog-header {
-  line-height: stylekit.$line-height--small;
+	line-height: stylekit.$line-height--small;
+	font-weight: stylekit.$font-weight--800;
 }
 
 .blog-date {
-  display: block;
-  margin-bottom: calc(#{stylekit.space(8)} * 2);
-  color: stylekit.$color--dark;
-  font-style: italic;
+	display: block;
+	margin-bottom: calc(#{stylekit.space(8)} * 2);
+	color: stylekit.$color--dark;
+	font-style: italic;
 }

package/src/styles/BlogLink.module.scss

@@ -29,7 +29,7 @@
 		> p {
 			font-weight: stylekit.$font-weight--500;
 			font-family: stylekit.$font-family--primary;
-			font-size: stylekit.$font-size--p-small;
+			font-size: stylekit.$font-size--small;
 			margin-right: stylekit.space(0);
 		}
 	}

package/src/styles/BlogSection.module.scss

@@ -1,8 +1,18 @@
 @use '@san-siva/stylekit/styles/index.module.scss' as stylekit;
 
 .blog-section {
+	margin-bottom: stylekit.space(9);
+
 	&__title {
+		margin-top: stylekit.space(4);
 		margin-bottom: stylekit.space(2);
+		font-size: stylekit.$font-size--h3;
+		font-weight: stylekit.$font-weight--700;
+
+		&--empty > p {
+			color: transparent;
+			font-size: 0;
+		}
 	}
 
 	&__title-link {
@@ -18,29 +28,24 @@
 			text-decoration-color: stylekit.$color--primary;
 		}
 	}
-}
-
-.blog-section .blog-section > .blog-section__title {
-	font-size: stylekit.$font-size--h6;
-	margin-bottom: stylekit.space(2);
-}
-
-.blog-section .blog-section > *:first-child {
-	margin-top: stylekit.space(4);
-}
 
-.blog-section .blog-section:not(:last-child) {
-	margin-bottom: stylekit.space(4);
-}
+	.blog-section {
+		margin-bottom: stylekit.space(6);
 
-.blog-section .blog-section:last-child {
-	margin-bottom: stylekit.space(8);
-}
+		> .blog-section__title {
+			margin-top: stylekit.space(6);
+			font-weight: stylekit.$font-weight--600;
+			font-size: stylekit.$font-size--h5;
+		}
 
-.margin-bottom--6 {
-	margin-bottom: stylekit.space(6);
-}
+		.blog-section {
+			margin-bottom: stylekit.space(4);
 
-.margin-bottom--9 {
-	margin-bottom: stylekit.space(9);
+			> .blog-section__title {
+				margin-top: stylekit.space(4);
+				font-weight: stylekit.$font-weight--500;
+				font-size: stylekit.$font-size--h6;
+			}
+		}
+	}
 }

package/src/styles/BlogSection.module.scss.d.ts

@@ -1,9 +1,8 @@
 declare const styles: {
   readonly 'blog-section': string;
   readonly 'blog-section__title': string;
+  readonly 'blog-section__title--empty': string;
   readonly 'blog-section__title-link': string;
-  readonly 'margin-bottom--6': string;
-  readonly 'margin-bottom--9': string;
 };
 
 export default styles;

package/src/styles/CodeBlock.module.scss

@@ -62,7 +62,7 @@ $code-block-background-color: #282a36;
 			> code,
 			> code > * {
 				font-family: stylekit.$font-family--code;
-				font-size: stylekit.$font-size--p-small;
+				font-size: stylekit.$font-size--small;
 				font-weight: unset;
 				font-style: unset;
 				line-height: stylekit.$line-height--normal;
@@ -120,5 +120,5 @@ $code-block-background-color: #282a36;
 .code-block--static code {
 	color: stylekit.$color--base !important;
   font-family: stylekit.$font-family--code !important;
-  font-size: stylekit.$font-size--p-small !important;
+  font-size: stylekit.$font-size--small !important;
 }

package/src/styles/Table.module.scss

@@ -2,7 +2,7 @@
 
 @mixin cell-base {
 	padding: styles.rem(12) styles.rem(16);
-	font-size: styles.$font-size--p-small;
+	font-size: styles.$font-size--small;
 	font-family: styles.$font-family--code;
 	word-wrap: break-word;
 	overflow-wrap: break-word;

package/src/styles/TocNode.module.scss

@@ -0,0 +1,49 @@
+@use '@san-siva/stylekit/styles/index.module.scss' as styles;
+
+.toc-node {
+	&__title {
+		display: block;
+		margin-bottom: styles.space(1);
+		font-size: styles.$font-size--small;
+		font-weight: styles.$font-weight--500;
+		cursor: pointer;
+
+		animation: fadeInDown 0.3s ease-in-out;
+		transition: all 0.3s ease-in-out;
+
+		&--active,
+		&:hover {
+			text-decoration: underline;
+			text-decoration-color: styles.$color--primary;
+		}
+
+		&--active {
+			color: styles.$color--primary;
+		}
+
+		&--sub {
+			font-size: styles.$font-size--very-small;
+		}
+
+		&--sub-sub {
+			font-size: styles.$font-size--very-small;
+			font-weight: styles.$font-weight--400;
+		}
+
+		&:not(:last-child) {
+			margin-bottom: 0;
+		}
+	}
+
+	&__children {
+		&--sub-sub,
+		&--sub {
+			padding: styles.space(1) styles.space(2);
+			margin: styles.space(1);
+			border-left: 1px solid styles.$color--border;
+		}
+
+		&--sub-sub {
+		}
+	}
+}

package/src/styles/TocNode.module.scss.d.ts

@@ -0,0 +1,11 @@
+declare const styles: {
+  readonly 'toc-node__title': string;
+  readonly 'toc-node__title--active': string;
+  readonly 'toc-node__title--sub': string;
+  readonly 'toc-node__title--sub-sub': string;
+  readonly 'toc-node__children': string;
+  readonly 'toc-node__children--sub': string;
+  readonly 'toc-node__children--sub-sub': string;
+};
+
+export default styles;