GitHub Actions, Issues and Pages to build a daily planner#

I’m trying a new thing: a private daily planner, where each day I note down my goals for the day and make notes on my progress towards them as the day progresses.

I love using GitHub Issues for notes (see this comment) so I decided to set something up there.

I want a fresh issue in my private simonw/planner repo for every day that I’m working. The issue should have the day’s date, and should prompt me for my goals.

So… I needed a mechanism for automatically creating a new issue every day.

I used ChatGPT a bunch to help build this - a slightly edited transcript is available here.

Issue templates and URLs#

I created a file .github/ISSUE_TEMPLATE/day.yml with the following:`

1
name: Daily Planner Issue
2
description: Template for daily planning.
3
title: "[Date] - Daily Plan"
4
labels: ["daily-planner"]
5
body:
6
  - type: markdown
7
    attributes:
8
      value: "## Daily Planner"
9
  - type: textarea
10
    attributes:
11
      label: "Priorities"
12
      description: "List your top priorities for the day."
13
      placeholder: "1. Priority One\n2. Priority Two\n3. Priority Three"
14
  - type: textarea
15
    attributes:
16
      label: "To-Do List"
17
      description: "List all tasks that you need to complete today."
18
      placeholder: "- [ ] Task 1\n- [ ] Task 2\n- [ ] Task 3"

This defines an issue template. By selecting that template I get a form that looks like this:

Issue: Daily Planner issue. Has a title pre-populated to [Date] - Daily Plan, then a Priorities textarea, then a To-Do List textarea. At the bottom is a Submit new issue button.

This is a neat starting point, but I can do better than that. It turns out you can pre-populate the title field of an issue by passing ?title=... in the URL.

https://github.com/simonw/planner/issues/new?template=day.yml&title=encoded-title-goes-here

This URL will pre-populate that form with a custom title.

I can link to that page with today’s date to create a new issue - but I’d like to be able to automatically jump to the day’s issue if it’s been created, and only link to the form if it has not.

A page that creates or redirects to the issue for the day#

My repo is private, but private repos can still use GitHub Pages. I decided to solve this problem using a client-side JavaScript page that I could set as the homepage in Firefox, so hitting Command+N on my keyboard would open up my daily planner issue, or the pre-populated creation form if it doesn’t exist yet.

I got ChatGPT to write the initial version of the following, which I then tweaked to fully meet my evolving requirements:

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Daily Planner Issue Redirector</title>
6
    <script>
7
        document.addEventListener('DOMContentLoaded', function() {
8
            const today = new Date();
9
            const formattedToday = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
10
            fetch(`issue-titles.json?${Math.random()}`)
11
                .then(response => response.json())
12
                .then(issues => {
13
                    const matchingIssue = issues.find(issue => issue.title.startsWith(formattedToday));
14
                    if (matchingIssue) {
15
                        window.location.href = matchingIssue.url;
16
                    } else {
17
                        const fullDateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
18
                        const fullDateString = today.toLocaleDateString('en-US', fullDateOptions).replace(/,/g, '');
19
                        const title = `${formattedToday}: ${fullDateString}`;
20
                        const encodedTitle = encodeURIComponent(title);
21
                        window.location.href = `https://github.com/simonw/planner/issues/new?template=day.yml&title=${encodedTitle}`;
22
                    }
23
                })
24
                .catch(error => console.error('Error fetching issue titles:', error));
25
        });
26
    </script>
27
</head>
28
<body>
29
    <h1>Redirecting...</h1>
30
</body>
31
</html>

My initial prompt for this was:

Write an index.html file which runs JavaScript that does the following:

Generate a string for today’s date like this: 2023-12-22 Friday 22nd December

Fetch issue-titles.json using fetch()

The format of that will be:
1
[
2
  {
3
    "title": "2023-12-22 Friday 22nd December",
4
    "url": "https://github.com/simonw/planner/issues/1"
5
  }
6
]
If the calculated title is already there, redirect the user to that url

Otherwise, send the user to this page:

https://github.com/simonw/planner/issues/new?template=day.yml&title=

Fill in the title with the URL a encoded title

As you can see, the trick here is that it expects to be able to load an issue-titles.json file with a list of issues in the repo.

The repo may be private, but I’m OK with exposing the issue titles here.

How to create issue-titles.json? I can do that using GitHub Actions.

GitHub Actions workflow to create issue-titles.json#

I started with this prompt:

Write a GitHub Actions workflow which retrieves a list of issue names and URLs for the current repo, converts those into a JSON array and then publishes that as issue-titles.json using GitHub Pages

I got back this:

1
name: Generate Issues JSON
2

3
on:
4
  workflow_dispatch:
5
  schedule:
6
    - cron: '0 0 * * *' # Runs every day at midnight
7

8
jobs:
9
  generate-json:
10
    runs-on: ubuntu-latest
11
    steps:
12
    - name: Checkout
13
      uses: actions/checkout@v4
14

15
    - name: Fetch Issues
16
      id: get-issues
17
      uses: actions/github-script@v7
18
      with:
19
        script: |
20
          const response = await github.rest.issues.listForRepo({
21
            owner: context.repo.owner,
22
            repo: context.repo.repo,
23
            state: 'open'
24
          });
25
          return response.data.map(issue => ({ title: issue.title, url: issue.html_url }));
26

27
    - name: Write JSON File
28
      run: echo '${{ toJSON(steps.get-issues.outputs.result) }}' > issue-titles.json
29

30
    - name: Deploy to GitHub Pages
31
      uses: peaceiris/actions-gh-pages@v4
32
      with:
33
        github_token: ${{ secrets.GITHUB_TOKEN }}
34
        publish_dir: ./
35
        publish_branch: gh-pages # The branch GitHub Pages uses
36
        keep_files: true

This is using an older way of deploying to GitHub Pages. I hand-edited the workflow a few times until I got this, stored in .github/workflows/issues.yml:

1
name: Generate Issues JSON
2

3
permissions:
4
  contents: write
5
  issues: read
6

7
on:
8
  workflow_dispatch:
9
  push:
10
  issues:
11
    types: [opened]
12

13
jobs:
14
  generate-json:
15
    runs-on: ubuntu-latest
16
    steps:
17
    - name: Checkout
18
      uses: actions/checkout@v4
19

20
    - name: Fetch Issues
21
      id: get-issues
22
      uses: actions/github-script@v5
23
      with:
24
        script: |
25
          const fs = require('fs');
26
          const issues = await github.rest.issues.listForRepo({
27
            owner: context.repo.owner,
28
            repo: context.repo.repo,
29
            state: 'all',
30
            per_page: 100,
31
            sort: 'created',
32
            direction: 'desc'
33
          });
34
          const issueData = issues.data.map(issue => ({ title: issue.title, url: issue.html_url }));
35
          fs.writeFileSync('issue-titles.json', JSON.stringify(issueData, null, 2))
36

37
    - name: Commit and push if it changed
38
      run: |-
39
        git config user.name "Automated"
40
        git config user.email "actions@users.noreply.github.com"
41
        git add -A
42
        timestamp=$(date -u)
43
        git commit -m "Latest data: ${timestamp}" || exit 0
44
        git push

Then I configured GitHub Pages for that repo like this:

GitHub Pages settings - source is Deploy from a branch, it says my site is now live at simonw.github.io/planner

Adding this all together, I now have a mechanism where any time I open a new issue the issue-titles.json file is updated, and then deployed to GitHub Pages along with the index.html page that reads it and redirects to an issue or to the form that creates a new one.

My simonw/planner private repo now contains the following files:

1
index.html
2
issue-titles.json
3
.github/workflows/issues.yml
4
.github/ISSUE_TEMPLATE/day.yml

The generated issue-titles.json file currently looks like this:

1
[
2
  {
3
    "title": "2024-01-01: Monday January 1 2024",
4
    "url": "https://github.com/simonw/planner/issues/5"
5
  },
6
  {
7
    "title": "2023-12-30: Saturday December 30 2023",
8
    "url": "https://github.com/simonw/planner/issues/4"
9
  },
10
  {
11
    "title": "2023-12-27: Wednesday December 27 2023",
12
    "url": "https://github.com/simonw/planner/issues/3"
13
  },
14
  {
15
    "title": "2023-12-22: Friday December 22 2023",
16
    "url": "https://github.com/simonw/planner/issues/2"
17
  }
18
]

You can visit the deployed site at https://simonw.github.io/planner/ but since you’re not logged in as me it will just redirect you to a 404 page.

It works!#

Now, any time I hit Command+N in Firefox I get a browser window that loads https://simonw.github.io/planner/ and then either redirects me to the issue for today or sends me to a pre-populated form to create a new issue.

I love throwing together little custom applications like this on top of GitHub Actions and GitHub Pages.

I also love that I didn’t have to write much code for this at all - ChatGPT is good enough at both GitHub Actions syntax and HTML and JavaScript that I could get it to do 80% of the work for me.