{"id":27443069,"url":"https://github.com/junter-dev/junter","last_synced_at":"2025-04-15T01:18:56.988Z","repository":{"id":187958169,"uuid":"676276861","full_name":"junter-dev/junter","owner":"junter-dev","description":"Craft precise HTML structures from JSON data","archived":false,"fork":false,"pushed_at":"2024-03-03T22:39:18.000Z","size":359,"stargazers_count":27,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-10T08:15:45.892Z","etag":null,"topics":["html","javascript","js","json","nodejs"],"latest_commit_sha":null,"homepage":"https://junter.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/junter-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-08-08T20:49:16.000Z","updated_at":"2025-01-22T21:00:55.000Z","dependencies_parsed_at":"2024-03-03T23:30:35.424Z","dependency_job_id":"d0ec433f-4424-479f-bba6-169ba685295c","html_url":"https://github.com/junter-dev/junter","commit_stats":null,"previous_names":["junter-dev/junter"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junter-dev%2Fjunter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junter-dev%2Fjunter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junter-dev%2Fjunter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junter-dev%2Fjunter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/junter-dev","download_url":"https://codeload.github.com/junter-dev/junter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248773192,"owners_count":21159429,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","javascript","js","json","nodejs"],"created_at":"2025-04-15T01:18:56.484Z","updated_at":"2025-04-15T01:18:56.975Z","avatar_url":"https://github.com/junter-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![logo](logo.svg)\n# Junter\n[![website](https://img.shields.io/badge/website-junter.dev-cb92e5)](https://junter.dev)\n\n\n![pipeline_status](https://github.com/junter-dev/junter/actions/workflows/ci.yaml/badge.svg)\n[![license](https://img.shields.io/badge/license-MIT-blue)](LICENSE)\n![contributors](https://img.shields.io/badge/contributors-4-yellow)\n\nWhere minimal JSON blueprints become maximal HTML masterpieces 🚀\n\n---\n\nJunter provides a robust mechanism to convert JSON data directly into structured HTML elements.\nDesigned for professional developers, it optimizes the workflow for constructing advanced web interfaces.\n\nTable Of Contents:\n\u003c!-- TOC --\u003e\n* [Introduction](#introduction)\n* [Understanding the Problem](#understanding-the-problem)\n* [The Junter Solution](#the-junter-solution)\n* [Comparison](#comparison)\n* [Documentation](#documentation)\n  * [Overview](#overview)\n  * [Installation](#installation)\n  * [Initialization](#initialization)\n* [Transformation](#transformation)\n  * [JSON to HTML](#json-to-html)\n* [Conceptions](#conceptions)\n  * [Props](#props)\n  * [Content](#content)\n  * [Multiple content](#multiple-content)\n  * [Components](#components)\n    * [Aliases](#aliases)\n    * [Slots](#slots)\n    * [Locale](#locale)\n    * [Props](#props-1)\n    * [Style](#style)\n    * [Alias](#alias)\n  * [Best practices](#best-practices)\n    * [Structure Your Components](#structure-your-components)\n    * [Leverage Junter's Features](#leverage-junters-features)\n    * [Be Mindful of Performance](#be-mindful-of-performance)\n    * [Future Directions and Research Opportunities](#future-directions-and-research-opportunities)\n    * [Server-side Rendering (SSR)](#server-side-rendering-ssr)\n    * [Integration with Other Libraries](#integration-with-other-libraries)\n  * [SSR](#ssr)\n    * [Features](#features)\n      * [gRPC interface](#grpc-interface)\n      * [Component Registration](#component-registration)\n      * [API Methods](#api-methods)\n      * [Database Flexibility](#database-flexibility)\n      * [Monitoring with Prometheus](#monitoring-with-prometheus)\n      * [Kubernetes-ready](#kubernetes-ready)\n    * [How to run the Service](#how-to-run-the-service)\n      * [Locally](#locally)\n      * [Docker](#docker)\n    * [Configuration](#configuration)\n    * [Proto contract details](#proto-contract-details)\n* [Code of conduct](#code-of-conduct)\n* [Filling issues](#filling-issues)\n* [FAQ](#faq)\n* [Team](#team)\n* [License](#license)\n\u003c!-- TOC --\u003e\n\n# Introduction\nAs the internet has evolved, so has the complexity of web applications. We've\nshifted from static HTML pages to dynamic, interactive web applications that rival\nthe complexity and capability of traditional desktop applications. This evolution\nhas brought about numerous tools, libraries, and frameworks to make this\ntransition smoother and more efficient.\nOne standard tool in a web developer's arsenal is JavaScript Object Notation\n(JSON). This lightweight data-interchange format is accessible for humans to read\nand write and easy for machines to parse and generate. JSON's simplicity and\nuniversality have made it an essential tool in many applications.\nHowever, new challenges arise as we push the boundaries of what web applications\ncan do. One such challenge is the transformation of JSON data into user interface\nelements. This process, which involves mapping JSON objects to HTML elements\nand their attributes, can be cumbersome and error-prone.\nThis is where the Junter library comes in. This innovative library has been\ndeveloped to offer a systematic and efficient way of transforming JSON data into\nHTML, eliminating much of the manual effort in this process.\n\n# Understanding the Problem\nAs a starting point, let's understand the specific problem Junter aims to solve.\nImagine you are building a web application that retrieves data from a remote\nserver. The data is received in JSON format and needs to be rendered as HTML to\nbe presented to the user.\nThe traditional approach to this problem would involve parsing the JSON data,\nmanually creating HTML elements, setting their attributes, and appending them to\nthe DOM. This process can quickly become complex and messy, particularly for\ndeeply nested JSON data or applications with many UI elements.\nThis approach also needs to lend itself better to creating reusable UI components.\nIn modern web development, the ability to define components once and then use\nthem throughout an application is incredibly valuable. It promotes maintainability,\nreusability, and consistency.\n\n# The Junter Solution\nJunter is a library designed specifically for transforming JSON data into HTML. It\nprovides a clean and straightforward API that renders JSON data as HTML\npainless and efficient.\nWith Junter, you can define a mapping between JSON objects and HTML elements\nonce and reuse this mapping as often as needed. This way, you can easily create\ncomplex HTML structures from JSON data and ensure consistency across your\napplication.\nJunter supports the creation of reusable components, which can be defined once\nand then used throughout an application. This feature brings the powerful concept\nof component-based development to rendering JSON as HTML.\n\n# Comparison\n\nWithin the web development sector, Junter stands out as a pioneering library. By\naddressing the intricate challenge of converting JSON to HTML, and introducing\nversatile functionalities such as aliases, slots, props, localization, and embedded styles,\nJunter achieves robust compatibility across server and client environments.\n\nThis breakthrough positions Junter as a catalyst for industry advancement, setting new\nbenchmarks for efficiency and innovation.\n\n| Feature                  | Feature Description                                                          | Junter | JSON2HTML | JSONx |\n|--------------------------|------------------------------------------------------------------------------|--------|-----------|-------|\n| Alias Support (Alia’s)   | Ability to define and use custom aliases in transformations.                 | ✅      | ❌          | ❌      |\n| Slots                    | Define placeholders within components to be filled with content.             | ✅      | ❌          |  ❌     |\n| Localization (Locales)   | Support for multiple languages, allowing easy translation of the UI.         | ✅      | ❌          |  ❌     |\n| Styling Options (Styles) | Embed CSS styles within your JSON data for a more cohesive rendering.        | ✅      | ❌          |  ❌     |\n| Node \u0026 Browser Support   | Operate seamlessly in both server (Node) and client (Browser) environments.  | ✅      | ❌          |  ❌     |\n\nLegend:\n* ✅ - Supported\n* ❌ - Not Supported\n\nThis table demonstrates that Junter has a significant advantage over its competitors in\nseveral key areas.\n\n# Documentation\n## Overview\n  In this section, we're going to delve into how to use Junter effectively. To do this, we will\n  first go over how to set up and initialize Junter in your project. Next, we will discuss each\n  of the primary features of Junter in-depth, explaining how they work, why they are\n  useful, and how to use them in your applications.\n\n## Installation\n  Getting started with Junter is simple. The library is available as a JavaScript module and\n  can be imported directly into your project:\n  \n  For browser:\n  \n  ```html{4}\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/@junter.dev/junter-browser\" /\u003e\n  ```\n\n  or\n\n  ```html{4}\n  npm i @junter.dev/junter-browser\n  ```\n  \n  For Node.js\n  \n  ```shell{4}\n  npm i @junter.dev/junter-node\n  ```\n\n## Initialization\n  You then instantiate Junter by creating a new object:\n  \n  For browser:\n  \n  ```js\n    const junter = new Junter.Junter();\n  ```\n  \n  For Node.JS:\n  \n  ```js\n    import { Junter } from 'junter'\n    \n    const junter = new Junter();\n  ```\n  \n  This junter object is the starting point for transforming JSON data into HTML.\n  Check out the documentation for the [transformation](/transformation).\n\n# Transformation\n  The core feature of Junter is transforming JSON data into HTML. This is done using the ```.render()``` method. You pass in a JSON object, and Junter returns the corresponding HTML.\n\n## JSON to HTML\n  For instance, let's say we have a simple JSON object that represents a paragraph:\n  \n  **Input**\n  \n  ```js{4}\n    const json = { \"p\": \"Hello, world!\" }\n    \n    // You can transform this JSON into HTML as follows\n    const html = junter.render(json)\n   ```\n  \n  **Output**\n\n  ```html\n  \u003cp\u003eHello, world!\u003c/p\u003e\n  ```\n\n# Conceptions\n  Let's get acquainted with the basic concepts\n\n## Props\n  Props provide a means to specify attributes for your HTML elements.\n  Through props, you can define things like class names, IDs, and other typical HTML attributes.\n  \n  ```js\n  const junter = new Junter();\n  \n  junter.render({ \"div\": {\n      \"props\": {\n          \"class\": \"block\"\n      }\n  }})\n  ```\n  \n  ```html\n  \u003cdiv class=\"block\"\u003e\u003c/div\u003e\n  ```\n  In the example above, a new instance of Junter is created.\n  We then render a `div` element and specify its `class` attribute using the props key.\n\n## Content\n  The Content feature allows users to define what's inside the HTML element.\n  This could be text, other HTML elements, or even a combination of both.\n  \n  ```js\n  const junter = new Junter();\n  \n  junter.render({ \"div\": {\n          \"props\": {\n              \"class\": \"block\"\n          },\n          \"content\": 'Block'\n      }\n  })\n  ```\n  \n  ```html\n  \u003cdiv class=\"block\"\u003eBlock\u003c/div\u003e\n  ```\n  Here, not only have we defined a 'class' attribute for our 'div' element through props,\n  but we've also specified its inner content using the content key. If you don't specifically provide\n  a \"content\" key for an element, Junter intelligently interprets all non-\"props\" key-value pairs as potential content.\n  \n  ```js\n  const junter = new Junter();\n  \n  junter.render({ \"main\": {\n      \"props\": {\n          \"class\": \"main\"\n      },\n      \"header\": {},\n      \"div\": {},\n      \"footer\": {}\n  }})\n  \n  ```\n  \n  ```html \n  \u003cmain class=\"main\"\u003e\n      \u003cheader\u003e\u003c/header\u003e\n      \u003cdiv\u003e\u003c/div\u003e\n      \u003cfooter\u003e\u003c/footer\u003e\n  \u003c/main\u003e\n  ```\n\n  Here, the main tag is provided a class of \"main\".\n  The other key-value pairs (header, div, and footer) are not specifically assigned content,\n  so Junter defaults them as nested elements within the main tag.\n\n  For those instances where you need a quick and straightforward rendering without\n  the complications of properties or attributes, Junter accommodates this with direct value assignment.\n  \n  ```js\n  junter.render({ \"div\": 'Block'})\n  ```\n  \n  ```html\n  \u003cdiv\u003eBlock\u003c/div\u003e\n  ```\n\n  This is a testament to Junter's intuitive design.\n  By directly pairing an element (div in this case) with a string,\n  Junter understands it as the content for that element, rendering it seamlessly without needing further configurations.\n\n## Multiple content\n  With Junter, seamlessly rendering multiple content items, especially those housed in data arrays,\n  becomes effortless. The following sections provide insights into the flexibility Junter offers in this context.\n  \n  If your goal is to render several elements of the same type with different content, Junter can directly interpret arrays:\n  \n  ```js\n  junter.render({ \"div\": {\n      \"p\": ['Hello!', 'Hi!', 1]\n  }})\n  ```\n  \n  ```html\n  \u003cdiv\u003e\n      \u003cp\u003eHello!\u003c/p\u003e\n      \u003cp\u003eHi!\u003c/p\u003e\n      \u003cp\u003e1\u003c/p\u003e\n  \u003c/div\u003e\n  ```\n\n  The aforementioned code efficiently instructs Junter to create multiple paragraph elements within a div tag,\n  each populated with the respective items from the array.\n  When elements sourced from a data array need specific attributes or properties,\n  Junter allows you to set these with precision:\n  \n  ```js\n  junter.render({ \"div\": {\n      \"p\": {\n          \"props\": {\n              \"class\": \"text\"\n          },\n          \"content\": ['Hello!', 'Hi!', 1]\n      }\n  }})\n  ```\n  \n  ```html\n  \u003cdiv\u003e\n      \u003cp class=\"text\"\u003eHello!\u003c/p\u003e\n      \u003cp class=\"text\"\u003eHi!\u003c/p\u003e\n      \u003cp class=\"text\"\u003e1\u003c/p\u003e\n  \u003c/div\u003e\n  ```\n\n  The addition of the \"props\" attribute allows each paragraph element to have the class \"text\",\n  yet each continues to display unique content.\n\n  Junter's design logic ensures that developers can effortlessly nest elements within multiple content structures:\n  \n  ```js\n  junter.render({ \"div\": {\n      \"div\": {\n          \"props\": {\n              \"class\": \"block\"\n          },\n          \"content\": [\n              {\n                 \"div\": {\n                     \"props\": {\n                         \"class\": \"block\"\n                     },\n                     \"p\": \"Hello, world!\"\n                 } \n              },\n              {\n                 \"div\": {\n                     \"props\": {\n                         \"class\": \"avatar\"\n                     },\n                     \"img\": {\n                         \"props\": {\n                             \"src\": \"https://example.com/image.png\",\n                             \"alt\": \"avatar\"\n                         }\n                     }\n                 } \n              }\n          ]\n      }\n  }})\n  ```\n\n  ```html\n  \u003cdiv\u003e\n      \u003cdiv class=\"block\"\u003e\n          \u003cdiv class=\"block\"\u003e\n              \u003cp\u003eHello, world!\u003c/p\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"avatar\"\u003e\n              \u003cimg src=\"https://example.com/image.png\" alt=\"avatar\" /\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  ```\n\n  The given example demonstrates Junter's ability to handle nested structures within an array,\n  showcasing both parallel and hierarchically nested elements.\n\n  \u003e **Note**\n  \u003e \n  \u003e When you anticipate rendering multiple elements of the same tag type,\n  \u003e Junter's multiple content approach is the ideal strategy.\n\n  \u003e **Warning**\n  \u003e  \n  \u003e Ensure that the root element does not directly adopt multiple content.\n  \u003e This practice helps maintain a clear structure and prevents potential rendering issues.\n  \n\n## Components\n  Junter also supports components, which are reusable pieces of UI that can be defined\n  once and used throughout your application.\n  Components are registered using the ```.registerComponent()``` method. This method takes\n  two arguments: the name of the component and the JSON object that represents it.\n\n  To use them, it is necessary:\n\n  1. Register a component using the ```.registerComponent()``` function\n  2. Use a component in a JSON object passed to ```.render()```\n\n  For example, let's define a simple Avatar component:\n\n  ```js\n  junter.registerComponent('Avatar', { \"p\": \"Hello!\" });\n  \n  junter.render({ \"div\": {\n      \"Avatar\": {}\n  }})\n  ```\n\n**The resulting HTML is:**\n\n```html\n\u003cdiv\u003e\n    \u003cp\u003eHello!\u003c/p\u003e\n\u003c/div\u003e\n```\n\nThe advantage here is clear: we have encapsulated the complexity of the Avatar\ncomponent behind a simple name that we can reuse as often as needed.\n\n### Aliases\n  Allow you to pass the necessary properties to components and rendering elements.\n  \n  Name  | Goal\n  ------------- | -------------\n  slot  | Used for dropping elements inside components\n  alias  |  Used for content substitution instead of alias\n  prop  |  It is used for passing props to components\n  style  |  Used to insert CSS styles inside elements\n  locale  |  Used to localize text in elements for rendering\n  \n  \u003e **Warning**\n  \u003e \n  \u003e slot and prop aliases are used only in components!\n\n### Slots\n  Component slots in Junter serve the purpose of providing placeholders within the\n  structure of a component where users can insert custom content.\n  \n  Here's how you can use slots in Junter:\n  \n  ```js\n  junter.registerComponent('Card', { \n      \"div\": {\n          \"p\": \"Hello!\", \n          \"div\": \"slot:content\"\n      }\n  });\n  \n  \n  const json = { \n      \"div\": {\n          \"Card\": {\n              slots: {\n                  \"slot:content\": {\n                      span: \"Just a text\" \n                  }\n              }\n          }\n      }\n  };\n  \n  junter.render(json);\n  ```\n  \n  In the 'Card' component above, ```slot:content``` serves as a placeholder for content to be\n  added later. When rendering the component, you can specify what should replace\n  ```slot:content```\n  \n  This would generate the following HTML:\n  \n  ```html\n  \u003cdiv\u003e\n      \u003cdiv\u003e\n          \u003cp\u003eHello!\u003c/p\u003e\n          \u003cdiv\u003e\n              \u003cspan\u003eJust a text\u003c/span\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  ```\n### Locale\n  Junter has built-in localization support. This feature allows you to define\n  locale-dependent strings within your components.\n  Here's how you can use localization\n  \n  ```js\n  const json = {\n      \"div\": {\n          \"p\": \"Hello!\",\n          \"div\": \"locale:greating\"\n      }\n  }\n  \n  junter.render(json, { 'locale:greating': 'Bonjour!' });\n  ```\n  \n  The locale:greeting placeholder will be replaced by the corresponding localized string\n  during the rendering process, which in this case, is 'Bonjour, monde!'. The resulting\n  HTML will be:\n  \n  ```html\n  \u003cdiv\u003e\n     \u003cp\u003eHello!\u003c/p\u003e\n     \u003cdiv\u003eBonjour!\u003c/div\u003e\n  \u003c/div\u003e\n  ```\n\n### Props\n  Junter allows passing properties (props) to components. This mechanism helps to\n  customize a component's appearance or behavior during the rendering process.\n  \n  Here's an example:\n  \n  ```js\n  junter.registerComponent('Avatar', { \n      \"div\": {\n          \"img\": {\n              \"props\": {\n                  \"alt\": \"prop:imgAlt\",\n                  \"src\": \"prop:avatarSrc\"\n              }\n          }\n      }\n  });\n  \n  const json = { \n      \"div\": {\n          \"Avatar\": {\n              props: {\n                  \"prop:imgAlt\": \"avatar\",\n                  \"prop:avatarSrc\": \"https://example.com/user.png\"\n              }\n          }\n      }\n  };\n  \n  junter.render(json);\n  ```\n  \n  This will generate the following HTML:\n  \n  ```html\n  \u003cdiv\u003e\n     \u003cdiv\u003e\n          \u003cimg alt=\"avatar\" src=\"https://example.com/user.png\" /\u003e\n     \u003c/div\u003e\n  \u003c/div\u003e\n  ```\n\n### Style\n  In Junter, you can easily incorporate CSS styles into your components with the style\n  keyword.\n  \n  Here's an example:\n  \n  ```js\n  const json = { \n      \"form\": {\n          \"style\": \"style:mainCSS\"\n      }\n  }\n  \n  const css = `\n      .target { color: red }\n  `\n  \n  junter.render(json, { 'locale:text': 'Text', 'style:mainCSS': css });\n  ```\n  \n  This will render the following HTML:\n  \n  ```html\n  \u003cform\u003e\n      \u003cstyle\u003e.target { color: red }\u003c/style\u003e\n  \u003c/form\u003e\n  ```\n\n### Alias\n  Aliases in Junter are used for content substitution within a component. They enable you\n  to change the content dynamically based on the context.\n  \n  Here's how to use aliases:\n  \n  ```js\n  const json = { \n      \"button\": {\n          props: {\n              class: \"button\"\n          },\n          content: \"alias:text\"\n      }\n  }\n  \n  junter.render(json, { 'alias:text': 'Text' });\n  ```\n  \n  This will render the following HTML:\n  \n  ```html\n  \u003cbutton class=\"button\"\u003eText\u003c/button\u003e\n  ```\n  \n  The ```alias:text``` placeholder gets replaced by the string 'Click me' during the rendering\n  process.\n\n## Best practices\n  As with any tool or framework, understanding best practices can significantly improve\n  the development process and the quality of the final product. In this section, we provide\n  some practical tips for using Junter effectively.\n\n### Structure Your Components\n  When using components in Junter, a well-structured design can make your application\n  easier to understand, modify, and debug. It's a good idea to keep your components small\n  and focused on a single responsibility.\n\n### Leverage Junter's Features\n  Junter comes with several powerful features, such as component lifecycle management,\n  event handling, and conditional and list rendering. Make full use of these features to\n  simplify your code and make it more readable.\n\n### Be Mindful of Performance\n  Although Junter's performance is generally excellent, it's essential to remember that\n  rendering large, complex structures can become costly. Be mindful of how much you're\n  asking Junter to do, and consider breaking down larger components into smaller ones for\n  more efficient rendering.\n\n### Future Directions and Research Opportunities\n  The development of Junter does not stop here. There are several areas of possible\n  research and improvement for future versions of Junter:\n\n### Server-side Rendering (SSR)\n  As of now, Junter operates on the client-side. Incorporating server-side rendering could\n  provide performance benefits, especially for larger applications.\n\n### Integration with Other Libraries\n  While Junter is currently a standalone library, exploring possibilities for integration with\n  other popular JavaScript libraries and frameworks, like React or Vue, could increase its\n  versatility and applicability.\n\n## SSR\n  The Junter Render Service expands the capabilities of the Junter library by introducing a\n  server interface to the library using the gRPC protocol. This service allows users to\n  interact with the Junter library as if it were a server, thus enhancing its utility and scope.\n  The service is written in Typescript and is tailored to fit seamlessly into modern\n  development environments.\n\n### Features\n#### gRPC interface\n  Treat the Junter library as a server using the gRPC protocol\n\n#### Component Registration\n  Register components from the Junter library and save them to a database\n\n#### API Methods\n#### Database Flexibility\n  While MongoDB is the default choice, developers can\n  integrate any database using the internal IRepository interface\n\n#### Monitoring with Prometheus\n  Monitor service metrics using Prometheus via the HTTP /metrics endpoint.\n\n#### Kubernetes-ready\n  The service is optimized for deployment in a Kubernetes\n  environment. It includes a readiness probe available at the HTTP /ready endpoint,\n  and configurations can be made using environment variables.\n\n### How to run the Service\n#### Locally\n  To run the Junter Render Service locally, follow the steps:\n  \n  ```shell\n  npm install --omit=dev\n  export DB_URL=localhost:1234\n  tsnode .src/service.ts\n  ```\n\n#### Docker\n  Use the following command\n  \n  ```shell\n  docker run \\\n      ghrc.io/junter-dev/junter-render-service:v1.0.0 \\\n    --env DB_URL=localhost:1234\n  ```\n\n### Configuration\n  Service configuration can be achieved using environment variables:\n\n  * ```DB_URL```: (Required) Address of MongoDB.\n  * ```HTTP_HOST```: HTTP host address (default is 127.0.0.1).\n  * ```HTTP_PORT```: Port for Prometheus metrics (default is 8000).\n  * ```GRPC_HOST```: gRPC host address (default is 127.0.0.1).\n  * ```GRPC_PORT```: gRPC port (default is 8001).\n  * ```COMPONENT_PROCESS_INTRVAL```: Period of synchronization with the database\n    (default is 2000ms)\n\n### Proto contract details\n  For developers and integrators interested in interfacing with our rendering service,\n  a comprehensive Proto Contract provides detailed insights into the API’s structure and functionality.\n\n  ### Accessing the Proto Contract\n\n  The Proto Contract for Junter's render service can be accessed and reviewed directly on our GitHub repository.\n  This contract delineates the service methods, message formats, and the expected interaction patterns.\n\n  Proto Contract for [Junter Render Service](https://github.com/junter-dev/junter-render-service/blob/main/api/render/v1/render_service.proto)\n\n  ### Highlights\n  * Service Definitions: Gain an understanding of available RPC methods and their specifications.\n  * Message Structures: Delve into the exact message formats for requests and responses, ensuring seamless integration.\n  * Documentation Comments: Within the Proto Contract, annotations provide additional context and guidance for each defined method and message type.\n  * Recommendations for Developers: Before integrating or making API calls to the Junter rendering service, we highly advise thoroughly reviewing this Proto Contract. It is a foundational document that can help preempt potential issues and streamline the integration process.\n  \n  \n# Code of conduct\n[Code of conduct](code-of-conduct.md)\n# Filling issues\n[Filling issues](docs/issues.md)\n# FAQ\n[FAQ](docs/faq.md)\n# Team\n[Team](docs/team.md)\n# License\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunter-dev%2Fjunter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjunter-dev%2Fjunter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunter-dev%2Fjunter/lists"}