diff --git a/README.md b/README.md index 44a7f80..d67f878 100644 --- a/README.md +++ b/README.md @@ -12,20 +12,37 @@ The easiest way to try Tampio, no manual `libvoikko` setup required: docker compose run --rm tampio ``` -This drops you into a shell with `tampio` available. Run any example: +This drops you into a shell with `tampio` available. Compile an example to HTML: ```sh -tampio examples/basics/hello.tampio +tampio -i -p examples/basics/hello.itp > examples/basics/hello.html ``` +Then serve it locally and open it in your browser: + +```sh +python3 -m http.server 9994 --directory examples/basics +``` + +| URL | What it does | +|-----|-------------| +| `http://localhost:9994/hello.html` | Alerts "Hei maailma!" on load | +| `http://localhost:9994/factorial.html` | Prompts for n, displays n! | +| `http://localhost:9994/fibonacci.html` | Prompts for n, displays fib(n) | + ## What is Tampio? Tampio programs read like Finnish sentences. Methods are defined using grammatical cases, so the language's syntax is shaped by natural-language morphology rather than punctuation. ```tampio -[Tampio example will go here] +Pienen luvun kertoma on + riippuen siitä, onko se pienempi tai yhtä suuri kuin yksi, + joko yksi + tai pieni luku kerrottuna pienen luvun edeltäjän kertomalla. ``` +`pienen luvun kertoma` — "the factorial of a small number". The parameter `pieni luku` (small number) appears in genitive case before the method name, and the recursive call `pienen luvun edeltäjän kertomalla` reads as "by the factorial of the predecessor of the small number". + See [`docs/cheatsheet.md`](docs/cheatsheet.md) for a map of Finnish grammatical cases to their roles in Tampio code, and [`docs/vs-javascript.md`](docs/vs-javascript.md) for side-by-side comparisons with JavaScript. ## Examples diff --git a/examples/basics/factorial.itp b/examples/basics/factorial.itp new file mode 100644 index 0000000..49f0890 --- /dev/null +++ b/examples/basics/factorial.itp @@ -0,0 +1,30 @@ +# Kertoma — Factorial in Tampio +# +# Methods are defined as: "[param in genitive] [method name] on [expression]" +# The parameter "pieni luku" (small number) appears in genitive: "pienen luvun" +# +# "riippuen siitä, onko ... joko ... tai ..." = ternary expression +# "pienempi tai yhtä suuri kuin yksi" = "less than or equal to one" +# "kerrottuna ... kertomalla" = "multiplied by [factorial]" +# Multiplication uses adessive case: "kertomalla" = "by the factorial" + +Pienen luvun kertoma on + riippuen siitä, onko se pienempi tai yhtä suuri kuin yksi, + joko yksi + tai pieni luku kerrottuna pienen luvun edeltäjän kertomalla. + +# "edeltäjä" = "predecessor" — defines n-1 as a helper method + +Luvun edeltäjä on se vähennettynä yhdellä. + +# "Olkoon X uusi muuttuja, jonka arvo on Y" = declare variable X with value Y + +Olkoon pieni muuttuja uusi muuttuja, jonka arvo on nolla. + +# Page-load event: prompt for a number, display its factorial +# "luetaan luku" = "a number is read" (browser prompt) +# "näyttää ... kertoman" = "shows the factorial of..." (genitive: kertoman) + +Kun nykyinen sivu avautuu, + pieneen muuttujaan luetaan luku + ja nykyinen sivu näyttää pienen muuttujan arvon kertoman. diff --git a/examples/basics/fibonacci.itp b/examples/basics/fibonacci.itp new file mode 100644 index 0000000..4b1a95b --- /dev/null +++ b/examples/basics/fibonacci.itp @@ -0,0 +1,30 @@ +# Fibonacci-kani — Fibonacci Numbers in Tampio +# +# The method is named "kani" (rabbit) — a nod to Fibonacci's original rabbit problem, +# which is how he introduced the sequence in 1202. +# +# Base case: for n ≤ 1, fib(n) = n (covers fib(0)=0 and fib(1)=1 in one branch) +# Recursive: fib(n) = fib(n-1) + fib(n-2) +# +# fib(n-2) is computed by chaining: "edeltäjän edeltäjä" = predecessor of predecessor +# This avoids needing a two-word helper method name. +# +# "lisättynä ... kaniin" = "added to [kani value]" (illative case) + +Pienen luvun kani on + riippuen siitä, onko se pienempi tai yhtä suuri kuin yksi, + joko pieni luku + tai pienen luvun edeltäjän kani lisättynä pienen luvun edeltäjän edeltäjän kaniin. + +# "edeltäjä" = predecessor (n-1) — already in the standard library, +# redefined here for clarity. + +Luvun edeltäjä on se vähennettynä yhdellä. + +Olkoon pieni muuttuja uusi muuttuja, jonka arvo on nolla. + +# "näyttää ... kanin" = "shows the rabbit/fibonacci of..." (genitive: kanin) + +Kun nykyinen sivu avautuu, + pieneen muuttujaan luetaan luku + ja nykyinen sivu näyttää pienen muuttujan arvon kanin. diff --git a/examples/basics/hello.itp b/examples/basics/hello.itp new file mode 100644 index 0000000..93c9f40 --- /dev/null +++ b/examples/basics/hello.itp @@ -0,0 +1,10 @@ +# Hei maailma! — Hello World in Tampio +# +# "Kun nykyinen sivu avautuu" = "When the current page opens" +# This is Tampio's page-load event hook — the entry point of every program. +# +# "teksti" wraps a string literal. +# "näytetään käyttäjälle" = "is shown to the user" (triggers a browser alert) + +Kun nykyinen sivu avautuu, + teksti "Hei maailma!" näytetään käyttäjälle. diff --git a/examples/basics/index.itp b/examples/basics/index.itp new file mode 100644 index 0000000..1c05bab --- /dev/null +++ b/examples/basics/index.itp @@ -0,0 +1,40 @@ +# Tampiorama +# +# An index of annotated Tampio examples. +# This page is itself a Tampio program — the source on the left +# is what generates the links and descriptions on the right. +# +# "nykyinen sivu näyttää tekstin X" = document.write(X) + +# Hei maailma — Hello World +# +# The simplest Tampio program. +# Entry point: Kun nykyinen sivu avautuu = When the current page opens +# "näytetään käyttäjälle" triggers a browser alert. + +# Kertoma — Factorial +# +# Recursive factorial using the ternary: +# riippuen siitä ... joko ... tai +# = depending on whether ... either ... or +# Multiplication uses adessive case: kerrottuna kertomalla + +# Fibonacci-kani — Fibonacci +# +# Recursive Fibonacci named "kani" (rabbit), +# after Fibonacci's original rabbit problem from 1202. +# Addition uses illative case: lisättynä kaniin +# n-2 computed by chaining: edeltäjän edeltäjä + +Kun nykyinen sivu avautuu, + nykyinen sivu näyttää tekstin "

Tampiorama

", + nykyinen sivu näyttää tekstin "

Annotated examples for Tampio, a natural-language OOP language using Finnish grammar that compiles to JavaScript.

", + nykyinen sivu näyttää tekstin "

Hei maailma →

", + nykyinen sivu näyttää tekstin "

Hello world. Page-load entry point, browser alert.

", + nykyinen sivu näyttää tekstin "

Open the page — it will alert 'Hei maailma!' immediately.

", + nykyinen sivu näyttää tekstin "

Kertoma →

", + nykyinen sivu näyttää tekstin "

Recursive factorial. Ternary branching, adessive multiplication.

", + nykyinen sivu näyttää tekstin "

Open the page — enter a number when prompted, e.g. 5, and see 120.

", + nykyinen sivu näyttää tekstin "

Fibonacci-kani →

", + nykyinen sivu näyttää tekstin "

Recursive Fibonacci. Illative addition, predecessor chaining.

" +ja nykyinen sivu näyttää tekstin "

Open the page — enter a number when prompted, e.g. 10, and see 55.

". diff --git a/examples/basics/syntax.css b/examples/basics/syntax.css new file mode 100644 index 0000000..604a4cb --- /dev/null +++ b/examples/basics/syntax.css @@ -0,0 +1,83 @@ +/* + * Tampio Syntax Highlighting — Typography & Styling + * + * This stylesheet defines the visual presentation of Tampio source code. + */ + +/* ===== TYPE STYLES ===== */ +span.type { + font-variant: small-caps; + font-size: large; +} + +/* ===== KEYWORDS ===== */ +span.keyword { + font-weight: bold; +} + +/* ===== VARIABLES & FIELDS ===== */ +span.field { + text-decoration: underline dotted; +} + +span.variable { + font-variant: small-caps; + font-size: large; +} + +span.variable-or-field { + text-decoration: underline dotted; + font-variant: small-caps; + font-size: large; +} + +/* ===== FUNCTIONS ===== */ +span.function { + font-style: italic; +} + +/* ===== OPERATORS ===== */ +span.operator { + text-decoration: underline dotted; + font-weight: bold; +} + +span.conditional-operator { + text-decoration: underline dotted; + color: #622; +} + +/* ===== LITERALS ===== */ +span.literal { + color: #622; +} + +/* ===== COMMENTS ===== */ +span.comment-inline, span.block-comment-inline { + color: #226; + font-size: small; +} + +span.comment-global { + color: black; + font-size: 1.5em; + border-bottom: 1px solid black; +} + +span.block-comment-global { + color: #226; +} + +/* ===== LIST STYLES ===== */ +ul:not(.syntax-root) { + list-style: disc; +} + +ul.syntax-root > li { + margin-top: 10px; + margin-bottom: 10px; +} + +ul.syntax-root { + list-style: none; +} \ No newline at end of file