devyulbae.github.io/index.html at master · devyulbae/devyulbae.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
---
layout: default
---

<div class="home-container">
    <!-- GitHub 활동 섹션 -->
    <section class="github-section">
        <h2>Github Contributions</h2>
        <div class="github-calendar">
            <!-- GitHub 캘린더가 로드될 컨테이너 -->
            <div class="calendar"></div>
        </div>
    </section>

    <!-- 인기 게시물 섹션 -->
    <section class="popular-posts">
        <h2>Popular Posts</h2>
        <div class="posts-grid">
            {% assign sorted_posts = site.posts | sort: "views" | reverse %}
            {% for post in sorted_posts limit:5 %}
            <article class="post-card">
                <div class="post-card-content">
                    <h3 class="post-title">
                        <a href="{{ post.url }}">{{ post.title }}</a>
                    </h3>
                    <div class="post-meta">
                        <span class="post-date">{{ post.date | date: "%Y-%m-%d" }}</span>
                        {% if post.categories.size > 0 %}
                        <span class="post-category">
                            <i class="fas fa-folder"></i> {{ post.categories | first }}
                        </span>
                        {% endif %}
                    </div>
                    <p class="post-excerpt">{{ post.excerpt | strip_html | truncatewords: 30 }}</p>
                </div>
            </article>
            {% endfor %}
        </div>
    </section>
</div>

<!-- GitHub Calendar CSS -->
<link rel="stylesheet" href="https://unpkg.com/github-calendar/dist/github-calendar-responsive.css"/>

<!-- 커스텀 툴팁 div 추가 -->
<div id="contribution-tooltip" class="contribution-tooltip" style="display: none;"></div>

<!-- GitHub Calendar JavaScript -->
<script src="https://unpkg.com/github-calendar/dist/github-calendar.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const tooltip = document.getElementById('contribution-tooltip');

        // GitHub Calendar 초기화
        GitHubCalendar(".calendar", "{{ site.author.social.github | split: '/' | last }}", {
            responsive: true
        }).then(() => {
            // 캘린더가 로드된 후에 이벤트 리스너 추가
            const days = document.querySelectorAll('.ContributionCalendar-day');

            days.forEach(day => {
                day.addEventListener('mouseenter', (e) => {
                    const count = day.getAttribute('data-count');
                    const date = day.getAttribute('data-date');

                    if (count && date) {
                        const formattedDate = new Date(date).toLocaleDateString('ko-KR', {
                            year: 'numeric',
                            month: 'long',
                            day: 'numeric'
                        });

                        tooltip.textContent = `${formattedDate}: ${count}개의 기여`;
                        tooltip.style.display = 'block';

                        const rect = e.target.getBoundingClientRect();
                        tooltip.style.left = `${rect.left + window.scrollX}px`;
                        tooltip.style.top = `${rect.top + window.scrollY - 40}px`;
                    }
                });

                day.addEventListener('mouseleave', () => {
                    tooltip.style.display = 'none';
                });
            });
        });
    });
</script>