ReaderView

1import { YeriaApp } from '@numerum-tech/yeriasdk';
2
3const yeriaApp = new YeriaApp({ appId: 'my-app' });
4
5const reader = yeriaApp
6    .createReaderView('welcome', 'Welcome to Our App')
7    .setIntro('Discover our key features')
8    .addParagraph('YeriaApp allows you to generate dynamic screens from the backend.')
9    .addSubTitle('Key Features')
10    .addListField([
11        'Dynamic forms with validation',
12        'Rich reading views',
13        'Ed25519 signatures for integrity'
14    ]);
15
16const response = yeriaApp.serve(reader);

1const reader = yeriaApp
2    .createReaderView('product-info', 'Product Information')
3    .setIntro('Learn about our featured product')
4    .addImage('https://example.com/product.jpg', 'Product Image', 'Our featured product')
5    .addParagraph('This product features advanced technology and modern design.')
6    .addSubTitle('Specifications')
7    .addListField([
8        'High-performance processor',
9        'Long battery life',
10        'Modern design'
11    ], true);

1const reader = yeriaApp
2    .createReaderView('article', 'Article Title')
3    .setIntro('Read our latest article')
4    .addMarkdown(`
5# Introduction
6
7This is a **markdown** article with *formatting*.
8
9## Features
10
11- Feature 1
12- Feature 2
13- Feature 3
14
15[Learn more](https://example.com)
16    `, { sanitize: true });

1const reader = yeriaApp
2    .createReaderView('pricing', 'Pricing Plans')
3    .setIntro('Choose the plan that fits your needs')
4    .addTable(
5        ['Plan', 'Price', 'Features'],
6        [
7            ['Basic', '$9/month', '5 projects'],
8            ['Pro', '$29/month', 'Unlimited projects'],
9            ['Enterprise', 'Custom', 'Custom features']
10        ]
11    );

1const reader = yeriaApp
2    .createReaderView('tutorial', 'Code Tutorial')
3    .setIntro('Learn how to use our API')
4    .addCodeBlock(
5        `function greet(name) {
6    return \`Hello, \${name}!\`;
7}`,
8        'javascript'
9    )
10    .addParagraph('This function greets a user by name.');

1const reader = yeriaApp
2    .createReaderView('testimonial', 'Customer Testimonial')
3    .setIntro('What our customers say')
4    .addQuote(
5        'This product has transformed how we work.',
6        'John Doe',
7        'CEO, Company Inc.'
8    );

1const reader = yeriaApp
2    .createReaderView('resources', 'Helpful Resources')
3    .setIntro('External resources you might find useful')
4    .addLink('https://example.com/docs', 'Documentation', 'Complete API documentation')
5    .addLink('https://example.com/support', 'Support', 'Get help from our team')
6    .addSeparator()
7    .addParagraph('For more information, contact us.');

1const reader = yeriaApp
2    .createReaderView('custom-content', 'Custom Content')
3    .setIntro('Custom content display')
4    .addCustomElement('chart', {
5        type: 'bar',
6        data: [10, 20, 30, 40],
7        labels: ['Q1', 'Q2', 'Q3', 'Q4']
8    })
9    .addCustomElement('widget', {
10        widgetId: 'weather',
11        location: 'Paris'
12    });

1const reader = yeriaApp
2    .createReaderView('guide', 'User Guide')
3    .setIntro('Welcome to our comprehensive guide')
4    .addSubTitle('Getting Started')
5    .addParagraph('Follow these steps to get started.')
6    .addListField([
7        'Create an account',
8        'Verify your email',
9        'Complete your profile'
10    ])
11    .addSeparator()
12    .addSubTitle('Advanced Features')
13    .addMarkdown(`
14### Feature 1
15
16Description of feature 1.
17
18### Feature 2
19
20Description of feature 2.
21    `)
22    .addImage('https://example.com/diagram.png', 'Architecture Diagram')
23    .addSeparator()
24    .addLink('https://example.com/contact', 'Need Help?', 'Contact our support team');

1{
2  "id": "user-guide",
3  "type": "Reader",
4  "content": {
5    "title": "User Guide",
6    "intro": "Welcome to our comprehensive guide",
7    "elements": [
8      {
9        "type": "subtitle",
10        "text": "Getting Started"
11      },
12      {
13        "type": "paragraph",
14        "text": "Follow these steps to get started with our application."
15      },
16      {
17        "type": "list",
18        "items": [
19          "Create an account",
20          "Verify your email",
21          "Complete your profile",
22          "Start using the app"
23        ],
24        "ordered": false
25      },
26      {
27        "type": "separator"
28      },
29      {
30        "type": "subtitle",
31        "text": "Advanced Features"
32      },
33      {
34        "type": "markdown",
35        "content": "### Feature 1\n\nDescription of feature 1.\n\n### Feature 2\n\nDescription of feature 2."
36      },
37      {
38        "type": "image",
39        "src": "https://example.com/diagram.png",
40        "alt": "Architecture Diagram",
41        "caption": "System Architecture"
42      },
43      {
44        "type": "table",
45        "headers": ["Feature", "Status", "Version"],
46        "rows": [
47          ["Feature A", "Active", "1.0"],
48          ["Feature B", "Beta", "0.9"],
49          ["Feature C", "Planned", "TBD"]
50        ]
51      },
52      {
53        "type": "code",
54        "language": "javascript",
55        "code": "function example() {\n  return 'Hello World';\n}"
56      },
57      {
58        "type": "quote",
59        "text": "This is an important quote",
60        "author": "John Doe"
61      },
62      {
63        "type": "link",
64        "href": "https://example.com/contact",
65        "text": "Need Help?",
66        "description": "Contact our support team"
67      }
68    ]
69  },
70  "metadata": {
71    "version": "1.0.0",
72    "createdAt": "2025-01-28T10:00:00.000Z"
73  }
74}