Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support removing tags generated outside of Unhead #232

Open
1 task
harlan-zw opened this issue Sep 14, 2023 · 3 comments
Open
1 task

Support removing tags generated outside of Unhead #232

harlan-zw opened this issue Sep 14, 2023 · 3 comments
Labels
enhancement New feature or request v2

Comments

@harlan-zw
Copy link
Collaborator

harlan-zw commented Sep 14, 2023 •
edited
Loading

Describe the feature

Due to how the DOM rendered logic is set up, it's not currently possible to remove tags that Unhead itself didn't create OR if Unhead did make the tags, but only in a server context (without hydration).

Related #179 (comment),

For example, in the below, we want to remove the meta tag.

<html class="remove-me">
  <head>
    <meta property="some-meta" content="remove me">
  </head>

To remove the above would require some tricky client-side unhead usage, we would need to essentially mock hydrating these tags and then remove them AFTER they've been hydrated.

useHead({
   htmlAttrs: { class: { 'remove-me': false } },
   meta: [ { property: 'some-meta', content: null }],
})

Fixing this will require rearchitecting the "side-effect" paradigm of the DOM renderer or adding in logic that can handle these removals if they're not synced.

I think we should target the v2 as the candidate for this as it will be dangerous.

Additional information

  • Would you be willing to help implement this feature?
@harlan-zw harlan-zw changed the title Ability to remove tags generated outside of Unhead (or Server generated Unhead Tags) Ability to remove tags generated outside of Unhead (or server only tags) Sep 14, 2023
@harlan-zw harlan-zw added the v2 label Sep 14, 2023
@harlan-zw harlan-zw mentioned this issue Sep 14, 2023
Closed
1 task
@harlan-zw harlan-zw added the enhancement New feature or request label Sep 14, 2023
@harlan-zw harlan-zw changed the title Ability to remove tags generated outside of Unhead (or server only tags) Feature to remove tags generated outside of Unhead (or server only tags) Sep 14, 2023
@harlan-zw harlan-zw changed the title Feature to remove tags generated outside of Unhead (or server only tags) Allowing removing tags generated outside of Unhead (or server only tags) Sep 14, 2023
@harlan-zw harlan-zw mentioned this issue Sep 14, 2023
Closed
@719media
Copy link
Contributor

719media commented Oct 30, 2023 •
edited
Loading

What about an option in the initialization (createHead) where you can set a flag to true that would basically import all existing head information (or, perhaps more useful, all meta tags matching selector)

createHead({
  importExistingSelector: '[key="foo"]'
});

Anyway, maybe I'm missing an entirely different reason that this is complicated, and just answering the "simple" part of the question.

By way of information, I currently address this shortcoming by doing something like:

meta: [{
  property: 'og:image',
  content: '',
}];

Which of course doesn't REMOVE the tag, but does create one with empty content, which appears to work for this particular tag. Obviously this solution doesn't really work for other tags, but for me, it saves me from having to write a client-side removal outside of the unhead routine.

@harlan-zw
Copy link
Collaborator Author

Thank you for the idea! Will think about this more, it's definitely something that will be solved at some point.

@harlan-zw harlan-zw changed the title Allowing removing tags generated outside of Unhead (or server only tags) Support removing tags generated outside of Unhead (or server only tags) Sep 7, 2024
@harlan-zw harlan-zw changed the title Support removing tags generated outside of Unhead (or server only tags) Support removing tags generated outside of Unhead Sep 7, 2024
@Demivan
Copy link

Demivan commented Oct 4, 2024 •
edited
Loading

I have resolved this by using a custom unhead plugin.

() => ({
  hooks: {
    init(ctx) {
      const descriptionEl = document.querySelector('meta[name="description"]')
      if (!descriptionEl)
        return

      ctx.push({
        meta: [
          {
            name: 'description',
            content: descriptionEl.getAttribute('content'),
          },
        ],
      })

      descriptionEl.remove()
    },
  },
}),

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request v2
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Demivan @harlan-zw @719media