jekyll-theme-profile 0.2.5 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: '09860fc508343380e572ecc20d95ebc3e859aebdd475bcfc831f0c02e4d9908d'
4
- data.tar.gz: efb7061682176adc3c3612999cbd256a0ec85ccd0bd3614334fa444277c2db1b
3
+ metadata.gz: a5af6258d0e45f7a3dcb7f8837553680f25c797d642adf3e6bf9b18ae942029d
4
+ data.tar.gz: 78d5515f20708044ad0299eeda68e08faba692e916a5d5b3e67935a2cb7e741e
5
5
  SHA512:
6
- metadata.gz: 81f5232bb3b2c523a609cf293f3d17419fc80db59bbc7b7aac9123a65467e06acac31be05667e8cc303825f5d5163dc5779b2308af88db65df43067543e2426f
7
- data.tar.gz: afb52edf1dda74ae93d0b28e1910abd4e3f2ca2c9cba34b81dce4909fab9f44e1118902414f67159581fd7025b9e0515189d22c5ce68a7a71fa1e6b2529cb348
6
+ metadata.gz: b3d80170c66f3650923f3c9cbd50b180e7b619b879e2a5469f6ca12727c040f61d73a8d3828910e5545991073f739783cbe5445b46a59978765b1f8eb80de8a8
7
+ data.tar.gz: 748240a5d98f5cc4a974c8cd6230d6938a5013f3b86876c839260dc11fd6c97d03b60df3cf9e321075041b05462b336df48b2c7e9314f539b00ab93243176635
data/README.md CHANGED
@@ -42,7 +42,12 @@ repository: athackst/jekyll-theme-profile # Your repository name
42
42
  url: https://username.github.io # The host url for your site
43
43
  baseurl: "" # or your package name /jekyll-theme-profile (leave blank if it is the username.github.io package)
44
44
  style: topbar # One of "stacked", "sidebar", "topbar"
45
- # image: /assets/img/user-image.jpg # If you don't want to use your github image, set a custom one here
45
+ # background: #(optional)
46
+ # image: /assets/img/background-img.jpg # The path/url to the image you want on the background
47
+ # light:
48
+ # overlay: rgba(255, 255, 255, 0.5) # Overlay for light theme
49
+ # dark:
50
+ # overlay: rgba(0, 0, 0, 0.5) # Overlay for dark theme
46
51
 
47
52
  links:
48
53
  # - name: Example full entry
@@ -71,23 +76,25 @@ repositories:
71
76
  # - respositories to exclude
72
77
 
73
78
  social_media:
74
- # behance: your_username
75
- # dribbble: your_username
76
- # docker: your_username
77
- # facebook: your_username
78
- # hackerrank: your_username
79
- # instagram: your_username
80
- # keybase: your_username
81
- # linkedin: your_username
82
- # mastodon: your_username
83
- # medium: your_username
84
- # stackoverflow: your_user_id
85
- # telegram: your_username
86
- # twitter: your_username
87
- # unsplash: your_username
88
- # vk: your_username
89
- # vscode: your_username
90
- # youtube: your_username
79
+ # behance: your_username
80
+ # dribbble: your_username
81
+ # docker: your_username
82
+ # facebook: your_username
83
+ # hackerrank: your_username
84
+ # instagram: your_username
85
+ # keybase: your_username
86
+ # linkedin: your_username
87
+ # mastodon: your_username
88
+ # medium: your_username
89
+ # stackoverflow: your_user_id
90
+ # telegram: your_username
91
+ # threads: your_username
92
+ # twitter: your_username
93
+ # unsplash: your_username
94
+ # vk: your_username
95
+ # vscode: your_username
96
+ # youtube: your_username
97
+ # x: your_username
91
98
 
92
99
  ```
93
100
 
@@ -208,6 +215,21 @@ style: sidebar # One of "stacked", "sidebar", "topbar"
208
215
 
209
216
  ![Topbar image](/assets/img/topbar-preview.png)
210
217
 
218
+ #### Background
219
+
220
+ You can even change the background by adding the following to your `_config.yml` file.
221
+
222
+ ```yaml
223
+ # background:
224
+ # image: /assets/img/background-img.jpg
225
+ # light:
226
+ # overlay: rgba(255, 255, 255, 0.5)
227
+ # dark:
228
+ # overlay: rgba(0, 0, 0, 0.5)
229
+ ```
230
+
231
+ [Example page](/test/page/background.md)
232
+
211
233
  ### Links
212
234
 
213
235
  In the `links` section, you can add links to showcase various pages on the web or your website.
@@ -270,11 +292,13 @@ social_media:
270
292
  medium: your_username
271
293
  stackoverflow: your_user_id
272
294
  telegram: your_username
295
+ threads: your_username
273
296
  twitter: your_username
274
297
  unsplash: your_username
275
298
  vk: your_username
276
299
  vscode: your_username
277
300
  youtube: your_username
301
+ x: your_username
278
302
  ```
279
303
 
280
304
  ### Blog
data/_config.yml CHANGED
@@ -2,6 +2,12 @@ repository: athackst/jekyll-theme-profile
2
2
  style: topbar # One of "stacked", "sidebar", "topbar"
3
3
  user_image: /assets/img/user-image.jpg
4
4
  image: /screenshot.png
5
+ # background:
6
+ # image: /assets/img/background-img.jpg
7
+ # light:
8
+ # overlay: rgba(255, 255, 255, 0.5)
9
+ # dark:
10
+ # overlay: rgba(0, 0, 0, 0.5)
5
11
 
6
12
  plugins:
7
13
  - jekyll-github-metadata
@@ -44,12 +50,15 @@ links:
44
50
  - name: Example page with topbar
45
51
  web_url: /test/page/topbar
46
52
  image_url: /assets/img/icon-topbar.png
47
- - name: Example page with sidebar/
53
+ - name: Example page with sidebar
48
54
  web_url: /test/page/sidebar
49
55
  image_url: /assets/img/icon-sidebar.png
50
56
  - name: Example page with header stacked
51
57
  web_url: /test/page/stacked
52
58
  image_url: /assets/img/icon-stacked.png
59
+ - name: Example page with a custom background
60
+ web_url: /test/page/background
61
+ image_url: /assets/img/icon-bg.png
53
62
 
54
63
  repositories:
55
64
  sort_by: stars
@@ -62,3 +71,24 @@ repositories:
62
71
  forks: true
63
72
  repositories:
64
73
  # - respositories to exclude
74
+
75
+ social_media:
76
+ # behance: your_username
77
+ # dribbble: your_username
78
+ # docker: your_username
79
+ # facebook: your_username
80
+ # hackerrank: your_username
81
+ # instagram: your_username
82
+ # keybase: your_username
83
+ # linkedin: your_username
84
+ # mastodon: your_username
85
+ # medium: your_username
86
+ # stackoverflow: your_user_id
87
+ # telegram: your_username
88
+ # threads: your_username
89
+ # twitter: your_username
90
+ # unsplash: your_username
91
+ # vk: your_username
92
+ # vscode: your_username
93
+ # youtube: your_username
94
+ # x: your_username
@@ -33,29 +33,38 @@
33
33
  {% assign page_image = user.avatar_url %}
34
34
  {%- endif %}
35
35
 
36
+ {%- if page.background_image %}
37
+ {%- assign bg_image = page.background_image %}
38
+ {%- elsif site.background.image %}
39
+ {%- assign bg_image = site.background.image %}
40
+ {%- endif %}
41
+
36
42
  <head>
37
43
  <meta charset="utf-8">
38
44
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
39
45
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
40
- <!-- HTML Meta Tags -->
41
- <title>{{ page_title }}</title>
42
- <meta name="description" content="{{ meta_description }}">
43
-
44
- <!-- Opengraph Meta Tags -->
45
- <meta property="og:url" content="{{ page_url | absolute_url }}">
46
- <meta property="og:type" content="website">
47
- <meta property="og:title" content="{{ page_title | absolute_url }}">
48
- <meta property="og:description" content="{{ meta_description }}">
49
- <meta property="og:image" content="{{ page_image | absolute_url }}">
50
-
51
- <!-- Twitter Meta Tags -->
52
- <meta name="twitter:card" content="summary_large_image">
53
- <meta property="twitter:domain" content="{{ site.url | replace: 'http://', '' | replace: 'https://', '' | replace: 'www.', '' }}">
54
- <meta property="twitter:url" content="{{ page_url | absolute_url }}">
55
- <meta name="twitter:title" content="{{ page_title }}">
56
- <meta name="twitter:description" content="{{ meta_description }}">
57
- <meta name="twitter:image" content="{{ page_image | absolute_url }}">
58
- {% if site.social_media.twitter %}<meta name="twitter:site" content="@{{ site.social_media.twitter }}">{% endif %}
46
+ <!-- HTML Meta Tags -->
47
+ <title>{{ page_title }}</title>
48
+ <meta name="description" content="{{ meta_description }}">
49
+
50
+ <!-- Opengraph Meta Tags -->
51
+ <meta property="og:url" content="{{ page_url | absolute_url }}">
52
+ <meta property="og:type" content="website">
53
+ <meta property="og:title" content="{{ page_title | absolute_url }}">
54
+ <meta property="og:description" content="{{ meta_description }}">
55
+ <meta property="og:image" content="{{ page_image | absolute_url }}">
56
+
57
+ <!-- Twitter Meta Tags -->
58
+ <meta name="twitter:card" content="summary_large_image">
59
+ <meta property="twitter:domain"
60
+ content="{{ site.url | replace: 'http://', '' | replace: 'https://', '' | replace: 'www.', '' }}">
61
+ <meta property="twitter:url" content="{{ page_url | absolute_url }}">
62
+ <meta name="twitter:title" content="{{ page_title }}">
63
+ <meta name="twitter:description" content="{{ meta_description }}">
64
+ <meta name="twitter:image" content="{{ page_image | absolute_url }}">
65
+ {%- if site.social_media.twitter %}
66
+ <meta name="twitter:site" content="@{{ site.social_media.twitter }}">
67
+ {%- endif %}
59
68
 
60
69
  <link href="{{ '/assets/css/style.css' | relative_url }}" rel="stylesheet" type="text/css">
61
70
  <link rel="icon" type="image/x-icon" href="{{ '/assets/img/favicon.ico' | relative_url}}">
@@ -157,4 +166,46 @@
157
166
  });
158
167
  </script>
159
168
 
169
+ {%- if bg_image %}
170
+ {%- if site.background.dark.overlay %}
171
+ {%- assign dark_overlay = site.background.dark.overlay %}
172
+ {%- else %}
173
+ {%- assign dark_overlay = 'rgba(34, 39, 46, 0.5)' %}
174
+ {%- endif %}
175
+ {%- if site.background.light.overlay %}
176
+ {%- assign light_overlay = site.background.light.overlay %}
177
+ {%- else %}
178
+ {%- assign light_overlay = 'rgba(255, 255, 255, 0.5)' %}
179
+ {%- endif %}
180
+ <style>
181
+ body {
182
+ position: relative;
183
+ background-image: url('{{ bg_image | relative_url }}');
184
+ background-size: cover;
185
+ background-repeat: no-repeat;
186
+ background-attachment: fixed;
187
+ z-index: -10;
188
+ }
189
+ /* Dark mode styles */
190
+ [data-color-mode='dark'] {
191
+ --overlay-color: {{ dark_overlay }};
192
+ }
193
+ @media(prefers-color-scheme: dark) {
194
+ [data-color-mode='auto'][data-dark-theme='dark_dimmed'] {
195
+ --overlay-color: {{ dark_overlay }};
196
+ }
197
+ }
198
+
199
+ /* Light mode styles */
200
+ [data-color-mode='light'] {
201
+ --overlay-color: {{ light_overlay }};
202
+ }
203
+
204
+ @media(prefers-color-scheme: light) {
205
+ [data-color-mode='auto'][data-light-theme='light'] {
206
+ --overlay-color: {{ light_overlay }};
207
+ }
208
+ }
209
+ </style>
210
+ {%- endif %}
160
211
  </head>
data/_includes/nav.html CHANGED
@@ -12,7 +12,7 @@
12
12
  </li>
13
13
  {%- continue %}
14
14
  {%- endif %}
15
- {%- assign asset_url = url | append: "assets/" | append: crumb | append: "/index.html" %}
15
+ {%- assign asset_url = url | append: "assets/" | append: crumb | append: "/" %}
16
16
  {%- assign isa_asset = site.pages | where: "url", asset_url | first %}
17
17
  {%- assign index_url = url | append: crumb | append: "/index.html" %}
18
18
  {%- assign isa_index = site.pages | where: "url", index_url | first %}
@@ -26,13 +26,15 @@
26
26
 
27
27
  {%- comment %}
28
28
  Checking the crumb: {{ crumb }}
29
- Checking crumb url: {{ index_url }}
29
+ [asset url: {{ asset_url }}]
30
+ [index url: {{ index_url }}]
31
+ [folder_url: {{ folder_url }}]
32
+ [url: {{ url }}]
30
33
  {% for p in site.pages %}
31
34
  {{ p.url }}
32
35
  {% endfor %}
33
36
  {%- endcomment %}
34
37
 
35
-
36
38
  {%- if page.url == url or page.url == index_url or page.url == folder_url %}
37
39
  <li class="breadcrumb-item breadcrumb-item-selected" aria-current="page">
38
40
  <a href="{{ page.url | relative_url }}">{{ nice_crumb }}</a>
@@ -1,7 +1,7 @@
1
1
  <div class="github-component d-flex flex-column flex-justify-between height-full text-left border border-gray-light rounded-1 p-3">
2
2
  <div>
3
3
  <div class="d-flex flex-justify-between flex-items-start mb-1">
4
- <h1 class="f4 lh-condensed mb-1">
4
+ <h1 class="f4 lh-condensed my-1">
5
5
  {% octicon repo height:20 class:"mr-1 v-align-middle" fill:"#586069" aria-label:repo %}
6
6
  <a href="{{repository.html_url}}">{{ repository.name }}</a>
7
7
  </h1>
@@ -17,7 +17,7 @@
17
17
 
18
18
  {%- for repository in filtered_repos | limit: site.repositories.limit %}
19
19
  {%- unless site.repositories.exclude.repositories contains repository.name %}
20
- <div class="col-sm-6 col-md-12 col-lg-6 col-xl-6 mb-3">
20
+ <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6 mb-3">
21
21
  {%- include repo-card.html %}
22
22
  </div>
23
23
  {%- endunless %}
@@ -97,6 +97,14 @@
97
97
  </div>
98
98
  {%- endif %}
99
99
 
100
+ {%- if site.social_media.threads %}
101
+ <div class="mr-3">
102
+ <a href="https://www.threads.net/@{{ site.social_media.threads }}" class="tooltipped tooltipped-se" aria-label="Threads: {{ site.social_media.threads }}">
103
+ <img src="/assets/brands/threads.svg" alt="threads" />
104
+ </a>
105
+ </div>
106
+ {%- endif %}
107
+
100
108
  {%- if site.social_media.twitter %}
101
109
  <div class="mr-3">
102
110
  <a href="https://www.twitter.com/{{ site.social_media.twitter }}" class="tooltipped tooltipped-se" aria-label="Twitter: {{ site.social_media.twitter }}">
@@ -129,6 +137,14 @@
129
137
  </div>
130
138
  {%- endif %}
131
139
 
140
+ {%- if site.social_media.x %}
141
+ <div class="mr-3">
142
+ <a href="https://www.x.com/{{ site.social_media.x }}" class="tooltipped tooltipped-se" aria-label="X: {{ site.social_media.x }}">
143
+ <img src="/assets/brands/x.svg" alt="x" />
144
+ </a>
145
+ </div>
146
+ {%- endif %}
147
+
132
148
  {%- if site.social_media.youtube %}
133
149
  <div class="mr-3">
134
150
  <a href="https://www.youtube.com/{{ site.social_media.youtube }}" class="tooltipped tooltipped-se" aria-label="YouTube: {{ site.social_media.youtube }}">
@@ -37,25 +37,27 @@
37
37
 
38
38
  {%- include header.html %}
39
39
 
40
- <body class="min-height-full">
40
+ <body class="min-height-full d-flex flex-column">
41
41
  {%- if style == 'stacked' %}
42
- <div class="container-lg p-responsive py-3">
42
+ <div class="container-lg p-responsive py-3 min-height-full">
43
43
  <div class="text-center">
44
44
  {%- include nav.html breadcrumbs=breadcrumbs %}
45
45
  {%- include masthead.html metadata=metadata %}
46
46
  </div>
47
- <div class="p-responsive mb-6 markdown-body">
48
- {{ content }}
47
+ <div class="d-flex">
48
+ <div class="p-responsive p-3 markdown-body color-bg-default">
49
+ {{ content }}
50
+ </div>
49
51
  </div>
50
52
  </div>
51
53
  {%- elsif style == 'sidebar' %}
52
- <div class="container-lg d-md-flex min-height-full border-md-bottom">
54
+ <div class="container-xl d-lg-flex min-height-full">
53
55
  <div
54
- class="flex-self-stretch border-gray-light px-4 py-6 text-center">
56
+ class="col-lg-4 border-gray-light px-4 py-6 text-center">
55
57
  {%- include masthead.html metadata=metadata %}
56
58
  </div>
57
- <div class="col-md-9 col-lg-8 border-top border-md-top-0 px-4 ">
58
- <div class="container-lg py-3 ml-0">
59
+ <div class="col-lg-8 border-top border-lg-top-0 px-4 color-bg-default">
60
+ <div class="py-3">
59
61
  {%- include nav.html breadcrumbs=breadcrumbs %}
60
62
  <div class="p-responsive mb-6 mt-3 markdown-body">
61
63
  {{ content }}
@@ -83,7 +85,7 @@
83
85
  </div>
84
86
  </div>
85
87
 
86
- <div class="container-lg py-3">
88
+ <div class="container-lg p-3 color-bg-default flex-1">
87
89
  {%- include nav.html breadcrumbs=breadcrumbs %}
88
90
  <div class="p-responsive mb-6 mt-3 markdown-body">
89
91
  {{ content }}
data/_sass/_main.scss CHANGED
@@ -29,7 +29,7 @@
29
29
 
30
30
  .img-masthead {
31
31
  aspect-ratio: 1 / 1;
32
- max-width: 260px;
32
+ max-width: 296px;
33
33
  overflow: hidden; /* Hide any overflow to maintain circle shape */
34
34
  display: flex; /* Use flexbox to center the image */
35
35
  justify-content: center; /* Center horizontally */
@@ -47,3 +47,15 @@
47
47
  .overflow-wrap-word {
48
48
  overflow-wrap: break-word;
49
49
  }
50
+
51
+
52
+ body::before {
53
+ content: "";
54
+ position: absolute;
55
+ top: 0;
56
+ right: 0;
57
+ bottom: 0;
58
+ left: 0;
59
+ z-index: -1;
60
+ background-color: var(--overlay-color); /* Use the --overlay-color variable here */
61
+ }
@@ -0,0 +1 @@
1
+ <svg height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192"><path d="M141.537 88.9883C140.71 88.5919 139.87 88.2104 139.019 87.8451C137.537 60.5382 122.616 44.905 97.5619 44.745C97.4484 44.7443 97.3355 44.7443 97.222 44.7443C82.2364 44.7443 69.7731 51.1409 62.102 62.7807L75.881 72.2328C81.6116 63.5383 90.6052 61.6848 97.2286 61.6848C97.3051 61.6848 97.3819 61.6848 97.4576 61.6855C105.707 61.7381 111.932 64.1366 115.961 68.814C118.893 72.2193 120.854 76.925 121.825 82.8638C114.511 81.6207 106.601 81.2385 98.145 81.7233C74.3247 83.0954 59.0111 96.9879 60.0396 116.292C60.5615 126.084 65.4397 134.508 73.775 140.011C80.8224 144.663 89.899 146.938 99.3323 146.423C111.79 145.74 121.563 140.987 128.381 132.296C133.559 125.696 136.834 117.143 138.28 106.366C144.217 109.949 148.617 114.664 151.047 120.332C155.179 129.967 155.42 145.8 142.501 158.708C131.182 170.016 117.576 174.908 97.0135 175.059C74.2042 174.89 56.9538 167.575 45.7381 153.317C35.2355 139.966 29.8077 120.682 29.6052 96C29.8077 71.3178 35.2355 52.0336 45.7381 38.6827C56.9538 24.4249 74.2039 17.11 97.0132 16.9405C119.988 17.1113 137.539 24.4614 149.184 38.788C154.894 45.8136 159.199 54.6488 162.037 64.9503L178.184 60.6422C174.744 47.9622 169.331 37.0357 161.965 27.974C147.036 9.60668 125.202 0.195148 97.0695 0H96.9569C68.8816 0.19447 47.2921 9.6418 32.7883 28.0793C19.8819 44.4864 13.2244 67.3157 13.0007 95.9325L13 96L13.0007 96.0675C13.2244 124.684 19.8819 147.514 32.7883 163.921C47.2921 182.358 68.8816 191.806 96.9569 192H97.0695C122.03 191.827 139.624 185.292 154.118 170.811C173.081 151.866 172.51 128.119 166.26 113.541C161.776 103.087 153.227 94.5962 141.537 88.9883ZM98.4405 129.507C88.0005 130.095 77.1544 125.409 76.6196 115.372C76.2232 107.93 81.9158 99.626 99.0812 98.6368C101.047 98.5234 102.976 98.468 104.871 98.468C111.106 98.468 116.939 99.0737 122.242 100.233C120.264 124.935 108.662 128.946 98.4405 129.507Z" fill="#959da5"/></svg>
@@ -0,0 +1,3 @@
1
+ <svg width="20" height="20" viewBox="0 0 1200 1227" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="#959da5" />
3
+ </svg>
Binary file
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: 0.2.5
4
+ version: 0.3.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-08-01 00:00:00.000000000 Z
11
+ date: 2023-08-10 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -143,14 +143,17 @@ files:
143
143
  - assets/brands/medium.svg
144
144
  - assets/brands/stackoverflow.svg
145
145
  - assets/brands/telegram.svg
146
+ - assets/brands/threads.svg
146
147
  - assets/brands/twitter.svg
147
148
  - assets/brands/unsplash.svg
148
149
  - assets/brands/vk.svg
149
150
  - assets/brands/vscode.svg
151
+ - assets/brands/x.svg
150
152
  - assets/brands/youtube.svg
151
153
  - assets/css/style.scss
152
154
  - assets/img/blog.png
153
155
  - assets/img/favicon.ico
156
+ - assets/img/icon-bg.png
154
157
  - assets/img/icon-sidebar.png
155
158
  - assets/img/icon-stacked.png
156
159
  - assets/img/icon-topbar.png