Merge pull request #58 from route06inc/implement-post-unorder-list

feat: Implement UnOrderList component

frontend/apps/service-site/src/contents/posts/1/en.mdx

@@ -103,10 +103,14 @@ Healthcare providers can develop patient management systems, appointment schedul
 
 New businesses can rapidly prototype and test their ideas by building MVPs (Minimum Viable Products) on no-code platforms, allowing them to iterate quickly based on user feedback.
 
-- Airtable: A startup used Airtable, a no-code platform, to create a custom project management tool within days. This tool allowed them to quickly track and manage their workflow, gather team feedback, and iteratively improve the product without the need for a dedicated development team.
-- Bubble: An early-stage tech startup built their initial web application on Bubble, enabling them to launch a functional MVP in just a few weeks. This allowed them to test their business model with real users, collect feedback, and secure early-stage funding to further develop their product.
-- Glide: A fitness app startup leveraged Glide to create a mobile app MVP without any coding. The app allowed users to log workouts and track progress. By releasing this MVP, the startup was able to gather valuable user feedback and refine their product offering before investing in custom development.
-- Webflow: A design-focused startup used Webflow to quickly build and launch a visually appealing MVP for their e-commerce platform. The no-code approach enabled them to test their market hypothesis with a fully responsive website, gather customer insights, and iterate on design and functionality based on real-world feedback.
+- **Airtable**: A startup used Airtable, a no-code platform, to create a custom project management tool within days. This tool allowed them to quickly track and manage their workflow, gather team feedback, and iteratively improve the product without the need for a dedicated development team.
+  - Airtable: A startup used Airtable, a no-code platform, to create a custom project management tool within days. This tool allowed them to quickly track and manage their workflow, gather team feedback, and iteratively improve the product without the need for a dedicated development team.
+  - Airtable: A startup used Airtable, a no-code platform, to create a custom project management tool within days. This tool allowed them to quickly track and manage their workflow, gather team feedback, and iteratively improve the product without the need for a dedicated development team.
+    - Airtable: A startup used Airtable, a no-code platform, to create a custom project management tool within days. This tool allowed them to quickly track and manage their workflow, gather team feedback, and iteratively improve the product without the need for a dedicated development team.
+      - Airtable: A startup used Airtable, a no-code platform, to create a custom project management tool within days. This tool allowed them to quickly track and manage their workflow, gather team feedback, and iteratively improve the product without the need for a dedicated development team.
+- **Bubble**: An early-stage tech startup built their initial web application on Bubble, enabling them to launch a functional MVP in just a few weeks. This allowed them to test their business model with real users, collect feedback, and secure early-stage funding to further develop their product.
+- **Glide**: A fitness app startup leveraged Glide to create a mobile app MVP without any coding. The app allowed users to log workouts and track progress. By releasing this MVP, the startup was able to gather valuable user feedback and refine their product offering before investing in custom development.
+- **Webflow**: A design-focused startup used Webflow to quickly build and launch a visually appealing MVP for their e-commerce platform. The no-code approach enabled them to test their market hypothesis with a fully responsive website, gather customer insights, and iterate on design and functionality based on real-world feedback.
 
 ## The Future of No-Code
 

frontend/apps/service-site/src/features/posts/components/OrderList/OrderList.module.css

@@ -1,12 +1,11 @@
 .ol {
-  display: grid;
-  gap: var(--space-1, 8px);
   padding-left: var(--space-4, 16px);
   font-size: var(--font-size-6, 16px);
   line-height: 160%;
 }
 
 .ol li {
+  margin-top: var(--space-2, 16px);
   counter-increment: title;
   color: var(--global-body-text);
   font-weight: 400;

frontend/apps/service-site/src/features/posts/components/UnOrderList/UnOrderList.module.css

@@ -0,0 +1,34 @@
+.ul {
+  padding-left: var(--spacing-3, 12px);
+  font-size: var(--font-size-6, 16px);
+  line-height: 160%;
+}
+
+.ul li {
+  margin-top: var(--space-2, 16px);
+  color: var(--global-body-text);
+  font-weight: 400;
+  padding-left: var(--spacing-3, 12px);
+  position: relative;
+}
+
+.ul li::before {
+  content: '';
+  background: var(--overlay-40);
+  display: block;
+  height: 1px;
+  width: 16px;
+  position: absolute;
+  left: calc(-1 * var(--spacing-3, 12px));
+  top: 13px;
+}
+
+@media screen and (max-width: 768px) {
+  .ul {
+    font-size: var(--font-size-5, 14px);
+  }
+
+  .ul li::before {
+    top: 11px;
+  }
+}

frontend/apps/service-site/src/features/posts/components/UnOrderList/UnOrderList.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { UnOrderList } from '.'
+
+const StoryComponent = () => {
+  return (
+    <UnOrderList>
+      <li>
+        The importance of no-code platforms cannot be overstated. They are
+        breaking down barriers to entry, enabling individuals and businesses of
+        all sizes to innovate and solve problems with custom software solutions.
+        Here’s why the no-code revolution is so significant
+      </li>
+      <li>
+        The importance of no-code platforms cannot be overstated. They are
+        breaking down barriers to entry, enabling individuals and businesses of
+        all sizes to innovate and solve problems with custom software solutions.
+        Here’s why the no-code revolution is so significant
+      </li>
+      <li>
+        The importance of no-code platforms cannot be overstated. They are
+        breaking down barriers to entry, enabling individuals and businesses of
+        all sizes to innovate and solve problems with custom software solutions.
+        Here’s why the no-code revolution is so significant
+      </li>
+      <li>
+        The importance of no-code platforms cannot be overstated. They are
+        breaking down barriers to entry, enabling individuals and businesses of
+        all sizes to innovate and solve problems with custom software solutions.
+        Here’s why the no-code revolution is so significant
+      </li>
+    </UnOrderList>
+  )
+}
+
+const meta = {
+  component: StoryComponent,
+} satisfies Meta<typeof StoryComponent>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

frontend/apps/service-site/src/features/posts/components/UnOrderList/UnOrderList.tsx

@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from 'react'
+import styles from './UnOrderList.module.css'
+
+export const UnOrderList = ({ children, ...props }: PropsWithChildren) => {
+  return (
+    <ul {...props} className={styles.ul}>
+      {children}
+    </ul>
+  )
+}

frontend/apps/service-site/src/features/posts/components/UnOrderList/index.ts

@@ -0,0 +1 @@
+export * from './UnOrderList'

frontend/apps/service-site/src/features/posts/components/index.ts

@@ -12,6 +12,7 @@ export * from './PostCategories'
 export * from './PostTags'
 export * from './PostWriter'
 export * from './OrderList'
+export * from './UnOrderList'
 
 export * from './PostDetailPage'
 export * from './PostListPage'

frontend/apps/service-site/src/libs/contentlayer/MDXContent.tsx

@@ -6,6 +6,7 @@ import {
   Heading,
   LinkCard,
   OrderList,
+  UnOrderList,
 } from '@/features/posts'
 import type { MDXComponents } from 'mdx/types'
 // eslint-disable-next-line no-restricted-imports
@@ -52,6 +53,9 @@ const mdxComponents: MDXComponents = {
   ol: ({ children, ...props }) => {
     return <OrderList {...props}>{children}</OrderList>
   },
+  ul: ({ children, ...props }) => {
+    return <UnOrderList {...props}>{children}</UnOrderList>
+  },
 }
 
 type Props = {