Skip to content

Commit eb7b296

Browse files
novoiolouistatta
novoio
authored and
louistatta
committed
Added Atom feed, Line-highlight of code-blocks, Pagination to news page
- Implemented the atom feed with Jekyll's Feed plugin: https://github.com/jekyll/jekyll-feed - Added line-highlight feature on the code-block via prism.js - Implemented pagination with Jekyll's pagination feature
1 parent 2ea29f2 commit eb7b296

File tree

12 files changed

+671
-11
lines changed

12 files changed

+671
-11
lines changed

‎Gemfile

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ group :jekyll_plugins do
2323
gem 'jekyll-sitemap'
2424
gem 'jekyll-email-protect'
2525
gem 'jekyll-seo-tag'
26+
gem 'jekyll-paginate'
2627
end
2728

2829
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem

‎_config.yml

+8
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,14 @@ plugins:
3232
- jekyll-sitemap
3333
- jekyll-email-protect
3434
- jekyll-seo-tag
35+
- jekyll-paginate
36+
37+
feed:
38+
posts_limit: 15
39+
40+
# Pagination settings
41+
paginate: 5
42+
paginate_path: "/news/page:num/"
3543

3644
# Exclude from processing.
3745
# The following items will not be processed, by default. Create a custom list

‎_includes/paginator.html

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
{% if paginator.total_pages > 1 %}
2+
<nav class="pagination">
3+
{% assign first_page_path = paginator.first_page_path | default: site.paginate_path | replace: 'page:num', '' | replace: '//', '/' | relative_url %}
4+
<ul>
5+
{% comment %} Link for previous page {% endcomment %}
6+
{% if paginator.previous_page %}
7+
{% if paginator.previous_page == 1 %}
8+
<li><a href="{{ first_page_path }}">{{ site.data.ui-text[site.locale].pagination_previous | default: "Previous" }}</a></li>
9+
{% else %}
10+
<li><a href="{{ site.paginate_path | replace: ':num', paginator.previous_page | replace: '//', '/' | relative_url }}">{{ site.data.ui-text[site.locale].pagination_previous | default: "Previous" }}</a></li>
11+
{% endif %}
12+
{% else %}
13+
<li><a href="#" class="disabled"><span aria-hidden="true">{{ site.data.ui-text[site.locale].pagination_previous | default: "Previous" }}</span></a></li>
14+
{% endif %}
15+
16+
{% comment %} First page {% endcomment %}
17+
{% if paginator.page == 1 %}
18+
<li><a href="#" class="disabled current">1</a></li>
19+
{% else %}
20+
<li><a href="{{ first_page_path }}">1</a></li>
21+
{% endif %}
22+
23+
{% assign page_start = 2 %}
24+
{% if paginator.page > 4 %}
25+
{% assign page_start = paginator.page | minus: 2 %}
26+
{% comment %} Ellipsis for truncated links {% endcomment %}
27+
<li><a href="#" class="disabled">&hellip;</a></li>
28+
{% endif %}
29+
30+
{% assign page_end = paginator.total_pages | minus: 1 %}
31+
{% assign pages_to_end = paginator.total_pages | minus: paginator.page %}
32+
{% if pages_to_end > 4 %}
33+
{% assign page_end = paginator.page | plus: 2 %}
34+
{% endif %}
35+
36+
{% for index in (page_start..page_end) %}
37+
{% if index == paginator.page %}
38+
<li><a href="{{ site.paginate_path | replace: ':num', index | replace: '//', '/' | relative_url }}" class="disabled current">{{ index }}</a></li>
39+
{% else %}
40+
{% comment %} Distance from current page and this link {% endcomment %}
41+
{% assign dist = paginator.page | minus: index %}
42+
{% if dist < 0 %}
43+
{% comment %} Distance must be a positive value {% endcomment %}
44+
{% assign dist = 0 | minus: dist %}
45+
{% endif %}
46+
<li><a href="{{ site.paginate_path | replace: ':num', index | relative_url }}">{{ index }}</a></li>
47+
{% endif %}
48+
{% endfor %}
49+
50+
{% comment %} Ellipsis for truncated links {% endcomment %}
51+
{% if pages_to_end > 3 %}
52+
<li><a href="#" class="disabled">&hellip;</a></li>
53+
{% endif %}
54+
55+
{% if paginator.page == paginator.total_pages %}
56+
<li><a href="#" class="disabled current">{{ paginator.page }}</a></li>
57+
{% else %}
58+
<li><a href="{{ site.paginate_path | replace: ':num', paginator.total_pages | replace: '//', '/' | relative_url }}">{{ paginator.total_pages }}</a></li>
59+
{% endif %}
60+
61+
{% comment %} Link next page {% endcomment %}
62+
{% if paginator.next_page %}
63+
<li><a href="{{ site.paginate_path | replace: ':num', paginator.next_page | replace: '//', '/' | relative_url }}">{{ site.data.ui-text[site.locale].pagination_next | default: "Next" }}</a></li>
64+
{% else %}
65+
<li><a href="#" class="disabled"><span aria-hidden="true">{{ site.data.ui-text[site.locale].pagination_next | default: "Next" }}</span></a></li>
66+
{% endif %}
67+
</ul>
68+
</nav>
69+
{% endif %}

‎_layouts/default.html

+2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
<link href="{{ site.baseurl }}/css/prism.css" rel="stylesheet">
1818
{% endif %}
1919

20+
<link href='{{ site.baseurl }}/feed.xml' rel='alternate' type='application/atom+xml'>
21+
2022
</head>
2123

2224
<body id='body' {% if page.layout == 'post' %}class="line-numbers"{% endif %}>

‎_sass/base/config.scss

+35
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,38 @@ $z-middle : 10;
4848
$z-middle-top : 15;
4949
$z-top : 1000;
5050
$z-above-top : 1005;
51+
52+
$primary-color: #6f777d !default;
53+
$gray: #7a8288 !default;
54+
$dark-gray: mix(#000, $gray, 50%) !default;
55+
$darker-gray: mix(#000, $gray, 60%) !default;
56+
$light-gray: mix(#fff, $gray, 50%) !default;
57+
$lighter-gray: mix(#fff, $gray, 90%) !default;
58+
$border-color: $lighter-gray !default;
59+
$info-color: #3b9cba !default;
60+
61+
/* links */
62+
$link-color: mix(#000, $info-color, 20%) !default;
63+
$link-color-hover: mix(#000, $link-color, 25%) !default;
64+
$link-color-visited: mix(#fff, $link-color, 15%) !default;
65+
66+
/* YIQ color contrast */
67+
$yiq-contrasted-dark-default: $dark-gray !default;
68+
$yiq-contrasted-light-default: #fff !default;
69+
$yiq-contrasted-threshold: 175 !default;
70+
$yiq-debug: false !default;
71+
72+
$text-color: $dark-gray !default;
73+
$muted-text-color: mix(#fff, $text-color, 20%) !default;
74+
75+
$border-radius: 4px !default;
76+
77+
/* type scale */
78+
$type-size-1: 2.441em !default; // ~39.056px
79+
$type-size-2: 1.953em !default; // ~31.248px
80+
$type-size-3: 1.563em !default; // ~25.008px
81+
$type-size-4: 1.25em !default; // ~20px
82+
$type-size-5: 1em !default; // ~16px
83+
$type-size-6: 0.75em !default; // ~12px
84+
$type-size-7: 0.6875em !default; // ~11px
85+
$type-size-8: 0.625em !default; // ~10px

‎_sass/base/functions.scss

+49
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,52 @@
1212
}
1313

1414
}
15+
16+
@mixin clearfix {
17+
clear: both;
18+
19+
&::after {
20+
clear: both;
21+
content: "";
22+
display: table;
23+
}
24+
}
25+
26+
/*
27+
Compass YIQ Color Contrast
28+
https://github.com/easy-designs/yiq-color-contrast
29+
========================================================================== */
30+
31+
@function yiq-is-light(
32+
$color,
33+
$threshold: $yiq-contrasted-threshold
34+
) {
35+
$red: red($color);
36+
$green: green($color);
37+
$blue: blue($color);
38+
39+
$yiq: (($red*299)+($green*587)+($blue*114))/1000;
40+
41+
@if $yiq-debug { @debug $yiq, $threshold; }
42+
43+
@return if($yiq >= $threshold, true, false);
44+
}
45+
46+
@function yiq-contrast-color(
47+
$color,
48+
$dark: $yiq-contrasted-dark-default,
49+
$light: $yiq-contrasted-light-default,
50+
$threshold: $yiq-contrasted-threshold
51+
) {
52+
@return if(yiq-is-light($color, $threshold), $yiq-contrasted-dark-default, $yiq-contrasted-light-default);
53+
}
54+
55+
@mixin yiq-contrasted(
56+
$background-color,
57+
$dark: $yiq-contrasted-dark-default,
58+
$light: $yiq-contrasted-light-default,
59+
$threshold: $yiq-contrasted-threshold
60+
) {
61+
background-color: $background-color;
62+
color: yiq-contrast-color($background-color, $dark, $light, $threshold);
63+
}

‎_sass/modules/news.scss

+144-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@
1616
.news-wrapper {
1717
padding: $spacing--m 0;
1818

19-
&:last-of-type {
20-
padding: $spacing--m 0 $spacing--xs;
21-
}
19+
// &:last-of-type {
20+
// padding: $spacing--m 0 $spacing--xs;
21+
// }
2222

2323
@include breakpoint($desktop-small) {
2424
padding: $spacing--m 38% $spacing--m 0;
@@ -114,3 +114,144 @@
114114
margin-bottom: 40px;
115115
}
116116
}
117+
118+
.rss {
119+
z-index: 10;
120+
padding-left: 8px;
121+
}
122+
123+
.icon-size {
124+
height: 24px;
125+
width: 24px;
126+
@include breakpoint($desktop-small) {
127+
height: 32px;
128+
width: 32px;
129+
}
130+
@include breakpoint($desktop-large) {
131+
height: 48px;
132+
width: 48px;
133+
}
134+
}
135+
136+
.section-title {
137+
.header-shadow {
138+
z-index: -1;
139+
}
140+
}
141+
142+
.pagination {
143+
@include clearfix();
144+
margin-top: 1em;
145+
padding-top: 1em;
146+
width: 100%;
147+
148+
ul {
149+
margin: 0;
150+
padding: 0;
151+
list-style-type: none;
152+
// font-family: $sans-serif;
153+
}
154+
155+
li {
156+
display: block;
157+
float: left;
158+
margin-left: -1px;
159+
160+
a {
161+
display: block;
162+
margin-bottom: 0.25em;
163+
padding: 0.2em 0.8em;
164+
// font-family: $sans-serif;
165+
font-size: 14px;
166+
font-weight: bold;
167+
line-height: 1.5;
168+
text-align: center;
169+
text-decoration: none;
170+
color: $muted-text-color;
171+
border: 1px solid mix(#000, $border-color, 25%);
172+
border-radius: 0;
173+
174+
@include breakpoint($phone-large) {
175+
padding: 0.5em 1em;
176+
}
177+
178+
&:hover {
179+
color: $link-color-hover;
180+
}
181+
182+
&.current,
183+
&.current.disabled {
184+
color: #fff;
185+
background: $primary-color;
186+
}
187+
188+
&.disabled {
189+
color: rgba($muted-text-color, 0.5);
190+
pointer-events: none;
191+
cursor: not-allowed;
192+
}
193+
}
194+
195+
&:first-child {
196+
margin-left: 0;
197+
198+
a {
199+
border-top-left-radius: $border-radius;
200+
border-bottom-left-radius: $border-radius;
201+
}
202+
}
203+
204+
&:last-child {
205+
a {
206+
border-top-right-radius: $border-radius;
207+
border-bottom-right-radius: $border-radius;
208+
}
209+
}
210+
}
211+
212+
/* next/previous buttons */
213+
&--pager {
214+
display: block;
215+
padding: 1em 2em;
216+
float: left;
217+
width: 50%;
218+
// font-family: $sans-serif;
219+
font-size: $type-size-5;
220+
font-weight: bold;
221+
text-align: center;
222+
text-decoration: none;
223+
color: $muted-text-color;
224+
border: 1px solid mix(#000, $border-color, 25%);
225+
border-radius: $border-radius;
226+
227+
&:hover {
228+
@include yiq-contrasted($muted-text-color);
229+
}
230+
231+
&:first-child {
232+
border-top-right-radius: 0;
233+
border-bottom-right-radius: 0;
234+
}
235+
236+
&:last-child {
237+
margin-left: -1px;
238+
border-top-left-radius: 0;
239+
border-bottom-left-radius: 0;
240+
}
241+
242+
&.disabled {
243+
color: rgba($muted-text-color, 0.5);
244+
pointer-events: none;
245+
cursor: not-allowed;
246+
}
247+
}
248+
}
249+
250+
.page__content + .pagination,
251+
.page__meta + .pagination,
252+
.page__share + .pagination,
253+
.page__comments + .pagination {
254+
margin-top: 2em;
255+
padding-top: 2em;
256+
border-top: 1px solid $border-color;
257+
}

0 commit comments

Comments
 (0)