├── LICENSE ├── README.md ├── home.json └── images ├── home.png ├── logo.png ├── me.png ├── messages.png ├── moments.png ├── notifications.png └── twitter.gif /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 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 | # Twitter 2 | 3 | 100% JSON powered Twitter UI, brought to you by [Jasonette](https://www.jasonette.com). 4 | 5 | **Note:** This is a UI-only implementation to demonstrate various Jasonette view, layout, components features. [Read the documentation](https://jasonette.github.io/documentation) to learn how to turn it into a fully interactive app. 6 | 7 | ![images/twitter.gif](images/twitter.gif) 8 | 9 | # How to use 10 | 11 | 1. Download [Jasonette](http://www.jasonette.com), unzip, and then run `Setup` command in the root folder. That will walk you through your project setup. 12 | 2. When asked for a JSON url, enter [https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/master/home.json](https://raw.githubusercontent.com/Jasonette/Twitter/master/home.json) 13 | 3. When the setup finishes, it should automatically open up XCode. Connect your phone and press play to run. 14 | 15 | **There's a much better tutorial over at [the documentation page](https://jasonette.github.io/documentation/)** 16 | -------------------------------------------------------------------------------- /home.json: -------------------------------------------------------------------------------- 1 | { 2 | "$jason": { 3 | "head": { 4 | "title": "Twitter", 5 | "styles": { 6 | "note": { 7 | "color": "#ffffff", 8 | "font": "HelveticaNeue-Bold", 9 | "size": "15" 10 | } 11 | }, 12 | "actions": { 13 | "$pull": { 14 | "type": "$flush", 15 | "success": { 16 | "type": "$reload" 17 | } 18 | } 19 | }, 20 | "data": { 21 | "tweets": [{ 22 | "text": "Animated GIFs are neon signs of the Internet.", 23 | "image": "https://pbs.twimg.com/media/Cub2D-vXYAIXFQo.jpg" 24 | }, { 25 | "text": "I think this is a new feature on Twitter: a push notification for every tweet", 26 | "image": "https://pbs.twimg.com/media/CtJYvx1XgAIilZ4.jpg" 27 | }, { 28 | "text": "Found the most brilliant invention in human history", 29 | "image": "https://pbs.twimg.com/media/Cr7cSz1WIAA0OZj.jpg" 30 | }, { 31 | "text": "Ludlow and Rivington. NOW.", 32 | "image": "https://pbs.twimg.com/media/CrNnHPUWEAEK_b3.jpg" 33 | }] 34 | }, 35 | "templates": { 36 | "body": { 37 | "header": { 38 | "title": { 39 | "type": "image", 40 | "style": { 41 | "width": "35", 42 | "height": "35" 43 | }, 44 | "url": "https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/master/images/logo.png" 45 | } 46 | }, 47 | "footer": { 48 | "tabs": { 49 | "style": { 50 | "background": "rgba(255,255,255,0.8)", 51 | "color": "#009efa" 52 | }, 53 | "items": [{ 54 | "image": "https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/master/images/home.png", 55 | "text": "Home", 56 | "style": { 57 | "height": "21" 58 | }, 59 | "url": "https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/master/home.json" 60 | }, { 61 | "image": "https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/master/images/notifications.png", 62 | "text": "Notifications", 63 | "style": { 64 | "height": "21" 65 | }, 66 | "url": "https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/master/home.json" 67 | }, { 68 | "image": "https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/master/images/moments.png", 69 | "text": "Moments", 70 | "style": { 71 | "height": "21" 72 | }, 73 | "url": "https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/master/home.json" 74 | }, { 75 | "image": "https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/master/images/messages.png", 76 | "text": "Messages", 77 | "style": { 78 | "height": "21" 79 | }, 80 | "url": "https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/master/home.json" 81 | }, { 82 | "image": "https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/master/images/me.png", 83 | "text": "Me", 84 | "style": { 85 | "height": "21" 86 | }, 87 | "url": "https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/master/home.json" 88 | }] 89 | } 90 | }, 91 | "sections": [{ 92 | "items": { 93 | "{{#each tweets}}": { 94 | "type": "horizontal", 95 | "style": { 96 | "spacing": "10" 97 | }, 98 | "components": [{ 99 | "type": "image", 100 | "url": "https://pbs.twimg.com/profile_images/557061751150112768/eMwi4Xz2_400x400.jpeg", 101 | "style": { 102 | "width": "48", 103 | "height": "48", 104 | "corner_radius": "5" 105 | } 106 | }, { 107 | "type": "vertical", 108 | "style": { 109 | "spacing": "5" 110 | }, 111 | "components": [{ 112 | "type": "horizontal", 113 | "components": [{ 114 | "type": "label", 115 | "text": "ethan", 116 | "style": { 117 | "font": "HelveticaNeue-Bold", 118 | "width": "50", 119 | "size": "14" 120 | } 121 | }, { 122 | "type": "label", 123 | "text": "@gliechtenstein · 8h", 124 | "style": { 125 | "color": "#8899a6", 126 | "size": "13", 127 | "font": "HelveticaNeue" 128 | } 129 | }] 130 | }, { 131 | "type": "label", 132 | "text": "{{text}}", 133 | "style": { 134 | "font": "HelveticaNeue", 135 | "size": "14" 136 | } 137 | }, { 138 | "type": "image", 139 | "url": "{{image}}", 140 | "style": { 141 | "corner_radius": "5" 142 | } 143 | }, { 144 | "type": "horizontal", 145 | "style": { 146 | "padding_top": "10" 147 | }, 148 | "components": [{ 149 | "type": "image", 150 | "style": { 151 | "height": "20" 152 | }, 153 | "url": "https://g.twimg.com/dev/documentation/image/reply-action_0.png" 154 | }, { 155 | "type": "space", 156 | "style": { 157 | "width": "60" 158 | } 159 | }, { 160 | "type": "image", 161 | "style": { 162 | "height": "20" 163 | }, 164 | "url": "https://g.twimg.com/dev/documentation/image/retweet-action.png" 165 | }, { 166 | "type": "space", 167 | "style": { 168 | "width": "60" 169 | } 170 | }, { 171 | "type": "image", 172 | "style": { 173 | "height": "20" 174 | }, 175 | "url": "https://g.twimg.com/dev/documentation/image/like-action.png" 176 | }, { 177 | "type": "space" 178 | }] 179 | }] 180 | }] 181 | } 182 | } 183 | }] 184 | } 185 | } 186 | } 187 | } 188 | } 189 | -------------------------------------------------------------------------------- /images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/348c23779b36bc804f2b38314e0fe70d0d33d742/images/home.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/348c23779b36bc804f2b38314e0fe70d0d33d742/images/logo.png -------------------------------------------------------------------------------- /images/me.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/348c23779b36bc804f2b38314e0fe70d0d33d742/images/me.png -------------------------------------------------------------------------------- /images/messages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/348c23779b36bc804f2b38314e0fe70d0d33d742/images/messages.png -------------------------------------------------------------------------------- /images/moments.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/348c23779b36bc804f2b38314e0fe70d0d33d742/images/moments.png -------------------------------------------------------------------------------- /images/notifications.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/348c23779b36bc804f2b38314e0fe70d0d33d742/images/notifications.png -------------------------------------------------------------------------------- /images/twitter.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/348c23779b36bc804f2b38314e0fe70d0d33d742/images/twitter.gif --------------------------------------------------------------------------------