@san-siva/blogkit 1.1.42 → 1.1.43

package/dist/esm/staticComponents/BlogStatic.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import styles from '../styles/Blog.module.scss.js';
 
-const BlogStatic = ({ children, jsonLd }) => {
-    return (jsxs("div", { className: styles.blog, children: [jsonLd && (jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(jsonLd) } })), jsx("div", { className: styles['blog__content'], children: children })] }));
+const BlogStatic = ({ children, jsonLd, increasedWidthMode = false }) => {
+    return (jsxs("div", { className: `${styles.blog} ${increasedWidthMode ? styles['blog--increased-width'] : ''}`, children: [jsonLd && (jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(jsonLd) } })), jsx("div", { className: styles['blog__content'], children: children })] }));
 };
 
 export { BlogStatic as default };

package/dist/esm/staticComponents/BlogStatic.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlogStatic.js","sources":["../../../src/staticComponents/BlogStatic.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { Thing, WithContext } from 'schema-dts';\nimport styles from '../styles/Blog.module.scss';\n\ninterface BlogStaticProperties {\n\tchildren: ReactNode;\n\tjsonLd?: WithContext<Thing>;\n}\n\nconst BlogStatic = ({ children, jsonLd }: BlogStaticProperties) => {\n\treturn (\n\t\t<div className={styles.blog}>\n\t\t\t{jsonLd && (\n\t\t\t\t<script\n\t\t\t\t\ttype=\"application/ld+json\"\n\t\t\t\t\tdangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<div className={styles['blog__content']}>{children}</div>\n\t\t</div>\n\t);\n};\n\nexport default BlogStatic;\n"],"names":["_jsxs","_jsx"],"mappings":";;;AASA,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAwB,KAAI;AACjE,IAAA,QACCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,QAAA,EAAA,CACzB,MAAM,KACNC,GAAA,CAAA,QAAA,EAAA,EACC,IAAI,EAAC,qBAAqB,EAC1B,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,EAAA,CAC1D,CACF,EACDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,CAAA,EAAA,CACpD;AAER;;;;"}
+{"version":3,"file":"BlogStatic.js","sources":["../../../src/staticComponents/BlogStatic.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { Thing, WithContext } from 'schema-dts';\nimport styles from '../styles/Blog.module.scss';\n\ninterface BlogStaticProperties {\n\tchildren: ReactNode;\n\tjsonLd?: WithContext<Thing>;\n\tincreasedWidthMode?: boolean;\n}\n\nconst BlogStatic = ({ children, jsonLd, increasedWidthMode = false }: BlogStaticProperties) => {\n\treturn (\n\t\t<div className={`${styles.blog} ${increasedWidthMode ? styles['blog--increased-width'] : ''}`}>\n\n\t\t\t{jsonLd && (\n\t\t\t\t<script\n\t\t\t\t\ttype=\"application/ld+json\"\n\t\t\t\t\tdangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<div className={styles['blog__content']}>{children}</div>\n\t\t</div>\n\t);\n};\n\nexport default BlogStatic;\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAUA,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,kBAAkB,GAAG,KAAK,EAAwB,KAAI;IAC7F,QACCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,IAAI,CAAA,CAAA,EAAI,kBAAkB,GAAG,MAAM,CAAC,uBAAuB,CAAC,GAAG,EAAE,CAAA,CAAE,EAAA,QAAA,EAAA,CAE3F,MAAM,KACNC,GAAA,CAAA,QAAA,EAAA,EACC,IAAI,EAAC,qBAAqB,EAC1B,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,EAAA,CAC1D,CACF,EACDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,CAAA,EAAA,CACpD;AAER;;;;"}

package/dist/esm/styles/Blog.module.scss.js

@@ -1,4 +1,4 @@
-var styles = {"margin-bottom--3":"Blog-module_margin-bottom--3__ir35O","category__header":"Blog-module_category__header__F1K0V","blog":"Blog-module_blog__Lpv6Z","blog__content":"Blog-module_blog__content__RMDiY","blog__sidebar":"Blog-module_blog__sidebar__uSu3l"};
+var styles = {"margin-bottom--3":"Blog-module_margin-bottom--3__ir35O","category__header":"Blog-module_category__header__F1K0V","blog":"Blog-module_blog__Lpv6Z","blog__content":"Blog-module_blog__content__RMDiY","blog__sidebar":"Blog-module_blog__sidebar__uSu3l","blog--increased-width":"Blog-module_blog--increased-width__QxyOD"};
 
 export { styles as default };
 //# sourceMappingURL=Blog.module.scss.js.map

package/dist/types/components/Blog.d.ts

@@ -4,7 +4,8 @@ interface BlogProperties {
     children: ReactNode;
     title?: string;
     jsonLd?: WithContext<Thing>;
+    increasedWidthMode?: boolean;
 }
-declare const Blog: ({ children, title, jsonLd }: BlogProperties) => import("react").JSX.Element;
+declare const Blog: ({ children, title, jsonLd, increasedWidthMode }: BlogProperties) => import("react").JSX.Element;
 export default Blog;
 //# sourceMappingURL=Blog.d.ts.map

package/dist/types/components/Blog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Blog.d.ts","sourceRoot":"","sources":["../../../src/components/Blog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAKrD,UAAU,cAAc;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,IAAI,GAAI,6BAAiD,cAAc,gCAM5E,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Blog.d.ts","sourceRoot":"","sources":["../../../src/components/Blog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAKrD,UAAU,cAAc;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,QAAA,MAAM,IAAI,GAAI,iDAA6E,cAAc,gCAMxG,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/types/dynamicComponents/BlogDynamic.d.ts

@@ -4,11 +4,12 @@ interface BlogProperties {
     children: ReactNode;
     title?: string;
     jsonLd?: WithContext<Thing>;
+    increasedWidthMode?: boolean;
 }
 export interface ForwardedReference {
     parentRef: HTMLDivElement;
     childRefs: ForwardedReference[];
 }
-declare const Blog: ({ children, title, jsonLd, }: BlogProperties) => import("react").JSX.Element;
+declare const Blog: ({ children, title, jsonLd, increasedWidthMode, }: BlogProperties) => import("react").JSX.Element;
 export default Blog;
 //# sourceMappingURL=BlogDynamic.d.ts.map

package/dist/types/dynamicComponents/BlogDynamic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlogDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/BlogDynamic.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AASrD,UAAU,cAAc;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAkB;IAClC,SAAS,EAAE,cAAc,CAAC;IAC1B,SAAS,EAAE,kBAAkB,EAAE,CAAC;CAChC;AAsBD,QAAA,MAAM,IAAI,GAAI,8BAIX,cAAc,gCAuDhB,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"BlogDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/BlogDynamic.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AASrD,UAAU,cAAc;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,kBAAkB;IAClC,SAAS,EAAE,cAAc,CAAC;IAC1B,SAAS,EAAE,kBAAkB,EAAE,CAAC;CAChC;AAsBD,QAAA,MAAM,IAAI,GAAI,kDAKX,cAAc,gCAuDhB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/types/staticComponents/BlogStatic.d.ts

@@ -3,7 +3,8 @@ import type { Thing, WithContext } from 'schema-dts';
 interface BlogStaticProperties {
     children: ReactNode;
     jsonLd?: WithContext<Thing>;
+    increasedWidthMode?: boolean;
 }
-declare const BlogStatic: ({ children, jsonLd }: BlogStaticProperties) => import("react").JSX.Element;
+declare const BlogStatic: ({ children, jsonLd, increasedWidthMode }: BlogStaticProperties) => import("react").JSX.Element;
 export default BlogStatic;
 //# sourceMappingURL=BlogStatic.d.ts.map

package/dist/types/staticComponents/BlogStatic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlogStatic.d.ts","sourceRoot":"","sources":["../../../src/staticComponents/BlogStatic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAGrD,UAAU,oBAAoB;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,UAAU,GAAI,sBAAsB,oBAAoB,gCAY7D,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"BlogStatic.d.ts","sourceRoot":"","sources":["../../../src/staticComponents/BlogStatic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAGrD,UAAU,oBAAoB;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,QAAA,MAAM,UAAU,GAAI,0CAAkD,oBAAoB,gCAazF,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@san-siva/blogkit",
-	"version": "1.1.42",
+	"version": "1.1.43",
 	"description": "A reusable blog component library for React/Next.js applications with code highlighting, diagrams, and rich content features",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
@@ -41,7 +41,7 @@
 	"author": "Santhosh Siva",
 	"license": "MIT",
 	"dependencies": {
-		"@san-siva/stylekit": "^1.0.13",
+		"@san-siva/stylekit": "^1.0.14",
 		"schema-dts": "^1.1.5"
 	},
 	"peerDependencies": {

package/src/components/Blog.tsx

@@ -11,12 +11,13 @@ interface BlogProperties {
 	children: ReactNode;
 	title?: string;
 	jsonLd?: WithContext<Thing>;
+	increasedWidthMode?: boolean;
 }
 
-const Blog = ({ children, title = 'In this article', jsonLd }: BlogProperties) => {
+const Blog = ({ children, title = 'In this article', jsonLd, increasedWidthMode = false }: BlogProperties) => {
 	return (
-		<Suspense fallback={<BlogStatic jsonLd={jsonLd}>{children}</BlogStatic>}>
-			<BlogDynamic title={title} jsonLd={jsonLd}>{children}</BlogDynamic>
+		<Suspense fallback={<BlogStatic jsonLd={jsonLd} increasedWidthMode={increasedWidthMode}>{children}</BlogStatic>}>
+			<BlogDynamic title={title} jsonLd={jsonLd} increasedWidthMode={increasedWidthMode}>{children}</BlogDynamic>
 		</Suspense>
 	);
 };

package/src/dynamicComponents/BlogDynamic.tsx

@@ -22,6 +22,7 @@ interface BlogProperties {
 	children: ReactNode;
 	title?: string;
 	jsonLd?: WithContext<Thing>;
+	increasedWidthMode?: boolean;
 }
 
 export interface ForwardedReference {
@@ -53,6 +54,7 @@ const Blog = ({
 	children,
 	title = 'In this article',
 	jsonLd,
+	increasedWidthMode = false,
 }: BlogProperties) => {
 	const [visibleTitle, setVisibleTitle] = useState<string | null>(null);
 	const [showTOC, setShowTOC] = useState(false);
@@ -75,7 +77,7 @@ const Blog = ({
 	});
 
 	return (
-		<div className={styles.blog}>
+		<div className={`${styles.blog} ${increasedWidthMode ? styles['blog--increased-width'] : ''}`}>
 			{jsonLd && (
 				<script
 					type="application/ld+json"

package/src/staticComponents/BlogStatic.tsx

@@ -5,11 +5,13 @@ import styles from '../styles/Blog.module.scss';
 interface BlogStaticProperties {
 	children: ReactNode;
 	jsonLd?: WithContext<Thing>;
+	increasedWidthMode?: boolean;
 }
 
-const BlogStatic = ({ children, jsonLd }: BlogStaticProperties) => {
+const BlogStatic = ({ children, jsonLd, increasedWidthMode = false }: BlogStaticProperties) => {
 	return (
-		<div className={styles.blog}>
+		<div className={`${styles.blog} ${increasedWidthMode ? styles['blog--increased-width'] : ''}`}>
+
 			{jsonLd && (
 				<script
 					type="application/ld+json"

package/src/styles/Blog.module.scss

@@ -1,10 +1,18 @@
-@use '@san-siva/stylekit/styles/index.module.scss' as styles;
+@use '@san-siva/stylekit/styles/utils.module.scss' as utils;
+@use '@san-siva/stylekit/styles/index.module.scss' as styles with (
+	$max-width--page-contents: utils.rem(1200)
+);
+
+$sidebar-width: 22rem;
+$content-width: styles.rem(780);
+$total-width: calc(#{$content-width} + #{styles.space(8)} + #{$sidebar-width});
 
 .blog {
 	width: 100%;
-	max-width: 100%;
+	max-width: $total-width;
+	margin: 0 auto;
 	display: grid;
-	grid-template-columns: #{styles.rem(780)} minmax(#{styles.rem(320)}, 1fr);
+	grid-template-columns: $content-width $sidebar-width;
 	grid-gap: styles.space(8);
 
 	&__content {
@@ -23,11 +31,21 @@
 		padding-right: 0;
 		border-radius: styles.$border-radius--1;
 	}
+
+	&--increased-width {
+		max-width: 100%;
+		grid-template-columns: minmax(0, 1fr) $sidebar-width;
+
+		.blog__content {
+			max-width: none;
+			min-width: 0;
+		}
+	}
 }
 
 $breakpoint: calc(
 	#{styles.rem(120)} + #{styles.rem(780)} + #{styles.space(8)} +
-		#{styles.rem(320)} + #{styles.rem(120)}
+		#{$sidebar-width} + #{styles.rem(120)}
 );
 
 @media (max-width: $breakpoint) {

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

@@ -1,5 +1,6 @@
 declare const styles: {
   readonly blog: string;
+  readonly 'blog--increased-width': string;
   readonly 'blog__content': string;
   readonly 'blog__sidebar': string;
   readonly 'margin-bottom--3': string;