jek 0.0.2 → 0.0.3

Sign up to get free protection for your applications and to get access to all the features.
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/