Publishing forum content on poppy-project.org

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:

But I did not manage to make them work with the json data discourse has. Mainly because they do not handle arrays.

2 Likes

Apparemment on peut importer les commentaires d’un post en javascript également. Voir http://eviltrout.com/2014/01/22/embedding-discourse.html associé à ce discourse: http://fishtank.eviltrout.com/t/embedding-discourse-in-static-sites/871

Le code qui importe les commentaires est en javascript, ça doit être ça: https://gist.github.com/trabus/8265176, avec le code embed.js à mettre sur le discourse, e.g. http://fishtank.eviltrout.com/javascripts/embed.js

A creuser également.

Finally as wordpress already has a php server it was more simple to remove the angularjs part and do the job only with php… sad

There is now a functional plugin to embed discourse topic on wordpress pages and posts:

It provides a simple shortcode: [discourse topic_id='666'] which display the first post.

So if you have personal wordpress blog and you want to display the work you are doing in the community, no more need to copy/paste the content. You can maintain one topic and it will be updated everywhere!

Here an example:
https://www.poppy-project.org/test-discourse-shortcode/

It is still at a very early stage and need further work for the CSS and the template but it seems to work. Also I hope to get some contributors to improve the code quality, security and functionalities…

1 Like

Great @Matthieu ! Now, we (at least I :)) also need to be able to include Discourse pages on other websites which are not wordpress. So could you summarize what is the best current solution for including the first post of a Discourse topic on a plain html page. Iframe ? Javascript code ?

With javascript it should work…

Ok so I’ve continued to work on the forum content integration on wordpress website, it will be time to test it for real.

@thot, @rafiaa, @Comacina can you please edit an existing one or create a new topic explaining your project as you did on your project page on https://www.poppy-project.org/project/ ?

Ok, I did it. I confirm it is more user friendly to do like this. The editor of the forum is far more easy to manage than Wordpress. Moreover, it forces to use “one view” presentation. So it is a very great action for me.

As I already said to Matthieu, if the wiki could be in the same kind of presentation, it should be ideal. The solutions which consist to compile the wiki code and “make the wiki geek” will not be used if there is no physical training (tutorial is not enough since we do not know what we can do with)

Thanks @thot, your work is now online:
https://www.poppy-project.org/project/marionnettes-electriques/

I think you can play with the image size in discourse <img by specifying 'width="npx" and it will change on the wordpress page.

It is also deployed for this project: https://www.poppy-project.org/project/mathematics-a-beautiful-elsewhere/
Mathematics: A Beautiful Elsewhere

1 Like