diff --git a/docs/index.html b/docs/index.html index 3a5d229..499d619 100644 --- a/docs/index.html +++ b/docs/index.html @@ -31,7 +31,7 @@ integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> - + - - + + - + diff --git a/scripts/release-website.sh b/scripts/release-website.sh index 788a794..2545cbd 100755 --- 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!" diff --git a/website/CNAME b/website/CNAME new file mode 100644 index 0000000..62ff2fd --- /dev/null +++ b/website/CNAME @@ -0,0 +1 @@ +diff2html.xyz \ No newline at end of file diff --git a/website/favicon.ico b/website/favicon.ico new file mode 100644 index 0000000..300be76 Binary files /dev/null and b/website/favicon.ico differ diff --git a/website/img/snapshot-1.png b/website/img/snapshot-1.png new file mode 100644 index 0000000..d52efda Binary files /dev/null and b/website/img/snapshot-1.png differ diff --git a/website/img/snapshot-2.png b/website/img/snapshot-2.png new file mode 100644 index 0000000..fb52e79 Binary files /dev/null and b/website/img/snapshot-2.png differ diff --git a/website/img/snapshot-3.png b/website/img/snapshot-3.png new file mode 100644 index 0000000..afe3a0f Binary files /dev/null and b/website/img/snapshot-3.png differ diff --git a/website/main.css b/website/main.css new file mode 100644 index 0000000..e9c016b --- /dev/null +++ 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; +} diff --git a/website/robots.txt b/website/robots.txt new file mode 100644 index 0000000..4f9540b --- /dev/null +++ b/website/robots.txt @@ -0,0 +1 @@ +User-agent: * \ No newline at end of file diff --git a/website/sitemap.xml b/website/sitemap.xml new file mode 100644 index 0000000..3f5fd62 --- /dev/null +++ b/website/sitemap.xml @@ -0,0 +1,16 @@ + + + + https://diff2html.xyz/ + + + https://diff2html.xyz/index.html + + + https://diff2html.xyz/demo.html + + diff --git a/website/templates/pages/url/url-assets.partial.html b/website/templates/pages/url/url-assets.partial.html index 60e4d9f..88f4021 100644 --- a/website/templates/pages/url/url-assets.partial.html +++ b/website/templates/pages/url/url-assets.partial.html @@ -1,5 +1,5 @@ - + diff --git a/website/templates/pages/url/url-scripts.partial.html b/website/templates/pages/url/url-scripts.partial.html index bc8890f..99904f3 100644 --- a/website/templates/pages/url/url-scripts.partial.html +++ b/website/templates/pages/url/url-scripts.partial.html @@ -2,8 +2,8 @@ - - + + - + diff --git a/website/templates/pages/url/url.partial.html b/website/templates/pages/url/url.partial.html index b2fa30d..3d30116 100644 --- a/website/templates/pages/url/url.partial.html +++ b/website/templates/pages/url/url.partial.html @@ -54,7 +54,7 @@ Why should I use this instead of GitHub, Bitbucket or GitLab?

Code Syntax Highlight

Line similarity match (similar lines are together)

-

Line by Line and Side by Side (SOON) diffs

+

Line by Line and Side by Side diffs

Supports any git and unified compatible diffs

Easy code selection

diff --git a/website/templates/template.mustache b/website/templates/template.mustache index cde947d..d53be72 100644 --- a/website/templates/template.mustache +++ b/website/templates/template.mustache @@ -31,7 +31,7 @@ integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> - + {{#assets}} {{{assets}}}