{"id":18994026,"url":"https://github.com/cipherlogs/oranj","last_synced_at":"2025-07-27T22:36:50.549Z","repository":{"id":216668421,"uuid":"741935950","full_name":"cipherlogs/oranj","owner":"cipherlogs","description":"Data driven template to quickly bootstrap community style apps.","archived":false,"fork":false,"pushed_at":"2024-01-11T21:01:14.000Z","size":24378,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-13T03:33:00.948Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://cipherlogs.github.io/oranj/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cipherlogs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2024-01-11T12:21:10.000Z","updated_at":"2024-01-21T01:16:57.000Z","dependencies_parsed_at":"2024-01-11T22:13:39.212Z","dependency_job_id":null,"html_url":"https://github.com/cipherlogs/oranj","commit_stats":null,"previous_names":["cipherlogs/oranj"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cipherlogs/oranj","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipherlogs%2Foranj","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipherlogs%2Foranj/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipherlogs%2Foranj/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipherlogs%2Foranj/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cipherlogs","download_url":"https://codeload.github.com/cipherlogs/oranj/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipherlogs%2Foranj/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267436808,"owners_count":24086899,"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","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-08T17:23:51.959Z","updated_at":"2025-07-27T22:36:50.502Z","avatar_url":"https://github.com/cipherlogs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./show1.png\"\u003e\n\u003c/p\u003e\n\n\n# Oranj\n\nWhether you're building a forum, discussion platform, or any other community-driven app, **Oranj** provides a couple of useful components for rapid development.\n\n\u003cbr\u003e\n\n## Features\n\n- **Dynamic Stories:** Keep users engaged with the unique Hot and Cold indicators. *Stories that are gaining popularity turn vibrant orange, while those receiving less attention adopt a cold blue hue.*\n\n- **Data-Driven Menus:** Menus that are shaped by data.\n\n- **Lazy Loading Posts:** Load content as users scroll, ensuring a smooth and efficient browsing experience.\n\n\u003cbr\u003e\n\n## Customization\n### Menus\nCreating a simple menu in **Oranj** is straightforward. You can define it as follows:\n\n```javascript\nconst menu = [\n  {text: \"Home\"},\n  {text: \"Our Services\"},\n  {text: \"Contact Us\", MainIcon: ContactIcon} // Or we can add icons to any item we want\n]\n```\n\n\u003cbr\u003e\n\nHowever, the beauty lies in the flexibility of shaping menus based on the data you provide.\nFor instance, adding switches, nested lists, dividers, buttons, and more can be seamlessly incorporated without any hassle:\n\n```javascript\nconst userProfileItems = [\n  {type: \"section\", text: \"Settings\", data: settings}, // section with switches\n  {type: \"divider\"}, // divider for asthetics\n  {text: \"Help Center\", MainIcon: HelpIcon}, // Normal menu item\n  {type: \"nested\", text: \"More\", MainIcon: ReadMoreIcon, data: moreCategories}, // nested menu within the current menu\n  ...\n  {text: \"Log In / Sign Up\", MainIcon: LoginIcon},\n];\n```\n\nThe result is a dynamic menu with various item types:\n\n![Menu with different item types](./assets/one.gif)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\nNested menus are a breeze to create within another menu or a nested DropDownList with as many levels as needed.\nJust add `isNested: true` to the root, and everything else is taken care of:\n\n```javascript\n{isNested: true, data: your-data}\n```\n\n\u003cbr\u003e\n\nHere's an example of a two-level nested drop-down menu:\n\n![A 2 level nested drop down menu](./assets/two.gif)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\nYou can nest as deeply as required, with each **Oranj** component equipped with a safety fallback. If the content overflows,\nit gracefully shows a limited set of items and a \"show more\" option (customizable):\n\n![show more, by default when many items can't fit](./assets/three.gif)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n### Infinite Scroll\nThe default behavior of the `Post` component is to fetch 4 posts at a time, triggered by scrolling to the end of the page (customizable):\n\n![triggering infinite scrolling](./assets/four.gif)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n### Stories\nBy default, on mobile, you can swipe for the next or previous stories:\n\n![navigating stories](./assets/five.gif)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\nCustomization options include determining how many stories to show per breakpoint:\n\n```\n{xs: 1, sm: 2, md: 3, lg: 4}\n```\n\n![how many stories to show per screen size](./assets/six.gif)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n**Stories feature hot and cold indicators, dynamically determined based on your data to showcase the level of attention each story receives.**\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n### Posts\nPosts are versatile, coming in four types:\n\n1. Posts with titles only (question posts)\n2. Posts with titles and inner text\n3. Posts with media (images and videos)\n4. Posts that are links\n\nThe type of each post is automatically determined from your data without requiring any additional configuration.\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Getting Started\n\nTo get started with Oranj, follow these steps:\n\n```bash\n$ pnpm install\n$ pnpm dev\n```\n\nI'm on [Twitter](https://twitter.com/cipherlogs) feel free to follow or reach out if you have any questions or need further assistance!\n\nHappy community building!\n\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## License\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcipherlogs%2Foranj","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcipherlogs%2Foranj","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcipherlogs%2Foranj/lists"}