Skip to content

Instantly share code, notes, and snippets.

@robcrock
Last active December 31, 2018 18:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save robcrock/416739c2caba441a0a767985f9fe563b to your computer and use it in GitHub Desktop.
Save robcrock/416739c2caba441a0a767985f9fe563b to your computer and use it in GitHub Desktop.
My First Extension - package.json
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My First Extension</title>
</head>
<body>
Hello World!
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>My First Extension</title>
</head>
<body>
<div class="middle">
<span class="container">
<div class="text" data-text="Hello World!">Hello World!</div>
</span>
</div>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<manifest manifest-version="0.1" xmlns="http://www.tableau.com/xml/extension_manifest">
<dashboard-extension id="com.example.extensions.name" extension-version="0.1.0">
<default-locale>en_US</default-locale>
<name resource-id="name"/>
<description>Extension Description</description>
<author
name="USERNAME"
email="USER@example.com"
organization="My Company"
website="https://www.example.com"
/>
<min-api-version>1.0</min-api-version>
<source-location>
<url>http://localhost:8765/index.html</url>
</source-location>
<icon/>
</dashboard-extension>
</manifest>
{
"name": "my-first-extension",
"version": "1.0.0",
"description": "My first extension.",
"scripts": {
"start": "node node_modules/http-server/bin/http-server -p 8765"
},
"author": "YOUR NAME",
"license": "MIT",
"dependencies": {
"http-server": "^0.11.1"
}
}
body {
margin: 0;
padding: 0;
font-family: "Lato";
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container {
position: relative;
display: inline-block;
padding: 0 40px;
cursor: pointer;
}
.text {
font-size: 100px;
text-transform: uppercase;
font-weight: 900;
position: relative;
color: #3399CC;
}
.text::before {
content: attr(data-text);
position: absolute;
color: #fff;
width: 0;
overflow: hidden;
transition: 0.6s;
}
.container::before {
content: "";
width: 0%;
height: 100%;
position: absolute;
background: #3399CC;
right: 0;
top: 0;
transition: 0.6s;
}
.container:hover .text::before,
.container:hover::before {
width: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment