Use minified assets

2016-10-12 23:47:12 +01:00 · 2016-10-12 23:47:12 +01:00 · b81d9eb17e
commit b81d9eb17e
parent 801879fafd
17 changed files with 638 additions and 16 deletions
--- a/docs/index.html
+++ b/docs/index.html
@ -31,7 +31,7 @@
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Custom styles for this template -->
-    <link href="main.css" rel="stylesheet">
+    <link href="main.min.css" rel="stylesheet">

    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
--- a/docs/main.css
+++ b/docs/main.css
@ -132,6 +132,7 @@
  margin-left: -40%;
  height: 1px;
  background: -webkit-radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0) 75%);
+  background: -webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0) 75%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0) 75%)
 }

@ -538,6 +539,8 @@ a:hover, a:focus {
 }

 .diff-url-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
  display: flex;
  width: 100%;
 }
@ -545,6 +548,8 @@ a:hover, a:focus {
 .diff-url-input {
  display: inline-block;
  margin-right: 10px;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 31px;
 }
@ -560,10 +565,14 @@ a:hover, a:focus {
 }

 .diff-url-options-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
  display: flex;
 }

 .diff-url-options-container label {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
          flex: 1;
 }

--- a/docs/main.min.css
+++ b/docs/main.min.css
--- a/docs/url.html
+++ b/docs/url.html
@ -31,12 +31,12 @@
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Custom styles for this template -->
-    <link href="main.css" rel="stylesheet">
+    <link href="main.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/github.min.css">

    <!-- diff2html -->
-    <link rel="stylesheet" type="text/css" href="assets/diff2html.css">
+    <link rel="stylesheet" type="text/css" href="assets/diff2html.min.css">
    <!-- -->


@ -150,7 +150,7 @@
            <b>Why should I use this instead of GitHub, Bitbucket or GitLab?</b>
            <p>Code Syntax Highlight</p>
            <p>Line similarity match (similar lines are together)</p>
-            <p>Line by Line and Side by Side (SOON) diffs</p>
+            <p>Line by Line and Side by Side diffs</p>
            <p>Supports any git and unified compatible diffs</p>
            <p>Easy code selection</p>
          </li>
@ -235,11 +235,11 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/languages/scala.min.js"></script>

 <!-- diff2html -->
-<script type="text/javascript" src="assets/diff2html.js"></script>
-<script type="text/javascript" src="assets/diff2html-ui.js"></script>
+<script type="text/javascript" src="assets/diff2html.min.js"></script>
+<script type="text/javascript" src="assets/diff2html-ui.min.js"></script>
 <!-- -->

-<script type="text/javascript" src="url.js"></script>
+<script type="text/javascript" src="url.min.js"></script>


 </body>
--- a/scripts/release-website.sh
+++ b/scripts/release-website.sh
@ -9,15 +9,23 @@ set -e

 INPUT_DIR=website
 INPUT_URL_JS=${INPUT_DIR}/templates/pages/url/url.js
+INPUT_CSS_FILE=${INPUT_DIR}/main.css

 OUTPUT_DIR=docs
 OUTPUT_URL_JS=${OUTPUT_DIR}/url.js
 OUTPUT_URL_MIN_JS=${OUTPUT_DIR}/url.min.js
+OUTPUT_CSS_FILE=${OUTPUT_DIR}/main.css
+OUTPUT_MIN_CSS_FILE=${OUTPUT_DIR}/main.min.css

 echo "Creating diff2html website release ..."

 echo "Cleaning previous versions ..."
-rm -rf ${OUTPUT_URL_JS}
+rm -rf ${OUTPUT_DIR}
+mkdir -p ${OUTPUT_DIR}
+
+echo "Minifying ${OUTPUT_CSS_FILE} to ${OUTPUT_MIN_CSS_FILE}"
+postcss --use autoprefixer ${INPUT_CSS_FILE} -d ${OUTPUT_DIR}
+cleancss --advanced --compatibility=ie8 -o ${OUTPUT_MIN_CSS_FILE} ${OUTPUT_CSS_FILE}

 echo "Generating website js aggregation file in ${OUTPUT_URL_JS}"
 browserify -e ${INPUT_URL_JS} -o ${OUTPUT_URL_JS}
@ -28,4 +36,14 @@ uglifyjs ${OUTPUT_URL_JS} -c -o ${OUTPUT_URL_MIN_JS}
 echo "Generating HTMLs from templates ..."
 node ./scripts/release-website.js

+echo "Copying static files ..."
+cp -rf ${INPUT_DIR}/img ${OUTPUT_DIR}/
+cp -f ${INPUT_DIR}/CNAME ${OUTPUT_DIR}/
+cp -f ${INPUT_DIR}/favicon.ico ${OUTPUT_DIR}/
+cp -f ${INPUT_DIR}/robots.txt ${OUTPUT_DIR}/
+cp -f ${INPUT_DIR}/sitemap.xml ${OUTPUT_DIR}/
+
+echo "Creating diff2html assets symlink ..."
+ln -s ../dist docs/assets
+
 echo "diff2html website release created successfully!"
--- a/website/CNAME
+++ b/website/CNAME
@ -0,0 +1 @@
+diff2html.xyz
--- a/website/favicon.ico
+++ b/website/favicon.ico
--- a/website/img/snapshot-1.png
+++ b/website/img/snapshot-1.png
--- a/website/img/snapshot-2.png
+++ b/website/img/snapshot-2.png
--- a/website/img/snapshot-3.png
+++ b/website/img/snapshot-3.png
--- a/website/main.css
+++ b/website/main.css
@ -0,0 +1,573 @@
+/*!
+ * Copyright Colossal 2015
+ * Adapted by @rtfpessoa
+ */
+
+.m-b-md {
+  margin-bottom: 23px !important
+}
+
+.p-t {
+  padding-top: 15px !important
+}
+
+@media (min-width: 768px) {
+  p.m-b {
+    height: 75px;
+    overflow-y: hidden;
+  }
+}
+
+.btn {
+  display: inline-block;
+  color: #fff;
+  background: #26A65B;
+  font-weight: 400
+}
+
+.btn:hover {
+  color: #fff;
+  background: #5dbe5d;
+}
+
+.btn-clipboard {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10;
+  display: block;
+  padding: 5px 8px;
+  font-size: 12px;
+  color: #fff;
+  background-color: #767676;
+  border-radius: 0 4px 0 4px;
+  cursor: pointer;
+}
+
+.btn-clipboard:hover {
+  color: #000;
+  background-color: #dcdfe4;
+}
+
+.footer {
+  position: relative;
+  padding: 40px 0;
+  text-align: center;
+  font-size: 14px;
+  border-top: 1px solid #dcdfe4
+}
+
+.footer p {
+  margin-bottom: 5px
+}
+
+.footer a {
+  color: #26A65B;
+}
+
+.container a {
+  color: #26A65B;
+}
+
+.container a.btn {
+  color: #fff;
+}
+
+.footer-list-item {
+  display: inline-block
+}
+
+.footer-list-item:not(:last-child):after {
+  content: "\b7"
+}
+
+.footer > ul {
+  padding: 0;
+}
+
+@media (min-width: 768px) {
+  .footer {
+    padding: 60px 0
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    width: 710px
+  }
+
+  .row-centered {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    width: 890px
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    width: 1050px
+  }
+}
+
+.row-bordered {
+  position: relative
+}
+
+.row-bordered:before {
+  content: '';
+  display: block;
+  width: 80%;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  margin-left: -40%;
+  height: 1px;
+  background: -webkit-radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0) 75%);
+  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0) 75%)
+}
+
+.container-overflow-wrap {
+  overflow: hidden
+}
+
+.hero {
+  position: relative;
+  text-align: center;
+  padding: 80px 0;
+  border-bottom: 1px solid #dcdfe4
+}
+
+.hero-booticon {
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  margin: 0 auto 30px;
+  width: 100%;
+  font-size: 8vw;
+  display: block;
+  font-weight: 500;
+  text-align: center;
+  cursor: default;
+}
+
+.hero-homepage.hero {
+  padding-top: 0;
+  padding-bottom: 40px;
+  overflow: hidden;
+  border-bottom: 0;
+  border-bottom: 1px solid #dcdfe4;
+}
+
+.hero-homepage > .btn {
+  margin-top: 20px
+}
+
+.swag-line:before {
+  content: '';
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 5px;
+  z-index: 2;
+  background-color: #26A65B;
+  background: -webkit-linear-gradient(45deg, #28a142, #26A65B);
+  background: linear-gradient(45deg, #28a142, #26A65B)
+}
+
+.navbar {
+  background-color: #fff;
+  border: 0 #fff;
+}
+
+.navbar-header {
+  text-align: center
+}
+
+.navbar-brand {
+  height: auto;
+  padding: 19px 25px;
+  font-size: 16px;
+  display: inline-block;
+  float: none;
+  text-align: center;
+  margin: 5px 0 0
+}
+
+.navbar-nav {
+  margin-right: -15px
+}
+
+.navbar-nav > li > a {
+  font-size: 14px
+}
+
+.navbar-default .navbar-brand, .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover, .navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
+  background: transparent;
+  color: #293a46;
+  font-weight: 300
+}
+
+.navbar-default .navbar-toggle {
+  position: absolute;
+  left: 0;
+  top: 7px;
+  border-color: #fff;
+  color: #293a46;
+  margin-right: 0
+}
+
+.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
+  background: #f9f9f9;
+  border-color: #f9f9f9
+}
+
+@media (min-width: 768px) {
+  .navbar-full .navbar-brand {
+    margin-left: -25px
+  }
+
+  .navbar-tall {
+    height: 125px
+  }
+
+  .navbar-tall .navbar-header, .navbar-tall .navbar-nav {
+    line-height: 125px;
+    text-align: left
+  }
+
+  .navbar-brand {
+    float: none;
+    display: inline-block;
+    text-align: left;
+    margin: 0
+  }
+
+  .navbar-nav > li > a {
+    display: inline-block;
+    margin-left: 13px
+  }
+
+  .navbar-nav > li:first-child > a {
+    margin-left: 0
+  }
+
+}
+
+.screenshot {
+  display: block;
+  overflow: hidden;
+}
+
+.screenshot > img {
+  width: 100%
+}
+
+.screenshots-fan {
+  margin-top: 50px
+}
+
+.screenshots-fan .screenshot {
+  position: relative;
+  width: auto;
+  display: inline-block;
+  text-align: center;
+}
+
+.screenshots-fan .screenshot:last-child, .screenshots-fan .screenshot:first-child {
+  z-index: 2
+}
+
+.screenshots-fan .screenshot {
+  z-index: 3
+}
+
+@media (min-width: 768px) {
+  .screenshots-fan {
+    position: relative;
+    overflow: hidden;
+    margin-top: 60px;
+    height: 200px
+  }
+
+  .screenshots-fan .screenshot {
+    height: auto;
+    top: 10px;
+    width: 350px
+  }
+
+  .screenshots-fan .screenshot:first-child, .screenshots-fan .screenshot:last-child {
+    width: 250px;
+    position: absolute;
+    top: 65px
+  }
+
+  .screenshots-fan .screenshot:first-child {
+    left: 10px
+  }
+
+  .screenshots-fan .screenshot:last-child {
+    left: auto;
+    right: 10px
+  }
+}
+
+@media (min-width: 992px) {
+  .screenshots-fan {
+    margin-top: 60px;
+    height: 240px
+  }
+
+  .screenshots-fan .screenshot {
+    width: 400px
+  }
+
+  .screenshots-fan .screenshot:first-child, .screenshots-fan .screenshot:last-child {
+    width: 300px
+  }
+}
+
+@media (min-width: 1200px) {
+  .screenshots-fan {
+    margin-top: 80px;
+    height: 380px
+  }
+
+  .screenshots-fan .screenshot {
+    width: 550px
+  }
+
+  .screenshots-fan .screenshot:first-child, .screenshots-fan .screenshot:last-child {
+    width: 450px
+  }
+}
+
+body {
+  font-size: 16px;
+  font-family: Roboto, sans-serif;
+  font-weight: 300;
+  line-height: 1.6
+}
+
+h1 {
+  font-size: 26px;
+  font-weight: 300
+}
+
+h2 {
+  font-size: 18px;
+  font-weight: 300
+}
+
+h3 {
+  font-size: 26px;
+  font-weight: 300
+}
+
+h4 {
+  font-size: 16px;
+  font-weight: 300
+}
+
+h5 {
+  font-size: 16px;
+  font-weight: 400
+}
+
+h1, h2, h3, h4, h5 {
+  line-height: 1.4
+}
+
+h1, h2 {
+  margin: 10px 0
+}
+
+h5 {
+  margin: 6px 0
+}
+
+@media (min-width: 768px) {
+  body {
+    font-size: 16px;
+    font-family: Roboto, sans-serif;
+    font-weight: 300;
+    line-height: 1.6
+  }
+
+  h1 {
+    font-size: 38px;
+    font-weight: 300
+  }
+
+  h2 {
+    font-size: 26px;
+    font-weight: 300;
+    line-height: 1.4
+  }
+
+  h3 {
+    font-size: 26px;
+    font-weight: 300
+  }
+
+  h4 {
+    font-size: 18px;
+    font-weight: 300
+  }
+
+  h5 {
+    font-size: 16px;
+    font-weight: 400
+  }
+}
+
+body {
+  color: #293a46;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+a:hover, a:focus {
+  text-decoration: underline;
+}
+
+.nav li a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.nav li a:hover {
+  text-decoration: underline;
+}
+
+.text-muted {
+  color: #697176
+}
+
+.template-index h3 {
+  font-size: 21px;
+  margin-bottom: 12px
+}
+
+.template-index h4 {
+  color: #697176;
+  line-height: 1.6
+}
+
+.template-index h4 a, .template-index p a {
+  color: #26A65B;
+}
+
+.template-index h5 {
+  font-size: 17px;
+  margin-bottom: 8px
+}
+
+.homepage-terminal-example, .homepage-code-example {
+  position: relative;
+  font-family: monospace;
+  background: #272b38;
+  color: #48d8a0;
+  border-radius: 8px;
+  padding: 30px
+}
+
+.homepage-terminal-example .text-muted,
+.homepage-code-example .text-muted {
+  color: #6a7490
+}
+
+@media (min-width: 768px) {
+  .homepage-terminal-example {
+    padding: 50px;
+  }
+
+  .homepage-code-example {
+    padding: 10px;
+  }
+
+  .homepage-code-example > p {
+    margin: 0;
+  }
+}
+
+.hero-green {
+  color: #26A65B;
+}
+
+.hero-black {
+  color: #353535;
+}
+
+.hero-red {
+  color: #CB2C37;
+}
+
+.svg-icon-large {
+  width: 50px;
+  display: block;
+  margin: 0 auto;
+}
+
+.svg-icon-large > svg {
+  width: 100%;
+  height: auto;
+}
+
+.row-padded-small {
+  padding: 40px 0;
+}
+
+*.unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.diff-url-wrapper {
+  display: flex;
+  width: 100%;
+}
+
+.diff-url-input {
+  display: inline-block;
+  margin-right: 10px;
+  flex-grow: 1;
+  height: 31px;
+}
+
+.diff-url-btn {
+  display: inline-block;
+  float: right;
+  width: 48px;
+}
+
+.options-label-value {
+  font-weight: normal;
+}
+
+.diff-url-options-container {
+  display: flex;
+}
+
+.diff-url-options-container label {
+  flex: 1;
+}
+
+.diff-url-options-container label select,
+.diff-url-options-container label input {
+  display: block;
+}
--- a/website/robots.txt
+++ b/website/robots.txt
@ -0,0 +1 @@
+User-agent: *
--- a/website/sitemap.xml
+++ b/website/sitemap.xml
@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+        xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+    <url>
+        <loc>https://diff2html.xyz/</loc>
+    </url>
+    <url>
+        <loc>https://diff2html.xyz/index.html</loc>
+    </url>
+    <url>
+        <loc>https://diff2html.xyz/demo.html</loc>
+    </url>
+</urlset>
--- a/website/templates/pages/url/url-assets.partial.html
+++ b/website/templates/pages/url/url-assets.partial.html
@ -1,5 +1,5 @@
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/github.min.css">

    <!-- diff2html -->
-    <link rel="stylesheet" type="text/css" href="assets/diff2html.css">
+    <link rel="stylesheet" type="text/css" href="assets/diff2html.min.css">
    <!-- -->
--- a/website/templates/pages/url/url-scripts.partial.html
+++ b/website/templates/pages/url/url-scripts.partial.html
@ -2,8 +2,8 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/languages/scala.min.js"></script>

 <!-- diff2html -->
-<script type="text/javascript" src="assets/diff2html.js"></script>
-<script type="text/javascript" src="assets/diff2html-ui.js"></script>
+<script type="text/javascript" src="assets/diff2html.min.js"></script>
+<script type="text/javascript" src="assets/diff2html-ui.min.js"></script>
 <!-- -->

-<script type="text/javascript" src="url.js"></script>
+<script type="text/javascript" src="url.min.js"></script>
--- a/website/templates/pages/url/url.partial.html
+++ b/website/templates/pages/url/url.partial.html
@ -54,7 +54,7 @@
            <b>Why should I use this instead of GitHub, Bitbucket or GitLab?</b>
            <p>Code Syntax Highlight</p>
            <p>Line similarity match (similar lines are together)</p>
-            <p>Line by Line and Side by Side (SOON) diffs</p>
+            <p>Line by Line and Side by Side diffs</p>
            <p>Supports any git and unified compatible diffs</p>
            <p>Easy code selection</p>
          </li>
--- a/website/templates/template.mustache
+++ b/website/templates/template.mustache
@ -31,7 +31,7 @@
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Custom styles for this template -->
-    <link href="main.css" rel="stylesheet">
+    <link href="main.min.css" rel="stylesheet">

 {{#assets}}
 {{{assets}}}