index.html

---
layout: default
title: Awesome KorGE Bundles
---
<header>
	<h1>Old awesome.korge.org</h1>

	<script>
		if (window.insideKorgeIntellij) {
			document.body.setAttribute("data-theme", "intellij")
		}
	</script>

	<div>
		API version: <a href="/list.json">list.json</a>.
		<!--
		Add <a target="_blank" href="https://github.com/korlibs/awesome.korge.org">your own resources</a>.
		-->
	</div>

	<div style="background:orange;border:3px solid red;color:black;padding: 1em;margin: 1em 0;">
		DEPRECATED. Replaced by <a href="https://store.korge.org/">https://store.korge.org/</a>
	</div>

	<script type="text/javascript">
		function updatedSearch() {
			const text = document.getElementById('search').value;
			//console.log(text)
			let activeCount = 0
			for (const entry of document.querySelectorAll('.entry')) {
				const active = (text === '' || entry.textContent.search(new RegExp(text, 'i')) >= 0)
				if (active) activeCount++
				//entry.style.display = active ? 'block' : 'none';
				if (active) {
					$(entry).show('fast')
				} else {
					$(entry).hide('fast')
				}
				//console.log(entry.textContent)
			}
			if (activeCount > 0) {
				$('#no-entries-found').hide('fast')
			} else {
				$('#no-entries-found').show('fast')
			}
		}
	</script>

	<input id="search" type="search" placeholder="Search bundles..." autofocus style="margin: 2em 0;" onkeyup="updatedSearch()" oninput="updatedSearch()"/>
</header>
{% for bundle in site.bundles %}
<div id="no-entries-found" style="display: none;">No entries found</div>
<div class="entry card mb-3">
	<div class="row g-0">
		<div class="col-md-3">
			{% assign icon = bundle.icon | default: "unknown.svg" %}
			<img src="/icons/{{ icon }}" class="img-fluid" style="width: 100%;height:auto;max-width:250px;padding: 1em;" alt="...">
		</div>
		<div class="col-md-9">
			<div class="card-body bundle-entry">
				<h5 class="card-title">{{ bundle.title }}</h5>
				<p class="card-text">
					<div class="d-flex flex-row">
						<div style="margin-right: 1em;">
							<i class="fas fa-user"></i>
							<strong>Author:</strong> <a href="{{ bundle.author_link }}" target="_blank">{{ bundle.author }}</a>
						</div>
						<div style="margin-right: 1em;">
							<i class="fas fa-inbox"></i>
							<strong>License:</strong> {{ bundle.license }}
						</div>
						<div style="margin-right: 1em;">
							<i class="fas fa-globe"></i>
							<a href="{{ bundle.bundle_link }}" target="_blank">Website</a>
						</div>
					</div>
				</p>
				<p class="card-text">
					<span class="badge rounded-pill bg-secondary">{{ bundle.category }}</span>
					{% for tag in bundle.tags %}
					<span class="badge rounded-pill bg-secondary">{{ bundle.tag }}</span>
					{% endfor %}
				</p>
				<p class="card-text" style="max-height:128px;overflow:auto;">
					{% if bundle.image %}
					<div><img src="/images/{{ bundle.image }}" class="img-fluid"/></div>
					{% endif %}
					{{ bundle.content }}
				</p>

				<!--
				<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
				-->

				<div style="display:none;" class="data-bundle-id">{{ bundle.id }}</div>
				<div style="display:none;" class="data-bundle-title">{{ bundle.title }}</div>
				<div style="display:none;" class="data-bundle-link">{{ bundle.link }}</div>
				<div style="display:none;" class="data-bundle-description">{{ bundle.content }}</div>
				<div style="display:none;" class="data-bundle-image">{{ bundle.image }}</div>
				<div style="display:none;" class="data-bundle-author">{{ bundle.author }}</div>
				<div style="display:none;" class="data-bundle-url">{{ bundle.bundle_url }}</div>
				<div style="display:none;" class="data-bundle-parameters">{% for bvar in bundle.required_vars %}{{ bvar }},{% endfor %}</div>

				<!-- Button trigger modal -->
				<div class="d-flex flex-row-reverse">
					<button type="button" class="btn btn-primary get-code-button" data-bs-toggle="modal" data-bs-target="#entrymodal{{ forloop.index }}">
						Get Code
					</button>
				</div>

				<!-- Modal -->
				<div class="modal fade" id="entrymodal{{ forloop.index }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
					<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" style="max-width:100%;padding:1em;">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="exampleModalLabel">Code for including {{ bundle.title }}</h5>
								<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
							</div>
							<div class="modal-body">
<pre style="background: #eee;border-radius:1em;padding: 1em 2em;"><code id="modalcode{{ forloop.index }}">korge {
    bundle({{ bundle.bundle_url | jsonify }})
{% for bvar in bundle.required_vars %}    config("{{ bvar }}", "...")
{% endfor %}}
</code></pre>
							</div>
							<div class="modal-footer">
								<button
										type="button" class="btn btn-primary"
										onclick="window.getSelection().selectAllChildren(document.querySelector('#modalcode{{ forloop.index }}'));document.execCommand('copy');return true;"
										role="button" data-toggle="popover" data-trigger="focus" data-content="Copied!"
										data-placement="top"
								>Select and Copy</button>
								<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{% endfor %}
<script>
	//alert([...document.querySelectorAll(".bundle-entry")])

	async function getKorgePlugins() {
		return window?.jcefFunctions?.getKorgePlugins?.({})
	}

	async function init() {
		if (!window?.jcefFunctions?.installKorgePlugin) return

		const plugins = await getKorgePlugins()

		document.querySelectorAll(".bundle-entry").forEach(entry => {
			function getParam(name) {
				return entry.querySelector(`.data-bundle-${name}`)?.textContent
			}

			const getCodeButton = entry.querySelector(".get-code-button")
			getCodeButton.removeAttribute("data-bs-toggle")
			getCodeButton.removeAttribute("data-bs-target")

			const id = getParam("id")
			const author = getParam("author")
			const title = getParam("title")
			const link = getParam("link")
			const description = getParam("description")
			const image = getParam("image")
			const url = getParam("url")
			const parameters = getParam("parameters").split(",").filter(it => it?.length > 0)
			const installed = plugins.indexOf(url) >= 0;

			getCodeButton.textContent = installed ? "Installed" : "Install";
			getCodeButton.classList.toggle('disabled', installed)

			getCodeButton.onclick = async (e) => {
				const result = await window.jcefFunctions.installKorgePlugin({
					id, author, title, link, description, image, url, parameters,
				})
				init() // reinit
				return false
			}
		})
	}

	init()
</script>