├── .gitignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md └── examples ├── custom_mapper ├── README.md └── example │ ├── .gitignore │ ├── Gemfile │ ├── Rakefile │ ├── _config.yml │ ├── _includes │ ├── footer.html │ ├── head.html │ ├── header.html │ ├── icon-github.html │ ├── icon-github.svg │ ├── icon-twitter.html │ └── icon-twitter.svg │ ├── _layouts │ └── default.html │ ├── _plugins │ ├── mappers.rb │ └── my_reverse_mapper.rb │ ├── _sass │ ├── _base.scss │ ├── _layout.scss │ └── _syntax-highlighting.scss │ ├── about.md │ ├── css │ └── main.scss │ ├── feed.xml │ └── index.html ├── multiple_spaces ├── README.md └── example │ ├── .gitignore │ ├── Gemfile │ ├── _config.yml │ ├── _includes │ ├── footer.html │ ├── head.html │ ├── header.html │ ├── icon-github.html │ ├── icon-github.svg │ ├── icon-twitter.html │ └── icon-twitter.svg │ ├── _layouts │ └── default.html │ ├── _sass │ ├── _base.scss │ ├── _layout.scss │ └── _syntax-highlighting.scss │ ├── about.md │ ├── bootstrap_templates │ └── catalogue.json │ ├── css │ └── main.scss │ ├── feed.xml │ └── index.html └── single_space ├── README.md └── example ├── .gitignore ├── Gemfile ├── _config.yml ├── _includes ├── footer.html ├── head.html ├── header.html ├── icon-github.html ├── icon-github.svg ├── icon-twitter.html └── icon-twitter.svg ├── _layouts └── default.html ├── _sass ├── _base.scss ├── _layout.scss └── _syntax-highlighting.scss ├── about.md ├── css └── main.scss ├── feed.xml └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | *.gem 2 | *.rbc 3 | /.config 4 | /coverage/ 5 | /InstalledFiles 6 | /pkg/ 7 | /spec/reports/ 8 | /test/tmp/ 9 | /test/version_tmp/ 10 | /tmp/ 11 | 12 | ## Specific to RubyMotion: 13 | .dat* 14 | .repl_history 15 | build/ 16 | 17 | ## Documentation cache and generated files: 18 | /.yardoc/ 19 | /_yardoc/ 20 | /doc/ 21 | /rdoc/ 22 | 23 | ## Environment normalisation: 24 | /.bundle/ 25 | /vendor/bundle 26 | /lib/bundler/man/ 27 | 28 | # for a library or gem, you might want to ignore these files since the code is 29 | # intended to run in multiple environments; otherwise, check them in: 30 | **/Gemfile.lock 31 | # .ruby-version 32 | # .ruby-gemset 33 | 34 | # unless supporting rvm < 1.11.0 or doing something fancy, ignore this: 35 | .rvmrc 36 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | In the spirit of [free software][free-sw], **everyone** is encouraged to help 3 | improve this project. 4 | 5 | [free-sw]: http://www.fsf.org/licensing/essays/free-sw.html 6 | 7 | Here are some ways *you* can contribute: 8 | 9 | * by using alpha, beta, and prerelease versions 10 | * by reporting bugs 11 | * by suggesting new features 12 | * by writing or editing documentation 13 | * by writing specifications 14 | * by writing code ( **no patch is too small** : fix typos, add comments, clean up inconsistent whitespace ) 15 | * by refactoring code 16 | * by closing [issues][] 17 | * by reviewing patches 18 | 19 | [issues]: https://github.com/contentful/contentful_jekyll_examples/issues 20 | 21 | ## Submitting an Issue 22 | We use the [GitHub issue tracker][issues] to track bugs and features. Before 23 | submitting a bug report or feature request, check to make sure it hasn't 24 | already been submitted. When submitting a bug report, please include a [Gist][] 25 | that includes a stack trace and any details that may be necessary to reproduce 26 | the bug, including your gem version, Ruby version, and operating system. 27 | Ideally, a bug report should include a pull request with failing specs. 28 | 29 | [gist]: https://gist.github.com/ 30 | 31 | ## Submitting a Pull Request 32 | 1. [Fork the repository.][fork] 33 | 2. [Create a topic branch.][branch] 34 | 3. Add specs for your unimplemented feature or bug fix. 35 | 4. Run `bundle exec rake test`. If your specs pass, return to step 3. 36 | 5. Implement your feature or bug fix. 37 | 6. Run `bundle exec rake test`. If your specs fail, return to step 5. 38 | 7. Add, commit, and push your changes. 39 | 8. [Submit a pull request.][pr] 40 | 41 | [fork]: http://help.github.com/fork-a-repo/ 42 | [branch]: http://learn.github.com/p/branching.html 43 | [pr]: http://help.github.com/send-pull-requests/ 44 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Contentful 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Contentful Jekyll Examples 2 | 3 | A useful collection of examples using the [jekyll-contentful-data-import](https://github.com/contentful/jekyll-contentful-data-import) gem 4 | 5 | ## Contentful 6 | [Contentful](https://www.contentful.com) provides a content infrastructure for digital teams to power content in websites, apps, and devices. Unlike a CMS, Contentful was built to integrate with the modern software stack. It offers a central hub for structured content, powerful management and delivery APIs, and a customizable web app that enable developers and content creators to ship digital products faster. 7 | 8 | ## What will you find here? 9 | 10 | This example repository will include examples for: 11 | 12 | * [Single Space](./examples/single_space) - Interesting Development Links Compilation 13 | * [Multiple Spaces](./examples/multiple_spaces) - Multiple Spaces Example 14 | * [Custom Mapper](./examples/custom_mapper) - Using a Custom Mapper 15 | 16 | Each example will contain a `README.md` file explaining in detail each of the Setups. 17 | 18 | They will all be using example spaces for which Read-Only keys will be provided so that you can 19 | try them out on your own 20 | 21 | ## Contributing 22 | 23 | Feel free to add your own examples by submitting a Pull Request. For more information, 24 | please check [CONTRIBUTING.md](./CONTRIBUTING.md) 25 | -------------------------------------------------------------------------------- /examples/custom_mapper/README.md: -------------------------------------------------------------------------------- 1 | # Custom Mapper Example 2 | 3 | ## How to Run 4 | 5 | * Paste the following command inside your terminal: 6 | 7 | ```bash 8 | echo "Checkout Repository" && git clone git@github.com:contentful/contentful_jekyll_examples.git && \ 9 | echo "Go to This Example's Folder" && cd contentful_jekyll_examples/examples/custom_mapper/example && \ 10 | echo "Install Dependencies" && bundle install && \ 11 | echo "Fetch Contentful Data" && bundle exec rake contentful && \ 12 | echo "Start Jekyll Server" && bundle exec jekyll server 13 | ``` 14 | 15 | Then open your browser and go to: [localhost:4000](http://localhost:4000) 16 | 17 | ## Configuration 18 | 19 | For reference of basic configuration, you can look into [single_content_type example](../single_content_type/README.md) 20 | 21 | In this case we're using a extra configuration option not described in the previous example: 22 | 23 | ```yml 24 | content_types: 25 | link: MyReverseMapper 26 | ``` 27 | 28 | This option customizes the Mapper used for fetching the entry data. In this case, mapping all `link` type entries using the [`MyReverseMapper` mapper](./example/_plugins/my_reverse_mapper.rb). 29 | This mapper duplicates the data storing it in a field with it's name reversed: 30 | 31 | ```ruby 32 | class MyReverseMapper < Jekyll::Contentful::Mappers::Base 33 | def map 34 | result = super 35 | result.keys.each do |name| 36 | result[name.reverse] = result[name] 37 | end 38 | 39 | result 40 | end 41 | end 42 | ``` 43 | 44 | ## Caveats 45 | 46 | Jekyll itself only allows to import code as plugins only for it's recognized plugin entry points. 47 | Therefore we are using a custom [Rakefile](./example/Rakefile) to import the mapper and required files: 48 | 49 | ```ruby 50 | require 'jekyll' 51 | require 'jekyll-contentful-data-import' 52 | require './_plugins/mappers' 53 | 54 | desc "Import Contentful Data with Custom Mappers" 55 | task :contentful do 56 | Jekyll::Commands::Contentful.process([], {}, Jekyll.configuration['contentful']) 57 | end 58 | ``` 59 | 60 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | _data 3 | .sass-cache 4 | .jekyll-metadata 5 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/Gemfile: -------------------------------------------------------------------------------- 1 | source 'http://rubygems.org' 2 | 3 | gem 'jekyll', '~> 3.6', '>= 3.6.3' 4 | 5 | gem 'contentful_bootstrap' 6 | gem 'rake' 7 | 8 | group :jekyll_plugins do 9 | gem 'jekyll-contentful-data-import' 10 | end 11 | 12 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/Rakefile: -------------------------------------------------------------------------------- 1 | require 'jekyll' 2 | require 'jekyll-contentful-data-import' 3 | require './_plugins/mappers' 4 | 5 | desc "Import Contentful Data with Custom Mappers" 6 | task :contentful do 7 | Jekyll::Commands::Contentful.process([], {}, Jekyll.configuration['contentful']) 8 | end 9 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/_config.yml: -------------------------------------------------------------------------------- 1 | # Welcome to Jekyll! 2 | # 3 | # This config file is meant for settings that affect your whole blog, values 4 | # which you are expected to set up once and rarely need to edit after that. 5 | # For technical reasons, this file is *NOT* reloaded automatically when you use 6 | # 'jekyll serve'. If you change this file, please restart the server process. 7 | 8 | # Site settings 9 | title: Contentful Jekyll Custom Mapper Example 10 | email: david.litvak@contentful.com 11 | description: > # this means to ignore newlines until "baseurl:" 12 | Custom Mapper Example using Jekyll and Contentful 13 | baseurl: "" # the subpath of your site, e.g. /blog 14 | url: "http://yourdomain.com" # the base hostname & protocol for your site 15 | twitter_username: contentfulapp 16 | github_username: dlitvakb 17 | safe: false 18 | 19 | # Build settings 20 | markdown: kramdown 21 | 22 | contentful: 23 | spaces: 24 | - links: 25 | space: 3fwy09k2gc9g 26 | access_token: 25f513e34e33916336bba1d740d135035d4e1d63b87fc446da374fec3aaccaca 27 | content_types: 28 | link: MyReverseMapper 29 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/_includes/footer.html: -------------------------------------------------------------------------------- 1 | 38 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %} 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/_includes/header.html: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/_includes/icon-github.html: -------------------------------------------------------------------------------- 1 | {% include icon-github.svg %}{{ include.username }} 2 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/_includes/icon-github.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/_includes/icon-twitter.html: -------------------------------------------------------------------------------- 1 | {% include icon-twitter.svg %}{{ include.username }} 2 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/_includes/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include head.html %} 5 | 6 | 7 | 8 | {% include header.html %} 9 | 10 |
11 |
12 | {{ content }} 13 |
14 |
15 | 16 | {% include footer.html %} 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/_plugins/mappers.rb: -------------------------------------------------------------------------------- 1 | require './_plugins/my_reverse_mapper' 2 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/_plugins/my_reverse_mapper.rb: -------------------------------------------------------------------------------- 1 | require 'jekyll-contentful-data-import/mappers' 2 | 3 | class MyReverseMapper < Jekyll::Contentful::Mappers::Base 4 | def map 5 | result = super 6 | result.keys.each do |name| 7 | result[name.reverse] = result[name] 8 | end 9 | 10 | result 11 | end 12 | end 13 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/_sass/_base.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Reset some basic elements 3 | */ 4 | body, h1, h2, h3, h4, h5, h6, 5 | p, blockquote, pre, hr, 6 | dl, dd, ol, ul, figure { 7 | margin: 0; 8 | padding: 0; 9 | } 10 | 11 | 12 | 13 | /** 14 | * Basic styling 15 | */ 16 | body { 17 | font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; 18 | color: $text-color; 19 | background-color: $background-color; 20 | -webkit-text-size-adjust: 100%; 21 | -webkit-font-feature-settings: "kern" 1; 22 | -moz-font-feature-settings: "kern" 1; 23 | -o-font-feature-settings: "kern" 1; 24 | font-feature-settings: "kern" 1; 25 | font-kerning: normal; 26 | } 27 | 28 | 29 | 30 | /** 31 | * Set `margin-bottom` to maintain vertical rhythm 32 | */ 33 | h1, h2, h3, h4, h5, h6, 34 | p, blockquote, pre, 35 | ul, ol, dl, figure, 36 | %vertical-rhythm { 37 | margin-bottom: $spacing-unit / 2; 38 | } 39 | 40 | 41 | 42 | /** 43 | * Images 44 | */ 45 | img { 46 | max-width: 100%; 47 | vertical-align: middle; 48 | } 49 | 50 | 51 | 52 | /** 53 | * Figures 54 | */ 55 | figure > img { 56 | display: block; 57 | } 58 | 59 | figcaption { 60 | font-size: $small-font-size; 61 | } 62 | 63 | 64 | 65 | /** 66 | * Lists 67 | */ 68 | ul, ol { 69 | margin-left: $spacing-unit; 70 | } 71 | 72 | li { 73 | > ul, 74 | > ol { 75 | margin-bottom: 0; 76 | } 77 | } 78 | 79 | 80 | 81 | /** 82 | * Headings 83 | */ 84 | h1, h2, h3, h4, h5, h6 { 85 | font-weight: $base-font-weight; 86 | } 87 | 88 | 89 | 90 | /** 91 | * Links 92 | */ 93 | a { 94 | color: $brand-color; 95 | text-decoration: none; 96 | 97 | &:visited { 98 | color: darken($brand-color, 15%); 99 | } 100 | 101 | &:hover { 102 | color: $text-color; 103 | text-decoration: underline; 104 | } 105 | } 106 | 107 | 108 | 109 | /** 110 | * Blockquotes 111 | */ 112 | blockquote { 113 | color: $grey-color; 114 | border-left: 4px solid $grey-color-light; 115 | padding-left: $spacing-unit / 2; 116 | font-size: 18px; 117 | letter-spacing: -1px; 118 | font-style: italic; 119 | 120 | > :last-child { 121 | margin-bottom: 0; 122 | } 123 | } 124 | 125 | 126 | 127 | /** 128 | * Code formatting 129 | */ 130 | pre, 131 | code { 132 | font-size: 15px; 133 | border: 1px solid $grey-color-light; 134 | border-radius: 3px; 135 | background-color: #eef; 136 | } 137 | 138 | code { 139 | padding: 1px 5px; 140 | } 141 | 142 | pre { 143 | padding: 8px 12px; 144 | overflow-x: auto; 145 | 146 | > code { 147 | border: 0; 148 | padding-right: 0; 149 | padding-left: 0; 150 | } 151 | } 152 | 153 | 154 | 155 | /** 156 | * Wrapper 157 | */ 158 | .wrapper { 159 | max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2)); 160 | max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); 161 | margin-right: auto; 162 | margin-left: auto; 163 | padding-right: $spacing-unit; 164 | padding-left: $spacing-unit; 165 | @extend %clearfix; 166 | 167 | @include media-query($on-laptop) { 168 | max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit})); 169 | max-width: calc(#{$content-width} - (#{$spacing-unit})); 170 | padding-right: $spacing-unit / 2; 171 | padding-left: $spacing-unit / 2; 172 | } 173 | } 174 | 175 | 176 | 177 | /** 178 | * Clearfix 179 | */ 180 | %clearfix { 181 | 182 | &:after { 183 | content: ""; 184 | display: table; 185 | clear: both; 186 | } 187 | } 188 | 189 | 190 | 191 | /** 192 | * Icons 193 | */ 194 | .icon { 195 | 196 | > svg { 197 | display: inline-block; 198 | width: 16px; 199 | height: 16px; 200 | vertical-align: middle; 201 | 202 | path { 203 | fill: $grey-color; 204 | } 205 | } 206 | } 207 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/_sass/_layout.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Site header 3 | */ 4 | .site-header { 5 | border-top: 5px solid $grey-color-dark; 6 | border-bottom: 1px solid $grey-color-light; 7 | min-height: 56px; 8 | 9 | // Positioning context for the mobile navigation icon 10 | position: relative; 11 | } 12 | 13 | .site-title { 14 | font-size: 26px; 15 | font-weight: 300; 16 | line-height: 56px; 17 | letter-spacing: -1px; 18 | margin-bottom: 0; 19 | float: left; 20 | 21 | &, 22 | &:visited { 23 | color: $grey-color-dark; 24 | } 25 | } 26 | 27 | .site-nav { 28 | float: right; 29 | line-height: 56px; 30 | 31 | .menu-icon { 32 | display: none; 33 | } 34 | 35 | .page-link { 36 | color: $text-color; 37 | line-height: $base-line-height; 38 | 39 | // Gaps between nav items, but not on the last one 40 | &:not(:last-child) { 41 | margin-right: 20px; 42 | } 43 | } 44 | 45 | @include media-query($on-palm) { 46 | position: absolute; 47 | top: 9px; 48 | right: $spacing-unit / 2; 49 | background-color: $background-color; 50 | border: 1px solid $grey-color-light; 51 | border-radius: 5px; 52 | text-align: right; 53 | 54 | .menu-icon { 55 | display: block; 56 | float: right; 57 | width: 36px; 58 | height: 26px; 59 | line-height: 0; 60 | padding-top: 10px; 61 | text-align: center; 62 | 63 | > svg { 64 | width: 18px; 65 | height: 15px; 66 | 67 | path { 68 | fill: $grey-color-dark; 69 | } 70 | } 71 | } 72 | 73 | .trigger { 74 | clear: both; 75 | display: none; 76 | } 77 | 78 | &:hover .trigger { 79 | display: block; 80 | padding-bottom: 5px; 81 | } 82 | 83 | .page-link { 84 | display: block; 85 | padding: 5px 10px; 86 | 87 | &:not(:last-child) { 88 | margin-right: 0; 89 | } 90 | margin-left: 20px; 91 | } 92 | } 93 | } 94 | 95 | 96 | 97 | /** 98 | * Site footer 99 | */ 100 | .site-footer { 101 | border-top: 1px solid $grey-color-light; 102 | padding: $spacing-unit 0; 103 | } 104 | 105 | .footer-heading { 106 | font-size: 18px; 107 | margin-bottom: $spacing-unit / 2; 108 | } 109 | 110 | .contact-list, 111 | .social-media-list { 112 | list-style: none; 113 | margin-left: 0; 114 | } 115 | 116 | .footer-col-wrapper { 117 | font-size: 15px; 118 | color: $grey-color; 119 | margin-left: -$spacing-unit / 2; 120 | @extend %clearfix; 121 | } 122 | 123 | .footer-col { 124 | float: left; 125 | margin-bottom: $spacing-unit / 2; 126 | padding-left: $spacing-unit / 2; 127 | } 128 | 129 | .footer-col-1 { 130 | width: -webkit-calc(35% - (#{$spacing-unit} / 2)); 131 | width: calc(35% - (#{$spacing-unit} / 2)); 132 | } 133 | 134 | .footer-col-2 { 135 | width: -webkit-calc(20% - (#{$spacing-unit} / 2)); 136 | width: calc(20% - (#{$spacing-unit} / 2)); 137 | } 138 | 139 | .footer-col-3 { 140 | width: -webkit-calc(45% - (#{$spacing-unit} / 2)); 141 | width: calc(45% - (#{$spacing-unit} / 2)); 142 | } 143 | 144 | @include media-query($on-laptop) { 145 | .footer-col-1, 146 | .footer-col-2 { 147 | width: -webkit-calc(50% - (#{$spacing-unit} / 2)); 148 | width: calc(50% - (#{$spacing-unit} / 2)); 149 | } 150 | 151 | .footer-col-3 { 152 | width: -webkit-calc(100% - (#{$spacing-unit} / 2)); 153 | width: calc(100% - (#{$spacing-unit} / 2)); 154 | } 155 | } 156 | 157 | @include media-query($on-palm) { 158 | .footer-col { 159 | float: none; 160 | width: -webkit-calc(100% - (#{$spacing-unit} / 2)); 161 | width: calc(100% - (#{$spacing-unit} / 2)); 162 | } 163 | } 164 | 165 | 166 | 167 | /** 168 | * Page content 169 | */ 170 | .page-content { 171 | padding: $spacing-unit 0; 172 | } 173 | 174 | .page-heading { 175 | font-size: 20px; 176 | } 177 | 178 | .post-list { 179 | margin-left: 0; 180 | list-style: none; 181 | 182 | > li { 183 | margin-bottom: $spacing-unit; 184 | } 185 | } 186 | 187 | .post-meta { 188 | font-size: $small-font-size; 189 | color: $grey-color; 190 | } 191 | 192 | .post-link { 193 | display: block; 194 | font-size: 24px; 195 | } 196 | 197 | 198 | 199 | /** 200 | * Posts 201 | */ 202 | .post-header { 203 | margin-bottom: $spacing-unit; 204 | } 205 | 206 | .post-title { 207 | font-size: 42px; 208 | letter-spacing: -1px; 209 | line-height: 1; 210 | 211 | @include media-query($on-laptop) { 212 | font-size: 36px; 213 | } 214 | } 215 | 216 | .post-content { 217 | margin-bottom: $spacing-unit; 218 | 219 | h2 { 220 | font-size: 32px; 221 | 222 | @include media-query($on-laptop) { 223 | font-size: 28px; 224 | } 225 | } 226 | 227 | h3 { 228 | font-size: 26px; 229 | 230 | @include media-query($on-laptop) { 231 | font-size: 22px; 232 | } 233 | } 234 | 235 | h4 { 236 | font-size: 20px; 237 | 238 | @include media-query($on-laptop) { 239 | font-size: 18px; 240 | } 241 | } 242 | } 243 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/_sass/_syntax-highlighting.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Syntax highlighting styles 3 | */ 4 | .highlight { 5 | background: #fff; 6 | @extend %vertical-rhythm; 7 | 8 | .highlighter-rouge & { 9 | background: #eef; 10 | } 11 | 12 | .c { color: #998; font-style: italic } // Comment 13 | .err { color: #a61717; background-color: #e3d2d2 } // Error 14 | .k { font-weight: bold } // Keyword 15 | .o { font-weight: bold } // Operator 16 | .cm { color: #998; font-style: italic } // Comment.Multiline 17 | .cp { color: #999; font-weight: bold } // Comment.Preproc 18 | .c1 { color: #998; font-style: italic } // Comment.Single 19 | .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special 20 | .gd { color: #000; background-color: #fdd } // Generic.Deleted 21 | .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific 22 | .ge { font-style: italic } // Generic.Emph 23 | .gr { color: #a00 } // Generic.Error 24 | .gh { color: #999 } // Generic.Heading 25 | .gi { color: #000; background-color: #dfd } // Generic.Inserted 26 | .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific 27 | .go { color: #888 } // Generic.Output 28 | .gp { color: #555 } // Generic.Prompt 29 | .gs { font-weight: bold } // Generic.Strong 30 | .gu { color: #aaa } // Generic.Subheading 31 | .gt { color: #a00 } // Generic.Traceback 32 | .kc { font-weight: bold } // Keyword.Constant 33 | .kd { font-weight: bold } // Keyword.Declaration 34 | .kp { font-weight: bold } // Keyword.Pseudo 35 | .kr { font-weight: bold } // Keyword.Reserved 36 | .kt { color: #458; font-weight: bold } // Keyword.Type 37 | .m { color: #099 } // Literal.Number 38 | .s { color: #d14 } // Literal.String 39 | .na { color: #008080 } // Name.Attribute 40 | .nb { color: #0086B3 } // Name.Builtin 41 | .nc { color: #458; font-weight: bold } // Name.Class 42 | .no { color: #008080 } // Name.Constant 43 | .ni { color: #800080 } // Name.Entity 44 | .ne { color: #900; font-weight: bold } // Name.Exception 45 | .nf { color: #900; font-weight: bold } // Name.Function 46 | .nn { color: #555 } // Name.Namespace 47 | .nt { color: #000080 } // Name.Tag 48 | .nv { color: #008080 } // Name.Variable 49 | .ow { font-weight: bold } // Operator.Word 50 | .w { color: #bbb } // Text.Whitespace 51 | .mf { color: #099 } // Literal.Number.Float 52 | .mh { color: #099 } // Literal.Number.Hex 53 | .mi { color: #099 } // Literal.Number.Integer 54 | .mo { color: #099 } // Literal.Number.Oct 55 | .sb { color: #d14 } // Literal.String.Backtick 56 | .sc { color: #d14 } // Literal.String.Char 57 | .sd { color: #d14 } // Literal.String.Doc 58 | .s2 { color: #d14 } // Literal.String.Double 59 | .se { color: #d14 } // Literal.String.Escape 60 | .sh { color: #d14 } // Literal.String.Heredoc 61 | .si { color: #d14 } // Literal.String.Interpol 62 | .sx { color: #d14 } // Literal.String.Other 63 | .sr { color: #009926 } // Literal.String.Regex 64 | .s1 { color: #d14 } // Literal.String.Single 65 | .ss { color: #990073 } // Literal.String.Symbol 66 | .bp { color: #999 } // Name.Builtin.Pseudo 67 | .vc { color: #008080 } // Name.Variable.Class 68 | .vg { color: #008080 } // Name.Variable.Global 69 | .vi { color: #008080 } // Name.Variable.Instance 70 | .il { color: #099 } // Literal.Number.Integer.Long 71 | } 72 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/about.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: About 4 | permalink: /about/ 5 | --- 6 | 7 | This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](http://jekyllrb.com/) 8 | 9 | You can find the source code for the Jekyll new theme at: 10 | {% include icon-github.html username="jglovier" %} / 11 | [jekyll-new](https://github.com/jglovier/jekyll-new) 12 | 13 | You can find the source code for Jekyll at 14 | {% include icon-github.html username="jekyll" %} / 15 | [jekyll](https://github.com/jekyll/jekyll) 16 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/css/main.scss: -------------------------------------------------------------------------------- 1 | --- 2 | # Only the main Sass file needs front matter (the dashes are enough) 3 | --- 4 | @charset "utf-8"; 5 | 6 | 7 | 8 | // Our variables 9 | $base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 10 | $base-font-size: 16px; 11 | $base-font-weight: 400; 12 | $small-font-size: $base-font-size * 0.875; 13 | $base-line-height: 1.5; 14 | 15 | $spacing-unit: 30px; 16 | 17 | $text-color: #111; 18 | $background-color: #fdfdfd; 19 | $brand-color: #2a7ae2; 20 | 21 | $grey-color: #828282; 22 | $grey-color-light: lighten($grey-color, 40%); 23 | $grey-color-dark: darken($grey-color, 25%); 24 | 25 | // Width of the content area 26 | $content-width: 800px; 27 | 28 | $on-palm: 600px; 29 | $on-laptop: 800px; 30 | 31 | 32 | 33 | // Use media queries like this: 34 | // @include media-query($on-palm) { 35 | // .wrapper { 36 | // padding-right: $spacing-unit / 2; 37 | // padding-left: $spacing-unit / 2; 38 | // } 39 | // } 40 | @mixin media-query($device) { 41 | @media screen and (max-width: $device) { 42 | @content; 43 | } 44 | } 45 | 46 | 47 | 48 | // Import partials from `sass_dir` (defaults to `_sass`) 49 | @import 50 | "base", 51 | "layout", 52 | "syntax-highlighting" 53 | ; 54 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/feed.xml: -------------------------------------------------------------------------------- 1 | --- 2 | layout: null 3 | --- 4 | 5 | 6 | 7 | {{ site.title | xml_escape }} 8 | {{ site.description | xml_escape }} 9 | {{ site.url }}{{ site.baseurl }}/ 10 | 11 | {{ site.time | date_to_rfc822 }} 12 | {{ site.time | date_to_rfc822 }} 13 | Jekyll v{{ jekyll.version }} 14 | {% for post in site.posts limit:10 %} 15 | 16 | {{ post.title | xml_escape }} 17 | {{ post.content | xml_escape }} 18 | {{ post.date | date_to_rfc822 }} 19 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 20 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 21 | {% for tag in post.tags %} 22 | {{ tag | xml_escape }} 23 | {% endfor %} 24 | {% for cat in post.categories %} 25 | {{ cat | xml_escape }} 26 | {% endfor %} 27 | 28 | {% endfor %} 29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/custom_mapper/example/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 | 7 |

Useful Links

8 | 9 | 20 |
21 | -------------------------------------------------------------------------------- /examples/multiple_spaces/README.md: -------------------------------------------------------------------------------- 1 | # Multiple Spaces Example 2 | 3 | ## How to Run 4 | 5 | * Paste the following command inside your terminal: 6 | 7 | ```bash 8 | echo "Checkout Repository" && git clone git@github.com:contentful/contentful_jekyll_examples.git && \ 9 | echo "Go to This Example's Folder" && cd contentful_jekyll_examples/examples/multiple_spaces/example && \ 10 | echo "Install Dependencies" && bundle install && \ 11 | echo "Create Catalogue Space" && contentful_bootstrap create_space my_catalogue --json-template bootstrap_templates/catalogue.json 12 | ``` 13 | 14 | * Open `~/.contentfulrc` and copy the following information into your `_config.yml` file: 15 | 16 | ```ini 17 | ; on ~/.contentfulrc 18 | 19 | [my_catalogue] 20 | CONTENTFUL_DELIVERY_ACCESS_TOKEN = 21 | SPACE_ID = 22 | ``` 23 | 24 | 25 | ```yml 26 | # on _config.yml 27 | 28 | - catalogue: 29 | space: 30 | access_token: 31 | cda_query: 32 | include: 2 33 | ``` 34 | 35 | * Paste the following command inside your terminal: 36 | 37 | ```bash 38 | echo "Fetch Contentful Data" && bundle exec jekyll contentful && \ 39 | echo "Start Jekyll Server" && bundle exec jekyll server 40 | ``` 41 | 42 | Then open your browser and go to: [localhost:4000](http://localhost:4000) 43 | 44 | ## Configuration 45 | 46 | For reference of basic configuration, you can look into [single_content_type example](../single_content_type/README.md) 47 | 48 | In this case we're using a extra configuration option not described in the previous example: 49 | 50 | ```yml 51 | cda_query: 52 | include: 2 53 | ``` 54 | 55 | This option customizes the query made to the Contentful API, see [contentful.rb](https://github.com/contentful/contentful.rb) for more info (look for filter options there). Note that by default only 100 entries will be fetched, this can be configured to up to 1000 entries using the `limit` option. 56 | 57 | In this example we'll be using [Contentful Bootstrap](https://github.com/contentful/contentful-bootstrap.rb) for setting up our own Space with multiple Content Types, and fetching 58 | the configuration from `~/.contentfulrc` 59 | 60 | The template used is located [here](./example/bootstrap_templates/catalogue.json) 61 | 62 | In this example we have two `contentful` extension activations. 63 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | _data 3 | .sass-cache 4 | .jekyll-metadata 5 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/Gemfile: -------------------------------------------------------------------------------- 1 | source 'http://rubygems.org' 2 | 3 | gem 'jekyll', '~> 3.6', '>= 3.6.3' 4 | 5 | gem 'contentful_bootstrap' 6 | 7 | group :jekyll_plugins do 8 | gem 'jekyll-contentful-data-import', "~> 1.0" 9 | end 10 | 11 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/_config.yml: -------------------------------------------------------------------------------- 1 | # Welcome to Jekyll! 2 | # 3 | # This config file is meant for settings that affect your whole blog, values 4 | # which you are expected to set up once and rarely need to edit after that. 5 | # For technical reasons, this file is *NOT* reloaded automatically when you use 6 | # 'jekyll serve'. If you change this file, please restart the server process. 7 | 8 | # Site settings 9 | title: Contentful Jekyll Multiple Space Example 10 | email: david.litvak@contentful.com 11 | description: > # this means to ignore newlines until "baseurl:" 12 | Multiple Space Example using Jekyll and Contentful 13 | baseurl: "" # the subpath of your site, e.g. /blog 14 | url: "http://yourdomain.com" # the base hostname & protocol for your site 15 | twitter_username: contentfulapp 16 | github_username: dlitvakb 17 | 18 | # Build settings 19 | markdown: kramdown 20 | 21 | contentful: 22 | spaces: 23 | - links: 24 | space: 3fwy09k2gc9g 25 | access_token: 25f513e34e33916336bba1d740d135035d4e1d63b87fc446da374fec3aaccaca 26 | - catalogue: 27 | space: 28 | access_token: 29 | cda_query: 30 | include: 2 31 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/_includes/footer.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 6 | 7 | 34 | 35 |
36 | 37 |
38 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %} 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/_includes/header.html: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/_includes/icon-github.html: -------------------------------------------------------------------------------- 1 | {% include icon-github.svg %}{{ include.username }} 2 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/_includes/icon-github.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/_includes/icon-twitter.html: -------------------------------------------------------------------------------- 1 | {{ include.username }} 2 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/_includes/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include head.html %} 5 | 6 | 7 | 8 | {% include header.html %} 9 | 10 |
11 |
12 | {{ content }} 13 |
14 |
15 | 16 | {% include footer.html %} 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/_sass/_base.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Reset some basic elements 3 | */ 4 | body, h1, h2, h3, h4, h5, h6, 5 | p, blockquote, pre, hr, 6 | dl, dd, ol, ul, figure { 7 | margin: 0; 8 | padding: 0; 9 | } 10 | 11 | 12 | 13 | /** 14 | * Basic styling 15 | */ 16 | body { 17 | font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; 18 | color: $text-color; 19 | background-color: $background-color; 20 | -webkit-text-size-adjust: 100%; 21 | -webkit-font-feature-settings: "kern" 1; 22 | -moz-font-feature-settings: "kern" 1; 23 | -o-font-feature-settings: "kern" 1; 24 | font-feature-settings: "kern" 1; 25 | font-kerning: normal; 26 | } 27 | 28 | 29 | 30 | /** 31 | * Set `margin-bottom` to maintain vertical rhythm 32 | */ 33 | h1, h2, h3, h4, h5, h6, 34 | p, blockquote, pre, 35 | ul, ol, dl, figure, 36 | %vertical-rhythm { 37 | margin-bottom: $spacing-unit / 2; 38 | } 39 | 40 | 41 | 42 | /** 43 | * Images 44 | */ 45 | img { 46 | max-width: 100%; 47 | vertical-align: middle; 48 | } 49 | 50 | 51 | 52 | /** 53 | * Figures 54 | */ 55 | figure > img { 56 | display: block; 57 | } 58 | 59 | figcaption { 60 | font-size: $small-font-size; 61 | } 62 | 63 | 64 | 65 | /** 66 | * Lists 67 | */ 68 | ul, ol { 69 | margin-left: $spacing-unit; 70 | } 71 | 72 | li { 73 | > ul, 74 | > ol { 75 | margin-bottom: 0; 76 | } 77 | } 78 | 79 | 80 | 81 | /** 82 | * Headings 83 | */ 84 | h1, h2, h3, h4, h5, h6 { 85 | font-weight: $base-font-weight; 86 | } 87 | 88 | 89 | 90 | /** 91 | * Links 92 | */ 93 | a { 94 | color: $brand-color; 95 | text-decoration: none; 96 | 97 | &:visited { 98 | color: darken($brand-color, 15%); 99 | } 100 | 101 | &:hover { 102 | color: $text-color; 103 | text-decoration: underline; 104 | } 105 | } 106 | 107 | 108 | 109 | /** 110 | * Blockquotes 111 | */ 112 | blockquote { 113 | color: $grey-color; 114 | border-left: 4px solid $grey-color-light; 115 | padding-left: $spacing-unit / 2; 116 | font-size: 18px; 117 | letter-spacing: -1px; 118 | font-style: italic; 119 | 120 | > :last-child { 121 | margin-bottom: 0; 122 | } 123 | } 124 | 125 | 126 | 127 | /** 128 | * Code formatting 129 | */ 130 | pre, 131 | code { 132 | font-size: 15px; 133 | border: 1px solid $grey-color-light; 134 | border-radius: 3px; 135 | background-color: #eef; 136 | } 137 | 138 | code { 139 | padding: 1px 5px; 140 | } 141 | 142 | pre { 143 | padding: 8px 12px; 144 | overflow-x: auto; 145 | 146 | > code { 147 | border: 0; 148 | padding-right: 0; 149 | padding-left: 0; 150 | } 151 | } 152 | 153 | 154 | 155 | /** 156 | * Wrapper 157 | */ 158 | .wrapper { 159 | max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2)); 160 | max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); 161 | margin-right: auto; 162 | margin-left: auto; 163 | padding-right: $spacing-unit; 164 | padding-left: $spacing-unit; 165 | @extend %clearfix; 166 | 167 | @include media-query($on-laptop) { 168 | max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit})); 169 | max-width: calc(#{$content-width} - (#{$spacing-unit})); 170 | padding-right: $spacing-unit / 2; 171 | padding-left: $spacing-unit / 2; 172 | } 173 | } 174 | 175 | 176 | 177 | /** 178 | * Clearfix 179 | */ 180 | %clearfix { 181 | 182 | &:after { 183 | content: ""; 184 | display: table; 185 | clear: both; 186 | } 187 | } 188 | 189 | 190 | 191 | /** 192 | * Icons 193 | */ 194 | .icon { 195 | 196 | > svg { 197 | display: inline-block; 198 | width: 16px; 199 | height: 16px; 200 | vertical-align: middle; 201 | 202 | path { 203 | fill: $grey-color; 204 | } 205 | } 206 | } 207 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/_sass/_layout.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Site header 3 | */ 4 | .site-header { 5 | border-top: 5px solid $grey-color-dark; 6 | border-bottom: 1px solid $grey-color-light; 7 | min-height: 56px; 8 | 9 | // Positioning context for the mobile navigation icon 10 | position: relative; 11 | } 12 | 13 | .site-title { 14 | font-size: 26px; 15 | font-weight: 300; 16 | line-height: 56px; 17 | letter-spacing: -1px; 18 | margin-bottom: 0; 19 | float: left; 20 | 21 | &, 22 | &:visited { 23 | color: $grey-color-dark; 24 | } 25 | } 26 | 27 | .site-nav { 28 | float: right; 29 | line-height: 56px; 30 | 31 | .menu-icon { 32 | display: none; 33 | } 34 | 35 | .page-link { 36 | color: $text-color; 37 | line-height: $base-line-height; 38 | 39 | // Gaps between nav items, but not on the last one 40 | &:not(:last-child) { 41 | margin-right: 20px; 42 | } 43 | } 44 | 45 | @include media-query($on-palm) { 46 | position: absolute; 47 | top: 9px; 48 | right: $spacing-unit / 2; 49 | background-color: $background-color; 50 | border: 1px solid $grey-color-light; 51 | border-radius: 5px; 52 | text-align: right; 53 | 54 | .menu-icon { 55 | display: block; 56 | float: right; 57 | width: 36px; 58 | height: 26px; 59 | line-height: 0; 60 | padding-top: 10px; 61 | text-align: center; 62 | 63 | > svg { 64 | width: 18px; 65 | height: 15px; 66 | 67 | path { 68 | fill: $grey-color-dark; 69 | } 70 | } 71 | } 72 | 73 | .trigger { 74 | clear: both; 75 | display: none; 76 | } 77 | 78 | &:hover .trigger { 79 | display: block; 80 | padding-bottom: 5px; 81 | } 82 | 83 | .page-link { 84 | display: block; 85 | padding: 5px 10px; 86 | 87 | &:not(:last-child) { 88 | margin-right: 0; 89 | } 90 | margin-left: 20px; 91 | } 92 | } 93 | } 94 | 95 | 96 | 97 | /** 98 | * Site footer 99 | */ 100 | .site-footer { 101 | border-top: 1px solid $grey-color-light; 102 | padding: $spacing-unit 0; 103 | } 104 | 105 | .footer-heading { 106 | font-size: 18px; 107 | margin-bottom: $spacing-unit / 2; 108 | } 109 | 110 | .contact-list, 111 | .social-media-list { 112 | list-style: none; 113 | margin-left: 0; 114 | } 115 | 116 | .footer-col-wrapper { 117 | font-size: 15px; 118 | color: $grey-color; 119 | margin-left: -$spacing-unit / 2; 120 | @extend %clearfix; 121 | } 122 | 123 | .footer-col { 124 | float: left; 125 | margin-bottom: $spacing-unit / 2; 126 | padding-left: $spacing-unit / 2; 127 | } 128 | 129 | .footer-col-1 { 130 | width: -webkit-calc(35% - (#{$spacing-unit} / 2)); 131 | width: calc(35% - (#{$spacing-unit} / 2)); 132 | } 133 | 134 | .footer-col-2 { 135 | width: -webkit-calc(20% - (#{$spacing-unit} / 2)); 136 | width: calc(20% - (#{$spacing-unit} / 2)); 137 | } 138 | 139 | .footer-col-3 { 140 | width: -webkit-calc(45% - (#{$spacing-unit} / 2)); 141 | width: calc(45% - (#{$spacing-unit} / 2)); 142 | } 143 | 144 | @include media-query($on-laptop) { 145 | .footer-col-1, 146 | .footer-col-2 { 147 | width: -webkit-calc(50% - (#{$spacing-unit} / 2)); 148 | width: calc(50% - (#{$spacing-unit} / 2)); 149 | } 150 | 151 | .footer-col-3 { 152 | width: -webkit-calc(100% - (#{$spacing-unit} / 2)); 153 | width: calc(100% - (#{$spacing-unit} / 2)); 154 | } 155 | } 156 | 157 | @include media-query($on-palm) { 158 | .footer-col { 159 | float: none; 160 | width: -webkit-calc(100% - (#{$spacing-unit} / 2)); 161 | width: calc(100% - (#{$spacing-unit} / 2)); 162 | } 163 | } 164 | 165 | 166 | 167 | /** 168 | * Page content 169 | */ 170 | .page-content { 171 | padding: $spacing-unit 0; 172 | } 173 | 174 | .page-heading { 175 | font-size: 20px; 176 | } 177 | 178 | .post-list { 179 | margin-left: 0; 180 | list-style: none; 181 | 182 | > li { 183 | margin-bottom: $spacing-unit; 184 | } 185 | } 186 | 187 | .post-meta { 188 | font-size: $small-font-size; 189 | color: $grey-color; 190 | } 191 | 192 | .post-link { 193 | display: block; 194 | font-size: 24px; 195 | } 196 | 197 | 198 | 199 | /** 200 | * Posts 201 | */ 202 | .post-header { 203 | margin-bottom: $spacing-unit; 204 | } 205 | 206 | .post-title { 207 | font-size: 42px; 208 | letter-spacing: -1px; 209 | line-height: 1; 210 | 211 | @include media-query($on-laptop) { 212 | font-size: 36px; 213 | } 214 | } 215 | 216 | .post-content { 217 | margin-bottom: $spacing-unit; 218 | 219 | h2 { 220 | font-size: 32px; 221 | 222 | @include media-query($on-laptop) { 223 | font-size: 28px; 224 | } 225 | } 226 | 227 | h3 { 228 | font-size: 26px; 229 | 230 | @include media-query($on-laptop) { 231 | font-size: 22px; 232 | } 233 | } 234 | 235 | h4 { 236 | font-size: 20px; 237 | 238 | @include media-query($on-laptop) { 239 | font-size: 18px; 240 | } 241 | } 242 | } 243 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/_sass/_syntax-highlighting.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Syntax highlighting styles 3 | */ 4 | .highlight { 5 | background: #fff; 6 | @extend %vertical-rhythm; 7 | 8 | .highlighter-rouge & { 9 | background: #eef; 10 | } 11 | 12 | .c { color: #998; font-style: italic } // Comment 13 | .err { color: #a61717; background-color: #e3d2d2 } // Error 14 | .k { font-weight: bold } // Keyword 15 | .o { font-weight: bold } // Operator 16 | .cm { color: #998; font-style: italic } // Comment.Multiline 17 | .cp { color: #999; font-weight: bold } // Comment.Preproc 18 | .c1 { color: #998; font-style: italic } // Comment.Single 19 | .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special 20 | .gd { color: #000; background-color: #fdd } // Generic.Deleted 21 | .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific 22 | .ge { font-style: italic } // Generic.Emph 23 | .gr { color: #a00 } // Generic.Error 24 | .gh { color: #999 } // Generic.Heading 25 | .gi { color: #000; background-color: #dfd } // Generic.Inserted 26 | .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific 27 | .go { color: #888 } // Generic.Output 28 | .gp { color: #555 } // Generic.Prompt 29 | .gs { font-weight: bold } // Generic.Strong 30 | .gu { color: #aaa } // Generic.Subheading 31 | .gt { color: #a00 } // Generic.Traceback 32 | .kc { font-weight: bold } // Keyword.Constant 33 | .kd { font-weight: bold } // Keyword.Declaration 34 | .kp { font-weight: bold } // Keyword.Pseudo 35 | .kr { font-weight: bold } // Keyword.Reserved 36 | .kt { color: #458; font-weight: bold } // Keyword.Type 37 | .m { color: #099 } // Literal.Number 38 | .s { color: #d14 } // Literal.String 39 | .na { color: #008080 } // Name.Attribute 40 | .nb { color: #0086B3 } // Name.Builtin 41 | .nc { color: #458; font-weight: bold } // Name.Class 42 | .no { color: #008080 } // Name.Constant 43 | .ni { color: #800080 } // Name.Entity 44 | .ne { color: #900; font-weight: bold } // Name.Exception 45 | .nf { color: #900; font-weight: bold } // Name.Function 46 | .nn { color: #555 } // Name.Namespace 47 | .nt { color: #000080 } // Name.Tag 48 | .nv { color: #008080 } // Name.Variable 49 | .ow { font-weight: bold } // Operator.Word 50 | .w { color: #bbb } // Text.Whitespace 51 | .mf { color: #099 } // Literal.Number.Float 52 | .mh { color: #099 } // Literal.Number.Hex 53 | .mi { color: #099 } // Literal.Number.Integer 54 | .mo { color: #099 } // Literal.Number.Oct 55 | .sb { color: #d14 } // Literal.String.Backtick 56 | .sc { color: #d14 } // Literal.String.Char 57 | .sd { color: #d14 } // Literal.String.Doc 58 | .s2 { color: #d14 } // Literal.String.Double 59 | .se { color: #d14 } // Literal.String.Escape 60 | .sh { color: #d14 } // Literal.String.Heredoc 61 | .si { color: #d14 } // Literal.String.Interpol 62 | .sx { color: #d14 } // Literal.String.Other 63 | .sr { color: #009926 } // Literal.String.Regex 64 | .s1 { color: #d14 } // Literal.String.Single 65 | .ss { color: #990073 } // Literal.String.Symbol 66 | .bp { color: #999 } // Name.Builtin.Pseudo 67 | .vc { color: #008080 } // Name.Variable.Class 68 | .vg { color: #008080 } // Name.Variable.Global 69 | .vi { color: #008080 } // Name.Variable.Instance 70 | .il { color: #099 } // Literal.Number.Integer.Long 71 | } 72 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/about.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: About 4 | permalink: /about/ 5 | --- 6 | 7 | This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](http://jekyllrb.com/) 8 | 9 | You can find the source code for the Jekyll new theme at: 10 | {% include icon-github.html username="jglovier" %} / 11 | [jekyll-new](https://github.com/jglovier/jekyll-new) 12 | 13 | You can find the source code for Jekyll at 14 | {% include icon-github.html username="jekyll" %} / 15 | [jekyll](https://github.com/jekyll/jekyll) 16 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/bootstrap_templates/catalogue.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "contentTypes": [ 4 | { 5 | "id": "product", 6 | "name": "Product", 7 | "displayField": "productName", 8 | "fields": [ 9 | { 10 | "id": "productName", 11 | "name": "Product name", 12 | "type": "Text" 13 | }, 14 | { 15 | "id": "slug", 16 | "name": "Slug", 17 | "type": "Symbol" 18 | }, 19 | { 20 | "id": "productDescription", 21 | "name": "Description", 22 | "type": "Text" 23 | }, 24 | { 25 | "id": "sizetypecolor", 26 | "name": "Size/Type/Color", 27 | "type": "Symbol" 28 | }, 29 | { 30 | "id": "image", 31 | "name": "Image", 32 | "type": "Array", 33 | "items": { 34 | "type": "Link", 35 | "linkType": "Asset" 36 | } 37 | }, 38 | { 39 | "id": "tags", 40 | "name": "Tags", 41 | "type": "Array", 42 | "items": { 43 | "type": "Symbol" 44 | } 45 | }, 46 | { 47 | "id": "categories", 48 | "name": "Categories", 49 | "type": "Array", 50 | "items": { 51 | "type": "Link", 52 | "linkType": "Entry" 53 | } 54 | }, 55 | { 56 | "id": "price", 57 | "name": "Price", 58 | "type": "Number" 59 | }, 60 | { 61 | "id": "brand", 62 | "name": "Brand", 63 | "type": "Link", 64 | "linkType": "Entry" 65 | }, 66 | { 67 | "id": "quantity", 68 | "name": "Quantity", 69 | "type": "Integer" 70 | }, 71 | { 72 | "id": "sku", 73 | "name": "SKU", 74 | "type": "Symbol" 75 | }, 76 | { 77 | "id": "website", 78 | "name": "Available at", 79 | "type": "Symbol" 80 | } 81 | ] 82 | }, 83 | { 84 | "id": "category", 85 | "name": "Category", 86 | "displayField": "title", 87 | "fields": [ 88 | { 89 | "id": "title", 90 | "name": "Title", 91 | "type": "Text" 92 | }, 93 | { 94 | "id": "icon", 95 | "name": "Icon", 96 | "type": "Link", 97 | "linkType": "Asset" 98 | }, 99 | { 100 | "id": "categoryDescription", 101 | "name": "Description", 102 | "type": "Text" 103 | } 104 | ] 105 | }, 106 | { 107 | "id": "brand", 108 | "name": "Brand", 109 | "displayField": "companyName", 110 | "fields": [ 111 | { 112 | "id": "companyName", 113 | "name": "Company name", 114 | "type": "Text" 115 | }, 116 | { 117 | "id": "logo", 118 | "name": "Logo", 119 | "type": "Link", 120 | "linkType": "Asset" 121 | }, 122 | { 123 | "id": "companyDescription", 124 | "name": "Description", 125 | "type": "Text" 126 | }, 127 | { 128 | "id": "website", 129 | "name": "Website", 130 | "type": "Symbol" 131 | }, 132 | { 133 | "id": "twitter", 134 | "name": "Twitter", 135 | "type": "Symbol" 136 | }, 137 | { 138 | "id": "email", 139 | "name": "Email", 140 | "type": "Symbol" 141 | }, 142 | { 143 | "id": "phone", 144 | "name": "Phone #", 145 | "type": "Array", 146 | "items": { 147 | "type": "Symbol" 148 | } 149 | } 150 | ] 151 | } 152 | ], 153 | "assets": [ 154 | { 155 | "id": "10TkaLheGeQG6qQGqWYqUI", 156 | "title": "Whisk beaters", 157 | "file": { 158 | "filename": "ryugj83mqwa1asojwtwb", 159 | "url": "https://images.contentful.com/wl1z0pal05vy/10TkaLheGeQG6qQGqWYqUI/393edd89fbc3f322bb6ab050ca81831a/ryugj83mqwa1asojwtwb.jpg" 160 | } 161 | }, 162 | { 163 | "id": "1MgbdJNTsMWKI0W68oYqkU", 164 | "title": "Chive logo", 165 | "file": { 166 | "filename": "9ef190c59f0d375c0dea58b58a4bc1f0", 167 | "url": "https://images.contentful.com/wl1z0pal05vy/1MgbdJNTsMWKI0W68oYqkU/380777caf3b9146060b3928d70af99a0/9ef190c59f0d375c0dea58b58a4bc1f0.jpeg" 168 | } 169 | }, 170 | { 171 | "id": "2Y8LhXLnYAYqKCGEWG4EKI", 172 | "title": "Lemnos", 173 | "file": { 174 | "filename": "lemnos-logo", 175 | "url": "https://images.contentful.com/wl1z0pal05vy/2Y8LhXLnYAYqKCGEWG4EKI/6b12623a0f68ce40b5338c4f34b98b39/lemnos-logo.jpg" 176 | } 177 | }, 178 | { 179 | "id": "3wtvPBbBjiMKqKKga8I2Cu", 180 | "title": "Normann Copenhagen", 181 | "file": { 182 | "filename": "zJYzDlGk", 183 | "url": "https://images.contentful.com/wl1z0pal05vy/3wtvPBbBjiMKqKKga8I2Cu/a5fd08c6dba9eb4cb6f6041bd4c4c700/zJYzDlGk.jpeg" 184 | } 185 | }, 186 | { 187 | "id": "4zj1ZOfHgQ8oqgaSKm4Qo2", 188 | "title": "Playsam", 189 | "file": { 190 | "filename": "playsam", 191 | "url": "https://images.contentful.com/wl1z0pal05vy/4zj1ZOfHgQ8oqgaSKm4Qo2/7b37248b127698ee0d9da1d1d49ccac4/playsam.jpg" 192 | } 193 | }, 194 | { 195 | "id": "6m5AJ9vMPKc8OUoQeoCS4o", 196 | "title": "Home and Kitchen", 197 | "file": { 198 | "filename": "1418244847_Streamline-18-256", 199 | "url": "https://images.contentful.com/wl1z0pal05vy/6m5AJ9vMPKc8OUoQeoCS4o/64b4c38aa13cb6c721e7597b0116e851/1418244847_Streamline-18-256.png" 200 | } 201 | }, 202 | { 203 | "id": "6s3iG2OVmoUcosmA8ocqsG", 204 | "title": "House icon", 205 | "file": { 206 | "filename": "1418244847_Streamline-18-256 (1)", 207 | "url": "https://images.contentful.com/wl1z0pal05vy/6s3iG2OVmoUcosmA8ocqsG/07f529c1ea9e5ec0d7c23a063126020d/1418244847_Streamline-18-256__1_.png" 208 | } 209 | }, 210 | { 211 | "id": "6t4HKjytPi0mYgs240wkG", 212 | "title": "Toys", 213 | "file": { 214 | "filename": "toys_512pxGREY", 215 | "url": "https://images.contentful.com/wl1z0pal05vy/6t4HKjytPi0mYgs240wkG/ce975e9d2c67af83fd570c08b961ac5e/toys_512pxGREY.png" 216 | } 217 | }, 218 | { 219 | "id": "KTRF62Q4gg60q6WCsWKw8", 220 | "title": "SoSo Wall Clock", 221 | "file": { 222 | "filename": "soso.clock", 223 | "url": "https://images.contentful.com/wl1z0pal05vy/KTRF62Q4gg60q6WCsWKw8/8ef0460460c427b0671214500d259504/soso.clock.jpg" 224 | } 225 | }, 226 | { 227 | "id": "Xc0ny7GWsMEMCeASWO2um", 228 | "title": "Hudson Wall Cup ", 229 | "file": { 230 | "filename": "jqvtazcyfwseah9fmysz", 231 | "url": "https://images.contentful.com/wl1z0pal05vy/Xc0ny7GWsMEMCeASWO2um/e3fb971932a49ee6ad3fc292cf7c14b3/jqvtazcyfwseah9fmysz.jpg" 232 | } 233 | }, 234 | { 235 | "id": "wtrHxeu3zEoEce2MokCSi", 236 | "title": "Playsam Streamliner", 237 | "file": { 238 | "filename": "quwowooybuqbl6ntboz3", 239 | "url": "https://images.contentful.com/wl1z0pal05vy/wtrHxeu3zEoEce2MokCSi/88765b99dba8d69101cc58fce66b63c7/quwowooybuqbl6ntboz3.jpg" 240 | } 241 | } 242 | ], 243 | "entries": { 244 | "brand": [ 245 | { 246 | "sys": { 247 | "id": "4LgMotpNF6W20YKmuemW0a" 248 | }, 249 | "fields": { 250 | "companyName": "Lemnos", 251 | "website": "http://www.lemnos.jp/en/", 252 | "email": "info@acgears.com", 253 | "phone": [ 254 | "+1 212 260 2269" 255 | ], 256 | "logo": { 257 | "linkType": "Asset", 258 | "id": "2Y8LhXLnYAYqKCGEWG4EKI" 259 | }, 260 | "companyDescription": "TAKATA Lemnos Inc. was founded in 1947 as a brass casting manufacturing industry in Takaoka-city, Toyama Prefecture, Japan and we launched out into the full-scale business trade with Seiko Clock Co., Ltd. since 1966.\n\nWe entered into the development for the original planning from late 1980 and \"Lemnos Brand\" recognized as the global design clock by a masterpiece \"HOLA\" designed by Kazuo KAWASAKI which released in 1989.\n\nAfterwards, we made a lot of projects with well-known designers who took in active in Japan and overseas such as Riki WATANABE, Kazuo KAWASAKI, Shin AZUMI, Tomoko AZUMI, Kanae TSUKAMOTO etc. and we made announcement of their fine works abounding in artistry and prominent designs. In addition, we realized to make a special project by the collaboration with Andrea Branzi, a well-known architect in the world.\n\nLemnos brand products are now highly praised from the design shops and the interior shops all over the world.\n\nIn recent years, we also have been given high priority to develop interior accessories making full use of our traditional techniques by the founding manufacturer and we always focus our minds on the development for the new Lemnos products in the new market.\n\nOur Lemnos products are made carefully by our craftsmen finely honed skillful techniques in Japan. They surely bring out the attractiveness of the materials to the maximum and create fine products not being influenced on the fashion trend accordingly. TAKATA Lemnos Inc. definitely would like to be innovative and continuously propose the beauty lasts forever." 261 | } 262 | }, 263 | { 264 | "sys": { 265 | "id": "651CQ8rLoIYCeY6G0QG22q" 266 | }, 267 | "fields": { 268 | "companyName": "Normann Copenhagen", 269 | "logo": { 270 | "linkType": "Asset", 271 | "id": "3wtvPBbBjiMKqKKga8I2Cu" 272 | }, 273 | "companyDescription": "Normann Copenhagen is a way of living - a mindset. We love to challenge the conventional design rules. This is why you will find traditional materials put into untraditional use such as a Stone Hook made of Icelandic stones, a vase made out of silicon and last but not least a dog made out of plastic.", 274 | "website": "http://www.normann-copenhagen.com/", 275 | "twitter": "https://twitter.com/NormannCPH", 276 | "email": "normann@normann-copenhagen.com", 277 | "phone": [ 278 | "+45 35 55 44 59" 279 | ] 280 | } 281 | }, 282 | { 283 | "sys": { 284 | "id": "JrePkDVYomE8AwcuCUyMi" 285 | }, 286 | "fields": { 287 | "companyDescription": "Playsam is the leading Scandinavian design company for executive wooden toy gift. Scandinavian design playful creativity, integrity and sophistication are Playsam. Scandinavian design and wooden toy makes Playsam gift lovely to the world of design since 1984.", 288 | "companyName": "Playsam", 289 | "logo": { 290 | "linkType": "Asset", 291 | "id": "4zj1ZOfHgQ8oqgaSKm4Qo2" 292 | }, 293 | "website": "http://playsam.com/" 294 | } 295 | } 296 | ], 297 | "product": [ 298 | { 299 | "sys": { 300 | "id": "4BqrajvA8E6qwgkieoqmqO" 301 | }, 302 | "fields": { 303 | "productName": "SoSo Wall Clock", 304 | "productDescription": "The newly released SoSo Clock from Lemnos marries simple, clean design and bold, striking features. Its saturated marigold face is a lively pop of color to white or grey walls, but would also pair nicely with navy and maroon. Where most clocks feature numbers at the border of the clock, the SoSo brings them in tight to the middle, leaving a wide space between the numbers and the slight frame. The hour hand provides a nice interruption to the black and yellow of the clock - it is featured in a brilliant white. Despite its bold color and contrast, the SoSo maintains a clean, pure aesthetic that is suitable to a variety of contemporary interiors.", 305 | "image": [ 306 | { 307 | "linkType": "Asset", 308 | "id": "KTRF62Q4gg60q6WCsWKw8" 309 | } 310 | ], 311 | "categories": [ 312 | { 313 | "linkType": "Entry", 314 | "id": "7LAnCobuuWYSqks6wAwY2a" 315 | } 316 | ], 317 | "price": 120, 318 | "quantity": 3, 319 | "sku": "B00MG4ULK2", 320 | "tags": [ 321 | "home décor", 322 | "clocks", 323 | "interior design", 324 | "yellow", 325 | "gifts" 326 | ], 327 | "sizetypecolor": "10\" x 2.2\"", 328 | "brand": { 329 | "linkType": "Entry", 330 | "id": "4LgMotpNF6W20YKmuemW0a" 331 | }, 332 | "website": "http://store.dwell.com/soso-wall-clock.html", 333 | "slug": "soso-wall-clock" 334 | } 335 | }, 336 | { 337 | "sys": { 338 | "id": "6dbjWqNd9SqccegcqYq224" 339 | }, 340 | "fields": { 341 | "slug": "whisk-beater", 342 | "productName": "Whisk Beater", 343 | "productDescription": "A creative little whisk that comes in 8 different colors. Handy and easy to clean after use. A great gift idea.", 344 | "sizetypecolor": "0.8 x 0.8 x 11.2 inches; 1.6 ounces", 345 | "image": [ 346 | { 347 | "linkType": "Asset", 348 | "id": "10TkaLheGeQG6qQGqWYqUI" 349 | } 350 | ], 351 | "tags": [ 352 | "kitchen", 353 | "accessories", 354 | "whisk", 355 | "scandinavia", 356 | "design" 357 | ], 358 | "categories": [ 359 | { 360 | "linkType": "Entry", 361 | "id": "7LAnCobuuWYSqks6wAwY2a" 362 | } 363 | ], 364 | "website": "http://www.amazon.com/dp/B0081F2CCK/", 365 | "sku": "B0081F2CCK", 366 | "quantity": 89, 367 | "brand": { 368 | "linkType": "Entry", 369 | "id": "651CQ8rLoIYCeY6G0QG22q" 370 | }, 371 | "price": 22 372 | } 373 | }, 374 | { 375 | "sys": { 376 | "id": "5KsDBWseXY6QegucYAoacS" 377 | }, 378 | "fields": { 379 | "slug": "playsam-streamliner-classic-car-espresso", 380 | "productName": "Playsam Streamliner Classic Car, Espresso", 381 | "productDescription": "A classic Playsam design, the Streamliner Classic Car has been selected as Swedish Design Classic by the Swedish National Museum for its inventive style and sleek surface. It's no wonder that this wooden car has also been a long-standing favorite for children both big and small!", 382 | "sizetypecolor": "Length: 135 mm | color: espresso, green, or icar (white)", 383 | "image": [ 384 | { 385 | "linkType": "Asset", 386 | "id": "wtrHxeu3zEoEce2MokCSi" 387 | } 388 | ], 389 | "tags": [ 390 | "wood", 391 | "toy", 392 | "car", 393 | "sweden", 394 | "design" 395 | ], 396 | "categories": [ 397 | { 398 | "linkType": "Entry", 399 | "id": "24DPGBDeGEaYy8ms4Y8QMQ" 400 | } 401 | ], 402 | "website": "http://www.amazon.com/dp/B001R6JUZ2/", 403 | "sku": "B001R6JUZ2", 404 | "quantity": 56, 405 | "price": 44, 406 | "brand": { 407 | "linkType": "Entry", 408 | "id": "JrePkDVYomE8AwcuCUyMi" 409 | } 410 | } 411 | }, 412 | { 413 | "sys": { 414 | "id": "3DVqIYj4dOwwcKu6sgqOgg" 415 | }, 416 | "fields": { 417 | "slug": "hudson-wall-cup", 418 | "productName": "Hudson Wall Cup", 419 | "productDescription": "Wall Hanging Glass Flower Vase and Terrarium", 420 | "sizetypecolor": "3 x 3 x 5 inches; 5.3 ounces", 421 | "image": [ 422 | { 423 | "linkType": "Asset", 424 | "id": "Xc0ny7GWsMEMCeASWO2um" 425 | } 426 | ], 427 | "tags": [ 428 | "vase", 429 | "flowers", 430 | "accessories" 431 | ], 432 | "categories": [ 433 | { 434 | "linkType": "Entry", 435 | "id": "7LAnCobuuWYSqks6wAwY2a" 436 | } 437 | ], 438 | "price": 11, 439 | "quantity": 101, 440 | "sku": "B00E82D7I8", 441 | "website": "http://www.amazon.com/dp/B00E82D7I8/" 442 | } 443 | } 444 | ], 445 | "category": [ 446 | { 447 | "sys": { 448 | "id": "7LAnCobuuWYSqks6wAwY2a" 449 | }, 450 | "fields": { 451 | "title": "Home & Kitchen", 452 | "categoryDescription": "Shop for furniture, bedding, bath, vacuums, kitchen products, and more", 453 | "icon": { 454 | "linkType": "Asset", 455 | "id": "6m5AJ9vMPKc8OUoQeoCS4o" 456 | } 457 | } 458 | }, 459 | { 460 | "sys": { 461 | "id": "24DPGBDeGEaYy8ms4Y8QMQ" 462 | }, 463 | "fields": { 464 | "title": "Toys", 465 | "categoryDescription": "Shop for toys, games, educational aids", 466 | "icon": { 467 | "linkType": "Asset", 468 | "id": "6t4HKjytPi0mYgs240wkG" 469 | } 470 | } 471 | } 472 | ] 473 | } 474 | } 475 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/css/main.scss: -------------------------------------------------------------------------------- 1 | --- 2 | # Only the main Sass file needs front matter (the dashes are enough) 3 | --- 4 | @charset "utf-8"; 5 | 6 | 7 | 8 | // Our variables 9 | $base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 10 | $base-font-size: 16px; 11 | $base-font-weight: 400; 12 | $small-font-size: $base-font-size * 0.875; 13 | $base-line-height: 1.5; 14 | 15 | $spacing-unit: 30px; 16 | 17 | $text-color: #111; 18 | $background-color: #fdfdfd; 19 | $brand-color: #2a7ae2; 20 | 21 | $grey-color: #828282; 22 | $grey-color-light: lighten($grey-color, 40%); 23 | $grey-color-dark: darken($grey-color, 25%); 24 | 25 | // Width of the content area 26 | $content-width: 800px; 27 | 28 | $on-palm: 600px; 29 | $on-laptop: 800px; 30 | 31 | 32 | 33 | // Use media queries like this: 34 | // @include media-query($on-palm) { 35 | // .wrapper { 36 | // padding-right: $spacing-unit / 2; 37 | // padding-left: $spacing-unit / 2; 38 | // } 39 | // } 40 | @mixin media-query($device) { 41 | @media screen and (max-width: $device) { 42 | @content; 43 | } 44 | } 45 | 46 | 47 | 48 | // Import partials from `sass_dir` (defaults to `_sass`) 49 | @import 50 | "base", 51 | "layout", 52 | "syntax-highlighting" 53 | ; 54 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/feed.xml: -------------------------------------------------------------------------------- 1 | --- 2 | layout: null 3 | --- 4 | 5 | 6 | 7 | {{ site.title | xml_escape }} 8 | {{ site.description | xml_escape }} 9 | {{ site.url }}{{ site.baseurl }}/ 10 | 11 | {{ site.time | date_to_rfc822 }} 12 | {{ site.time | date_to_rfc822 }} 13 | Jekyll v{{ jekyll.version }} 14 | {% for post in site.posts limit:10 %} 15 | 16 | {{ post.title | xml_escape }} 17 | {{ post.content | xml_escape }} 18 | {{ post.date | date_to_rfc822 }} 19 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 20 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 21 | {% for tag in post.tags %} 22 | {{ tag | xml_escape }} 23 | {% endfor %} 24 | {% for cat in post.categories %} 25 | {{ cat | xml_escape }} 26 | {% endfor %} 27 | 28 | {% endfor %} 29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/multiple_spaces/example/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 | 7 |

Multiple Spaces Example

8 | 9 |

Useful Links

10 |
    11 | {% for link in site.data.contentful.spaces.links.link %} 12 |
  • 13 |

    {{ link.websiteName }}

    14 |
  • 15 | {% endfor %} 16 |
17 | 18 |

Catalogue

19 |

Products

20 | {% for product in site.data.contentful.spaces.catalogue.product %} 21 |
22 |
23 | {{ product.image[0].title }} 24 |
25 |
26 |

{{ product.productName }} 27 | {% if product.brand %} 28 | by {{ product.brand.companyName }} 29 | {% endif %} 30 |

31 |
{{ product.categories | map: 'to_liquid' | map: 'title' | array_to_sequence_string }}
32 |

{{ product.productDescription | slice: 0, 100 }}...

33 | Buy Now! 34 |
Tags: {{ product.tags | join: ", " }}
35 |
36 | {% if product.image.size > 1 %} 37 |
38 |
Other Images
39 |
40 | {% for image in product.image | slice: 1, product.image.size %} 41 |
42 | {{ image.title }} 43 |
44 | {% endfor %} 45 |
46 |
47 | {% endif %} 48 |
49 | {% endfor %} 50 | 51 |
52 | 53 |
54 |
55 | 56 |
57 | 58 |

Brands

59 | {% for brand in site.data.contentful.spaces.catalogue.brand %} 60 |
61 |
62 | {{ brand.logo.title }} 63 |
64 |
65 |

{{ brand.companyName }}

66 |

{{ brand.companyDescription | slice: 0, 100 }}...

67 |
68 | {% if brand.phone %} 69 | Phone No: {{ brand.phone | join: ", " }}   |   70 | {% endif %} 71 | Go to website   |   72 | Email 73 |
74 |
75 |
76 |
77 | {% endfor %} 78 | 79 |
80 | 81 |
82 |
83 | 84 | 85 |
86 | 87 |

Categories

88 | {% for category in site.data.contentful.spaces.catalogue.category %} 89 |
90 |
91 | {{ category.icon.title }} 92 |
93 |
94 |

{{ category.title }}

95 |

{{ category.categoryDescription }}

96 |
97 |
98 |
99 | {% endfor %} 100 |
101 | -------------------------------------------------------------------------------- /examples/single_space/README.md: -------------------------------------------------------------------------------- 1 | # Single Content Type Example 2 | 3 | ## How to Run 4 | 5 | Paste the following command inside your terminal: 6 | 7 | ```bash 8 | echo "Checkout Repository" && git clone git@github.com:contentful/contentful_jekyll_examples.git && \ 9 | echo "Go to This Example's Folder" && cd contentful_jekyll_examples/examples/single_space/example && \ 10 | echo "Install Dependencies" && bundle install && \ 11 | echo "Fetch Contentful Data" && bundle exec jekyll contentful && \ 12 | echo "Start Jekyll Server" && bundle exec jekyll server 13 | ``` 14 | 15 | Then open your browser and go to: [localhost:4000](http://localhost:4000) 16 | 17 | ## Configuration 18 | 19 | ```yml 20 | contentful: 21 | spaces: 22 | - links: 23 | space: 3fwy09k2gc9g 24 | access_token: 25f513e34e33916336bba1d740d135035d4e1d63b87fc446da374fec3aaccaca 25 | ``` 26 | 27 | In [`_config.yml`](./example/_config.yml) you will find the above cited configuration block. Let's go through it line by line: 28 | 29 | * `contentful:` - Enables Contentful Extension 30 | * ` spaces:` - Tells the Extension to consider the following elements as a Space 31 | * ` - links:` - Creates a `links` Space reference, so that it can be used via that name on the views 32 | * ` space: 3fwy09k2gc9g` - Sets the Space ID 33 | * ` access_token: 25f5...` - Sets the Space Access Token 34 | 35 | ## Views 36 | 37 | ```django 38 |
    39 | {% for link in site.data.contentful.spaces.links.link %} 40 |
  • 41 |

    {{ link.websiteName }}

    42 |
  • 43 | {% endfor %} 44 |
45 | ``` 46 | 47 | In [example/index.html](./example/index.html) you will find the above cited template code. Let's analyze the important bits: 48 | 49 | * `site.data.contentful.spaces` - Will contain a method for each Space you have defined, in this case `links` 50 | * Each Space will be a collection of entries fetched for it, each entry will have an ID and the Data 51 | -------------------------------------------------------------------------------- /examples/single_space/example/.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | _data 3 | .sass-cache 4 | .jekyll-metadata 5 | -------------------------------------------------------------------------------- /examples/single_space/example/Gemfile: -------------------------------------------------------------------------------- 1 | source 'http://rubygems.org' 2 | 3 | gem 'jekyll', '~> 3.6', '>= 3.6.3' 4 | 5 | gem 'contentful_bootstrap' 6 | 7 | group :jekyll_plugins do 8 | gem 'jekyll-contentful-data-import' 9 | end 10 | 11 | -------------------------------------------------------------------------------- /examples/single_space/example/_config.yml: -------------------------------------------------------------------------------- 1 | # Welcome to Jekyll! 2 | # 3 | # This config file is meant for settings that affect your whole blog, values 4 | # which you are expected to set up once and rarely need to edit after that. 5 | # For technical reasons, this file is *NOT* reloaded automatically when you use 6 | # 'jekyll serve'. If you change this file, please restart the server process. 7 | 8 | # Site settings 9 | title: Contentful Jekyll Single Space Example 10 | email: david.litvak@contentful.com 11 | description: > # this means to ignore newlines until "baseurl:" 12 | Single Space Example using Jekyll and Contentful 13 | baseurl: "" # the subpath of your site, e.g. /blog 14 | url: "http://yourdomain.com" # the base hostname & protocol for your site 15 | twitter_username: contentfulapp 16 | github_username: dlitvakb 17 | 18 | # Build settings 19 | markdown: kramdown 20 | 21 | contentful: 22 | spaces: 23 | - links: 24 | space: 3fwy09k2gc9g 25 | access_token: 25f513e34e33916336bba1d740d135035d4e1d63b87fc446da374fec3aaccaca 26 | -------------------------------------------------------------------------------- /examples/single_space/example/_includes/footer.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 6 | 7 | 34 | 35 |
36 | 37 |
38 | -------------------------------------------------------------------------------- /examples/single_space/example/_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %} 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/single_space/example/_includes/header.html: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /examples/single_space/example/_includes/icon-github.html: -------------------------------------------------------------------------------- 1 | {% include icon-github.svg %}{{ include.username }} 2 | -------------------------------------------------------------------------------- /examples/single_space/example/_includes/icon-github.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/single_space/example/_includes/icon-twitter.html: -------------------------------------------------------------------------------- 1 | {{ include.username }} 2 | -------------------------------------------------------------------------------- /examples/single_space/example/_includes/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/single_space/example/_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include head.html %} 5 | 6 | 7 | 8 | {% include header.html %} 9 | 10 |
11 |
12 | {{ content }} 13 |
14 |
15 | 16 | {% include footer.html %} 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /examples/single_space/example/_sass/_base.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Reset some basic elements 3 | */ 4 | body, h1, h2, h3, h4, h5, h6, 5 | p, blockquote, pre, hr, 6 | dl, dd, ol, ul, figure { 7 | margin: 0; 8 | padding: 0; 9 | } 10 | 11 | 12 | 13 | /** 14 | * Basic styling 15 | */ 16 | body { 17 | font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; 18 | color: $text-color; 19 | background-color: $background-color; 20 | -webkit-text-size-adjust: 100%; 21 | -webkit-font-feature-settings: "kern" 1; 22 | -moz-font-feature-settings: "kern" 1; 23 | -o-font-feature-settings: "kern" 1; 24 | font-feature-settings: "kern" 1; 25 | font-kerning: normal; 26 | } 27 | 28 | 29 | 30 | /** 31 | * Set `margin-bottom` to maintain vertical rhythm 32 | */ 33 | h1, h2, h3, h4, h5, h6, 34 | p, blockquote, pre, 35 | ul, ol, dl, figure, 36 | %vertical-rhythm { 37 | margin-bottom: $spacing-unit / 2; 38 | } 39 | 40 | 41 | 42 | /** 43 | * Images 44 | */ 45 | img { 46 | max-width: 100%; 47 | vertical-align: middle; 48 | } 49 | 50 | 51 | 52 | /** 53 | * Figures 54 | */ 55 | figure > img { 56 | display: block; 57 | } 58 | 59 | figcaption { 60 | font-size: $small-font-size; 61 | } 62 | 63 | 64 | 65 | /** 66 | * Lists 67 | */ 68 | ul, ol { 69 | margin-left: $spacing-unit; 70 | } 71 | 72 | li { 73 | > ul, 74 | > ol { 75 | margin-bottom: 0; 76 | } 77 | } 78 | 79 | 80 | 81 | /** 82 | * Headings 83 | */ 84 | h1, h2, h3, h4, h5, h6 { 85 | font-weight: $base-font-weight; 86 | } 87 | 88 | 89 | 90 | /** 91 | * Links 92 | */ 93 | a { 94 | color: $brand-color; 95 | text-decoration: none; 96 | 97 | &:visited { 98 | color: darken($brand-color, 15%); 99 | } 100 | 101 | &:hover { 102 | color: $text-color; 103 | text-decoration: underline; 104 | } 105 | } 106 | 107 | 108 | 109 | /** 110 | * Blockquotes 111 | */ 112 | blockquote { 113 | color: $grey-color; 114 | border-left: 4px solid $grey-color-light; 115 | padding-left: $spacing-unit / 2; 116 | font-size: 18px; 117 | letter-spacing: -1px; 118 | font-style: italic; 119 | 120 | > :last-child { 121 | margin-bottom: 0; 122 | } 123 | } 124 | 125 | 126 | 127 | /** 128 | * Code formatting 129 | */ 130 | pre, 131 | code { 132 | font-size: 15px; 133 | border: 1px solid $grey-color-light; 134 | border-radius: 3px; 135 | background-color: #eef; 136 | } 137 | 138 | code { 139 | padding: 1px 5px; 140 | } 141 | 142 | pre { 143 | padding: 8px 12px; 144 | overflow-x: auto; 145 | 146 | > code { 147 | border: 0; 148 | padding-right: 0; 149 | padding-left: 0; 150 | } 151 | } 152 | 153 | 154 | 155 | /** 156 | * Wrapper 157 | */ 158 | .wrapper { 159 | max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2)); 160 | max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); 161 | margin-right: auto; 162 | margin-left: auto; 163 | padding-right: $spacing-unit; 164 | padding-left: $spacing-unit; 165 | @extend %clearfix; 166 | 167 | @include media-query($on-laptop) { 168 | max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit})); 169 | max-width: calc(#{$content-width} - (#{$spacing-unit})); 170 | padding-right: $spacing-unit / 2; 171 | padding-left: $spacing-unit / 2; 172 | } 173 | } 174 | 175 | 176 | 177 | /** 178 | * Clearfix 179 | */ 180 | %clearfix { 181 | 182 | &:after { 183 | content: ""; 184 | display: table; 185 | clear: both; 186 | } 187 | } 188 | 189 | 190 | 191 | /** 192 | * Icons 193 | */ 194 | .icon { 195 | 196 | > svg { 197 | display: inline-block; 198 | width: 16px; 199 | height: 16px; 200 | vertical-align: middle; 201 | 202 | path { 203 | fill: $grey-color; 204 | } 205 | } 206 | } 207 | -------------------------------------------------------------------------------- /examples/single_space/example/_sass/_layout.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Site header 3 | */ 4 | .site-header { 5 | border-top: 5px solid $grey-color-dark; 6 | border-bottom: 1px solid $grey-color-light; 7 | min-height: 56px; 8 | 9 | // Positioning context for the mobile navigation icon 10 | position: relative; 11 | } 12 | 13 | .site-title { 14 | font-size: 26px; 15 | font-weight: 300; 16 | line-height: 56px; 17 | letter-spacing: -1px; 18 | margin-bottom: 0; 19 | float: left; 20 | 21 | &, 22 | &:visited { 23 | color: $grey-color-dark; 24 | } 25 | } 26 | 27 | .site-nav { 28 | float: right; 29 | line-height: 56px; 30 | 31 | .menu-icon { 32 | display: none; 33 | } 34 | 35 | .page-link { 36 | color: $text-color; 37 | line-height: $base-line-height; 38 | 39 | // Gaps between nav items, but not on the last one 40 | &:not(:last-child) { 41 | margin-right: 20px; 42 | } 43 | } 44 | 45 | @include media-query($on-palm) { 46 | position: absolute; 47 | top: 9px; 48 | right: $spacing-unit / 2; 49 | background-color: $background-color; 50 | border: 1px solid $grey-color-light; 51 | border-radius: 5px; 52 | text-align: right; 53 | 54 | .menu-icon { 55 | display: block; 56 | float: right; 57 | width: 36px; 58 | height: 26px; 59 | line-height: 0; 60 | padding-top: 10px; 61 | text-align: center; 62 | 63 | > svg { 64 | width: 18px; 65 | height: 15px; 66 | 67 | path { 68 | fill: $grey-color-dark; 69 | } 70 | } 71 | } 72 | 73 | .trigger { 74 | clear: both; 75 | display: none; 76 | } 77 | 78 | &:hover .trigger { 79 | display: block; 80 | padding-bottom: 5px; 81 | } 82 | 83 | .page-link { 84 | display: block; 85 | padding: 5px 10px; 86 | 87 | &:not(:last-child) { 88 | margin-right: 0; 89 | } 90 | margin-left: 20px; 91 | } 92 | } 93 | } 94 | 95 | 96 | 97 | /** 98 | * Site footer 99 | */ 100 | .site-footer { 101 | border-top: 1px solid $grey-color-light; 102 | padding: $spacing-unit 0; 103 | } 104 | 105 | .footer-heading { 106 | font-size: 18px; 107 | margin-bottom: $spacing-unit / 2; 108 | } 109 | 110 | .contact-list, 111 | .social-media-list { 112 | list-style: none; 113 | margin-left: 0; 114 | } 115 | 116 | .footer-col-wrapper { 117 | font-size: 15px; 118 | color: $grey-color; 119 | margin-left: -$spacing-unit / 2; 120 | @extend %clearfix; 121 | } 122 | 123 | .footer-col { 124 | float: left; 125 | margin-bottom: $spacing-unit / 2; 126 | padding-left: $spacing-unit / 2; 127 | } 128 | 129 | .footer-col-1 { 130 | width: -webkit-calc(35% - (#{$spacing-unit} / 2)); 131 | width: calc(35% - (#{$spacing-unit} / 2)); 132 | } 133 | 134 | .footer-col-2 { 135 | width: -webkit-calc(20% - (#{$spacing-unit} / 2)); 136 | width: calc(20% - (#{$spacing-unit} / 2)); 137 | } 138 | 139 | .footer-col-3 { 140 | width: -webkit-calc(45% - (#{$spacing-unit} / 2)); 141 | width: calc(45% - (#{$spacing-unit} / 2)); 142 | } 143 | 144 | @include media-query($on-laptop) { 145 | .footer-col-1, 146 | .footer-col-2 { 147 | width: -webkit-calc(50% - (#{$spacing-unit} / 2)); 148 | width: calc(50% - (#{$spacing-unit} / 2)); 149 | } 150 | 151 | .footer-col-3 { 152 | width: -webkit-calc(100% - (#{$spacing-unit} / 2)); 153 | width: calc(100% - (#{$spacing-unit} / 2)); 154 | } 155 | } 156 | 157 | @include media-query($on-palm) { 158 | .footer-col { 159 | float: none; 160 | width: -webkit-calc(100% - (#{$spacing-unit} / 2)); 161 | width: calc(100% - (#{$spacing-unit} / 2)); 162 | } 163 | } 164 | 165 | 166 | 167 | /** 168 | * Page content 169 | */ 170 | .page-content { 171 | padding: $spacing-unit 0; 172 | } 173 | 174 | .page-heading { 175 | font-size: 20px; 176 | } 177 | 178 | .post-list { 179 | margin-left: 0; 180 | list-style: none; 181 | 182 | > li { 183 | margin-bottom: $spacing-unit; 184 | } 185 | } 186 | 187 | .post-meta { 188 | font-size: $small-font-size; 189 | color: $grey-color; 190 | } 191 | 192 | .post-link { 193 | display: block; 194 | font-size: 24px; 195 | } 196 | 197 | 198 | 199 | /** 200 | * Posts 201 | */ 202 | .post-header { 203 | margin-bottom: $spacing-unit; 204 | } 205 | 206 | .post-title { 207 | font-size: 42px; 208 | letter-spacing: -1px; 209 | line-height: 1; 210 | 211 | @include media-query($on-laptop) { 212 | font-size: 36px; 213 | } 214 | } 215 | 216 | .post-content { 217 | margin-bottom: $spacing-unit; 218 | 219 | h2 { 220 | font-size: 32px; 221 | 222 | @include media-query($on-laptop) { 223 | font-size: 28px; 224 | } 225 | } 226 | 227 | h3 { 228 | font-size: 26px; 229 | 230 | @include media-query($on-laptop) { 231 | font-size: 22px; 232 | } 233 | } 234 | 235 | h4 { 236 | font-size: 20px; 237 | 238 | @include media-query($on-laptop) { 239 | font-size: 18px; 240 | } 241 | } 242 | } 243 | -------------------------------------------------------------------------------- /examples/single_space/example/_sass/_syntax-highlighting.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Syntax highlighting styles 3 | */ 4 | .highlight { 5 | background: #fff; 6 | @extend %vertical-rhythm; 7 | 8 | .highlighter-rouge & { 9 | background: #eef; 10 | } 11 | 12 | .c { color: #998; font-style: italic } // Comment 13 | .err { color: #a61717; background-color: #e3d2d2 } // Error 14 | .k { font-weight: bold } // Keyword 15 | .o { font-weight: bold } // Operator 16 | .cm { color: #998; font-style: italic } // Comment.Multiline 17 | .cp { color: #999; font-weight: bold } // Comment.Preproc 18 | .c1 { color: #998; font-style: italic } // Comment.Single 19 | .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special 20 | .gd { color: #000; background-color: #fdd } // Generic.Deleted 21 | .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific 22 | .ge { font-style: italic } // Generic.Emph 23 | .gr { color: #a00 } // Generic.Error 24 | .gh { color: #999 } // Generic.Heading 25 | .gi { color: #000; background-color: #dfd } // Generic.Inserted 26 | .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific 27 | .go { color: #888 } // Generic.Output 28 | .gp { color: #555 } // Generic.Prompt 29 | .gs { font-weight: bold } // Generic.Strong 30 | .gu { color: #aaa } // Generic.Subheading 31 | .gt { color: #a00 } // Generic.Traceback 32 | .kc { font-weight: bold } // Keyword.Constant 33 | .kd { font-weight: bold } // Keyword.Declaration 34 | .kp { font-weight: bold } // Keyword.Pseudo 35 | .kr { font-weight: bold } // Keyword.Reserved 36 | .kt { color: #458; font-weight: bold } // Keyword.Type 37 | .m { color: #099 } // Literal.Number 38 | .s { color: #d14 } // Literal.String 39 | .na { color: #008080 } // Name.Attribute 40 | .nb { color: #0086B3 } // Name.Builtin 41 | .nc { color: #458; font-weight: bold } // Name.Class 42 | .no { color: #008080 } // Name.Constant 43 | .ni { color: #800080 } // Name.Entity 44 | .ne { color: #900; font-weight: bold } // Name.Exception 45 | .nf { color: #900; font-weight: bold } // Name.Function 46 | .nn { color: #555 } // Name.Namespace 47 | .nt { color: #000080 } // Name.Tag 48 | .nv { color: #008080 } // Name.Variable 49 | .ow { font-weight: bold } // Operator.Word 50 | .w { color: #bbb } // Text.Whitespace 51 | .mf { color: #099 } // Literal.Number.Float 52 | .mh { color: #099 } // Literal.Number.Hex 53 | .mi { color: #099 } // Literal.Number.Integer 54 | .mo { color: #099 } // Literal.Number.Oct 55 | .sb { color: #d14 } // Literal.String.Backtick 56 | .sc { color: #d14 } // Literal.String.Char 57 | .sd { color: #d14 } // Literal.String.Doc 58 | .s2 { color: #d14 } // Literal.String.Double 59 | .se { color: #d14 } // Literal.String.Escape 60 | .sh { color: #d14 } // Literal.String.Heredoc 61 | .si { color: #d14 } // Literal.String.Interpol 62 | .sx { color: #d14 } // Literal.String.Other 63 | .sr { color: #009926 } // Literal.String.Regex 64 | .s1 { color: #d14 } // Literal.String.Single 65 | .ss { color: #990073 } // Literal.String.Symbol 66 | .bp { color: #999 } // Name.Builtin.Pseudo 67 | .vc { color: #008080 } // Name.Variable.Class 68 | .vg { color: #008080 } // Name.Variable.Global 69 | .vi { color: #008080 } // Name.Variable.Instance 70 | .il { color: #099 } // Literal.Number.Integer.Long 71 | } 72 | -------------------------------------------------------------------------------- /examples/single_space/example/about.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: About 4 | permalink: /about/ 5 | --- 6 | 7 | This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](http://jekyllrb.com/) 8 | 9 | You can find the source code for the Jekyll new theme at: 10 | {% include icon-github.html username="jglovier" %} / 11 | [jekyll-new](https://github.com/jglovier/jekyll-new) 12 | 13 | You can find the source code for Jekyll at 14 | {% include icon-github.html username="jekyll" %} / 15 | [jekyll](https://github.com/jekyll/jekyll) 16 | -------------------------------------------------------------------------------- /examples/single_space/example/css/main.scss: -------------------------------------------------------------------------------- 1 | --- 2 | # Only the main Sass file needs front matter (the dashes are enough) 3 | --- 4 | @charset "utf-8"; 5 | 6 | 7 | 8 | // Our variables 9 | $base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 10 | $base-font-size: 16px; 11 | $base-font-weight: 400; 12 | $small-font-size: $base-font-size * 0.875; 13 | $base-line-height: 1.5; 14 | 15 | $spacing-unit: 30px; 16 | 17 | $text-color: #111; 18 | $background-color: #fdfdfd; 19 | $brand-color: #2a7ae2; 20 | 21 | $grey-color: #828282; 22 | $grey-color-light: lighten($grey-color, 40%); 23 | $grey-color-dark: darken($grey-color, 25%); 24 | 25 | // Width of the content area 26 | $content-width: 800px; 27 | 28 | $on-palm: 600px; 29 | $on-laptop: 800px; 30 | 31 | 32 | 33 | // Use media queries like this: 34 | // @include media-query($on-palm) { 35 | // .wrapper { 36 | // padding-right: $spacing-unit / 2; 37 | // padding-left: $spacing-unit / 2; 38 | // } 39 | // } 40 | @mixin media-query($device) { 41 | @media screen and (max-width: $device) { 42 | @content; 43 | } 44 | } 45 | 46 | 47 | 48 | // Import partials from `sass_dir` (defaults to `_sass`) 49 | @import 50 | "base", 51 | "layout", 52 | "syntax-highlighting" 53 | ; 54 | -------------------------------------------------------------------------------- /examples/single_space/example/feed.xml: -------------------------------------------------------------------------------- 1 | --- 2 | layout: null 3 | --- 4 | 5 | 6 | 7 | {{ site.title | xml_escape }} 8 | {{ site.description | xml_escape }} 9 | {{ site.url }}{{ site.baseurl }}/ 10 | 11 | {{ site.time | date_to_rfc822 }} 12 | {{ site.time | date_to_rfc822 }} 13 | Jekyll v{{ jekyll.version }} 14 | {% for post in site.posts limit:10 %} 15 | 16 | {{ post.title | xml_escape }} 17 | {{ post.content | xml_escape }} 18 | {{ post.date | date_to_rfc822 }} 19 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 20 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 21 | {% for tag in post.tags %} 22 | {{ tag | xml_escape }} 23 | {% endfor %} 24 | {% for cat in post.categories %} 25 | {{ cat | xml_escape }} 26 | {% endfor %} 27 | 28 | {% endfor %} 29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/single_space/example/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 | 7 |

Useful Links

8 | 9 |
    10 | {% for link in site.data.contentful.spaces.links.link %} 11 |
  • 12 |

    {{ link.websiteName }}

    13 |
  • 14 | {% endfor %} 15 |
16 |
17 | --------------------------------------------------------------------------------