Skip to content

Commit

Permalink
Merge branch 'vis' of https://github.com/hbz/lobid
Browse files Browse the repository at this point in the history
  • Loading branch information
fsteeg committed Dec 17, 2020
2 parents 553dda7 + 98cb3a4 commit ca265b1
Show file tree
Hide file tree
Showing 12 changed files with 412 additions and 201 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,9 @@ typings/
# gatsby files
.cache/
public
bin
target
tmp

# Mac files
.DS_Store
Expand Down
9 changes: 9 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
language: node_js
node_js:
- "lts/*"
before_script:
- npm install -g gatsby
script:
- cd gatsby/lobid/
- npm install
- gatsby build
33 changes: 24 additions & 9 deletions gatsby/lobid/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 <user>@emphytos`; `sudo su lobid -`; `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
Expand All @@ -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

Expand Down
5 changes: 5 additions & 0 deletions gatsby/lobid/gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -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`)
});
};
10 changes: 10 additions & 0 deletions gatsby/lobid/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion gatsby/lobid/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
46 changes: 46 additions & 0 deletions gatsby/lobid/src/components/footer.html.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React from "react"

import wappenPng from "./images/wappen.png";

export default class Footer extends React.Component {
render() {
return (
<div className="panel panel-default footer">
<div className="panel-body">
<span className="pull-left">
<img src={wappenPng} alt="NRW-Wappen" /> &nbsp; lobid |
LOD-Dienste des{" "}
<a href="https://www.hbz-nrw.de/produkte/linked-open-data">
hbz — Hochschulbibliothekszentrum des Landes NRW
</a>
</span>
<span className="pull-right">
<a href="https://www.hbz-nrw.de/impressum">
{this.props.companyDetails}
</a>
{" | "}
<a href="https://github.com/hbz/lobid/blob/master/conf/Datenschutzerklaerung_lobid.textile">
{this.props.privacy}
</a>
{" | "}
<a
href="https://twitter.com/lobidorg"
style={{ marginRight: "12px" }}
>
<i className="fa fa-twitter" aria-hidden="true"></i> Twitter
</a>
<a
href="https://github.com/hbz/lobid"
style={{ marginRight: "12px" }}
>
<i className="fa fa-github" aria-hidden="true"></i> GitHub
</a>
<a href="http://blog.lobid.org" style={{ marginRight: "12px" }}>
<i className="fa fa-pencil" aria-hidden="true"></i> Blog
</a>
</span>
</div>
</div>
)
}
}
164 changes: 164 additions & 0 deletions gatsby/lobid/src/components/header.html.js
Original file line number Diff line number Diff line change
@@ -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 (
<div className="navbar navbar-default" role="navigation">
<div className="container-fluid" id="header">
<div className="navbar-header">
<button
type="button"
className="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#lobid-nav"
>
<span className="sr-only">Navigation ein/ausblenden</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand" href="/">
<span>
<img id="butterfly" src={lobidLogoPng} alt="lobid-logo" />
</span>
</a>
</div>
<div className="navbar-collapse " id="lobid-nav">
<ul className="nav navbar-nav">
<li>
<a href="/resources">resources</a>
</li>
<li>
<a href="/organisations">organisations</a>
</li>
<li>
<a href="/gnd">gnd</a>
</li>
</ul>
<div style={{ marginRight: "-6px" }}>
<ul className="nav navbar-nav navbar-right ">
<li>
<UncontrolledDropdown>
<DropdownToggle
style={{
padding: "9px",
background: "transparent",
marginTop: "0px",
lineHeight: "30px"
}}
>
{this.props.publications}
<b
className="caret"
style={{
marginLeft: "2px"
}}
></b>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem
tag="a"
href="http://blog.lobid.org/"
style={{
paddingLeft: "6px",
color: "black",
textDecoration: "none",
lineHeight: "30px"
}}
>
Blog
</DropdownItem>
<DropdownItem divider />
<DropdownItem
as="a"
href="http://slides.lobid.org/"
style={{
paddingLeft: "6px",
color: "black",
textDecoration: "none"
}}
>
Slides
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</li>

<li>
<a
href={this.props.languageLink}
title={this.props.languageTooltip}
>
<span className="glyphicon glyphicon-globe"></span>
&nbsp;
{this.props.language}
</a>
</li>

<li>
<UncontrolledDropdown>
<DropdownToggle
className="glyphicon glyphicon-info-sign"
style={{
padding: "11px",
background: "transparent",
marginTop: "-3px",
lineHeight: "27px"
}}
>
<b
className="caret"
style={{
marginTop: "-4px",
marginLeft: "2px"
}}
></b>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem
tag="a"
href={this.props.teamLink}
style={{
paddingLeft: "6px",
color: "black",
textDecoration: "none",
lineHeight: "30px"
}}
>
Team
</DropdownItem>
<DropdownItem divider />
<DropdownItem
as="a"
href={
this.props.contactPointId +
"?subject=Feedback%20zu%20lobid.org"
}
style={{
paddingLeft: "6px",
color: "black",
textDecoration: "none"
}}
>
Feedback
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</li>
</ul>
</div>
</div>
</div>
</div>)
}
}

Loading

0 comments on commit ca265b1

Please sign in to comment.