Some of you (e.g. @thot, @Comacina) got write permission on the poppy website to post freely their project:
https://www.poppy-project.org/projects/
Allow people posting and updating their project on the website is something we would like to generalize to anyone doing great work in the community.
Unfortunately the current process just does not scale… we cannot give write access to the wordpress to anyone. In addition using wordpress is quite annoying and you spend lot of time before obtaining the formatting you want. It would require a lot of additional documentation so everyone can learn how to use the poppy wordpress with the specific theme it has.
An idea we had in mind for a while was to use this forum to manage content. You guy post a topic to explain your work and the first post is embedded on poppy-project.org/projects. Then you can edit easily your first post so you can update your project. At the same time it create a thread for you to discuss with other members. All is easy to maintain as tehre is only one source so everything up-to-date everywhere, amazing!
Until now, we did not really know how we could do this without a web-developpers but I may have found a simple way to do it.
Yesterday I played a 2h with AngularJS and it appeared to me it could be really easy way to create this new feature.
And indeed it is …
With few lines we can extract data from Discourse using the json file each topic has.
You can obtain this data like this:
app.factory('discourse', ['$http', function($http) {
return $http.get('/post.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
Then create a custom Angular controller to extract the data you want:
MainController.js:
app.controller('MainController', ['$scope', 'discourse', function($scope, discourse) {
discourse.success(function(data) {
$scope.raw = data;
$scope.project_name = data.title
$scope.author = data.details.created_by.username
$scope.topic_content = data.post_stream.posts[0].cooked
});
}]);
And with few html code :
index.html:
<body ng-app="DiscourseApp">
<div class="main" ng-controller="MainController">
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<h1>{{ project_name }}</h1>
<h2> {{author}}</h2>
<div ng-bind-html="topic_content | sanitize"></div>
</div>
</div>
</ul>
</div>
</div>
/!\ include a small hack to display directly html content (not secure sic!):
I made a test with the topic of @fabrice because it very representative of a good project presentation post including a complete description, links and images.
And it generates page like this:
Pretty good for a first attempt.
The next step is to embed this code in a wordpress plugin so we can easily integrate it on the poppy-project wordpress.
For the integration on our wordpress, I’ve first began by testing some already made plugins:
- Get Use APIs – JSON Content Importer – Extension WordPress | WordPress.org Français
- JSON Data Shortcode – Extension WordPress | WordPress.org Français
But I did not manage to make them work with the json data discourse has. Mainly because they do not handle arrays.