##### THE GOAL
To display a specific Lemmy post (or just the comments component) in a `<div>` on a blog page.
[`all blog pages`] and [`lemmy`] are in the same `/srv/` directory, served on the same domain.
The ideal method would preserve Lemmy-UI's nested-comments, since they are already perfect.
The purpose is: a Comments section for a blog, which brings people to the Lemmy forum.
**
##### ENVIRONMENT
The [`lemmy instance`] and [`built-Hugo-pages`] are:
- on a vps, in the same `/srv/` directory
- served on the `same-domain` (no subdomain), by nginx.
- The blog pages (hugo) are fully controlled. They are already running some JS scripts.
- Lemmy is an ansible install (lemmy in `/srv/lemmy`. blog in `/srv/blog`).
**
##### THE QUESTION
Is there a Direct way to display a specific Lemmy Post (or just the comments component) in a `<div>` on a page?
**
##### POSSIBLE IDEAS...
Here are the ideas so far (if you have a better idea, I really want to know):
**
##### IDEA I - Inject the Lemmy Post-url at `<Router>`:
1 - Send the desired `Post-url` (or just the `/path`) to Lemmy from the blog (as a "string", via JS)...
Maybe the `Post-url` (or `/path`) could be injected here, at `/server/index.tsx` ([line 165](https://github.com/LemmyNet/lemmy-ui/blob/main/src/server/index.tsx#L165)):
```
let isoData: IsoData = {
path: req.path,
site_res: site,
routeData,
};
const wrapper = (
<StaticRouter location={req.url} context={isoData}>
<App />
</StaticRouter>
);
if (context.url) {
return res.redirect(context.url);
}
```
Or perhaps the Post url (or /path) could be injected here, in `client/index.ts` ([at line 7](https://github.com/LemmyNet/lemmy-ui/blob/main/src/client/index.tsx#L7)):
```
const site = convertWindowJson(GetSiteResponse, window.isoData.site_res);
initializeSite(site);
const wrapper = (
<BrowserRouter>
<App />
</BrowserRouter>
);
hydrate(wrapper, document.getElementById("root"));
```
2 - Now have Lemmy receive the path and display the Post (including the lemmy-UI), using `<blog-div>` as its window.
Perhaps by changing the hydrate target from `("root")` to `("blog-div")` here:
`hydrate(wrapper, document.getElementById("blog-div"));`
3 - Load the Lemmy CSS sheet, and any necessary JS <scripts>.
**
##### IDEA II - Intercept entire Lemmy Post string from server:
1 - In `/server/index.tsx` ([at line 187](https://github.com/LemmyNet/lemmy-ui/blob/main/src/server/index.tsx#L187))...
Get the variable `const root = renderToString(wrapper);` - (which already contains the "inner HTML" for a specific Lemmy post) - currently injected in `res.send` at:
`<div id='root'>${root}</div>` ([at line 231](https://github.com/LemmyNet/lemmy-ui/blob/main/src/server/index.tsx#L231))
2 - Inject that root variable (the inner HTML for a specific Lemmy post) in the `<blog-div>`.
3 - Load the Lemmy CSS sheet, and any necessary JS <scripts>.
**
##### BACKUP PLAN 1 - Get data from Lemmy-JS-Client, Rebuild Comments UI
1 - Use the Lemmy-JS-Client to `GetPost` or `GetSite`.
2 - Then manually rebuild the nested-comments UI by injecting data from JSON objects (using html, js).
Which could work, but I wonder if there's a more Direct way - since Lemmy already displays nested-comments perfectly.
**
##### BACKUP PLAN 2 - iFrame
Just display the Comments page in an iFrame (and hide the navbar/sidebar).
This is the laziest option.
**
##### DETERMINATION
I've become a bit obsessed with this question (for months), because
Lemmy displays 'nested-comments' perfectly, so it would be great to let Lemmy-UI render them.
**
##### THE QUESTION (TL;DR):
Is there a Direct way to display a specific Lemmy Post (or comments component) in a `<blog-div>`?
It seems possible - since [`all blog pages`] and [`lemmy`] are
- in the same `/srv/` directory, and
- served on the same domain
An ideal method would utilize Lemmy-UI's nested-comments, since they are already perfect.
I’m willing to attempt anything, if there might be a way...