1. 카테고리를 받아서 _cat에 넣고 post가 해당 categories를 포함하는지 검사한다. 포함되면 graph_posts에 devlog에서 해당되는 posts를 넣고, 포함되는게 없으면 devlog 전체 출력


  
 
  1. graph의 id 생성. 카테고리를 받아서 graph_id에 넣고 기본값은 “all”로 지정. ex) category가 “ue5”면 id는 “graph-ue5”, 없으면 “graph-all” ```liquid

3. graph_posts에서 날짜만 추출해서 JS 배열로 만든다. Jekyll이 빌드 시점에 렌더링 → 결과는 `["2026-03-28", "2026-03-27", ...]` 형태

```JavaScript
(function () {
  var postDates = ["2025-08-05","2025-08-19","2025-08-21","2025-08-26","2025-08-28","2025-08-30","2025-09-09","2025-09-15","2025-09-30","2025-10-04","2025-11-30","2025-12-14","2025-12-14","2025-12-15","2025-12-16","2025-12-17","2025-12-27","2025-12-28","2026-01-03","2026-01-10","2026-01-17","2026-01-24","2026-01-24","2026-01-24","2026-01-25","2026-01-27","2026-01-29","2026-01-31","2026-02-06","2026-02-06","2026-02-07","2026-02-15","2026-02-17","2026-02-17","2026-02-20","2026-02-21","2026-02-22","2026-02-24","2026-03-12","2026-03-13","2026-03-14","2026-03-14","2026-03-14","2026-03-14","2026-03-14","2026-03-15","2026-03-15","2026-03-16","2026-03-20","2026-03-20","2026-03-21","2026-03-21","2026-03-22","2026-03-22","2026-03-22","2026-03-22","2026-03-23","2026-03-23","2026-03-24","2026-03-24","2026-03-25","2026-03-26","2026-03-26","2026-03-27","2026-03-27","2026-03-28","2026-03-28","2026-03-28","2026-03-28","2026-03-28","2026-03-29","2026-03-29","2026-03-30","2026-03-30","2026-04-02","2026-04-06","2026-04-06","2026-04-06","2026-04-06","2026-04-07","2026-04-08","2026-04-08","2026-04-09","2026-04-09","2026-04-09","2026-04-09","2026-04-10","2026-04-10","2026-04-10","2026-04-10","2026-04-12","2026-04-12"];
  1. 날짜별 포스트 수를 counts 객체에 저장한다. ex) { "2026-03-28": 2, "2026-03-27": 1 } 
      var counts = {};
  postDates.forEach(function (d) {
    counts[d] = (counts[d] || 0) + 1;
  });
  2. 날짜만 필요하니까 시간을 00:00:00으로 초기화 ```JavaScript   var today = new Date();

  today.setHours(0, 0, 0, 0);


6. 그래프 시작일 계산: 오늘이 속한 주의 일요일에서 51주 전 → 총 52주(364일)치 그래프
  
```JavaScript
  var start = new Date(today);
  start.setDate(start.getDate() - start.getDay());
  start.setDate(start.getDate() - 51 * 7);
  1. graph_id에 해당하는 div를 가져온다 
      var container = document.getElementById('graph-all');
  2. Date 객체를 “YYYY-MM-DD” 형식의 문자열로 변환. counts의 키와 형식을 맞추기 위해 사용 
      function toLocalDateStr(dt) {
    var y = dt.getFullYear();
    var m = String(dt.getMonth() + 1).padStart(2, '0');
    var day = String(dt.getDate()).padStart(2, '0');
    return y + '-' + m + '-' + day;
  }
  3. 52열(주) x 7행(요일) 그리드 생성 ```JavaScript   for (var w = 0; w < 52; w++) {     var col = document.createElement(‘div’);     col.className = ‘til-graph-col’;     for (var d = 0; d < 7; d++) {    

    해당 셀의 날짜 계산

          var date = new Date(start);       date.setDate(start.getDate() + w * 7 + d);       var dateStr = toLocalDateStr(date);

해당 날짜의 포스트 수 (없으면 0)

      var count = counts[dateStr] || 0;

셀 생성. count에 따라 클래스를 다르게 부여 (0~4)

CSS에서 til-cell–0 ~ til-cell–4 로 색깔 정의

      var cell = document.createElement(‘div’);       cell.className = ‘til-cell til-cell–’ + Math.min(count, 4);

마우스 호버 시 날짜와 포스트 수 표시

      cell.title = dateStr + (count > 0 ? ‘ (‘ + count + ‘)’ : ‘’);       col.appendChild(cell);     }     container.appendChild(col);   }

```

Related Posts