Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

0.5.0 version Pre-Release #141

Merged
merged 85 commits into from
Feb 17, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
85 commits
Select commit Hold shift + click to select a range
8e38d5d
Initializes new js sbt module
juanpedromoreno Sep 26, 2016
28da5b9
Rough draft for Kazari JS plugin for code decoration
Sep 28, 2016
9922246
Using evaluator-client to establish connection to the evaluator API
Oct 7, 2016
1c10ff9
Launching modal window containing CodeMirror instance with code snipp…
Oct 10, 2016
1365f31
Fixing issues
Oct 10, 2016
84c6bfb
Merge pull request #52 from 47deg/javi-include-rough-draft-of-js-plugin
Oct 10, 2016
4551f93
Refactoring of previous work - Changes in API so users can select Cod…
Oct 10, 2016
287a6d5
Moved superfluous vals from KazariPlugin
Oct 10, 2016
457e5c6
Added preliminary draft of documentation for the Kazari Plugin
Oct 11, 2016
4d1ceb8
Further cleanup
Oct 11, 2016
5627930
Merge branch 'master' into js-show-modal-window-with-code
Oct 11, 2016
36cf634
Deletion of external javascript sources
Oct 11, 2016
41d0a26
Updated docs to take into account the need to provide CodeMirror scripts
Oct 11, 2016
f47d787
Fix minor typos in docs
Oct 11, 2016
0a81237
Fix minor typos in docs
Oct 11, 2016
c1b4c9c
Merge branch '0.3.0-version' into js-show-modal-window-with-code
Oct 11, 2016
ff64b1d
Merge branch 'master' into 0.3.0-version
juanpedromoreno Oct 11, 2016
0cdb83d
Launching modal window containing CodeMirror instance with code snipp…
Oct 10, 2016
f1254fb
Refactoring of previous work - Changes in API so users can select Cod…
Oct 10, 2016
1231d81
Moved superfluous vals from KazariPlugin
Oct 10, 2016
7160eb9
Added preliminary draft of documentation for the Kazari Plugin
Oct 11, 2016
4b19273
Further cleanup
Oct 11, 2016
83d4b14
Deletion of external javascript sources
Oct 11, 2016
38d077d
Updated docs to take into account the need to provide CodeMirror scripts
Oct 11, 2016
667b35a
Fix minor typos in docs
Oct 11, 2016
1f3b5e3
Fix minor typos in docs
Oct 11, 2016
7ffd1d4
Removed PluginConfig, configuration will be done directly as paramete…
Oct 13, 2016
decc67b
Added tasks fastOptGenerate and fullOptGenerate that combine the resu…
Oct 13, 2016
3f372a1
Modified documentation to reflect the new sbt tasks
Oct 13, 2016
f31c741
Edited kazari docs to reflect change on the use of the decoration fun…
Oct 13, 2016
f83ea41
Fixed minor issue in kazari docs
Oct 13, 2016
95d1e03
Merge branch 'js-show-modal-window-with-code' into js-modal-window-ev…
Oct 13, 2016
690555b
Merge pull request #59 from 47deg/js-modal-window-evaluation-code
Oct 14, 2016
ae8420d
Removed ScalaCSS - First work on implementing design
Oct 18, 2016
d9d3301
Added run behaviour to modal / cleanup and refactoring of older code
Oct 19, 2016
7418b39
Add complete style to modal - Further code cleanup
Oct 19, 2016
74c4993
Fixing old treatment of nulls with Option
Oct 19, 2016
56fbc48
Added feedback messages to the compilator
Oct 20, 2016
cb7ee3b
Refactoring of the code related to the actual HTML tags to avoid unne…
Oct 20, 2016
24abbf8
Better handling of compilation error messages from the evaluator
Oct 20, 2016
f757370
Updated README
Oct 20, 2016
5846bbf
Added CSS filesto resources folder
Oct 20, 2016
a37f993
Merge pull request #64 from 47deg/javi-implement-design
Oct 21, 2016
2caff99
Merge branch 'master' into 0.3.0-version
juanpedromoreno Oct 23, 2016
d92d822
Formats build.sbt file
juanpedromoreno Oct 23, 2016
c81d4c3
Merge branch 'master' into 0.3.0-version
Nov 4, 2016
a7fd4fe
Merge branch 'master' into 0.3.0-version
juanpedromoreno Dec 14, 2016
a001a27
Force modal editor scroll to go to aproximate line corresponding to a…
Oct 21, 2016
1683dbb
Save Gist functionality added (sans design)
Nov 4, 2016
13748ab
User is responsible of handing a valid GitHub auth token as an extra …
Nov 4, 2016
e6e7d35
Fixes css conflict. Adds code reformatter js project
juanpedromoreno Dec 15, 2016
331587e
Integrates tut :decorate modifier
juanpedromoreno Jan 24, 2017
b68d053
Creating different snippet code behaviours - Adapting those to the sb…
Jan 26, 2017
ff55f7e
Storing different modal code snippets in web session storage - remove…
Jan 26, 2017
16b7e2f
Kazari is alive. Long live Kazari
Jan 26, 2017
829f38d
Including external javascript dependencies for Kazari so it can be co…
Jan 26, 2017
6f4aac4
Add new settings for Kazari configuration
Jan 26, 2017
585f87b
Fixing broken tests
Jan 26, 2017
1536ca4
Added more detailed settings for Kazari integration
Jan 27, 2017
4ff8cfb
Added required Kazari files to the main sbt-microsite resources folde…
Feb 1, 2017
844cdf9
Kazari is no longer a plugin - Kazari now supporting simple and seque…
Feb 1, 2017
7cf295f
Removed kazari enable setting
Feb 1, 2017
9dd7cfa
Renamed CSS resources
Feb 2, 2017
cfa0505
Testing resources copy for travis integration
Feb 2, 2017
7728b97
Scripts to build Kazari and copy it (with its needed resources) to sb…
Feb 2, 2017
fa09cff
Removed codemirror and javascript.js files, as those are already incl…
Feb 2, 2017
ec9baa5
Updated documentation
Feb 2, 2017
6b62e85
Fixing typo in documentation
Feb 2, 2017
0708fec
General cleanup of Kazari code
Feb 2, 2017
ac1fc9b
Adding a valid Kazari evaluator token as a default to use the Scala E…
Feb 3, 2017
acd899a
Merge pull request #128 from 47deg/kazari-tags-behaviour-implementation
Feb 3, 2017
ae4c705
Change style + add sass
israelperezglez Feb 10, 2017
43ee0e2
kazari-style.css
israelperezglez Feb 14, 2017
0375d45
Implemented design changes in DOM and CSS - Removing kazariStyle SBT …
Feb 15, 2017
cebf98d
Applying highlight theme color to kazari buttons
Feb 15, 2017
6855a99
Better adjustment of the button bar colors and modal window based on …
Feb 15, 2017
ceed7d1
Improved color selection from highlight.js color scheme
Feb 16, 2017
11b672f
Merge pull request #139 from 47deg/sm129-kazari-design-improvements
Feb 16, 2017
5525a20
Merge branch 'kazari-integration' into ip-129-kazari-design-tweaks
israelperezglez Feb 16, 2017
d159272
Merge pull request #138 from 47deg/ip-129-kazari-design-tweaks
israelperezglez Feb 16, 2017
0ad380b
Merge branch 'master' into 0.3.0-version
juanpedromoreno Feb 16, 2017
7136bd2
Merge branch '0.3.0-version' into kazari-integration
Feb 17, 2017
3c452bf
Updating docs
Feb 17, 2017
f9a9544
Merge pull request #140 from 47deg/kazari-integration
Feb 17, 2017
7a28cb1
Bumps snapshot version
juanpedromoreno Feb 17, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,6 @@ script:
- sbt ++$TRAVIS_SCALA_VERSION test scripted
after_success:
- if [ "$TRAVIS_BRANCH" = "master" -a "$TRAVIS_PULL_REQUEST" = "false" ]; then bash
scripts/publishMicrosite.sh; bash scripts/deploy.sh; fi
scripts/kazariBuild.sh; bash scripts/publishMicrosite.sh; bash scripts/deploy.sh; fi
- if [ "$TRAVIS_PULL_REQUEST" = "true" ]; then echo "Not in master branch, skipping
deploy and release"; fi
100 changes: 100 additions & 0 deletions KAZARI_README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
# Kazari

Kazari is a script developed on **Scala.Js** that allows to turn your project's existing documentation into interactive Scala worksheets. Basically it decorates your code snippets with extra functionality that allows users to run them in a [remote Scala evaluator](https://github.com/scala-exercises/evaluator) and edit it, by just including the script and some CSS files to your site.

# Installation

Kazari comes integrated with `sbt-microsites` (version >0.4.1), and all sites built with it are able to use it right out the bat. To do so you need to add certain classes to the code snippets in your library documentation `tut` files. i.e.:

```tut:silent:decorate(.kazari-id-1)
type UserId = Int
case class User(id: UserId, username: String)
```
The `decorate` tag in `tut` allows you to add CSS classes at will to your code snippets. Kazari treats code snippets differently depending on the classes you assign to them:

* **Single snippets**: code snippets that should be evaluated alone should be decorated with the **kazari-single** CSS class.
* **Inter-related snippets**: code snippets that depend on others should be grouped with the **kazari-id-???** CSS class. The *???* can be anything (a name, number, etc...). Those snippets will be evaluated together sequentially. i.e.: if you hit "Run" on the first one, only that snippet will be evaluated. If you click on the second, the first and the second will be evaluated, and so on...

Once you have added these CSS classes to your code, just build your microsite as always and you'll see a bar with some buttons under each code block. The **Run** button will send a request to the configured remote Scala evaluator to evaluate that code snippet (or together with those before if it's part of a sequence of snippets). The **Edit** button will launch a modal window that will allow you to play with the code and run your own changes in the evaluator (or removing by using the **Reset** button).

`sbt-microsites` includes sbt settings to configure Kazari to suit your needs. Here's a list of those settings:

* **micrositeKazariEvaluatorUrl**: URL of the remote Scala Evaluator to be used by Kazari. Defaults to the [remote evaluator](https://github.com/scala-exercises/evaluator) used in [Scala Exercises](https://github.com/scala-exercises/scala-exercises).
* **micrositeKazariEvaluatorToken**: remote Scala Evaluator token to be used by Kazari. Check out the [README of the evaluator](https://github.com/scala-exercises/evaluator) for information on how to generate it.
* **micrositeKazariGithubToken**: optional GitHub token to be used by Kazari. Required for Kazari to perform certain actions (i.e. save Gists), which are still experimental.
* **micrositeKazariCodeMirrorTheme**: optional CodeMirror theme to be used by Kazari in its modal editor.
* **micrositeKazariDependencies**: optional list of dependencies needed to compile the code to be evaluated by Kazari (set of groupId, artifactId, and versionId).
* **micrositeKazariResolvers**: optional list of resolver urls needed for the provided dependencies to be fetched by Kazari.

Kazari will try to match its color scheme to the Microsite's highlight color theme. If the default colors don't quite match or you want to change them, we provide a few class for you to customize:

* **compiler-kazari-background**: background color of the button bar.
* **compiler-kazari-border**: foreground color of the button borders.
* **compiler-kazari-color**: foreground color of the button texts and icons.

# Using Kazari without sbt-microsites

Kazari comes integrated with `sbt-microsites` (and in fact is a part of the project), but you don't need to create your site with the plugin in order to use it.

To use Kazari in an existing documentation, you need to include the main `kazari.js` script in your site. You'll also need to include the Kazari CSS stylesheet (`kazari-style.css`) which you will find in the resources folder of the project (`sbt-microsites/kazari/src/main/resources`).

To allow users to edit code interactively, Kazari relies on a Javascript code editor called [CodeMirror](http://codemirror.net). CodeMirror comes integrated with the scripts you add to your documentation, but you'll need to include the following CSS files to your site:

* `codemirror.css`, the main stylesheet used by CodeMirror.
* Theme CSS: CodeMirror can be configured with different themes. In order for the themes to work, you'll need to provide their associated stylesheet too (i.e.: `monokai.css` for the `monokai` theme, set by the `micrositeKazariCodeMirrorTheme` sbt setting in `sbt-microsites`).

Those files can be downloaded from the [CodeMirror official site](http://codemirror.net/doc/releases.html). Note that Kazari is built with CodeMirror version **5.19.0**.

Once you get all your scripts and stylesheets ready, you just need to include them in your project like this:

```html
<body>

<script type="text/javascript" src="kazari.js"></script>
<link rel="stylesheet" href="kazari-style.css">
<link rel="stylesheet" href="codemirror.css">
<link rel="stylesheet" href="monokai.css">

<script type="text/javascript">
$(document).ready(function() {
kazari.KazariPlugin().decorateCode("http://localhost:8080/eval", "remote_evaluator_auth_token", "github_auth_token", "monokai")
})
</script>

<!-- Website contents -->
```

After including the scripts and stylesheets, we wait for the DOM to be ready, and we make a call to `decorateCode`. This function is the one handling the decoration process, and it takes several parameters:

* **Remote Scala evaluator URL**: it contains the URL of the [remote Scala evaluator](https://github.com/scala-exercises/evaluator) we want to connect to. In this case we're using a local instance by executing the project in our machine.
* **Auth token**: a security token needed to make requests to the evaluator. You can generate your own by following the steps in the "Authentication" section of the [evaluator documentation](https://github.com/scala-exercises/evaluator).
* **Github auth token**: a valid GitHub auth token with at least the following scopes: "user", "gist". This is required for Kazari to save edited snippets as Gists.
* **CodeMirror theme**: name of the CodeMirror theme to use when showing the interactive edit window.

Kazari expects your code to be set in `code` tags under `div` tags. These `div` tags should include the CSS class we aforementioned in the **Using Kazari without sbt-microsites** section.

Also note that if you're creating a documentation for a library, or for almost any kind of Scala project, it's more than probable that your code needs some **dependencies** to rely on. The remote Scala evaluator needs to know those in order to compile your code. Both dependencies and resolvers can be made visible to Kazari by using the following meta tags:

```html
<meta property="kazari-dependencies" content="groupId_1;artifactId_1;version_1,groupId_2;artifactId_2;version_2,...">
<!-- i.e.: "com.fortysevendeg;fetch_2.11;0.3.0-SNAPSHOT,com.fortysevendeg;mvessel-android;0.1" -->
<meta property="kazari-resolvers" content="resolverUrl_1,resolverUrl_2,resolverUrl_3,...">
<!-- i.e.: "https://oss.sonatype.org/content/repositories/snapshots,https://dl.bintray.com/content/sbt/sbt-plugin-releases" -->
```

# Building the plugin

Kazari is a **Scala.JS** application. Even if it's part of the `sbt-microsites` project, it exists in its own independent module called `kazari`. Before being able to build it, you'll need to include the CodeMirror scripts that Kazari relies on. You can download the CodeMirror release from their [official site](http://codemirror.net/doc/releases.html), noting that Kazari is built with version `5.19.0`. Once you download the package, you'll be able to find the needed scripts in the following locations:

* lib/codemirror.js
* mode/clike.js

Put these in the `resources` folder inside the `kazari` project of `sbt-microsites` (`sbt-microsites/kazari/src/main/scala/resources`) and you're good to go! In order to generate the scripts, please follow the next steps while in a sbt session inside the `sbt-microsites` project:

```scala
sbt-microsites> project kazari

js> fullOptGenerate
```

The `fullOptGenerate` task will compile the project, then generate and optimize Kazari's scripts, and finally combine the resulting scripts into a single file. `fullOptGenerate` is a slow command (as it relies on the `fullOptJS` task from Scala.JS, which perform several optimizations), so if you're planning to contribute to Kazari, please use the `fastOptGenerate` task in your development process instead. It will produce a larger script, but in more suitable build times. You'll be able to find the generated script (`kazari.js`) in the `target/scala-2.11` folder in the `kazari` project. This file contains both the javascript dependencies and the compiled Kazari code. If you want to use both files separately, use the `kazari-opt.js` and `kazari-jsdeps.js` instead.
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@ We recommend taking a look at the `Getting Started` section at the [documentatio

Microsites comes with a range of options to customize and configure your project's site. Please visit the [documentation](https://47deg.github.io/sbt-microsites/docs/) section for more information.

# Kazari plugin

If you already have some pre-existing documentation for your project, `sbt-microsites` also provides a Javascript plugin called [Kazari](KAZARI_PLUGIN.md) that decorates your code snippets with functionality that allows users to edit them live and run them in a remote Scala evaluator; making the learning process a whole lot easier.

# sbt-microsites in the wild

Many Scala projects use sbt-microsites to display documentation and project notes. If you wish to add your library here please consider a PR to include it in the list below.
Expand Down
55 changes: 48 additions & 7 deletions build.sbt
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@ import sbt.Keys._
import de.heikoseeberger.sbtheader.license.Apache2_0
import catext.Dependencies._

val dev = Seq(Dev("47 Degrees (twitter: @47deg)", "47 Degrees"))
val gh =
GitHubSettings("com.fortysevendeg", "sbt-microsites", "47 Degrees", apache)
val dev = Seq(Dev("47 Degrees (twitter: @47deg)", "47 Degrees"))
val gh = GitHubSettings("com.fortysevendeg", "sbt-microsites", "47 Degrees", apache)
val vAll = Versions(versions, libraries, scalacPlugins)

lazy val artifactSettings = Seq(
Expand Down Expand Up @@ -33,9 +32,9 @@ lazy val pluginSettings = Seq(
"com.lihaoyi" %% "scalatags" % "0.6.0",
"org.scalactic" %% "scalactic" % "3.0.0",
"net.jcazevedo" %% "moultingyaml" % "0.4.0",
"com.sksamuel.scrimage" %% "scrimage-core" % "2.1.7",
"org.scalatest" %% "scalatest" % versions("scalatest") % "test",
"org.scalacheck" %% "scalacheck" % versions("scalacheck") % "test"
"org.scalacheck" %% "scalacheck" % versions("scalacheck") % "test",
"com.sksamuel.scrimage" %% "scrimage-core" % "2.1.7"
),
scalafmtConfig in ThisBuild := Some(file(".scalafmt"))
) ++ reformatOnCompileSettings
Expand All @@ -47,15 +46,50 @@ lazy val micrositeSettings = Seq(
micrositeDocumentationUrl := "/sbt-microsites/docs/",
micrositeGithubOwner := "47deg",
micrositeGithubRepo := "sbt-microsites",
micrositeHighlightTheme := "color-brewer"
micrositeHighlightTheme := "color-brewer",
includeFilter in makeSite := "*.html" | "*.css" | "*.png" | "*.jpg" | "*.gif" | "*.js" | "*.swf" | "*.md"
)

lazy val jsSettings = Seq(
scalaVersion := "2.11.8",
scalaJSStage in Global := FastOptStage,
parallelExecution := false,
scalaJSUseRhino := false,
requiresDOM := false,
skip in packageJSDependencies := false,
jsEnv := NodeJSEnv().value,
libraryDependencies ++= Seq(
"org.scala-js" %%% "scalajs-dom" % "0.9.0",
"be.doeraene" %%% "scalajs-jquery" % "0.9.0",
"com.lihaoyi" %%% "upickle" % "0.4.1",
"org.scala-exercises" %%% "evaluator-client" % "0.1.2-SNAPSHOT",
"com.lihaoyi" %%% "scalatags" % "0.6.0",
"org.querki" %%% "jquery-facade" % "1.0-RC6",
"org.denigma" %%% "codemirror-facade" % "5.11-0.7",
"com.fortysevendeg" %%% "github4s" % "0.9.0",
"fr.hmil" %%% "roshttp" % "2.0.0-RC1"
),
resolvers ++= Seq(Resolver.url("bintray-sbt-plugin-releases",
url("https://dl.bintray.com/content/sbt/sbt-plugin-releases"))(
Resolver.ivyStylePatterns),
Resolver.sonatypeRepo("snapshots"),
Resolver.bintrayRepo("denigma", "denigma-releases")),
jsDependencies ++= Seq(
"org.webjars" % "jquery" % "2.1.3" / "2.1.3/jquery.js",
ProvidedJS / "codemirror.js",
ProvidedJS / "clike.js" dependsOn "codemirror.js"
)
)

lazy val buildInfoSettings = Seq(
buildInfoKeys := Seq[BuildInfoKey](name, version, scalaVersion, sbtVersion),
buildInfoPackage := "microsites"
)

lazy val commonSettings = artifactSettings ++ miscSettings
lazy val commonSettings = artifactSettings ++ miscSettings ++ reformatOnCompileSettings ++ Seq(
scalafmtConfig in ThisBuild := Some(file(".scalafmt"))
)

lazy val allSettings = pluginSettings ++
commonSettings ++
tutSettings ++
Expand All @@ -81,3 +115,10 @@ lazy val docs = (project in file("docs"))
.settings(moduleName := "docs")
.enablePlugins(MicrositesPlugin)
.enablePlugins(BuildInfoPlugin)

lazy val kazari = (project in file("kazari"))
.settings(moduleName := "kazari")
.settings(commonSettings: _*)
.settings(jsSettings: _*)
.settings(KazariBuild.kazariTasksSettings: _*)
.enablePlugins(ScalaJSPlugin)
Loading