diff --git a/index.md b/index.md index da6740b..46e9e98 100644 --- a/index.md +++ b/index.md @@ -97,7 +97,11 @@ and for the JavaScript example, [This page](examples/) links to in-browser runnable demos (and source code) of Syndicate/js programs. -## Code +## Install + +Follow the instructions [here](install/). + +## Source Code Syndicate is implemented both for [Racket](http://racket-lang.org/) and for [JavaScript](https://en.wikipedia.org/wiki/ECMAScript). diff --git a/install/1-drracket-startup.png b/install/1-drracket-startup.png new file mode 100644 index 0000000..c511c0b Binary files /dev/null and b/install/1-drracket-startup.png differ diff --git a/install/2-package-manager.png b/install/2-package-manager.png new file mode 100644 index 0000000..db8a77c Binary files /dev/null and b/install/2-package-manager.png differ diff --git a/install/3-package-installation-in-progress.png b/install/3-package-installation-in-progress.png new file mode 100644 index 0000000..3bb4873 Binary files /dev/null and b/install/3-package-installation-in-progress.png differ diff --git a/install/4-package-installation-complete.png b/install/4-package-installation-complete.png new file mode 100644 index 0000000..892e902 Binary files /dev/null and b/install/4-package-installation-complete.png differ diff --git a/install/5-bank-account-example-source.png b/install/5-bank-account-example-source.png new file mode 100644 index 0000000..93c3d09 Binary files /dev/null and b/install/5-bank-account-example-source.png differ diff --git a/install/6-bank-account-run-complete.png b/install/6-bank-account-run-complete.png new file mode 100644 index 0000000..cc8d449 Binary files /dev/null and b/install/6-bank-account-run-complete.png differ diff --git a/install/7-clock-face-example-source.png b/install/7-clock-face-example-source.png new file mode 100644 index 0000000..4f0bccd Binary files /dev/null and b/install/7-clock-face-example-source.png differ diff --git a/install/8-clock-face-example-running.png b/install/8-clock-face-example-running.png new file mode 100644 index 0000000..6bfb3ee Binary files /dev/null and b/install/8-clock-face-example-running.png differ diff --git a/install/index.md b/install/index.md new file mode 100644 index 0000000..5c75105 --- /dev/null +++ b/install/index.md @@ -0,0 +1,83 @@ +--- +title: Installation Instructions +--- + +# Installation—Racket + +There are two steps to installing Syndicate for Racket: + + 1. Install Racket + 2. Install the Syndicate package using the Racket package manager + +At that point, you can run example programs and develop your own. + +## Racket + +First, install Racket by following the +[instructions on `racket-lang.org`](http://racket-lang.org/). + +After installation is complete, start DrRacket. From the Unix +command-line, run `drracket`. + +![DrRacket after opening](1-drracket-startup.png) + +## Syndicate + +Choose the DrRacket `File`>`Package Manager...` menu item. + +![DrRacket package manager](2-package-manager.png) + +Type "syndicate" into the `Package Source` field, and click `Install`. + +Once the installation has completed, close the `Package Manager` +window. + +![Syndicate package installation complete](4-package-installation-complete.png) + +You can alternatively use the command-line to install the `syndicate` +package: + + raco pkg install --auto syndicate + +## Running Examples + +### ... from DrRacket + +Try running a small non-graphical example in DrRacket: choose +`File`>`Open Require Path...` (also available by pressing +`Shit+Ctrl+O`), and type `syndicate/examples/actor/bank-account.rkt` +into the field at the top of the window that appears. Click `OK`. + +![bank-account example source](5-bank-account-example-source.png) + +You will be greeted with the source to `bank-account.rkt`. Click the +`Run` button. + +![bank-account example output](6-bank-account-run-complete.png) + +Now try a small graphical example: choose `File`>`Open Require +Path...` again, and this time, type +`syndicate-gl/examples/clock-face.rkt` before clicking `OK`. + +![clock-face example source](7-clock-face-example-source.png) + +You will be greeted with the source to `clock-face.rkt`. Click the +`Run` button. After a moment, the following window should appear. The +hands of the clock are draggable; press `q` to close the window. + +![clock-face window](8-clock-face-example-running.png) + +### ... from the command line + +You can also run these examples from the command line. The bank +account example can be run as follows: + + $ racket -l syndicate/examples/actor/bank-account + Balance changed to 0 + Balance changed to 100 + Balance changed to 70 + #f + +The following command starts the `clock-face` program: + + $ racket -l syndicate-gl/examples/clock-face diff --git a/style.css b/style.css index e8bc281..0437987 100644 --- a/style.css +++ b/style.css @@ -203,6 +203,13 @@ hr { text-align: right; } +.content p > img { + max-width: 100%; + max-height: 30em; + display: block; + margin: 0 auto; +} + .clear { clear: both; } .clearright { clear: right; }