├── .gitignore
├── Contentful.sketchplugin
    └── Contents
    │   ├── Resources
    │       └── icon@2x.png
    │   └── Sketch
    │       ├── lib
    │           ├── fetch.js
    │           ├── settings.js
    │           └── utils.js
    │       └── manifest.json
├── LICENSE
├── README.md
├── package.json
└── sketch-contentful.gif


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # nyc test coverage
18 | .nyc_output
19 | 
20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
21 | .grunt
22 | 
23 | # node-waf configuration
24 | .lock-wscript
25 | 
26 | # Compiled binary addons (http://nodejs.org/api/addons.html)
27 | build/Release
28 | 
29 | # Dependency directories
30 | node_modules
31 | jspm_packages
32 | 
33 | # Optional npm cache directory
34 | .npm
35 | 
36 | # Optional REPL history
37 | .node_repl_history
38 | 


--------------------------------------------------------------------------------
/Contentful.sketchplugin/Contents/Resources/icon@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stefanjudis/sketch-contentful/96443402e0db7c54b70fdfc9efcc5ea9b7c5109d/Contentful.sketchplugin/Contents/Resources/icon@2x.png


--------------------------------------------------------------------------------
/Contentful.sketchplugin/Contents/Sketch/lib/fetch.js:
--------------------------------------------------------------------------------
 1 | @import 'utils.js';
 2 | 
 3 | 
 4 | /**
 5 |  * Populate all layers in a document
 6 |  */
 7 | function populateData( context ) {
 8 |   initContext( context );
 9 | 
10 |   layersSuccessfulFilled = 0;
11 |   errors = [];
12 | 
13 |   var spaceId = command.valueForKey_onDocument_forPluginIdentifier(
14 |     'spaceId',
15 |     docData,
16 |     'contentful'
17 |   );
18 | 
19 |   var cdaToken = command.valueForKey_onDocument_forPluginIdentifier(
20 |     'cdaToken',
21 |     docData,
22 |     'contentful'
23 |   );
24 | 
25 |   if ( spaceId.trim() == '' || cdaToken.trim() == '' ) {
26 |     return context.api().message(
27 |       'Please define Space Id and Content Delivery API token in the settings'
28 |     );
29 |   }
30 | 
31 |   var fieldLayers = page.children().forEach( function( kid ) {
32 |     var connectedEntry = kid.name().match( /{entry:(.+?)}/ );
33 | 
34 |     if ( connectedEntry ) {
35 |       var data = fetchJSON(
36 |         'https://cdn.contentful.com/spaces/' + spaceId + '/entries?access_token=' + cdaToken + '&sys.id=' + connectedEntry[ 1 ]
37 |       ).items[ 0 ];
38 | 
39 |       kid.children().forEach( function( layer ) {
40 |         var connectedField = layer.name().match( /{fields:(.+?)}/ );
41 | 
42 |         if ( connectedField ) {
43 |           if ( /^<MSTextLayer:/.test( layer.toString() ) ) {
44 |             if ( data.fields[ connectedField[ 1 ] ] ) {
45 |               if ( typeof data.fields[ connectedField[ 1 ] ] === 'string' ) {
46 |                 layer.setStringValue( data.fields[ connectedField[ 1 ] ] );
47 | 
48 |                 layersSuccessfulFilled++;
49 |               } else {
50 |                 errors.push(
51 |                   '`' + connectedField[ 1 ] + '` in entry `' + connectedEntry[ 1 ] + '` is not a string value'
52 |                 );
53 |               }
54 |             } else {
55 |               errors.push(
56 |                 'Could not find `' + connectedField[ 1 ] + '` in data for `' + connectedEntry[ 1 ] + '`'
57 |               );
58 |             }
59 |           }
60 |         }
61 |       } );
62 |     }
63 |   } );
64 | 
65 |   if ( errors.length ) {
66 |     createErrorReportWindow( errors ).runModal();
67 |   } else {
68 |     context.api().message(
69 |       layersSuccessfulFilled + ' layer(s) populated.'
70 |     );
71 |   }
72 | }
73 | 
74 | 
75 | /**
76 |  * Fetch JSON from a given URL
77 |  */
78 | function fetchJSON( url ) {
79 |   var request = NSMutableURLRequest.new();
80 |   [request setHTTPMethod:@"GET"];
81 |   [request setURL:[NSURL URLWithString:url]];
82 | 
83 |   var error = NSError.new();
84 |   var responseCode = null;
85 | 
86 |   var oResponseData = [NSURLConnection sendSynchronousRequest:request returningResponse:responseCode error:error];
87 | 
88 |   var dataString = [[NSString alloc] initWithData:oResponseData encoding:NSUTF8StringEncoding];
89 | 
90 |   return JSON.parse( dataString );
91 | }
92 | 


--------------------------------------------------------------------------------
/Contentful.sketchplugin/Contents/Sketch/lib/settings.js:
--------------------------------------------------------------------------------
 1 | @import 'utils.js';
 2 | 
 3 | function openSettings( context ) {
 4 |   initContext( context );
 5 | 
 6 |   var window = createSettingsWindow( {
 7 |     spaceId : command.valueForKey_onDocument_forPluginIdentifier(
 8 |       'spaceId',
 9 |       docData,
10 |       'contentful'
11 |     ),
12 |     cdaToken : command.valueForKey_onDocument_forPluginIdentifier(
13 |       'cdaToken',
14 |       docData,
15 |       'contentful'
16 |     )
17 |   });
18 | 
19 |   var alert = window[ 0 ];
20 |   var inputs = window[ 1 ];
21 |   var response = alert.runModal();
22 | 
23 |   // save button was pressed
24 |   if ( response === 1000 ) {
25 |     command.setValue_forKey_onDocument_forPluginIdentifier(
26 |       inputs[ 0 ].stringValue(),
27 |       'spaceId',
28 |       docData,
29 |       'contentful'
30 |     );
31 | 
32 |     command.setValue_forKey_onDocument_forPluginIdentifier(
33 |       inputs[ 1 ].stringValue(),
34 |       'cdaToken',
35 |       docData,
36 |       'contentful'
37 |     );
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/Contentful.sketchplugin/Contents/Sketch/lib/utils.js:
--------------------------------------------------------------------------------
  1 | 
  2 | //--------------------------------------//
  3 | //               Context                //
  4 | //--------------------------------------//
  5 | 
  6 | var plugin;
  7 | var command;
  8 | var doc;
  9 | var docData;
 10 | var page;
 11 | var artboard;
 12 | 
 13 | function initContext(context) {
 14 |   doc = context.document;
 15 |   docData = context.document.documentData();
 16 |   plugin = context.plugin;
 17 |   command = context.command;
 18 |   page = doc.currentPage();
 19 | }
 20 | 
 21 | //--------------------------------------//
 22 | //          Get Size & Position         //
 23 | //--------------------------------------//
 24 | 
 25 | var getSize = {
 26 |   width : function( layer ) {
 27 |     return layer.frame().width()
 28 |   },
 29 |   widthProportion : function( layer ) {
 30 |     return layer.frame().width()/layer.parentGroup().frame().width()
 31 |   },
 32 |   height : function( layer ) {
 33 |     return layer.frame().height()
 34 |   },
 35 |   heightProportion : function( layer ) {
 36 |     return layer.frame().height()/layer.parentGroup().frame().height()
 37 |   }
 38 | };
 39 | 
 40 | 
 41 | //--------------------------------------//
 42 | //               Cocoa UI               //
 43 | //--------------------------------------//
 44 | function createLabel( text, fontSize, bold, frame ) {
 45 |   var label = NSTextField.alloc().initWithFrame( frame );
 46 |   label.setStringValue( text );
 47 |   label.setFont( ( bold ) ? NSFont.boldSystemFontOfSize( fontSize ) : NSFont.systemFontOfSize( fontSize ) );
 48 |   label.setBezeled( false );
 49 |   label.setDrawsBackground( false );
 50 |   label.setEditable( false );
 51 |   label.setSelectable( false );
 52 | 
 53 |   return label;
 54 | }
 55 | 
 56 | function createLogBox(errors, fontSize, frame) {
 57 |   var logContainer = NSTextView.alloc().initWithFrame( frame );
 58 |   var errorMsgs = errors.join( '\n\n' );
 59 | 
 60 |   logContainer.setEditable(true);
 61 |   logContainer.setSelectable(true);
 62 |   logContainer.string = errorMsgs;
 63 | 
 64 |   return logContainer;
 65 | }
 66 | 
 67 | 
 68 | function createSettingsWindow( values ) {
 69 |   var alert = COSAlertWindow.new();
 70 |   var width = 400;
 71 |   var freeSpace = width - 100;
 72 | 
 73 |   alert.addButtonWithTitle( 'Save' );
 74 |   alert.addButtonWithTitle( 'Cancel' );
 75 |   alert.setMessageText( 'Sketch Contentful' );
 76 |   alert.setInformativeText( 'Set your Space Id and Content Delivery Token to pull real production data into your designs.' );
 77 |   alert.setIcon( NSImage.alloc().initByReferencingFile( plugin.urlForResourceNamed( 'icon@2x.png' ).path() ) );
 78 | 
 79 |   var mainView = NSView.alloc().initWithFrame( NSMakeRect( 0, 0, width, 150 ) );
 80 |   var spaceIdLabel = createLabel( 'Space ID', 12, true, NSMakeRect( 0, 120, freeSpace, 20 ) );
 81 |   var spaceIdTextfield = NSTextField.alloc().initWithFrame( NSMakeRect( 0, 95, freeSpace, 25 ) );
 82 |   spaceIdTextfield.setStringValue( values.spaceId || '' );
 83 | 
 84 |   var cdaTokenLabel = createLabel( 'Content Delivery API Token', 12, true, NSMakeRect( 0, 60, freeSpace, 20 ) );
 85 |   var cdaTokenTextfield = NSTextField.alloc().initWithFrame( NSMakeRect( 0, 35, freeSpace, 25 ) );
 86 |   cdaTokenTextfield.setStringValue( values.cdaToken || '' );
 87 | 
 88 |   mainView.addSubview( spaceIdLabel );
 89 |   mainView.addSubview( spaceIdTextfield );
 90 | 
 91 |   mainView.addSubview( cdaTokenLabel );
 92 |   mainView.addSubview( cdaTokenTextfield );
 93 | 
 94 |   alert.addAccessoryView( mainView );
 95 | 
 96 |   var inputs = [ spaceIdTextfield, cdaTokenTextfield ];
 97 |   return [ alert, inputs ];
 98 | }
 99 | 
100 | function createErrorReportWindow( errors ) {
101 |   var report = COSAlertWindow.new();
102 |   var width = 400;
103 |   var freeSpace = width - 100;
104 | 
105 |   report.addButtonWithTitle( 'Ok' );
106 |   report.setMessageText( 'There have been errors' );
107 |   report.setInformativeText( 'Please check the error log to see what went wrong:' );
108 |   report.setIcon( NSImage.alloc().initByReferencingFile( plugin.urlForResourceNamed( 'icon@2x.png' ).path() ) );
109 | 
110 |   var mainView = NSView.alloc().initWithFrame( NSMakeRect( 0, 0, width, 250 ) );
111 |   var logBox = createLogBox( errors, 12, NSMakeRect( 0, 0, freeSpace, 250 ) );
112 | 
113 |   mainView.addSubview( logBox );
114 |   report.addAccessoryView( mainView );
115 | 
116 |   return report;
117 | }
118 | 


--------------------------------------------------------------------------------
/Contentful.sketchplugin/Contents/Sketch/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "author" : "Stefan Judis",
 3 |   "commands" : [
 4 |     {
 5 |       "name": "Open settings",
 6 |       "identifier": "com.contentful.settings-contentful",
 7 |       "script": "lib/settings.js",
 8 |       "handler": "openSettings",
 9 |       "isRoot" : false
10 |     },
11 |     {
12 |       "name": "Fetch data",
13 |       "identifier": "com.contentful.fetch-contentful",
14 |       "script": "lib/fetch.js",
15 |       "handler": "populateData",
16 |       "isRoot" : false
17 |     }
18 |   ],
19 |   "identifier" : "com.contentful.sketch-contentful-plugin",
20 |   "description": "Contentful for Sketch",
21 |   "authorEmail" : "stefanjudis@gmail.com",
22 |   "name" : "Contentful",
23 |   "version": "1.0.2",
24 |   "manifestURL": "",
25 |   "downloadURL": "",
26 |   "compatibleVersion": 41,
27 |   "bundleVersion": 1
28 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Stefan Judis
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # sketch-contentful
 2 | A Sketch App plugin to populate your documents with data stored in Contentful.
 3 | 
 4 | ![Workflow with Sketch Contentful](./sketch-contentful.gif)
 5 | 
 6 | ## Setup
 7 | 
 8 | Download the latest version of the Sketch plugin from the [releases page](https://github.com/stefanjudis/sketch-contentful/releases). Install the plugin by double clicking on the `.sketch` file.
 9 | That's it. Now it's installed. :)
10 | 
11 | ## Define space and CDA token
12 | 
13 | To access data from Contentful you have to define the particular space where the data is stored and the depending CDA token so that the requests can be authorized. To do so go to **Plugins** -> **Contentful** -> **Open Settings**.
14 | 
15 | ## Connect TextLayers to Contentful
16 | 
17 | To connect your layers with Contentful you have to:
18 | 
19 | - group all layers that belong to one entry
20 | - include entry identifier in name of this group `Your layer {entry:ENTRY_ID}` -> `Your layer {entry:fhdjasklfh7e2q90rfjweq9f8jeq9}`
21 | - all TextLayers inside of this group can now be connected to fields
22 | - include field itendifier in name of the Text layer `My title {fields:FIELD_NAME}` -> `My title {fields:title}`
23 | 
24 | A the layers of a document could be as follows to make it work.
25 | 
26 | ```
27 | Author ${entry:fjsdaklfsjf8239qr}         // a Group
28 |   |__ Title ${fields:title}               // a TextLayer
29 |   |__ Description ${fields:description}   // a TextLayer
30 | ```
31 | 
32 | Now you're able to fetch the recent data from Contentful and populate the data. To do so go to **Plugins** -> **Contentful** -> **Fetch data**.
33 | 
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sketch-contentful",
 3 |   "version": "1.0.0",
 4 |   "description": "A Sketch App plugin to populate your documents with data stored in Contentful.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "build": "webpack"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/stefanjudis/sketch-contentful.git"
13 |   },
14 |   "keywords": [
15 |     "sketch",
16 |     "plugin",
17 |     "contentful"
18 |   ],
19 |   "author": "stefan judis <stefanjudis@gmail.com>",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/stefanjudis/sketch-contentful/issues"
23 |   },
24 |   "homepage": "https://github.com/stefanjudis/sketch-contentful#readme",
25 |   "devDependencies": {}
26 | }
27 | 


--------------------------------------------------------------------------------
/sketch-contentful.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stefanjudis/sketch-contentful/96443402e0db7c54b70fdfc9efcc5ea9b7c5109d/sketch-contentful.gif


--------------------------------------------------------------------------------