├── .gitignore ├── CONTRIBUTING.md ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── README.md └── examples ├── multiple_content_types ├── .gitignore ├── Gemfile ├── README.md ├── bootstrap_templates │ └── catalogue.json ├── config.rb └── source │ ├── images │ ├── background.png │ └── middleman.png │ ├── index.html.erb │ ├── javascripts │ └── all.js │ ├── layouts │ └── layout.erb │ └── stylesheets │ ├── all.css │ └── normalize.css ├── multiple_spaces ├── .gitignore ├── Gemfile ├── README.md ├── bootstrap_templates │ └── catalogue.json ├── config.rb └── source │ ├── images │ ├── background.png │ └── middleman.png │ ├── index.html.erb │ ├── javascripts │ └── all.js │ ├── layouts │ └── layout.erb │ └── stylesheets │ ├── all.css │ └── normalize.css └── single_content_type ├── .gitignore ├── .links-space-hash ├── Gemfile ├── README.md ├── config.rb └── source ├── images ├── background.png └── middleman.png ├── index.html.erb ├── javascripts └── all.js ├── layouts └── layout.erb └── stylesheets └── all.css /.gitignore: -------------------------------------------------------------------------------- 1 | *.rbc 2 | capybara-*.html 3 | .rspec 4 | /log 5 | /tmp 6 | /db/*.sqlite3 7 | /db/*.sqlite3-journal 8 | /public/system 9 | /coverage/ 10 | /spec/tmp 11 | **.orig 12 | rerun.txt 13 | pickle-email-*.html 14 | 15 | # TODO Comment out these rules if you are OK with secrets being uploaded to the repo 16 | config/initializers/secret_token.rb 17 | config/secrets.yml 18 | 19 | ## Environment normalisation: 20 | /.bundle 21 | /vendor/bundle 22 | 23 | # these should all be checked in to normalise the environment: 24 | # Gemfile.lock, .ruby-version, .ruby-gemset 25 | 26 | # unless supporting rvm < 1.11.0 or doing something fancy, ignore this: 27 | .rvmrc 28 | 29 | # if using bower-rails ignore default bower_components path bower.json files 30 | /vendor/assets/bower_components 31 | *.bowerrc 32 | bower.json 33 | 34 | # Ignore pow environment settings 35 | .powenv 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_middleman_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 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | # A sample Gemfile 2 | source 'https://rubygems.org' 3 | 4 | gem 'rack', '>= 1.6.11' 5 | gem 'contentful_middleman' 6 | gem 'contentful_bootstrap', '~> 3.0' 7 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | activesupport (5.0.7) 5 | concurrent-ruby (~> 1.0, >= 1.0.2) 6 | i18n (>= 0.7, < 2) 7 | minitest (~> 5.1) 8 | tzinfo (~> 1.1) 9 | addressable (2.5.2) 10 | public_suffix (>= 2.0.2, < 4.0) 11 | backports (3.11.4) 12 | concurrent-ruby (1.1.3) 13 | contentful (2.6.0) 14 | http (> 0.8, < 3.0) 15 | multi_json (~> 1) 16 | contentful-management (2.6.0) 17 | http (> 1.0, < 3.0) 18 | json (~> 1.8) 19 | multi_json (~> 1) 20 | contentful-webhook-listener (0.3.0) 21 | contentful_bootstrap (3.12.0) 22 | contentful (~> 2.6.0) 23 | contentful-management (~> 2.0, >= 2.0.2) 24 | inifile 25 | launchy 26 | contentful_middleman (4.2.0) 27 | contentful (~> 2.1) 28 | contentful-webhook-listener (~> 0.1) 29 | middleman-cli (~> 4.0) 30 | middleman-core (~> 4.0) 31 | rich_text_renderer (~> 0.1) 32 | contracts (0.13.0) 33 | domain_name (0.5.20180417) 34 | unf (>= 0.0.5, < 1.0.0) 35 | dotenv (2.5.0) 36 | erubis (2.7.0) 37 | execjs (2.7.0) 38 | fast_blank (1.0.0) 39 | fastimage (2.1.4) 40 | ffi (1.9.25) 41 | hamster (3.0.0) 42 | concurrent-ruby (~> 1.0) 43 | hashie (3.6.0) 44 | http (2.2.2) 45 | addressable (~> 2.3) 46 | http-cookie (~> 1.0) 47 | http-form_data (~> 1.0.1) 48 | http_parser.rb (~> 0.6.0) 49 | http-cookie (1.0.3) 50 | domain_name (~> 0.5) 51 | http-form_data (1.0.3) 52 | http_parser.rb (0.6.0) 53 | i18n (0.7.0) 54 | inifile (3.0.0) 55 | json (1.8.6) 56 | launchy (2.4.3) 57 | addressable (~> 2.3) 58 | listen (3.0.8) 59 | rb-fsevent (~> 0.9, >= 0.9.4) 60 | rb-inotify (~> 0.9, >= 0.9.7) 61 | memoist (0.16.0) 62 | middleman-cli (4.2.1) 63 | thor (>= 0.17.0, < 2.0) 64 | middleman-core (4.2.1) 65 | activesupport (>= 4.2, < 5.1) 66 | addressable (~> 2.3) 67 | backports (~> 3.6) 68 | bundler (~> 1.1) 69 | contracts (~> 0.13.0) 70 | dotenv 71 | erubis 72 | execjs (~> 2.0) 73 | fast_blank 74 | fastimage (~> 2.0) 75 | hamster (~> 3.0) 76 | hashie (~> 3.4) 77 | i18n (~> 0.7.0) 78 | listen (~> 3.0.0) 79 | memoist (~> 0.14) 80 | padrino-helpers (~> 0.13.0) 81 | parallel 82 | rack (>= 1.4.5, < 3) 83 | sass (>= 3.4) 84 | servolux 85 | tilt (~> 2.0) 86 | uglifier (~> 3.0) 87 | minitest (5.11.3) 88 | multi_json (1.13.1) 89 | padrino-helpers (0.13.3.4) 90 | i18n (~> 0.6, >= 0.6.7) 91 | padrino-support (= 0.13.3.4) 92 | tilt (>= 1.4.1, < 3) 93 | padrino-support (0.13.3.4) 94 | activesupport (>= 3.1) 95 | parallel (1.12.1) 96 | public_suffix (3.0.3) 97 | rack (2.0.8) 98 | rb-fsevent (0.10.3) 99 | rb-inotify (0.9.10) 100 | ffi (>= 0.5.0, < 2) 101 | rich_text_renderer (0.2.1) 102 | sass (3.7.2) 103 | sass-listen (~> 4.0.0) 104 | sass-listen (4.0.0) 105 | rb-fsevent (~> 0.9, >= 0.9.4) 106 | rb-inotify (~> 0.9, >= 0.9.7) 107 | servolux (0.13.0) 108 | thor (0.20.3) 109 | thread_safe (0.3.6) 110 | tilt (2.0.8) 111 | tzinfo (1.2.5) 112 | thread_safe (~> 0.1) 113 | uglifier (3.2.0) 114 | execjs (>= 0.3.0, < 3) 115 | unf (0.1.4) 116 | unf_ext 117 | unf_ext (0.0.7.5) 118 | 119 | PLATFORMS 120 | ruby 121 | 122 | DEPENDENCIES 123 | contentful_bootstrap (~> 3.0) 124 | contentful_middleman 125 | rack (>= 1.6.11) 126 | 127 | BUNDLED WITH 128 | 1.16.3 129 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 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 Middleman Examples 2 | 3 | A useful collection of examples using the [contentful_middleman](https://github.com/contentful/contentful_middleman) 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 Content Type](./examples/single_content_type) - Interesting Development Links Compilation 13 | * [Multiple Content Types](./examples/multiple_content_types) - Catalogue 14 | * [Multiple Spaces](./examples/multiple_spaces) - Combination of Both Examples 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/multiple_content_types/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | # 3 | # If you find yourself ignoring temporary files generated by your text editor 4 | # or operating system, you probably want to add a global ignore instead: 5 | # git config --global core.excludesfile ~/.gitignore_global 6 | 7 | # Ignore bundler config 8 | /.bundle 9 | 10 | # Ignore the build directory 11 | /build 12 | 13 | # Ignore the data directory 14 | /data 15 | .*-space-hash 16 | 17 | # Ignore cache 18 | /.sass-cache 19 | /.cache 20 | 21 | # Ignore .DS_store file 22 | .DS_Store 23 | -------------------------------------------------------------------------------- /examples/multiple_content_types/Gemfile: -------------------------------------------------------------------------------- 1 | # If you do not have OpenSSL installed, update 2 | # the following line to use "http://" instead 3 | source 'https://rubygems.org' 4 | 5 | gem "middleman", "~>3.4.0" 6 | 7 | gem "contentful_middleman" 8 | gem "contentful_bootstrap", "~> 3.0" 9 | gem "inifile" 10 | 11 | # Live-reloading plugin 12 | gem "middleman-livereload", "~> 3.1.0" 13 | 14 | # For faster file watcher updates on Windows: 15 | gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw] 16 | 17 | # Windows does not come with time zone data 18 | gem "tzinfo-data", platforms: [:mswin, :mingw, :jruby] 19 | 20 | gem "pry" 21 | -------------------------------------------------------------------------------- /examples/multiple_content_types/README.md: -------------------------------------------------------------------------------- 1 | # Multiple Content Types 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_middleman_examples.git && \ 9 | echo "Go to This Example's Folder" && cd contentful_middleman_examples/examples/multiple_content_types && \ 10 | echo "Install Dependencies" && bundle install && \ 11 | echo "Create Catalogue Space" && bundle exec contentful_bootstrap create_space my_catalogue --json-template bootstrap_templates/catalogue.json && \ 12 | echo "Fetch Contentful Data" && bundle exec middleman contentful && \ 13 | echo "Start Middleman Server" && bundle exec middleman server 14 | ``` 15 | 16 | Then open your browser and go to: [localhost:4567](http://localhost:4567) 17 | 18 | ## Configuration 19 | 20 | For reference of basic configuration, you can look into [single_content_type example](../single_content_type/README.md) 21 | 22 | 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 23 | the configuration from `~/.contentfulrc` 24 | 25 | The template used is located [here](./bootstrap_templates/catalogue.json) 26 | -------------------------------------------------------------------------------- /examples/multiple_content_types/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_content_types/config.rb: -------------------------------------------------------------------------------- 1 | require "inifile" 2 | 3 | activate :contentful do |f| 4 | config = IniFile.load(File.join(ENV['HOME'], ".contentfulrc")) 5 | f.access_token = config["my_catalogue"]["CONTENTFUL_DELIVERY_ACCESS_TOKEN"] 6 | f.space = {catalogue: config["my_catalogue"]["SPACE_ID"]} 7 | f.content_types = {product: "product", brand: "brand", category: "category"} 8 | end 9 | 10 | set :css_dir, 'stylesheets' 11 | 12 | set :js_dir, 'javascripts' 13 | 14 | set :images_dir, 'images' 15 | 16 | configure :build do 17 | end 18 | -------------------------------------------------------------------------------- /examples/multiple_content_types/source/images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/contentful/contentful_middleman_examples/80f279d705672884d62f7f0bddac42336a3e2c19/examples/multiple_content_types/source/images/background.png -------------------------------------------------------------------------------- /examples/multiple_content_types/source/images/middleman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/contentful/contentful_middleman_examples/80f279d705672884d62f7f0bddac42336a3e2c19/examples/multiple_content_types/source/images/middleman.png -------------------------------------------------------------------------------- /examples/multiple_content_types/source/index.html.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Welcome to Middleman 3 | --- 4 | 5 |
6 |

Multiple Content Type Example

7 |
8 |

Products

9 | <% data.catalogue.product.each do |id, product| %> 10 |
11 |
12 | ?w=140" alt="<%= product["image"].first["title"] %>" /> 13 |
14 |
15 |

<%= product["productName"] %> 16 | <% if product.has_key?("brand") %> 17 | by "><%= product["brand"]["companyName"] %> 18 | <% end %> 19 |

20 |
<%= product["categories"].map { |c| c["title"] }.join(", ") %>
21 |

<%= product["productDescription"].slice(0, 100) %>...

22 | ">Buy Now! 23 |
Tags: <%= product["tags"].join(", ") if product.has_key?("tags") %>
24 |
25 | <% if product["image"].size > 1 %> 26 |
27 |
Other Images
28 |
29 | <% product["image"].delete_at(0).each do |image| %> 30 |
31 | ?w=40" alt="<%= image["title"] %>" /> 32 |
33 | <% end %> 34 |
35 |
36 | <% end %> 37 |
38 |
39 |
40 | <% end %> 41 |
42 | 43 |
44 | 45 |
46 |

Brands

47 | <% data.catalogue.brand.each do |id, brand| %> 48 |
49 |
50 | ?w=140" alt="<%= brand["logo"]["title"] %>" /> 51 |
52 |
53 |

<%= brand["companyName"] %>

54 |

<%= brand["companyDescription"].slice(0, 100) %>...

55 |
56 | <% if brand.has_key?("phone") %> 57 | Phone No: <%= brand["phone"].join(", ") %>   |   58 | <% end %> 59 | ">Go to website   |   60 | ">Email 61 |
62 |
63 |
64 |
65 | <% end %> 66 |
67 | 68 |
69 | 70 |
71 |

Categories

72 | <% data.catalogue.category.each do |id, category| %> 73 |
74 |
75 | ?w=140" alt="<%= category["icon"]["title"] %>" /> 76 |
77 |
78 |

<%= category["title"] %>

79 |

<%= category["categoryDescription"] %>

80 |
81 |
82 |
83 | <% end %> 84 |
85 |
86 | -------------------------------------------------------------------------------- /examples/multiple_content_types/source/javascripts/all.js: -------------------------------------------------------------------------------- 1 | //= require_tree . 2 | -------------------------------------------------------------------------------- /examples/multiple_content_types/source/layouts/layout.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | <%= current_page.data.title || "The Middleman" %> 11 | 12 | <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" %> 13 | 14 | 15 | 16 | <%= yield %> 17 | 18 | 19 | -------------------------------------------------------------------------------- /examples/multiple_content_types/source/stylesheets/all.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | body { 4 | background: #d4d4d4 url("../images/background.png"); 5 | text-align: center; 6 | font-family: sans-serif; } 7 | 8 | h1 { 9 | color: rgba(0, 0, 0, .3); 10 | font-weight: bold; 11 | font-size: 32px; 12 | letter-spacing: -1px; 13 | text-transform: uppercase; 14 | text-shadow: 0 1px 0 rgba(255, 255, 255, .5); 15 | background: url("../images/middleman.png") no-repeat center 100px; 16 | padding: 350px 0 10px; 17 | margin: 0; } 18 | 19 | .doc { 20 | font-size: 14px; 21 | margin: 0; } 22 | .doc:before, 23 | .doc:after { 24 | opacity: .2; 25 | padding: 6px; 26 | font-style: normal; 27 | position: relative; 28 | content: "•"; } 29 | .doc a { 30 | color: rgba(0, 0, 0, 0.3); } 31 | .doc a:hover { 32 | color: #666; } 33 | 34 | .welcome { 35 | -webkit-animation-name: welcome; 36 | -webkit-animation-duration: .9s; } 37 | 38 | @-webkit-keyframes welcome { 39 | from { 40 | -webkit-transform: scale(0); 41 | opacity: 0; 42 | } 43 | 50% { 44 | -webkit-transform: scale(0); 45 | opacity: 0; 46 | } 47 | 82.5% { 48 | -webkit-transform: scale(1.03); 49 | -webkit-animation-timing-function: ease-out; 50 | opacity: 1; 51 | } 52 | to { 53 | -webkit-transform: scale(1); 54 | } 55 | } -------------------------------------------------------------------------------- /examples/multiple_content_types/source/stylesheets/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v2.0.1 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /* 8 | * Corrects `block` display not defined in IE 8/9. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | nav, 20 | section, 21 | summary { 22 | display: block; 23 | } 24 | 25 | /* 26 | * Corrects `inline-block` display not defined in IE 8/9. 27 | */ 28 | 29 | audio, 30 | canvas, 31 | video { 32 | display: inline-block; 33 | } 34 | 35 | /* 36 | * Prevents modern browsers from displaying `audio` without controls. 37 | * Remove excess height in iOS 5 devices. 38 | */ 39 | 40 | audio:not([controls]) { 41 | display: none; 42 | height: 0; 43 | } 44 | 45 | /* 46 | * Addresses styling for `hidden` attribute not present in IE 8/9. 47 | */ 48 | 49 | [hidden] { 50 | display: none; 51 | } 52 | 53 | /* ========================================================================== 54 | Base 55 | ========================================================================== */ 56 | 57 | /* 58 | * 1. Sets default font family to sans-serif. 59 | * 2. Prevents iOS text size adjust after orientation change, without disabling 60 | * user zoom. 61 | */ 62 | 63 | html { 64 | font-family: sans-serif; /* 1 */ 65 | -webkit-text-size-adjust: 100%; /* 2 */ 66 | -ms-text-size-adjust: 100%; /* 2 */ 67 | } 68 | 69 | /* 70 | * Removes default margin. 71 | */ 72 | 73 | body { 74 | margin: 0; 75 | } 76 | 77 | /* ========================================================================== 78 | Links 79 | ========================================================================== */ 80 | 81 | /* 82 | * Addresses `outline` inconsistency between Chrome and other browsers. 83 | */ 84 | 85 | a:focus { 86 | outline: thin dotted; 87 | } 88 | 89 | /* 90 | * Improves readability when focused and also mouse hovered in all browsers. 91 | */ 92 | 93 | a:active, 94 | a:hover { 95 | outline: 0; 96 | } 97 | 98 | /* ========================================================================== 99 | Typography 100 | ========================================================================== */ 101 | 102 | /* 103 | * Addresses `h1` font sizes within `section` and `article` in Firefox 4+, 104 | * Safari 5, and Chrome. 105 | */ 106 | 107 | h1 { 108 | font-size: 2em; 109 | } 110 | 111 | /* 112 | * Addresses styling not present in IE 8/9, Safari 5, and Chrome. 113 | */ 114 | 115 | abbr[title] { 116 | border-bottom: 1px dotted; 117 | } 118 | 119 | /* 120 | * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 121 | */ 122 | 123 | b, 124 | strong { 125 | font-weight: bold; 126 | } 127 | 128 | /* 129 | * Addresses styling not present in Safari 5 and Chrome. 130 | */ 131 | 132 | dfn { 133 | font-style: italic; 134 | } 135 | 136 | /* 137 | * Addresses styling not present in IE 8/9. 138 | */ 139 | 140 | mark { 141 | background: #ff0; 142 | color: #000; 143 | } 144 | 145 | 146 | /* 147 | * Corrects font family set oddly in Safari 5 and Chrome. 148 | */ 149 | 150 | code, 151 | kbd, 152 | pre, 153 | samp { 154 | font-family: monospace, serif; 155 | font-size: 1em; 156 | } 157 | 158 | /* 159 | * Improves readability of pre-formatted text in all browsers. 160 | */ 161 | 162 | pre { 163 | white-space: pre; 164 | white-space: pre-wrap; 165 | word-wrap: break-word; 166 | } 167 | 168 | /* 169 | * Sets consistent quote types. 170 | */ 171 | 172 | q { 173 | quotes: "\201C" "\201D" "\2018" "\2019"; 174 | } 175 | 176 | /* 177 | * Addresses inconsistent and variable font size in all browsers. 178 | */ 179 | 180 | small { 181 | font-size: 80%; 182 | } 183 | 184 | /* 185 | * Prevents `sub` and `sup` affecting `line-height` in all browsers. 186 | */ 187 | 188 | sub, 189 | sup { 190 | font-size: 75%; 191 | line-height: 0; 192 | position: relative; 193 | vertical-align: baseline; 194 | } 195 | 196 | sup { 197 | top: -0.5em; 198 | } 199 | 200 | sub { 201 | bottom: -0.25em; 202 | } 203 | 204 | /* ========================================================================== 205 | Embedded content 206 | ========================================================================== */ 207 | 208 | /* 209 | * Removes border when inside `a` element in IE 8/9. 210 | */ 211 | 212 | img { 213 | border: 0; 214 | } 215 | 216 | /* 217 | * Corrects overflow displayed oddly in IE 9. 218 | */ 219 | 220 | svg:not(:root) { 221 | overflow: hidden; 222 | } 223 | 224 | /* ========================================================================== 225 | Figures 226 | ========================================================================== */ 227 | 228 | /* 229 | * Addresses margin not present in IE 8/9 and Safari 5. 230 | */ 231 | 232 | figure { 233 | margin: 0; 234 | } 235 | 236 | /* ========================================================================== 237 | Forms 238 | ========================================================================== */ 239 | 240 | /* 241 | * Define consistent border, margin, and padding. 242 | */ 243 | 244 | fieldset { 245 | border: 1px solid #c0c0c0; 246 | margin: 0 2px; 247 | padding: 0.35em 0.625em 0.75em; 248 | } 249 | 250 | /* 251 | * 1. Corrects color not being inherited in IE 8/9. 252 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 253 | */ 254 | 255 | legend { 256 | border: 0; /* 1 */ 257 | padding: 0; /* 2 */ 258 | } 259 | 260 | /* 261 | * 1. Corrects font family not being inherited in all browsers. 262 | * 2. Corrects font size not being inherited in all browsers. 263 | * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome 264 | */ 265 | 266 | button, 267 | input, 268 | select, 269 | textarea { 270 | font-family: inherit; /* 1 */ 271 | font-size: 100%; /* 2 */ 272 | margin: 0; /* 3 */ 273 | } 274 | 275 | /* 276 | * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in 277 | * the UA stylesheet. 278 | */ 279 | 280 | button, 281 | input { 282 | line-height: normal; 283 | } 284 | 285 | /* 286 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 287 | * and `video` controls. 288 | * 2. Corrects inability to style clickable `input` types in iOS. 289 | * 3. Improves usability and consistency of cursor style between image-type 290 | * `input` and others. 291 | */ 292 | 293 | button, 294 | html input[type="button"], /* 1 */ 295 | input[type="reset"], 296 | input[type="submit"] { 297 | -webkit-appearance: button; /* 2 */ 298 | cursor: pointer; /* 3 */ 299 | } 300 | 301 | /* 302 | * Re-set default cursor for disabled elements. 303 | */ 304 | 305 | button[disabled], 306 | input[disabled] { 307 | cursor: default; 308 | } 309 | 310 | /* 311 | * 1. Addresses box sizing set to `content-box` in IE 8/9. 312 | * 2. Removes excess padding in IE 8/9. 313 | */ 314 | 315 | input[type="checkbox"], 316 | input[type="radio"] { 317 | box-sizing: border-box; /* 1 */ 318 | padding: 0; /* 2 */ 319 | } 320 | 321 | /* 322 | * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. 323 | * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome 324 | * (include `-moz` to future-proof). 325 | */ 326 | 327 | input[type="search"] { 328 | -webkit-appearance: textfield; /* 1 */ 329 | -moz-box-sizing: content-box; 330 | -webkit-box-sizing: content-box; /* 2 */ 331 | box-sizing: content-box; 332 | } 333 | 334 | /* 335 | * Removes inner padding and search cancel button in Safari 5 and Chrome 336 | * on OS X. 337 | */ 338 | 339 | input[type="search"]::-webkit-search-cancel-button, 340 | input[type="search"]::-webkit-search-decoration { 341 | -webkit-appearance: none; 342 | } 343 | 344 | /* 345 | * Removes inner padding and border in Firefox 4+. 346 | */ 347 | 348 | button::-moz-focus-inner, 349 | input::-moz-focus-inner { 350 | border: 0; 351 | padding: 0; 352 | } 353 | 354 | /* 355 | * 1. Removes default vertical scrollbar in IE 8/9. 356 | * 2. Improves readability and alignment in all browsers. 357 | */ 358 | 359 | textarea { 360 | overflow: auto; /* 1 */ 361 | vertical-align: top; /* 2 */ 362 | } 363 | 364 | /* ========================================================================== 365 | Tables 366 | ========================================================================== */ 367 | 368 | /* 369 | * Remove most spacing between table cells. 370 | */ 371 | 372 | table { 373 | border-collapse: collapse; 374 | border-spacing: 0; 375 | } -------------------------------------------------------------------------------- /examples/multiple_spaces/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | # 3 | # If you find yourself ignoring temporary files generated by your text editor 4 | # or operating system, you probably want to add a global ignore instead: 5 | # git config --global core.excludesfile ~/.gitignore_global 6 | 7 | # Ignore bundler config 8 | /.bundle 9 | 10 | # Ignore the build directory 11 | /build 12 | 13 | # Ignore the data directory 14 | /data 15 | .*-space-hash 16 | 17 | # Ignore cache 18 | /.sass-cache 19 | /.cache 20 | 21 | # Ignore .DS_store file 22 | .DS_Store 23 | -------------------------------------------------------------------------------- /examples/multiple_spaces/Gemfile: -------------------------------------------------------------------------------- 1 | # If you do not have OpenSSL installed, update 2 | # the following line to use "http://" instead 3 | source 'https://rubygems.org' 4 | 5 | gem "middleman", "~>3.4.0" 6 | 7 | gem "contentful_middleman" 8 | gem "contentful_bootstrap", "~> 3.0" 9 | gem "inifile" 10 | 11 | # Live-reloading plugin 12 | gem "middleman-livereload", "~> 3.1.0" 13 | 14 | # For faster file watcher updates on Windows: 15 | gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw] 16 | 17 | # Windows does not come with time zone data 18 | gem "tzinfo-data", platforms: [:mswin, :mingw, :jruby] 19 | -------------------------------------------------------------------------------- /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_middleman_examples.git && \ 9 | echo "Go to This Example's Folder" && cd contentful_middleman_examples/examples/multiple_spaces && \ 10 | echo "Install Dependencies" && bundle install && \ 11 | echo "Create Catalogue Space" && contentful_bootstrap create_space my_catalogue --json-template bootstrap_templates/catalogue.json && \ 12 | echo "Fetch Contentful Data" && middleman contentful && \ 13 | echo "Start Middleman Server" && middleman server 14 | ``` 15 | 16 | Then open your browser and go to: [localhost:4567](http://localhost:4567) 17 | 18 | ## Configuration 19 | 20 | For reference of basic configuration, you can look into [single_content_type example](../single_content_type/README.md) 21 | 22 | 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 23 | the configuration from `~/.contentfulrc` 24 | 25 | The template used is located [here](./bootstrap_templates/catalogue.json) 26 | 27 | In this example we have two `contentful` extension activations. 28 | -------------------------------------------------------------------------------- /examples/multiple_spaces/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/config.rb: -------------------------------------------------------------------------------- 1 | require "inifile" 2 | 3 | activate :contentful do |f| 4 | config = IniFile.load(File.join(ENV['HOME'], ".contentfulrc")) 5 | f.access_token = config["my_catalogue"]["CONTENTFUL_DELIVERY_ACCESS_TOKEN"] 6 | f.space = {catalogue: config["my_catalogue"]["SPACE_ID"]} 7 | f.content_types = {product: "product", brand: "brand", category: "category"} 8 | end 9 | 10 | activate :contentful do |f| 11 | f.access_token = "25f513e34e33916336bba1d740d135035d4e1d63b87fc446da374fec3aaccaca" 12 | f.space = {links: "3fwy09k2gc9g"} 13 | f.content_types = {link: "link"} 14 | f.cda_query = {content_type: "link"} 15 | end 16 | 17 | set :css_dir, 'stylesheets' 18 | 19 | set :js_dir, 'javascripts' 20 | 21 | set :images_dir, 'images' 22 | 23 | configure :build do 24 | end 25 | -------------------------------------------------------------------------------- /examples/multiple_spaces/source/images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/contentful/contentful_middleman_examples/80f279d705672884d62f7f0bddac42336a3e2c19/examples/multiple_spaces/source/images/background.png -------------------------------------------------------------------------------- /examples/multiple_spaces/source/images/middleman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/contentful/contentful_middleman_examples/80f279d705672884d62f7f0bddac42336a3e2c19/examples/multiple_spaces/source/images/middleman.png -------------------------------------------------------------------------------- /examples/multiple_spaces/source/index.html.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Welcome to Middleman 3 | --- 4 | 5 |
6 |

Multiple Spaces

7 |
8 |

Useful Links

9 |
10 | 17 |
18 | 19 |
20 | 21 |

Products

22 | <% data.catalogue.product.each do |id, product| %> 23 |
24 |
25 | ?w=140" alt="<%= product["image"].first["title"] %>" /> 26 |
27 |
28 |

<%= product["productName"] %> 29 | <% if product.has_key?("brand") %> 30 | by "><%= product["brand"]["companyName"] %> 31 | <% end %> 32 |

33 |
<%= product["categories"].map { |c| c["title"] }.join(", ") %>
34 |

<%= product["productDescription"].slice(0, 100) %>...

35 | ">Buy Now! 36 |
Tags: <%= product["tags"].join(", ") if product.has_key?("tags") %>
37 |
38 | <% if product["image"].size > 1 %> 39 |
40 |
Other Images
41 |
42 | <% product["image"].delete_at(0).each do |image| %> 43 |
44 | ?w=40" alt="<%= image["title"] %>" /> 45 |
46 | <% end %> 47 |
48 |
49 | <% end %> 50 |
51 |
52 |
53 | <% end %> 54 |
55 | 56 |
57 | 58 |
59 |

Brands

60 | <% data.catalogue.brand.each do |id, brand| %> 61 |
62 |
63 | ?w=140" alt="<%= brand["logo"]["title"] %>" /> 64 |
65 |
66 |

<%= brand["companyName"] %>

67 |

<%= brand["companyDescription"].slice(0, 100) %>...

68 |
69 | <% if brand.has_key?("phone") %> 70 | Phone No: <%= brand["phone"].join(", ") %>   |   71 | <% end %> 72 | ">Go to website   |   73 | ">Email 74 |
75 |
76 |
77 |
78 | <% end %> 79 |
80 | 81 |
82 | 83 |
84 |

Categories

85 | <% data.catalogue.category.each do |id, category| %> 86 |
87 |
88 | ?w=140" alt="<%= category["icon"]["title"] %>" /> 89 |
90 |
91 |

<%= category["title"] %>

92 |

<%= category["categoryDescription"] %>

93 |
94 |
95 |
96 | <% end %> 97 |
98 |
99 | -------------------------------------------------------------------------------- /examples/multiple_spaces/source/javascripts/all.js: -------------------------------------------------------------------------------- 1 | //= require_tree . 2 | -------------------------------------------------------------------------------- /examples/multiple_spaces/source/layouts/layout.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | <%= current_page.data.title || "The Middleman" %> 11 | 12 | <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" %> 13 | 14 | 15 | 16 | <%= yield %> 17 | 18 | 19 | -------------------------------------------------------------------------------- /examples/multiple_spaces/source/stylesheets/all.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | body { 4 | background: #d4d4d4 url("../images/background.png"); 5 | text-align: center; 6 | font-family: sans-serif; } 7 | 8 | h1 { 9 | color: rgba(0, 0, 0, .3); 10 | font-weight: bold; 11 | font-size: 32px; 12 | letter-spacing: -1px; 13 | text-transform: uppercase; 14 | text-shadow: 0 1px 0 rgba(255, 255, 255, .5); 15 | background: url("../images/middleman.png") no-repeat center 100px; 16 | padding: 350px 0 10px; 17 | margin: 0; } 18 | 19 | .doc { 20 | font-size: 14px; 21 | margin: 0; } 22 | .doc:before, 23 | .doc:after { 24 | opacity: .2; 25 | padding: 6px; 26 | font-style: normal; 27 | position: relative; 28 | content: "•"; } 29 | .doc a { 30 | color: rgba(0, 0, 0, 0.3); } 31 | .doc a:hover { 32 | color: #666; } 33 | 34 | .welcome { 35 | -webkit-animation-name: welcome; 36 | -webkit-animation-duration: .9s; } 37 | 38 | @-webkit-keyframes welcome { 39 | from { 40 | -webkit-transform: scale(0); 41 | opacity: 0; 42 | } 43 | 50% { 44 | -webkit-transform: scale(0); 45 | opacity: 0; 46 | } 47 | 82.5% { 48 | -webkit-transform: scale(1.03); 49 | -webkit-animation-timing-function: ease-out; 50 | opacity: 1; 51 | } 52 | to { 53 | -webkit-transform: scale(1); 54 | } 55 | } -------------------------------------------------------------------------------- /examples/multiple_spaces/source/stylesheets/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v2.0.1 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /* 8 | * Corrects `block` display not defined in IE 8/9. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | nav, 20 | section, 21 | summary { 22 | display: block; 23 | } 24 | 25 | /* 26 | * Corrects `inline-block` display not defined in IE 8/9. 27 | */ 28 | 29 | audio, 30 | canvas, 31 | video { 32 | display: inline-block; 33 | } 34 | 35 | /* 36 | * Prevents modern browsers from displaying `audio` without controls. 37 | * Remove excess height in iOS 5 devices. 38 | */ 39 | 40 | audio:not([controls]) { 41 | display: none; 42 | height: 0; 43 | } 44 | 45 | /* 46 | * Addresses styling for `hidden` attribute not present in IE 8/9. 47 | */ 48 | 49 | [hidden] { 50 | display: none; 51 | } 52 | 53 | /* ========================================================================== 54 | Base 55 | ========================================================================== */ 56 | 57 | /* 58 | * 1. Sets default font family to sans-serif. 59 | * 2. Prevents iOS text size adjust after orientation change, without disabling 60 | * user zoom. 61 | */ 62 | 63 | html { 64 | font-family: sans-serif; /* 1 */ 65 | -webkit-text-size-adjust: 100%; /* 2 */ 66 | -ms-text-size-adjust: 100%; /* 2 */ 67 | } 68 | 69 | /* 70 | * Removes default margin. 71 | */ 72 | 73 | body { 74 | margin: 0; 75 | } 76 | 77 | /* ========================================================================== 78 | Links 79 | ========================================================================== */ 80 | 81 | /* 82 | * Addresses `outline` inconsistency between Chrome and other browsers. 83 | */ 84 | 85 | a:focus { 86 | outline: thin dotted; 87 | } 88 | 89 | /* 90 | * Improves readability when focused and also mouse hovered in all browsers. 91 | */ 92 | 93 | a:active, 94 | a:hover { 95 | outline: 0; 96 | } 97 | 98 | /* ========================================================================== 99 | Typography 100 | ========================================================================== */ 101 | 102 | /* 103 | * Addresses `h1` font sizes within `section` and `article` in Firefox 4+, 104 | * Safari 5, and Chrome. 105 | */ 106 | 107 | h1 { 108 | font-size: 2em; 109 | } 110 | 111 | /* 112 | * Addresses styling not present in IE 8/9, Safari 5, and Chrome. 113 | */ 114 | 115 | abbr[title] { 116 | border-bottom: 1px dotted; 117 | } 118 | 119 | /* 120 | * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 121 | */ 122 | 123 | b, 124 | strong { 125 | font-weight: bold; 126 | } 127 | 128 | /* 129 | * Addresses styling not present in Safari 5 and Chrome. 130 | */ 131 | 132 | dfn { 133 | font-style: italic; 134 | } 135 | 136 | /* 137 | * Addresses styling not present in IE 8/9. 138 | */ 139 | 140 | mark { 141 | background: #ff0; 142 | color: #000; 143 | } 144 | 145 | 146 | /* 147 | * Corrects font family set oddly in Safari 5 and Chrome. 148 | */ 149 | 150 | code, 151 | kbd, 152 | pre, 153 | samp { 154 | font-family: monospace, serif; 155 | font-size: 1em; 156 | } 157 | 158 | /* 159 | * Improves readability of pre-formatted text in all browsers. 160 | */ 161 | 162 | pre { 163 | white-space: pre; 164 | white-space: pre-wrap; 165 | word-wrap: break-word; 166 | } 167 | 168 | /* 169 | * Sets consistent quote types. 170 | */ 171 | 172 | q { 173 | quotes: "\201C" "\201D" "\2018" "\2019"; 174 | } 175 | 176 | /* 177 | * Addresses inconsistent and variable font size in all browsers. 178 | */ 179 | 180 | small { 181 | font-size: 80%; 182 | } 183 | 184 | /* 185 | * Prevents `sub` and `sup` affecting `line-height` in all browsers. 186 | */ 187 | 188 | sub, 189 | sup { 190 | font-size: 75%; 191 | line-height: 0; 192 | position: relative; 193 | vertical-align: baseline; 194 | } 195 | 196 | sup { 197 | top: -0.5em; 198 | } 199 | 200 | sub { 201 | bottom: -0.25em; 202 | } 203 | 204 | /* ========================================================================== 205 | Embedded content 206 | ========================================================================== */ 207 | 208 | /* 209 | * Removes border when inside `a` element in IE 8/9. 210 | */ 211 | 212 | img { 213 | border: 0; 214 | } 215 | 216 | /* 217 | * Corrects overflow displayed oddly in IE 9. 218 | */ 219 | 220 | svg:not(:root) { 221 | overflow: hidden; 222 | } 223 | 224 | /* ========================================================================== 225 | Figures 226 | ========================================================================== */ 227 | 228 | /* 229 | * Addresses margin not present in IE 8/9 and Safari 5. 230 | */ 231 | 232 | figure { 233 | margin: 0; 234 | } 235 | 236 | /* ========================================================================== 237 | Forms 238 | ========================================================================== */ 239 | 240 | /* 241 | * Define consistent border, margin, and padding. 242 | */ 243 | 244 | fieldset { 245 | border: 1px solid #c0c0c0; 246 | margin: 0 2px; 247 | padding: 0.35em 0.625em 0.75em; 248 | } 249 | 250 | /* 251 | * 1. Corrects color not being inherited in IE 8/9. 252 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 253 | */ 254 | 255 | legend { 256 | border: 0; /* 1 */ 257 | padding: 0; /* 2 */ 258 | } 259 | 260 | /* 261 | * 1. Corrects font family not being inherited in all browsers. 262 | * 2. Corrects font size not being inherited in all browsers. 263 | * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome 264 | */ 265 | 266 | button, 267 | input, 268 | select, 269 | textarea { 270 | font-family: inherit; /* 1 */ 271 | font-size: 100%; /* 2 */ 272 | margin: 0; /* 3 */ 273 | } 274 | 275 | /* 276 | * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in 277 | * the UA stylesheet. 278 | */ 279 | 280 | button, 281 | input { 282 | line-height: normal; 283 | } 284 | 285 | /* 286 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 287 | * and `video` controls. 288 | * 2. Corrects inability to style clickable `input` types in iOS. 289 | * 3. Improves usability and consistency of cursor style between image-type 290 | * `input` and others. 291 | */ 292 | 293 | button, 294 | html input[type="button"], /* 1 */ 295 | input[type="reset"], 296 | input[type="submit"] { 297 | -webkit-appearance: button; /* 2 */ 298 | cursor: pointer; /* 3 */ 299 | } 300 | 301 | /* 302 | * Re-set default cursor for disabled elements. 303 | */ 304 | 305 | button[disabled], 306 | input[disabled] { 307 | cursor: default; 308 | } 309 | 310 | /* 311 | * 1. Addresses box sizing set to `content-box` in IE 8/9. 312 | * 2. Removes excess padding in IE 8/9. 313 | */ 314 | 315 | input[type="checkbox"], 316 | input[type="radio"] { 317 | box-sizing: border-box; /* 1 */ 318 | padding: 0; /* 2 */ 319 | } 320 | 321 | /* 322 | * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. 323 | * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome 324 | * (include `-moz` to future-proof). 325 | */ 326 | 327 | input[type="search"] { 328 | -webkit-appearance: textfield; /* 1 */ 329 | -moz-box-sizing: content-box; 330 | -webkit-box-sizing: content-box; /* 2 */ 331 | box-sizing: content-box; 332 | } 333 | 334 | /* 335 | * Removes inner padding and search cancel button in Safari 5 and Chrome 336 | * on OS X. 337 | */ 338 | 339 | input[type="search"]::-webkit-search-cancel-button, 340 | input[type="search"]::-webkit-search-decoration { 341 | -webkit-appearance: none; 342 | } 343 | 344 | /* 345 | * Removes inner padding and border in Firefox 4+. 346 | */ 347 | 348 | button::-moz-focus-inner, 349 | input::-moz-focus-inner { 350 | border: 0; 351 | padding: 0; 352 | } 353 | 354 | /* 355 | * 1. Removes default vertical scrollbar in IE 8/9. 356 | * 2. Improves readability and alignment in all browsers. 357 | */ 358 | 359 | textarea { 360 | overflow: auto; /* 1 */ 361 | vertical-align: top; /* 2 */ 362 | } 363 | 364 | /* ========================================================================== 365 | Tables 366 | ========================================================================== */ 367 | 368 | /* 369 | * Remove most spacing between table cells. 370 | */ 371 | 372 | table { 373 | border-collapse: collapse; 374 | border-spacing: 0; 375 | } -------------------------------------------------------------------------------- /examples/single_content_type/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | # 3 | # If you find yourself ignoring temporary files generated by your text editor 4 | # or operating system, you probably want to add a global ignore instead: 5 | # git config --global core.excludesfile ~/.gitignore_global 6 | 7 | # Ignore bundler config 8 | /.bundle 9 | 10 | # Ignore the build directory 11 | /build 12 | 13 | # Ignore the data directory 14 | /data 15 | 16 | # Ignore cache 17 | /.sass-cache 18 | /.cache 19 | 20 | # Ignore .DS_store file 21 | .DS_Store 22 | -------------------------------------------------------------------------------- /examples/single_content_type/.links-space-hash: -------------------------------------------------------------------------------- 1 | 2e73df9bab340e9f1b18136eec4e89100f1ad805 -------------------------------------------------------------------------------- /examples/single_content_type/Gemfile: -------------------------------------------------------------------------------- 1 | # If you do not have OpenSSL installed, update 2 | # the following line to use "http://" instead 3 | source 'https://rubygems.org' 4 | 5 | gem "middleman", "~>3.4.0" 6 | 7 | # Live-reloading plugin 8 | gem "middleman-livereload", "~> 3.1.0" 9 | 10 | gem "contentful_middleman" 11 | 12 | # For faster file watcher updates on Windows: 13 | gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw] 14 | 15 | # Windows does not come with time zone data 16 | gem "tzinfo-data", platforms: [:mswin, :mingw, :jruby] 17 | -------------------------------------------------------------------------------- /examples/single_content_type/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_middleman_examples.git && \ 9 | echo "Go to This Example's Folder" && cd contentful_middleman_examples/examples/single_content_type && \ 10 | echo "Install Dependencies" && bundle install && \ 11 | echo "Fetch Contentful Data" && bundle exec middleman contentful && \ 12 | echo "Start Middleman Server" && bundle exec middleman server 13 | ``` 14 | 15 | Then open your browser and go to: [localhost:4567](http://localhost:4567) 16 | 17 | ## Configuration 18 | 19 | ```ruby 20 | activate :contentful do |f| 21 | f.access_token = "2e233e64dde3b688cc772a3eb080e7566570d277cbd4391a7fbec9e3217a6a9a" 22 | f.space = {links: "u4lyfh69psb2"} 23 | f.content_types = {link: "4D5cDE5S8Ee8E8AKS6uswe"} 24 | f.cda_query = {content_type: "4D5cDE5S8Ee8E8AKS6uswe"} 25 | end 26 | ``` 27 | 28 | In [config.rb](./config.rb) you will find the above cited configuration block. Let's go through it line by line: 29 | 30 | * `activate :contentful do |f|` - Enables Contentful Middleman extension and gives us a configuration object `f` 31 | * `f.access_token = "YOUR_SPACE_TOKEN"` - Sets up the API token for your space, in this case, with the "Useful Links" space token 32 | * `f.space = SPACE_HASH` - Sets up the Space itself, in this case, with the "Useful Links" Space ID and `links` as the name we'll use inside Middleman 33 | * `f.content_types = CONTENT_TYPE_HASH` - Sets up the Content Types we'll use for the generator, in this case, the "Useful Link" Content Type ID and `link` as an alias 34 | * `f.cda_query = CDA_QUERY_PARAMETERS` - Sets up the Contentful Client API request, in this case, we just want "Useful Link" entries 35 | 36 | ## Views 37 | 38 | ```erb 39 | 46 | ``` 47 | 48 | In [source/index.html.erb](./source/index.html.erb) you will find the above cited template code. Let's analyze the important bits: 49 | 50 | * `data` - Will contain a method for each Space you have defined, in this case `data.links` 51 | * Each Space will contain a method for each defined Content Type `data.links.link` 52 | * Each Content Type will be a collection of entries fetched for it, each entry will have an ID and the Data - `data.links.link.each do |id, link|` 53 | * Once you have the `link` object, it's a `HashWithIndifferentAccess`, you can get all the properties in your Content Type by their name 54 | -------------------------------------------------------------------------------- /examples/single_content_type/config.rb: -------------------------------------------------------------------------------- 1 | activate :contentful do |f| 2 | f.access_token = "25f513e34e33916336bba1d740d135035d4e1d63b87fc446da374fec3aaccaca" 3 | f.space = {links: "3fwy09k2gc9g"} 4 | f.content_types = {link: "link"} 5 | f.cda_query = {content_type: "link"} 6 | end 7 | 8 | set :css_dir, 'stylesheets' 9 | 10 | set :js_dir, 'javascripts' 11 | 12 | set :images_dir, 'images' 13 | 14 | configure :build do 15 | end 16 | -------------------------------------------------------------------------------- /examples/single_content_type/source/images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/contentful/contentful_middleman_examples/80f279d705672884d62f7f0bddac42336a3e2c19/examples/single_content_type/source/images/background.png -------------------------------------------------------------------------------- /examples/single_content_type/source/images/middleman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/contentful/contentful_middleman_examples/80f279d705672884d62f7f0bddac42336a3e2c19/examples/single_content_type/source/images/middleman.png -------------------------------------------------------------------------------- /examples/single_content_type/source/index.html.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Welcome to Middleman 3 | --- 4 | 5 |
6 |
7 |

Single Content Type Example

8 |
9 |

Useful Links

10 | 17 |
18 |
19 |
20 | -------------------------------------------------------------------------------- /examples/single_content_type/source/javascripts/all.js: -------------------------------------------------------------------------------- 1 | //= require_tree . 2 | -------------------------------------------------------------------------------- /examples/single_content_type/source/layouts/layout.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | <%= current_page.data.title || "The Middleman" %> 11 | 12 | <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" %> 13 | 14 | 15 | 16 | <%= yield %> 17 | 18 | 19 | -------------------------------------------------------------------------------- /examples/single_content_type/source/stylesheets/all.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | --------------------------------------------------------------------------------