NPM/site
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dataforge title and navbar changes

Browse Source
This commit is contained in:
Elinorre 2020-02-08 16:49:54 +03:00
parent 0dede17feb
commit 6149290e0e
11 changed files with 84 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/dataforge/docsLayout.js
View File

@ -1,12 +1,20 @@
import React from "react"
import PropTypes from "prop-types"
import favicon from "../../images/dataforge/df_logo.png"
import Helmet from "react-helmet"
import SEO from "../../components/dataforge/seo"
import Header from "./header"
import Footer from "./footer"
import "../../styles/dataforge/docs.css"
const DocsLayout = ({children}) => (
<>
<Helmet>
<link rel="icon" href={favicon}/>
</Helmet>
<SEO PageTitle="Documentation |"/>
<Header id="df"/>
<main id="docs">{children}</main>
<Footer id="df"/>

44
src/components/dataforge/header.js
View File

@ -1,41 +1,43 @@
import React from "react"
import {Link} from "gatsby"
import { globalHistory as history } from '@reach/router'
import { Link } from "@reach/router"
import logo from "../../images/dataforge/df_logo.png"
import "../../styles/dataforge/header.css"
import "../../styles/bootstrap.min.css"
import {Navbar, Nav} from "react-bootstrap"
const Header = () => {
let curActive = [' ', ' ', ' ', ' ', ' ', ' '];
const { location } = history;
if (location.pathname === '/dataforge/news'){curActive[0] = 'active';}
if (location.pathname === '/dataforge/docs'){curActive[1] = 'active';}
if (location.pathname === '/dataforge/modules'){curActive[2] = 'active';}
if (location.pathname === '/dataforge/releases'){curActive[3] = 'active';}
if (location.pathname === '/dataforge/apps'){curActive[4] = 'active';}
if (location.pathname === '/dataforge/misc'){curActive[5] = 'active';}
return(
const NavLink = props => (
<Link
{...props}
getProps={({ isCurrent }) => {
return {
style: {
color: isCurrent ? "white" : "rgb(230, 221, 221)"
}
};
}}
/>
);
const Header = () => (
<header id="df">
<Navbar expand="lg" fixed="top">
<div class="container">
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Navbar.Brand><Link to="./dataforge"><img src={logo} height="50px" alt="dataforge logo" id="logo"/></Link></Navbar.Brand>
<Nav.Link><Link id={`${curActive[0]}`} to="./dataforge/news">News</Link></Nav.Link>
<Nav.Link><Link id={`${curActive[1]}`} to="./dataforge/docs">Documentation</Link></Nav.Link>
<Nav.Link><Link id={`${curActive[2]}`} to="./dataforge/modules">Modules</Link></Nav.Link>
<Nav.Link><Link id={`${curActive[3]}`} to="./dataforge/releases">Releases</Link></Nav.Link>
<Nav.Link><Link id={`${curActive[4]}`} to="./dataforge/apps">Applications</Link></Nav.Link>
<Nav.Link><Link id={`${curActive[5]}`} to="./dataforge/misc">See also</Link></Nav.Link>
<Navbar.Brand><Link to="/dataforge"><img src={logo} height="60px" width="65px" alt="dataforge logo" id="dflogo"/></Link></Navbar.Brand>
<Nav.Link><NavLink id="df" to="/dataforge/news">News</NavLink></Nav.Link>
<Nav.Link><NavLink id="df" to="/dataforge/docs">Documentation</NavLink></Nav.Link>
<Nav.Link><NavLink id="df" to="/dataforge/modules">Modules</NavLink></Nav.Link>
<Nav.Link><NavLink id="df" to="/dataforge/releases">Releases</NavLink></Nav.Link>
<Nav.Link><NavLink id="df" to="/dataforge/apps">Applications</NavLink></Nav.Link>
<Nav.Link><NavLink id="df" to="/dataforge/misc">See also</NavLink></Nav.Link>
</Nav>
</Navbar.Collapse>
</div>
</Navbar>
</header>
)}
)
export default Header

8
src/components/dataforge/layout.js
View File

@ -1,12 +1,20 @@
import React from "react"
import PropTypes from "prop-types"
import favicon from "../../images/dataforge/df_logo.png"
import Helmet from "react-helmet"
import Header from "./header"
import Footer from "./footer"
import SEO from "./seo"
import "../../styles/dataforge/layout.css"
const Layout = ({children}) => (
<>
<Helmet>
<link rel="icon" href={favicon}/>
</Helmet>
<SEO title=" "/>
<Header id="df"/>
<div class = "container">
<main id="df">{children}</main>

28
src/components/dataforge/seo.js Normal file
View File

@ -0,0 +1,28 @@
import React from "react"
import PropTypes from "prop-types"
import Helmet from "react-helmet"
const SEO = ({ lang, PageTitle }) => {
return (
<Helmet
htmlAttributes={{
lang,
}}
title="DataForge"
pageTitle = {PageTitle}
titleTemplate={`${PageTitle} %s`}
/>
)
}
SEO.defaultProps = {
lang: `en`,
}
SEO.propTypes = {
lang: PropTypes.string,
title: PropTypes.string.isRequired,
}
export default SEO

2
src/pages/dataforge/apps.js
View File

@ -1,8 +1,10 @@
import React from "react"
import Layout from "../../components/dataforge/layout"
import SEO from "../../components/dataforge/seo"
const AppPage = () => (
<Layout>
<SEO PageTitle="Applications |"/>
<h1>Troitsk nu-mass</h1>
<img src="http://www.inr.ru/~trdat/img/spectrometer900.jpg" alt="spectrometer"/>
<p>

2
src/pages/dataforge/index.js
View File

@ -1,9 +1,11 @@
import React from "react"
import SEO from "../../components/dataforge/seo"
import {graphql} from "gatsby"
import Layout from "../../components/dataforge/layout"
const DataforgePage = ({ data }) => (
<Layout id="df">
<SEO PageTitle=" "/>
{data.index.nodes.map(index=>{
return(<p
dangerouslySetInnerHTML = {{

2
src/pages/dataforge/misc.js
View File

@ -1,10 +1,12 @@
import React from "react"
import Layout from "../../components/dataforge/layout"
import SEO from "../../components/dataforge/seo"
import sms_logo from "../../images/dataforge/sms_logo.png"
const MiscPage = () => (
<Layout>
<SEO PageTitle="See also |"/>
<h1 id="about">About us...</h1>
<img width="150" src={sms_logo} style={{marginRight: `25px`}} alt="sms"/>

2
src/pages/dataforge/modules.js
View File

@ -1,8 +1,10 @@
import React from "react"
import SEO from "../../components/dataforge/seo"
import Layout from "../../components/dataforge/layout"
const ModulesPage = () => (
<Layout id="df">
<SEO PageTitle="Modules |" />
<h1 id="core">dataforge-core</h1>
<ul>
<li>Meta-data processing tools.</li>

2
src/pages/dataforge/news.js
View File

@ -1,9 +1,11 @@
import React from "react"
import SEO from "../../components/dataforge/seo"
import {graphql} from "gatsby"
import Layout from "../../components/dataforge/layout"
const NewsPage = ({ data }) => (
<Layout>
<SEO PageTitle="News |"/>
{data.posts.nodes.map(post => {
const title = post.frontmatter.title;
const date = post.frontmatter.date;

2
src/pages/dataforge/releases.js
View File

@ -1,8 +1,10 @@
import React from "react"
import SEO from "../../components/dataforge/seo"
import Layout from "../../components/dataforge/layout"
const ReleasesPage = () => (
<Layout>
<SEO PageTitle="Releases |"/>
<h2>Versioning</h2>
<p>DataForge uses <a href="https://docs.oracle.com/middleware/1212/core/MAVEN/maven_version.htm">Maven version</a> policy.</p>
<h2>Source code and documentation consistency</h2>

12
src/styles/dataforge/header.css
View File

@ -10,14 +10,12 @@ header#df .navbar {
background-color: rgb(114, 111, 111);
border: none; }
header#df img#logo { opacity: 0.8; margin-top: 5px; }
header#df img#logo:hover { opacity: 1; }
a[aria-current="page"] img#logo { opacity: 1; }
a[aria-current="page"] img#dflogo { opacity: 1; background-color: rgb(114,111,111);}
header#df a.nav-link:hover { color: black; background-color: rgb(182, 188, 192); }
header#df a.nav-link:hover { color: white; background-color: rgb(182, 188, 192); padding-top: 15px }
header#df a.nav-link { margin-top: 7px; }
header#df a.nav-link a { padding: 15px; }
header#df a.nav-link a#active {
header#df a.nav-link a#df { padding: 15px; }
a[aria-current="page"]#df {
background-color: rgb(182, 188, 192);
padding-top: 11px;
padding-bottom: 18px; }
@ -38,7 +36,7 @@ header#df div.mr-auto.navbar-nav {
/* ------ media ------------------------------------ */
@media (max-width: 769px){
header#df a.nav-link { margin-left: 40px; margin-right: 40px; padding: 15px; }
header#df img#logo { margin-left: 20px; margin-right: 0px;}
header#df img#dflogo { margin-left: 0px; margin-right: 0px; padding-left: 10px}
header#df div#basic-navbar-nav.navbar-collapse.collapse.show {
background-color: rgb(114,111,111);
padding-bottom: 450px; }