Commit dc5e3064 authored by Élodie Thiéblin's avatar Élodie Thiéblin
Browse files

[Blog] Add blog view

parent 280dbe572038
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>
</>
);
};
/*******************************************************************************
* 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();
......@@ -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
);
}
......@@ -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",
......
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"
};
......@@ -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",
......
......@@ -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",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment