willianjusten/cards-jekyll-template

A simple Jekyll Template Card Based.

Hello, I'm Willian!

⭐   I'm alumni of GitHub Stars
🏆   Top Teacher 2021 from GitHub Stars
💻  Staff Engineer at Appcues and Instructor at Willian Justen Cursos
🏡   Brazilian, Based in São Paulo, SP - but most of the time traveling around the world 🌎

You can find me on

📺   Youtube
🐦   Twitter
📷   Unsplash
⚛️   My site

📕  Latest Blog Posts

• Meu ano de 2023
• Burnout dura mais que você imagina!
• Mude!
• Está tudo bem não fazer nada
• Feito é melhor que perfeito

📺  Latest Videos on YouTube

• Andando em Osaka a noite - 4K ASMR
• 15. Usando FindRelatedTests para o Hook - Aprenda NextJS, GraphQL na prática!
• 23. Criando Componente de Mapa com Leaflet - Aprenda NextJS, GraphQL na prática!
• 49. Utilizando o MaxBounds no Leaflet - Aprenda NextJS, GraphQL na prática!
• 47. Definindo Background no Leaflet - Aprenda NextJS, GraphQL na prática!

📷  Unsplash Stats

Views	Downloads
959,749,463	5,997,805

cards-jekyll-template's Issues

Fixed width of cards

Hi @willianjusten. While using the template I see that whenever I add a new post that starts in a new row of cards, it occupies the whole width of the page/screen. I would like each card to always have the same width irrespective of the positioning and presence/absence of other cards in a row. Any config to fix this will be helpful.

Cards scrolling and positioning issue

Hi Willian, Great template by the way.
I am facing an issue with the positionning of the cards.
I used npm & gulp install commands you described but the scrolling does not work at all neither the positioning.
When I have access to you website everything is fine but with the github one I get the result in attachement.
Do you have any clue about that ?
Thank you,
Youssef

How can change my blog title from herader?

If possible please explain to me how can change my blog title from herader? @willianjusten

Could not find 'jekyll' (>= 0.a) among 16 total gem(s)

Hi,

I followed these instruction on README:

gem install jekyll
sudo npm install
sudo npm install -g gulp gulp-cli

then I ran sudo gulp to compile the assets, it showed the error:

[16:48:58] Using gulpfile ~/workspace/cards-jekyll-template/gulpfile.js
[16:48:58] Starting 'js'...
[16:48:58] Starting 'stylus'...
[16:48:58] Finished 'stylus' after 17 ms
[16:48:58] Starting 'jekyll-build'...
[16:48:58] Starting 'watch'...
/usr/local/rvm/rubies/ruby-2.3.0/lib/ruby/2.3.0/rubygems/dependency.rb:319:in `to_specs': Could not find 'jekyll' (>= 0.a) among 16 total gem(s) (Gem::LoadError)
Checked in 'GEM_PATH=/home/ubuntu/.gem/ruby/2.3.0:/usr/local/rvm/rubies/ruby-2.3.0/lib/ruby/gems/2.3.0', execute `gem env` for more information
        from /usr/local/rvm/rubies/ruby-2.3.0/lib/ruby/2.3.0/rubygems/dependency.rb:328:in `to_spec'
        from /usr/local/rvm/rubies/ruby-2.3.0/lib/ruby/2.3.0/rubygems/core_ext/kernel_gem.rb:65:in `gem'
        from /usr/local/rvm/gems/ruby-2.3.0/bin/jekyll:22:in `<main>'
        from /usr/local/rvm/gems/ruby-2.3.0/bin/ruby_executable_hooks:15:in `eval'
        from /usr/local/rvm/gems/ruby-2.3.0/bin/ruby_executable_hooks:15:in `<main>'
[16:49:00] Finished 'watch' after 2.09 s
[16:49:00] 'jekyll-build' errored after 2.16 s

My node version is 6.3.1

Help with the logo in Mobile view

Hi Will,

Sorry for the noob question. I am looking to use an SVG graphic file as the logo. So, I have two questions.

1. How to configure the Blog and title to use a logo
2. The original SVG is pretty big. How do I ensure that it will scale appropriately based on the size of the window.

Can not create a new color in _theme-colors.styl

i add the 'ios' color but no work and the tag’s border disappears

themes = {
    post-jekyll: #B31917,
    post-css: #2DA0C3,
    post-js: #D6BA32,
    post-html: #EB7728,
    post-svg: #7D669E,
    post-dev: #637a91,
    post-misc: #7AAB13,
    post-ios: #7AAB13
}

Tables are not responsive

There is a post with tables on this theme(Demo): https://willianjusten.com.br/cards-jekyll-template/dica-rapida-1/ . The table in this post gets hided on my phone with 5" screen on landscape mode. But the table gets visible, if I turned phone to portrait mode , with some overflow. I used overflow-x:auto for inline CSS of table tag. Unfortunately it didn't work for me. I expect this problem will eradicated soon. Also I expect th with theme color for more visually pleasing tables.

Your theme is listed on jekyll-themes.com

Your theme has been listed on https://jekyll-themes.com/.

How to fix "ReferenceError: primordials is not defined" in Node.js

I have installed Node.js modules by 'npm install', and then I tried to do npm install -g gulp gulp-cli.

When I run gulp I get that :

ReferenceError: primordials is not defined
    at fs.js:47:5
    at req_ (/Users/aparrot/git/cards-jekyll-template/node_modules/natives/index.js:143:24)
    at Object.req [as require] (/Users/aparrot/git/cards-jekyll-template/node_modules/natives/index.js:55:10)
    at Object.<anonymous> (/Users/aparrot/git/cards-jekyll-template/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:1:37)
    at Module._compile (node:internal/modules/cjs/loader:1099:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)

Error: spawn jekyll ENOENT

Steps I followed to setup:

$ node -v
v7.4.0
$ sudo npm install
$ sudo npm install -g gulp gulp-cli
$ sudo gulp
[21:43:39] Starting 'js'...
[21:43:39] Starting 'stylus'...
[21:43:39] Finished 'stylus' after 9.68 ms
[21:43:39] Starting 'jekyll-build'...
[21:43:39] Starting 'watch'...
[21:43:41] Finished 'watch' after 1.48 s
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: spawn jekyll ENOENT
    at exports._errnoException (util.js:1022:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
    at onErrorNT (internal/child_process.js:359:16)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Any help would be really appreciated 🙋‍♂️ I am using Fedora 24.

What would be the best way to add Google Analytics using this theme?

Hi Willian,

I plan on using Google Analytics with my Jekyll site. I found that currently there is no support in the theme for that. Can you suggest what would be the best way to add google analytics to the template.

Thanks!

Pagination

If there is a pagination, the theme will become far far better..... However it is awesome...

Uncaught TypeError: Cannot read property 'style' of null

Hi

When I open the demo and Chrome console, then I scroll down it shows error: 'Uncaught TypeError: Cannot read property 'style' of null'. I also check on your blog: https://willianjusten.com.br/, this error also happens.

`gulp` command throwing error

After following instructions in README.md:

• Install NodeJS (remember to use the latest version)
• Run npm install
• Run npm install -g gulp gulp-cli
• Run gulp

Running gulp command throws an error:

ReferenceError: primordials is not defined
    at fs.js:27:26
    at req_ (/Users/nikitahlopovs/Documents/html/cards-jekyll-template/node_modules/natives/index.js:143:24)
    at Object.req [as require] (/Users/nikitahlopovs/Documents/html/cards-jekyll-template/node_modules/natives/index.js:55:10)
    at Object.<anonymous> (/Users/nikitahlopovs/Documents/html/cards-jekyll-template/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:936:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12)
    at Module.require (internal/modules/cjs/loader.js:830:19)
    at require (internal/modules/cjs/helpers.js:68:18)

Possibly need to update packages or config. Please advise. Thank you.

How to change the post grid to rectangles instead of squares?

Hi Willian,

First, I would like to thank you for creating such a beautiful and really amazing template. Its makes the endeavour to start a Jekyll blog super easy. Kudos!!

Now, for my question. I would like to change the grid to display rectangles, instead of squares and also the grid to show from left edge to right edge instead of leaving a very wide border. Can you please tell if this is configurable? If yes, then it would be a great help.

Thanks,
Ash

The Header is not changing

The website header always shows </> Anon Developer or </> AD(for mobile site). changed header of the site by editing the file /src/style/_header .style like this

			transition all .4s
			content '</> TP'
			+above(cut)
				content '</> Tip4programs'

But the change is not affecting on the website. What is the reason behind this? I have committed this change on both gh-pages and master branch😧.

how can we hosted in github pages

Liquid Exception: undefined method `gsub' for 300:Fixnum in index.html

Hi, Great template. When I try to use it on my posts, I am getting

Liquid Exception: undefined method `gsub' for 300:Fixnum in index.html

Any idea of what it could be?

I've been searching but found nothing

Regards

about your website template

thanks for this great theme, can you please upload your site template from https://willianjusten.com.br because the theme on github is not up to date with dark and light theme and image to article, also when i add a new article (the number of article become 10), the 10th show on an entire row,
like in the screenshoot:

support pagination

How to paginate post on home page? Thanks

Scrolling on the main page throws errors because no header

when scrolling at the top of a page with no header, I get 50+ "main.js:2 Uncaught TypeError: Cannot read property 'style' of null" errors. I've found the error and have a pull request to fix it.

Can we nest card pages

Is it possible to have a top-level set of cards, some of which open other card pages, rather than article pages?

How to add disqus comments?

Hi Willian,

I would like to add disqus support to my blog. I am reading the steps and it says that i need to add
comments: true to YAML frontmatter and so I did the same in page.html

---

layout: default
comments: true

After this the second step is to

<2>

In between a {% if page.comments %} and a {% endif %} tag, copy and paste the Universal Embed Code in the appropriate template where you'd like Disqus to load.

Now, do I ad the Embed code in page.html or in default.html as i do see similar tag logic in default.html but not in page.html

Header content doesn't update via Gulp

Changing the _header.styl title content values and then trying to compile with Gulp throws a stylus error. I made sure that gulp-stylus was on current 2.5.0 version. Any help appreciated.

$Noels-MBP:17.0 noxidsoft$ gulp
[15:48:56] Using gulpfile /Applications/MAMP/htdocs/dev_noxidsoft_flat/17.0/gulpfile.js
[15:48:56] Starting 'js'...
[15:48:56] Starting 'stylus'...
[15:48:56] Finished 'stylus' after 4.52 ms
[15:48:56] Starting 'jekyll-build'...
[15:48:56] Starting 'watch'...
Configuration file: /Applications/MAMP/htdocs/dev_noxidsoft_flat/17.0/_config.yml
Source: /Applications/MAMP/htdocs/dev_noxidsoft_flat/17.0
Destination: /Applications/MAMP/htdocs/dev_noxidsoft_flat/17.0/_site
Incremental build: disabled. Enable with --incremental
Generating...
[15:48:57] Finished 'watch' after 1.44 s
[15:48:57] Plumber found unhandled error:
Error in plugin 'gulp-stylus'
Message:
/Applications/MAMP/htdocs/dev_noxidsoft_flat/17.0/src/styl/main.styl:22:9
18| And of course, look in node_modules for axis-css and jeet
19| */
20|
21| @import "kouto-swiss"
22| @import "jeet"
---------------^
23| normalize()
24| @import "_variables"
25| @import "_typo"

failed to locate @import file jeet.styl

Details:
lineno: 22
column: 9
filename: /Applications/MAMP/htdocs/dev_noxidsoft_flat/17.0/src/styl/main.styl
stylusStack:
input: /* Syntax Quick Reference for Jeet
--------------------------
column(ratios = 1, offset = 0, cycle = 0, uncycle = 0, gutter = jeet.gutter)
span(ratio = 1, offset = 0)
shift(ratios = 0, col_or_span = column, gutter = jeet.gutter)
unshift()
edit()
center(max_width = 1410px, pad = 0)
stack(pad = 0, align = false)
unstack()
align(direction = both)
cf()
...

Accessibility errors found in your template

The user @carlsonsantana validate your site template "https://willianjusten.github.io/cards-jekyll-template" and found these accessibility errors:

• Page https://willianjusten.github.io/cards-jekyll-template/:
  • Issue b867e3e8-08ce-4c45-a1a8-04e4c4748b12:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_3.1_3_1.F68
    • Message: This form field should be labelled in some way. Use the label element (either with a "for" attribute or wrapped around the form field), or "title", "aria-label" or "aria-labelledby" attributes as appropriate.
    • Selector: html > body > div:nth-child(3) > div > input
    • Context: <input type="text" class="search-field" placeholder="Search...">
  • Issue 0afea728-aab3-4bb1-9262-3a3448a9a8d8:
    • Type: Error
    • Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.InputText.Name
    • Message: This textinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined.
    • Selector: html > body > div:nth-child(3) > div > input
    • Context: <input type="text" class="search-field" placeholder="Search...">
  • Issue 0b774408-cc80-4589-9177-b7a5e0a64689:
    • Type: Error
    • Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
    • Message: Anchor element found with a valid href attribute, but no link content has been supplied.
    • Selector: html > body > header > h1 > a
    • Context: <a href="/cards-jekyll-template/"></a>
  • Issue 3b5357f2-3de2-4826-b310-7e5c1f571a5b:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_3.1_3_1.H42.2
    • Message: Heading tag found with no content. Text that is not intended as a heading should not be marked up with heading tags.
    • Selector: html > body > header > h1
    • Context: <h1 class="logo"> <a href="/cards-jekyll-templat...</h1>

You can check these accessibility errors using pa11y.
You can view the full validation results in our website.

Error: Cannot find module 'minimatch' after `sudo gulp`

When running

sudo gulp

An error is thrown. No changes were done to the repo after it was cloned.

 user__$ sudo gulp
module.js:529
    throw err;
    ^

Error: Cannot find module 'minimatch'
    at Function.Module._resolveFilename (module.js:527:15)
    at Function.Module._load (module.js:476:23)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/gulp-cli/node_modules/glob/glob.js:44:17)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
admins-MBP:cards-jekyll-template motaher$ 

What's happening?

gulp: command not found

Hi, I did follow your installation instructions to run in local and when I do npm install then press gulp, it shows error: gulp: command not found. I did try on different machine, the result is the same. May be I'm missing something?

Question: Homepage cards pushed down resulting in blank space

I'm running into issues after pulling down a copy of the this theme where the homepage loads the initial posts (I'm just using an exact copy of this repo) but they're all pushed down below the fold.

This results in the title, menu, and search being where they should be, but they're followed by blank space.

Then I see two rows of posts, the footer, and then the last row of posts. The series and tags pages work as expected, and the empty space on the homepage seems to be close to the height of the block that would be there if it was one of those subpages.

I've tried dropping in the default CSS and it results in the exact same behavior. Pulling up https://willianjusten.com.br/cards-jekyll-template/ results in the site working as expected, so it doesn't appear to be an issue (Chrome current on Mac).

I've tried inspecting CSS and things appear to be matching up.

Any suggestions on how I could try resolving this?

Example: http://ebacher-skemp.com/