Og:Image not showing on Github Pages - html

I'm hosting via github pages, and using a google DNS, the link would be:
https://thiagosaud.dev
However, the og:image is not being displayed either locally, or on github.io or in DNS.
What is wrong?
const getHtmlWebPackPluginOptions = (filename, templateName) => ({
minify: true,
cache: true,
filename,
template: path.resolve(__dirname, templateName),
favicon: 'src/assets/imgs/favicon.ico',
meta: {
viewport: 'width=device-width, initial-scale=1',
author: PackageJSON.author.name,
description: PackageJSON.description,
keywords: `${PackageJSON.keywords}`,
robots: 'index, follow',
'og:locale': 'en_US',
'og:type': 'website',
'og:url': 'https://www.thiagosaud.dev',
'og:title': 'THIAGO SAUD - FRONTEND',
'og:site_name': 'THIAGO SAUD - FRONTEND',
'og:description': PackageJSON.description,
'og:image': 'https://raw.githubusercontent.com/thiagosaud/thiagosaud.github.io/main/temp/imgs/social-preview.png',
'theme-color': '#171717',
'msapplication-TileColor': '#171717',
},
});

Related

How do I launch My browser with My set up extensions by puppeter?

I have some specific extension set up in my Chromium browser. I need to run and control it by puppeteer with that extension. But I'm not able to do so: browser starting up without any installed extensions.
Here is my launch block:
puppeteer.launch({
executablePath: '/usr/lib/chromium-browser/chromium-browser',
userDataDir: '/home/<my_regular_username>/.config/chromium/Default',
headless: false,
ignoreDefaultArgs: ["--disable-extensions","--enable-automation"],
args: [
'--incognito',
'--window-size=1400,800'
],
})
Those executablePath and executablePath values I've copied from chrome://version page.
WAIDW???
You need to specify the path to each extension. If you want to load multiple extensions, you can do something like this:
const browser = await puppeteer.launch({
headless: false,
args: [
'--load-extension=path/to/unpacked/extension1,path/to/unpacked/extension2',
],
});

Sourcemaps are detected in chrome but original source is not loaded, using webpack-2

When running an application that is built using webpack 2, sourcemaps are detected in chrome but original source is not loaded.
I'm using webpack beta21.
These files used to be detected automatically, ie when a breakpoint was put in the the output from webpack js file, the source view would jump to the original source input to webpack. But now I am stuck with this screen:
config:
var path = require("path");
var webpack = require("webpack");
var WebpackBuildNotifierPlugin = require('webpack-build-notifier');
const PATHS = {
app: path.join(__dirname, '../client'),
build: path.join(__dirname, '../public')
};
module.exports = {
entry: {
app: PATHS.app + '/app.js'
},
output: {
path: PATHS.build,
filename: '[name].js'
},
devtool: "source-map",
module: {
loaders: [
{
test: /\.js?$/,
loader: 'babel-loader',
include: [
path.resolve(__dirname, 'client'),
],
exclude: /node_modules/
},
{
test: /\.css/,
loader: "style!css"
}
]
},
resolve: {
// you can now require('file') instead of require('file.js')
extensions: ['', '.js', '.json']
} ,
plugins: [
new WebpackBuildNotifierPlugin()
]
};
Generated files with source maps won't automatically redirect to their original files, because there's potentially a 1-to-many relationship.
If you see the message Source Map Detected, the original file should already appear on the side file tree or the file explorer via Crl + P. If you don't know the original file name, you can open the source map file itself.
The source map path can be identified by a //# sourceMappingURL= comment or the X-SourceMap header:
Open up the source map via url and look for the sources property for the original file name:
The original file should be visible in the sources panel:
If you don't see the message Source Map Detected
You can manually add an external source map by right clicking and selecting Add Source Map:
Additional Resources
If that still doesn't work, you can try a Source Map Validator
For webpack specifically, you can configure the devtool property
If you're mapping to a workspace, that means you already have the source code. Including the source code in your source map is creating an unnecessary redundancy.
Use nosources-source-map instead.
The issue with external source maps was fixed in Chrome 52 but it looks like you've got your devtool set differently from mine, I use:
devtool: '#source-maps'
How are you building your source? If you're running with -d it will switch to inline source maps

Run media files on Amazon S3 bucked via CloudFront through jwplayer using ETag

I am trying to run a audio file which is upload on amazon s3 bucket using cloudfront of Amazon. I am using jsplayer to run the video.
var baseURL = "https://xxxx.s3.amazonaws.com/";
jwplayer('mediaplayer').setup({
'id': 'playerID',
'width': '480',
'height': '270',
'file': 'audio/song.mp3', /* change to your song/video path */
'provider': 'rtmp',
'streamer': 'rtmp://xxxxxxxxxxxx.cloudfront.net/cfx/st/',
'modes': [
{
type: 'html5',
config: {
/* prepend your BUCKET URL (baseURL var) to the file path */
'file': baseURL + 'song.mp3',
/* set provider */
'provider': 'video'
}
}
]
});
This is working fine. But I don't want to pass the full url because of company policy. I have the ETag of the audio file. How can I use it to run the audio file.

Yammer embed open-graph feed for object, not an url?

Is it possible to create an open-graph url for object which is not a www url? Like for network drive location for example?
I tried it and the embed feed seems to only load for www urls.
Here are my questions:
Is it possible to not use a normal www url for the object?
Where is the documentation what different config options are available for the open-graph?
Where is the documentation for the objectProperties config? I'd like to provide all of them manually and disable the system which tries to fetch them through embed.ly or what ever.
This works fine:
yam.connect.embedFeed({
container: "#embedded-feed",
network: "m-files.com",
feedType: "open-graph",
objectProperties: {
url: "https://www.microsoft.com",
type: "file",
title: "Yammer.pdf"
}
});
But for example this doesn't:
yam.connect.embedFeed({
container: "#embedded-feed",
network: "m-files.com",
feedType: "open-graph",
objectProperties: {
url: "\\192.168.1.8\Something\somefile.pdf",
type: "file",
title: "Yammer.pdf"
}
});

Extracting MP4-Direct link from JWPlayer?

I am trying to extract a videolink from a streaming website.
So I use PHP and "file_get_contents" to open the videolink and then "explode" to find the link to the generated link
Its looks like config5/videoid/generatedhash/ but you can access it also with config5/videoid/
So when I open this link I see this:
document.write('<div id="mediaspace2" style="width:880px;height:495px">');
jwplayer.key="key";
document.write('<div id="mediaspace" itemprop="video"></div>');
var scrwid=window.screen.width;
var def=false;
if(scrwid<1200) def=true;
jwplayer("mediaspace").setup({
sources: [{
file: "http://linkto.mp4",
label: "1080p HD",
type: "mp4"
}
,{
file: "http://linkto.mp4",
label: "720p HD",
type: "mp4",
} ,{
file: "http://linkto.mp4",
label: "360p",
type: "mp4",
"default": def
}
and a lot more stuff
when i copy one link of my choice and open it in chrome everything is fine. but when i try to embed it with html5 video tags it opens a file named na.flv
ist like a security for the website
how can i decrypt it? :/