Repository: zeppelin Updated Branches: refs/heads/gh-pages 23affbe98 -> 1f3a1e6ad
[gh-pages][ZEPPELIN-2055] Add "What's new in 0.7" and Twitter feed to website main page ### What is this PR for? There are lots of improvement in upcoming release 0.7(as mentioned in #1972 (release note)). To emphasize them to users and make contents enrich Zeppelin official website, I added some description \w gif images. And also added Twitter news feed at the bottom of the main page. ### What type of PR is it? gh-pages | Improvement ### Todos * [x] - need to take care of gif images' alignment when screen width is small ### What is the Jira issue? [ZEPPELIN-2055](https://issues.apache.org/jira/browse/ZEPPELIN-2055) ### How should this be tested? Build `gh-pages` branch as described in [here](https://github.com/apache/zeppelin/tree/gh-pages#build-website). Or see the below gif sreenshot img :) ### Screenshots (if appropriate) - Before  - After  ### Questions: * Does the licenses files need update? no * Is there breaking changes for older versions? no * Does this needs documentation? no Author: AhyoungRyu <[email protected]> Closes #1973 from AhyoungRyu/update/indexPage and squashes the following commits: 41e6502 [AhyoungRyu] Add more description as @Leemoonsoo suggested fd85790 [AhyoungRyu] Adjust demo gif images' alignment in small screen 25bee1f [AhyoungRyu] Address @Leemoonsoo's feedback 246c522 [AhyoungRyu] Address @felixcheung's feedback 076f9db [AhyoungRyu] Add 'target=_blank' to twitter link 73d611a [AhyoungRyu] Minor fix f5a3f5c [AhyoungRyu] More styling ac82321 [AhyoungRyu] Add what's new section for upcoming release 0.7 51d230d [AhyoungRyu] Add twitter feed to bottom of index page 0d8ab7d [AhyoungRyu] Add .idea & .twitter-cache to gitignore Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/1f3a1e6a Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/1f3a1e6a Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/1f3a1e6a Branch: refs/heads/gh-pages Commit: 1f3a1e6ad9be77eff890080a792e622c85106478 Parents: 23affbe Author: AhyoungRyu <[email protected]> Authored: Sun Feb 5 23:01:38 2017 +0900 Committer: ahyoungryu <[email protected]> Committed: Mon Feb 6 14:07:32 2017 +0900 ---------------------------------------------------------------------- .gitignore | 6 +- Gemfile | 1 + Gemfile.lock | 2 + _config.yml | 1 + _includes/themes/zeppelin/_navigation.html | 10 +- _includes/themes/zeppelin/default.html | 12 +- assets/themes/zeppelin/css/style.css | 249 +++++++++++++++++-- assets/themes/zeppelin/img/helium.gif | Bin 0 -> 221381 bytes assets/themes/zeppelin/img/personalize.gif | Bin 0 -> 508468 bytes assets/themes/zeppelin/img/scope.gif | Bin 0 -> 206852 bytes .../themes/zeppelin/img/user-impersonation.gif | Bin 0 -> 913552 bytes index.md | 10 +- twitter.md | 33 +++ whats_new.md | 104 ++++++++ 14 files changed, 403 insertions(+), 25 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/zeppelin/blob/1f3a1e6a/.gitignore ---------------------------------------------------------------------- diff --git a/.gitignore b/.gitignore index 516be01..ff37771 100644 --- a/.gitignore +++ b/.gitignore @@ -28,4 +28,8 @@ tramp .\#* # Generated by Jekyll -_site/ \ No newline at end of file +_site/ +.tweet-cache + +# IDE +.idea/ \ No newline at end of file http://git-wip-us.apache.org/repos/asf/zeppelin/blob/1f3a1e6a/Gemfile ---------------------------------------------------------------------- diff --git a/Gemfile b/Gemfile index 4d63551..906bd17 100644 --- a/Gemfile +++ b/Gemfile @@ -16,3 +16,4 @@ source 'https://rubygems.org' gem 'github-pages' gem 'redcarpet' +gem 'jekyll-twitter-plugin' http://git-wip-us.apache.org/repos/asf/zeppelin/blob/1f3a1e6a/Gemfile.lock ---------------------------------------------------------------------- diff --git a/Gemfile.lock b/Gemfile.lock index 6267b0c..5bfa7cb 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -83,6 +83,7 @@ GEM jekyll-seo-tag (2.0.0) jekyll (~> 3.1) jekyll-sitemap (0.10.0) + jekyll-twitter-plugin (2.0.0) jekyll-watch (1.5.0) listen (~> 3.0, < 3.1) jemoji (0.7.0) @@ -135,6 +136,7 @@ PLATFORMS DEPENDENCIES github-pages + jekyll-twitter-plugin redcarpet BUNDLED WITH http://git-wip-us.apache.org/repos/asf/zeppelin/blob/1f3a1e6a/_config.yml ---------------------------------------------------------------------- diff --git a/_config.yml b/_config.yml index 4921c01..2a44a15 100644 --- a/_config.yml +++ b/_config.yml @@ -3,6 +3,7 @@ permalink: /:categories/:year/:month/:day/:title exclude: [".rvmrc", ".rbenv-version", "README.md", "Rakefile", "changelog.md", "vendor", "node_modules", "scss"] +gems: ['jekyll-twitter-plugin'] highlighter: true markdown: redcarpet encoding: utf-8 http://git-wip-us.apache.org/repos/asf/zeppelin/blob/1f3a1e6a/_includes/themes/zeppelin/_navigation.html ---------------------------------------------------------------------- diff --git a/_includes/themes/zeppelin/_navigation.html b/_includes/themes/zeppelin/_navigation.html index e5bb965..9b2a2ba 100644 --- a/_includes/themes/zeppelin/_navigation.html +++ b/_includes/themes/zeppelin/_navigation.html @@ -70,9 +70,13 @@ <p>A web-based notebook that enables interactive data analytics. <br/> You can make beautiful data-driven, interactive and collaborative documents with SQL, Scala and more. </p> - <p><a href="http://youtu.be/_PQbVH_aO5E"; target="_zeppelinVideo" class="btn btn-primary btn-lg bigFingerButton" role="button">Watch the video</a> - - <a href="./download.html" class="btn btn-primary btn-lg bigFingerButton" role="button">Get Zeppelin</a></p> + <div class="border row"> + <div class="col-md-12 col-sm-12 col-xs-12 text-center newBtn"> + <a href="http://youtu.be/_PQbVH_aO5E"; target="_zeppelinVideo" class="btn btn-primary btn-lg bigFingerButton" role="button">Tutorial Video</a> + <a href="./download.html" class="btn btn-primary btn-lg bigFingerButton" role="button">GET LATEST ZEPPELIN</a> + </div> + </div> </div> </div> +{% include_relative whats_new.md %} {% endif %} http://git-wip-us.apache.org/repos/asf/zeppelin/blob/1f3a1e6a/_includes/themes/zeppelin/default.html ---------------------------------------------------------------------- diff --git a/_includes/themes/zeppelin/default.html b/_includes/themes/zeppelin/default.html index d986977..66a61a1 100644 --- a/_includes/themes/zeppelin/default.html +++ b/_includes/themes/zeppelin/default.html @@ -49,12 +49,16 @@ <div class="content"> {{ content }} - <hr> - <footer> - <!-- <p>© {{ site.time | date: '%Y' }} {{ site.author.name }}</p>--> - </footer> </div> {% include JB/analytics %} + + {% if page.title == "Zeppelin" %} + {% include_relative twitter.md %} + {% endif %} + + <footer> + <!-- <p>© {{ site.time | date: '%Y' }} {{ site.author.name }}</p>--> + </footer> </body> </html> http://git-wip-us.apache.org/repos/asf/zeppelin/blob/1f3a1e6a/assets/themes/zeppelin/css/style.css ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/css/style.css b/assets/themes/zeppelin/css/style.css index 8f97e8a..131cd89 100644 --- a/assets/themes/zeppelin/css/style.css +++ b/assets/themes/zeppelin/css/style.css @@ -4,7 +4,6 @@ body { padding-top: 50px; - padding-bottom: 20px; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.6; color: #4c555a; @@ -19,6 +18,7 @@ body { .jumbotron { background-color: #3071a9; + margin-bottom: 0px; } .jumbotron h1, @@ -28,6 +28,8 @@ body { .jumbotron p { font-size: 19px; + line-height: 1.5; + margin-bottom: 28px; } .jumbotron .btn { @@ -64,15 +66,8 @@ body { .jumbotron h1 { font-family: 'Patua One', cursive; - -.jumbotron h1 { - font-family: 'Patua One', cursive; -} - -.jumbotron small { - font-size: 60%; - color: #FFF; -} + font-size: 60px; + line-height: 1.5; } .jumbotron small { @@ -174,7 +169,7 @@ body { color: #3071a9; } -.sideMenu li:first-of-type { +.sideMenu li:viz-of-type { border-top-left-radius: 3px; border-top-right-radius: 3px; } @@ -242,7 +237,7 @@ body { padding: 2rem 2rem; margin: 0 auto; } -.content :first-child { +.content :viz-child { margin-top: 0; } @@ -306,10 +301,10 @@ a.anchor { .content li { margin: 0; } -.content li p.first { +.content li p.viz { display: inline-block; } -.content ul :first-child, ol :first-child { +.content ul :viz-child, ol :viz-child { margin-top: 0px; } @@ -391,7 +386,7 @@ a.anchor { color: #819198; border-left: 0.3rem solid #dce6f0; } -.content blockquote > :first-child { +.content blockquote > :viz-child { margin-top: 0; } .content blockquote > :last-child { @@ -519,6 +514,17 @@ a.anchor { a.anchorjs-link:hover { text-decoration: none; } +.index-header { + font-family: 'Helvetica' !important; + text-align: center; + font-size: 38px !important; + font-weight: 700; + text-transform: uppercase; + border-bottom: none; + color: #4c555a !important; + letter-spacing: 1px; +} + /* Helium Package list style */ .heliumPackageContainer p { font-family: "Helvetica Neue"; @@ -663,6 +669,191 @@ a.anchorjs-link:hover { text-decoration: none; } background: #c9e2f9; } +/* For what's new section */ +.new { + background: rgba(226, 233, 239, 0.4); + padding-bottom: 28px; +} + +.new .description { + text-align: center; + padding: 18px; + font-size: 17px; +} + +.newZeppelin { + text-align: center; + font-family: 'Patua One', cursive; + font-size: 30px; + padding-bottom: 28px; + color: #3071a9; +} + +.new h2 { + font-family: "Helvetica"; + text-align: center; + padding-top: 32px; + font-size: 38px; + font-weight: 700; + text-transform: uppercase; + border-bottom: none; + letter-spacing: 1px; +} + +.new h4 { + text-align: center; + font-size: 20px; + font-weight: 700; + padding: 18px; + margin-top: 8px; +} + +.new p { + padding-bottom: 18px; + padding-right: 9px; + padding-left: 9px; + text-align: justify; +} + +.newBtn .round { + border-radius: 24px; +} + +.newBtn .btn { + padding: 14px 16px; + border: 0 none; + font-weight: 700; + font-size: 14px; + letter-spacing: 1px; + text-transform: uppercase; + color: #fff !important; + width: 190px; + margin: 24px 16px +} + +.newBtn .btn:focus, .btn:active:focus, .btn.active:focus { + outline: 0 none; +} + +.newBtn .btn-primary { + background: #0099cc; + color: #ffffff; +} +.newBtn .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { + background: #33a6cc; + transition: .1s ease-in; +} +.newBtn .btn-primary:active, .btn-primary.active { + background: #007299; + box-shadow: none; +} + +/* For twitter news feed button */ +.twitterBtn .round { + border-radius: 18px; +} + +.twitterBtn .btn { + padding: 10px 24px; + border: 0 none; + font-weight: 700; + font-size: 13px; + letter-spacing: 1px; + text-transform: uppercase; + color: #fff !important; + width: 280px; + margin: 8px 16px +} + +.twitterBtn .btn:focus, .btn:active:focus, .btn.active:focus { + outline: 0 none; +} + +.twitterBtn .btn-primary { + background: #0099cc; + color: #ffffff; +} +.twitterBtn .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { + background: #33a6cc; + transition: .1s ease-in; +} +.twitterBtn .btn-primary:active, .btn-primary.active { + background: #007299; + box-shadow: none; +} + +/* Demo img thumbnail */ +.thumbnail { + background-color: transparent; + border: none; + display: inline; +} + +.thumbnail img { + margin: 0 5px 5px 0; +} + +.thumbnail:hover { + background-color: transparent; +} + +/* For enlarged image*/ +.thumbnail span img { + border-width: 0; + padding: 2px; + max-width: 55vw; +} + +.viz .thumbnail span { + position: absolute; + padding: 5px; + left: -55vw; + visibility: hidden; + color: black; + text-decoration: none; + width: 30px; +} + +.viz .thumbnail:hover span { + visibility: visible; + top: 0; + left: 320px; /*position where enlarged image should offset horizontally */ + z-index: 50; +} + +.multi .thumbnail span { + position: absolute; + padding: 5px; + left: -12vw; + top: 160px; + visibility: hidden; + color: black; + text-decoration: none; + width: 30px; +} + +.multi .thumbnail:hover span { + visibility: visible; + z-index: 50; +} + +.personal .thumbnail span { + position: absolute; + padding: 5px; + left: -55vw; + visibility: hidden; + color: black; + text-decoration: none; + width: 30px; +} + +.personal .thumbnail:hover span { + visibility: visible; + top: 0; + z-index: 50; +} + + /* Custom, iPhone Retina */ @media only screen and (max-width: 480px) { .jumbotron h1 { @@ -678,6 +869,34 @@ a.anchorjs-link:hover { text-decoration: none; } .navbar .navbar-brand { padding-bottom: 0; } + + /* For enlarged image*/ + .thumbnail span img { + max-width: 86vw !important; + } + + .viz .thumbnail span { + left: 0; + } + + .viz .thumbnail:hover span { + top: 16vh; + left: 0; + } + + .multi .thumbnail span { + left: 0; + top: 16vh; + } + + .personal .thumbnail span { + left: 0; + } + + .personal .thumbnail:hover span { + top: 16vh; + left: 0; + } } @media only screen http://git-wip-us.apache.org/repos/asf/zeppelin/blob/1f3a1e6a/assets/themes/zeppelin/img/helium.gif ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/img/helium.gif b/assets/themes/zeppelin/img/helium.gif new file mode 100644 index 0000000..e97a238 Binary files /dev/null and b/assets/themes/zeppelin/img/helium.gif differ http://git-wip-us.apache.org/repos/asf/zeppelin/blob/1f3a1e6a/assets/themes/zeppelin/img/personalize.gif ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/img/personalize.gif b/assets/themes/zeppelin/img/personalize.gif new file mode 100644 index 0000000..95c6af2 Binary files /dev/null and b/assets/themes/zeppelin/img/personalize.gif differ http://git-wip-us.apache.org/repos/asf/zeppelin/blob/1f3a1e6a/assets/themes/zeppelin/img/scope.gif ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/img/scope.gif b/assets/themes/zeppelin/img/scope.gif new file mode 100644 index 0000000..aa6c6b1 Binary files /dev/null and b/assets/themes/zeppelin/img/scope.gif differ http://git-wip-us.apache.org/repos/asf/zeppelin/blob/1f3a1e6a/assets/themes/zeppelin/img/user-impersonation.gif ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/img/user-impersonation.gif b/assets/themes/zeppelin/img/user-impersonation.gif new file mode 100644 index 0000000..eb39bc8 Binary files /dev/null and b/assets/themes/zeppelin/img/user-impersonation.gif differ http://git-wip-us.apache.org/repos/asf/zeppelin/blob/1f3a1e6a/index.md ---------------------------------------------------------------------- diff --git a/index.md b/index.md index e817b8a..efeab16 100644 --- a/index.md +++ b/index.md @@ -18,10 +18,15 @@ limitations under the License. --> {% include JB/setup %} <br /> +<h1 class="index-header"> + What is Apache Zeppelin ? +</h1> + +<br /><br /><br /> <div class="row"> <div class="col-md-6" style="padding-right:0"> <h1 style="color:#4c555a">Multi-purpose Notebook</h1> - <p class="index-header"> + <p> The Notebook is the place for all your needs </p> <ul style="list-style-type: none;padding-left:10px;" > @@ -117,4 +122,5 @@ If you want to learn more about this feature, please visit [this page](./docs/la Apache Zeppelin is Apache2 Licensed software. Please check out the [source repository](http://git.apache.org/zeppelin.git) and [how to contribute](./docs/latest/development/howtocontribute.html). Apache Zeppelin has a very active development community. Join to our [Mailing list](https://zeppelin.apache.org/community.html) and report issues on [Jira Issue tracker](https://issues.apache.org/jira/browse/ZEPPELIN). - +</div> +<br /> http://git-wip-us.apache.org/repos/asf/zeppelin/blob/1f3a1e6a/twitter.md ---------------------------------------------------------------------- diff --git a/twitter.md b/twitter.md new file mode 100644 index 0000000..7ffc818 --- /dev/null +++ b/twitter.md @@ -0,0 +1,33 @@ +<!-- +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +--> +{% include JB/setup %} +<div class="new"> + <div class="container"> + <h2>Zeppelin on Twitter</h2> + <br/> + <div class="row"> + <div class="col-md-12 col-sm-12 col-xs-12 text-center"> + {% twitter https://twitter.com/ApacheZeppelin maxwidth=500 limit=4 align=center chrome=nofooter %} + </div> + <div class="col-md-12 col-sm-12 col-xs-12 text-center twitterBtn"> + <p style="text-align:center; margin-top: 32px; font-size: 12px; color: gray; font-weight: 200; font-style: italic; padding-bottom: 0;">See more tweets or</p> + <a href="https://twitter.com/ApacheZeppelin"; target="_blank" class="btn btn-primary btn-lg round" role="button"> + Follow Zeppelin on + <i class="fa fa-twitter fa-lg" aria-hidden="true"></i> + </a> + </div> + </div> + </div> + <hr> +</div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/zeppelin/blob/1f3a1e6a/whats_new.md ---------------------------------------------------------------------- diff --git a/whats_new.md b/whats_new.md new file mode 100644 index 0000000..cd53e4a --- /dev/null +++ b/whats_new.md @@ -0,0 +1,104 @@ +<!-- +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +--> +{% include JB/setup %} + +<div class="new"> + <div class="container"> + <h2>What's new in</h2> + <span class="newZeppelin center-block">Apache Zeppelin 0.7</span> + <div class="border row"> + <div class="border col-md-4 col-sm-4"> + <h4>Pluggable Visualization <br/> via Helium</h4> + <div class="viz"> + <p> + Load/unload Javascript + <a href="https://www.npmjs.com/"; target="_blank">npm packages</a> + like Zeppelin built-in chart using Helium framework. + <a class="thumbnail" href="#thumb"> + See more in DEMO <span><img src="./assets/themes/zeppelin/img/helium.gif" /></span> + </a> + and + <a href="./docs/0.7.0/development/writingzeppelinvisualization.html#how-it-works" target="_blank">Zeppelin Visualization: How it works?</a> + </p> + </div> + </div> + <div class="border col-md-4 col-sm-4"> + <h4>Multi-user Support Improvement</h4> + <div class="multi"> + <p> + Separate interpreter running scope + <span style="font-weight: 900; font-style: initial;">Per user</span> or + <span style="font-weight: 900; font-style: initial;">Per Note</span>. + <a class="thumbnail text-center" href="#thumb"> + See more in DEMO. + <span><img src="./assets/themes/zeppelin/img/scope.gif" style="max-width: 55vw" /></span> + </a> <br/> + Also running Zeppelin interpreter process as web front end user is available now. + <a class="thumbnail text-center" href="#thumb"> + See more in DEMO + <span style="top: 230px;"><img src="./assets/themes/zeppelin/img/user-impersonation.gif" style="max-width: 55vw;" /></span> + </a> + and + <a href="./docs/0.7.0/manual/userimpersonation.html" target="_blank">Interpreter User Impersonation</a>. + </p> + </div> + </div> + <div class="border col-md-4 col-sm-4"> + <h4>New Note Mode - <br/> Personal Mode</h4> + <div class="personal"> + <p> + Personalize your analysis result by switching the note to Personal Mode. + (Collaboration Mode is default.) + <a class="thumbnail text-center personal" href="#thumb"> + See more in DEMO. + <span><img src="./assets/themes/zeppelin/img/personalize.gif" /></span> + </a> + </p> + </div> + </div> + </div> + <div class="border row"> + <div class="border col-md-4 col-sm-4"> + <h4>Support Spark 2.1</h4> + <p> + The latest version of <a href="http://spark.apache.org/releases/spark-release-2-1-0.html"; target="_blank">Apache Spark 2.1.0</a> is now available in Zeppelin. + </p> + </div> + <div class="border col-md-4 col-sm-4"> + <h4>Improvement in Python</h4> + <p> + Integrated + <a href="./docs/latest/interpreter/python.html#matplotlib-integration" target="_blank">Matplotlib</a> + with Python & Pyspark interpreter. And + <a href="./docs/latest/interpreter/python.html#conda" target="_blank">Conda</a> + is now available in Zeppelin. + </p> + </div> + <div class="border col-md-4 col-sm-4"> + <h4>New Interpreters</h4> + <p> + You can use + <a href="https://beam.apache.org/"; target="_blank">Apache Beam</a>, + <a href="https://github.com/spotify/scio"; target="_blank">Scio</a>, and + <a href="https://pig.apache.org/"; target="_blank">Apache Pig</a> as backend interpreters from this release. + </p> + </div> + </div> + <div class="col-md-12 col-sm-12 col-xs-12 text-center"> + <p style="text-align:center; margin-top: 32px; font-size: 14px; color: gray; font-weight: 200; font-style: italic; padding-bottom: 0;">See more details in + <a href="./releases/zeppelin-release-0.7.0.html">0.7 Release Note</a> + </p> + </div> + </div> +</div>
