index.qmd

---
engine: julia
julia: 
  exeflags: ["--project=."]
---


```{=html}
<div class="column-page mb-0 text-center">
    <img src="./assets/images/logo.png" class="img-fluid" alt="JuliaHealth Logo" />
    <p class="h1">
        Transforming Health Research!
    </p>
    <p class="h3 fs-2 mt-0">
        Improving medicine, health and bio-medical research using the power of Julia.
    </p>
</div>
```

```{julia}
#| include: false

using JSON
import Base.Docs.HTML
import Markdown: htmlesc
```

```{julia}
#| echo: false

MAX_PACKAGES_COUNT = 5
packages = JSON.parsefile("assets/json/packages.json")

count = 0
child_str = ""

for package in packages
    count += 1
    if count > MAX_PACKAGES_COUNT
        break
    end

    name = htmlesc(strip(package["name"]))
    description = htmlesc(strip(package["description"]))
    web_link = htmlesc(strip(package["web_link"]))
    repo_link = htmlesc(strip(package["repo_link"]))
    image = htmlesc(strip(package["image"]))
    image = isempty(image) ? "assets/images/logo.png" : image

    child_str *= """
        <div class="card g-col-12 g-col-md-4 p-2 rounded home-page-package-card">
            <div class="card-body d-flex flex-column align-items-center justify-content-between">
                <img src="./$(image)" class="img-fluid card-img-top mb-3" alt="$(name) Logo" style="width: 12em; height: 12em;" />
                <span class="card-title fw-bold">$(name)</span>
                <p class="card-text">
                    $(description)
                </p>
                <p class="card-text d-flex align-items-center gap-2">
                    $(
                        isempty(repo_link)
                        ? ""
                        : """
                            <a href="$(repo_link)" target="_blank" class="text-link-primary text-decoration-none">
                                <i class="bi bi-github me-1"></i>Github
                            </a>
                        """
                    )
                    $(
                        isempty(web_link)
                        ? ""
                        : """
                            <a href="$(web_link)" target="_blank" class="text-link-primary text-decoration-none">
                                <i class="bi bi-globe me-1"></i>Website
                            </a>
                        """
                    )
                </p>
            </div>
        </div>
    """
end

HTML(
    """
        <div class="column-page p-md-3">
            <h3 class="mb-2 fs-2 text-center"><i class="bi bi-boxes me-2"></i>Explore Packages</h3>
            <p class="mb-4 fs-3 text-center">Below are some of the powerful packages developed by the community.</p>
            <div class="grid text-center">
                $(child_str)
                <div class="card g-col-12 g-col-md-4 p-2 rounded home-page-package-card">
                    <div class="card-body d-flex align-items-center justify-content-center">
                        <p class="card-text">
                            <a href="pages/packages.html">
                                And many more...
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    """
)
```

```{julia}
#| echo: false

MAX_ORGS_COUNT = 5
orgs = JSON.parsefile("assets/json/orgs.json")

count = 0
child_str = ""

for org in orgs
    count += 1
    if count > MAX_ORGS_COUNT
        break
    end

    name = htmlesc(strip(org["name"]))
    description = htmlesc(strip(org["description"]))
    web_link = htmlesc(strip(org["web_link"]))
    repo_link = htmlesc(strip(org["repo_link"]))
    image = htmlesc(strip(org["image"]))
    image = isempty(image) ? "assets/images/logo.png" : image

    child_str *= """
        <div class="card g-col-12 g-col-md-4 p-2 rounded home-page-org-card">
            <div class="card-body d-flex flex-column align-items-center justify-content-between">
                <img src="./$(image)" class="img-fluid card-img-top mb-3" alt="$(name) Logo" style="width: 12em; height: 12em;" />
                <span class="card-title fw-bold">$(name)</span>
                <p class="card-text">
                    $(description)
                </p>
                <p class="card-text d-flex align-items-center gap-2">
                    $(
                        isempty(repo_link)
                        ? ""
                        : """
                            <a href="$(repo_link)" target="_blank" class="text-link-primary text-decoration-none">
                                <i class="bi bi-github me-1"></i>Github
                            </a>
                        """
                    )
                    $(
                        isempty(web_link)
                        ? ""
                        : """
                            <a href="$(web_link)" target="_blank" class="text-link-primary text-decoration-none">
                                <i class="bi bi-globe me-1"></i>Website
                            </a>
                        """
                    )
                </p>
            </div>
        </div>
    """
end

HTML(
    """
        <div class="column-page p-md-3">
            <h3 class="mb-2 fs-2 text-center"><i class="bi bi-people-fill me-2"></i>Similar Organizations</h3>
            <p class="mb-4 fs-3 text-center">We are not the only one, there are other communities researching on various similar aspects.</p>
            <div class="grid text-center">
                $(child_str)
                <div class="card g-col-12 g-col-md-4 p-2 rounded home-page-package-card">
                    <div class="card-body d-flex align-items-center justify-content-center">
                        <p class="card-text">
                            <a href="pages/related_organizations.html">
                                And many more...
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    """
)
```

<!-- ```{=html}
<div class="column-page p-3">
    <h3 class="mb-2 fs-2 text-center"><i class="bi bi-question-circle-fill me-2"></i>FAQs</h3>
    <div class="accordion" id="accordionPanelsStayOpenExample">
    <div class="accordion-item">
        <span class="accordion-header">
            <button
                class="accordion-button"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#panelsStayOpen-collapseOne"
                aria-expanded="false"
                aria-controls="panelsStayOpen-collapseOne"
            >
                Accordion Item #1
            </button>
        </span>
        <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
            <div class="accordion-body">
                <strong>This is the first item's accordion body.</strong> It is shown by default,
                until the collapse plugin adds the appropriate classes that we use to style each
                element. These classes control the overall appearance, as well as the showing and
                hiding via CSS transitions. You can modify any of this with custom CSS or overriding
                our default variables. It's also worth noting that just about any HTML can go within
                the <code>.accordion-body</code>, though the transition does limit overflow.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <span class="accordion-header">
            <button
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#panelsStayOpen-collapseTwo"
                aria-expanded="false"
                aria-controls="panelsStayOpen-collapseTwo"
            >
                Accordion Item #2
            </button>
        </span>
        <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
            <div class="accordion-body">
                <strong>This is the second item's accordion body.</strong> It is hidden by default,
                until the collapse plugin adds the appropriate classes that we use to style each
                element. These classes control the overall appearance, as well as the showing and
                hiding via CSS transitions. You can modify any of this with custom CSS or overriding
                our default variables. It's also worth noting that just about any HTML can go within
                the <code>.accordion-body</code>, though the transition does limit overflow.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <span class="accordion-header">
            <button
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#panelsStayOpen-collapseThree"
                aria-expanded="false"
                aria-controls="panelsStayOpen-collapseThree"
            >
                Accordion Item #3
            </button>
        </span>
        <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse">
            <div class="accordion-body">
                <strong>This is the third item's accordion body.</strong> It is hidden by default,
                until the collapse plugin adds the appropriate classes that we use to style each
                element. These classes control the overall appearance, as well as the showing and
                hiding via CSS transitions. You can modify any of this with custom CSS or overriding
                our default variables. It's also worth noting that just about any HTML can go within
                the <code>.accordion-body</code>, though the transition does limit overflow.
            </div>
        </div>
    </div>
</div>
``` -->