awesome-jekyll-theme 0.0.4 → 0.2.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +81 -14
- data/_includes/post_card.html +1 -1
- data/_layouts/home.html +93 -58
- metadata +7 -7
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 29214929f1e545c15094e3acbcd753f5b6e478426caee98981f7fc2d71520197
|
4
|
+
data.tar.gz: 7188655771ea95645968e25fbf14d7b05b05ba1dc8c044f41f289662f04b6edb
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: bb9cd39bdc029afed688e854918ee632a7db24416ccee8ab018445f8711dd31d66baa34b43026e5ae3df8c181b684404f890b9102b719936858fe720fcddb3f8
|
7
|
+
data.tar.gz: 1c1fc4665fcbff92bcd79d67e6cb03b0ff66e055c16058ccc98e5c7e447e70332c1d4a18a0abbe6230e2b5b0fc9facfd690f6185a2328437b2c6e47e9426d3bc
|
data/README.md
CHANGED
@@ -1,12 +1,20 @@
|
|
1
|
+
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 50px;">
|
2
|
+
|
1
3
|
<a href="https://jekyll-themes.com/a-chacon/awesome-jekyll-theme">
|
2
4
|
<img
|
3
5
|
src="https://img.shields.io/badge/featured%20on-JT-red.svg"
|
4
|
-
height="20"
|
5
6
|
alt="Jekyll Themes Shield"
|
6
7
|
/>
|
7
8
|
</a>
|
8
9
|
|
9
|
-
|
10
|
+
![GitHub Pages](https://github.com/a-chacon/awesome-jekyll-theme/actions/workflows/jekyll.yml/badge.svg?branch=main)
|
11
|
+
![GitHub License](https://img.shields.io/github/license/a-chacon/awesome-jekyll-theme)
|
12
|
+
![Gem Downloads (for latest version)](https://img.shields.io/gem/dtv/awesome-jekyll-theme)
|
13
|
+
![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/a-chacon/awesome-jekyll-theme)
|
14
|
+
|
15
|
+
</div>
|
16
|
+
|
17
|
+
# Awesome Jekyll Theme 🎉
|
10
18
|
|
11
19
|
A clean, versatile Jekyll theme with minimalist design and robust features.
|
12
20
|
Ideal for portfolios, blogs, and project showcases with responsive layouts and easy customization.
|
@@ -37,27 +45,86 @@ Ideal for portfolios, blogs, and project showcases with responsive layouts and e
|
|
37
45
|
|
38
46
|
5. **Category-based organization** for blog posts, allowing for easy content discovery and improved site structure.
|
39
47
|
|
40
|
-
## Installation
|
48
|
+
## Installation: The Easy Way to Have Your Site on GitHub Pages (Recommended!) 😄
|
41
49
|
|
42
|
-
|
50
|
+
1. **Navigate to the Main Page of the Repository**
|
43
51
|
|
44
|
-
|
45
|
-
gem "awesome-jekyll-theme"
|
46
|
-
```
|
52
|
+
On GitHub.com, go to the main page of the repository at [awesome-jekyll-theme](https://github.com/a-chacon/awesome-jekyll-theme).
|
47
53
|
|
48
|
-
|
54
|
+
2. **Click 'Use this Template'**
|
49
55
|
|
50
|
-
|
51
|
-
|
52
|
-
|
56
|
+
Click the "Use this template" button above the file list and select "Create a new repository."
|
57
|
+
|
58
|
+
3. **Set Repository Details**
|
59
|
+
|
60
|
+
- Select the owner of the repository.
|
61
|
+
- Type a name for your repository. If you want the site to be available at `https://YOURUSERNAME.github.io`, name it `YOURUSERNAME.github.io` (replace `YOURUSERNAME` with your GitHub username). Otherwise, you can choose any name you prefer, and the site will be available at `https://YOURUSERNAME.github.io/REPOSITORYNAME`.
|
62
|
+
- Add an optional description.
|
63
|
+
- Choose repository visibility.
|
64
|
+
|
65
|
+
4. **Create Repository from Template**
|
66
|
+
|
67
|
+
Click "Create repository from template."
|
68
|
+
|
69
|
+
5. **Enable GitHub Pages**
|
70
|
+
|
71
|
+
To deploy the site on GitHub Pages, enable it in your repository settings. Go to **Settings -> Pages -> Source** and select `GitHub Actions`.
|
72
|
+
|
73
|
+
6. **Customize Your Website Settings**
|
74
|
+
|
75
|
+
Edit the `_config.yml` file to change any settings you want. The settings in the file are self-explanatory, and there are comments inside to help you understand what each setting does. After making changes, click the "Commit changes" button to save them.
|
76
|
+
|
77
|
+
7. **Congratulations! You Have a Website!**
|
53
78
|
|
54
|
-
|
79
|
+
If you named the repository `YOURUSERNAME.github.io`, your website should be ready in a minute or two at `https://YOURUSERNAME.github.io`. If you used a different name, your website will be available at `https://YOURUSERNAME.github.io/REPOSITORYNAME`. Every time you make a change to any file, your website will be rebuilt and updated in about a minute.
|
55
80
|
|
81
|
+
## Advanced Installation (Optional) ⚙️
|
82
|
+
|
83
|
+
1. **Create a New Jekyll Site**
|
84
|
+
|
85
|
+
If you don’t already have a Jekyll site, create one with:
|
86
|
+
|
87
|
+
```bash
|
88
|
+
jekyll new my-site
|
89
|
+
```
|
90
|
+
|
91
|
+
Then, navigate into your new site’s directory:
|
92
|
+
|
93
|
+
```bash
|
94
|
+
cd my-site
|
95
|
+
```
|
96
|
+
|
97
|
+
2. **Add the Theme to Your Gemfile**
|
98
|
+
|
99
|
+
Open your `Gemfile` and add this line:
|
100
|
+
|
101
|
+
```ruby
|
102
|
+
gem "awesome-jekyll-theme"
|
103
|
+
```
|
104
|
+
|
105
|
+
3. **Update Your `_config.yml`**
|
106
|
+
|
107
|
+
In your `_config.yml` file, add this line:
|
108
|
+
|
109
|
+
```yaml
|
110
|
+
theme: awesome-jekyll-theme
|
111
|
+
```
|
112
|
+
|
113
|
+
4. **Install the Theme**
|
114
|
+
|
115
|
+
Run the following command to install the theme and its dependencies:
|
116
|
+
|
117
|
+
```bash
|
56
118
|
bundle
|
119
|
+
```
|
120
|
+
|
121
|
+
5. **Run Your Site**
|
57
122
|
|
58
|
-
|
123
|
+
Start your Jekyll site with:
|
59
124
|
|
60
|
-
|
125
|
+
```bash
|
126
|
+
bundle exec jekyll serve
|
127
|
+
```
|
61
128
|
|
62
129
|
## Usage
|
63
130
|
|
data/_includes/post_card.html
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
<div class="flex flex-col justify-between max-w-lg">
|
3
3
|
<a href="{{include.post.url | relative_url}}" aria-label="Post Url">
|
4
4
|
<div class="hover:opacity-90 transition duration-300 w-full h-60 bg-cover bg-center"
|
5
|
-
style="background-image: url('{{post.image}}')">
|
5
|
+
style="background-image: url('{{ post.image | default: 'https://picsum.photos/600/400/?blur' }}')">
|
6
6
|
</div>
|
7
7
|
</a>
|
8
8
|
<div class="pt-6">
|
data/_layouts/home.html
CHANGED
@@ -2,18 +2,23 @@
|
|
2
2
|
layout: default
|
3
3
|
---
|
4
4
|
|
5
|
-
<section
|
5
|
+
<section
|
6
|
+
id="main"
|
7
|
+
class="flex flex-col md:flex-row items-center justify-center py-16 md:h-screen border-b-2"
|
8
|
+
>
|
6
9
|
<div class="md:mx-2">
|
7
|
-
<img
|
8
|
-
|
10
|
+
<img
|
11
|
+
class="object-cover w-full h-full sm:w-80 sm:h-80 sm:rounded-full"
|
12
|
+
src="{{ page.image | relative_url | default: 'https://ik.imagekit.io/ikmedia/avif_samples/photo3_avif_6O32dW2NT.png' }}"
|
13
|
+
alt="{{ page.description }}"
|
14
|
+
/>
|
9
15
|
</div>
|
10
16
|
<div class="fadeIn mx-4 w-4/5 md:w-2/5 text-center md:text-left mt-6 md:mt-0">
|
11
|
-
<div class="prose prose-h1:mb-1">
|
12
|
-
{{ page.main_content | markdownify }}
|
13
|
-
</div>
|
17
|
+
<div class="prose prose-h1:mb-1">{{ page.main_content | markdownify }}</div>
|
14
18
|
|
15
|
-
<p class="mt-4
|
16
|
-
{{ site.data[site.active_lang].strings.home.contact_me | default:
|
19
|
+
<p class="mt-4">
|
20
|
+
{{ site.data[site.active_lang].strings.home.contact_me | default:
|
21
|
+
site.data['en'].strings.home.contact_me}}
|
17
22
|
</p>
|
18
23
|
|
19
24
|
{%include contact_channels.html %}
|
@@ -21,109 +26,139 @@ layout: default
|
|
21
26
|
</section>
|
22
27
|
|
23
28
|
{% if site.posts.size > 0 %}
|
24
|
-
<section
|
29
|
+
<section
|
30
|
+
id="blog"
|
31
|
+
class="container mx-auto flex flex-col items-center justify-center min-h-screen"
|
32
|
+
>
|
25
33
|
<div class="py-16">
|
26
34
|
<h2 class="text-3xl font-bold text-center md:text-left">
|
27
35
|
{{ site.data[site.active_lang].strings.home.blog_title | default:
|
28
36
|
site.data['en'].strings.home.blog_title}}
|
29
37
|
</h2>
|
30
|
-
<div
|
31
|
-
|
32
|
-
|
33
|
-
{%
|
38
|
+
<div
|
39
|
+
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-12 gap-y-16 py-8 md:py-16"
|
40
|
+
>
|
41
|
+
{% for post in site.posts limit:3 %} {% include post_card.html post=post
|
42
|
+
%} {% endfor %}
|
34
43
|
</div>
|
44
|
+
|
45
|
+
{% assign blog_page = site.pages | where: 'layout', 'blog' | where_exp:
|
46
|
+
'page', "page.path contains '/category/'" | first %} {% if blog_page %}
|
35
47
|
<div class="pt-4 text-center">
|
36
|
-
<a
|
48
|
+
<a
|
49
|
+
class="font-mulish text-lg hover:text-sky-400 hover:underline font-bold"
|
50
|
+
href="{{ blog_page.url | relative_url }}"
|
51
|
+
>
|
37
52
|
{{ site.data[site.active_lang].strings.home.see_more_posts | default:
|
38
53
|
site.data['en'].strings.home.see_more_posts}}
|
39
54
|
</a>
|
40
55
|
</div>
|
56
|
+
{% endif %}
|
41
57
|
</div>
|
42
58
|
</section>
|
43
|
-
{% endif %}
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
59
|
+
{% endif %} {% if site.projects.size > 0 %}
|
60
|
+
<section
|
61
|
+
id="projects"
|
62
|
+
class="container mx-auto flex flex-col items-center justify-center min-h-screen"
|
63
|
+
>
|
48
64
|
<div class="py-16">
|
49
65
|
<h2 class="text-3xl font-bold text-center md:text-left">
|
50
66
|
{{ site.data[site.active_lang].strings.home.projects_title | default:
|
51
67
|
site.data['en'].strings.home.projects_title}}
|
52
68
|
</h2>
|
53
69
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-16 py-8 md:py-16">
|
54
|
-
{% for project in site.projects limit:2 %}
|
55
|
-
{%
|
56
|
-
{% endfor %}
|
70
|
+
{% for project in site.projects limit:2 %} {% include project_card.html
|
71
|
+
project=project%} {% endfor %}
|
57
72
|
</div>
|
58
|
-
<div class="pt-4 text-center
|
59
|
-
<a
|
60
|
-
|
73
|
+
<div class="pt-4 text-center">
|
74
|
+
<a
|
75
|
+
class="font-mulish text-lg hover:text-sky-400 hover:underline font-bold"
|
76
|
+
href="{{'/projects' | relative_url }}"
|
77
|
+
>
|
61
78
|
{{ site.data[site.active_lang].strings.home.see_more_projects | default:
|
62
79
|
site.data['en'].strings.home.see_more_projects }}
|
63
80
|
</a>
|
64
81
|
</div>
|
65
82
|
</div>
|
66
83
|
</section>
|
67
|
-
{% endif %}
|
68
|
-
|
69
|
-
<section
|
70
|
-
|
71
|
-
|
72
|
-
|
84
|
+
{% endif %} {% assign trimmed_content = content | strip | replace: "\n", "" |
|
85
|
+
replace: "\r", "" | replace: "\t", "" %} {% if trimmed_content != "" %}
|
86
|
+
<section
|
87
|
+
id="content"
|
88
|
+
class="container mx-auto flex flex-col items-center justify-center min-h-screen"
|
89
|
+
>
|
90
|
+
<article class="prose mx-auto py-16">{{content}}</article>
|
73
91
|
</section>
|
92
|
+
{% endif %}
|
74
93
|
|
75
|
-
<div
|
76
|
-
|
77
|
-
|
94
|
+
<div
|
95
|
+
id="dot-nav"
|
96
|
+
class="fixed left-0 top-1/2 transform -translate-y-1/2 space-y-4 bg-white/80 rounded-r-lg p-4"
|
97
|
+
>
|
98
|
+
<a
|
99
|
+
href="#main"
|
100
|
+
aria-label="Jump to main section"
|
101
|
+
class="dot w-3 h-3 block rounded-full border-2 border-gray-800 bg-gray-800 hover:scale-125"
|
102
|
+
></a>
|
78
103
|
{% if site.posts.size > 0 %}
|
79
|
-
<a
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
104
|
+
<a
|
105
|
+
href="#blog"
|
106
|
+
aria-label="Jump to blog section"
|
107
|
+
class="dot w-3 h-3 block rounded-full border-2 border-gray-800 hover:scale-125"
|
108
|
+
></a>
|
109
|
+
{% endif %} {% if site.projects.size > 0 %}
|
110
|
+
<a
|
111
|
+
href="#projects"
|
112
|
+
aria-label="Jump to projects section"
|
113
|
+
class="dot w-3 h-3 block rounded-full border-2 border-gray-800 hover:scale-125"
|
114
|
+
></a>
|
115
|
+
{% endif %} {% if trimmed_content != "" %}
|
116
|
+
<a
|
117
|
+
href="#content"
|
118
|
+
aria-label="Jump to content section"
|
119
|
+
class="dot w-3 h-3 block rounded-full border-2 border-gray-800 hover:scale-125"
|
120
|
+
></a>
|
85
121
|
{% endif %}
|
86
|
-
<a href="#content" aria-label="Jump to content section"
|
87
|
-
class="dot w-3 h-3 block rounded-full border-2 border-gray-800 hover:scale-125"></a>
|
88
122
|
</div>
|
89
123
|
|
90
124
|
<script>
|
91
|
-
document.addEventListener(
|
92
|
-
const sections = document.querySelectorAll(
|
93
|
-
const navDots = document.querySelectorAll(
|
125
|
+
document.addEventListener("DOMContentLoaded", function () {
|
126
|
+
const sections = document.querySelectorAll("section");
|
127
|
+
const navDots = document.querySelectorAll("#dot-nav .dot");
|
94
128
|
|
95
129
|
function onScroll() {
|
96
|
-
let currentSection =
|
130
|
+
let currentSection = "";
|
97
131
|
|
98
|
-
sections.forEach(section => {
|
132
|
+
sections.forEach((section) => {
|
99
133
|
const sectionTop = section.offsetTop;
|
100
|
-
if (pageYOffset >= sectionTop - 120) {
|
101
|
-
|
134
|
+
if (pageYOffset >= sectionTop - 120) {
|
135
|
+
// Ajusta el valor según sea necesario
|
136
|
+
currentSection = section.getAttribute("id");
|
102
137
|
}
|
103
138
|
});
|
104
139
|
|
105
|
-
navDots.forEach(dot => {
|
106
|
-
dot.classList.remove(
|
107
|
-
if (dot.getAttribute(
|
108
|
-
dot.classList.add(
|
140
|
+
navDots.forEach((dot) => {
|
141
|
+
dot.classList.remove("bg-gray-800");
|
142
|
+
if (dot.getAttribute("href") === `#${currentSection}`) {
|
143
|
+
dot.classList.add("bg-gray-800");
|
109
144
|
}
|
110
145
|
});
|
111
146
|
}
|
112
147
|
|
113
148
|
function smoothScroll(target) {
|
114
149
|
document.querySelector(target).scrollIntoView({
|
115
|
-
behavior:
|
150
|
+
behavior: "smooth",
|
116
151
|
});
|
117
152
|
}
|
118
153
|
|
119
|
-
navDots.forEach(dot => {
|
120
|
-
dot.addEventListener(
|
154
|
+
navDots.forEach((dot) => {
|
155
|
+
dot.addEventListener("click", function (event) {
|
121
156
|
event.preventDefault();
|
122
|
-
const target = this.getAttribute(
|
157
|
+
const target = this.getAttribute("href");
|
123
158
|
smoothScroll(target);
|
124
159
|
});
|
125
160
|
});
|
126
161
|
|
127
|
-
window.addEventListener(
|
162
|
+
window.addEventListener("scroll", onScroll);
|
128
163
|
});
|
129
164
|
</script>
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: awesome-jekyll-theme
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.2.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- a-chacon
|
8
|
-
autorequire:
|
8
|
+
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2024-
|
11
|
+
date: 2024-08-12 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: jekyll
|
@@ -66,7 +66,7 @@ dependencies:
|
|
66
66
|
- - "~>"
|
67
67
|
- !ruby/object:Gem::Version
|
68
68
|
version: 2.8.0
|
69
|
-
description:
|
69
|
+
description:
|
70
70
|
email:
|
71
71
|
- andres.ch@protonmail.com
|
72
72
|
executables: []
|
@@ -114,7 +114,7 @@ homepage: https://github.com/a-chacon/awesome-jekyll-portfolio
|
|
114
114
|
licenses:
|
115
115
|
- MIT
|
116
116
|
metadata: {}
|
117
|
-
post_install_message:
|
117
|
+
post_install_message:
|
118
118
|
rdoc_options: []
|
119
119
|
require_paths:
|
120
120
|
- lib
|
@@ -129,8 +129,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
129
129
|
- !ruby/object:Gem::Version
|
130
130
|
version: '0'
|
131
131
|
requirements: []
|
132
|
-
rubygems_version: 3.4.
|
133
|
-
signing_key:
|
132
|
+
rubygems_version: 3.4.10
|
133
|
+
signing_key:
|
134
134
|
specification_version: 4
|
135
135
|
summary: A clean, versatile Jekyll theme with minimalist design and robust features.
|
136
136
|
Ideal for portfolios, blogs, and project showcases with responsive layouts and easy
|