@san-siva/blogkit 1.1.2 → 1.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -2
- package/dist/cjs/index.css +1 -1
- package/dist/cjs/index.css.map +1 -1
- package/dist/cjs/styles/Blog.module.scss.js +1 -1
- package/dist/esm/index.css +1 -1
- package/dist/esm/index.css.map +1 -1
- package/dist/esm/styles/Blog.module.scss.js +1 -1
- package/package.json +1 -1
- package/src/styles/Blog.module.scss +12 -29
package/README.md
CHANGED
|
@@ -41,10 +41,28 @@ npm install react@^19.0.0 react-dom@^19.0.0 next@^16.0.10 @react-spring/web@^10.
|
|
|
41
41
|
|
|
42
42
|
## Quick Start
|
|
43
43
|
|
|
44
|
+
### 1. Import Styles
|
|
45
|
+
|
|
46
|
+
First, import the required stylesheets in your root layout or app entry point:
|
|
47
|
+
|
|
44
48
|
```tsx
|
|
45
|
-
|
|
46
|
-
import '@san-siva/stylekit/index.module.scss';
|
|
49
|
+
// app/layout.tsx or _app.tsx
|
|
47
50
|
import '@san-siva/blogkit/styles.css';
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
**Why is this required?**
|
|
54
|
+
Blogkit components rely on SCSS modules that are pre-compiled into CSS during the build process. The `styles.css` import provides:
|
|
55
|
+
- All component styles (Blog, CodeBlock, Mermaid, Table, Callout, etc.)
|
|
56
|
+
- Responsive design rules
|
|
57
|
+
- Theme variables and custom properties
|
|
58
|
+
- Critical layout styles
|
|
59
|
+
|
|
60
|
+
Without this import, components will render without styling and may appear broken.
|
|
61
|
+
|
|
62
|
+
### 2. Use Components
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import { Blog, BlogHeader, BlogSection, CodeBlock, Callout } from '@san-siva/blogkit';
|
|
48
66
|
|
|
49
67
|
export default function MyBlogPost() {
|
|
50
68
|
return (
|