Skip to content

Commit

Permalink
Set up project pages with related publications (#445)
Browse files Browse the repository at this point in the history
  • Loading branch information
fsteeg committed Jul 8, 2021
1 parent e1d3e12 commit 5ab5499
Show file tree
Hide file tree
Showing 17 changed files with 427 additions and 12 deletions.
6 changes: 6 additions & 0 deletions gatsby/lobid/gatsby-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@ module.exports = {
path: `${__dirname}/static/product/`,
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/static/project/`,
}
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`
],
Expand Down
27 changes: 24 additions & 3 deletions gatsby/lobid/gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,27 @@ exports.createPages = async ({ graphql, actions }) => {
.map(id => id.slice(id.lastIndexOf("/") + 1, id.lastIndexOf(".")));
addPages(shortProductIds, "product", "./src/templates/product.js", createPage);

// Pages for individual project files in /project

const {
data: { projects },
} = await graphql(`
{
projects: allProjectJson {
edges {
node {
id
}
}
}
}
`);

const shortProjectIds = projects.edges.map(e => e.node.id)
.filter(id => id.indexOf("/") != -1)
.map(id => id.slice(id.lastIndexOf("/") + 1));
addPages(shortProjectIds, "project", "./src/templates/project.js", createPage);

};

// Create `fields.jsonFile` fields to link to static publication JSON files
Expand All @@ -86,11 +107,11 @@ exports.onCreateNode = ({ node, getNode, actions }) => {

function addPages(ids, prefix, template, createPage) {
const unique = [...new Set(ids)];
unique.forEach((member) => {
unique.forEach((entityId) => {
createPage({
path: `/${prefix}/${member}`,
path: `/${prefix}/${entityId}`,
component: path.resolve(template),
context: { id: member },
context: { id: entityId },
});
});
}
6 changes: 5 additions & 1 deletion gatsby/lobid/src/components/helpers.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
export function simpleId(url) {
export function simpleProductId(url) {
return url.slice(url.lastIndexOf("/") + 1, url.lastIndexOf("."));
}

export function simpleProjectId(url) {
return url.slice(url.lastIndexOf('/')+1);
}
8 changes: 4 additions & 4 deletions gatsby/lobid/src/components/product.html.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import md5 from 'md5';
import { simpleId } from './helpers.js'
import { simpleProductId } from './helpers.js'

import Header from "./header.html";
import Footer from "./footer.html";
Expand Down Expand Up @@ -42,14 +42,14 @@ export class Product extends React.Component {
<h1>
{this.props.product.name.label}
<small>
{this.props.product.slogan && [this.props.product.slogan].map(s => <span>&mdash; {s.label}</span>)}
<a title="Beschreibung als JSON-LD anzeigen" href={'/product/' + simpleId(this.props.product.id) + '.json'}><img className='json-ld-icon' src={jsonLdPng} alt="JSON-LD" /></a></small>
{this.props.product.slogan && [this.props.product.slogan].map(s => <span> &mdash; {s.label}</span>)}
<a title="Beschreibung als JSON-LD anzeigen" href={'/product/' + simpleProductId(this.props.product.id) + '.json'}><img className='json-ld-icon' src={jsonLdPng} alt="JSON-LD" /></a></small>
</h1>
</div>

<div className="row">
<div className="col-md-9">
<p className="lead">{this.props.product.description.label}</p>
<p className={this.props.product.description.label.length < 400 && "lead"}>{this.props.product.description.label}</p>
<table className="table table-striped table-condensed">
<thead>
<tr><th width="20%" /><th width="80%" /></tr>
Expand Down
79 changes: 79 additions & 0 deletions gatsby/lobid/src/components/project.html.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import React from "react";
import md5 from 'md5';
import { simpleProjectId } from './helpers.js'

import Header from "./header.html";
import Footer from "./footer.html";
import Publications from "./publications.html";

import "./css/lobid.css";
import "./css/bootstrap.min.css";
import "./css/font-awesome.min.css";

import jsonLdPng from "./images/json-ld.png";

export class Project extends React.Component {

constructor(props) {
super(props);
this.props = props;
}

asLinks(field) {
return this.props.project[field] && <tr><td>{this.props[field]}</td><td>{this.props.project[field].map((link) =>
<div key={link.id}><a href={link.id}>{link.id.replace('https://', '').replace('http://', '')}</a><br /></div>
)}</td></tr>
}

render() {
return (
<div className="container">
<p />
<Header
language={this.props.language}
languageLink={this.props.languageLink}
languageTooltip={this.props.languageTooltip}
publications={this.props.publications}
teamLink={this.props.teamLink}
contactPointId={this.props.contactPointId}
/>
<div>
<div className="page-header">
<h1>
{this.props.project.name.label}
<small>
{this.props.project.alternateName && this.props.project.alternateName.map(s => <span> | {s}</span>)}
<a title="Beschreibung als JSON-LD anzeigen" href={'/project/' + simpleProjectId(this.props.project.id) + '.json'}><img className='json-ld-icon' src={jsonLdPng} alt="JSON-LD" /></a></small>
</h1>
</div>

<div className="row">
<div className="col-md-9">
<p className={this.props.project.description.label.length < 400 && "lead"}>{this.props.project.description.label}</p>
<table className="table table-striped table-condensed">
<thead>
<tr><th width="20%" /><th width="80%" /></tr>
</thead>
<tbody>
<tr><td>Website</td><td><a href={this.props.project.id}>{this.props.project.id}</a></td></tr>
{this.props.project.endDate && <tr><td>Abgeschlossen</td><td>{this.props.project.endDate}</td></tr>}
{this.asLinks("hasPart")}
{this.asLinks("isBasedOn")}
{this.asLinks("isRelatedTo")}
{this.asLinks("enhances")}
{this.asLinks("result")}
</tbody>
<tfoot />
</table>
</div>
<div className="col-md-3">
<img alt={this.props.project.name.label} id="index-image" src={this.props.project.image || `https://gravatar.com/avatar/${md5(this.props.project.id)}?s=300&d=identicon`} />
</div>
</div>
<Publications pubs={this.props.pubs} publications={this.props.publications} />
<Footer companyDetails={this.props.companyDetails} privacy={this.props.privacy} />
</div>
</div>
);
}
}
4 changes: 2 additions & 2 deletions gatsby/lobid/src/components/publications.html.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react"
import { simpleId } from './helpers.js'
import { simpleProductId } from './helpers.js'

import jsonLdPng from "./images/json-ld.png";

Expand All @@ -20,7 +20,7 @@ export default class Publications extends React.Component {
<td><small>{publication.datePublished}</small></td>
<td><a href={publication.id}>{publication.name.de || publication.name.en || publication.id}</a></td>
<td>{publication.about && publication.about.map(a =>
<p key={a.id}><small><span className="glyphicon glyphicon-tag" aria-hidden="true"></span></small>&nbsp;<a href={a.id}>{simpleId(a.id)}</a></p>
<p key={a.id}><small><span className="glyphicon glyphicon-tag" aria-hidden="true"></span></small>&nbsp;<a href={a.id}>{simpleProductId(a.id)}</a></p>
)}</td>
<td align="right"><small><a href={"https://schema.org/" + publication.type}>{publication.type}</a></small></td>
<td><a title="Beschreibung als JSON-LD anzeigen" href={publication.fields.jsonFile}><img height="20px" src={jsonLdPng} alt="JSON-LD" /></a></td>
Expand Down
20 changes: 18 additions & 2 deletions gatsby/lobid/src/components/team.html.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import md5 from 'md5';
import { simpleId } from './helpers.js'
import { simpleProductId, simpleProjectId } from './helpers.js'

import Header from "./header.html";
import Footer from "./footer.html";
Expand Down Expand Up @@ -172,14 +172,30 @@ export class Team extends React.Component {
<div key={offer.id}>
{this.getImage(offer.id, details.node.image)}
<p className="details">
<a href={"/product/" + simpleId(offer.id)}>
<a href={"/product/" + simpleProductId(offer.id)}>
{offer.name}
</a>
<br />
{(details.node.slogan && details.node.slogan[this.props.lang]) || offer.name}
</p>
</div>
)}

<h2>{this.props.projectsName}</h2>

{this.props.projects
.map((details) =>
<div key={details.node.id}>
{this.getImage(details.node.id, details.node.image)}
<p className="details">
<a href={"/project/" + simpleProjectId(details.node.id)}>
{details.node.alternateName || simpleProjectId(details.node.id)}
</a>
<br />
{(details.node.name && details.node.name[this.props.lang]) || details.node.alternateName}
</p>
</div>
)}
</div>
<Footer companyDetails={this.props.companyDetails} privacy={this.props.privacy} />
</div>
Expand Down
80 changes: 80 additions & 0 deletions gatsby/lobid/src/templates/project.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import React from "react";
import { graphql } from "gatsby";
import { Project } from "../components/project.html";

export default function ProjectPage({ data, location, pageContext }) {
const project = data.allFile.edges.slice(-1).pop().node.childProjectJson
return (<Project
project={project}
pubs={data.allPublicationJson.edges
.map(edge => edge.node)
.filter(p => p.about && p.about.find(a => a.id.includes(pageContext.id)))
.sort((a, b) => b.datePublished.localeCompare(a.datePublished))
}
contactName="Kontakt"
publications="Publikationen"
language="English"
teamLink="/team-de"
hasPart="Besteht aus"
isBasedOn="Basiert auf"
isRelatedTo="Bezug"
enhances="Erweitert"
result="Ergebnis"
companyDetails="Impressum"
privacy="Datenschutz"
contactPointId="mailto:[email protected]"
/>);
}

export const query = graphql`
query ProjectQuery($id: String!) {
allFile (filter: { name: { eq : $id }}) {
edges {
node {
childProjectJson {
name {
label: de
}
description {
label: de
}
id
enhances {
id
}
isBasedOn {
id
}
alternateName
endDate
result {
id
}
}
}
}
}
allPublicationJson {
edges {
node {
id
type
creator {
id
}
name {
de
en
}
about {
id
}
datePublished
fields {
jsonFile
}
}
}
}
}
`;
14 changes: 14 additions & 0 deletions gatsby/lobid/src/templates/team.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export default ({ data, location, pageContext }) => {
team={data.dataJson}
members={data.allTeamJson.edges}
products={data.allProductJson.edges}
projects={data.allProjectJson.edges}
lang={pageContext.lang}
contactName={pageContext.lang==="de"?"Kontakt":"Contact"}
subtitle={pageContext.lang==="de"?"Dateninfrastruktur für Bibliotheken":"Data infrastructure for libraries"}
Expand All @@ -17,6 +18,7 @@ export default ({ data, location, pageContext }) => {
languageLink={pageContext.lang==="de"?"/team-en":"/team-de"}
teamLink={pageContext.lang==="de"?"/team-de":"/team-en"}
makesOfferName={pageContext.lang==="de"?"Produkte":"Products"}
projectsName={pageContext.lang==="de"?"Projekte":"Projects"}
memberName={pageContext.lang==="de"?"Mitglieder":"Members"}
memberFormerName={pageContext.lang==="de"?"Ehemalige":"Former members"}
companyDetails={pageContext.lang==="de"?"Impressum":"Imprint"}
Expand Down Expand Up @@ -93,5 +95,17 @@ export const query = graphql`
}
}
}
allProjectJson {
edges {
node {
id
name {
de
en
}
alternateName
}
}
}
}
`;
26 changes: 26 additions & 0 deletions gatsby/lobid/static/project/Alma+Migration.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"@context": "https://schema.org/",
"id": "https://service-wiki.hbz-nrw.de/display/SEM/Alma+Migration",
"type": [
"Project"
],
"name": {
"de": "lobid/Alma-Migration",
"en": "lobid/Alma Migration"
},
"description": {
"en": "Switch lobid-resources ETL and indexing from Aleph to Alma Marc21 XML",
"de": "Der schrittweise Umstieg der hbz-Verbundbibliotheken auf das Bibliotheksmanagementsystem Alma im Rahmen des GO:AL-Projekts (GOAL) bringt auch für die Gruppe Offene Infrastruktur dauerhaft Aufgaben mit sich: lobid indexiert unter anderem die Verbunddaten des hbz, die nun schrittweise nach Alma wandern. Demenstprechend müssen sämtliche Prozesse zum Extrahieren, Transformieren und Laden (ETL) der Verbunddaten angepasst werden, damit sie (auch) auf Basis von Alma-Daten funktionieren."
},
"url": "https://github.com/hbz/lobid-resources/milestone/1",
"enhances": [
{
"id": "https://lobid.org"
}
],
"isBasedOn": [
{
"id": "https://metafacture.org"
}
]
}
20 changes: 20 additions & 0 deletions gatsby/lobid/static/project/lrmi-profile.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"@context": "https://schema.org/",
"id": "https://github.com/dini-ag-kim/lrmi-profile",
"type": [
"Project"
],
"name": {
"de": "LRMI-Metadatenprofil",
"en": "LRMI Metadata Profile"
},
"description": {
"en": "A schema.org/LRMI-based profile for describing OER developed and published as JSON Schema",
"de": "In diesem Projekt wird die erste offizielle Version eines Metadatenprofils für die web-konforme Publikation von Metadaten für Lehr- und Lernressourcen im deutschsprachigen Raum entwickelt. Es basiert auf dem schema.org-Vokabular mit seinen LRMI_Erweiterungen (Learning Resource Metadata Initiative) und fokussiert auf die Publikation der Metadaten als JSON-LD.\n\nDas Profil ist Basis für das Index-Schema im OERSI-Projekt (OEI) und soll als Vorgabe dienen für die Vergabe von Metadaten für OERs, die mit Fördergeldern des Landes NRW erstellt werden.\n\nFür die Validierung von Metadaten im Hinblick auf ihre Konformität zum Profil wird ein JSON Schema gepflegt."
},
"isBasedOn": [
{
"id": "https://github.com/dini-ag-kim/oer-stoeberspecs"
}
]
}
Loading

0 comments on commit 5ab5499

Please sign in to comment.