From e5634e82ed90436d9385f8313bf999948e5a1e60 Mon Sep 17 00:00:00 2001 From: Fabian Steeg Date: Thu, 22 Oct 2020 17:04:37 +0200 Subject: [PATCH 1/5] Tweak gatsby deployment instructions Based on my experience deploying https://github.com/hbz/lobid/pull/424 --- gatsby/lobid/README.md | 33 ++++++++++++++++++++++++--------- 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/gatsby/lobid/README.md b/gatsby/lobid/README.md index 15f154cd..f8280993 100644 --- a/gatsby/lobid/README.md +++ b/gatsby/lobid/README.md @@ -33,10 +33,18 @@ Make sure `node --version` is at least `v10.18.1` and `npm --version` is at leas 1. **Start developing** - We separate developing and production, so first go to the staging section: + After cloning the repo: + ```shell - cd stage.lobid.org/gatsby/lobid + git clone https://github.com/hbz/lobid.git ``` + + Go to `gatsby/lobid` in the repo: + + ```shell + cd lobid/gatsby/lobid + ``` + Start it up. ```shell @@ -47,14 +55,20 @@ Make sure `node --version` is at least `v10.18.1` and `npm --version` is at leas Your site is now running at `http://localhost:8000`! - *Note*: As the port 8000 is closed on emphytos use the proxy http://gatsbydev.lobid.org/. You'll also see a second link: _`http://localhost:8000/___graphql`_, adjust this to the proxy. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql). - Also, only the dynamically generated pages (this defined in _src/pages_) are served properly. + *Note*: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql). + Also, only the dynamically generated pages (this defined in _src/pages_) are served properly with `gatsby develop`. Open the `lobid` directory in your code editor of choice and edit e.g. `src/pages/team-de.js`. Save your changes and the browser will update in real time! +2. **Stage** -2. **Deploy** + The following assumes being in the web home on emphytos: `ssh @emphytos`; `sudo su`; `cd /srv/www/htdocs/`. + We separate stage and production, so first go to the staging section: + ```shell + cd stage.lobid.org/gatsby/lobid + ``` + It's always good to clean up first: ```shell gatsby clean @@ -66,17 +80,18 @@ Make sure `node --version` is at least `v10.18.1` and `npm --version` is at leas This generates the `public` folder which is the `document root` of apache. - Test the build by visiting http://gatsbydev.lobid.org/. Other than by `gatsby develop` now also the static files can be viewed. + Test the build by visiting http://stage.lobid.org/. Other than by `gatsby develop` now also the static files can be viewed. - If all is well, commit and push everything. Change to master branch and merge with `no-ff` as always. +3. **Deploy** - Go to the production location (lobid.org/gatsby/lobid), pull and repeat the `deploy` process. + If all is well, go to the production location (lobid.org/gatsby/lobid), pull with `no-ff` as always and repeat the `build` process above. *Note*: If you deploy, the public folder is deleted and so there is a downtime of the pages. It takes around half a minute. Other pages, like `/download`, `/labs` etc. are configured to another document root, see the `vhost.conf` on emphytos for that. - + + Test the deployment by visiting http://lobid.org/. ## 🧐 What's inside From 458fd0252700499c50b94df9b4acc500c02ea777 Mon Sep 17 00:00:00 2001 From: Fabian Steeg Date: Fri, 23 Oct 2020 13:03:28 +0200 Subject: [PATCH 2/5] Update server instructions for lobid user See https://github.com/hbz/lobid/pull/425 --- gatsby/lobid/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gatsby/lobid/README.md b/gatsby/lobid/README.md index f8280993..8f1870ba 100644 --- a/gatsby/lobid/README.md +++ b/gatsby/lobid/README.md @@ -62,7 +62,7 @@ Make sure `node --version` is at least `v10.18.1` and `npm --version` is at leas 2. **Stage** - The following assumes being in the web home on emphytos: `ssh @emphytos`; `sudo su`; `cd /srv/www/htdocs/`. + The following assumes being in the web home on emphytos: `ssh @emphytos`; `sudo su lobid -`; `cd /srv/www/htdocs/`. We separate stage and production, so first go to the staging section: ```shell From 2b87ca3f888fd8dbe70ec300b0625670dbc82297 Mon Sep 17 00:00:00 2001 From: Fabian Steeg Date: Thu, 10 Dec 2020 10:50:50 +0100 Subject: [PATCH 3/5] Set up visualization of team.json data with vis.js network Vis.js: https://visjs.org/, https://lobid.org/gnd/116994061#rels See https://github.com/hbz/lobid/issues/427 --- .gitignore | 3 ++ gatsby/lobid/gatsby-node.js | 5 +++ gatsby/lobid/package-lock.json | 10 +++++ gatsby/lobid/package.json | 4 +- gatsby/lobid/src/components/visual.html.js | 47 ++++++++++++++++++++++ gatsby/lobid/src/pages/visual.js | 34 ++++++++++++++++ gatsby/lobid/static/stylesheets/lobid.css | 7 ++++ 7 files changed, 109 insertions(+), 1 deletion(-) create mode 100644 gatsby/lobid/src/components/visual.html.js create mode 100644 gatsby/lobid/src/pages/visual.js diff --git a/.gitignore b/.gitignore index 5ea82470..9ff50a36 100644 --- a/.gitignore +++ b/.gitignore @@ -64,6 +64,9 @@ typings/ # gatsby files .cache/ public +bin +target +tmp # Mac files .DS_Store diff --git a/gatsby/lobid/gatsby-node.js b/gatsby/lobid/gatsby-node.js index 4140ed50..84850f98 100644 --- a/gatsby/lobid/gatsby-node.js +++ b/gatsby/lobid/gatsby-node.js @@ -7,4 +7,9 @@ exports.createPages = ({ actions }) => { path: "/team", component: path.resolve(`./src/pages/team-de.js`) }); + + createPage({ + path: "/visual", + component: path.resolve(`./src/pages/visual.js`) + }); }; \ No newline at end of file diff --git a/gatsby/lobid/package-lock.json b/gatsby/lobid/package-lock.json index 6346eae1..c74a80a2 100644 --- a/gatsby/lobid/package-lock.json +++ b/gatsby/lobid/package-lock.json @@ -15902,6 +15902,16 @@ "extsprintf": "^1.2.0" } }, + "vis-data": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.1.tgz", + "integrity": "sha512-Z5+caySDqoKL9yxbI3c/CKmUcSvROSZstuvwxbOsUpdxHpxFYEUgxC1EH4lSB1ykEaM54MVMM1UcwB9oNaWFlw==" + }, + "vis-network": { + "version": "8.5.4", + "resolved": "https://registry.npmjs.org/vis-network/-/vis-network-8.5.4.tgz", + "integrity": "sha512-KeYHlTZpbPHS6868MHnMtRXDTmKA0YwQQl/mC5cBiICGH67ilzOqkyWObAMyeo8b8Z/6pTfFJEu9g70EvWqOYA==" + }, "vm-browserify": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz", diff --git a/gatsby/lobid/package.json b/gatsby/lobid/package.json index a501f01c..ffac9784 100644 --- a/gatsby/lobid/package.json +++ b/gatsby/lobid/package.json @@ -25,7 +25,9 @@ "react-dom": "^16.12.0", "reactstrap": "^8.4.1", "typescript": "^3.6.0-beta", - "utf-8-validate": "^5.0.2" + "utf-8-validate": "^5.0.2", + "vis-data": "^7.1.1", + "vis-network": "^8.5.4" }, "devDependencies": { "prettier": "^1.19.1" diff --git a/gatsby/lobid/src/components/visual.html.js b/gatsby/lobid/src/components/visual.html.js new file mode 100644 index 00000000..7e5a1143 --- /dev/null +++ b/gatsby/lobid/src/components/visual.html.js @@ -0,0 +1,47 @@ +import React, { Component, createRef } from "react"; +import { DataSet, Network} from 'vis-network/standalone/esm/vis-network'; + +import "./css/lobid.css"; + +export class Visual extends Component { + + constructor(props) { + super(props); + this.props = props; + this.state = { + infoToggled: false + }; + this.network = {}; + this.appRef = createRef(); + } + + componentDidMount() { + console.log("Props", this.props) + + var ns = [ + { id: 'm', label: "Members","shape":"dot","size":"5"}, + { id: 'o', label: "Offers","shape":"dot","size":"5"} + ]; + this.props.members.forEach((item,index) => { ns.push({ id: "m"+index, label: item.member.name, "shape":"box" }); }); + this.props.products.forEach((item,index) => { ns.push({ id: "o"+index, label: item.name, "shape":"box" }); }); + const nodes = new DataSet(ns); + + var es = []; + this.props.members.forEach((item,index) => { es.push({ from: 'm', to: 'm'+index }); }); + this.props.products.forEach((item,index) => { es.push({ from: 'o', to: 'o'+index }); }); + const edges = new DataSet(es); + + const data = { + nodes: nodes, + edges: edges + }; + const options = {}; + this.network = new Network(this.appRef.current, data, options); + } + + render() { + return ( +
+ ); + } +} diff --git a/gatsby/lobid/src/pages/visual.js b/gatsby/lobid/src/pages/visual.js new file mode 100644 index 00000000..bca0b3f7 --- /dev/null +++ b/gatsby/lobid/src/pages/visual.js @@ -0,0 +1,34 @@ +import React from "react"; +import { graphql } from "gatsby"; +import { Visual } from "../components/visual.html"; + +export default ({ data }) => ( + +); + +export const query = graphql` + query { + dataJson { + makesOffer { + alternateName { + de + } + id + name + } + member { + member { + id + image + name + } + roleName { + de + } + } + } + } +`; diff --git a/gatsby/lobid/static/stylesheets/lobid.css b/gatsby/lobid/static/stylesheets/lobid.css index 9e9c1d72..051a200e 100644 --- a/gatsby/lobid/static/stylesheets/lobid.css +++ b/gatsby/lobid/static/stylesheets/lobid.css @@ -1,3 +1,10 @@ +#lobid-network { + width: 900px; + height: 600px; + border: 1px solid lightgray; + margin: 20px; +} + #header { width: 100%; background-image: url('https://lobid.org/images/clouds.jpg'); From 8bce899b799f4ca505fe2e68253f4592ec9a1793 Mon Sep 17 00:00:00 2001 From: Fabian Steeg Date: Thu, 10 Dec 2020 16:16:34 +0100 Subject: [PATCH 4/5] Extract header and footer to sub-components, reuse for /visual See https://github.com/hbz/lobid/issues/427 --- gatsby/lobid/src/components/footer.html.js | 46 +++++ gatsby/lobid/src/components/header.html.js | 164 +++++++++++++++++ gatsby/lobid/src/components/team.html.js | 203 ++------------------- gatsby/lobid/src/components/visual.html.js | 36 +++- gatsby/lobid/src/pages/visual.js | 15 ++ gatsby/lobid/static/stylesheets/lobid.css | 3 +- 6 files changed, 273 insertions(+), 194 deletions(-) create mode 100644 gatsby/lobid/src/components/footer.html.js create mode 100644 gatsby/lobid/src/components/header.html.js diff --git a/gatsby/lobid/src/components/footer.html.js b/gatsby/lobid/src/components/footer.html.js new file mode 100644 index 00000000..869d9d18 --- /dev/null +++ b/gatsby/lobid/src/components/footer.html.js @@ -0,0 +1,46 @@ +import React from "react" + +import wappenPng from "./images/wappen.png"; + +export default class Footer extends React.Component { + render() { + return ( + + ) + } +} \ No newline at end of file diff --git a/gatsby/lobid/src/components/header.html.js b/gatsby/lobid/src/components/header.html.js new file mode 100644 index 00000000..84e80499 --- /dev/null +++ b/gatsby/lobid/src/components/header.html.js @@ -0,0 +1,164 @@ +import React from "react" + +import { + UncontrolledDropdown, + DropdownToggle, + DropdownMenu, + DropdownItem +} from "reactstrap"; + +import lobidLogoPng from "./images/lobid.png"; + +export default class Header extends React.Component { + render() { + return ( +
+ +
) + } +} + diff --git a/gatsby/lobid/src/components/team.html.js b/gatsby/lobid/src/components/team.html.js index 63b92dcc..76cbbce4 100644 --- a/gatsby/lobid/src/components/team.html.js +++ b/gatsby/lobid/src/components/team.html.js @@ -1,17 +1,12 @@ import React from "react"; -import { - UncontrolledDropdown, - DropdownToggle, - DropdownMenu, - DropdownItem -} from "reactstrap"; +import Header from "./header.html"; +import Footer from "./footer.html"; import "./css/lobid.css"; import "./css/bootstrap.min.css"; import "./css/font-awesome.min.css"; import hbzLogoPng from "./images/hbz.png"; -import lobidLogoPng from "./images/lobid.png"; import twitterLogoBluePng from "./images/Twitter_logo_blue.png"; import mailPng from "./images/mail.png"; import jsonLdPng from "./images/json-ld.png"; @@ -19,7 +14,6 @@ import feedPng from "./images/feed.png"; import gitHubMark32pxPng from "./images/GitHub-Mark-32px.png"; import mailmanJpg from "./images/mailman.jpg"; import freenodePng from "./images/freenode.png"; -import wappenPng from "./images/wappen.png"; export class Team extends React.Component { constructor(props) { @@ -58,156 +52,18 @@ export class Team extends React.Component { ); }; render() { + console.log('Header', Header); return (

-

- -
+

@@ -444,42 +300,7 @@ export class Team extends React.Component { {this.props.makesOfferAlternateName3}

- +
); } diff --git a/gatsby/lobid/src/components/visual.html.js b/gatsby/lobid/src/components/visual.html.js index 7e5a1143..730a860c 100644 --- a/gatsby/lobid/src/components/visual.html.js +++ b/gatsby/lobid/src/components/visual.html.js @@ -1,8 +1,12 @@ import React, { Component, createRef } from "react"; import { DataSet, Network} from 'vis-network/standalone/esm/vis-network'; +import Header from "./header.html"; +import Footer from "./footer.html"; import "./css/lobid.css"; +import hbzLogoPng from "./images/hbz.png"; + export class Visual extends Component { constructor(props) { @@ -41,7 +45,37 @@ export class Visual extends Component { render() { return ( -
+
+

+

+
+
+

+ hbz logo + lobid — {this.props.subtitle} +

+
+

+ + Dies ist eine experimentelle Visualisierung der Daten aus /team.json, + die auch zur Darstellung von /team verwendet werden. + +

+
+
+
+
); } } diff --git a/gatsby/lobid/src/pages/visual.js b/gatsby/lobid/src/pages/visual.js index bca0b3f7..803a39f9 100644 --- a/gatsby/lobid/src/pages/visual.js +++ b/gatsby/lobid/src/pages/visual.js @@ -6,6 +6,15 @@ export default ({ data }) => ( ); @@ -29,6 +38,12 @@ export const query = graphql` de } } + contactPoint { + contactType { + de + } + id + } } } `; diff --git a/gatsby/lobid/static/stylesheets/lobid.css b/gatsby/lobid/static/stylesheets/lobid.css index 051a200e..c75fddc8 100644 --- a/gatsby/lobid/static/stylesheets/lobid.css +++ b/gatsby/lobid/static/stylesheets/lobid.css @@ -1,7 +1,6 @@ #lobid-network { width: 900px; - height: 600px; - border: 1px solid lightgray; + height: 500px; margin: 20px; } From 98cb3a44b2009ac693264f635d711428e168240d Mon Sep 17 00:00:00 2001 From: Fabian Steeg Date: Mon, 14 Dec 2020 15:54:34 +0100 Subject: [PATCH 5/5] Set up gatsby build in Travis CI --- .travis.yml | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 .travis.yml diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 00000000..d6b9d230 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,9 @@ +language: node_js +node_js: + - "lts/*" +before_script: + - npm install -g gatsby +script: + - cd gatsby/lobid/ + - npm install + - gatsby build