solidjs / solid-meta

Write meta tags to the document head
127 stars 16 forks source link

Title tag not changing #18

Open awfulminded opened 1 year ago

awfulminded commented 1 year ago

Maybe I don’t understand something, but I can’t change the title tag at all. I even copied the 1in1 code from the repository + created an empty project, anyway, the title and other tags do not changeю javscript not throwing any errors. Maybe it has something to do with solid-router because they have at least one common <Link> tag, but I could be wrong. Doesn't work without <Router> either.

import type { Component } from 'solid-js';
import { Meta, MetaProvider, Title } from '@solidjs/meta';

const App: Component = () => (
  <MetaProvider>
    <div class="Home">
      <Title>Title of page</Title>
      <Meta name="example" content="whatever" />
      // ...
    </div>
  </MetaProvider>
);

export default App;
import { render } from 'solid-js/web';

import App from './App';
import { Router } from '@solidjs/router';

render(() => <Router><App /></Router>, document.getElementById('root') as HTMLElement);
outbackStack commented 1 year ago

would you be able to put this in codesandbox.io or something similar so we could see what the issues are?

AlexNolasco commented 1 year ago

I had similar issue while testing the lib with just a title. I removed the hard coded title from the html then it worked.

solution-loisir commented 1 year ago

I think that the hard coded title should serve as a fallback (no js required). Is there a way to make meta work without removing the title from the html?

ryansolid commented 1 year ago

We never removed or commandeered the title tag if it didn't have a data-sm attribute. 0.28.0 removed the ability to have an existing title tag at all, but that should have been fixed in 0.28.2.

The solution as it was in 0.27.5 is to add an empty data-sm attribute to it.

botanegg commented 1 year ago

@ryansolid thank you for fast answer (for history: there was my deleted message here 3 minutes before answer)

Sorry i run on outdated solid-meta 0.28.1
Problem solved after move to @solidjs/meta and latest version

@awfulminded can you check on latest @solidjs/meta and confirm on you side?

boombang commented 1 year ago

@ryansolid @botanegg the issue is still reproducible on 0.28.2

e23thr commented 1 year ago

@boombang I just fix this by remove tag from index.html file</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/extracold1209"><img src="https://avatars.githubusercontent.com/u/40051225?v=4" />extracold1209</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>In my opinion, not only should the title in the MetaProvider be cascaded, but the title already in index.html should also be overwritten.</p> <p>This is because there is already a rule that only the ‘last created one’ is applied to the titles in the MetaProvider.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/EricRovell"><img src="https://avatars.githubusercontent.com/u/32179779?v=4" />EricRovell</a> commented <strong> 3 weeks ago</strong> </div> <div class="markdown-body"> <p>Have the same issue. Removing tags from html file is not an option, I am using SPA and I would lose link previews while sharing the link. The problem solved by adding empty <code>data-sm</code> attribute to existing tags.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>