Documentation fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@himalaya-ui/core",
-  "version": "0.0.60",
+  "version": "0.0.61",
   "main": "dist/bundle/index.js",
   "module": "dist/bundle/esm/index.js",
   "types": "dist/bundle/esm/index.d.ts",
@@ -18,7 +18,7 @@
   "scripts": {
     "dev": "yarn docs:collect && next dev ./src",
     "docs:start": "next start src",
-    "docs:collect": "node scripts/collect-meta.js",
+    "docs:collect": "node scripts/collect-meta.mjs",
     "docs:build": "yarn docs:collect && cross-env NODE_ENV=production next build ./src && yarn docs:sitemap",
     "docs:sitemap": "node scripts/sitemap.js",
     "prettier": "prettier --write src",
@@ -163,6 +163,7 @@
     "readline": "^1.3.0",
     "reflect-metadata": "^0.1.13",
     "rehype-join-line": "^1.0.2",
+    "remark": "^15.0.1",
     "remark-comment": "^1.0.0",
     "remark-gfm": "^3.0.1",
     "remark-mdx": "^2.3.0",
@@ -173,6 +174,7 @@
     "screenfull": "^6.0.2",
     "sharp": "^0.32.6",
     "sitemap": "^7.1.1",
+    "strip-markdown": "^6.0.0",
     "styled-jsx": "^5.1.2",
     "styled-jsx-plugin-sass": "^1.0.0",
     "svgo": "^3.0.2",

scripts/collect-meta.js → scripts/collect-meta.mjs

@@ -1,8 +1,16 @@
-const fs = require('fs-extra');
-const path = require('path');
-const extractMetadata = require('extract-mdx-metadata');
+import fs from 'fs-extra';
+import path from 'path'
+import extractMetadata from 'extract-mdx-metadata'
+import { remark } from 'remark'
+
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 const pagePrefix = path.join(__dirname, '../src/app');
 
+import strip from 'strip-markdown'
+
 const getTargetPath = () => {
   return path.join(__dirname, '../src/lib/data/', `metadata.json`);
 };
@@ -27,7 +35,12 @@ const groupWeights = {
   effects: 12,
 };
 
-const getDescription = content => {
+const truncateString = (string = '', maxLength = 50) =>
+  string.length > maxLength
+    ? `${string.substring(0, maxLength)}…`
+    : string
+
+const getDescription = async content => {
   const lines = content.split('\n');
   let description = '';
 
@@ -50,7 +63,14 @@ const getDescription = content => {
       }
     }
   }
-  return description.trim();
+
+
+  const file = await remark()
+    .use(strip)
+    .process(description.replace(/<[^>]*>?/gm, ''));
+
+  const reformat = String(file).replace(/(\r\n|\n|\r)/gm, "").replace(/\s+/g, ' ').trim()
+  return truncateString(reformat, 295);
 };
 
 const getMetadata = async (files, parentPath) => {
@@ -104,10 +124,12 @@ const getMetadata = async (files, parentPath) => {
             const previousFolder = path.basename(filePath);
             try {
               const content = await fs.readFile(path.join(filePath, previousFolder + '.mdx'), 'utf-8');
-
               const meta = await extractMetadata(content);
+              const description = await getDescription(content);
 
-              const description = getDescription(content);
+              if (!description || description.length <= 0) {
+                console.warn("Cant found any description for ", path.join(filePath, previousFolder + '.mdx'));
+              }
 
               const url = filePath.replace(pagePrefix, '').replace('.mdx', '').replace(/\\/g, '/').toString();
               const val = {

src/app/components/box/box.mdx

@@ -1,17 +1,19 @@
-import { Box } from 'components'
-import { Layout, Playground, Attributes } from 'lib/components'
+import { Box } from 'components';
+import { Layout, Playground, Attributes } from 'lib/components';
 
 export const meta = {
   title: 'Box',
   group: 'Layout',
-}
+};
 
 # Box
 
-Polymorphic scalable component.
+The `Box` UI component is a versatile and scalable element that can adapt to various use cases within your web application.
 
 <Playground
   scope={{ Box }}
+  desc="The `Box` component is a flexible building block that can contain any content you want to display."
+  title="Box example"
   code={`
 <Box>
     Hello
@@ -21,7 +23,7 @@ Polymorphic scalable component.
 
 <Playground
   title="Polymorphic property"
-  desc="Provide an element to render the Box as."
+  desc="You can specify the element to render the `Box` as, allowing you to tailor it to your specific needs. For example, you can render it as a paragraph, an anchor tag, or other HTML elements."
   scope={{ Box }}
   code={`
 <Box as='a' href='#'>
@@ -32,7 +34,7 @@ Polymorphic scalable component.
 
 <Playground
   title="Scalability"
-  desc="Use props to scale the Box."
+  desc="The `Box` component is highly scalable. You can use props to adjust its appearance, size, and styling, making it suitable for different parts of your application."
   scope={{ Box }}
   code={`
 <Box font={3} py='3rem' mx='auto' width='300px'>

src/app/components/button/button.mdx

@@ -11,11 +11,12 @@ export const meta = {
 
 # Button
 
-Used to trigger an operation.
+The `Button` UI component is a versatile element for triggering various operations within your application. It offers a range of features and states to suit your needs:
+
 
 <Playground
   title="Basic"
-  desc="The basic `Button` contains an animation effect."
+  desc="The basic button includes an animation effect, enhancing its visual appeal."
   scope={{ Button }}
   code={`
 <Button>Action</Button>

src/app/components/carousel/carousel.mdx

@@ -9,7 +9,7 @@ export const meta = {
 
 # Carousel
 
-To add a slider to a page.
+The `Carousel` UI component is a powerful tool for adding interactive sliders to your web pages. It offers a wide range of customization options and features, including:
 
 <Playground
   title="Carousel example"

src/app/components/code/code.mdx

@@ -8,10 +8,11 @@ export const meta = {
 
 # Code
 
-Show source code in a standardized way. Want to display shell code snippets? try [Snippet](/components/snippet).
+The `Code` UI component serves as a versatile tool for displaying source code in a standardized and visually appealing way.
+Want to display shell code snippets? try [Snippet](/components/snippet).
 
 <Playground
-  desc="Basic inline codes."
+  desc="The component allows you to insert basic inline code snippets into your content."
   scope={{ Code, Text }}
   code={`
 <Text my={0}>Run <Code>yarn add @himalaya-ui/core</Code> to install.</Text>
@@ -20,7 +21,7 @@ Show source code in a standardized way. Want to display shell code snippets? try
 
 <Playground
   title="Code Block"
-  desc="Multi line code display."
+  desc="You can display multi-line code blocks with syntax highlighting and formatting, making it easy to showcase code examples."
   scope={{ Code, ExampleCodes: ParsedCodes.Types }}
   code={`
 <Code block my={0}><ExampleCodes /></Code>

src/app/components/entity/entity.mdx

@@ -1,20 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components';
-import {
-  Entity,
-  Link,
-  Image,
-  Checkbox,
-  Button,
-  Footer,
-  Avatar,
-  FooterNavigation,
-  FooterBottom,
-  Logo,
-  Input,
-  Skeleton,
-  Menu,
-  Divider,
-} from 'components';
+import { Entity, Link, Image, Checkbox, Button, Footer, Avatar, FooterNavigation, FooterBottom, Logo, Input, Skeleton, Menu, Divider } from 'components';
 
 export const meta = {
   title: 'Entity',
@@ -23,11 +8,12 @@ export const meta = {
 
 # Entity
 
-Display a collection of related information of a resource entity.
+The `Entity` UI component is designed to display a collection of related information for a resource entity. It provides a structured and visually appealing way to present data about an entity.
 
 <Playground
   title="Fields"
-  scope={{ Entity, Link, Image, Avatar}}
+  desc="The `Entity.Field` component is composed of various fields that represent different attributes or properties of the entity. Each field may contain data like names, statuses, labels, and more."
+  scope={{ Entity, Link, Image, Avatar }}
   code={`
 () => {
   return (
@@ -45,6 +31,7 @@ Display a collection of related information of a resource entity.
 
 <Playground
   title="Thumbnail"
+  desc=" In certain cases, you can include a thumbnail image to represent the entity or an associated resource."
   scope={{ Entity, Link, Image, Avatar }}
   code={`
 () => {
@@ -64,6 +51,7 @@ Display a collection of related information of a resource entity.
 
 <Playground
   title="Checkbox"
+  desc="The component can include checkboxes for making selections or performing actions related to the entity."
   scope={{ Entity, Link, Checkbox, Button }}
   code={`
   () => {
@@ -81,7 +69,7 @@ Display a collection of related information of a resource entity.
 
 <Playground
   title="Actions"
-  scope={{ Entity, Link, Image, Button, Avatar}}
+  scope={{ Entity, Link, Image, Button, Avatar }}
   code={`
 () => {
   return (
@@ -129,6 +117,7 @@ Display a collection of related information of a resource entity.
 
 <Playground
   title="Footer"
+  desc="A footer section can be included to provide additional information or actions related to the entity."
   scope={{ Entity, Link, Image, Button, Footer, FooterNavigation, FooterBottom, Logo, Avatar }}
   code={`
 () => {

src/app/components/footer/footer.mdx

@@ -1,13 +1,15 @@
-import { Layout, Playground, Attributes } from 'lib/components'
-import { Footer, FooterNavigation, FooterBottom, Logo, Link } from 'components'
+import { Layout, Playground, Attributes } from 'lib/components';
+import { Footer, FooterNavigation, FooterBottom, Logo, Link } from 'components';
 
 export const meta = {
   title: 'Footer',
   group: 'Layout',
-}
+};
 
 # Footer
 
+The `Footer UI component is a versatile element designed to be placed at the bottom of a web page or section, typically used for navigation, contact information, or additional content.
+
 <Playground
   scope={{ Footer, FooterNavigation, FooterBottom, Logo, Link }}
   title={'Footer example'}

src/app/components/hero/hero.mdx

@@ -1,32 +1,83 @@
-import { Layout, Playground, Attributes } from 'lib/components'
-import { Hero, Link } from 'components'
+import { Layout, Playground, Attributes } from 'lib/components';
+import { Hero, Link, Button } from 'components';
 
 export const meta = {
   title: 'Hero',
   group: 'General',
-}
+};
 
 # Hero
 
+The `Hero` UI component is a visually striking element designed to draw attention to featured content or key sections of a web page. It typically consists of the following components:
+
 <Playground
   scope={{ Hero, Link }}
-  title={'Hero example'}
-  desc={'Example of a Hero'}
+  title={'Hero Title'}
+  desc={'A prominent and eye-catching title that serves as the main headline for the hero section, often introducing the content.'}
   code={`
-  <Hero withDownArrow={false}>
     <Hero.Title>Hero Title</Hero.Title>
+  `}
+/>
+
+<Playground
+  scope={{ Hero, Link }}
+  title={'Hero Description'}
+  desc={'A brief but informative description or message that complements the title, providing additional context or details.'}
+  code={`
     <Hero.Desc>Hero Description</Hero.Desc>
-    <Hero.Tag hasGradient>Hero Tags</Hero.Tag>
-    <br />
-    <Hero.Actions>
-      <Link href='#'>
-        Some Link
+  `}
+/>
+<Playground
+  scope={{ Hero, Link }}
+  title={'Hero Tag'}
+  desc={'Tag or labels used to categorize or highlight the hero content, making it easy for users to understand the contents relevance or purpose.'}
+  code={`
+    <Hero.Tag hasGradient>Hero Tag</Hero.Tag>
+  `}
+/>
+
+<Playground
+  scope={{ Hero, Link, Button }}
+  title={'Hero Actions'}
+  desc={'List of call to actions or buttons for this component.'}
+  code={`<Hero.Actions>
+      <Link href={'/'}>
+        <Button type="primary" >
+          Some Link
+        </Button>
+      </Link>
+      <Link href={'/'}>
+        <Button>
+          Some Link
+        </Button>
       </Link>
     </Hero.Actions>
-  </Hero>
   `}
 />
 
+<Playground
+  scope={{ Hero, Link, Button }}
+  title={'Full hero example'}
+  desc={'Example of a Hero'}
+  code={`<Hero withDownArrow={false}>
+  <Hero.Tag hasGradient>Hero Tags</Hero.Tag>
+  <Hero.Title>Hero Title</Hero.Title>
+  <Hero.Desc>Hero Description</Hero.Desc>
+  <Hero.Actions>
+    <Link href={'/'}>
+      <Button type="primary" >
+        Some Link
+      </Button>
+    </Link>
+    <Link href={'/'}>
+      <Button>
+        Some Link
+      </Button>
+    </Link>
+  </Hero.Actions>
+</Hero>`}
+/>
+
 <Attributes edit="/pages/components/hero.mdx">
 <Attributes.Title>Hero.Props</Attributes.Title>