frame9-jekyll-theme 1.0.0 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +131 -15
- data/_config.yml +2 -11
- data/_layouts/default.html +5 -3
- data/_layouts/post.html +6 -3
- data/_layouts/root.html +2 -11
- data/_layouts/tab.html +12 -0
- data/_sass/block/gallery.sass +2 -2
- data/_sass/block/img-wrap.sass +0 -7
- data/_sass/block/root-layout.sass +22 -18
- data/_sass/block/sibling-nav.sass +2 -2
- data/_sass/utility/box.sass +1 -1
- metadata +3 -4
- data/_includes/section.html +0 -6
- data/_layouts/section.html +0 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a7127bc37c511f133de961292665a96643cb82c43dc9b670650e3c904bb58195
|
4
|
+
data.tar.gz: 6ec6c1ff67f3d950f7029e004ed8ee4a56826ae2ef5c1a38f743da14a5710824
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 551c49a2321c6b720f193a6258853993b50f85a6bb2763bd003da2a88f37b524f5d50215fb2aa1d5307a52e2aa152d0021c5385901ef510c34a69bca524b75b5
|
7
|
+
data.tar.gz: e35e8f68f0d747d79233639f027b9d8f8abc00715ffe68e2e216b6c66fabd6ab6c0103a6acfe63a76e7061e4cf862bc613b972a4dca4f3853563f9162bdaf3b0
|
data/README.md
CHANGED
@@ -1,34 +1,150 @@
|
|
1
|
-
# Frame9::Jekyll::Theme
|
2
1
|
|
3
|
-
|
2
|
+
# Frame9 Jekyll Theme
|
4
3
|
|
5
|
-
|
4
|
+
A small flexible gallery theme for [jekyll](https://jekyllrb.com/).
|
5
|
+
The main feature is the 9 pane gallery element.
|
6
6
|
|
7
|
-
## Installation
|
8
7
|
|
9
|
-
|
8
|
+
![Frame9ThumbNail](https://user-images.githubusercontent.com/5777735/129265363-45758a22-504a-4823-8f21-618923e756a7.png)
|
10
9
|
|
10
|
+
|
11
|
+
## Installation & configuration
|
12
|
+
|
13
|
+
Fist install jekyll and create a project
|
14
|
+
[Jekyll quick start guide](https://jekyllrb.com/docs/)
|
15
|
+
|
16
|
+
Add the theme gem to your gemfile then do a `bundle install`.
|
11
17
|
```ruby
|
12
|
-
gem 'frame9-jekyll-theme'
|
18
|
+
gem 'frame9-jekyll-theme', '~> 1.0'
|
19
|
+
```
|
20
|
+
|
21
|
+
Install [gorko](https://github.com/andy-piccalilli/gorko) with npm.
|
22
|
+
```bash
|
23
|
+
npm init -y
|
24
|
+
npm install gorko
|
25
|
+
```
|
26
|
+
|
27
|
+
|
28
|
+
Add the theme to your `_config.yml`
|
29
|
+
```yml
|
30
|
+
theme: frame9-jekyll-theme
|
31
|
+
```
|
32
|
+
|
33
|
+
### Collections and Defaults
|
34
|
+
You will want to configure the `collections` and `defaults`.
|
35
|
+
|
36
|
+
```yml
|
37
|
+
collections:
|
38
|
+
tabs: # Each tab shows up as a page in your sites nav
|
39
|
+
sort_by: order
|
40
|
+
output: true
|
41
|
+
permalink: /:name/
|
42
|
+
|
43
|
+
defaults:
|
44
|
+
- scope: # use the default layout for tabs
|
45
|
+
path: ''
|
46
|
+
type: tabs
|
47
|
+
values:
|
48
|
+
layout: default
|
49
|
+
|
50
|
+
- scope: # Use the post layout for posts
|
51
|
+
path: ''
|
52
|
+
type: posts
|
53
|
+
values:
|
54
|
+
layout: post
|
55
|
+
show_sibling_nav: true # Display `next` and `previous` links at the bottom of each post
|
56
|
+
```
|
57
|
+
|
58
|
+
|
59
|
+
### Frame9 config options
|
60
|
+
```yml
|
61
|
+
frame9:
|
62
|
+
show_current_tab: false # display the current page in the navigation.
|
63
|
+
avatar: 'assets/img/avatar.png' # Your logo or avatar
|
64
|
+
banner: 'assets/img/banner.jpg' # optional banner image
|
65
|
+
|
66
|
+
footer_links: # footer links
|
67
|
+
- title: Github
|
68
|
+
url: 'https://github.com/CodeKarmaDev/frame9-jekyll-theme'
|
69
|
+
```
|
70
|
+
|
71
|
+
|
72
|
+
### Tabs
|
73
|
+
|
74
|
+
Each page you create in the `_tabs` folder will show up as a page in the site navigation.
|
75
|
+
|
76
|
+
You can arrange them with the `order` tag in the header.
|
77
|
+
|
78
|
+
I recommend crating a page under `_tabs/home.md`
|
79
|
+
|
80
|
+
```yml
|
81
|
+
---
|
82
|
+
title: home
|
83
|
+
permalink: /
|
84
|
+
order: 0
|
85
|
+
---
|
86
|
+
|
87
|
+
# Your Heading
|
88
|
+
{% include gallery.html items=site.posts openable=true limit=9 %}
|
89
|
+
```
|
90
|
+
|
91
|
+
|
92
|
+
### Gallery Include Tag
|
93
|
+
|
94
|
+
|
95
|
+
The `gallery.html` include displays a panel of images.
|
96
|
+
It takes five passable parameters `items`, `openable`, `viewer`, `limit`, and `class`
|
97
|
+
```liquid
|
98
|
+
{% include gallery.html items=site.posts openable=true limit=12 %}
|
13
99
|
```
|
14
100
|
|
15
|
-
|
101
|
+
You can pass the gallery include tag a collection or a list of "Gallery Item Objects"
|
102
|
+
|
16
103
|
|
17
|
-
|
104
|
+
| Tag | Description | Default |
|
105
|
+
| :-- | :-- | --: |
|
106
|
+
| `items` | Accept a collection or a list of gallery items | `required` |
|
107
|
+
| `openable` | will make each images a hyperlink to its own page. | `false` |
|
108
|
+
| `viewer` | Each image will enlarge when clicked | `false` |
|
109
|
+
| `limit` | can set the max amount of images to display in the panel | `9`. |
|
110
|
+
| `class` | adds custom classes to the `img-wrapper` element. | `""` |
|
18
111
|
|
19
|
-
Or install it yourself as:
|
20
112
|
|
21
|
-
|
113
|
+
#### Gallery Item Object
|
22
114
|
|
23
|
-
|
115
|
+
A gallery item object should to have `image` and `alt` properties.
|
116
|
+
with optional `summery` and `url` properties.
|
117
|
+
When using a collection you can define these in the markdown header.
|
24
118
|
|
25
|
-
|
119
|
+
| Tag | Description | Default |
|
120
|
+
| :-- | :-- | --: |
|
121
|
+
| `image` | the path to a image file | `Required` |
|
122
|
+
| `alt` | the alt for the image | `Recommended` |
|
123
|
+
| `summery` | some markdown that displays a preview in the gallery. | it defaults to [jekyll's excerpt property](https://jekyllrb.com/docs/posts/#post-excerpts) |
|
124
|
+
| `url` | the url to open when openable is enabled | With a collection Jekyll handles it for you |
|
26
125
|
|
27
|
-
|
126
|
+
```yaml
|
127
|
+
_posts/yyyy-mm-dd-example.md
|
128
|
+
---
|
129
|
+
image: assets/img/post1.jpg
|
130
|
+
alt: A cool picture of something
|
131
|
+
summery: >-
|
132
|
+
### Title
|
133
|
+
Sub Title
|
134
|
+
url: /my/post/
|
135
|
+
```
|
136
|
+
|
137
|
+
#### Gallery Item Include
|
28
138
|
|
29
|
-
|
139
|
+
You can also use `gallery_item.html` directly.
|
140
|
+
You might want to display the image on its own page for example.
|
141
|
+
It accepts `item`, `viewer`, `openable`, and `class`.
|
142
|
+
the `item` being a single Gallery Item Object.
|
143
|
+
|
144
|
+
```liquid
|
145
|
+
{% include gallery_item.html item=page viewer=true class="float-left mb-x" %}
|
146
|
+
```
|
30
147
|
|
31
|
-
To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
32
148
|
|
33
149
|
## Contributing
|
34
150
|
|
data/_config.yml
CHANGED
@@ -37,32 +37,23 @@ sass:
|
|
37
37
|
|
38
38
|
|
39
39
|
collections:
|
40
|
-
sections:
|
41
|
-
output: false
|
42
40
|
tabs:
|
43
41
|
sort_by: order
|
44
42
|
output: true
|
45
43
|
permalink: /:name/
|
46
44
|
|
47
|
-
defaults:
|
48
|
-
- scope:
|
49
|
-
path: ''
|
50
|
-
type: section
|
51
|
-
values:
|
52
|
-
layout: section
|
53
|
-
|
45
|
+
defaults:
|
54
46
|
- scope:
|
55
47
|
path: ''
|
56
48
|
type: posts
|
57
49
|
values:
|
58
50
|
layout: post
|
59
51
|
show_sibling_nav: true
|
60
|
-
|
61
52
|
- scope:
|
62
53
|
path: ''
|
63
54
|
type: tabs
|
64
55
|
values:
|
65
|
-
layout:
|
56
|
+
layout: tab
|
66
57
|
|
67
58
|
|
68
59
|
exclude:
|
data/_layouts/default.html
CHANGED
data/_layouts/post.html
CHANGED
data/_layouts/root.html
CHANGED
@@ -13,18 +13,9 @@
|
|
13
13
|
|
14
14
|
{% include header.html %}
|
15
15
|
|
16
|
-
<
|
16
|
+
<div class="l-main">
|
17
17
|
{{ content }}
|
18
|
-
</
|
19
|
-
|
20
|
-
{% for section_title in page.sub_sections %}
|
21
|
-
<div class="l-content fill-main box-shadow">
|
22
|
-
<div class="box">
|
23
|
-
{% assign section_page = site.sections | find: 'title', section_title %}
|
24
|
-
{{ section_page.output }}
|
25
|
-
</div>
|
26
|
-
</div>
|
27
|
-
{% endfor %}
|
18
|
+
</div>
|
28
19
|
|
29
20
|
{% include footer.html %}
|
30
21
|
</body>
|
data/_layouts/tab.html
ADDED
data/_sass/block/gallery.sass
CHANGED
data/_sass/block/img-wrap.sass
CHANGED
@@ -18,11 +18,7 @@
|
|
18
18
|
|
19
19
|
|
20
20
|
|
21
|
-
|
22
|
-
|
23
21
|
.gallery .img-wrap
|
24
|
-
|
25
|
-
|
26
22
|
margin: 0
|
27
23
|
width: 100%
|
28
24
|
height: 0
|
@@ -34,9 +30,6 @@
|
|
34
30
|
width: auto
|
35
31
|
|
36
32
|
|
37
|
-
.layout:page .img-small
|
38
|
-
width: 100%
|
39
|
-
|
40
33
|
@include media-query('md')
|
41
34
|
.layout\:post .img-wrap
|
42
35
|
width: 33%
|
@@ -8,36 +8,40 @@
|
|
8
8
|
|
9
9
|
grid-template-columns: 1fr minmax( 10em, 60em) 1fr
|
10
10
|
|
11
|
-
grid-template-rows: minmax( 5vh, auto) minmax(10vh, auto)
|
12
|
-
|
11
|
+
grid-template-rows: minmax( 5vh, auto) minmax(10vh, auto) auto
|
12
|
+
|
13
|
+
& > *:last-child
|
14
|
+
padding-bottom: var(--x)
|
15
|
+
// margin-top: var(--x)
|
16
|
+
// grid-auto-rows: minmax( 1em, auto )
|
13
17
|
|
14
18
|
grid-gap: var(--x)
|
15
19
|
|
16
20
|
& > *
|
17
21
|
grid-column: 2 / 3
|
18
22
|
|
19
|
-
|
23
|
+
.l-banner
|
24
|
+
grid-column: 1 / 4
|
25
|
+
grid-row: 1 / 3
|
26
|
+
|
20
27
|
|
21
|
-
|
22
|
-
|
23
|
-
|
28
|
+
.l-header
|
29
|
+
grid-row: 1 / 2
|
30
|
+
position: relative
|
24
31
|
|
25
|
-
|
26
|
-
|
27
|
-
|
32
|
+
.l-main
|
33
|
+
grid-row: 2 / 3
|
34
|
+
.l-main > * + *
|
35
|
+
margin-top: var(--x)
|
28
36
|
|
29
|
-
.l-main
|
30
|
-
grid-row: 2 / 4
|
31
37
|
|
32
|
-
.l-menu
|
33
|
-
grid-row: 1 / 2
|
34
|
-
position: relative
|
35
38
|
|
39
|
+
.l-menu
|
40
|
+
grid-row: 1 / 2
|
41
|
+
position: relative
|
36
42
|
|
37
|
-
.l-content
|
38
|
-
padding-bottom: get-size('900')
|
39
43
|
|
40
|
-
|
41
|
-
|
44
|
+
.l-logo
|
45
|
+
margin-left: calc( -1 * var(--x) )
|
42
46
|
|
43
47
|
|
data/_sass/utility/box.sass
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: frame9-jekyll-theme
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.
|
4
|
+
version: 1.1.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- opsaaaaa
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2021-08-
|
11
|
+
date: 2021-08-13 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -117,12 +117,11 @@ files:
|
|
117
117
|
- _includes/head.html
|
118
118
|
- _includes/header.html
|
119
119
|
- _includes/image.html
|
120
|
-
- _includes/section.html
|
121
120
|
- _includes/siblings.html
|
122
121
|
- _layouts/default.html
|
123
122
|
- _layouts/post.html
|
124
123
|
- _layouts/root.html
|
125
|
-
- _layouts/
|
124
|
+
- _layouts/tab.html
|
126
125
|
- _sass/block/banner.sass
|
127
126
|
- _sass/block/footer.sass
|
128
127
|
- _sass/block/gallery.sass
|
data/_includes/section.html
DELETED
data/_layouts/section.html
DELETED