jekyll-theme-profile 1.3.1 → 1.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +55 -13
- data/_config.yml +21 -8
- data/_includes/breadcrumbs.html +1 -1
- data/_includes/footer.html +12 -1
- data/_includes/head.html +51 -0
- data/_includes/header-appbar.html +49 -0
- data/_includes/header-sidebar.html +66 -0
- data/_includes/header-stacked.html +41 -0
- data/_includes/header-topbar.html +43 -0
- data/_includes/link-card.html +17 -7
- data/_includes/links.html +6 -4
- data/_includes/masthead.html +8 -37
- data/_includes/mini-repo-info-card.html +1 -1
- data/_includes/nav-overlay.html +38 -0
- data/_includes/nav.html +1 -1
- data/_includes/navbar-underline.html +11 -0
- data/_includes/post-card.html +20 -11
- data/_includes/post-feature-card.html +22 -0
- data/_includes/post-timeline-card.html +49 -0
- data/_includes/post-timeline.html +10 -0
- data/_includes/posts.html +4 -1
- data/_includes/social.html +3 -4
- data/_includes/toggle.html +2 -2
- data/_includes/user-metadata.html +30 -0
- data/_layouts/default.html +18 -127
- data/_layouts/home.html +2 -7
- data/_layouts/linktree.html +16 -0
- data/_layouts/page.html +2 -2
- data/_layouts/paginate.html +7 -12
- data/_layouts/post.html +97 -21
- data/_layouts/profile.html +36 -0
- data/_sass/_main.scss +146 -12
- data/assets/css/theme.scss +3 -5
- data/assets/img/default.png +0 -0
- data/assets/js/anchor-links.js +47 -0
- data/assets/js/theme-toggle.js +81 -0
- data/assets/js/timeline.js +29 -0
- metadata +47 -3
- data/_includes/header.html +0 -160
data/_layouts/post.html
CHANGED
|
@@ -1,26 +1,102 @@
|
|
|
1
1
|
---
|
|
2
|
-
layout:
|
|
2
|
+
layout: default
|
|
3
3
|
---
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
{{ content }}
|
|
7
|
-
</div>
|
|
8
|
-
|
|
9
|
-
<!-- Pagination links -->
|
|
10
|
-
<div class="paginate-container">
|
|
11
|
-
<div role="navigation" aria-label="Pagination" class="d-flex d-md-inline-block pagination">
|
|
12
|
-
{% if page.previous.url %}
|
|
13
|
-
<a class="previous_page" rel="prev" href="{{ page.previous.url | relative_url }}"
|
|
14
|
-
aria-disabled="false">{{page.previous.title | truncate: 20 }}</a>
|
|
15
|
-
{% else %}
|
|
16
|
-
<span class="previous_page disabled" aria-disabled="true">Previous</span>
|
|
17
|
-
{% endif %}
|
|
4
|
+
{%- assign user = site.github.owner %}
|
|
5
|
+
{%- assign name = page.author | default: user.name | default: user.login %}
|
|
18
6
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
7
|
+
<div class="BlogHeader position-relative border-top">
|
|
8
|
+
<div class="container-xl p-responsive">
|
|
9
|
+
<div class="gutter-spacious pt-1 ">
|
|
10
|
+
<div class="col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8">
|
|
11
|
+
<div class="h3-mktg lh-condensed mb-3 color-header-default">{{ page.title }}</div>
|
|
12
|
+
<p class="f4-mktg color-header-default">{{ page.description }}</p>
|
|
13
|
+
</div>
|
|
14
|
+
<div class="offset-lg-1 col-lg-10">
|
|
15
|
+
<div class="position-relative z-1">
|
|
16
|
+
<div class="image-container">
|
|
17
|
+
<img src="{{ page.image | relative_url }}" class="cover-image rounded-2" alt="{{ page.title }}"/>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="color-bg-default position-absolute bottom-0 width-full border-top" style="height:88px">
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="container-xl mx-auto p-responsive">
|
|
27
|
+
<div class="gutter-spacious mt-5">
|
|
28
|
+
<div class="col-12 offset-lg-1 col-lg-10">
|
|
29
|
+
<div class="text-mono f5-mktg color-fg-muted mb-12px">Author</div>
|
|
30
|
+
<div class="d-flex flex-nowrap pb-1 flex-items-start">
|
|
31
|
+
<div class="d-flex flex-wrap">{{ name }}</div>
|
|
32
|
+
<div class="d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5">
|
|
33
|
+
{{ page.date | date: "%b %d, %Y" }}
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="color-border-accent-emphasis border-bottom"></div>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="mx-auto p-responsive mt-4 mt-md-7 mb-7 mb-md-9">
|
|
40
|
+
<div class="d-flex flex-wrap gutter-spacious">
|
|
41
|
+
<div class="col-12 offset-lg-1 col-lg-1">
|
|
42
|
+
<ul class="list-style-none d-flex flex-lg-column position-sticky top-12">
|
|
43
|
+
<li class="mr-4 mr-lg-0 mb-4">
|
|
44
|
+
<a href="https://x.com/share?text={{ page.title | url_encode }}&url={{ page.url | absolute_url | url_encode }}"
|
|
45
|
+
target="_blank"
|
|
46
|
+
class="d-flex flex-justify-center flex-items-center border circle social-aside"
|
|
47
|
+
data-proofer-ignore>
|
|
48
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273.5 222.3" height="18">
|
|
49
|
+
<path
|
|
50
|
+
d="M273.5 26.3a109.77 109.77 0 0 1-32.2 8.8 56.07 56.07 0 0 0 24.7-31 113.39 113.39 0 0 1-35.7 13.6 56.1 56.1 0 0 0-97 38.4 54 54 0 0 0 1.5 12.8A159.68 159.68 0 0 1 19.1 10.3a56.12 56.12 0 0 0 17.4 74.9 56.06 56.06 0 0 1-25.4-7v.7a56.11 56.11 0 0 0 45 55 55.65 55.65 0 0 1-14.8 2 62.39 62.39 0 0 1-10.6-1 56.24 56.24 0 0 0 52.4 39 112.87 112.87 0 0 1-69.7 24 119 119 0 0 1-13.4-.8 158.83 158.83 0 0 0 86 25.2c103.2 0 159.6-85.5 159.6-159.6 0-2.4-.1-4.9-.2-7.3a114.25 114.25 0 0 0 28.1-29.1"
|
|
51
|
+
fill="currentColor"></path>
|
|
52
|
+
</svg>
|
|
53
|
+
</a>
|
|
54
|
+
</li>
|
|
55
|
+
<li class="mr-4 mr-lg-0 mb-4">
|
|
56
|
+
<a href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | absolute_url | url_encode }};t={{ page.title | url_encode }}"
|
|
57
|
+
target="_blank"
|
|
58
|
+
class="d-flex flex-justify-center flex-items-center border circle social-aside"
|
|
59
|
+
data-proofer-ignore>
|
|
60
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.3 15.4" height="18">
|
|
61
|
+
<path
|
|
62
|
+
d="M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z"
|
|
63
|
+
fill="currentColor"></path>
|
|
64
|
+
</svg>
|
|
65
|
+
</a>
|
|
66
|
+
</li>
|
|
67
|
+
<li class="mr-4 mr-lg-0 mb-4">
|
|
68
|
+
<a href="https://www.linkedin.com/shareArticle?url={{ page.url | absolute_url | url_encode }}%2F&title={{ page.title | url_encode }}"
|
|
69
|
+
target="_blank"
|
|
70
|
+
class="d-flex flex-justify-center flex-items-center border circle social-aside"
|
|
71
|
+
data-proofer-ignore>
|
|
72
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 18" height="18">
|
|
73
|
+
<path
|
|
74
|
+
d="M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z"
|
|
75
|
+
fill="currentColor"></path>
|
|
76
|
+
</svg>
|
|
77
|
+
</a>
|
|
78
|
+
</li>
|
|
79
|
+
</ul>
|
|
80
|
+
</div>
|
|
81
|
+
<div
|
|
82
|
+
class="col-12 col-lg-7 col-md-8 markdown-body">
|
|
83
|
+
{{ content }}
|
|
84
|
+
</div>
|
|
85
|
+
<div class="col-12 col-md-4 col-lg-3 markdown-body">
|
|
86
|
+
<div class="d-none d-md-block position-sticky top-12">
|
|
87
|
+
{% capture toc_content%}{{ content | toc_only }}{% endcapture %}
|
|
88
|
+
{% if toc_content contains "li" %}
|
|
89
|
+
<div class="mb-8 table-of-contents ">
|
|
90
|
+
<h2 class="h6-mktg pt-1">
|
|
91
|
+
Table of Contents
|
|
92
|
+
</h2>
|
|
93
|
+
<div id="table-of-contents">
|
|
94
|
+
{{ toc_content }}
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
{%- endif %}
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
25
101
|
</div>
|
|
26
102
|
</div>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: page
|
|
3
|
+
user_metadata: true
|
|
4
|
+
---
|
|
5
|
+
<div class="Profile d-lg-flex">
|
|
6
|
+
<div class="col-lg-4 border-gray-light pt-6 text-center">
|
|
7
|
+
{%- include masthead.html %}
|
|
8
|
+
{%- include social.html %}
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<div class="col-lg-8 border-top border-lg-top-0 color-bg-default">
|
|
12
|
+
<div class="py-6">
|
|
13
|
+
{%- assign posts_total = site.posts | size %}
|
|
14
|
+
{%- assign posts_limit = site.posts_limit | default: posts_total %}
|
|
15
|
+
|
|
16
|
+
{%- unless content == "" %}
|
|
17
|
+
{{ content }}
|
|
18
|
+
{%- endunless %}
|
|
19
|
+
|
|
20
|
+
{%- if site.links %}
|
|
21
|
+
{%- include links.html %}
|
|
22
|
+
{%- endif %}
|
|
23
|
+
|
|
24
|
+
{%- unless posts_total == 0 %}
|
|
25
|
+
<h2 class="mb-3">Blog</h2>
|
|
26
|
+
{%- include post-timeline.html limit=posts_limit %}
|
|
27
|
+
{%- if site.posts.size > post_limit %}
|
|
28
|
+
{%- endif %}
|
|
29
|
+
{%- endunless %}
|
|
30
|
+
|
|
31
|
+
{%- if site.repositories %}
|
|
32
|
+
{%- include repositories.html %}
|
|
33
|
+
{%- endif %}
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
data/_sass/_main.scss
CHANGED
|
@@ -8,11 +8,6 @@
|
|
|
8
8
|
min-height: 100vh;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
.min-width {
|
|
12
|
-
min-width: 300px;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
|
|
16
11
|
.img-contain {
|
|
17
12
|
object-fit: contain;
|
|
18
13
|
}
|
|
@@ -21,19 +16,42 @@
|
|
|
21
16
|
object-fit: cover;
|
|
22
17
|
}
|
|
23
18
|
|
|
24
|
-
.
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
19
|
+
.cover-image {
|
|
20
|
+
position: absolute !important;
|
|
21
|
+
height: 100% !important;
|
|
22
|
+
width: 100% !important;
|
|
23
|
+
object-fit: cover;
|
|
24
|
+
left: 0 !important;
|
|
25
|
+
top: 0 !important;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.image-container {
|
|
29
|
+
width: 100%; /* Allow the container to adjust to the website's width */
|
|
30
|
+
// max-width: 800px; /* Set a maximum width to prevent image from exceeding 800px */
|
|
31
|
+
height: 0; /* Create an aspect ratio container (initial height is 0) */
|
|
32
|
+
padding-bottom: 53.125%; /* Aspect ratio (425 / 800) */
|
|
33
|
+
position: relative;
|
|
34
|
+
overflow: hidden;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.image-container img {
|
|
38
|
+
position: absolute;
|
|
39
|
+
width: 100%; /* Fill the entire container width */
|
|
40
|
+
height: 100%; /* Fill the entire container height */
|
|
41
|
+
object-fit: cover; /* Scale and crop the image to cover the container */
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.social-aside {
|
|
45
|
+
width: 44px;
|
|
46
|
+
height: 44px;
|
|
47
|
+
padding: 10px;
|
|
28
48
|
}
|
|
29
49
|
|
|
30
50
|
.img-masthead {
|
|
31
51
|
aspect-ratio: 1 / 1;
|
|
32
52
|
max-width: 296px;
|
|
53
|
+
position:relative;
|
|
33
54
|
overflow: hidden; /* Hide any overflow to maintain circle shape */
|
|
34
|
-
display: flex; /* Use flexbox to center the image */
|
|
35
|
-
justify-content: center; /* Center horizontally */
|
|
36
|
-
align-items: center; /* Center vertically */
|
|
37
55
|
margin: auto;
|
|
38
56
|
}
|
|
39
57
|
|
|
@@ -48,6 +66,97 @@
|
|
|
48
66
|
overflow-wrap: break-word;
|
|
49
67
|
}
|
|
50
68
|
|
|
69
|
+
.Overlay-header .Overlay-headerContentWrap {
|
|
70
|
+
align-items: flex-start;
|
|
71
|
+
display: flex;
|
|
72
|
+
gap: var(--stack-gap-condensed, 0.5rem);
|
|
73
|
+
padding: var(--stack-gap-condensed, 0.5rem) var(--stack-gap-condensed, 0.5rem) 0 var(--stack-gap-condensed, 0.5rem);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.Overlay-footer {
|
|
77
|
+
display: flex;
|
|
78
|
+
flex-direction: row;
|
|
79
|
+
flex-shrink: 0;
|
|
80
|
+
flex-wrap: wrap;
|
|
81
|
+
padding: 0 var(--stack-padding-normal, 1rem) var(--stack-padding-normal, 1rem) var(--stack-padding-normal, 1rem);
|
|
82
|
+
z-index: 1;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.AppHeader {
|
|
86
|
+
--AppHeader-bg: var(--bgColor-inset, var(--color-canvas-inset));
|
|
87
|
+
// color: var(--fgColor-default, var(--color-fg-default));
|
|
88
|
+
background: var(--AppHeader-bg);
|
|
89
|
+
// box-shadow: inset 0 calc(var(--borderWidth-thin, 1px)*-1) var(--borderColor-default, var(--color-border-default));
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.AppHeader-button {
|
|
93
|
+
position: relative;
|
|
94
|
+
display: grid;
|
|
95
|
+
grid-auto-columns: max-content;
|
|
96
|
+
width: var(--base-size-32, 32px);
|
|
97
|
+
height: var(--base-size-32, 32px);
|
|
98
|
+
color: var(--color-fg-muted);
|
|
99
|
+
background: transparent;
|
|
100
|
+
border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
|
|
101
|
+
border-radius: var(--borderRadius-medium, 6px);
|
|
102
|
+
align-items: center;
|
|
103
|
+
justify-content: center;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.AppHeader-link {
|
|
107
|
+
color: var(--color-fg-default);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.AppHeader-logo {
|
|
111
|
+
border: 0;
|
|
112
|
+
width: var(--base-size-32, 32px);
|
|
113
|
+
height: var(--base-size-32, 32px);
|
|
114
|
+
outline-offset: 2px;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.ActionListItem {
|
|
118
|
+
background-color: var(--control-transparent-bgColor-rest, #0000);
|
|
119
|
+
border-radius: var(--borderRadius-medium, 0.375rem);
|
|
120
|
+
list-style: none;
|
|
121
|
+
position: relative;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.ActionListContent {
|
|
125
|
+
-webkit-tap-highlight-color: transparent;
|
|
126
|
+
align-items: start;
|
|
127
|
+
background-color: initial;
|
|
128
|
+
border: none;
|
|
129
|
+
border-radius: var(--borderRadius-medium, 0.375rem);
|
|
130
|
+
color: var(--control-fgColor-rest, var(--color-fg-default));
|
|
131
|
+
display: grid;
|
|
132
|
+
grid-template-areas: "leadingAction leadingVisual label trailingVisual trailingAction";
|
|
133
|
+
grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;
|
|
134
|
+
grid-template-rows: min-content;
|
|
135
|
+
padding-block: var(--actionListContent-paddingBlock);
|
|
136
|
+
padding-inline: var(--control-medium-paddingInline-condensed, 0.5rem);
|
|
137
|
+
position: relative;
|
|
138
|
+
text-align: left;
|
|
139
|
+
touch-action: manipulation;
|
|
140
|
+
transition: background 33.333ms linear;
|
|
141
|
+
-webkit-user-select: none;
|
|
142
|
+
user-select: none;
|
|
143
|
+
width: 100%;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.ActionListItem-label {
|
|
147
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
|
148
|
+
font-size: var(--text-body-size-medium, 0.875rem);
|
|
149
|
+
font-weight: var(--base-text-weight-normal, 400);
|
|
150
|
+
grid-area: label;
|
|
151
|
+
line-height: var(--text-body-lineHeight-medium, 1.4285);
|
|
152
|
+
position: relative;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.BlogHeader {
|
|
156
|
+
color: var(--color-header-text);
|
|
157
|
+
background-color: var(--color-header-bg);
|
|
158
|
+
}
|
|
159
|
+
|
|
51
160
|
|
|
52
161
|
body::before {
|
|
53
162
|
content: "";
|
|
@@ -59,3 +168,28 @@ body::before {
|
|
|
59
168
|
z-index: -1;
|
|
60
169
|
background-color: var(--overlay-color); /* Use the --overlay-color variable here */
|
|
61
170
|
}
|
|
171
|
+
|
|
172
|
+
@media print {
|
|
173
|
+
.BlogHeader {
|
|
174
|
+
background-color: inherit;
|
|
175
|
+
color: inherit;
|
|
176
|
+
}
|
|
177
|
+
.AppHeader {
|
|
178
|
+
display: none !important;
|
|
179
|
+
}
|
|
180
|
+
.Header {
|
|
181
|
+
display: none !important;
|
|
182
|
+
}
|
|
183
|
+
.Profile {
|
|
184
|
+
display: none !important;
|
|
185
|
+
}
|
|
186
|
+
.Toggle {
|
|
187
|
+
display: none !important;
|
|
188
|
+
}
|
|
189
|
+
.paginate-container {
|
|
190
|
+
display: none !important;
|
|
191
|
+
}
|
|
192
|
+
.markdown-body {
|
|
193
|
+
font-size: 12px;
|
|
194
|
+
}
|
|
195
|
+
}
|
data/assets/css/theme.scss
CHANGED
|
@@ -66,12 +66,15 @@
|
|
|
66
66
|
{%- if site.header.text %}
|
|
67
67
|
.Header {
|
|
68
68
|
--color-header-logo: {{ site.header.text }};
|
|
69
|
+
--color-fg-muted: {{ site.header.text }};
|
|
69
70
|
}
|
|
70
71
|
{%- endif %}
|
|
71
72
|
|
|
72
73
|
{%- if site.header.accent %}
|
|
73
74
|
.Header {
|
|
74
75
|
--color-header-text: {{ site.header.accent }};
|
|
76
|
+
--color-accent-fg: {{ site.header.accent }};
|
|
77
|
+
|
|
75
78
|
}
|
|
76
79
|
{%- endif %}
|
|
77
80
|
|
|
@@ -82,8 +85,3 @@
|
|
|
82
85
|
}
|
|
83
86
|
|
|
84
87
|
@import "jekyll-theme-profile";
|
|
85
|
-
|
|
86
|
-
.Profile {
|
|
87
|
-
background-color: var(--color-profile-bg);
|
|
88
|
-
color: var(--color-profile-text);
|
|
89
|
-
}
|
|
Binary file
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
// Fix anchor links
|
|
2
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
3
|
+
// Function to handle anchor link click
|
|
4
|
+
function handleAnchorLinkClick(e) {
|
|
5
|
+
// Prevent the default behavior of the link (e.g., jumping to the anchor)
|
|
6
|
+
e.preventDefault();
|
|
7
|
+
|
|
8
|
+
// Get the target section's ID from the href attribute
|
|
9
|
+
var targetId = this.getAttribute('href').substring(1);
|
|
10
|
+
|
|
11
|
+
// Get the target section by ID
|
|
12
|
+
var targetSection = document.getElementById(targetId);
|
|
13
|
+
|
|
14
|
+
// If the target section exists, calculate the offset based on the top bar's height
|
|
15
|
+
if (targetSection) {
|
|
16
|
+
var topBarHeight = document.querySelector('.topbar').offsetHeight;
|
|
17
|
+
var offsetTop = targetSection.offsetTop - topBarHeight;
|
|
18
|
+
|
|
19
|
+
// Scroll to the target section with the calculated offset
|
|
20
|
+
window.scrollTo({
|
|
21
|
+
top: offsetTop,
|
|
22
|
+
behavior: 'smooth' // Optional: Add smooth scrolling effect
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// Function to recalculate topBarHeight on window resize
|
|
28
|
+
function handleWindowResize() {
|
|
29
|
+
topBarHeight = document.querySelector('.topbar').offsetHeight;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
// Get all anchor links on the page
|
|
33
|
+
var anchorLinks = document.querySelectorAll('a[href^="#"]');
|
|
34
|
+
|
|
35
|
+
// Loop through each anchor link
|
|
36
|
+
anchorLinks.forEach(function (link) {
|
|
37
|
+
// Attach a click event listener to each anchor link
|
|
38
|
+
link.addEventListener('click', handleAnchorLinkClick);
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
// Add event listener for window resize, debounced for efficiency
|
|
42
|
+
var resizeTimer;
|
|
43
|
+
window.addEventListener('resize', function () {
|
|
44
|
+
clearTimeout(resizeTimer);
|
|
45
|
+
resizeTimer = setTimeout(handleWindowResize, 250);
|
|
46
|
+
});
|
|
47
|
+
});
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
2
|
+
var themeToggle = document.getElementById('theme-toggle');
|
|
3
|
+
var themeIcon = document.getElementById('theme-icon');
|
|
4
|
+
var htmlElement = document.getElementsByTagName('html')[0];
|
|
5
|
+
|
|
6
|
+
function getCurrentMode() {
|
|
7
|
+
return htmlElement.getAttribute('data-color-mode');
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
function getModeFromCookie() {
|
|
11
|
+
var cookieValue = getCookie('colorMode');
|
|
12
|
+
if (cookieValue !== null && (cookieValue === 'auto' || cookieValue === 'dark' || cookieValue === 'light')) {
|
|
13
|
+
return cookieValue;
|
|
14
|
+
} else {
|
|
15
|
+
// Default to 'auto' mode if the cookie is not set or has an invalid value
|
|
16
|
+
return 'auto';
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
function setCookie(name, value, days) {
|
|
21
|
+
var expires = "";
|
|
22
|
+
if (days) {
|
|
23
|
+
var date = new Date();
|
|
24
|
+
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
|
|
25
|
+
expires = "; expires=" + date.toUTCString();
|
|
26
|
+
}
|
|
27
|
+
document.cookie = name + "=" + (value || "") + expires + "; path=/";
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function getCookie(name) {
|
|
31
|
+
var nameEQ = name + "=";
|
|
32
|
+
var ca = document.cookie.split(';');
|
|
33
|
+
for (var i = 0; i < ca.length; i++) {
|
|
34
|
+
var c = ca[i];
|
|
35
|
+
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
|
|
36
|
+
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
|
|
37
|
+
}
|
|
38
|
+
return null;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function getNextMode() {
|
|
42
|
+
var currentMode = getCurrentMode();
|
|
43
|
+
var nextMode;
|
|
44
|
+
if (currentMode === 'auto') {
|
|
45
|
+
nextMode = 'dark';
|
|
46
|
+
} else if (currentMode === 'dark') {
|
|
47
|
+
nextMode = 'light'
|
|
48
|
+
} else {
|
|
49
|
+
nextMode = 'auto'
|
|
50
|
+
}
|
|
51
|
+
return nextMode;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function updateTheme(nextMode) {
|
|
55
|
+
htmlElement.setAttribute('data-color-mode', nextMode);
|
|
56
|
+
updateThemeIcon(nextMode);
|
|
57
|
+
setCookie('colorMode', nextMode, 365); // Save the preference for 365 days
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
function updateThemeIcon(nextMode) {
|
|
61
|
+
if (nextMode === 'dark') {
|
|
62
|
+
nextIcon = 'moon';
|
|
63
|
+
} else if (nextMode === 'light') {
|
|
64
|
+
nextIcon = 'sun'
|
|
65
|
+
} else {
|
|
66
|
+
nextIcon = 'zap';
|
|
67
|
+
}
|
|
68
|
+
// Set the span to the themeIcon class
|
|
69
|
+
themeIcon.classList = "octicon octicon-" + nextIcon + "-24";
|
|
70
|
+
themeToggle.setAttribute("aria-label", "Color mode: " + nextMode);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
themeToggle.addEventListener('click', function () {
|
|
74
|
+
updateTheme(getNextMode());
|
|
75
|
+
// updateThemeIcon(getNextMode());
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
// Initialize the theme icon based on the initial state
|
|
79
|
+
// updateThemeIcon(getModeFromCookie());
|
|
80
|
+
updateTheme(getModeFromCookie());
|
|
81
|
+
});
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
// Fix timeline anchors
|
|
2
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
3
|
+
console.log("Timeline script is running!");
|
|
4
|
+
|
|
5
|
+
function updateTopBarHeight() {
|
|
6
|
+
// Recalculate topBarHeight
|
|
7
|
+
var topBarElement = document.querySelector('.topbar');
|
|
8
|
+
topBarHeight = topBarElement ? topBarElement.offsetHeight : 0;
|
|
9
|
+
|
|
10
|
+
// Update styles for each timeline title
|
|
11
|
+
timelineTitles.forEach(function (title) {
|
|
12
|
+
title.style.top = topBarHeight + "px";
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// Default topBarHeight to 0 if .topbar doesn't exist
|
|
17
|
+
var topBarHeight = 0;
|
|
18
|
+
var timelineTitles = document.querySelectorAll(".TimelineItem-title");
|
|
19
|
+
|
|
20
|
+
// Initial update
|
|
21
|
+
updateTopBarHeight();
|
|
22
|
+
|
|
23
|
+
// Add event listener for window resize
|
|
24
|
+
window.addEventListener('resize', function () {
|
|
25
|
+
// Call the function to update topBarHeight and adjust styles
|
|
26
|
+
console.log("Updated height!");
|
|
27
|
+
updateTopBarHeight();
|
|
28
|
+
});
|
|
29
|
+
});
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-theme-profile
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.
|
|
4
|
+
version: 1.4.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Allison Thackston
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2023-
|
|
11
|
+
date: 2023-11-16 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -30,6 +30,20 @@ dependencies:
|
|
|
30
30
|
- - "<"
|
|
31
31
|
- !ruby/object:Gem::Version
|
|
32
32
|
version: '5.0'
|
|
33
|
+
- !ruby/object:Gem::Dependency
|
|
34
|
+
name: github-pages
|
|
35
|
+
requirement: !ruby/object:Gem::Requirement
|
|
36
|
+
requirements:
|
|
37
|
+
- - "~>"
|
|
38
|
+
- !ruby/object:Gem::Version
|
|
39
|
+
version: '228'
|
|
40
|
+
type: :runtime
|
|
41
|
+
prerelease: false
|
|
42
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
43
|
+
requirements:
|
|
44
|
+
- - "~>"
|
|
45
|
+
- !ruby/object:Gem::Version
|
|
46
|
+
version: '228'
|
|
33
47
|
- !ruby/object:Gem::Dependency
|
|
34
48
|
name: jekyll-github-metadata
|
|
35
49
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -86,6 +100,20 @@ dependencies:
|
|
|
86
100
|
- - "~>"
|
|
87
101
|
- !ruby/object:Gem::Version
|
|
88
102
|
version: '2.0'
|
|
103
|
+
- !ruby/object:Gem::Dependency
|
|
104
|
+
name: jekyll-toc
|
|
105
|
+
requirement: !ruby/object:Gem::Requirement
|
|
106
|
+
requirements:
|
|
107
|
+
- - "~>"
|
|
108
|
+
- !ruby/object:Gem::Version
|
|
109
|
+
version: 0.18.0
|
|
110
|
+
type: :runtime
|
|
111
|
+
prerelease: false
|
|
112
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
113
|
+
requirements:
|
|
114
|
+
- - "~>"
|
|
115
|
+
- !ruby/object:Gem::Version
|
|
116
|
+
version: 0.18.0
|
|
89
117
|
- !ruby/object:Gem::Dependency
|
|
90
118
|
name: jemoji
|
|
91
119
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -112,23 +140,35 @@ files:
|
|
|
112
140
|
- _config.yml
|
|
113
141
|
- _includes/breadcrumbs.html
|
|
114
142
|
- _includes/footer.html
|
|
115
|
-
- _includes/
|
|
143
|
+
- _includes/head.html
|
|
144
|
+
- _includes/header-appbar.html
|
|
145
|
+
- _includes/header-sidebar.html
|
|
146
|
+
- _includes/header-stacked.html
|
|
147
|
+
- _includes/header-topbar.html
|
|
116
148
|
- _includes/link-card.html
|
|
117
149
|
- _includes/links.html
|
|
118
150
|
- _includes/masthead.html
|
|
119
151
|
- _includes/mini-repo-info-card.html
|
|
152
|
+
- _includes/nav-overlay.html
|
|
120
153
|
- _includes/nav.html
|
|
154
|
+
- _includes/navbar-underline.html
|
|
121
155
|
- _includes/post-card.html
|
|
156
|
+
- _includes/post-feature-card.html
|
|
157
|
+
- _includes/post-timeline-card.html
|
|
158
|
+
- _includes/post-timeline.html
|
|
122
159
|
- _includes/posts.html
|
|
123
160
|
- _includes/repo-card.html
|
|
124
161
|
- _includes/repositories.html
|
|
125
162
|
- _includes/social.html
|
|
126
163
|
- _includes/toggle.html
|
|
164
|
+
- _includes/user-metadata.html
|
|
127
165
|
- _layouts/default.html
|
|
128
166
|
- _layouts/home.html
|
|
167
|
+
- _layouts/linktree.html
|
|
129
168
|
- _layouts/page.html
|
|
130
169
|
- _layouts/paginate.html
|
|
131
170
|
- _layouts/post.html
|
|
171
|
+
- _layouts/profile.html
|
|
132
172
|
- _sass/_highlight-syntax.scss
|
|
133
173
|
- _sass/_language-colors.scss
|
|
134
174
|
- _sass/_main.scss
|
|
@@ -136,7 +176,11 @@ files:
|
|
|
136
176
|
- assets/blog/index.html
|
|
137
177
|
- assets/css/style.scss
|
|
138
178
|
- assets/css/theme.scss
|
|
179
|
+
- assets/img/default.png
|
|
139
180
|
- assets/img/favicon.ico
|
|
181
|
+
- assets/js/anchor-links.js
|
|
182
|
+
- assets/js/theme-toggle.js
|
|
183
|
+
- assets/js/timeline.js
|
|
140
184
|
homepage: https://www.althack.dev/jekyll-theme-profile
|
|
141
185
|
licenses:
|
|
142
186
|
- MIT
|