├── .gitignore
├── README.md
├── gridsome.config.js
├── gridsome.server.js
├── package-lock.json
├── package.json
├── src
    ├── components
    │   └── README.md
    ├── favicon.png
    ├── layouts
    │   ├── Default.vue
    │   └── README.md
    ├── main.js
    ├── pages
    │   ├── About.vue
    │   ├── Index.vue
    │   ├── README.md
    │   └── Showcase.vue
    └── templates
    │   ├── BookEntry.vue
    │   └── README.md
└── static
    └── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | .cache
3 | .DS_Store
4 | src/.temp
5 | node_modules
6 | dist
7 | .env
8 | .env.*
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # A simple Gridsome project
 2 | `
 3 | ### 1. Install Gridsome CLI tool if you don't have
 4 | 
 5 | `npm install --global @gridsome/cli`
 6 | 
 7 | ### 2. Create a Gridsome project
 8 | 
 9 | 1. `cd <project-folder>` to open folder
10 | 2. `gridsome develop` to start local dev server at `http://localhost:8080`
11 | 3. Happy coding 🎉🙌
12 | 


--------------------------------------------------------------------------------
/gridsome.config.js:
--------------------------------------------------------------------------------
 1 | // This is where project configuration and plugin options are located. 
 2 | // Learn more: https://gridsome.org/docs/config
 3 | 
 4 | // Changes here requires a server restart.
 5 | // To restart press CTRL + C in terminal and run `gridsome develop`
 6 | 
 7 | module.exports = {
 8 |   siteName: 'Book Showcase',
 9 |   plugins: []
10 | }


--------------------------------------------------------------------------------
/gridsome.server.js:
--------------------------------------------------------------------------------
 1 | // Server API makes it possible to hook into various parts of Gridsome
 2 | // on server-side and add custom data to the GraphQL data layer.
 3 | // Learn more: https://gridsome.org/docs/server-api
 4 | 
 5 | // Changes here requires a server restart.
 6 | // To restart press CTRL + C in terminal and run `gridsome develop`
 7 | 
 8 | const axios = require('axios')
 9 | 
10 | bookISBNs = [
11 |   "0553211285",
12 |   "9789875504950",
13 |   "9780439203524",
14 |   "9780883017500",
15 |   "9781402766442",
16 |   "9781585101634",
17 |   "9780393044720",
18 |   "9780143105947",
19 |   "9780881033731"
20 | ]
21 | 
22 | module.exports = function (api) {
23 |   api.loadSource(async store => {
24 |     // const { data } = await axios.get('https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@OnsenMonaca')
25 |     let books = []
26 | 
27 |     for (const isbn of bookISBNs) {
28 |       const res = await axios.get(`http://openlibrary.org/api/books?bibkeys=ISBN:${isbn}&format=json&jscmd=data`)
29 | 
30 |       if (res.data[`ISBN:${isbn}`]) {
31 |         books.push(res.data[`ISBN:${isbn}`])
32 |       }
33 |     }
34 | 
35 |     // const blogPosts = data.items.filter(item => item.categories.length > 0)
36 | 
37 |     const contentType = store.addContentType({
38 |       typeName: 'BookEntry',
39 |       route: 'showcase/:id'
40 |     })
41 | 
42 |     for (const item of books) {
43 |       contentType.addNode({
44 |         title: item.title,
45 |         date: item.publish_date,
46 |         fields: {
47 |           ...item
48 |         }
49 |       })
50 |     }
51 |   })
52 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gridsome-static-site",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "gridsome build",
 6 |     "develop": "gridsome develop",
 7 |     "explore": "gridsome explore"
 8 |   },
 9 |   "dependencies": {
10 |     "axios": "^0.21.1",
11 |     "gridsome": "^0.5.0"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/components/README.md:
--------------------------------------------------------------------------------
1 | Add components that will be imported to Pages and Layouts to this folder.
2 | Learn more about components here: https://gridsome.org/docs/components
3 | 
4 | You can delete this file.


--------------------------------------------------------------------------------
/src/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cvetkovskin/gridsome-book-showcase/69c3a4506e9488dc899a6be275157c8ec4e5b221/src/favicon.png


--------------------------------------------------------------------------------
/src/layouts/Default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="layout">
 3 |     <header class="header">
 4 |       <strong>
 5 |         <g-link to="/">{{ $static.metaData.siteName }}</g-link>
 6 |       </strong>
 7 |       <nav class="nav">
 8 |         <g-link class="nav__link" to="/">Home</g-link>
 9 |         <g-link class="nav__link" to="/about">About</g-link>
10 |         <g-link class="nav__link" to="/showcase">Showcase</g-link>
11 |       </nav>
12 |     </header>
13 |     <slot/>
14 |   </div>
15 | </template>
16 | 
17 | <static-query>
18 | query {
19 |   metaData {
20 |     siteName
21 |   }
22 | }
23 | </static-query>
24 | 
25 | <style>
26 | body {
27 |   font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
28 |   margin:0;
29 |   padding:0;
30 |   line-height: 1.5;
31 | }
32 | 
33 | .layout {
34 |   max-width: 760px;
35 |   margin: 0 auto;
36 |   padding-left: 20px;
37 |   padding-right: 20px;
38 | }
39 | 
40 | .header {
41 |   display: flex;
42 |   justify-content: space-between;
43 |   align-items: center;
44 |   margin-bottom: 20px;
45 |   height: 80px;
46 | }
47 | 
48 | .nav__link {
49 |   margin-left: 20px;
50 | }
51 | </style>
52 | 


--------------------------------------------------------------------------------
/src/layouts/README.md:
--------------------------------------------------------------------------------
1 | Layout components are used to wrap pages and templates. Layouts should contain components like headers, footers or sidebars that will be used across the site.
2 | 
3 | Learn more about Layouts: https://gridsome.org/docs/layouts
4 | 
5 | You can delete this file.


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // This is the main.js file. Import global CSS and scripts here.
 2 | // The Client API can be used here. Learn more: gridsome.org/docs/client-api
 3 | 
 4 | import DefaultLayout from '~/layouts/Default.vue'
 5 | 
 6 | export default function (Vue, { router, head, isClient }) {
 7 |   // Set default layout as a global component
 8 |   Vue.component('Layout', DefaultLayout)
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <h1>About This Website</h1>
 4 |     <p>This is a website made with Gridsome, an awesome static-stie genereting tool. Feel free to give it a try!</p>
 5 |   </Layout>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   metaInfo: {
11 |     title: 'About'
12 |   }
13 | }
14 | </script>
15 | 


--------------------------------------------------------------------------------
/src/pages/Index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     
 4 |     <!-- Learn how to use images here: https://gridsome.org/docs/images -->
 5 |     <g-image alt="Example image" src="~/favicon.png" width="135" />
 6 |     
 7 |     <h1>Hello, world!</h1>
 8 |    
 9 |     <p>
10 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi labore tempore expedita, et iste tenetur suscipit explicabo! Dolores, aperiam non officia eos quod asperiores
11 |     </p>
12 | 
13 |     <p class="home-links">
14 |       <a href="https://gridsome.org/docs" target="_blank" rel="noopener">Gridsome Docs</a>
15 |       <a href="https://github.com/gridsome/gridsome" target="_blank" rel="noopener">GitHub</a>
16 |     </p>
17 | 
18 |   </Layout>
19 | </template>
20 | 
21 | <script>
22 | export default {
23 |   metaInfo: {
24 |     title: 'Hello, world!'
25 |   }
26 | }
27 | </script>
28 | 
29 | <style>
30 | .home-links a {
31 |   margin-right: 1rem;
32 | }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/src/pages/README.md:
--------------------------------------------------------------------------------
1 | Pages are usually used for normal pages or for listing items from a GraphQL collection.
2 | Add .vue files here to create pages. For example **About.vue** will be **site.com/about**.
3 | Learn more about pages: https://gridsome.org/docs/pages
4 | 
5 | You can delete this file.


--------------------------------------------------------------------------------
/src/pages/Showcase.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <div class="books">
 4 |       <div class="book" v-for="book in $page.allBookEntry.edges" :key="book.node.id">
 5 |         <h2>
 6 |           <g-link :to="`showcase/${book.node.id}`">{{ book.node.title }}</g-link>
 7 |         </h2>
 8 | 
 9 |         <div class="content">
10 |           <div class="img-wrapper">
11 |             <g-image  :src="book.node.cover.medium" />
12 |           </div>
13 | 
14 |           <div>{{ shortenText(book.node.byStatement) }}</div>
15 |         </div>
16 | 
17 |         <div class="book-footer">
18 |           <div>{{ book.node.publishDate }}</div>
19 |           <div>By <span v-html="book.node.authors[0].name" /></div>
20 |         </div>
21 |       </div>
22 |     </div>
23 |   </Layout>
24 | </template>
25 | 
26 | <page-query>
27 | query {
28 |   allBookEntry {
29 |     edges {
30 |       node{
31 |         id
32 |         title
33 |         authors {
34 | 					name
35 |         },
36 |         cover {
37 |           medium
38 |         }
39 |         byStatement
40 |         publishDate
41 |       }
42 |     }
43 |   }
44 | }
45 | </page-query>
46 | 
47 | <script>
48 | export default {
49 |   metaInfo: {
50 |     title: 'Showcase'
51 |   },
52 | 
53 |   methods: {
54 |     shortenText(text) {
55 |       return text.slice(0,300) + '...'
56 |     }
57 |   }
58 | }
59 | </script>
60 | 
61 | <style scoped>
62 | .books {
63 |   display: flex;
64 |   flex-wrap: wrap;
65 |   justify-content: center;
66 | }
67 | 
68 | .book {
69 |   border: 1px solid rgba(0, 0, 0, 0.1);
70 |   border-radius: 5px;
71 |   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
72 |   padding: 0 15px 20px;
73 |   margin: 20px 5px;
74 |   width: 300px;
75 | }
76 | 
77 | .img-wrapper {
78 |   width: 100%;
79 |   text-align: center;
80 | }
81 | 
82 | .img-wrapper img {
83 |   height: 200px;
84 | }
85 | 
86 | .book-footer {
87 |   margin-top: 30px;
88 |   display: flex;
89 |   justify-content: space-between;
90 | }
91 | </style>
92 | 


--------------------------------------------------------------------------------
/src/templates/BookEntry.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Layout>
  3 |     <div class="book">
  4 |       <h2>
  5 |         <a :href="$page.bookEntry.url">{{ $page.bookEntry.title }}</a>
  6 |       </h2>
  7 | 
  8 |       <div>
  9 |           <div class="img-wrapper">
 10 |             <g-image  :src="$page.bookEntry.cover.large" />
 11 |           </div>
 12 |       </div>
 13 | 
 14 |       <div v-if="$page.bookEntry.byStatement">
 15 |         {{ $page.bookEntry.byStatement }}
 16 |       </div>
 17 | 
 18 |       <div v-if="$page.bookEntry.numberOfPages">
 19 |         Number of pages: {{ $page.bookEntry.numberOfPages }}
 20 |       </div>
 21 |       
 22 |       <div v-if="$page.bookEntry.subjectPlaces.length">
 23 |         <h4>Subject Places</h4>
 24 |         <ul>
 25 |           <li v-for="place in $page.bookEntry.subjectPlaces" :key="place.name">
 26 |             {{ place.name }}
 27 |           </li>
 28 |         </ul>
 29 |       </div>
 30 | 
 31 |       <div v-if="$page.bookEntry.publishPlaces.length">
 32 |         <h4>Publish Places</h4>
 33 |         <ul>
 34 |           <li v-for="place in $page.bookEntry.publishPlaces" :key="place.name">
 35 |             {{ place.name }}
 36 |           </li>
 37 |         </ul>
 38 |       </div>
 39 |       <div v-if="$page.bookEntry.notes">
 40 |         <h4>Notes:</h4>
 41 |         <p>{{ $page.bookEntry.notes }}</p>
 42 |       </div>
 43 | 
 44 | 
 45 |       <div class="book-footer">
 46 |         <div>{{ $page.bookEntry.publishDate }}</div>
 47 |         <div>By <span v-html="$page.bookEntry.authors[0].name" /></div>
 48 |       </div>
 49 |     </div>
 50 |   </Layout>
 51 | </template>
 52 | 
 53 | <page-query>
 54 | query Book ($id: String!){
 55 |   bookEntry (id: $id) {
 56 |     id
 57 |     title
 58 |     authors {
 59 |       name
 60 |     },
 61 |     cover {
 62 |       large
 63 |     }
 64 |     byStatement
 65 |     publishDate
 66 |     url
 67 |     subjectPlaces {
 68 |       name
 69 |     },
 70 |     publishPlaces {
 71 |       name
 72 |     },
 73 |     numberOfPages
 74 |     notes
 75 |   }
 76 | }
 77 | </page-query>
 78 | 
 79 | <script>
 80 | export default {
 81 |   metaInfo: {
 82 |     title: 'Details'
 83 |   }
 84 | }
 85 | </script>
 86 | 
 87 | <style>
 88 | .book {
 89 |   border: 1px solid rgba(0, 0, 0, 0.1);
 90 |   border-radius: 5px;
 91 |   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
 92 |   padding: 0 15px 20px;
 93 |   margin: 20px 5px;
 94 | }
 95 | 
 96 | .img-wrapper {
 97 |   text-align: center;
 98 | }
 99 | 
100 | .book-footer {
101 |   margin-top: 30px;
102 |   display: flex;
103 |   justify-content: space-between;
104 | }
105 | </style>
106 | 


--------------------------------------------------------------------------------
/src/templates/README.md:
--------------------------------------------------------------------------------
1 | Templates for **GraphQL collections** should be added here.
2 | To create a template for a collection called `WordPressPost`
3 | create a file named `WordPressPost.vue` in this folder.
4 | 
5 | Learn more: https://gridsome.org/docs/templates
6 | 
7 | You can delete this file.


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
1 | Add static files here. Files in this directory will be copied directly to `dist` folder during build. For example, /static/robots.txt will be located at https://yoursite.com/robots.txt.
2 | 
3 | This file should be deleted.


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