jek 0.0.2 → 0.0.3

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.
Files changed (19) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +33 -87
  3. data/_config.yml +5 -1
  4. data/_includes/controls.html +6 -5
  5. data/_includes/head.html +40 -10
  6. data/_includes/read_time.html +9 -0
  7. data/_includes/settings_table.html +41 -0
  8. data/_includes/share_table.html +11 -0
  9. data/_layouts/blog.html +24 -10
  10. data/_layouts/default.html +1 -1
  11. data/_layouts/post.html +17 -3
  12. data/assets/css/main.css +85 -15
  13. data/assets/img/readme/jek.gif +0 -0
  14. data/assets/img/readme/jek.mp4 +0 -0
  15. data/assets/img/readme/user.svg +1 -0
  16. data/assets/js/keyInput.js +2 -2
  17. data/assets/js/scrollTop.js +21 -0
  18. data/assets/js/themeToggle.js +84 -64
  19. metadata +8 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e7b347282a145e10aab3fef78217a5d5a5c5af1d2e434d431a163fa41545fd90
4
- data.tar.gz: 2f2af07a481e9f2d16c8d949eb40841fc8456b86c6081e3db90d69a96fce61f8
3
+ metadata.gz: f89305e65ee3edcff6d860959f4cb0767442307052c634418458160f715fc2ee
4
+ data.tar.gz: e90b580d2e60b49acb9f13bffbe83995579d6960a7b827554e689c087312c197
5
5
  SHA512:
6
- metadata.gz: bf5c40fa71c4deed2a07c6c990799c234d0277223e43d6b10e7319078678003d9f7d0a4a51baadf19af6d22b701eb25416e4299cfc4a52931d2cc3cc434caefe
7
- data.tar.gz: 9c80578ba33edc9009aa108d539f4379efa90201472f20f96391d993bcdc273c5dad14b5e7e46949061a16981ebbbf99b314f8f1c597bc23579649eb6152cea9
6
+ metadata.gz: 93583787b08ca513b4b3425d93788d773111ec11d413f2005f2eeb3ab9b6b143141a85f1f832f6193204d33be1d76268177d3a72f1c3cfb1d36a54e0ae632b9e
7
+ data.tar.gz: 71904f0c3ddf08f62d8fdff30f3ca6649752973c3c39735441841ac9142d3b10ac173e06c04bf5127fef744ebc4785138717a0e0383f4deeac4f932226d1e822
data/README.md CHANGED
@@ -8,107 +8,53 @@
8
8
  ░░░░░╚█████╔╝███████╗██║░╚██╗░░░░░░░░░
9
9
  ░░░░░░╚════╝░╚══════╝╚═╝░░╚═╝░░░░░░░░░
10
10
  ░░░░░░░░░░░░░ by Tyler Butler ░░░░░░░░
11
- ```
11
+ ```
12
12
 
13
- [![Netlify Status](https://api.netlify.com/api/v1/badges/9d1f745e-c8d9-4732-ab34-06748d61e84d/deploy-status)](https://app.netlify.com/sites/jekyll-jek/deploys) [![Gem Version](https://badge.fury.io/rb/jek.svg)](https://badge.fury.io/rb/jek)
13
+ [![Netlify Status](https://api.netlify.com/api/v1/badges/9d1f745e-c8d9-4732-ab34-06748d61e84d/deploy-status)](https://app.netlify.com/sites/jekyll-jek/deploys)
14
+ [![Gem Version](https://badge.fury.io/rb/jek.svg)](https://badge.fury.io/rb/jek)
15
+ [![Made with Jekyll](https://img.shields.io/badge/jekyll-4-blue?logo=jekyll)](https://jekyllrb.com)
14
16
 
15
17
 
18
+ Jek is a minimalist Jekyll theme putting the power of color schemes in the user's hands. Toggle between schemes hassle-free, create new ones on the go, and store settings in-browser.
16
19
 
20
+ Check out the [Demo site](https://jekyll-jek.netlify.app/), deployed and hosted on [Netlify](https://www.netlify.com/).
17
21
 
18
- > Jek is a minimalist jekyll theme putting the power of color schemes in the user's hands. Toggle between schemes hassle-free, create new one's on the go, and store settings in-browser.
22
+ _Warning - this theme requires Jekyll 4 and so will **not** work on GitHub Pages (with Jekyll 3), unless you add a custom CI flow using GitHub Actions._
19
23
 
20
- ### 🛠️ Installation
21
24
 
22
- To install Jek, you can use the [ruby gem](https://rubygems.org/gems/jek) or clone the [github repository](https://github.com/tcbutler320/jek).
25
+ ## ⚡ Features
23
26
 
24
- *Install from Gem*
27
+ + [x] toggle light/dark
28
+ + [x] choose random theme
29
+ + [x] save current theme for next visit
30
+ + [x] open/close settings
31
+ + [x] clear settings
25
32
 
26
- 1) Create a new jekyll project
33
+ ## 💡 All About The Theme
27
34
 
28
- `jekyll new myJekTheme`
35
+ Theme settings are saved in [session](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) and [local](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) storage. Toggling light/dark mode or choosing a random palette saves settings for only the current session. Clicking the save button adds the theme to local storage for future visits.
29
36
 
30
- 2) Change default `minima` theme to `jek`
31
-
32
- ```text
33
- # Build settings
34
- theme: jek
35
- ```
36
-
37
-
38
- 3) Change `gemfile` to the following
39
-
40
- ```text
41
- source "https://rubygems.org"
42
-
43
- gem "jekyll"
44
- gem "jekyll-feed"
45
- gem "jek"
46
- ```
47
-
48
- 4) Install gem
49
-
50
- `bundle install`
51
-
52
- ### ⚡ Features
53
-
54
- *Client Side Themes*
55
- + [x] toggle between dark/light mode by clicking the moon
56
- + [x] choose a random theme by clicking the pallet
57
- + [x] save current theme by clicking the astronaut
58
-
59
- *Site Content*
60
- + [x] About me
61
- + [x] Blog posts
62
- + [x] Socials
63
-
64
-
65
- ### 🚧 Roadmap
66
- *Features in the work*
67
- + [ ] Integration with firebase for user login
68
- + [ ] bug fixes in theme changes (current issues prevent smooth transitions)
69
- + [ ] add custom themes on the fly via pop-up modal
70
- + [ ] key bindings for quick feature access
71
-
72
-
73
-
74
-
75
- ### 💡 All About The Theme
76
-
77
- Theme settings are saved in [session](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) and [local](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) storage. Toggling light/dark mode or choosing a random pallet saves settings for only the current session. Clicking the save button adds the theme to local storage for future visits.
78
-
79
- ### 👩‍🚀 Add New Themes
80
-
81
- Adding new themes to your new `jek` site could not be easier, just pick a background color and text color and add them to `main.css`. Once your done, add your theme to `_data/themes.yaml`. Check out [colorhunt](https://colorhunt.co/) for inspiration.
82
-
83
-
84
- 1) add a new scheme to main.css with a `background-color` and `color`.
85
-
86
- ```
87
- .mytheme {
88
- background-color: #0a1d37;
89
- color: #ffeedb;
90
- }
91
- ```
92
-
93
- 2) Add color scheme name to _data/themes.yaml
94
-
95
- ```yaml
96
- - name: mytheme
97
- enabled: true
98
- ```
99
-
100
- ### 🌈 Default Themes
101
-
102
- Below is the current themes that come pre-configured with jek, more comming soon!
37
+ ## 🍭 Default Themes
103
38
 
104
- **dark**
39
+ ![Demo video](/assets/img/readme/jek.gif)
105
40
 
106
- ![](/assets/img/readme/preview-dark.png)
41
+ ## 👩‍🚀 Add New Themes
107
42
 
108
- **sunset**
43
+ Adding new themes to your new jek site could not be easier. Just pick a background color and text color and add them to your `main.css`. Once you're done, add your theme to `_data/themes.yaml`. Check out [colorhunt](https://colorhunt.co/) for inspiration.
109
44
 
110
- ![](/assets/img/readme/preview-sunset.png)
45
+ 1. Add a new scheme to your `main.css` with `background-color` and `color` set.
46
+ ```css
47
+ .mytheme {
48
+ background-color: #0a1d37;
49
+ color: #ffeedb;
50
+ }
51
+ ```
52
+ 2. Add a color scheme name to your `_data/themes.yaml`.
53
+ ```yaml
54
+ - name: mytheme
55
+ enabled: true
56
+ ```
111
57
 
112
- **dragos**
58
+ ## License
113
59
 
114
- ![](/assets/img/readme/preview-dragos.png)
60
+ Licensed under [MIT](/LICENSE.txt) by [@tcbutler320](https://github.com/tcbutler320).
data/_config.yml CHANGED
@@ -5,7 +5,7 @@ description: >- # this means to ignore newlines until "baseurl:"
5
5
  line in _config.yml. It will appear in your document head meta (for
6
6
  Google search results) and in your feed.xml site description.
7
7
  baseurl: "" # the subpath of your site, e.g. /blog
8
- url: "" # the base hostname & protocol for your site, e.g. http://example.com
8
+ url: "http://localhost:4000" # the base hostname & protocol for your site, e.g. http://example.com
9
9
  twitter: tbutler0x90
10
10
  github: tcbutler320
11
11
  mail: developer.tbutler@gmail.com
@@ -29,6 +29,10 @@ plugins:
29
29
  - jekyll-feed
30
30
 
31
31
 
32
+ paginate: 5
33
+
34
+
35
+
32
36
 
33
37
 
34
38
 
data/_includes/controls.html CHANGED
@@ -1,13 +1,14 @@
1
1
  <div class="nav">
2
2
  <p style="text-align:right;">
3
- <i class="far fa-moon fa-lg zoom" onclick="darkMode();"></i>
4
- <i class="fas fa-palette fa-lg zoom" onclick="changeTheme();"></i>
3
+ <i class="far fa-moon fa-lg zoom" onclick="darkMode();"></i>
4
+ <i class="fas fa-palette fa-lg zoom" onclick="changeTheme();"></i>
5
5
  <i class="fas fa-user-astronaut fa-lg zoom" onclick="saveFavorite();"></i>
6
- <i class="fas fa-sync-alt fa-lg zoom" onclick="reload();"></i>
6
+ <i class="fas fa-cogs fa-lg zoom" onclick="toggleSettings();"></i>
7
+ <i class="fas fa-sign-out-alt fa-lg zoom" onclick="clearSettings();"></i>
7
8
  <br>
8
- <span id="whatHappened" style="font-size:1rem;"></span>
9
+ <small><span id="whatHappened"></span></small>
10
+ {% include settings_table.html %}
9
11
  </p>
10
-
11
12
  <!-- The Modal -->
12
13
  <div id="myModal" class="modal">
13
14
 
data/_includes/head.html CHANGED
@@ -1,11 +1,9 @@
1
1
  <head>
2
2
  <meta charset="UTF-8">
3
3
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
4
- <link rel="stylesheet" href="/assets/css/main.css">
5
- <script src="https://kit.fontawesome.com/32a2b2a489.js" crossorigin="anonymous"></script>
6
- <script src="/assets/js/themeToggle.js"></script>
7
- <script src="/assets/js/toolTip.js"></script>
8
- <script src="/assets/js/keyInput.js"></script>
4
+ <title>{{ page.title | default: site.title }}</title>
5
+ <meta name="description" content="{{ page.description | default: site.description }}">
6
+
9
7
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
10
8
  <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon/favicon-32x32.png">
11
9
  <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon/favicon-16x16.png">
@@ -13,12 +11,44 @@
13
11
  <link rel="mask-icon" href="/assets/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
14
12
  <meta name="msapplication-TileColor" content="#da532c">
15
13
  <meta name="theme-color" content="#ffffff">
16
- <title>~ jek ~</title>
14
+
15
+ <link rel="stylesheet" href="{% link /assets/css/main.css %}">
16
+
17
+ <script src="https://kit.fontawesome.com/32a2b2a489.js" crossorigin="anonymous"></script>
18
+
19
+ <script src="{% link /assets/js/themeToggle.js %}"></script>
20
+ <script src="{% link /assets/js/toolTip.js %}"></script>
21
+ <script src="{% link /assets/js/keyInput.js %}"></script>
22
+
17
23
  <script>
18
- window.addEventListener('load', (event) => {
19
- console.log('[DEBUG] page is fully loaded');
20
- console.log('[DEBUG] checking storage options');
24
+ window.addEventListener('load', (event) => {
25
+ console.debug('[DEBUG] page loaded, checking storage');
21
26
  checkStorage();
27
+
28
+ if (localStorage.theme){
29
+ document.getElementById('settingtbl-theme').innerHTML = localStorage.theme;
30
+ } else if (sessionStorage.theme){
31
+ document.getElementById('settingtbl-theme').innerHTML = sessionStorage.theme;
32
+ }
33
+
34
+ if (localStorage.theme){
35
+ document.getElementById('whatHappened').innerHTML = 'theme: ' + localStorage.theme;
36
+ }
37
+ else if (sessionStorage.theme){
38
+ document.getElementById('whatHappened').innerHTML = 'theme: ' + sessionStorage.theme;
39
+ } else {
40
+ document.getElementById('whatHappened').innerHTML = 'theme: light';
41
+ }
22
42
  });
23
43
  </script>
24
- </head>
44
+
45
+ <script>
46
+ function myFunction() {
47
+ var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
48
+ var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
49
+ var scrolled = (winScroll / height) * 100;
50
+
51
+ document.getElementById("myBar").style.width = scrolled + "%";
52
+ }
53
+ </script>
54
+ </head>
data/_includes/read_time.html ADDED
@@ -0,0 +1,9 @@
1
+ <span class="reading-time" title="Estimated read time">
2
+ {% assign words = content | number_of_words %}
3
+ reading time
4
+ {% if words < 360 %}
5
+ 1 min
6
+ {% else %}
7
+ {{ words | divided_by:180 }} mins
8
+ {% endif %}
9
+ </span>
data/_includes/settings_table.html ADDED
@@ -0,0 +1,41 @@
1
+ <div id="myTable" style="display: none;">
2
+ <table>
3
+ <tr>
4
+ <th>themes</th>
5
+ </tr>
6
+ {% for theme in site.data.themes %}
7
+ <tr>
8
+ <td style="text-align: center;" class="{{theme.name}}"onclick="setSpeceficPallet('{{theme.name}}');">{{theme.name}}</td>
9
+ </tr>
10
+ {% endfor%}
11
+ </table>
12
+
13
+ <br>
14
+
15
+ <table>
16
+ <tr>
17
+ <th>user options</th>
18
+ <th>button</th>
19
+ </tr>
20
+ <tr>
21
+ <td>toggle light/dark mode</td>
22
+ <td style="text-align: center;"><i class="far fa-moon "></i></td>
23
+ </tr>
24
+ <tr>
25
+ <td>choose random theme with</td>
26
+ <td style="text-align: center;"><i class="fas fa-palette "></i> </td>
27
+ </tr>
28
+ <tr>
29
+ <td>save current theme for next visit</td>
30
+ <td style="text-align: center;"><i class="fas fa-user-astronaut "></i> </td>
31
+ </tr>
32
+ <tr>
33
+ <td>open/close settings</td>
34
+ <td style="text-align: center;"><i class="fas fa-cogs "></i></td>
35
+ </tr>
36
+ <tr>
37
+ <td>clear settings</td>
38
+ <td style="text-align: center;"><i class="fas fa-sign-out-alt "></i></td>
39
+ </tr>
40
+ </table>
41
+ </div>
data/_includes/share_table.html ADDED
@@ -0,0 +1,11 @@
1
+ <div id="clickToShare" style="display: block;">
2
+ {% if site.twitter %}
3
+ <td style="text-align: center;"><a style="color:inherit" href="http://twitter.com/share?text={{ page.title }}&url={{ site.url | append: page.url }}"><i class="fab fa-twitter zoom"></i></a></td>
4
+ {% endif %}
5
+ {% if site.linkedin %}
6
+ <td style="text-align: center;"><a style="color:inherit" href="https://www.linkedin.com/shareArticle?mini=true&url={{ site.url | append: page.url | url_encode }}&title={{ page.title | url_encode }}&summary={{ page.description | url_encode }}&source={{ site.title | url_encode }}"><i class="fab fa-linkedin-in zoom"></i></a></td>
7
+ {% endif %}
8
+ {% if site.mail %}
9
+ <td style="text-align: center;"><a style="color:inherit" href="mailto:{{site.mail}}"><i class="fas fa-envelope zoom"></i></a></td>
10
+ {% endif %}
11
+ </div>
data/_layouts/blog.html CHANGED
@@ -7,16 +7,30 @@
7
7
  {% include controls.html %}
8
8
  <p style="font-size: 20px;"><a href="/">Home</a> / Blog /</p>
9
9
  <div>
10
- {% for post in site.posts%}
11
- <div style="line-height:14px;height:14px; border-bottom:2px dotted;">
12
- <p style="text-align:left;">
13
- <a href="{{post.url}}" style="text-decoration: none;">{{post.title}}</a>
14
- <span style="float:right;">
15
- {{post.date|date:'%B %d, %Y'}}
16
- </span>
17
- </p>
18
- </div>
19
- {% endfor %}
10
+ <div id="archives">
11
+ {% for category in site.categories %}
12
+ <div class="archive-group">
13
+ {% capture category_name %}{{ category | first }}{% endcapture %}
14
+ <div id="#{{ category_name | slugize }}"></div>
15
+ <h3 class="category-head">
16
+ {{ category_name }}
17
+ </h3>
18
+ <a name="{{ category_name | slugize }}"></a>
19
+ {% for post in site.categories[category_name] %}
20
+ <article class="archive-item">
21
+ <div style="line-height:14px;height:14px; border-bottom:2px dotted;">
22
+ <p style="text-align:left;">
23
+ <a style="text-decoration: none;" href="{{ site.baseurl }}{{ post.url }}">{{post.title}}</a>
24
+ <span style="float:right;">
25
+ {{post.date|date:'%B %d, %Y'}}
26
+ </span>
27
+ </p>
28
+ </div>
29
+ </article>
30
+ {% endfor %}
31
+ </div>
32
+ {% endfor %}
33
+ </div>
20
34
  </div>
21
35
  <footer style="position:fixed;bottom:5px;">
22
36
  <p style="text-align:left;">
data/_layouts/default.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
3
  {% include head.html %}
4
- <body onload="checkFav();">
4
+ <body>
5
5
  <div class="nav">
6
6
  <p style="text-align: right;">
7
7
  <i class="fas fa-palette zoom tooltip" onclick="changeTheme();"></i>
data/_layouts/post.html CHANGED
@@ -2,6 +2,7 @@
2
2
  <html lang="en">
3
3
  {% include head.html %}
4
4
  <body>
5
+ <div class="sticky-top progress-bar" id="myBar"></div>
5
6
  {% include sidebar.html %}
6
7
  <div class="center">
7
8
  <div>
@@ -10,11 +11,24 @@
10
11
  <a href="/">Home</a> / <a href="/blog">Blog</a> / {{page.title}}
11
12
  </p>
12
13
  <p style="text-align:left;">
13
- <i>{{page.author}}, {{page.date | date: '%B %d %Y'}}</i>
14
- </p>
14
+ <i>{{page.author}}, {{page.date | date: '%B %d %Y'}} {% include share_table.html %}</p>
15
15
  <div>
16
16
  {{ content }}
17
17
  </div>
18
18
  {% include footer.html %}
19
+ <script>
20
+ window.addEventListener('scroll', (event) => {
21
+ myFunction();
22
+ });
23
+ </script>
24
+ <script>
25
+ function myFunction() {
26
+ var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
27
+ var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
28
+ var scrolled = (winScroll / height) * 100;
29
+ document.getElementById("myBar").style.width = scrolled + "%";
30
+ }
31
+ </script>
19
32
  </body>
20
- </html>
33
+ </html>
34
+
data/assets/css/main.css CHANGED
@@ -66,15 +66,38 @@ and (min-device-width : 768px) {
66
66
  }
67
67
 
68
68
  /* Theme List */
69
- light{
69
+ .light{
70
70
  color: black;
71
- background-color: transparent;
71
+ background-color: white;
72
+ }
73
+
74
+ .light blockquote {
75
+ margin: 0;
76
+ padding-left: 1.4rem;
77
+ border-left: 2px solid black;
72
78
  }
73
79
 
74
- .dark {
80
+ .dark {
75
81
  color: white;
76
82
  background-color: black;
77
83
  }
84
+
85
+ /* this must be done for certain themes to see table lines */
86
+ .dark th, td {
87
+ border:1px solid white;
88
+ }
89
+
90
+ .dark a {
91
+ color: white;
92
+ }
93
+
94
+ .dark blockquote {
95
+ margin: 0;
96
+ padding-left: 1.4rem;
97
+ border-left: 2px solid white;
98
+ }
99
+
100
+
78
101
  .dragos {
79
102
  color:#d2fafb;
80
103
  background-color: #2c003e;
@@ -96,6 +119,42 @@ light{
96
119
  color: #FFC074;
97
120
  }
98
121
 
122
+ .sandcastle {
123
+ background-color: #F7F3E9;
124
+ color: black;
125
+ }
126
+
127
+ .greenturtle {
128
+ background-color: #314E52;
129
+ color: #F7F6E7;
130
+ }
131
+
132
+ .dunes {
133
+ background-color: #FCF8E8;
134
+ color: #DF7861;
135
+ accent: #D4E2D4;
136
+ }
137
+
138
+ .arctic {
139
+ background-color: #E8E8E8;
140
+ color: #495464;
141
+ }
142
+
143
+ .marsian {
144
+ background-color: #EBD4D4;
145
+ color: #463333;
146
+ }
147
+
148
+ .bumble {
149
+ background-color: #0A1931;
150
+ color: #FFC947;
151
+ }
152
+
153
+
154
+ .pinkapple {
155
+ background-color: #FFBBCC;
156
+ color: #99154E;
157
+ }
99
158
 
100
159
  /* The Modal (background) */
101
160
  .modal {
@@ -152,18 +211,16 @@ light{
152
211
  }
153
212
 
154
213
 
214
+ code{
215
+ display: block;
216
+ overflow-x: auto;
217
+ }
218
+
155
219
  table{
156
220
  border-collapse: collapse;
157
221
  border-spacing: 0;
158
- border:1px solid black;
159
- }
160
-
161
- th{
162
- border:1px solid black;
163
- }
164
-
165
- td{
166
- border:1px solid black;
222
+ display: block;
223
+ overflow-x: auto;
167
224
  }
168
225
 
169
226
 
@@ -206,12 +263,25 @@ td{
206
263
  }
207
264
 
208
265
 
209
- blockquote {
210
-
266
+
267
+ /* The progress bar (scroll indicator) */
268
+ .progress-bar {
269
+ position: fixed;
270
+ top: 0%;
271
+ left: 0%;
272
+ height: 6px;
273
+ background: hotpink;
274
+ width: 0%;
275
+ }
276
+
277
+ .theme-options {
278
+ border-radius: 5px;
279
+ margin-top: 5px;
280
+ margin-bottom: 5px;
211
281
  }
212
282
 
213
283
  blockquote {
214
284
  margin: 0;
215
285
  padding-left: 1.4rem;
216
- border-left: 2px solid hotpink;
286
+ border-left: 2px solid black;
217
287
  }
data/assets/img/readme/jek.gif CHANGED
Binary file
data/assets/img/readme/jek.mp4 ADDED
Binary file
data/assets/img/readme/user.svg ADDED
@@ -0,0 +1 @@
1
+ <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-astronaut" class="svg-inline--fa fa-user-astronaut fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M64 224h13.5c24.7 56.5 80.9 96 146.5 96s121.8-39.5 146.5-96H384c8.8 0 16-7.2 16-16v-96c0-8.8-7.2-16-16-16h-13.5C345.8 39.5 289.6 0 224 0S102.2 39.5 77.5 96H64c-8.8 0-16 7.2-16 16v96c0 8.8 7.2 16 16 16zm40-88c0-22.1 21.5-40 48-40h144c26.5 0 48 17.9 48 40v24c0 53-43 96-96 96h-48c-53 0-96-43-96-96v-24zm72 72l12-36 36-12-36-12-12-36-12 36-36 12 36 12 12 36zm151.6 113.4C297.7 340.7 262.2 352 224 352s-73.7-11.3-103.6-30.6C52.9 328.5 0 385 0 454.4v9.6c0 26.5 21.5 48 48 48h80v-64c0-17.7 14.3-32 32-32h128c17.7 0 32 14.3 32 32v64h80c26.5 0 48-21.5 48-48v-9.6c0-69.4-52.9-125.9-120.4-133zM272 448c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16zm-96 0c-8.8 0-16 7.2-16 16v48h32v-48c0-8.8-7.2-16-16-16z"></path></svg>
data/assets/js/keyInput.js CHANGED
@@ -5,6 +5,6 @@ document.addEventListener('keydown', (event) => {
5
5
 
6
6
  /* use https://keycode.info/ */
7
7
  if (code = 'Escape') {
8
- modal.style.display = "block";
9
- }
8
+ toggleSettings();
9
+ }
10
10
  }, false);
data/assets/js/scrollTop.js ADDED
@@ -0,0 +1,21 @@
1
+ //Get the button:
2
+ mybutton = document.getElementById("myBtn");
3
+
4
+ // When the user scrolls down 20px from the top of the document, show the button
5
+ window.onscroll = function() {scrollFunction()};
6
+
7
+ function scrollFunction() {
8
+ if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
9
+ alert('yes');
10
+ mybutton.style.display = "block";
11
+ } else {
12
+ mybutton.style.display = "none";
13
+ alert('yes');
14
+ }
15
+ }
16
+
17
+ // When the user clicks on the button, scroll to the top of the document
18
+ function topFunction() {
19
+ document.body.scrollTop = 0; // For Safari
20
+ document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
21
+ }
data/assets/js/themeToggle.js CHANGED
@@ -1,55 +1,55 @@
1
- let i = 0;
1
+ var i = 3;
2
2
 
3
3
  function changeTheme() {
4
4
  theme = themes[i];
5
- let sessTheme = sessionStorage.getItem('theme');
6
5
  if (i < themes.length) {
7
- if (sessTheme) {
8
- sessionStorage.removeItem('theme');
9
- sessionStorage.setItem('theme', theme);
10
- i++;
11
- sessionStorage.setItem('theme', theme);
12
- i++;
13
- }
14
- checkStorage();
6
+ sessionStorage.theme = theme;
7
+ console.log('[DEBUG changeTheme] random theme changed to: ' + theme);
8
+ document.body.classList.toggle(sessionStorage.theme);
9
+ document.getElementById('whatHappened').innerHTML = 'theme: ' + sessionStorage.theme;
10
+ document.getElementById('settingtbl-theme').innerHTML = 'theme: ' + sessionStorage.theme;
11
+ i++;
15
12
  } else {
16
- i = 0;
13
+ i = 3;
14
+ console.log('[DEBUG changeTheme] random theme changed to: ' + theme);
15
+ document.body.classList.toggle(sessionStorage.theme);
16
+ document.getElementById('whatHappened').innerHTML = 'theme: ' + sessionStorage.theme;
17
+ document.getElementById('settingtbl-theme').innerHTML = sessionStorage.theme;
18
+
17
19
  }
18
20
  }
19
21
 
20
22
  function darkMode() {
21
- console.log('[DEBUG]{darkmode} user clicked darkMode toggles');
22
- var sessTheme = sessionStorage.getItem('theme');
23
- console.log('[DEBUG]{darkmode} sessionStorage value: ' + sessTheme);
24
- if (sessTheme == 'light') {
25
- console.log('[DEBUG]{darkmode} added dark to session storage');
26
- sessionStorage.removeItem('theme');
27
- sessionStorage.setItem('theme', 'dark');
28
- } else if (sessTheme == 'dark') {
29
- console.log('[DEBUG]{darkmode} added light to session storage');
30
- sessionStorage.removeItem('theme');
31
- sessionStorage.setItem('theme', 'light');
32
- } else if (sessTheme === null) {
33
- console.log('[DEBUG]{darkmode} null, added light to session storage');
34
- sessionStorage.removeItem('theme');
35
- sessionStorage.setItem('theme', 'dark');
23
+ console.log('[DEBUG darkMode] user clicked darkMode');
24
+ if (sessionStorage.theme == 'light') {
25
+ console.log('[DEBUG] setting sessionStorage.theme to dark');
26
+ sessionStorage.theme = 'dark';
27
+ document.body.classList.toggle(sessionStorage.theme);
28
+ location.reload();
29
+ } else if (sessionStorage.theme == 'dark') {
30
+ console.log('[DEBUG] setting sessionStorage.theme to light');
31
+ sessionStorage.theme = 'light';
32
+ document.body.classList.toggle(sessionStorage.theme);
33
+ location.reload();
34
+ } else {
35
+ console.log('[DEBUG] null, added dark to session storage');
36
+ sessionStorage.theme = 'dark';
37
+ document.body.classList.toggle(sessionStorage.theme);
36
38
  }
37
- checkStorage();
39
+ }
40
+
41
+
42
+ function clearSettings() {
43
+ sessionStorage.clear();
44
+ localStorage.clear();
45
+ console.log('[DEBUG] settings cleared');
46
+ document.getElementById('whatHappened').innerHTML = 'settings cleared';
47
+ location.reload();
38
48
  }
39
49
 
40
50
  function saveFavorite() {
41
- let locTheme = localStorage.getItem('theme');
42
- let sessTheme = sessionStorage.getItem('theme');
43
- if ((sessTheme) && !(locTheme)) {
44
- localStorage.setItem('theme', sessTheme );
45
- console.log('setting favorite theme');
46
- } else if ((sessTheme) && (locTheme)) {
47
- console.log('remove old favorite theme');
48
- console.log('setting favorite theme');
49
- sessionStorage.removeItem('theme');
50
- localStorage.setItem('theme', sessTheme );
51
- }
52
- checkStorage();
51
+ localStorage.theme = sessionStorage.theme;
52
+ document.body.classList.toggle(localStorage.theme);
53
53
  }
54
54
 
55
55
 
@@ -74,10 +74,6 @@ function hoverTheme(opt) {
74
74
 
75
75
  }
76
76
 
77
- function reload(){
78
- location.reload();
79
- }
80
-
81
77
  /* set custom themes using session storage */
82
78
  function setCustomBackground() {
83
79
  console.log('[DEBUG] custom backround entered');
@@ -123,27 +119,51 @@ function setCustomTheme() {
123
119
  }
124
120
 
125
121
  function checkStorage(){
126
- console.log('[DEBUG] now in checkStorage');
127
-
128
- let locTheme = localStorage.getItem('theme');
129
- let customTheme = localStorage.getItem('customTheme');
130
- let sessTheme = sessionStorage.getItem('theme');
131
-
132
- if (customTheme) {
133
- document.body.classList.toggle(customTheme);
134
- document.getElementById('whatHappened').innerHTML = 'theme: ' + customTheme;
135
- console.log('[DEBUG] custom theme set');
136
- } else if (locTheme) {
137
- document.body.classList.toggle(locTheme);
138
- document.getElementById('whatHappened').innerHTML = 'theme: ' + locTheme;
139
- console.log('[DEBUG] local theme set: ' + locTheme);
140
- } else if (sessTheme) {
141
- document.body.classList.toggle(sessTheme);
142
- document.getElementById('whatHappened').innerHTML = 'theme: ' + sessTheme;
143
- console.log('[DEBUG] session theme set: ' + sessTheme);
122
+ console.log('[DEBUG checkStorage] starting checkStorage()');
123
+ if (localStorage.customTheme) {
124
+ document.body.classList.toggle(localStorage.customTheme);
125
+ document.getElementById('whatHappened').innerHTML = 'theme: ' + localStorage.customTheme;
126
+ console.log('[DEBUG checkStorage] custom theme set');
127
+ } else if (localStorage.theme) {
128
+ document.body.classList.toggle(localStorage.theme);
129
+ document.getElementById('whatHappened').innerHTML = 'theme: ' + localStorage.theme;
130
+ console.log('[DEBUG checkStorage] local theme set: ' + localStorage.theme);
131
+ } else if (sessionStorage.theme) {
132
+ document.body.classList.toggle(sessionStorage.theme);
133
+ document.getElementById('whatHappened').innerHTML = 'theme: ' + sessionStorage.theme;
134
+ console.log('[DEBUG checkStorage] session theme set: ' + sessionStorage.theme);
135
+ }
136
+ }
137
+
138
+ function settings() {
139
+ console.log('[DEBUG][settings] user opened settings');
140
+ }
141
+
142
+ function toggleSettings() {
143
+ var x = document.getElementById("myTable");
144
+ if (x.style.display === "none") {
145
+ x.style.display = "block";
144
146
  } else {
145
- document.body.classList.toggle('light');
146
- document.getElementById('whatHappened').innerHTML = 'theme: light';
147
- console.log('[DEBUG] no theme set: going light');
147
+ x.style.display = "none";
148
148
  }
149
+ }
150
+
151
+
152
+ function setSpeceficPallet(foo){
153
+ sessionStorage.theme = foo;
154
+ console.log('[DEBUG] setting sessionStorage.theme to: ' + foo);
155
+ document.body.classList.toggle(sessionStorage.theme);
156
+ closeSettings();
157
+ }
158
+
159
+ function closeSettings() {
160
+ var x = document.getElementById("myTable");
161
+ if (x.style.display === "block") {
162
+ x.style.display = "none";
163
+ }
164
+ }
165
+
166
+
167
+ function clickToShare() {
168
+ document.getElementById('clickToShare').innerHTML = "<table><tbody><tr><td style=\"text-align: center;\"><a style=\"color:inherit\" href=\"https://twitter.com/tbutler0x90\"><i class=\"fab fa-twitter zoom\" aria-hidden=\"true\"></i></a></td><td style=\"text-align: center;\"><a style=\"color:inherit\" href=\"https://www.linkedin.com/in/tyler-b-a700a1aa/\"><i class=\"fab fa-linkedin-in zoom\" aria-hidden=\"true\"></i></a></td><td style=\"text-align: center;\"><a style=\"color:inherit\" href=\"mailto:developer.tbutler@gmail.com\"><i class=\"fas fa-envelope zoom\" aria-hidden=\"true\"></i></a></td><td style=\"text-align: center;\"><a style=\"color:inherit\" href=\"https://github.com/tcbutler320\"><i class=\"fab fa-github-alt zoom\" aria-hidden=\"true\"></i></a></td></tr></tbody></table>"
149
169
  }
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jek
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.2
4
+ version: 0.0.3
5
5
  platform: ruby
6
6
  authors:
7
7
  - tcbutler320
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2021-06-17 00:00:00.000000000 Z
11
+ date: 2021-06-19 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -38,6 +38,9 @@ files:
38
38
  - _includes/footer.html
39
39
  - _includes/head.html
40
40
  - _includes/nav.html
41
+ - _includes/read_time.html
42
+ - _includes/settings_table.html
43
+ - _includes/share_table.html
41
44
  - _includes/sidebar.html
42
45
  - _includes/socials.html
43
46
  - _layouts/blog.html
@@ -58,12 +61,15 @@ files:
58
61
  - assets/img/favicon/safari-pinned-tab.svg
59
62
  - assets/img/favicon/site.webmanifest
60
63
  - assets/img/readme/jek.gif
64
+ - assets/img/readme/jek.mp4
61
65
  - assets/img/readme/preview-dark.png
62
66
  - assets/img/readme/preview-dragos.png
63
67
  - assets/img/readme/preview-sunset.png
64
68
  - assets/img/readme/preview.png
65
69
  - assets/img/readme/storage.png
70
+ - assets/img/readme/user.svg
66
71
  - assets/js/keyInput.js
72
+ - assets/js/scrollTop.js
67
73
  - assets/js/themeToggle.js
68
74
  - assets/js/toolTip.js
69
75
  homepage: https://jekyll-jek.netlify.app/