patch of appview: profile: render punchcard on profile · round #1 · pull #238 · tangled.org/core

appview/pages/funcmap.go

···

       33
       33
        
       		"splitOn": func(s, sep string) []string {

     

       34
       34
        
       			return strings.Split(s, sep)

     

       35
       35
        
       		},

     

       36
       36
       +
       		"int64": func(a int) int64 {

     

       37
       37
       +
       			return int64(a)

     

       38
       38
       +
       		},

     

       36
       39
        
       		"add": func(a, b int) int {

     

       37
       40
        
       			return a + b

     

       38
       41
        
       		},

     

       42
       42
       +
       		"now": func() time.Time {

     

       43
       43
       +
       			return time.Now()

     

       44
       44
       +
       		},

     

       39
       45
        
       		// the absolute state of go templates

     

       40
       46
        
       		"add64": func(a, b int64) int64 {

     

       41
       47
        
       			return a + b

     
···

       79
       85
        
       		"longTimeFmt": func(t time.Time) string {

     

       80
       86
        
       			return t.Format("2006-01-02 * 3:04 PM")

     

       81
       87
        
       		},

     

       88
       88
       +
       		"commaFmt": humanize.Comma,

     

       82
       89
        
       		"shortTimeFmt": func(t time.Time) string {

     

       83
       90
        
       			return humanize.CustomRelTime(t, time.Now(), "", "", []humanize.RelTimeMagnitude{

     

       84
       91
        
       				{time.Second, "now", time.Second},

appview/pages/pages.go

···

       316
       316
        
       	CollaboratingRepos []db.Repo

     

       317
       317
        
       	ProfileTimeline    *db.ProfileTimeline

     

       318
       318
        
       	Card               ProfileCard

     

       319
       319
       +
       	Punchcard          db.Punchcard

     

       319
       320
        
       

     

       320
       321
        
       	DidHandleMap map[string]string

     

       321
       322
        
       }

+115 -66

appview/pages/templates/user/profile.html

···

       8
       8
        
       {{ end }}

     

       9
       9
        
       

     

       10
       10
        
       {{ define "content" }}

     

       11
       11
       -
       <div class="grid grid-cols-1 md:grid-cols-8 gap-6">

     

       11
       11
       +
       <div class="grid grid-cols-1 md:grid-cols-8 gap-4">

     

       12
       12
        
           <div class="md:col-span-2 order-1 md:order-1">

     

       13
       13
       +
             <div class="grid grid-cols-1 gap-4">

     

       13
       14
        
               {{ template "user/fragments/profileCard" .Card }}

     

       15
       15
       +
               {{ block "punchcard" .Punchcard }} {{ end }}

     

       16
       16
       +
             </div>

     

       14
       17
        
           </div>

     

       15
       18
        
           <div id="all-repos" class="md:col-span-3 order-2 md:order-2">

     

       19
       19
       +
             <div class="grid grid-cols-1 gap-4">

     

       16
       20
        
               {{ block "ownRepos" . }}{{ end }}

     

       17
       21
        
               {{ block "collaboratingRepos" . }}{{ end }}

     

       22
       22
       +
             </div>

     

       18
       23
        
           </div>

     

       19
       24
        
           <div class="md:col-span-3 order-3 md:order-3">

     

       20
       25
        
               {{ block "profileTimeline" . }}{{ end }}

     
···

       24
       29
        
       

     

       25
       30
        
       {{ define "profileTimeline" }}

     

       26
       31
        
         <p class="text-sm font-bold p-2 dark:text-white">ACTIVITY</p>

     

       27
       27
       -
         <div class="flex flex-col gap-6 relative">

     

       32
       32
       +
         <div class="flex flex-col gap-4 relative">

     

       28
       33
        
           {{ with .ProfileTimeline }}

     

       29
       34
        
             {{ range $idx, $byMonth := .ByMonth }}

     

       30
       35
        
               {{ with $byMonth }}

     
···

       233
       238
        
       {{ end }}

     

       234
       239
        
       

     

       235
       240
        
       {{ define "ownRepos" }}

     

       236
       236
       -
         <div class="text-sm font-bold p-2 pr-0 dark:text-white flex items-center justify-between gap-2">

     

       237
       237
       -
           <a href="/@{{ or $.Card.UserHandle $.Card.UserDid }}?tab=repos"

     

       238
       238
       -
             class="flex text-black dark:text-white items-center gap-4 no-underline hover:no-underline group">

     

       239
       239
       -
             <span>PINNED REPOS</span>

     

       240
       240
       -
             <span class="flex md:hidden group-hover:flex gap-2 items-center font-normal text-sm text-gray-500 dark:text-gray-400 ">

     

       241
       241
       -
               view all {{ i "chevron-right" "w-4 h-4" }}

     

       242
       242
       -
             </span>

     

       243
       243
       -
           </a>

     

       244
       244
       -
           {{ if and .LoggedInUser (eq .LoggedInUser.Did .Card.UserDid) }}

     

       245
       245
       -
             <button 

     

       246
       246
       -
               hx-get="profile/edit-pins"

     

       247
       247
       -
               hx-target="#all-repos"

     

       248
       248
       -
               class="btn font-normal text-sm flex gap-2 items-center group">

     

       249
       249
       -
               {{ i "pencil" "w-3 h-3" }}

     

       250
       250
       -
               edit

     

       251
       251
       -
               {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}

     

       252
       252
       -
             </button>

     

       253
       253
       -
           {{ end }}

     

       254
       254
       -
         </div>

     

       255
       255
       -
         <div id="repos" class="grid grid-cols-1 gap-4 mb-6">

     

       256
       256
       -
           {{ range .Repos }}

     

       257
       257
       -
             <div

     

       258
       258
       -
                 id="repo-card"

     

       259
       259
       -
                 class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800">

     

       260
       260
       -
                 <div id="repo-card-name" class="font-medium">

     

       261
       261
       -
                     <a href="/@{{ or $.Card.UserHandle $.Card.UserDid }}/{{ .Name }}"

     

       262
       262
       -
                         >{{ .Name }}</a

     

       263
       263
       -
                     >

     

       264
       264
       -
                 </div>

     

       265
       265
       -
                 {{ if .Description }}

     

       266
       266
       -
                     <div class="text-gray-600 dark:text-gray-300 text-sm">

     

       267
       267
       -
                         {{ .Description }}

     

       268
       268
       -
                     </div>

     

       269
       269
       -
                 {{ end }}

     

       270
       270
       -
                 <div class="text-gray-400 pt-1 text-sm font-mono inline-flex gap-4 mt-auto">

     

       271
       271
       -
                   {{ if .RepoStats.StarCount }}

     

       272
       272
       -
                       <div class="flex gap-1 items-center text-sm">

     

       273
       273
       -
                           {{ i "star" "w-3 h-3 fill-current" }}

     

       274
       274
       -
                           <span>{{ .RepoStats.StarCount }}</span>

     

       275
       275
       -
                       </div>

     

       276
       276
       -
                   {{ end }}

     

       277
       277
       -
                 </div>

     

       278
       278
       -
             </div>

     

       279
       279
       -
           {{ else }}

     

       280
       280
       -
               <p class="px-6 dark:text-white">This user does not have any repos yet.</p>

     

       281
       281
       -
           {{ end }}

     

       282
       282
       -
         </div>

     

       283
       283
       -
       {{ end }}

     

       284
       284
       -
       

     

       285
       285
       -
       {{ define "collaboratingRepos" }}

     

       286
       286
       -
         {{ if gt (len .CollaboratingRepos) 0 }}

     

       287
       287
       -
           <p class="text-sm font-bold p-2 dark:text-white">COLLABORATING ON</p>

     

       288
       288
       -
           <div id="collaborating" class="grid grid-cols-1 gap-4 mb-6">

     

       289
       289
       -
             {{ range .CollaboratingRepos }}

     

       241
       241
       +
         <div>

     

       242
       242
       +
           <div class="text-sm font-bold p-2 pr-0 dark:text-white flex items-center justify-between gap-2">

     

       243
       243
       +
             <a href="/@{{ or $.Card.UserHandle $.Card.UserDid }}?tab=repos"

     

       244
       244
       +
               class="flex text-black dark:text-white items-center gap-2 no-underline hover:no-underline group">

     

       245
       245
       +
               <span>PINNED REPOS</span>

     

       246
       246
       +
               <span class="flex gap-1 items-center font-normal text-sm text-gray-500 dark:text-gray-400 ">

     

       247
       247
       +
                 view all {{ i "chevron-right" "w-4 h-4" }}

     

       248
       248
       +
               </span>

     

       249
       249
       +
             </a>

     

       250
       250
       +
             {{ if and .LoggedInUser (eq .LoggedInUser.Did .Card.UserDid) }}

     

       251
       251
       +
               <button 

     

       252
       252
       +
                 hx-get="profile/edit-pins"

     

       253
       253
       +
                 hx-target="#all-repos"

     

       254
       254
       +
                 class="btn py-0 font-normal text-sm flex gap-2 items-center group">

     

       255
       255
       +
                 {{ i "pencil" "w-3 h-3" }}

     

       256
       256
       +
                 edit

     

       257
       257
       +
                 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}

     

       258
       258
       +
               </button>

     

       259
       259
       +
             {{ end }}

     

       260
       260
       +
           </div>

     

       261
       261
       +
           <div id="repos" class="grid grid-cols-1 gap-4">

     

       262
       262
       +
             {{ range .Repos }}

     

       290
       263
        
               <div

     

       291
       264
        
                   id="repo-card"

     

       292
       292
       -
                   class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800 flex flex-col">

     

       293
       293
       -
                   <div id="repo-card-name" class="font-medium dark:text-white">

     

       294
       294
       -
                       <a href="/{{ index $.DidHandleMap .Did }}/{{ .Name }}">

     

       295
       295
       -
                           {{ index $.DidHandleMap .Did }}/{{ .Name }}

     

       296
       296
       -
                       </a>

     

       265
       265
       +
                   class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800">

     

       266
       266
       +
                   <div id="repo-card-name" class="font-medium">

     

       267
       267
       +
                       <a href="/@{{ or $.Card.UserHandle $.Card.UserDid }}/{{ .Name }}"

     

       268
       268
       +
                           >{{ .Name }}</a

     

       269
       269
       +
                       >

     

       297
       270
        
                   </div>

     

       298
       271
        
                   {{ if .Description }}

     

       299
       272
        
                       <div class="text-gray-600 dark:text-gray-300 text-sm">

     
···

       301
       274
        
                       </div>

     

       302
       275
        
                   {{ end }}

     

       303
       276
        
                   <div class="text-gray-400 pt-1 text-sm font-mono inline-flex gap-4 mt-auto">

     

       277
       277
       +
                     {{ if .RepoStats.StarCount }}

     

       278
       278
       +
                         <div class="flex gap-1 items-center text-sm">

     

       279
       279
       +
                             {{ i "star" "w-3 h-3 fill-current" }}

     

       280
       280
       +
                             <span>{{ .RepoStats.StarCount }}</span>

     

       281
       281
       +
                         </div>

     

       282
       282
       +
                     {{ end }}

     

       283
       283
       +
                   </div>

     

       284
       284
       +
               </div>

     

       285
       285
       +
             {{ else }}

     

       286
       286
       +
                 <p class="px-6 dark:text-white">This user does not have any repos yet.</p>

     

       287
       287
       +
             {{ end }}

     

       288
       288
       +
           </div>

     

       289
       289
       +
         </div>

     

       290
       290
       +
       {{ end }}

     

       304
       291
        
       

     

       292
       292
       +
       {{ define "collaboratingRepos" }}

     

       293
       293
       +
         {{ if gt (len .CollaboratingRepos) 0 }}

     

       294
       294
       +
           <div>

     

       295
       295
       +
             <p class="text-sm font-bold p-2 dark:text-white">COLLABORATING ON</p>

     

       296
       296
       +
             <div id="collaborating" class="grid grid-cols-1 gap-4">

     

       297
       297
       +
               {{ range .CollaboratingRepos }}

     

       298
       298
       +
                 <div

     

       299
       299
       +
                     id="repo-card"

     

       300
       300
       +
                     class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800">

     

       301
       301
       +
                     <div id="repo-card-name" class="font-medium dark:text-white">

     

       302
       302
       +
                         <a href="/{{ index $.DidHandleMap .Did }}/{{ .Name }}">

     

       303
       303
       +
                             {{ index $.DidHandleMap .Did }}/{{ .Name }}

     

       304
       304
       +
                         </a>

     

       305
       305
       +
                     </div>

     

       306
       306
       +
                     {{ if .Description }}

     

       307
       307
       +
                         <div class="text-gray-600 dark:text-gray-300 text-sm">

     

       308
       308
       +
                             {{ .Description }}

     

       309
       309
       +
                         </div>

     

       310
       310
       +
                     {{ end }}

     

       311
       311
       +
                     <div class="text-gray-400 pt-1 text-sm font-mono inline-flex gap-4 mt-auto">

     

       305
       312
        
                       {{ if .RepoStats.StarCount }}

     

       306
       313
        
                           <div class="flex gap-1 items-center text-sm">

     

       307
       314
        
                               {{ i "star" "w-3 h-3 fill-current" }}

     

       308
       315
        
                               <span>{{ .RepoStats.StarCount }}</span>

     

       309
       316
        
                           </div>

     

       310
       317
        
                       {{ end }}

     

       311
       311
       -
                   </div>

     

       312
       312
       -
               </div>

     

       313
       313
       -
             {{ else }}

     

       314
       314
       -
                 <p class="px-6 dark:text-white">This user is not collaborating.</p>

     

       315
       315
       -
             {{ end }}

     

       318
       318
       +
                     </div>

     

       319
       319
       +
                 </div>

     

       320
       320
       +
               {{ else }}

     

       321
       321
       +
                   <p class="px-6 dark:text-white">This user is not collaborating.</p>

     

       322
       322
       +
               {{ end }}

     

       323
       323
       +
             </div>

     

       316
       324
        
           </div>

     

       317
       325
        
         {{ end }}

     

       318
       326
        
       {{ end }}

     

       327
       327
       +
       

     

       328
       328
       +
       {{ define "punchcard" }}

     

       329
       329
       +
         {{ $now := now }}

     

       330
       330
       +
         <div>

     

       331
       331
       +
           <p class="p-2 flex gap-2 text-sm font-bold dark:text-white">

     

       332
       332
       +
             PUNCHCARD

     

       333
       333
       +
             <span class="font-normal text-sm text-gray-500 dark:text-gray-400 ">

     

       334
       334
       +
               {{ .Total | int64 | commaFmt }} commits

     

       335
       335
       +
             </span>

     

       336
       336
       +
           </p>

     

       337
       337
       +
           <div class="bg-white dark:bg-gray-800 px-6 py-4 rounded drop-shadow-sm">

     

       338
       338
       +
             <div class="grid grid-cols-28 md:grid-cols-14 gap-y-2 w-full h-full">

     

       339
       339
       +
               {{ range .Punches }}

     

       340
       340
       +
                 {{ $count := .Count }}

     

       341
       341
       +
                 {{ $theme := "bg-gray-200 dark:bg-gray-700 size-[4px]" }}

     

       342
       342
       +
                 {{ if lt $count 1 }}

     

       343
       343
       +
                   {{ $theme = "bg-gray-200 dark:bg-gray-700 size-[4px]" }}

     

       344
       344
       +
                 {{ else if lt $count 2 }}

     

       345
       345
       +
                   {{ $theme = "bg-green-200 dark:bg-green-900 size-[5px]" }}

     

       346
       346
       +
                 {{ else if lt $count 4 }}

     

       347
       347
       +
                   {{ $theme = "bg-green-300 dark:bg-green-800 size-[5px]" }}

     

       348
       348
       +
                 {{ else if lt $count 8 }}

     

       349
       349
       +
                   {{ $theme = "bg-green-400 dark:bg-green-700 size-[6px]" }}

     

       350
       350
       +
                 {{ else }}

     

       351
       351
       +
                   {{ $theme = "bg-green-500 dark:bg-green-600 size-[7px]" }}

     

       352
       352
       +
                 {{ end }}

     

       353
       353
       +
       

     

       354
       354
       +
                 {{ if .Date.After $now }}

     

       355
       355
       +
                   {{ $theme = "border border-gray-200 dark:border-gray-700 size-[4px]" }}

     

       356
       356
       +
                 {{ end }}

     

       357
       357
       +
                 <div class="w-full h-full flex justify-center items-center">

     

       358
       358
       +
                   <div

     

       359
       359
       +
                     class="aspect-square rounded-full transition-all duration-300 {{ $theme }} max-w-full max-h-full"

     

       360
       360
       +
                     title="{{ .Date.Format "2006-01-02" }}: {{ .Count }} commits">

     

       361
       361
       +
                   </div>

     

       362
       362
       +
                 </div>

     

       363
       363
       +
               {{ end }}

     

       364
       364
       +
             </div>

     

       365
       365
       +
           </div>

     

       366
       366
       +
         </div>

     

       367
       367
       +
       {{ end }}

+1 -1

appview/pages/templates/user/repos.html

···

       8
       8
        
       {{ end }}

     

       9
       9
        
       

     

       10
       10
        
       {{ define "content" }}

     

       11
       11
       -
       <div class="grid grid-cols-1 md:grid-cols-8 gap-6">

     

       11
       11
       +
       <div class="grid grid-cols-1 md:grid-cols-8 gap-4">

     

       12
       12
        
           <div class="md:col-span-2 order-1 md:order-1">

     

       13
       13
        
               {{ template "user/fragments/profileCard" .Card }}

     

       14
       14
        
           </div>

+14

appview/state/profile.go

···

       9
       9
        
       	"net/http"

     

       10
       10
        
       	"slices"

     

       11
       11
        
       	"strings"

     

       12
       12
       +
       	"time"

     

       12
       13
        
       

     

       13
       14
        
       	comatproto "github.com/bluesky-social/indigo/api/atproto"

     

       14
       15
        
       	"github.com/bluesky-social/indigo/atproto/identity"

     
···

       126
       127
        
       		followStatus = db.GetFollowStatus(s.db, loggedInUser.Did, ident.DID.String())

     

       127
       128
        
       	}

     

       128
       129
        
       

     

       130
       130
       +
       	now := time.Now()

     

       131
       131
       +
       	startOfYear := time.Date(now.Year(), 1, 1, 0, 0, 0, 0, time.UTC)

     

       132
       132
       +
       	punchcard, err := db.MakePunchcard(

     

       133
       133
       +
       		s.db,

     

       134
       134
       +
       		db.FilterEq("did", ident.DID.String()),

     

       135
       135
       +
       		db.FilterGte("date", startOfYear.Format(time.DateOnly)),

     

       136
       136
       +
       		db.FilterLte("date", now.Format(time.DateOnly)),

     

       137
       137
       +
       	)

     

       138
       138
       +
       	if err != nil {

     

       139
       139
       +
       		log.Println("failed to get punchcard for did", "did", ident.DID.String(), "err", err)

     

       140
       140
       +
       	}

     

       141
       141
       +
       

     

       129
       142
        
       	profileAvatarUri := s.GetAvatarUri(ident.Handle.String())

     

       130
       143
        
       	s.pages.ProfilePage(w, pages.ProfilePageParams{

     

       131
       144
        
       		LoggedInUser:       loggedInUser,

     
···

       141
       154
        
       			Followers:    followers,

     

       142
       155
        
       			Following:    following,

     

       143
       156
        
       		},

     

       157
       157
       +
       		Punchcard:       punchcard,

     

       144
       158
        
       		ProfileTimeline: timeline,

     

       145
       159
        
       	})

     

       146
       160
        
       }

+49

cmd/punchcardPopulate/main.go

···

       1
       1
       +
       package main

     

       2
       2
       +
       

     

       3
       3
       +
       import (

     

       4
       4
       +
       	"database/sql"

     

       5
       5
       +
       	"fmt"

     

       6
       6
       +
       	"log"

     

       7
       7
       +
       	"math/rand"

     

       8
       8
       +
       	"time"

     

       9
       9
       +
       

     

       10
       10
       +
       	_ "github.com/mattn/go-sqlite3"

     

       11
       11
       +
       )

     

       12
       12
       +
       

     

       13
       13
       +
       func main() {

     

       14
       14
       +
       	db, err := sql.Open("sqlite3", "./appview.db")

     

       15
       15
       +
       	if err != nil {

     

       16
       16
       +
       		log.Fatal("Failed to open database:", err)

     

       17
       17
       +
       	}

     

       18
       18
       +
       	defer db.Close()

     

       19
       19
       +
       

     

       20
       20
       +
       	const did = "did:plc:qfpnj4og54vl56wngdriaxug"

     

       21
       21
       +
       

     

       22
       22
       +
       	now := time.Now()

     

       23
       23
       +
       	start := time.Date(now.Year(), 1, 1, 0, 0, 0, 0, time.UTC)

     

       24
       24
       +
       

     

       25
       25
       +
       	tx, err := db.Begin()

     

       26
       26
       +
       	if err != nil {

     

       27
       27
       +
       		log.Fatal(err)

     

       28
       28
       +
       	}

     

       29
       29
       +
       	stmt, err := tx.Prepare("INSERT INTO punchcard (did, date, count) VALUES (?, ?, ?)")

     

       30
       30
       +
       	if err != nil {

     

       31
       31
       +
       		log.Fatal(err)

     

       32
       32
       +
       	}

     

       33
       33
       +
       	defer stmt.Close()

     

       34
       34
       +
       

     

       35
       35
       +
       	for day := start; !day.After(now); day = day.AddDate(0, 0, 1) {

     

       36
       36
       +
       		count := rand.Intn(16) // 0–5

     

       37
       37
       +
       		dateStr := day.Format("2006-01-02")

     

       38
       38
       +
       		_, err := stmt.Exec(did, dateStr, count)

     

       39
       39
       +
       		if err != nil {

     

       40
       40
       +
       			log.Println("Failed to insert for date %s: %v", dateStr, err)

     

       41
       41
       +
       		}

     

       42
       42
       +
       	}

     

       43
       43
       +
       

     

       44
       44
       +
       	if err := tx.Commit(); err != nil {

     

       45
       45
       +
       		log.Fatal("Failed to commit:", err)

     

       46
       46
       +
       	}

     

       47
       47
       +
       

     

       48
       48
       +
       	fmt.Println("Done populating punchcard.")

     

       49
       49
       +
       }

tailwind.config.js

···

       67
       67
        
       					},

     

       68
       68
        
       				},

     

       69
       69
        
       			},

     

       70
       70
       +
       			gridTemplateColumns: {

     

       71
       71
       +
       				'14': 'repeat(14, minmax(0, 1fr))',

     

       72
       72
       +
       				'28': 'repeat(28, minmax(0, 1fr))',

     

       73
       73
       +
       			}

     

       70
       74
        
       		},

     

       71
       75
        
       	},

     

       72
       76
        
       	plugins: [require("@tailwindcss/typography")],