Open Graph and Uno Web Assembly #10130

Wandtket · 2022-10-13T15:06:27Z

Wandtket
Oct 13, 2022

I'm trying to create an open graph preview for sharing to social media on Uno WASM.

Does anyone know the best way of going about this? I tried injecting it into the document header in the AppManifest.js but it doesn't appear to be doing it fast enough for the web scrapers.

Edit:
I believe I only need to add a build event that applies the correct meta tags to the index.html page.

Here's the documentation I'm following

carldebilly · 2022-10-14T14:40:03Z

carldebilly
Oct 14, 2022
Maintainer

@Wandtket You can use a package like https://github.com/ghorsey/OpenGraph-Net... but it may not work out-of-the-box for the following reasons:

You many need to manually download the content using HttpClient instead of the integrated downloader which is not tuned for WASM and can raise errors... something like:

using var http = new HttpClient();
var html = await http.GetStringAsync("https://www.imdb.com/title/tt0109830/");
var parsedResult = OpenGraph.ParseHtml(html);
var title = parsedResult.Title;

You may hit CORS restrictions (which is the case in the previous code). In this case, that means you CAN'T access those pages directly from code running in a browser, no matter if it's coded in WASM or JavaScript. To solve this, if you doesn't control the server (which would be the case here for Imdb), you'll need a kind of proxy somewhere, probably a server you control.

7 replies

Wandtket Oct 17, 2022
Author

I got it to successfully use the index.html but I'm not sure how to make it load the rest of the application.

Here's the csproj

<PropertyGroup>
		<OutputType>Exe</OutputType>
		<TargetFramework>net5.0</TargetFramework>
		<NoWarn>NU1701</NoWarn>
		<EnableDefaultContentItems>false</EnableDefaultContentItems>
		<WasmShellIndexHtmlPath>index.html</WasmShellIndexHtmlPath>
		<WasmPWAManifestFile>manifest.json</WasmPWAManifestFile>
	</PropertyGroup>

Here's the index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <script type="text/javascript" src="./require.js"></script>
    <script type="module" src="./uno-bootstrap.js"></script>
    $(ADDITIONAL_CSS)
    $(ADDITIONAL_HEAD)
</head>
<body>
    <div id="uno-body" class="container-fluid uno-body">
        <div class="uno-loader"
             loading-position="bottom"
             loading-alert="none">

            <!-- Logo: change src to customize the logo -->
            <img class="logo"
                 src="Assets/SplashScreen.png"
                 title="Uno is loading your application" />

            <progress></progress>
            <span class="alert"></span>
        </div>
    </div>
    <noscript>
        <p>This application requires Javascript and WebAssembly to be enabled.</p>
    </noscript>
</body>
</html>

Any help is greatly appreciated, thank you.

jeromelaban Oct 17, 2022
Maintainer

but I'm not sure how to make it load the rest of the application.

What do you mean by that? Can you provide error messages, if any?

Wandtket Oct 17, 2022
Author

Console window is throwing me:

uno-bootstrap.js:2 Uncaught ReferenceError: config is not defined at uno-bootstrap.js:2:1

jeromelaban Oct 17, 2022
Maintainer

Thanks. Indeed, the documentation is incorrect, I've just updated it to allow for the version choice. You're likely going to have to use the 3.x version of that file.

Wandtket Oct 17, 2022
Author

@jeromelaban That did it! Thank you for the work you guys put into this, it really sped up my schedule.

Open Graph and Uno Web Assembly #10130

Uh oh!

Uh oh!

Wandtket Oct 13, 2022

Replies: 1 comment · 7 replies

Uh oh!

carldebilly Oct 14, 2022 Maintainer

Uh oh!

Uh oh!

Wandtket Oct 17, 2022 Author

Uh oh!

Uh oh!

jeromelaban Oct 17, 2022 Maintainer

Uh oh!

Uh oh!

Wandtket Oct 17, 2022 Author

Uh oh!

jeromelaban Oct 17, 2022 Maintainer

Uh oh!

Wandtket Oct 17, 2022 Author

Wandtket
Oct 13, 2022

Replies: 1 comment 7 replies

carldebilly
Oct 14, 2022
Maintainer

Wandtket Oct 17, 2022
Author

jeromelaban Oct 17, 2022
Maintainer

Wandtket Oct 17, 2022
Author

jeromelaban Oct 17, 2022
Maintainer

Wandtket Oct 17, 2022
Author