lastq Comments - Answer Overflow

lastq

•Created by lastq on 8/22/2023 in #support

Solidjs site metadata (title, description, meta image etc.) in Javascript

Now the issue i'm having is how to access the images for the metadata, the routes used throughout the app dont work, I need the equivalent of the public directory or figure out how to get images into the assets folder

13 replies

SSolidJS

•Created by lastq on 8/22/2023 in #support

Solidjs site metadata (title, description, meta image etc.) in Javascript

 {
      name: 'html-transform',
      apply:"build",
      transformIndexHtml(html) {
        return html.replace(
          /<title>(.*?)<\/title>/,
          `<title>${content.title}</title>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <meta name="theme-color" content="#000000" />
          <meta name="description" content="${content.description}" />
          <meta name="robots" content="index, follow" />
          <link rel="canonical" href="${content.url}" />
          <meta name="apple-mobile-web-app-capable" content="yes" />
          <meta property="og:type" content="website" />
          <meta property="og:url" content="${content.url}" />
          <meta property="og:title" content="${content.title}" />
          <meta property="og:description" content="${content.description}" />
          <meta property="og:site_name" content="${content.title}" />
          <meta property="og:locale" content="en_US" />
          <meta name="twitter:image" content="${content.metaImg}" />
          <meta name="image" property="og:image" content="${content.metaImg}" />
          <link rel="icon" type="image/x-icon" href="${content.icon}" />
          <link rel="shortcut icon" type="image/ico" href="${content.icon}" />
          <meta name="twitter:card" content="${content.description}" />
          <meta name="twitter:url" content="${content.url}" />
          <meta name="twitter:title" content="${content.title}" />
          <meta name="twitter:description" content="${content.description}" />
          <meta name="twitter:site" content="@site_account" />
          <meta name="twitter:creator" content="@individual_account" />
          <meta property="og:image:width" content="1200" />
          <meta property="og:image:height" content="630" />`,
        )
      },
    },

 {
      name: 'html-transform',
      apply:"build",
      transformIndexHtml(html) {
        return html.replace(
          /<title>(.*?)<\/title>/,
          `<title>${content.title}</title>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <meta name="theme-color" content="#000000" />
          <meta name="description" content="${content.description}" />
          <meta name="robots" content="index, follow" />
          <link rel="canonical" href="${content.url}" />
          <meta name="apple-mobile-web-app-capable" content="yes" />
          <meta property="og:type" content="website" />
          <meta property="og:url" content="${content.url}" />
          <meta property="og:title" content="${content.title}" />
          <meta property="og:description" content="${content.description}" />
          <meta property="og:site_name" content="${content.title}" />
          <meta property="og:locale" content="en_US" />
          <meta name="twitter:image" content="${content.metaImg}" />
          <meta name="image" property="og:image" content="${content.metaImg}" />
          <link rel="icon" type="image/x-icon" href="${content.icon}" />
          <link rel="shortcut icon" type="image/ico" href="${content.icon}" />
          <meta name="twitter:card" content="${content.description}" />
          <meta name="twitter:url" content="${content.url}" />
          <meta name="twitter:title" content="${content.title}" />
          <meta name="twitter:description" content="${content.description}" />
          <meta name="twitter:site" content="@site_account" />
          <meta name="twitter:creator" content="@individual_account" />
          <meta property="og:image:width" content="1200" />
          <meta property="og:image:height" content="630" />`,
        )
      },
    },

13 replies

SSolidJS

•Created by lastq on 8/22/2023 in #support

Solidjs site metadata (title, description, meta image etc.) in Javascript

Ok, I got a plugin working

13 replies

SSolidJS

•Created by lastq on 8/22/2023 in #support

Solidjs site metadata (title, description, meta image etc.) in Javascript

Its fine for them fixed, but I will be doing many copies of the same template, since it is a particularly simple page with just a handful of fields I would like to have as smooth as possible a path for trading the content in and out. metatags are a hassle to edit in an index.html because its easy to miss something.

13 replies

SSolidJS

•Created by lastq on 8/22/2023 in #support

Solidjs site metadata (title, description, meta image etc.) in Javascript

Here is bards attempt 😆 https://g.co/bard/share/28515f53a34d

13 replies

SSolidJS

•Created by lastq on 8/22/2023 in #support

Solidjs site metadata (title, description, meta image etc.) in Javascript

Would a vite plugin to add a compile step be trivial to write?

13 replies

Gaming

Programming