Continuing the discussion from How to get MobileDoc document?
I have a VueJS front-end to my blog and it would be useful ( and required for some card rendering ) to be able to render the MobileDoc directly using Vue components, but right now there isn’t any way for me to get the MobileDoc that doesn’t involve using the Admin API, which doesn’t work for a user-facing frontend.
The documentation here specifically states the use-case of parsing the content to render on the web, but in its current state it is only useful to parse and render if you are building a static site, or you have admin access to the site:
Because MobileDoc is Just JSON ™️, it’s extremely portable and can be transformed into multiple formats. This is particularly powerful because it’s just as easy to parse your content into HTML to render on the web as it is to pull the same content into a mobile app using completely different syntax.
My exact use-case is the need to convert image gallery cards to a JavaScript carousel. Currently ghost gives me a specific HTML representation of the image gallery, but I want to take the image list and create my own Vue component data from it, which without mobiledoc would mean parsing the HTML to extract the data, or just foregoing the carousel and using CSS.
Another use-case is to embed a custom video player for self-hosted videos, but as it stands I would instead have to create my own oEmbed provider for my hosted videos to accomplish that.
When you say it doesn’t work, do you mean it’s not practical? the Admin API JavaScript client should be ideal for this use case of rendering custom elements with Ghost content. It provides the same browse options shown in the Content API. If you’re hitting roadblocks with it’s use I’d be more than happy to give you some more guidance 
1 Like
I mean that in order to use to admin API, you have to have an admin token, which grants write access to Ghost, but this fontend is the site visitor facing frontend, which means I can’t embed an admin token in it like I embed a content API token when using the content API.
One way of bypassing that would be to build some middleware that constructs JSON for you to consume with your Vue application. Granted this does bring you back to the static concept, but in this case your data is abstracted from the main application, allowing you to feed in the content however you see fit 
Yeah, I don’t think I really have the time to develop such a proxy/middleware at the moment. Especially when the ghost API is doing what I need already, like filtering and such, just not giving the format that I need. If I pushed all the content to static JSON, I would still have to query it and that would require a search indexer or something of the like to do it server-side.
I might just end up pasting the HTML for the custom cards manually, but I think that will require adding more CDN dependencies because I can’t bundle those assets into my main application.
Or I will try parsing the returned HTML and then re-rendering it with Vue components, but I don’t think that will be very easy either, and it will probably take a performance hit.
Or maybe a custom oEmbed provider? I’ll see what ends up being the easiest to get working.
1 Like