Explore all Jekyll open source software, libraries, packages, source code, cloud functions and APIs.

Popular New Releases in Jekyll

jekyll

v3.9.2

eleventy

Eleventy v1.0.1: It’s Elementary

umami

v1.30.0

minimal-mistakes

4.24.0

wowchemy-hugo-themes

v5.3.0

Popular Libraries in Jekyll

jekyll

by jekyll doticonrubydoticon

star image 44432 doticonMIT

:globe_with_meridians: Jekyll is a blog-aware static site generator in Ruby

eleventy

by 11ty doticonjavascriptdoticon

star image 11833 doticonMIT

A simpler static site generator. An alternative to Jekyll. Transforms a directory of templates (of varying types) into HTML.

dashboards

by keen doticonhtmldoticon

star image 10885 doticonMIT

Responsive dashboard templates 📊✨

umami

by mikecao doticonjavascriptdoticon

star image 10334 doticonMIT

Umami is a simple, fast, privacy-focused alternative to Google Analytics.

octopress

by imathis doticonrubydoticon

star image 9392 doticon

Octopress is an obsessively designed framework for Jekyll blogging. It’s easy to configure and easy to deploy. Sweet huh?

minimal-mistakes

by mmistakes doticonhtmldoticon

star image 8571 doticonMIT

:triangular_ruler: Jekyll theme for building a personal site, blog, project documentation, or portfolio.

jekyll-now

by barryclark doticoncssdoticon

star image 7466 doticonMIT

Build a Jekyll blog in minutes, without touching the command line.

beautiful-web-type

by ubuwaits doticonhtmldoticon

star image 7082 doticonMIT

In-depth guide to the best open-source typefaces: https://beautifulwebtype.com

middleman

by middleman doticonrubydoticon

star image 6841 doticonMIT

Hand-crafted frontend development

Trending New libraries in Jekyll

umami

by mikecao doticonjavascriptdoticon

star image 10334 doticonMIT

Umami is a simple, fast, privacy-focused alternative to Google Analytics.

bridgetown

by bridgetownrb doticonrubydoticon

star image 655 doticonMIT

A next-generation progressive site generator & fullstack framework, powered by Ruby

codedoc

by CONNECT-platform doticontypescriptdoticon

star image 351 doticonMIT

Create beautiful modern documentation websites.

Portal-Lite-China

by Privoce doticonjavascriptdoticon

star image 331 doticonNOASSERTION

Portal网页版(中文版)

beluga

by binx doticonjavascriptdoticon

star image 293 doticonGPL-3.0

🎷🐋 Build your own ecommerce site! https://belugajs.com

solid-start

by solidjs doticontypescriptdoticon

star image 293 doticonMIT

SolidStart is Solid's official starter

sidey

by ronv doticonhtmldoticon

star image 291 doticonMIT

Sidey is a simple and minimalistic jekyll blogging theme.

verless

by verless doticongodoticon

star image 289 doticonApache-2.0

A simple and lightweight Static Site Generator

octomments

by krasimir doticonjavascriptdoticon

star image 277 doticonMIT

A small library that offers GitHub issues as comments for your site/blog

Top Authors in Jekyll

1

jekyll

32 Libraries

star icon53452

2

octopress

28 Libraries

star icon2469

3

CloudCannon

25 Libraries

star icon1914

4

FriendsOfREDAXO

24 Libraries

star icon692

5

cznic

20 Libraries

star icon1380

6

sharu725

18 Libraries

star icon2467

7

18F

16 Libraries

star icon1026

8

benbalter

14 Libraries

star icon1770

9

maptime

13 Libraries

star icon79

10

mozilla

12 Libraries

star icon498

1

32 Libraries

star icon53452

2

28 Libraries

star icon2469

3

25 Libraries

star icon1914

4

24 Libraries

star icon692

5

20 Libraries

star icon1380

6

18 Libraries

star icon2467

7

16 Libraries

star icon1026

8

14 Libraries

star icon1770

9

13 Libraries

star icon79

10

12 Libraries

star icon498

Trending Kits in Jekyll

No Trending Kits are available at this moment for Jekyll

Trending Discussions on Jekyll

Load stylesheet with javascript and localStorage

Jekyll + NetlifyCMS collection widget

jekyll theme - how can i bypass this color setting

Jekyll Serve command not working - Errors include MissingDependencyException and MissingSpecError

Page on github wont publish (error 404 not found)

Jekyll blog posts not showing up on github pages

Access specific data from CSV file in Jekyll

Does minima dark skin work on github pages?

How can I pass a variable to a jekyll layout?

Put two Highcharts Charts Side by Side on a Jekyll Blog (beautiful-jekyll)

QUESTION

Load stylesheet with javascript and localStorage

Asked 2022-Mar-30 at 22:43

I'm using a Jekyll website, doesn't really matter because this is a static page, I just write it as additional info.

Desired behavior:

I want to load my stylesheet via javascript, so it can depend of a local stored value, let's say dark and light.

I have done a little test of loading it by JS with the following code (which works).

GREEN

1<head>
2  ...
3  <link rel="stylesheet" href="/assets/css/{{'light'}}.css">
4  ...
5</head>
6

This loads the CSS file called "light" as expected.

But now I want to depend of the localStorage, with a variable theme that has light as value. I tried the following:

RED

1<head>
2  ...
3  <link rel="stylesheet" href="/assets/css/{{'light'}}.css">
4  ...
5</head>
6<head>
7  ...
8  <script>
9    var storedTheme = window.localStorage.getItem('theme'); //Tested and working in console
10    theme = storedTheme ? storedTheme : 'light'; //global variable (also readable in console)
11  </script>
12
13  <link rel="stylesheet" href="/assets/css/{{theme}}.css"> <!-- cant read global variable -->
14  ...
15</head>
16

Using global variables doesn't work, it gives me a 404 error as the stylesheet path is /assets/css/.css.

After that I thought that maybe creating an element would do the trick and I created one manually to test it:

RED

1<head>
2  ...
3  <link rel="stylesheet" href="/assets/css/{{'light'}}.css">
4  ...
5</head>
6<head>
7  ...
8  <script>
9    var storedTheme = window.localStorage.getItem('theme'); //Tested and working in console
10    theme = storedTheme ? storedTheme : 'light'; //global variable (also readable in console)
11  </script>
12
13  <link rel="stylesheet" href="/assets/css/{{theme}}.css"> <!-- cant read global variable -->
14  ...
15</head>
16<head>
17...
18<p id="theme" style="display:none;">dark</p>
19
20<link rel="stylesheet" href="/assets/css/{{document.getElementById('theme').innerHTML}}.css">
21...
22</head>
23

And nope, the path still appears as: /assets/css/.css

ANSWER

Answered 2022-Mar-30 at 22:43

If you change styles on the <body> you get FOUC (Flash Of Unstyled Content). Try using a close equivalent like <main> and spread it 100% x 100% and <html> and <body> as well, but give them margin and padding of 0 in order to ensure <main> covers them completely.

The [disabled] attribute for the <link> is the best way of toggling them because they are still loaded but inert. Also, in the example there is a function called loadTheme(e) that is loaded on the 'DOMContentLoaded' event which insures that all of the DOM is loaded before hand. The example below will not work because localStorage is blocked on SO. There is a functioning example on Plunker. To test it:

  1. Click the green Preview button.
  2. Another frame should appear on the right. Within the frame is the webpage example click the ☀️ button.
  3. It should be in dark mode now. Next, click the refresh ⟳ button located in the mini-toolbar within the frame or press ctrl+enter for Windows OS or ⌥+return for Mac OS.
  4. The page should still be in dark mode. 👍

1&lt;head&gt;
2  ...
3  &lt;link rel=&quot;stylesheet&quot; href=&quot;/assets/css/{{'light'}}.css&quot;&gt;
4  ...
5&lt;/head&gt;
6&lt;head&gt;
7  ...
8  &lt;script&gt;
9    var storedTheme = window.localStorage.getItem('theme'); //Tested and working in console
10    theme = storedTheme ? storedTheme : 'light'; //global variable (also readable in console)
11  &lt;/script&gt;
12
13  &lt;link rel=&quot;stylesheet&quot; href=&quot;/assets/css/{{theme}}.css&quot;&gt; &lt;!-- cant read global variable --&gt;
14  ...
15&lt;/head&gt;
16&lt;head&gt;
17...
18&lt;p id=&quot;theme&quot; style=&quot;display:none;&quot;&gt;dark&lt;/p&gt;
19
20&lt;link rel=&quot;stylesheet&quot; href=&quot;/assets/css/{{document.getElementById('theme').innerHTML}}.css&quot;&gt;
21...
22&lt;/head&gt;
23/* night.css 
24main {
25  background: #000;
26  color: #fff;
27}
28*/
29
30/* default.css */
31:root {
32  height: 100%;
33  width: 100%;
34  margin: 0;
35  padding: 0;
36  font: 1ch/1.5 'Segoe UI';
37}
38
39body {
40  height: 100%;
41  width: 100%;
42  margin: 0;
43  padding: 0;
44  font-size: 4ch;
45}
46
47main {
48  height: 100%;
49  width: 100%;
50  display: flex;
51  align-items: center;
52  justify-content: center;
53  background: #fff;
54  color: #000;
55}
56
57form {
58  width: 80vw;
59  margin: 20px auto;
60}
61
62fieldset {
63  width: max-content;
64  min-height: 25px;
65  margin-left: auto;
66  padding: 0 1.5px 1.5px;
67  border-radius: 8px;
68  background: inherit;
69  color: inherit;
70}
71
72button {
73  display: block;
74  width: 100%;
75  height: 100%;
76  border: 0;
77  font-size: 4rem;
78  text-align: center;
79  background: transparent;
80  cursor: pointer;
81}
82
83#theme::before {
84  content: '☀️';
85}
86
87.night #theme::before {
88  content: '🌙';
89}
1&lt;head&gt;
2  ...
3  &lt;link rel=&quot;stylesheet&quot; href=&quot;/assets/css/{{'light'}}.css&quot;&gt;
4  ...
5&lt;/head&gt;
6&lt;head&gt;
7  ...
8  &lt;script&gt;
9    var storedTheme = window.localStorage.getItem('theme'); //Tested and working in console
10    theme = storedTheme ? storedTheme : 'light'; //global variable (also readable in console)
11  &lt;/script&gt;
12
13  &lt;link rel=&quot;stylesheet&quot; href=&quot;/assets/css/{{theme}}.css&quot;&gt; &lt;!-- cant read global variable --&gt;
14  ...
15&lt;/head&gt;
16&lt;head&gt;
17...
18&lt;p id=&quot;theme&quot; style=&quot;display:none;&quot;&gt;dark&lt;/p&gt;
19
20&lt;link rel=&quot;stylesheet&quot; href=&quot;/assets/css/{{document.getElementById('theme').innerHTML}}.css&quot;&gt;
21...
22&lt;/head&gt;
23/* night.css 
24main {
25  background: #000;
26  color: #fff;
27}
28*/
29
30/* default.css */
31:root {
32  height: 100%;
33  width: 100%;
34  margin: 0;
35  padding: 0;
36  font: 1ch/1.5 'Segoe UI';
37}
38
39body {
40  height: 100%;
41  width: 100%;
42  margin: 0;
43  padding: 0;
44  font-size: 4ch;
45}
46
47main {
48  height: 100%;
49  width: 100%;
50  display: flex;
51  align-items: center;
52  justify-content: center;
53  background: #fff;
54  color: #000;
55}
56
57form {
58  width: 80vw;
59  margin: 20px auto;
60}
61
62fieldset {
63  width: max-content;
64  min-height: 25px;
65  margin-left: auto;
66  padding: 0 1.5px 1.5px;
67  border-radius: 8px;
68  background: inherit;
69  color: inherit;
70}
71
72button {
73  display: block;
74  width: 100%;
75  height: 100%;
76  border: 0;
77  font-size: 4rem;
78  text-align: center;
79  background: transparent;
80  cursor: pointer;
81}
82
83#theme::before {
84  content: '☀️';
85}
86
87.night #theme::before {
88  content: '🌙';
89}&lt;!DOCTYPE html&gt;
90&lt;html&gt;
91
92&lt;head&gt;
93  &lt;meta charset='utf-8'&gt;
94  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
95  &lt;link href='lib/default.css' rel='stylesheet'&gt;
96  &lt;link class='night' href='lib/night.css' rel='stylesheet' disabled&gt;
97  &lt;style&gt;&lt;/style&gt;
98&lt;/head&gt;
99
100&lt;body&gt;
101  &lt;main&gt;
102    &lt;form id='UI'&gt;
103      &lt;fieldset name='box'&gt;
104        &lt;legend&gt;Theme&lt;/legend&gt;
105        &lt;button id='theme' type='button'&gt;&lt;/button&gt;
106      &lt;/fieldset&gt;
107      &lt;p&gt;Click the "Theme" switch to toggle between `disabled` `true` and `false` on `night.css` and `light.css` `
108        &lt;link&gt;`s.&lt;/p&gt;
109    &lt;/form&gt;
110  &lt;/main&gt;
111  &lt;script&gt;
112    const UI = document.forms.UI;
113    const M = document.querySelector('main');
114    const L = document.querySelector('.night')
115
116    const switchTheme = e =&gt; {
117      const clk = e.target;
118      if (clk.matches('button')) {
119        M.classList.toggle('night');
120        L.toggleAttribute('disabled');
121      }
122      let status = M.className === 'night' ? 'on' : 'off';
123      localStorage.setItem('theme', status);
124    };
125
126    const loadTheme = e =&gt; {
127      let cfg = localStorage.getItem('theme');
128      if (cfg === 'on') {
129        M.classList.add('night');
130        L.removeAttribute('disabled');
131      } else {
132        M.classList.remove('night');
133        L.setAttribute('disabled', true);
134      }
135    };
136
137    UI.addEventListener('click', switchTheme);
138    document.addEventListener('DOMContentLoaded', loadTheme);
139  &lt;/script&gt;
140&lt;/body&gt;
141
142&lt;/html&gt;

Source https://stackoverflow.com/questions/71031101

QUESTION

Jekyll + NetlifyCMS collection widget

Asked 2022-Mar-30 at 19:36

I have a problem with Jekyll + NetlifyCMS. I want to create relation widget. I cannot search my author in relation widget with code below. What am I doing wrong?

1#config.yml
2collections:
3  authors:
4    output: true
5
1#config.yml
2collections:
3  authors:
4    output: true
5#_authors/jill.md
6---
7short_name: jill
8name: Jill Smith
9position: Chief Editor
10---
11Lorem ipsum
12
1#config.yml
2collections:
3  authors:
4    output: true
5#_authors/jill.md
6---
7short_name: jill
8name: Jill Smith
9position: Chief Editor
10---
11Lorem ipsum
12#admin/config.yml
13- name: &quot;pages&quot;
14  label: &quot;Pages&quot;
15  files:
16    - label: 'Homepage'
17      name: 'homepage'
18      file: 'pages/homepage.md'
19      fields:
20        - label: &quot;Choose author&quot;
21          name: &quot;author&quot;
22          widget: &quot;relation&quot;
23          collection: &quot;authors&quot;
24          value_field: &quot;short_name&quot;
25          search_fields: [&quot;name&quot;, &quot;short_name&quot;]
26
27

ANSWER

Answered 2022-Mar-30 at 19:36

I ran into the exact same issue, I'll need to figure more out about how this actually works and how to better reference Jekyll page variables within Netlify CMS, but I got a working solution for my use case that I'll adapt to yours.

First, add the display_fields object so that the user can see which author they are choosing. This might have been your issue as the docs outline it's a required property. I changed the value field to {{slug}} as we'll see it will be a foolproof method to reference the field later on. Also, I added authors to the CMS config as I had the collection I was referencing in the relation field. I'm not sure it that does the trick as well, but hey it can't hurt:

1#config.yml
2collections:
3  authors:
4    output: true
5#_authors/jill.md
6---
7short_name: jill
8name: Jill Smith
9position: Chief Editor
10---
11Lorem ipsum
12#admin/config.yml
13- name: &quot;pages&quot;
14  label: &quot;Pages&quot;
15  files:
16    - label: 'Homepage'
17      name: 'homepage'
18      file: 'pages/homepage.md'
19      fields:
20        - label: &quot;Choose author&quot;
21          name: &quot;author&quot;
22          widget: &quot;relation&quot;
23          collection: &quot;authors&quot;
24          value_field: &quot;short_name&quot;
25          search_fields: [&quot;name&quot;, &quot;short_name&quot;]
26
27#admin/config.yml
28- name: &quot;authors&quot;
29  create: true
30  folder: &quot;_authors/&quot;
31  fields: 
32  - label: 'Title'
33    name: 'title'
34    widget: 'string'
35  - label: 'Position'
36    name: 'position'
37    widget: 'string'
38- name: &quot;pages&quot;
39  label: &quot;Pages&quot;
40  files:
41    - label: 'Homepage'
42      name: 'homepage'
43      file: 'pages/homepage.md'
44      fields:
45        - label: &quot;Choose author&quot;
46          name: &quot;author&quot;
47          widget: &quot;relation&quot;
48          collection: &quot;authors&quot;
49          value_field: &quot;{{slug}}&quot;
50          search_fields: [&quot;name&quot;, &quot;short_name&quot;]
51          display_fields: [&quot;name&quot;]
52

You're fine to keep short_name as the value field that will commit to the homepage author property, but I'll show you an easier way for your content editors to add authors and apply them to the pages with the slug property. You can customize the slug or just let Jekyll create it by default. I haven't figured out how to access any of the page variables via Netlify without defining them first in the Netlify CMS, but slug works as the file name of the collection item when it is created and I can reference it natively through the CMS config.

1#config.yml
2collections:
3  authors:
4    output: true
5#_authors/jill.md
6---
7short_name: jill
8name: Jill Smith
9position: Chief Editor
10---
11Lorem ipsum
12#admin/config.yml
13- name: &quot;pages&quot;
14  label: &quot;Pages&quot;
15  files:
16    - label: 'Homepage'
17      name: 'homepage'
18      file: 'pages/homepage.md'
19      fields:
20        - label: &quot;Choose author&quot;
21          name: &quot;author&quot;
22          widget: &quot;relation&quot;
23          collection: &quot;authors&quot;
24          value_field: &quot;short_name&quot;
25          search_fields: [&quot;name&quot;, &quot;short_name&quot;]
26
27#admin/config.yml
28- name: &quot;authors&quot;
29  create: true
30  folder: &quot;_authors/&quot;
31  fields: 
32  - label: 'Title'
33    name: 'title'
34    widget: 'string'
35  - label: 'Position'
36    name: 'position'
37    widget: 'string'
38- name: &quot;pages&quot;
39  label: &quot;Pages&quot;
40  files:
41    - label: 'Homepage'
42      name: 'homepage'
43      file: 'pages/homepage.md'
44      fields:
45        - label: &quot;Choose author&quot;
46          name: &quot;author&quot;
47          widget: &quot;relation&quot;
48          collection: &quot;authors&quot;
49          value_field: &quot;{{slug}}&quot;
50          search_fields: [&quot;name&quot;, &quot;short_name&quot;]
51          display_fields: [&quot;name&quot;]
52#layouts/home.html 
53---
54title: Home
55author: jill
56---
57&lt;div class=&quot;author&quot;&gt;
58{%- capture author-id -%}_authors/{{page.author}}.md{%- endcapture -%}
59{% assign author = site.authors | where: 'path', author-id | first %}
60{{ author.name }}
61&lt;/div&gt;
62
63

Note: the wee minus symbols are to strip any whitespace as captures are wan to do if you make them multiline. I just added them for safety. If you want to see how I reference fields from collections within other pages, you can read my guide on it.

Source https://stackoverflow.com/questions/71667410

QUESTION

jekyll theme - how can i bypass this color setting

Asked 2022-Mar-07 at 20:56

Im editing this jekyll theme with github pages and im trying to add buymeacoffee generated button in menu bar. It works but for some reason it gets the theme colors, i tried to debug it hours now but it didn't work.

The button should look like this:

https://i.imgur.com/RSYrOx6.png

But now:

https://i.imgur.com/KzwqCml.png

I added it in _includes/navbar.html in the end of the file. I tried to placed it in other files too, outside divs inside divs with custom css classes nothing worked.

Looks like it gets a "general" color, i tried to find this setting but i couldn't, can any of you help me to figure it out? thank you!

ANSWER

Answered 2022-Mar-07 at 20:56

you can selector level of custom css in _dark.scss. Example, you can change with this.

1body[data-theme=&quot;dark&quot;] .bmc-btn-container &gt; a.bmc-btn:hover {
2    color: black;
3}
4

Source https://stackoverflow.com/questions/71386007

QUESTION

Jekyll Serve command not working - Errors include MissingDependencyException and MissingSpecError

Asked 2022-Feb-10 at 04:04

As the title above says, I'm trying to build a site on localhost with jekyll serve but I keep getting several errors.

I've done all the steps described here to build my site, but nothing seems to work. I've tried several troubleshooting sources I found online, as well.

Also, the directory I'm trying to build with is a local GitHub repository.

Any suggestions on what I should do?

ANSWER

Answered 2022-Feb-10 at 04:04

Nvm, I fixed it.

I ended up deleting my local repository and cloning it remotely from GitHub. That didn't solve it immediately, but the Gemfile on my local repository was from before I started having issues.

After that, I then kept getting an error where the version of Jekyll was incompatible with building GitHub pages. This page had the answer I needed - which was just changing the version number for gem "jekyll" in the Gemfile for the directory.

Finally, I ran a bundle exec jekyll serve and I got my localhost to run!

Source https://stackoverflow.com/questions/71059494

QUESTION

Page on github wont publish (error 404 not found)

Asked 2022-Jan-24 at 07:41

My page wont go live when i try to publish it on github: https://starzje.github.io/NFT-card/

in "pages build and deployment", im both getting errors on deploy and built parts on github.

My file is just normal index.html and style.css, nothing else in it (just a folder with few imgs).

I did install sass and used bootstrap on a project before this (but there is no scss in this project).

github errors:

1**DEPLOY ERROR**
2Error: Error: No uploaded artifact was found! Please check if there are any errors at build step.
3Error: Error: No uploaded artifact was found! Please check if there are any errors at build step.```
4
5
6**BUILD ERROR:**
7
8Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/style.scss':
9                    No such file or directory @ dir_chdir - /github/workspace/docs
10

ANSWER

Answered 2022-Jan-24 at 07:41

As mentioned in 2019, try and add a .nojekyll file at the root of your NFT-card repository.

That should allow you to bypass Jekyll completely: it would not try to apply a jekyll/minima theme at all.

Source https://stackoverflow.com/questions/70830152

QUESTION

Jekyll blog posts not showing up on github pages

Asked 2022-Jan-23 at 16:57

I've used Jekyll to build my website and it works as intended locally. However, when I deploy my website to github pages, the blog posts no longer show up.

I have consulted a previous question: Jekyll post not generated, but it did not solve my problems.

When I do bundle exec jekyll serve locally, i get the following message

1 Incremental build: disabled. Enable with --incremental
2      Generating... 
3       Jekyll Feed: Generating feed for posts
4         AutoPages: Disabled/Not configured in site.config.
5        Pagination: Complete, processed 1 pagination page(s)
6                    done in 6.303 seconds.
7

which seem to indicate that everything is working ok. What is the problem?

ANSWER

Answered 2022-Jan-23 at 16:57

If everything is right you will have a message with an information that your server is running afaik.

For example this is my message (note last line):

1 Incremental build: disabled. Enable with --incremental
2      Generating... 
3       Jekyll Feed: Generating feed for posts
4         AutoPages: Disabled/Not configured in site.config.
5        Pagination: Complete, processed 1 pagination page(s)
6                    done in 6.303 seconds.
7$ bundle exec jekyll serve
8Configuration file: /Users/alexfreik/Documents/GitHub/ltc-webpage/_config.yml
9            Source: /Users/alexfreik/Documents/GitHub/ltc-webpage
10       Destination: /Users/alexfreik/Documents/GitHub/ltc-webpage/_site
11 Incremental build: disabled. Enable with --incremental
12      Generating... 
13       Jekyll Feed: Generating feed for posts
14                    done in 0.94 seconds.
15 Auto-regeneration: enabled for '/Users/alexfreik/Documents/GitHub/ltc-webpage'
16    Server address: http://127.0.0.1:4000/
17  Server running... press ctrl-c to stop.
18

Do you have this information?

EDIT: The problem was in the incorrectly set pagination.

Source https://stackoverflow.com/questions/70765318

QUESTION

Access specific data from CSV file in Jekyll

Asked 2022-Jan-20 at 17:31

I wish to access/query specific data from a CSV file in Jekyll (liquid). My CSV file has the name planets.csv and it's like this:

1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4

Let's say I want to get the mean diameter of Mercury. I'm trying this examples:

1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6

Since my data is like a table, I'm not sure how to handle it. I even tried splitting the data planet by planet into YML files (i.e., Mercury.yml):

1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6---
7- name: Mercury
8  satellites: 0
9  diameter: 0.38
10

So this syntax should work...

1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6---
7- name: Mercury
8  satellites: 0
9  diameter: 0.38
10{{ site.data.Mercury.diameter }}
11

ANSWER

Answered 2022-Jan-20 at 17:31
1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6---
7- name: Mercury
8  satellites: 0
9  diameter: 0.38
10{{ site.data.Mercury.diameter }}
11{{ site.data.planets.Mercury.diameter }}
12

Would work on a dictionary:

1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6---
7- name: Mercury
8  satellites: 0
9  diameter: 0.38
10{{ site.data.Mercury.diameter }}
11{{ site.data.planets.Mercury.diameter }}
12Mercury:
13  satellites: 0
14  diameter: 0.38
15

And this is probably the best way to query the data as you need it.

So, you would have the YAML:

1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6---
7- name: Mercury
8  satellites: 0
9  diameter: 0.38
10{{ site.data.Mercury.diameter }}
11{{ site.data.planets.Mercury.diameter }}
12Mercury:
13  satellites: 0
14  diameter: 0.38
15Mercuy:
16  satellites: 0
17  diameter: 0.38
18Venus:
19  satellites: 0
20  diameter: 0.95
21Earth:
22  satellites: 1
23  diameter: 1.00
24Mars:
25  satellites: 2
26  diameter: 0.53
27

And if you want to keep this in a CSV, what you could do is:

1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6---
7- name: Mercury
8  satellites: 0
9  diameter: 0.38
10{{ site.data.Mercury.diameter }}
11{{ site.data.planets.Mercury.diameter }}
12Mercury:
13  satellites: 0
14  diameter: 0.38
15Mercuy:
16  satellites: 0
17  diameter: 0.38
18Venus:
19  satellites: 0
20  diameter: 0.95
21Earth:
22  satellites: 1
23  diameter: 1.00
24Mars:
25  satellites: 2
26  diameter: 0.53
27name, satellites, diameter
28Mercury, 0, 0.38 
29Venus, 0, 0.95 
30Earth, 1, 1.00 
31Mars, 2, 0.53
32

And then, use a where filter:

1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6---
7- name: Mercury
8  satellites: 0
9  diameter: 0.38
10{{ site.data.Mercury.diameter }}
11{{ site.data.planets.Mercury.diameter }}
12Mercury:
13  satellites: 0
14  diameter: 0.38
15Mercuy:
16  satellites: 0
17  diameter: 0.38
18Venus:
19  satellites: 0
20  diameter: 0.95
21Earth:
22  satellites: 1
23  diameter: 1.00
24Mars:
25  satellites: 2
26  diameter: 0.53
27name, satellites, diameter
28Mercury, 0, 0.38 
29Venus, 0, 0.95 
30Earth, 1, 1.00 
31Mars, 2, 0.53
32{{ (site.data.planets | where:&quot;name&quot;,&quot;Mercury&quot;)[&quot;diameter&quot;] }}
33

Now, for the sake of completeness, if you want to access Mercury data on:

1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6---
7- name: Mercury
8  satellites: 0
9  diameter: 0.38
10{{ site.data.Mercury.diameter }}
11{{ site.data.planets.Mercury.diameter }}
12Mercury:
13  satellites: 0
14  diameter: 0.38
15Mercuy:
16  satellites: 0
17  diameter: 0.38
18Venus:
19  satellites: 0
20  diameter: 0.95
21Earth:
22  satellites: 1
23  diameter: 1.00
24Mars:
25  satellites: 2
26  diameter: 0.53
27name, satellites, diameter
28Mercury, 0, 0.38 
29Venus, 0, 0.95 
30Earth, 1, 1.00 
31Mars, 2, 0.53
32{{ (site.data.planets | where:&quot;name&quot;,&quot;Mercury&quot;)[&quot;diameter&quot;] }}
33- name: Mercury
34  satellites: 0
35  diameter: 0.38
36

You would need to access it via:

1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6---
7- name: Mercury
8  satellites: 0
9  diameter: 0.38
10{{ site.data.Mercury.diameter }}
11{{ site.data.planets.Mercury.diameter }}
12Mercury:
13  satellites: 0
14  diameter: 0.38
15Mercuy:
16  satellites: 0
17  diameter: 0.38
18Venus:
19  satellites: 0
20  diameter: 0.95
21Earth:
22  satellites: 1
23  diameter: 1.00
24Mars:
25  satellites: 2
26  diameter: 0.53
27name, satellites, diameter
28Mercury, 0, 0.38 
29Venus, 0, 0.95 
30Earth, 1, 1.00 
31Mars, 2, 0.53
32{{ (site.data.planets | where:&quot;name&quot;,&quot;Mercury&quot;)[&quot;diameter&quot;] }}
33- name: Mercury
34  satellites: 0
35  diameter: 0.38
36{{ site.data.planets[0].diameter }}
37

Source https://stackoverflow.com/questions/70787376

QUESTION

Does minima dark skin work on github pages?

Asked 2022-Jan-15 at 12:56

I'm trying to set up a blog via Jekyll and GitHub Pages. To deploy it was not such a big deal, however, in trying to follow the steps described here I only managed to make it display the dark skin locally. Is there a way to deploy it on GithubPages as well? I installed it via

1gem &quot;minima&quot;, git: &quot;https://github.com/jekyll/minima&quot;
2

then added the following two lines in _config.yml

1gem &quot;minima&quot;, git: &quot;https://github.com/jekyll/minima&quot;
2minima:
3  skin: dark
4

This is the repo holding the ruby code.

ANSWER

Answered 2021-Jul-28 at 13:07

I was using Chrome, and apparently the Clear browsing data in the last hour with Cookies and other site data and Cached images and files checked made the local updates appear live.

Source https://stackoverflow.com/questions/68518590

QUESTION

How can I pass a variable to a jekyll layout?

Asked 2022-Jan-10 at 20:43

I don't understand how to pass a variable to a Jekyll layout. I have a markdown file with this header:

1---
2layout: post
3next_tutorial: next_tutorial_name
4---
5

And then, in the post layout, I have this:

1---
2layout: post
3next_tutorial: next_tutorial_name
4---
5---
6layout: default
7---
8&lt;article id=&quot;postBody&quot;&gt;
9    &lt;h1&gt;{{ page.title }}&lt;/h1&gt;
10    &lt;p&gt;{{ page.date | date_to_string }}&lt;/p&gt;
11
12    {{ content }}
13
14    {% if site.next_tutorial %}
15    &lt;h2&gt;{{ site.next_tutorial }}&lt;/h2&gt;
16    {% endif %}
17&lt;/article&gt;
18

But the h2 element never appears. I tried removing the if, but the result is the same. What I'm doing wrong?

ANSWER

Answered 2022-Jan-10 at 20:43

What you are calling the "header of a markdown file" actually have a name in Jekyll, and this is called the Front Matter.

And the elements of the front matter can be accessed via the page variable, as pointed here and there.

So, your layout should read:

1---
2layout: post
3next_tutorial: next_tutorial_name
4---
5---
6layout: default
7---
8&lt;article id=&quot;postBody&quot;&gt;
9    &lt;h1&gt;{{ page.title }}&lt;/h1&gt;
10    &lt;p&gt;{{ page.date | date_to_string }}&lt;/p&gt;
11
12    {{ content }}
13
14    {% if site.next_tutorial %}
15    &lt;h2&gt;{{ site.next_tutorial }}&lt;/h2&gt;
16    {% endif %}
17&lt;/article&gt;
18---
19layout: default
20---
21&lt;article id=&quot;postBody&quot;&gt;
22    &lt;h1&gt;{{ page.title }}&lt;/h1&gt;
23    &lt;p&gt;{{ page.date | date_to_string }}&lt;/p&gt;
24
25    {{ content }}
26
27    {% if page.next_tutorial %}
28    &lt;h2&gt;{{ page.next_tutorial }}&lt;/h2&gt;
29    {% endif %}
30&lt;/article&gt;
31

Source https://stackoverflow.com/questions/70656686

QUESTION

Put two Highcharts Charts Side by Side on a Jekyll Blog (beautiful-jekyll)

Asked 2021-Dec-18 at 09:58

I am currently working with highcharts in Jekyll and have seen documentation on how to put two 'divs' together, but I was unsure on how I could do this in Jekyll using CSS. My current jsfiddle is here where the two charts are stacked.

1&lt;head&gt;
2  &lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
3&lt;/head&gt;
4&lt;div id="container" style="height: 400px"&gt;&lt;/div&gt;
5&lt;div id="container2" style="height: 400px"&gt;&lt;/div&gt;
6
7&lt;script&gt;
8  const chart = Highcharts.chart('container', {
9    //plot options code with type: 'datetime'
10    plotOptions: {
11      series: {
12        pointStart: Date.UTC(2020, 2, 4),
13        pointInterval: 24 * 3600 * 1000
14      }
15    },
16    type: 'line',
17    tooltip: {
18      shared: true,
19      split: false,
20      enabled: true,
21    },
22    xAxis: {
23      type: 'datetime'
24    },
25
26    series: [{
27        data: [1, 2, 3, 4, 5],
28
29      },
30
31
32
33      {
34        data: [5, 15, 20, 10, 1],
35
36      }
37    ]
38  });
39&lt;/script&gt;
40
41&lt;script&gt;
42  const chart2 = Highcharts.chart('container2', {
43    //plot options code with type: 'datetime'
44    plotOptions: {
45      series: {
46        pointStart: Date.UTC(2020, 2, 4),
47        pointInterval: 24 * 3600 * 1000
48      }
49    },
50    type: 'line',
51    tooltip: {
52      shared: true,
53      split: false,
54      enabled: true,
55    },
56    xAxis: {
57      type: 'datetime'
58    },
59
60    series: [{
61        data: [5, 2, 1.5, 1, 0.9],
62
63      },
64
65
66
67      {
68        data: [13, 15, 20, 30, 11],
69
70      }
71    ]
72  });
73&lt;/script&gt;

I have seen documentation on how to do this but was unsure on how to implement this in beautiful-jekyll, a custom jekyll theme. I tried to edit/modify the heading titles for my jekyll website but was unsuccessful and therefore, was unsure on how to do this with css.

Was looking for any suggestions on how to do this by either modifying my source HTML file or my Jekyll CSS file!

ANSWER

Answered 2021-Dec-18 at 09:58

I developed the following application by adding the Bootstrap library to the project. On a large enough screen, two graphs will appear side by side. Graphics will appear one after the other when the page gets too small due to responsive design rules. Click this link to test the application.

enter image description here

1&lt;head&gt;
2  &lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
3&lt;/head&gt;
4&lt;div id="container" style="height: 400px"&gt;&lt;/div&gt;
5&lt;div id="container2" style="height: 400px"&gt;&lt;/div&gt;
6
7&lt;script&gt;
8  const chart = Highcharts.chart('container', {
9    //plot options code with type: 'datetime'
10    plotOptions: {
11      series: {
12        pointStart: Date.UTC(2020, 2, 4),
13        pointInterval: 24 * 3600 * 1000
14      }
15    },
16    type: 'line',
17    tooltip: {
18      shared: true,
19      split: false,
20      enabled: true,
21    },
22    xAxis: {
23      type: 'datetime'
24    },
25
26    series: [{
27        data: [1, 2, 3, 4, 5],
28
29      },
30
31
32
33      {
34        data: [5, 15, 20, 10, 1],
35
36      }
37    ]
38  });
39&lt;/script&gt;
40
41&lt;script&gt;
42  const chart2 = Highcharts.chart('container2', {
43    //plot options code with type: 'datetime'
44    plotOptions: {
45      series: {
46        pointStart: Date.UTC(2020, 2, 4),
47        pointInterval: 24 * 3600 * 1000
48      }
49    },
50    type: 'line',
51    tooltip: {
52      shared: true,
53      split: false,
54      enabled: true,
55    },
56    xAxis: {
57      type: 'datetime'
58    },
59
60    series: [{
61        data: [5, 2, 1.5, 1, 0.9],
62
63      },
64
65
66
67      {
68        data: [13, 15, 20, 30, 11],
69
70      }
71    ]
72  });
73&lt;/script&gt;&lt;!DOCTYPE html&gt;
74&lt;html lang=&quot;en&quot;&gt;
75&lt;head&gt;
76  &lt;meta charset=&quot;UTF-8&quot;&gt;
77  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
78  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
79  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh&quot; crossorigin=&quot;anonymous&quot;&gt;
80  &lt;script src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;
81  &lt;title&gt;Document&lt;/title&gt;
82&lt;/head&gt;
83
84&lt;body&gt;
85  &lt;!-- Remove the styles applied to the following &lt;div&gt; element to position the container at (0,0) in the application. --&gt;
86  &lt;div class=&quot;row&quot; style=&quot;padding: 50px; margin-top: 25px;&quot;&gt;
87    &lt;div class=&quot;col-md-6&quot;&gt;
88      &lt;div id=&quot;container&quot; style=&quot;height: 500px&quot;&gt;&lt;/div&gt;
89    &lt;/div&gt;
90
91    &lt;div class=&quot;col-md-6&quot;&gt;
92      &lt;div id=&quot;container2&quot; style=&quot;height: 500px&quot;&gt;&lt;/div&gt;
93    &lt;/div&gt;
94  &lt;/div&gt;
95
96  &lt;script&gt;
97    const chart = Highcharts.chart('container', {
98      //plot options code with type: 'datetime'
99      plotOptions: {
100        series: {
101          pointStart: Date.UTC(2020, 2, 4),
102          pointInterval: 24 * 3600 * 1000
103        }
104      },
105      type: 'line',
106      tooltip: {
107        shared: true,
108        split: false,
109        enabled: true,
110      },
111      xAxis: {
112        type: 'datetime'
113      },
114
115      series: [{
116          data: [1, 2, 3, 4, 5],
117        },
118        {
119          data: [5, 15, 20, 10, 1],
120        }
121      ]
122    });
123  &lt;/script&gt;
124
125  &lt;script&gt;
126    const chart2 = Highcharts.chart('container2', {
127      //plot options code with type: 'datetime'
128      plotOptions: {
129        series: {
130          pointStart: Date.UTC(2020, 2, 4),
131          pointInterval: 24 * 3600 * 1000
132        }
133      },
134      type: 'line',
135      tooltip: {
136        shared: true,
137        split: false,
138        enabled: true,
139      },
140      xAxis: {
141        type: 'datetime'
142      },
143      series: [{
144          data: [5, 2, 1.5, 1, 0.9],
145        },
146        {
147          data: [13, 15, 20, 30, 11],
148        }
149      ]
150    });
151  &lt;/script&gt;
152&lt;/body&gt;
153&lt;/html&gt;
154

Source https://stackoverflow.com/questions/70401955

Community Discussions contain sources that include Stack Exchange Network

Tutorials and Learning Resources in Jekyll

Tutorials and Learning Resources are not available at this moment for Jekyll

Share this Page

share link

Get latest updates on Jekyll