obsidian-plugin/meld-cp_obsidian-build
1
0
Fork 0
mirror of https://github.com/meld-cp/obsidian-build.git synced 2026-07-22 07:30:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs

Browse source
This commit is contained in:
Cleon 2023-01-06 15:08:27 +13:00
parent a83df2f8eb
commit 5dd820ffcb
3 changed files with 167 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
docs/examples/guess-the-number.md
View file

@ -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;
}
}
```
````

102
docs/examples/invoice-builder.md
View file

@ -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
<html>
<head>
<style>
body{ font-family: 'Verdana'; }
.logo { position: absolute; top: 0; right: 0; font-size: 6em; }
table { width: 100%; }
th,td { text-align: start; }
.end{ text-align: end; }
p.compact { margin:0; }
#address > p{ margin:0 0 0 2em; }
</style>
</head>
<body>
<h1>My Co</h1>
<div class="logo">🏢</div>
<p>Invoice: {{inv.id}} </p>
<p>Date: {{inv.date}}</p>
<p class="compact">To: {{customer.name}}</p>
<section id="address">
{{#customer.address}}
<p>{{.}}</p>
{{/customer.address}}
</section>
<hr/>
<table>
<tr>
<th>Description</th>
<th class="end">Quantity</th>
<th class="end">Unit Price</th>
<th class="end">Amount</th>
</tr>
{{#inv.work}}
<tr>
<td>{{date}} - {{desc}}</td>
<td class="end">{{duration}} hrs</td>
<td class="end">$ {{format_number rate}}</td>
<td class="end">$ {{format_number total}}</td>
</tr>
{{/inv.work}}
<tr>
<th></th>
<th></th>
<th class="end">Total:</th>
<th class="end">$ {{format_number inv.total}}</th>
</tr>
</table>
</body>
</html>
```
## 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 );
```
````

10
docs/user-guide.md
View file

@ -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 ````md
# My Runable Note # My Runable Note
@ -61,10 +61,10 @@ The template codeblock:
The meld-build block to run: The meld-build block to run:
```js meld-build ```js meld-build
const t = $.blocks.at(0); // gets the first non-meld-build block in the note const template = $.blocks.at(0); // gets the first non-meld-build block in the note
const d = { name:'John', message:'How are you?' }; const data = { name:'John', message:'How are you?' };
const result = await $.render( t, d ); const result = await $.render( template, data );
await $.ui.message( result ); await $.ui.message( result );
``` ```