Skip to content

Instantly share code, notes, and snippets.

@cor-bee
Created August 23, 2019 17:35
Show Gist options
  • Save cor-bee/af5cb955ddf2e7d918b06b403b2b759e to your computer and use it in GitHub Desktop.
Save cor-bee/af5cb955ddf2e7d918b06b403b2b759e to your computer and use it in GitHub Desktop.
Overdocumented Instant View Template for dev.to (https://instantview.telegram.org/contest/dev.to/template28/)
## General info:
# Function starts with @
# Variable starts with $
# Return of the most recently run function made by $@
# Key comments marked with ##
## Version of IV must be set first
~version: "2.1"
# Telegram doesn't support JW Player which is used in videoheaders
# Check if such element exist, if true - don't generate IV
?not_exists: //div[has-class("video-player-header")]
## Set Site Name and Telegram Сhannel properties
site_name: "DEV"
channel: "@devtotg"
# Instead of using properties at start, highly recommended to use variables
# Variables way easier to modify
$article: //div[@id="article-body"]
$title: //h1[0] # Use first h1 as title
$kicker: //a[has-class("org-branded-title-link")]
$author: //span[@itemprop="author"]//span[@itemprop="name"]
$author_url: //span[@itemprop="author"]//meta[@itemprop="url"]/@content
$date_published: //time
@background_to_image: //div[has-class("image")]
# Function to convert <div style="background-image:url(https://dev.to/.../img.jpg)" class="image"></div>
# into <img src="https://dev.to/.../img.jpg">
$cover: $@ # Apply <img src="https://dev.to/.../img.jpg"> as $cover
# Select all images which should be inlined
$icons: //div[has-class("ltag__user__pic")]/img
$icons+: //div[has-class("ltag__link__pic")]/img
$icons+: $kicker//img
$icons+: //div[has-class("liquid-comment")]//img
# Select all blockquotes
$quote: //div[has-class("liquid-comment")]
$quote+: //div[has-class("ltag__link")]
## Set proterties from variables
body: $article
title: $title
kicker: $kicker
author: $author
author_url: $author_url
cover: $cover
# Function to convert all date formats to Unixtime
@datetime: $date_published
published_date: $@
<pic>: $icons # Replacing <img> with <pic> for inlined images
$icons: $@
<blockquote>: $quote # Replacing <div> with <blockquote> for quotes
$quote: $@
## Transform Article Collection into <related> block
#Prepend top and append bottom block to article
@prepend_to($body): //div[has-class("article-collection-wrapper-top")]
@append_to($body): //div[has-class("article-collection-wrapper-bottom")]
#Replace <div> tag with <related>
<related>: //div[starts-with(@class, "article-collection-")]
$article_collection: $@
# //related/div/a → //related/a
@split_parent: $article_collection//a
# Remove blank <div>
@remove: $article_collection//div
# Needed for IV displaying
# https://example.com → https%3A%2F%2Fexample.com
@urlencode: $article_collection//a/@href
# Apply template by modifying href to
# Force transform dev.to articles as IV so they can display in IV
@set_attr(href, "https://t.me/iv?url=https%3A%2F%2Fdev.to", @href, "&rhash=4c51a828a8d227"): $article_collection//a
# Setting header to <related> block
<h6>: $article_collection//p
## Set icon size
@set_attrs(width, "64", height, "64"): $quote//div[has-class("ltag__link__pic")]/pic
@set_attrs(width, "14", height, "14"): $kicker//pic
## Fix link in kicker
@wrap_inner(<a>): $kicker//div
@set_attr(href, $kicker/@href): $@
## Create clickable <img>
# Regex and hard XPath alert!
# <a href="/not-a-link-to-bigger-image/"><img></a> → <img href="/not-a-link-to-bigger-image/">
@match("(?i).+(?<!\\.jpg|\\.jpeg|\\.png|\\.gif)$"): //a[descendant::img]/@href
@set_attr(href, "./..//self::a/@href"): //a[not(@href = //link[@rel="canonical"]/@href) and not(@href = //meta[@property="og:url"]/@content)]//img
## Support Twitter blockquote
# But it most be formatted in a certain way
@remove: //blockquote[has-class("ltag__twitter-tweet")]//* # Remove cached tweet
@prepend(<a>, href, @data-url): //blockquote[has-class("ltag__twitter-tweet")] # Insert <a href="link-to-tweet"> in blockquote
@replace("ltag__twitter-tweet", "twitter-tweet"): //blockquote/@class # Replace to right class so IV can do its magic
## Remove unwanted elements
@remove: //button
@remove: //pic[ends-with(@src, ".svg")]
@remove: //img[ends-with(@src, ".svg")]
@remove: //p[has-class("ltag__user__social")]
@remove: //div[has-class("ltag-github-readme-tag")]
## Handler for NESTED_ELEMENT_NOT_SUPPORTED error
## Highly reccomend to use it in all of your templates, just put it in the end
$problems: $body
@while( $problems ) {
$test: $body//*[self::*[has-class("fb-post")] or self::blockquote or self::aside or self::figure or self::img[not(./ancestor::figure)] or self::iframe[not(./ancestor::figure)] or self::script[@data-telegram-post] or self::slideshow[not(./ancestor::figure)] or self::video[not(./ancestor::figure)] or self::audio[not(./ancestor::figure)] or self::related or self::footer or self::table[not(ancestor::table) and not(descendant::table)]]
# Original code/idea by Misho @mushi_f
# With modifications by Andrei Afanasiev
$problems: $test/self::*[ancestor::anchor or ancestor::blockquote[not(contains(@class,"instagram"))] or ancestor::aside or ancestor::footer or ancestor::strong or ancestor::b or ancestor::em or ancestor::i or ancestor::ins or ancestor::u or ancestor::del or ancestor::s or ancestor::strike or ancestor::code or ancestor::kbd or ancestor::samp or ancestor::tt or ancestor::mark or ancestor::sup or ancestor::pic or ancestor::sub or ancestor::a or ancestor::reference or ancestor::h1 or ancestor::h2 or ancestor::h3 or ancestor::h4 or ancestor::h5 or ancestor::h6 or ancestor::p or ancestor::pre or ancestor::hr or ancestor::img or ancestor::br or ancestor::ul or ancestor::ol or ancestor::li]
# Don't ask me what is going on here
@split_parent: $problems
}
## Add discuss link to #discuss articles
# Check if there is #discuss tag
?exists: //a[@class="tag" and @href="/t/discuss"]
# Append link to article
@append(<a>, href, //link[@rel="canonical"]/@href, content, "👋 DISCUSS on DEV"): $body
$discuss_link: $@
# Instert hr before link (so it look pretty)
@before(<hr>): $discuss_link
# Insert text "👋 DISCUSS on DEV" from content attribute inside <a> tag
@append(@content): $discuss_link
# Transform link to article into anchor link to comments
@set_attr(href, @href, "#comments"): $discuss_link
# Remove protocol so it would ask to open comments in Browser/App
# If ignore, it would try to open it inside IV and fail
@replace("^https:\/\/", ""): $discuss_link/@href
@wrap(<h6>): $discuss_link
@okineadev
Copy link

Very good material! 👏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment