jxnblk / mdx-go Goto Github PK
View Code? Open in Web Editor NEW:zap: Lightning fast MDX-based dev server for progressive documentation
Home Page: https://mdx-go.now.sh
License: MIT License
:zap: Lightning fast MDX-based dev server for progressive documentation
Home Page: https://mdx-go.now.sh
License: MIT License
Would be great, if you could put images you'd like to refer to in an article right inside the folder where the file for the article is and then refer to it with a sub-resource URL as described here under "Relative URLs": https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL#examples_of_relative_urls
You already support such Routes for links to other articles, but not for images, so it would also be consistent.
- root
- main
- sub
- index.mdx
- image.png
![my image](image.png)
I tried to import a tsx/ts component, it didn't work, and couldn't figure out how to make it work. Do you think this should be supported by default?
Hi, First of all, thank you for your awesome work on all the libs!
I noticed the export const path = '...'
doesn't seem to work for me. I checked the code and by the looks of it, you only add custom exports when it's the Index component. And the exports are loaded in promise, so the path would not get there anyway I guess.
https://github.com/jxnblk/mdx-go/blob/master/lib/client/routes.js#L58
I am trying to achieve custom and nested links with custom menu, so that's why I needed this. I really like mdx-go and was avoiding using Gatsby, because this was more than sufficient for my needs.
I'm trying to use styled-jsx along with mdx-go, but I'm breaking the code trying to modify the babel plugins: https://github.com/zeit/styled-jsx#getting-started.
I've just discovered this repo and wanted to ask -- what's the difference between this project and x0?
I've got a script that needs to be loaded in the head before the <App />
is rendered. The library I'm trying to load a sets a global variable. When trying to pass that variable as a prop to a component in the MDX file, timing conflicts with <Head />
result in the variable being undefined during the time that the component is processing. This seems like a race condition. Shouldn't the <Head />
component in <Root />
always be resolved first?
However, when I hack up the defaultTemplate
in HTMLPlugin
to hard-code my script in the actual head, then the page works as expected.
Therefore, it seems like I need to replace the HTMLPlugin's template
with my own custom version, but I don't see a way to do that through the local webpack.config.js.
My dirty workaround is to install mdx-go
into the local project dir, and apply a patch directly to defaultTemplate
. I'd like to avoid that if possible.
Any ideas?
Im running mdx-go build pages --static
but the output html files still get
<link rel='prefetch' as='script' href='/main.js'><link rel='prefetch' as='script' href='/1.main.js'><link rel='prefetch' as='script' href='/2.main.js'><link rel='prefetch' as='script' href='/3.main.js'><link rel='prefetch' as='script' href='/4.main.js'>
appended to the head
tag. Is there a way to prevent this when building static? I'm trying to use mdx-go to create HTML emails and this tag is useless to that.
Also static still builds {number}.main.js
files though I just need the HTML and zero JS files.
I have a doc
directory, with:
index.mdx
build.md
mdx-go
renders the default page as:
Project Documentation
TOC
<li href="//build.md">
build
I imagine that ./build.md
or simply build.md
was intended in the link target ๐ค
Edit: actually, ./build
or build
is intended, because that renders markdown, while build.md
shows raw file...
I've been trying to get this to work for a while now but, unfortunately, I haven't had the luck.
Firstly, the directory structure looks like this:
โโโ docs
โย ย โโโ res.mdx
โโโ node_modules
โย ย โโโ bloomer
โย ย โโโ classnames
โย ย โโโ tslib
โโโ package.json
โโโ package-lock.json
I cd to this directory and run mdx-go docs
and get the following error:
โ mdx-go docs
[mdx-go] starting dev server...
โ success [mdx-go] compiled in 1s 848ms
ERROR Failed to compile with 1 errors 19:30:57
error in /home/karan/.nvm/versions/node/v8.11.4/lib/node_modules/mdx-go/lib/client/keyboard-shortcuts.md
Module parse failed: Unexpected character '#' (2:0)
You may need an appropriate loader to handle this file type.
|
> ### Keyboard Shortcuts
|
| - `/`: Show directory listing
@ /home/karan/.nvm/versions/node/v8.11.4/lib/node_modules/mdx-go/lib/client/routes.js 11:0-56 44:26-43
@ /home/karan/.nvm/versions/node/v8.11.4/lib/node_modules/mdx-go/lib/client/App.js
@ /home/karan/.nvm/versions/node/v8.11.4/lib/node_modules/mdx-go/lib/client/index.js
@ multi webpack-hot-middleware/client /home/karan/.nvm/versions/node/v8.11.4/lib/node_modules/mdx-go/lib/client/index.js
โ ๏ฝขwdm๏ฝฃ:
ERROR in ./client/keyboard-shortcuts.md 2:0
Module parse failed: Unexpected character '#' (2:0)
You may need an appropriate loader to handle this file type.
|
> ### Keyboard Shortcuts
|
| - `/`: Show directory listing
@ ./client/routes.js 11:0-56 44:26-43
@ ./client/App.js
@ ./client/index.js
@ multi webpack-hot-middleware/client ./client/index.js
[mdx-go] listening on http://localhost:8080
^C
Any idea why it's breaking due to a file that isn't even present in the directory? Is there something wrong on my end that I need to change? Please do let me know.
Not sure why, after add a new page, dev console have this error message
react-dom.development.js:492 Warning: React does not recognize the `staticContext` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `staticcontext` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in a (created by Link)
in Link (created by Route)
in Route (created by NavLink)
in NavLink
in Unknown (created by Styled(Component))
in Styled(Component)
in div (created by Styled(div))
in Styled(div)
in Unknown (created by Route)
in Route (created by withRouter())
in withRouter() (created by Root)
in div (created by Styled(div))
in Styled(div) (created by Main)
in div (created by Styled(div))
in Styled(div) (created by Main)
in Main (created by Root)
in div (created by Styled(div))
in Styled(div) (created by Layout)
in Layout (created by Root)
in Root (created by Route)
in Route (created by withRouter(Root))
in withRouter(Root) (created by App)
in MDXProvider (created by App)
in HeadProvider (created by App)
in App
in Router (created by BrowserRouter)
in BrowserRouter
After removing Pagination
from my layout, the error message has gone.
I believe that Pagination
component should do the same thing as NavLinks
to pull staticContext
props, like
Pagination = withRouter(({
routes = [],
order = [],
filter,
history,
location,
match,
staticContext
...props
})
Attempting to use a custom file matching pattern to only process .mdx
files and ignore .js
but not having any luck.
I've added:
export const files = require.context('.', true, /\.mdx$/, 'lazy')
To the root level index.mdx
file but it is still attempting to process .js
files.
What might I be doing incorrectly?
Thanks for your help.
Hi Brent,
Great piece of work. Upon building I get the error ReferenceError: window is not defined
when using the window object. It's not obvious what might cause this, I guess it's related to the server side render when building.
Hey,
I used mdx-go
to spin up my personal site, using my repo's README
as the content. The same as you did for yours!
I love the simplicity and how easy it is to maintain. Thanks for that!
I was wondering, is there a way to copy images from src
to dist
?
I imagine if instead of using mdx-go
I used mdx
with the webpack
loader I could do this, but I love how tooling-less mdx-go
is.
Thanks! ๐
Thanks for this amazing library! I have one question though: Can I export to .md
files instead of html + js + css?
The documentation pages mention DocsLayout
, yet when trying to import it, I'm being confronted with the error "export 'DocsLayout' was not found in 'mdx-go'
, and this repo doesn't seem to have any component defined with that name.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.