Xyphyn / photon

A replacement for lemmy-ui with more features, a better design, and more customizability.
https://phtn.app
GNU Affero General Public License v3.0
311 stars 35 forks source link

No meta tags shown, SSR mode broken #303

Closed prezmix closed 2 months ago

prezmix commented 2 months ago

Describe the bug Per 260 and 253 no meta information is generated at all and the proposed solution of running in SSR mode does not work as the app doesn't work in SSR mode using the official docker image as already reported by many.

Viewing source also exposes the env vars.

To Reproduce (if applicable) Go to any post on official instance eg. https://phtn.app/post/lemmy.world/15076463 and view source to confirm lack of meta tags and the exposed env vars, eg.

__sveltekit_r8pnn8 = {
    base: new URL("../..", location).pathname.slice(0, -1),
    env: {"PUBLIC_DEFAULT_FEED":"All"}
};

Expected behavior Meta information should be generated eg. the post should show all the meta information as in /photon/src/routes/post/[instance]/[id=integer]/+page.svelte:

<svelte:head>
  <title>{post.post_view.post.name}</title>
  <meta property="og:title" content={post.post_view.post.name} />
  <meta property="twitter:title" content={post.post_view.post.name} />
  <meta property="og:url" content={$page.url.toString()} />
  {#if isImage(post.post_view.post.url)}
    <meta property="og:image" content={post.post_view.post.url} />
    <meta property="twitter:card" content={post.post_view.post.url} />
  {:else if post.post_view.post.thumbnail_url}
    <meta property="og:image" content={post.post_view.post.thumbnail_url} />
    <meta property="twitter:card" content={post.post_view.post.thumbnail_url} />
  {/if}
  {#if post.post_view.post.body}
    <meta property="og:description" content={post.post_view.post.body} />
    <meta property="twitter:description" content={post.post_view.post.body} />
  {/if}
</svelte:head>

@CorvetteCole was successful with SSR and the meta tags are being shown correctly, eg. viewing source for https://lemdro.id/post/lemdro.id/8275014:

<!-- HEAD_svelte-wc8w6q_START --><meta name="theme-color" content="#f8fafc"> <link rel="icon" href="[https://lemdro.id/pictrs/image/609c5787-6b5c-40e1-aba6-5123df2ea35e.png](view-source:https://lemdro.id/pictrs/image/609c5787-6b5c-40e1-aba6-5123df2ea35e.png)"> <meta name="description" content="A place for tech enthusiasts and more!"><!-- HTML_TAG_START --><link rel="manifest" href="[/manifest.webmanifest](view-source:https://lemdro.id/manifest.webmanifest)"><!-- HTML_TAG_END --><!-- HEAD_svelte-wc8w6q_END --><!-- HEAD_svelte-1ehugl9_START --><meta property="og:title" content="State of the lemdro.id (LW federation + infra upgrades + new frontend option)"><meta property="twitter:title" content="State of the lemdro.id (LW federation + infra upgrades + new frontend option)"><meta property="og:url" content="https://lemdro.id/post/lemdro.id/8275014"><meta property="og:description" content="Hey all! I've done a lot of database maintenance work lately and other things to make lemdro.id better. Wanted to give a quick update on what's up and ask for feedback.
...
"><!-- HEAD_svelte-1ehugl9_END -->

He apparently did this by unpacking the docker images into his VM, but that is not feasible.

Any efforts on this would be appreciated!

Thank you for a great front end.

blox814123 commented 2 months ago

Can conform this issue. Generating meta info is essential for sharing links on social media, so it's quite important to have.

prezmix commented 2 months ago

After running in CSR for a while and attempting to run in SSR again I did not get the same error as reported in 253 but instead just a 502 from nginx:

2024/05/10 10:37:05 [error] 5540#5540: *9122184 upstream sent too big header while reading response header from upstream, client: 172.18.0.1, server: myserver.com, request: "GET /post/myserver.com/17 HTTP/1.1", upstream: "http://172.18.0.37:80/post/myserver.com/17", host: "myserver.com"

This was a simple fix by adding some nginx directives to increase the buffer size. In my case with nginx-proxy-manager:

https://github.com/NginxProxyManager/nginx-proxy-manager/issues/438

Seems to work now though still do not understand why the initial errors are gone, though I suspect could have been initially caused by no posts in the lemmy db.