Commit 19666070 authored by Daniele Berardo's avatar Daniele Berardo

Merge branch 'pages/initial-adjustments' into 'master'

Adjustments to static pages (e.g. github -> gitlab)

See merge request !33
parents 5167e59f 9a540f31
Pipeline #186918774 passed with stages
in 12 minutes and 52 seconds
......@@ -21,13 +21,16 @@
## Prerequisites
### Node.js and npm
To run this project you will need a package manager such as `npm`.
To install it, follow the guide at [npmjs.com](https://www.npmjs.com/get-npm).
### Library
To be able to use the widget API you will need to download the `@tecnojest/widget-base` package or build the `lib` yourself.
To be able to use the widget API you will need to download the `@tecnojest/widget-base` package or build the `lib` yourself.
#### Installing from the npm registry
If you are a registered partner, you will be able to download the package from the official registry. You will need to configure your local npm engine to point to Tecnojest's registry, by doing the following:
# authenticate in the private npm registry
......@@ -42,17 +45,19 @@ if during the first `npm login` step you receive a `UNABLE_TO_VERIFY_LEAF_SIGNAT
and try again.
#### Building the lib yourself
Everyone is able to build the `lib` themselves. To do so, follow these steps:
Everyone is able to build the `lib` themselves. To do so, follow these steps:
1. Clone the repository
2. `cd` into the repository
3. `npm install` to install the dependencies
4. To build, run:
4.1 OSX / Linux: `npm run build`
4.2 Windows: `npm run build-windows`
4.1 OSX / Linux: `npm run build`
4.2 Windows: `npm run build-windows`
To link the `lib` in your widget template:
a) Modify the import in the widget template of your choice to point to the built lib instead of `@tecnojest/widget-base`
b) Run `npm link` in the `lib` folder and `npm link @tecnojest/widget-base` in the widget template folder
a) Modify the import in the widget template of your choice to point to the built lib instead of `@tecnojest/widget-base`
b) Run `npm link` in the `lib` folder and `npm link @tecnojest/widget-base` in the widget template folder
<a id="get-started"></a>
......@@ -62,17 +67,19 @@ This repository contains the documentation, lib and templates for creating widge
Additional templates or implementations of widgets can be created by following the [lib's README](./lib/README.md#index-file)
<a id="folder-structure"></a>
## Folder structure
In the repository you can find the following folders:
* [doc](./doc)
Contains a thorough description and outlines the purpose of the whole project in markdown.
See [the first article on the concept](https://blog.energenious.eu/?p=74).
* [lib](./lib)
The core of this project. Contains the skeleton for rendering widgets written in different techologies.
- [doc](./doc)
Contains a thorough description and outlines the purpose of the whole project in markdown.
See [the first article on the concept](https://blog.energenious.eu/?p=74).
- [lib](./lib)
The core of this project. Contains the skeleton for rendering widgets written in different techologies.
* [templates](./templates)
- [templates](./templates)
Basic, working implementations of widgets written in various technologies, ready to be developed further. It is recommended to start off with these templates.
To use a template, please refer to its corresponding README.
......@@ -82,6 +89,10 @@ See [the first article on the concept](https://blog.energenious.eu/?p=74).
To contribute to particular parts of the repository, please refer to the corresponding READMEs.
### CI/CD configuration
Please run the CI/CD locally using GitLab Runner. The guide on how to use it can be found here: [GitLab Runner Installation and Usage](https://medium.com/@umutuluer/how-to-test-gitlab-ci-locally-f9e6cef4f054)
<a id="troubleshoot"></a>
## Troubleshoot
......
......@@ -44,7 +44,8 @@ const config = {
title: "Energenious | Widgets",
description: "Widgets project documentation.",
ogImage: null,
docsLocation: "https://gitlab.com/energenious/widgets/pages/content",
docsLocation:
"https://gitlab.com/energenious/widgets/-/tree/master/pages/content",
favicon: "https://energenious.eu/lay/favicon-32x32.png"
},
pwa: {
......
---
title: "Landing Page"
metaTitle: "Landing Page"
---
Some introduction text. Lists out all the headings from h1 to h6. Easy to customise. Some more text. Additional text.
# Heading H1
Heading 1 text
## Heading H2
Heading 2 text
### Heading H3
Heading 3 text
#### Heading H4
Heading 4 text
##### Heading H5
Heading 5 text
###### Heading H6
Heading 6 text
## Lists
- Item 1
- Item 2
- Item 3
......
import React from "react";
const gitlabIcon = require("./components/images/gitlab.svg");
const GitLabLink = ({ link, text }) => {
return (
<a href={link} className="githubSection">
<img className="githubIcon" src={gitlabIcon} alt="gitlab" />
{text}
</a>
);
};
export default GitLabLink;
import React from 'react';
const githubIcon = require('./components/images/github.svg');
const GithubLink = ({ link, text }) => {
return (
<a href={link} className="githubSection">
<img className="githubIcon" src={githubIcon} alt="github" />
{text}
</a>
);
};
export default GithubLink;
import React from 'react';
import styled from '@emotion/styled';
import { StaticQuery, graphql } from 'gatsby';
import GitHubButton from 'react-github-btn';
import Link from './link';
import Loadable from 'react-loadable';
import React from "react";
import styled from "@emotion/styled";
import { StaticQuery, graphql } from "gatsby";
import GitHubButton from "react-github-btn";
import Link from "./link";
import Loadable from "react-loadable";
import config from '../../config.js';
import LoadingProvider from './mdxComponents/loading';
import { DarkModeSwitch } from './DarkModeSwitch';
import config from "../../config.js";
import LoadingProvider from "./mdxComponents/loading";
import { DarkModeSwitch } from "./DarkModeSwitch";
const help = require('./images/help.svg');
const help = require("./images/help.svg");
const isSearchEnabled = config.header.search && config.header.search.enabled ? true : false;
const isSearchEnabled =
config.header.search && config.header.search.enabled ? true : false;
let searchIndices = [];
......@@ -19,34 +20,34 @@ if (isSearchEnabled && config.header.search.indexName) {
searchIndices.push({
name: `${config.header.search.indexName}`,
title: `Results`,
hitComp: `PageHit`,
hitComp: `PageHit`
});
}
import Sidebar from './sidebar';
import Sidebar from "./sidebar";
const LoadableComponent = Loadable({
loader: () => import('./search/index'),
loading: LoadingProvider,
loader: () => import("./search/index"),
loading: LoadingProvider
});
function myFunction() {
var x = document.getElementById('navbar');
var x = document.getElementById("navbar");
if (x.className === 'topnav') {
x.className += ' responsive';
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = 'topnav';
x.className = "topnav";
}
}
const StyledBgDiv = styled('div')`
const StyledBgDiv = styled("div")`
height: 60px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
background-color: #f8f8f8;
position: relative;
display: none;
background: ${props => (props.isDarkThemeActive ? '#001932' : undefined)};
background: ${props => (props.isDarkThemeActive ? "#001932" : undefined)};
@media (max-width: 767px) {
display: block;
......@@ -76,35 +77,42 @@ const Header = ({ location, isDarkThemeActive, toggleActiveTheme }) => (
}
`}
render={data => {
const logoImg = require('./images/logo.svg');
const logoImg = require("./images/logo.svg");
const twitter = require('./images/twitter.svg');
const twitter = require("./images/twitter.svg");
const discordBrandsBlock = require('./images/discord-brands-block.svg');
const discordBrandsBlock = require("./images/discord-brands-block.svg");
const twitterBrandsBlock = require('./images/twitter-brands-block.svg');
const twitterBrandsBlock = require("./images/twitter-brands-block.svg");
const {
site: {
siteMetadata: { headerTitle, githubUrl, helpUrl, tweetText, logo, headerLinks },
},
siteMetadata: {
headerTitle,
githubUrl,
helpUrl,
tweetText,
logo,
headerLinks
}
}
} = data;
const finalLogoLink = logo.link !== '' ? logo.link : 'https://hasura.io/';
const finalLogoLink = logo.link !== "" ? logo.link : "https://hasura.io/";
return (
<div className={'navBarWrapper'}>
<nav className={'navBarDefault'}>
<div className={'navBarHeader'}>
<Link to={finalLogoLink} className={'navBarBrand'}>
<div className={"navBarWrapper"}>
<nav className={"navBarDefault"}>
<div className={"navBarHeader"}>
<Link to={finalLogoLink} className={"navBarBrand"}>
<img
className={'img-responsive displayInline'}
src={logo.image !== '' ? logo.image : logoImg}
alt={'logo'}
className={"img-responsive displayInline"}
src={logo.image !== "" ? logo.image : logoImg}
alt={"logo"}
/>
</Link>
<div
className={'headerTitle displayInline'}
className={"headerTitle displayInline"}
dangerouslySetInnerHTML={{ __html: headerTitle }}
/>
</div>
......@@ -115,18 +123,18 @@ const Header = ({ location, isDarkThemeActive, toggleActiveTheme }) => (
></ul>
) : null}
{isSearchEnabled ? (
<div className={'searchWrapper hiddenMobile navBarUL'}>
<div className={"searchWrapper hiddenMobile navBarUL"}>
<LoadableComponent collapse={true} indices={searchIndices} />
</div>
) : null}
<div id="navbar" className={'topnav'}>
<div className={'visibleMobile'}>
<div id="navbar" className={"topnav"}>
<div className={"visibleMobile"}>
<Sidebar location={location} />
<hr />
</div>
<ul className={'navBarUL navBarNav navBarULRight'}>
<ul className={"navBarUL navBarNav navBarULRight"}>
{headerLinks.map((link, key) => {
if (link.link !== '' && link.text !== '') {
if (link.link !== "" && link.text !== "") {
return (
<li key={key}>
<a
......@@ -140,47 +148,42 @@ const Header = ({ location, isDarkThemeActive, toggleActiveTheme }) => (
);
}
})}
{helpUrl !== '' ? (
{helpUrl !== "" ? (
<li>
<a href={helpUrl}>
<img src={help} alt={'Help icon'} />
<img src={help} alt={"Help icon"} />
</a>
</li>
) : null}
{tweetText !== '' ? (
{tweetText !== "" ? (
<li>
<a
href={'https://twitter.com/intent/tweet?&text=' + tweetText}
href={
"https://twitter.com/intent/tweet?&text=" + tweetText
}
target="_blank"
rel="noopener noreferrer"
>
<img className={'shareIcon'} src={twitter} alt={'Twitter'} />
<img
className={"shareIcon"}
src={twitter}
alt={"Twitter"}
/>
</a>
</li>
) : null}
{tweetText !== '' || githubUrl !== '' ? (
{tweetText !== "" || githubUrl !== "" ? (
<li className="divider hiddenMobile"></li>
) : null}
{config.header.social ? (
<li className={'hiddenMobile'}>
<li className={"hiddenMobile"}>
<ul
className="socialWrapper"
dangerouslySetInnerHTML={{ __html: config.header.social }}
></ul>
</li>
) : null}
{githubUrl !== '' ? (
<li className={'githubBtn'}>
<GitHubButton
href={githubUrl}
data-show-count="true"
aria-label="Star on GitHub"
>
Star
</GitHubButton>
</li>
) : null}
<li>
<DarkModeSwitch
isDarkThemeActive={isDarkThemeActive}
......@@ -191,21 +194,21 @@ const Header = ({ location, isDarkThemeActive, toggleActiveTheme }) => (
</div>
</nav>
<StyledBgDiv isDarkThemeActive={isDarkThemeActive}>
<div className={'navBarDefault removePadd'}>
<div className={"navBarDefault removePadd"}>
<span
onClick={myFunction}
className={'navBarToggle'}
className={"navBarToggle"}
onKeyDown={myFunction}
role="button"
tabIndex={0}
>
<span className={'iconBar'}></span>
<span className={'iconBar'}></span>
<span className={'iconBar'}></span>
<span className={"iconBar"}></span>
<span className={"iconBar"}></span>
<span className={"iconBar"}></span>
</span>
</div>
{isSearchEnabled ? (
<div className={'searchWrapper'}>
<div className={"searchWrapper"}>
<LoadableComponent collapse={true} indices={searchIndices} />
</div>
) : null}
......
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 2350 2314.8" xml:space="preserve">
<path d="M1175,0C525.8,0,0,525.8,0,1175c0,552.2,378.9,1010.5,890.1,1139.7c-5.9-14.7-8.8-35.3-8.8-55.8v-199.8H734.4
c-79.3,0-152.8-35.2-185.1-99.9c-38.2-70.5-44.1-179.2-141-246.8c-29.4-23.5-5.9-47,26.4-44.1c61.7,17.6,111.6,58.8,158.6,120.4
c47,61.7,67.6,76.4,155.7,76.4c41.1,0,105.7-2.9,164.5-11.8c32.3-82.3,88.1-155.7,155.7-190.9c-393.6-47-581.6-240.9-581.6-505.3
c0-114.6,49.9-223.3,132.2-317.3c-26.4-91.1-61.7-279.1,11.8-352.5c176.3,0,282,114.6,308.4,143.9c88.1-29.4,185.1-47,284.9-47
c102.8,0,196.8,17.6,284.9,47c26.4-29.4,132.2-143.9,308.4-143.9c70.5,70.5,38.2,261.4,8.8,352.5c82.3,91.1,129.3,202.7,129.3,317.3
c0,264.4-185.1,458.3-575.7,499.4c108.7,55.8,185.1,214.4,185.1,331.9V2256c0,8.8-2.9,17.6-2.9,26.4
C2021,2123.8,2350,1689.1,2350,1175C2350,525.8,1824.2,0,1175,0L1175,0z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 586 559" style="enable-background:new 0 0 586 559;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FAFAFA;}
.st1{fill:#F0F0F0;}
.st2{fill:#FFFFFF;}
.st3{fill:#E24329;}
.st4{fill:#FCA326;}
.st5{fill:#FC6D26;}
.st6{fill:#8C929D;}
.st7{fill:#2E2E2E;}
.st8{fill:none;stroke:#FCA326;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st9{fill:none;stroke:#FC6D26;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st10{fill:none;stroke:#E24329;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st11{fill:none;stroke:#F0F0F0;stroke-miterlimit:10;}
.st12{fill:#231F20;}
.st13{fill:none;stroke:#231F20;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st14{display:none;}
.st15{display:inline;opacity:0.1;fill:#E828E3;}
.st16{display:inline;}
.st17{opacity:0.1;fill:#E828E3;}
.st18{font-family:'SourceSansPro-Semibold';}
.st19{font-size:24px;}
.st20{display:inline;fill:#DB3B21;}
.st21{display:inline;fill:#FC6D26;}
.st22{display:inline;fill:#2E2E2E;}
.st23{display:inline;fill:#6E49CB;}
.st24{display:inline;fill:#380D75;}
.st25{display:inline;fill:#FCA121;}
.st26{opacity:0.6;fill:none;stroke:#231F20;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:12,6;}
.st27{fill:none;stroke:#444444;stroke-width:1.5339;stroke-miterlimit:10;}
</style>
<g id="logo_art">
<g>
<path id="path50_2_" class="st3" d="M293.026,434.983L293.026,434.983l62.199-191.322H230.918L293.026,434.983L293.026,434.983z"/>
<path id="path66_6_" class="st4" d="M143.798,243.662L143.798,243.662l-18.941,58.126c-1.714,5.278,0.137,11.104,4.661,14.394 l163.509,118.801L143.798,243.662L143.798,243.662z"/>
<path id="path74_2_" class="st3" d="M143.798,243.662h87.12l-37.494-115.224c-1.919-5.895-10.282-5.895-12.27,0L143.798,243.662 L143.798,243.662z"/>
<path id="path82_6_" class="st4" d="M442.346,243.662L442.346,243.662l18.873,58.126c1.714,5.278-0.137,11.104-4.661,14.394 L293.026,434.983L442.346,243.662L442.346,243.662z"/>
<path id="path86_2_" class="st3" d="M442.346,243.662h-87.12l37.425-115.224c1.919-5.895,10.282-5.895,12.27,0L442.346,243.662 L442.346,243.662z"/>
<polygon class="st5" points="293.026,434.983 355.225,243.662 442.346,243.662 "/>
<polygon class="st5" points="293.026,434.983 143.798,243.662 230.918,243.662 "/>
</g>
</g>
<g xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" id="spacing_guides" class="st14">
<path id="path40_18_" sketch:type="MSShapeGroup" class="st15" d="M0,0.5v124h586V0.5H0L0,0.5z"/>
<path id="path40_16_" sketch:type="MSShapeGroup" class="st15" d="M0,435.5v124h586v-124H0L0,435.5z"/>
<path id="path40_15_" sketch:type="MSShapeGroup" class="st15" d="M462.2,560h124V0h-124V560L462.2,560z"/>
<g class="st16">
<text transform="matrix(1 0 0 1 511.2881 283.3319)" class="st18 st19">1x</text>
</g>
<g class="st16">
<text transform="matrix(1 0 0 1 281.2881 500.9978)" class="st18 st19">1x</text>
</g>
<g class="st16">
<text transform="matrix(1 0 0 1 281.2881 65.998)" class="st18 st19">1x</text>
</g>
<path id="path40_5_" sketch:type="MSShapeGroup" class="st15" d="M0,560h124V0H0V560L0,560z"/>
<g class="st16">
<text transform="matrix(1 0 0 1 51.2881 283.3319)" class="st18 st19">1x</text>
</g>
</g>
</svg>
\ No newline at end of file
import { injectGlobal } from 'emotion';
import { injectGlobal } from "emotion";
export const baseStyles = injectGlobal`
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
......@@ -528,7 +528,7 @@ export const baseStyles = injectGlobal`
}
.gitBtn img {
width: 15px;
width: 30px;
display: inline-block;
margin-right: 5px;
}
......
import React, { Component } from 'react';
import Helmet from 'react-helmet';
import { graphql } from 'gatsby';
import MDXRenderer from 'gatsby-plugin-mdx/mdx-renderer';
import { Layout, Link } from '$components';
import NextPrevious from '../components/NextPrevious';
import config from '../../config';
import { Edit, StyledHeading, StyledMainWrapper } from '../components/styles/Docs';
import React, { Component } from "react";
import Helmet from "react-helmet";
import { graphql } from "gatsby";
import MDXRenderer from "gatsby-plugin-mdx/mdx-renderer";
import { Layout, Link } from "$components";
import NextPrevious from "../components/NextPrevious";
import config from "../../config";
import {
Edit,
StyledHeading,
StyledMainWrapper
} from "../components/styles/Docs";
const forcedNavOrder = config.sidebar.forcedNavOrder;
......@@ -21,15 +25,15 @@ export default class MDXRuntimeTest extends Component {
allMdx,
mdx,
site: {
siteMetadata: { docsLocation, title },
},
siteMetadata: { docsLocation, title }
}
} = data;
const gitHub = require('../components/images/github.svg');
const gitLab = require("../components/images/gitlab.svg");
const navItems = allMdx.edges
.map(({ node }) => node.fields.slug)
.filter(slug => slug !== '/')
.filter(slug => slug !== "/")
.sort()
.reduce(
(acc, cur) => {
......@@ -37,10 +41,10 @@ export default class MDXRuntimeTest extends Component {
return { ...acc, [cur]: [cur] };
}
let prefix = cur.split('/')[1];
let prefix = cur.split("/")[1];
if (config.gatsby && config.gatsby.trailingSlash) {
prefix = prefix + '/';
prefix = prefix + "/";
}
if (prefix && forcedNavOrder.find(url => url === `/${prefix}`)) {
......@@ -59,7 +63,9 @@ export default class MDXRuntimeTest extends Component {
.concat(navItems.items)
.map(slug => {
if (slug) {
const { node } = allMdx.edges.find(({ node }) => node.fields.slug === slug);
const { node } = allMdx.edges.find(
({ node }) => node.fields.slug === slug
);
return { title: node.fields.title, url: node.fields.slug };
}
......@@ -73,7 +79,9 @@ export default class MDXRuntimeTest extends Component {
let canonicalUrl = config.gatsby.siteUrl;
canonicalUrl =
config.gatsby.pathPrefix !== '/' ? canonicalUrl + config.gatsby.pathPrefix : canonicalUrl;
config.gatsby.pathPrefix !== "/"
? canonicalUrl + config.gatsby.pathPrefix
: canonicalUrl;
canonicalUrl = canonicalUrl + mdx.fields.slug;
return (
......@@ -81,21 +89,30 @@ export default class MDXRuntimeTest extends Component {
<Helmet>
{metaTitle ? <title>{metaTitle}</title> : null}
{metaTitle ? <meta name="title" content={metaTitle} /> : null}
{metaDescription ? <meta name="description" content={metaDescription} /> : null}
{metaDescription ? (
<meta name="description" content={metaDescription} />
) : null}
{metaTitle ? <meta property="og:title" content={metaTitle} /> : null}
{metaDescription ? <meta property="og:description" content={metaDescription} /> : null}
{metaTitle ? <meta property="twitter:title" content={metaTitle} /> : null}
{metaDescription ? (
<meta property="og:description" content={metaDescription} />
) : null}
{metaTitle ? (
<meta property="twitter:title" content={metaTitle} />
) : null}
{metaDescription ? (
<meta property="twitter:description" content={metaDescription} />
) : null}
<link rel="canonical" href={canonicalUrl} />