4 |
6 |
4 |
18 |
5 |
11 | {{# page.metafield.hero }}
12 | {{ page.title }}
6 |
7 | 
{{ page.metafield.author.object.title }}
8 |
9 |
10 | {{ page.metafield.author.object.title }}
8 |
9 |
13 | 
14 |
15 | {{/ page.metafield.hero }}
16 | {{{ page.content }}}
17 |
14 |
4 | {{# posts }}
5 |
32 |
6 |
29 |
30 | {{/ posts }}
31 |
7 |
8 |
15 | {{ title }}
9 | 10 |
11 | 
{{ metafield.author.object.title }}
12 |
13 |
14 | {{ metafield.author.object.title }}
12 |
13 |
16 |
17 | 
18 |
19 |
20 |
18 |
19 |
21 | {{ metafield.teaser.value }}
22 |
28 |
23 |
24 | Read more
25 |
26 |
27 | 29 |
-
18 | {
19 | posts.map(post => {
20 | return (
21 |
23 |
24 | 
25 |
26 |
27 |
34 |
25 |
26 | 7 | 3. Images are easily manipulated for different device / browser requirements via the Cosmic JS provided [Imgix](https://www.imgix.com/) integration. 8 | 9 | Sign up for [Cosmic JS](https://cosmicjs.com) to install the app, add / edit content and deploy the web app. 10 | 11 | ** Before trying to run any of the examples, make sure you are connecting to the example bucket `cross-platform-blog` or have imported the bucket.json in the root of this repo to your own bucket in Cosmic JS. 12 | ## Web 13 | [View the web demo here](https://cosmicjs.com/apps/cross-platform-blog/demo) 14 | ###Get started with web 15 | ``` 16 | git clone https://github.com/cosmicjs/cross-platform-blog 17 | cd cross-platform-blog/web 18 | npm install 19 | ``` 20 | ### Run web in development 21 | ``` 22 | npm run development 23 | ``` 24 | Go to [http://localhost:5000](http://localhost:5000). 25 | ### Run web in production 26 | ``` 27 | COSMIC_BUCKET=your-bucket-slug npm start 28 | ``` 29 | Go to [http://localhost:3000](http://localhost:3000). 30 | ## Native 31 | If you are new to React Native, make sure you check out the [React Native docs](https://facebook.github.io/react-native/) to make sure you have everything set up properly. 32 | ### Get started with native 33 | ``` 34 | cd cross-platform-blog/native 35 | npm install 36 | ``` 37 | ### Config 38 | Edit native/config.js to point to your bucket slug on Cosmic JS. 39 | ``` 40 | export default { 41 | COSMIC_BUCKET: 'your-bucket-slug' 42 | } 43 | ``` 44 | ### Run iOS 45 | Run the iOS command inside the native folder: 46 | ``` 47 | react-native run-ios 48 | ``` 49 | ### Run Android 50 | Run the Android command inside the native folder: 51 | ``` 52 | react-native run-android 53 | ``` 54 | ## Questions 55 | For any questions, feel free to reach out to us on the [Cosmic JS website](https://cosmicjs.com/) through the Intercom chat bubble on the bottom right side of the page. Or join the [Cosmic JS Community on Slack](https://cosmicjs.com/community). 56 | -------------------------------------------------------------------------------- /native/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { Text, View, Navigator } from 'react-native' 3 | import { Container, Header, Title, Content, Spinner } from 'native-base'; 4 | import _ from 'lodash' 5 | import LandingPage from './components/LandingPage' 6 | import BlogList from './components/BlogList' 7 | import BlogPost from './components/BlogPost' 8 | import config from './config' 9 | export default class App extends Component { 10 | constructor(props) { 11 | super(props) 12 | this.state = { 13 | loading: true, 14 | objects: [] 15 | } 16 | this.getObjects() 17 | } 18 | getObjects() { 19 | fetch('https://api.cosmicjs.com/v1/' + config.COSMIC_BUCKET + '/objects') 20 | .then(response => response.json()) 21 | .then(responseJson => { 22 | this.setState({ 23 | objects: responseJson.objects, 24 | loading: false 25 | }) 26 | }) 27 | .catch(error => { 28 | console.error(error) 29 | }) 30 | } 31 | handlePress(navigator, post) { 32 | this.setState({ objects: this.state.objects, post }) 33 | navigator.push({ 34 | name: 'BlogPost', 35 | }) 36 | } 37 | handlePressViewBlog(navigator, post) { 38 | navigator.push({ 39 | name: 'BlogList', 40 | }) 41 | } 42 | goBack(navigator) { 43 | navigator.pop() 44 | } 45 | renderScene(route, navigator) { 46 | const objects = this.state.objects 47 | const posts = objects.filter(object => { 48 | if (object.type_slug === 'posts') 49 | return object 50 | }) 51 | const landing_page = _.find(objects, { slug: 'landing-page' }) 52 | if(route.name === 'LandingPage') { 53 | return