[Blog] Add blog view

src/blogpost/BlogView.tsx

+import * as React from "react";
+import { Weblog } from "./blogpostschema";
+import { DublinCoreElementComponent } from "../dublincore/DublinCoreImpl";
+
+export const BlogComponent: React.FC<{
+  blog: Weblog;
+}> = ({ blog }) => {
+  return (
+    <>
+      <DublinCoreElementComponent dcelement={blog} />
+      <DublinCoreElementComponent dcelement={blog.posts[0]} />
+      <h1>Other posts: </h1>
+      <ul>
+        {blog.posts
+          // .sort((a, b) => b.date.localeCompare(a.date))
+          .map(blogpost => (
+            <li key={blogpost.__resource.uri}>
+              <a href={blogpost.__resource.uri}>{blogpost.title}</a>
+            </li>
+          ))}
+      </ul>
+    </>
+  );
+};

src/blogpost/blog.tsx

+/*******************************************************************************
+ * Copyright 2003-2018 LOGILAB S.A. (Paris, FRANCE), all rights reserved.
+ * contact http://www.logilab.fr/ -- mailto:contact@logilab.fr
+ *
+ * This file is part of CubicWeb.
+ *
+ * CubicWeb is free software: you can redistribute it and/or modify it under the
+ * terms of the GNU Lesser General Public License as published by the Free
+ * Software Foundation, either version 2.1 of the License, or (at your option)
+ * any later version.
+ *
+ * CubicWeb is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE.  See the GNU Lesser General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License along
+ * with CubicWeb.  If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import {
+  application,
+  definition,
+  implementation,
+  rdfEntities
+} from "@logilab/libview";
+import * as $rdf from "rdflib";
+import { ONTOLOGY } from "../common/schema";
+import { BlogComponent } from "./BlogView";
+import { loadBlog, BlogPost } from "./blogpostschema";
+import { httpsAlias } from "../common/aliases";
+
+/**
+ * The descriptor for the default blog view
+ */
+const DESCRIPTOR_BLOG: definition.ViewDescriptor = {
+  identifier: "::Logilab::Blog",
+  name: "Logilab: Blog View",
+  description: "Renders a blog",
+  entrypoint: "VIEW_BLOG_ENTRYPOINT",
+  resourceCss: [
+    {
+      location: "remote",
+      uri:
+        "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
+    } as definition.ViewResourceRemote
+  ],
+  resourceJs: [],
+  resourceMain: {
+    location: "remote",
+    uri: "http://localhost:8080/view_blog.js"
+  } as definition.ViewResourceRemote
+};
+
+class BlogRendering implements implementation.ViewImplementation {
+  descriptor: definition.ViewDescriptor;
+  constructor() {
+    this.descriptor = DESCRIPTOR_BLOG;
+    this.priorityFor = this.priorityFor.bind(this);
+    this.render = this.render.bind(this);
+  }
+
+  priorityFor(store: $rdf.Formula, target: application.Resource): number {
+    const storeAliases = ONTOLOGY.aliases;
+    storeAliases.push(httpsAlias(target.uri));
+    let repo = new rdfEntities.RdfEntityStore(
+      store,
+      storeAliases,
+      ONTOLOGY.inverses
+    );
+    let entity = repo.entityForUri(target.uri);
+
+    let entityTypes = entity.getEntitiesForS(
+      "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"
+    );
+    if (entityTypes.length > 0) {
+      let x = entityTypes.find(
+        (entity: rdfEntities.RdfEntity) =>
+          entity.uris.indexOf("http://ns.cubicweb.org/cubicweb/0.0/Blog") >= 0
+      );
+      if (x) {
+        // The entity is a Blog
+        return 10;
+      }
+    }
+    return implementation.VIEW_PRIORITY_INAPPROPRIATE;
+  }
+
+  render(
+    renderer: application.ViewRenderer,
+    context: application.RenderingContext,
+    target: application.Resource
+  ): implementation.ViewRendering {
+    let blog = loadBlog(renderer, context, target);
+    let externals = blog.posts.map((blopost: BlogPost) =>
+      application.cloneResource(blopost.__resource)
+    );
+    let result = document.createElement("div");
+    ReactDOM.render(<BlogComponent blog={blog} />, result);
+    return {
+      dom: result,
+      suggestedResources: externals
+    };
+  }
+}
+
+/**
+ * Export the view
+ */
+export const VIEW_BLOG_ENTRYPOINT: BlogRendering = new BlogRendering();

src/blogpost/blogpostschema.ts

@@ -6,7 +6,7 @@ import { DCE_METACLASS, DublinCoreElement } from "../dublincore/dcschema";
  * The data for a blog
  */
 export interface Weblog extends DublinCoreElement {
-  containerOf: BlogPost[];
+  posts: BlogPost[];
 }
 
 /**
@@ -29,8 +29,8 @@ export const BLOGPOST_METACLASS = new rdfMeta.MetaClass();
 
 WEBLOG_METACLASS.properties = DCE_METACLASS.properties.concat([
   new rdfMeta.MetaPropertyObject(
-    "containerOf",
-    "http://rdfs.org/sioc/ns#container",
+    "posts",
+    "http://rdfs.org/sioc/ns#container_of",
     BLOGPOST_METACLASS,
     true
   )
@@ -40,7 +40,7 @@ BLOGPOST_METACLASS.properties = DCE_METACLASS.properties.concat([
   new rdfMeta.MetaPropertyData("modified", "http://purl.org/dc/terms/modified"),
   new rdfMeta.MetaPropertyObject(
     "container",
-    "http://rdfs.org/sioc/ns#container",
+    "http://rdfs.org/sioc/ns#has_container",
     WEBLOG_METACLASS
   )
 ]);
@@ -64,3 +64,22 @@ export function loadBlogPost(
     target
   );
 }
+/**
+ * Loads the data for the entity of interest
+ * @param renderer The current renderer
+ * @param context The current rendering context
+ * @param target The current RDF entity to be rendered
+ */
+export function loadBlog(
+  renderer: application.ViewRenderer,
+  context: application.RenderingContext,
+  target: application.Resource
+): Weblog {
+  return rdfMeta.loadEntity(
+    renderer,
+    context,
+    ONTOLOGY,
+    WEBLOG_METACLASS,
+    target
+  );
+}

src/common/aliases.ts

@@ -142,12 +142,22 @@ export const ALIASES = [
     "http://rdfs.org/sioc/types#BlogPost"
   ],
 
-  // Container
+  // Blog
+
   [
-    "http://rdfs.org/sioc/ns#container",
+    "http://ns.cubicweb.org/cubicweb/0.0/Blog",
+    "http://rdfs.org/sioc/types#Blog"
+  ],
+
+  // has container
+  [
+    "http://rdfs.org/sioc/ns#has_container",
     "http://ns.cubicweb.org/cubicweb/0.0/entry_of"
   ],
 
+  // has container
+  ["http://rdfs.org/sioc/ns#container_of"],
+
   // format
   [
     "http://purl.org/dc/elements/1.1/format",

src/common/inverses.ts

 export const INVERSES = {
   "http://dbpedia.org/ontology/influenced":
     "http://dbpedia.org/ontology/influencedBy",
-  "http://dbpedia.org/ontology/notableWork": "http://purl.org/dc/terms/creator"
+  "http://dbpedia.org/ontology/notableWork": "http://purl.org/dc/terms/creator",
+  "http://rdfs.org/sioc/ns#container_of":
+    "http://rdfs.org/sioc/ns#has_container"
 };

src/index.vd.json

@@ -101,6 +101,23 @@
       "uri": "http://localhost:8080/view_blogpost.js"
     }
   },
+  {
+    "identifier": "::Logilab::Blog",
+    "name": "Logilab: Blog View",
+    "description": "Renders a blog",
+    "entrypoint": "VIEW_BLOG_ENTRYPOINT",
+    "resourceCss": [
+      {
+        "location": "remote",
+        "uri": "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
+      }
+    ],
+    "resourceJs": [],
+    "resourceMain": {
+      "location": "remote",
+      "uri": "http://localhost:8080/view_blog.js"
+    }
+  },
   {
     "identifier": "::Logilab::DublinCoreElement",
     "name": "Logilab: Dublin Core Element View",

webpack.config.js

@@ -12,6 +12,7 @@ module.exports = [
       track: "./src/track/track.ts",
       talk: "./src/talk/talk.ts",
       blogpost: "./src/blogpost/blogpost.tsx",
+      blog: "./src/blogpost/blog.tsx",
       dcelement: "./src/dublincore/dublincore.tsx"
     },
     mode: isProd ? "production" : "development",