mirror of https://github.com/LemmyNet/lemmy
First pass at adding oembeds / iframely.
Dessalines
4 years ago
parent
b6ce26023e
commit
55f91ac5dc
@ -0,0 +1,283 @@
|
||||
(function() {
|
||||
var config = {
|
||||
|
||||
// Specify a path for custom plugins. Custom plugins will override core plugins.
|
||||
// CUSTOM_PLUGINS_PATH: __dirname + '/yourcustom-plugin-folder',
|
||||
|
||||
DEBUG: false,
|
||||
RICH_LOG_ENABLED: false,
|
||||
|
||||
// For embeds that require render, baseAppUrl will be used as the host.
|
||||
baseAppUrl: "http://yourdomain.com",
|
||||
relativeStaticUrl: "/r",
|
||||
|
||||
// Or just skip built-in renders altogether
|
||||
SKIP_IFRAMELY_RENDERS: true,
|
||||
|
||||
// For legacy reasons the response format of Iframely open-source is
|
||||
// different by default as it does not group the links array by rel.
|
||||
// In order to get the same grouped response as in Cloud API,
|
||||
// add `&group=true` to your request to change response per request
|
||||
// or set `GROUP_LINKS` in your config to `true` for a global change.
|
||||
GROUP_LINKS: true,
|
||||
|
||||
// Number of maximum redirects to follow before aborting the page
|
||||
// request with `redirect loop` error.
|
||||
MAX_REDIRECTS: 4,
|
||||
|
||||
SKIP_OEMBED_RE_LIST: [
|
||||
// /^https?:\/\/yourdomain\.com\//,
|
||||
],
|
||||
|
||||
/*
|
||||
// Used to pass parameters to the generate functions when creating HTML elements
|
||||
// disableSizeWrapper: Don't wrap element (iframe, video, etc) in a positioned div
|
||||
GENERATE_LINK_PARAMS: {
|
||||
disableSizeWrapper: true
|
||||
},
|
||||
*/
|
||||
|
||||
port: 8061, //can be overridden by PORT env var
|
||||
host: '0.0.0.0', // Dockers beware. See https://github.com/itteco/iframely/issues/132#issuecomment-242991246
|
||||
//can be overridden by HOST env var
|
||||
|
||||
// Optional SSL cert, if you serve under HTTPS.
|
||||
/*
|
||||
ssl: {
|
||||
key: require('fs').readFileSync(__dirname + '/key.pem'),
|
||||
cert: require('fs').readFileSync(__dirname + '/cert.pem'),
|
||||
port: 443
|
||||
},
|
||||
*/
|
||||
|
||||
/*
|
||||
Supported cache engines:
|
||||
- no-cache - no caching will be used.
|
||||
- node-cache - good for debug, node memory will be used (https://github.com/tcs-de/nodecache).
|
||||
- redis - https://github.com/mranney/node_redis.
|
||||
- memcached - https://github.com/3rd-Eden/node-memcached
|
||||
*/
|
||||
CACHE_ENGINE: 'node-cache',
|
||||
CACHE_TTL: 0, // In seconds.
|
||||
// 0 = 'never expire' for memcached & node-cache to let cache engine decide itself when to evict the record
|
||||
// 0 = 'no cache' for redis. Use high enough (e.g. 365*24*60*60*1000) ttl for similar 'never expire' approach instead
|
||||
|
||||
/*
|
||||
// Redis cache options.
|
||||
REDIS_OPTIONS: {
|
||||
host: '127.0.0.1',
|
||||
port: 6379
|
||||
},
|
||||
*/
|
||||
|
||||
/*
|
||||
// Memcached options. See https://github.com/3rd-Eden/node-memcached#server-locations
|
||||
MEMCACHED_OPTIONS: {
|
||||
locations: "127.0.0.1:11211"
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
// Access-Control-Allow-Origin list.
|
||||
allowedOrigins: [
|
||||
"*",
|
||||
"http://another_domain.com"
|
||||
],
|
||||
*/
|
||||
|
||||
/*
|
||||
// Uncomment to enable plugin testing framework.
|
||||
tests: {
|
||||
mongodb: 'mongodb://localhost:27017/iframely-tests',
|
||||
single_test_timeout: 10 * 1000,
|
||||
plugin_test_period: 2 * 60 * 60 * 1000,
|
||||
relaunch_script_period: 5 * 60 * 1000
|
||||
},
|
||||
*/
|
||||
|
||||
// If there's no response from remote server, the timeout will occur after
|
||||
RESPONSE_TIMEOUT: 5 * 1000, //ms
|
||||
|
||||
/* From v1.4.0, Iframely supports HTTP/2 by default. Disable it, if you'd rather not.
|
||||
Alternatively, you can also disable per origin. See `proxy` option below.
|
||||
*/
|
||||
// DISABLE_HTTP2: true,
|
||||
|
||||
// Customize API calls to oembed endpoints.
|
||||
ADD_OEMBED_PARAMS: [{
|
||||
// Endpoint url regexp array.
|
||||
re: [/^http:\/\/api\.instagram\.com\/oembed/],
|
||||
// Custom get params object.
|
||||
params: {
|
||||
hidecaption: true
|
||||
}
|
||||
}, {
|
||||
re: [/^https:\/\/www\.facebook\.com\/plugins\/page\/oembed\.json/i],
|
||||
params: {
|
||||
show_posts: 0,
|
||||
show_facepile: 0,
|
||||
maxwidth: 600
|
||||
}
|
||||
}, {
|
||||
// match i=user or i=moment or i=timeline to configure these types invidually
|
||||
// see params spec at https://dev.twitter.com/web/embedded-timelines/oembed
|
||||
re: [/^https?:\/\/publish\.twitter\.com\/oembed\?i=user/i],
|
||||
params: {
|
||||
limit: 1,
|
||||
maxwidth: 600
|
||||
}
|
||||
/*
|
||||
}, {
|
||||
// Facebook https://developers.facebook.com/docs/plugins/oembed-endpoints
|
||||
re: [/^https:\/\/www\.facebook\.com\/plugins\/\w+\/oembed\.json/i],
|
||||
params: {
|
||||
// Skip script tag and fb-root div.
|
||||
omitscript: true
|
||||
}
|
||||
*/
|
||||
}],
|
||||
|
||||
/*
|
||||
// Configure use of HTTP proxies as needed.
|
||||
// You don't have to specify all options per regex - just what you need to override
|
||||
PROXY: [{
|
||||
re: [/^https?:\/\/www\.domain\.com/],
|
||||
proxy_server: 'http://1.2.3.4:8080',
|
||||
user_agent: 'CHANGE YOUR AGENT',
|
||||
headers: {
|
||||
// HTTP headers
|
||||
// Overrides previous params if overlapped.
|
||||
},
|
||||
request_options: {
|
||||
// Refer to: https://github.com/request/request
|
||||
// Overrides previous params if overlapped.
|
||||
},
|
||||
disable_http2: true
|
||||
}],
|
||||
*/
|
||||
|
||||
// Customize API calls to 3rd parties. At the very least - configure required keys.
|
||||
providerOptions: {
|
||||
locale: "en_US", // ISO 639-1 two-letter language code, e.g. en_CA or fr_CH.
|
||||
// Will be added as highest priotity in accept-language header with each request.
|
||||
// Plus is used in FB, YouTube and perhaps other plugins
|
||||
"twitter": {
|
||||
"max-width": 550,
|
||||
"min-width": 250,
|
||||
hide_media: false,
|
||||
hide_thread: false,
|
||||
omit_script: false,
|
||||
center: false,
|
||||
// dnt: true,
|
||||
cache_ttl: 100 * 365 * 24 * 3600 // 100 Years.
|
||||
},
|
||||
readability: {
|
||||
enabled: false
|
||||
// allowPTagDescription: true // to enable description fallback to first paragraph
|
||||
},
|
||||
images: {
|
||||
loadSize: false, // if true, will try an load first bytes of all images to get/confirm the sizes
|
||||
checkFavicon: false // if true, will verify all favicons
|
||||
},
|
||||
tumblr: {
|
||||
consumer_key: "INSERT YOUR VALUE"
|
||||
// media_only: true // disables status embeds for images and videos - will return plain media
|
||||
},
|
||||
google: {
|
||||
// https://developers.google.com/maps/documentation/embed/guide#api_key
|
||||
maps_key: "INSERT YOUR VALUE"
|
||||
},
|
||||
|
||||
/*
|
||||
// Optional Camo Proxy to wrap all images: https://github.com/atmos/camo
|
||||
camoProxy: {
|
||||
camo_proxy_key: "INSERT YOUR VALUE",
|
||||
camo_proxy_host: "INSERT YOUR VALUE"
|
||||
// ssl_only: true // will only proxy non-ssl images
|
||||
},
|
||||
*/
|
||||
|
||||
// List of query parameters to add to YouTube and Vimeo frames
|
||||
// Start it with leading "?". Or omit alltogether for default values
|
||||
// API key is optional, youtube will work without it too.
|
||||
// It is probably the same API key you use for Google Maps.
|
||||
youtube: {
|
||||
// api_key: "INSERT YOUR VALUE",
|
||||
get_params: "?rel=0&showinfo=1" // https://developers.google.com/youtube/player_parameters
|
||||
},
|
||||
vimeo: {
|
||||
get_params: "?byline=0&badge=0" // https://developer.vimeo.com/player/embedding
|
||||
},
|
||||
|
||||
/*
|
||||
soundcloud: {
|
||||
old_player: true // enables classic player
|
||||
},
|
||||
giphy: {
|
||||
media_only: true // disables branded player for gifs and returns just the image
|
||||
}
|
||||
*/
|
||||
/*
|
||||
bandcamp: {
|
||||
get_params: '/size=large/bgcol=333333/linkcol=ffffff/artwork=small/transparent=true/',
|
||||
media: {
|
||||
album: {
|
||||
height: 472,
|
||||
'max-width': 700
|
||||
},
|
||||
track: {
|
||||
height: 120,
|
||||
'max-width': 700
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
},
|
||||
|
||||
// WHITELIST_WILDCARD, if present, will be added to whitelist as record for top level domain: "*"
|
||||
// with it, you can define what parsers do when they run accross unknown publisher.
|
||||
// If absent or empty, all generic media parsers will be disabled except for known domains
|
||||
// More about format: https://iframely.com/docs/qa-format
|
||||
|
||||
/*
|
||||
WHITELIST_WILDCARD: {
|
||||
"twitter": {
|
||||
"player": "allow",
|
||||
"photo": "deny"
|
||||
},
|
||||
"oembed": {
|
||||
"video": "allow",
|
||||
"photo": "allow",
|
||||
"rich": "deny",
|
||||
"link": "deny"
|
||||
},
|
||||
"og": {
|
||||
"video": ["allow", "ssl", "responsive"]
|
||||
},
|
||||
"iframely": {
|
||||
"survey": "allow",
|
||||
"reader": "allow",
|
||||
"player": "allow",
|
||||
"image": "allow"
|
||||
},
|
||||
"html-meta": {
|
||||
"video": ["allow", "responsive"],
|
||||
"promo": "allow"
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
// Black-list any of the inappropriate domains. Iframely will return 417
|
||||
// At minimum, keep your localhosts blacklisted to avoid SSRF
|
||||
BLACKLIST_DOMAINS_RE: [
|
||||
/^https?:\/\/127\.0\.0\.1/i,
|
||||
/^https?:\/\/localhost/i,
|
||||
|
||||
// And this is AWS metadata service
|
||||
// https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-instance-metadata.html
|
||||
/^https?:\/\/169\.254\.169\.254/
|
||||
]
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
})();
|
||||
@ -0,0 +1,100 @@
|
||||
import { Component, linkEvent } from 'inferno';
|
||||
import { FramelyData } from '../interfaces';
|
||||
import { mdToHtml } from '../utils';
|
||||
|
||||
interface FramelyCardProps {
|
||||
iframely: FramelyData;
|
||||
}
|
||||
|
||||
interface FramelyCardState {
|
||||
expanded: boolean;
|
||||
}
|
||||
|
||||
export class IFramelyCard extends Component<
|
||||
FramelyCardProps,
|
||||
FramelyCardState
|
||||
> {
|
||||
private emptyState: FramelyCardState = {
|
||||
expanded: false,
|
||||
};
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = this.emptyState;
|
||||
}
|
||||
|
||||
render() {
|
||||
let iframely = this.props.iframely;
|
||||
return (
|
||||
<>
|
||||
<div class="card my-2">
|
||||
<div class="row no-gutters">
|
||||
{iframely.thumbnail_url && (
|
||||
<div class="col-sm-3">
|
||||
{iframely.html ? (
|
||||
<span
|
||||
class="pointer"
|
||||
onClick={linkEvent(this, this.handleIframeExpand)}
|
||||
>
|
||||
<img class="card-img" src={iframely.thumbnail_url} />
|
||||
</span>
|
||||
) : (
|
||||
<img
|
||||
class="img-fluid card-img"
|
||||
src={iframely.thumbnail_url}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div class="col-sm-9">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title d-inline">
|
||||
<span>
|
||||
<a class="text-body" target="_blank" href={iframely.url}>
|
||||
{iframely.title}
|
||||
</a>
|
||||
</span>
|
||||
</h5>
|
||||
<span class="d-inline-block ml-2 mb-2 small text-muted">
|
||||
<a class="text-muted" target="_blank" href={iframely.url}>
|
||||
{new URL(iframely.url).hostname}
|
||||
<svg class="ml-1 icon">
|
||||
<use xlinkHref="#icon-external-link"></use>
|
||||
</svg>
|
||||
</a>
|
||||
{iframely.html && (
|
||||
<span
|
||||
class="ml-2 pointer"
|
||||
onClick={linkEvent(this, this.handleIframeExpand)}
|
||||
>
|
||||
{this.state.expanded ? '[-]' : '[+]'}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
{iframely.description && (
|
||||
<div
|
||||
className="card-text small text-muted md-div"
|
||||
dangerouslySetInnerHTML={mdToHtml(iframely.description)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{this.state.expanded && (
|
||||
<div class="my-2 embed-responsive embed-responsive-16by9">
|
||||
<div
|
||||
class="embed-responsive-item"
|
||||
dangerouslySetInnerHTML={{ __html: iframely.html }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
handleIframeExpand(i: IFramelyCard) {
|
||||
i.state.expanded = !i.state.expanded;
|
||||
i.setState(i.state);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue