---
py-config:
  splashscreen:
    autoclose: true
  packages:
    - jinja2
    - pandas
---

(current-microtasks)=

# List of Current Microtasks Available

% NOTE: The CSV files used by this page are generated by the script located at
% https://github.com/jupyterhub/outreachy/blob/main/scripts/get-repo-issues.py
% The above script is automatically run on issue opened/closed/(un)labeled
% events by a GitHub Actions workflow located at
% https://github.com/jupyterhub/outreachy/blob/main/.github/workflows/sync-issues.yaml
% The CSV files are then committed and pushed to the issue-data branch of the repo
% https://github.com/jupyterhub/outreachy/tree/issue-data

This table shows the microtasks currently available to work on during a
contribution period. The table contains a link to the issue describing the
task, a label indicating which project it is connected to, an indication of
how many applicants can work on the issue simultaneously, and a label indicating
the difficulty level of the task. See [](microtasks:create:labels) for more
details.

```{tip}
Refresh the page to keep it up-to-date!
```

```{py-script}
import pandas as pd
from pyodide.http import open_url

# Get the data
data = pd.read_csv(
    open_url(
        "https://raw.githubusercontent.com/jupyterhub/outreachy/issue-data/microtask-table.csv"
    )
)
data.fillna(" ", inplace=True)

# Function to display the table
display(data.style.hide(axis="index"), target="microtask-table", append=False)
```

<div id="microtask-table" class="full-width microtask-table"></div>

% DataTables config to make the table above look nice
% TODO: Figure out how to make this work nicely with dark theme

<link rel="stylesheet"
      href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<script type="text/javascript"
        src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>

<script>
$(document).ready( function () {
    $('.microtask-table table').DataTable( {
        "order": [[ 0, "template" ]],
        "pageLength": 25
    });
} );
</script>

% Make the tables a little bit more compact since there's a lot of text

<style>
    table {
        font-size: 1em;
    }

    table th, table td {
        padding: 100;
    }
</style>