From 5dd820ffcb4b3074ec449136c27eb426aa105274 Mon Sep 17 00:00:00 2001 From: Cleon <18450687+meld-cp@users.noreply.github.com> Date: Fri, 6 Jan 2023 15:08:27 +1300 Subject: [PATCH] docs --- docs/examples/guess-the-number.md | 60 ++++++++++++++++++ docs/examples/invoice-builder.md | 102 ++++++++++++++++++++++++++++++ docs/user-guide.md | 10 +-- 3 files changed, 167 insertions(+), 5 deletions(-) diff --git a/docs/examples/guess-the-number.md b/docs/examples/guess-the-number.md index e69de29..1ba672f 100644 --- a/docs/examples/guess-the-number.md +++ b/docs/examples/guess-the-number.md @@ -0,0 +1,60 @@ + +# Guess The Number Game + +````md +# Guess The Number Game +```meld-build-toolbar +run = Let The Games Begin +help = +``` + +```js meld-build +const min = 1; +const max = 100; + +// choose a rundom number between min and max +const number = min + Math.round( Math.random() * (max-min) ); + +let guessCount = 0; +let prevGuessMsg = ''; +let done = false; +// main game loop +while ( !done ){ + + guessCount++; + + // ask the user for a guess + const input = await $.ui.ask( + `Guess ${guessCount}`, + `${prevGuessMsg}Guess the number between ${min} and ${max} (0 to stop)` + ); + const guessNum = parseInt( input ); + + if ( isNaN(guessNum) ){ + // user input wasn't a number + await $.ui.message(`Please enter a whole number between ${min} and ${max}`); + + } else if ( guessNum === 0 ){ + // stop playing + done = true; + + } else if( guessNum < number ){ + // guess was too low + prevGuessMsg = `${guessNum} was too low. `; + + } else if( guessNum > number ){ + // guess was too high + prevGuessMsg = `${guessNum} was too high. `; + + }else{ + // guess was correct + await $.ui.message( + '🥳 YUS!', + `You guessed the number was ${number} (in ${guessCount} tries)` + ); + done = true; + + } +} +``` +```` diff --git a/docs/examples/invoice-builder.md b/docs/examples/invoice-builder.md index e69de29..3115d4c 100644 --- a/docs/examples/invoice-builder.md +++ b/docs/examples/invoice-builder.md @@ -0,0 +1,102 @@ +# A Simple Invoice Builder + +````md +# A Simple Invoice Builder +```meld-build-toolbar +run = Build the Invoice +help = +``` + +## The invoice template +```html + + + + + +

My Co

+ +

Invoice: {{inv.id}}

+

Date: {{inv.date}}

+

To: {{customer.name}}

+
+ {{#customer.address}} +

{{.}}

+ {{/customer.address}} +
+
+ + + + + + + + {{#inv.work}} + + + + + + + {{/inv.work}} + + + + + + +
DescriptionQuantityUnit PriceAmount
{{date}} - {{desc}}{{duration}} hrs$ {{format_number rate}}$ {{format_number total}}
Total:$ {{format_number inv.total}}
+ + +``` + +## The code to run +```js meld-build +const invNumber = '22001'; + +const customers = [ + { id: 100, name: 'Some Co', address: ['123 Some Rd', 'Some City'] }, + { id: 101, name: 'Some Other Co', address: ['123 Some Other Rd', 'Some City'] }, +] + +const invoices = [ + { + id: '22001', customer:100, date: '2022-12-01', status: 'open', + work: [ + { inv: '22001', date: '2022-11-13', start: 7.00, end: 16.50, rate: 25.45, desc: 'I did the thing' }, + { inv: '22001', date: '2022-11-16', start: 10.75, end: 12.00, rate: 25.45, desc: 'I did the other thing' }, + ] + }, +] + +// get invoice to generate +const inv = invoices.filter( e => e.id==invNumber ).at(0); +// add line calculated fields +inv.work.forEach( e => { + e.duration = e.end - e.start; + e.total = e.duration * e.rate; +}); +// calculate inv total +inv.total = inv.work.reduce( (a,c) => a + c.total, 0 ); +// get invoice customer +const customer = customers.filter( e => e.id==inv.customer ).at(0); + +// get the invoice template +const template = $.blocks.at(0); + +// renter the template passing in the customer and invoice +const html = await $.render( template, { customer, inv } ); + +// create an html invoice file and open it in the default browser, from there it can be saved as a PDF +await $.io.output( `inv ${inv.id}.html`, html, true ); +``` +```` \ No newline at end of file diff --git a/docs/user-guide.md b/docs/user-guide.md index 78d8fa0..392643c 100644 --- a/docs/user-guide.md +++ b/docs/user-guide.md @@ -48,9 +48,9 @@ await $.ui.message( result ); ``` ```` -There are other ways to load templates too. +There are other ways to load templates too, for example, using the content of codeblocks. -For example, using the content of codeblocks. Say your note looks like this: +Say your note looks like this: ````md # My Runable Note @@ -61,10 +61,10 @@ The template codeblock: The meld-build block to run: ```js meld-build -const t = $.blocks.at(0); // gets the first non-meld-build block in the note -const d = { name:'John', message:'How are you?' }; +const template = $.blocks.at(0); // gets the first non-meld-build block in the note +const data = { name:'John', message:'How are you?' }; -const result = await $.render( t, d ); +const result = await $.render( template, data ); await $.ui.message( result ); ```