Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Implemented MDX component management for enhanced documentation capabilities. #22

Merged
merged 7 commits into from
Oct 9, 2024
Merged

feat: Implemented MDX component management for enhanced documentation capabilities. #22

merged 7 commits into from
Oct 9, 2024

Conversation

junkisai
Copy link
Member

@junkisai junkisai commented Oct 8, 2024 •
edited
Loading

Summary

  • I have changed the file extension of the article files under the contents/posts directory to .mdx.
  • I've created @packages/mdx-components to manage the components used in MDX files within this package. This approach allows for better organization and centralized management of MDX-specific components.
  • I've implemented a basic version of the Callout component and verified that it can be successfully invoked within MDX files.
.mdx file preview
image image

Related Issue

Changes

Testing

Other Information

@junkisai junkisai temporarily deployed to preview - service-site October 8, 2024 09:22 — with GitHub Actions Inactive
@junkisai junkisai temporarily deployed to preview - service-site-storybook October 8, 2024 09:22 — with GitHub Actions Inactive
@junkisai junkisai temporarily deployed to preview - service-site October 8, 2024 09:37 — with GitHub Actions Inactive
@junkisai junkisai temporarily deployed to preview - service-site-storybook October 8, 2024 09:37 — with GitHub Actions Inactive
@junkisai junkisai changed the title 2710/mdx doc feat: Implemented MDX component management for enhanced documentation capabilities. Oct 8, 2024
@junkisai junkisai marked this pull request as ready for review October 8, 2024 09:39
@junkisai junkisai requested a review from a team as a code owner October 8, 2024 09:39
@junkisai junkisai requested review from hoshinotsuyoshi, FunamaYukina, MH4GF and sasamuku and removed request for a team October 8, 2024 09:39
MH4GF
MH4GF reviewed Oct 8, 2024
View reviewed changes
Copy link
Member

@MH4GF MH4GF left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It works and is amazing! 🚀
I wrote some comments!

frontend/apps/service-site/contents/posts/2/en.mdx Outdated
No-code platforms are breaking down the barriers to innovation, allowing
anyone with an idea to bring it to life without needing to write a single line
of code.
</Callout>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is easy to understand for me 😄

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Gyu07 This is how we plan to write it.

frontend/apps/service-site/src/app/posts/[slug]/page.tsx Outdated
@@ -30,14 +31,14 @@ export default function Page({ params }: PageProps) {

return (
<article>
{/* <Callout /> */}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this debug code?

frontend/packages/mdx-components/src/MDXContent.tsx Outdated
@@ -0,0 +1,18 @@
import type { MDXComponents } from 'mdx/types'
import { useMDXComponent } from 'next-contentlayer/hooks'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm...
If it depends on the logic of next, this @packages/mdx-components is not a pure React component, and the benefit of splitting the package.
service-site/features/mdx looks good to me, but what do you think?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MH4GF
I struggled with how to handle this part. The reason I wanted to split it into a package was to clearly define which components article writers can use within MDX files.

I was concerned that managing components within src/features/mdx/components would result in deep nesting and make the structure less clear due to the mixing of development code. 🤔

However, I agree with @MH4GF's point that the code being dependent on Next.js logic feels out of place.

I've been considering a new idea: What if we manage these components in the same directory where we manage the articles? 👀

/
└─ src
   └─ contents
      ├─ posts
      │  └─ 1/en.mdx
      └─ components
         └─ Callout

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@junkisai I see. Thanks for your consideration!

What if we manage these components in the same directory where we manage the articles? 👀

Looks good if it works!👍🏻

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MH4GF
I've implemented the change to manage the components in the same directory as the articles!

refactor: Integrate MDX components into service-site and remove separ…

@junkisai junkisai temporarily deployed to preview - service-site October 9, 2024 02:09 — with GitHub Actions Inactive
@junkisai junkisai temporarily deployed to preview - service-site-storybook October 9, 2024 02:10 — with GitHub Actions Inactive
@junkisai junkisai temporarily deployed to preview - service-site October 9, 2024 02:15 — with GitHub Actions Inactive
MH4GF
MH4GF approved these changes Oct 9, 2024
View reviewed changes
Copy link
Member

@MH4GF MH4GF left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🚀

frontend/apps/service-site/package.json
@@ -17,6 +18,7 @@
"fmt:biome": "biome check --write --unsafe ."
},
"dependencies": {
"clsx": "^2.1.1",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@junkisai junkisai temporarily deployed to preview - service-site October 9, 2024 02:34 — with GitHub Actions Inactive
@junkisai junkisai temporarily deployed to preview - service-site-storybook October 9, 2024 02:34 — with GitHub Actions Inactive
@junkisai junkisai merged commit ea53f29 into main Oct 9, 2024
6 checks passed
@junkisai junkisai deleted the 2710/mdx-doc branch October 9, 2024 02:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@MH4GF MH4GF MH4GF approved these changes

@hoshinotsuyoshi hoshinotsuyoshi Awaiting requested review from hoshinotsuyoshi hoshinotsuyoshi was automatically assigned from route06inc/liam-dev

@FunamaYukina FunamaYukina Awaiting requested review from FunamaYukina FunamaYukina was automatically assigned from route06inc/liam-dev

@sasamuku sasamuku Awaiting requested review from sasamuku sasamuku was automatically assigned from route06inc/liam-dev

Assignees

@junkisai junkisai

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@junkisai @MH4GF