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.

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

add/astro-example #282

Merged
merged 3 commits into from
Oct 8, 2022
Merged

add/astro-example #282

merged 3 commits into from
Oct 8, 2022

Conversation

JohnDaly
Copy link
Contributor

Resolves: #255

Adding an Astro example to the project

Steps Taken:

  1. Ran yarn create astro to initialize the example
  2. Added @code-hike/mdx, @astrojs/mdx, and @astrojs/react to project
  3. Configured MDX settings in astro.config.mjs file
  4. Added a codehike.mdx page to the app

@vercel
Copy link

vercel bot commented Sep 17, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
chtest ✅ Ready (Inspect) Visit Preview Sep 17, 2022 at 11:30PM (UTC)
playground ✅ Ready (Inspect) Visit Preview Sep 17, 2022 at 11:30PM (UTC)

@vercel vercel bot temporarily deployed to Preview – chtest September 17, 2022 23:26 Inactive
@vercel vercel bot temporarily deployed to Preview – playground September 17, 2022 23:30 Inactive
// https://astro.build/config
export default defineConfig({
markdown: {
syntaxHighlight: false,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Astro's default syntax highlighting behavior was causing issues when @code-hike/mdx was used.

},
integrations: [
react(),
mdx({ remarkPlugins: [[remarkCodeHike, { autoImport: false, theme }]] }),
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Setting autoImport to false, because Astro is unable to find the proper import for CH when attempting to hydrate the components otherwise.

I think this may be because @code-hike uses the following pattern for auto-importing:

import { annotations, Code, Slideshow, CodeSlot } from "@code-hike/mdx/dist/components.cjs.js";

export const CH = {
  annotations,
  Code,
  Slideshow,
  CodeSlot
};

Astro looks at the import statements when attempting to hydrate a component, so it isn't able to resolve components that use the CH namespace here.

@@ -0,0 +1,14 @@
import "@code-hike/mdx/styles.css"
import { CH } from "@code-hike/mdx/components"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Specifying an explicit import for CH allows Astro to properly hydrate the component (see comment about disabling autoImport for additional context)

Comment on lines +18 to +19
"react": "^18.0.0",
"react-dom": "^18.0.0"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I was seeing Warning: Invalid hook call. warnings in my terminal when running the example. I'm pretty sure its because there are multiple versions of React present in the monorepo.

The warnings went away when I downgraded react and react-dom to v17, but since this is an example, we probably should use the latest version of React.

@pomber
Copy link
Contributor

pomber commented Sep 19, 2022

thanks a lot! I'll take a look later

@pomber
Copy link
Contributor

pomber commented Oct 8, 2022

thank you, there are some things that don't work but I'll merge this and I'll try to see if they are fixable one by one

@pomber pomber merged commit b6cfd2b into code-hike:next Oct 8, 2022
@github-actions github-actions bot mentioned this pull request Jan 15, 2023
@github-actions
Copy link
Contributor

🚀 PR was released in v0.8.0 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Astro support
2 participants