@tisto I have the environment setup and got started with Gatsby, i also did a bit of plone training. I don't know what to do next. How should i think in terms of plone and Gatsby...which issues should i get started with?
@tulikavijay do you have a basic understanding of how GraphQL works? Have a look at gatsby-source-plone:
You could try to set up the project locally. So far we focused on getting everything to work on Travis only. Check
to see how it works. Writing a short howto about how to set up the project locally would be a great starting point.
A possible GSoC project could be to retrieve/traverse the entire content tree from plone.restapi and generate a static version of it with Gatsby. So far we can generate a flat list of content objects.
My comments are, of course, true for any GSoC student who is interested in that topic.
3 Likes
I added some basic instructions how to set up the project locally:
Let me know if you are stuck anywhere...
2 Likes
thanks for the reply. I know bits of GraphQL...
I'll set up the project locally and check it out.
After running the following command i get this error :
(temp-source) tux (master *) api $ bin/instance fg
-bash: bin/instance: No such file or directory
Btw i am using a virtualenv for python 2.7. And i installed Gatsby on the system...that's why it's showing changes in the repo.
Probably because you didn't run buildout, or there was an error when you did.
I ran -p python2.7 along with temp virtualenv just to be sure that python 2.7 is used and i got a long log...Basically it's still using python3. that's why the build is failing. What should i do?
(temp-source) tux (master) gatsby-source-plone $ make build -p python2.7
Build
make build-backend
# make[1]: Entering directory '/home/tux/workspace/gatsby-source-plone'
Build
(cd api && virtualenv-2.7 . || virtualenv .)
/bin/bash: virtualenv-2.7: command not found
.
.
.
An internal error occurred due to a bug in either zc.buildout or in a
recipe being used:
Traceback (most recent call last):
File "/home/tux/workspace/gatsby-source-plone/api/lib/python3.6/site-packages/zc/buildout/buildout.py", line 2123, in main
getattr(buildout, command)(args)
File "/home/tux/workspace/gatsby-source-plone/api/lib/python3.6/site-packages/zc/buildout/buildout.py", line 680, in install
[self[part]['recipe'] for part in install_parts]
File "/home/tux/workspace/gatsby-source-plone/api/lib/python3.6/site-packages/zc/buildout/buildout.py", line 680, in <listcomp>
[self[part]['recipe'] for part in install_parts]
File "/home/tux/workspace/gatsby-source-plone/api/lib/python3.6/site-packages/zc/buildout/buildout.py", line 1274, in __getitem__
options._initialize()
File "/home/tux/workspace/gatsby-source-plone/api/lib/python3.6/site-packages/zc/buildout/buildout.py", line 1382, in _initialize
self.initialize()
File "/home/tux/workspace/gatsby-source-plone/api/lib/python3.6/site-packages/zc/buildout/buildout.py", line 1388, in initialize
recipe_class = _install_and_load(reqs, 'zc.buildout', entry, buildout)
File "/home/tux/workspace/gatsby-source-plone/api/lib/python3.6/site-packages/zc/buildout/buildout.py", line 1338, in _install_and_load
allow_hosts=buildout._allow_hosts
File "/home/tux/workspace/gatsby-source-plone/api/lib/python3.6/site-packages/zc/buildout/easy_install.py", line 913, in install
return installer.install(specs, working_set)
File "/home/tux/workspace/gatsby-source-plone/api/lib/python3.6/site-packages/zc/buildout/easy_install.py", line 714, in install
for dist in self._get_dist(req, ws):
File "/home/tux/workspace/gatsby-source-plone/api/lib/python3.6/site-packages/zc/buildout/easy_install.py", line 563, in _get_dist
dists = [_move_to_eggs_dir_and_compile(dist, self._dest)]
File "/home/tux/workspace/gatsby-source-plone/api/lib/python3.6/site-packages/zc/buildout/easy_install.py", line 1699, in _move_to_eggs_dir_and_compile
I would first start a new thread specific to your installation problem.
Then, in that new thread, it would help if you provided the entire sequence of commands you ran, as well as the buildout.cfg etc.
Might be easier to open an issue on github...Seems you just need to install Python 2.7 properly on your system.
For the few days i have been reading about the project. I have read about the plone.restapi and i understand, in which form the data is coming. Also, i have read the guidelines for developing a package..
I am playing with Gatsby and GraphQL alone, it seems very interesting 
Concerning the repository I don't understand a few things, like why are there two gatsby-node.js files in the repo.
this one seems easy enough to understand...
but this one has some complex functions
https://github.com/collective/gatsby-source-plone/blob/master/gatsby-node.js
It would be great help if someone can provide me some link of some sort to understand the code a bit better.
Good to see that you are playing with gatsby and plone.restapi!
The first one is the "development" file, and the second one is the same file but transpiled with babel.
This was a first attempt to create a working npm package, but we need to refine this (for example not putting the compiled file on github, but only creating it before a release).
We are not very experts with npm packages, so if you wants to improve also this kind of things, you're welcome!
1 Like
@cewing big green button proposal:
"Big Green Button" with plone.restapi and GatsbyJS
==================================================
(JavaScript, ReactJS, GraphQL & plone.restapi)
Summary
-------
In 2009, Martin Aspeli wrote a blog post "Pete and Andy try Plone 4" (http://www.martinaspeli.net/articles/pete-and-andy-try-plone-4):
"Andy goes to Plone's Deployment control panel.
There he finds a Big Green Button.
He pushes it and covers his eyes.
A minute later, a bunch of static HTML files appear in a directory on the server, covering the Plone site, with basic navigation and a site map.
Search is provided via a form that posts to Google for search results on the current site."
Eight years later, in 2017, the web has changed fundamentally and it is time to re-visit that idea.
GatsbyJS is very promising Open Source project that gets lots of traction and attention lately.
It allows you to build blazing-fast websites including PWA features from different sources.
The idea is to use Plone as a source to build a static HTML version with Gatsby.
Implementation
--------------
There is an initial proof-of-concept (PoC) implementation on github that queries Plone and generates a static Gatsby site:
https://github.com/collective/gatsby-source-plone
The main objective for the GSoC is to allow to traverse the full content tree of a Plone site and export that as static HTML.
Other features could be search, navigation, customizations, themes, and re-usable React components.
Skills
------
Basic JavaScript development knowledge is mandatory. Knowledge of ReactJS, GraphQL and how Plone works is useful but could be achieved during the project.
The ideal student would have in-depth knowledge and experience with ReactJS and GraphQL.
Mentors
-------
Timo Stollenwerk, Victor Fernandez de Alba, Andrea Cecchi
Aims
----
A first alpha release of gatsby-source-plone.
1 Like
@tisto i was looking at plone.restapi and found : http://plonerestapi.readthedocs.io/en/latest/types.html to get the schema of the content type. Is it the starting point for traversing the content tree?
And how to incorporate different content types into Gatsby... can it done by passing the content type inside context when using createPages?
@tulikavijay no. The starting point is the portal root. A GET request on the portal root "/" will respond with a JSON structure with an "items" attribute containing the items within the folder. If you follow the hyperlinks (@id) you will get to the next level. You have to write a traverser that traverses the entire content tree of a website and expose that as GraphQL for Gatsby to being able to pick it up.
Thanks, that clears up alot of my confusion! I'll look more into this.
Can someone help me with the issue : https://github.com/collective/gatsby-source-plone/issues/9, maybe some workaround?
@cekk @tisto @tkimnguyen
I am interested in this project too. I have pretty good experience in react and currently working around with plone.restapi and querying data with graphql.
Following the items attribute leads to only a couple of paths and thats only a part of it. How do i explore the content tree more? I read the plone.restapi docs and i could'nt find anything...
Also for features like navigation on each page, is using '?expand=naviagtion i.e. expanding navigation endpoint enough?
There are basically two options:
- You traverse the tree from the root and recursively go through the "items" attributes
- Use the search endpoint to retrieve all the content objects and build the tree hierarchy from the path attributes of the results
@nileshgulia1 let's keep the technical discussions on the github issues please.
2 Likes