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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b764b742e20344094da97cbf47e78d534d9f0010ba2435b1b83dfc4dec2f327d
4
- data.tar.gz: b244b7a6854cd14c2040a11bdb014b8c0b5f51b3594eb1bf40e2392fa2921fcc
3
+ metadata.gz: a7127bc37c511f133de961292665a96643cb82c43dc9b670650e3c904bb58195
4
+ data.tar.gz: 6ec6c1ff67f3d950f7029e004ed8ee4a56826ae2ef5c1a38f743da14a5710824
5
5
  SHA512:
6
- metadata.gz: d965e6aa8950311c10da924b2479f9bed3868f558459b2abfee92af36242883d8972c520defe9bf00c8174685805f0cfb31b52f25d233630e962def0a11c4c48
7
- data.tar.gz: 05c6d54c9107cdffe40e25e554ed7ae41368f6af4a9bc865daf5084dabc71795a8d774057650b1058b37cc19dfbfb4480041eb10c776ea36dcb667d94a61f48c
6
+ metadata.gz: 551c49a2321c6b720f193a6258853993b50f85a6bb2763bd003da2a88f37b524f5d50215fb2aa1d5307a52e2aa152d0021c5385901ef510c34a69bca524b75b5
7
+ data.tar.gz: e35e8f68f0d747d79233639f027b9d8f8abc00715ffe68e2e216b6c66fabd6ab6c0103a6acfe63a76e7061e4cf862bc613b972a4dca4f3853563f9162bdaf3b0
data/README.md CHANGED
@@ -1,34 +1,150 @@
1
- # Frame9::Jekyll::Theme
2
1
 
3
- Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/frame9/jekyll/theme`. To experiment with that code, run `bin/console` for an interactive prompt.
2
+ # Frame9 Jekyll Theme
4
3
 
5
- TODO: Delete this and the text above, and describe your gem
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
- Add this line to your application's Gemfile:
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
- And then execute:
101
+ You can pass the gallery include tag a collection or a list of "Gallery Item Objects"
102
+
16
103
 
17
- $ bundle install
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
- $ gem install frame9-jekyll-theme
113
+ #### Gallery Item Object
22
114
 
23
- ## Usage
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
- TODO: Write usage instructions here
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
- ## Development
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
- After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
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: default
56
+ layout: tab
66
57
 
67
58
 
68
59
  exclude:
@@ -2,6 +2,8 @@
2
2
  layout: root
3
3
  ---
4
4
 
5
- <div class="box layout:default">
6
- {{ content }}
7
- </div>
5
+ <main class="l-content fill-main box-shadow">
6
+ <div class="box layout:default">
7
+ {{ content }}
8
+ </div>
9
+ </main>
data/_layouts/post.html CHANGED
@@ -1,9 +1,12 @@
1
1
  ---
2
2
  layout: root
3
3
  ---
4
- <div class="box layout:post">
4
+
5
+ <main class="l-content fill-main box-shadow">
6
+ <div class="box layout:post">
5
7
  {{ content }}
6
8
 
7
- </div>
9
+ </div>
8
10
 
9
- {% include siblings.html %}
11
+ {% include siblings.html %}
12
+ </main>
data/_layouts/root.html CHANGED
@@ -13,18 +13,9 @@
13
13
 
14
14
  {% include header.html %}
15
15
 
16
- <main class="l-content l-main fill-main box-shadow">
16
+ <div class="l-main">
17
17
  {{ content }}
18
- </main>
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
@@ -0,0 +1,12 @@
1
+ ---
2
+ layout: root
3
+ ---
4
+
5
+
6
+ <main class="l-content fill-main box-shadow">
7
+ <div class="box layout:tab">
8
+ {{ content }}
9
+ </div>
10
+
11
+ {% include siblings.html %}
12
+ </main>
@@ -3,8 +3,8 @@
3
3
  .gallery
4
4
 
5
5
  --gap: calc( 2 * var(--x))
6
- margin-top: var(--gap)
7
- margin-bottom: var(--gap)
6
+ padding-top: var(--x)
7
+ padding-bottom: var(--x)
8
8
 
9
9
  display: grid
10
10
 
@@ -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
- grid-auto-rows: minmax( 1em, auto )
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
- .l-banner
23
+ .l-banner
24
+ grid-column: 1 / 4
25
+ grid-row: 1 / 3
26
+
20
27
 
21
- grid-column: 1 / 4
22
- grid-row: 1 / 3
23
-
28
+ .l-header
29
+ grid-row: 1 / 2
30
+ position: relative
24
31
 
25
- .l-header
26
- grid-row: 1 / 2
27
- position: relative
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
- .l-logo
41
- margin-left: calc( -1 * var(--x) )
44
+ .l-logo
45
+ margin-left: calc( -1 * var(--x) )
42
46
 
43
47
 
@@ -4,8 +4,8 @@
4
4
  grid-auto-columns: 1fr
5
5
  gap: 0
6
6
 
7
- margin-bottom: calc( var(--x) * -1 )
8
- padding-top: var(--x)
7
+ // margin-bottom: calc( var(--x) * -1 )
8
+ // padding-top: var(--x)
9
9
 
10
10
  .sibling-btn
11
11
  border-top: solid 1px var(--scribe-mute)
@@ -1,7 +1,7 @@
1
1
 
2
2
 
3
3
  .box
4
- margin: var(--x) var(--x)
4
+ padding: var(--x) var(--x)
5
5
 
6
6
  .ml-x
7
7
  margin-left: var(--x)
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.0.0
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-12 00:00:00.000000000 Z
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/section.html
124
+ - _layouts/tab.html
126
125
  - _sass/block/banner.sass
127
126
  - _sass/block/footer.sass
128
127
  - _sass/block/gallery.sass
@@ -1,6 +0,0 @@
1
-
2
- {% assign section_page = site.sub_sections | find: 'title', include.title %}
3
- {{ section_page.output }}
4
-
5
- {% assign section_page = site.sub_sections | find: 'title', 'Installation' %}
6
- {{ section_page.output }}
@@ -1,2 +0,0 @@
1
-
2
- {{ content }}