jekyll-theme-profile 1.3.1 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|