Commit 93e1a5e8 authored by alain's avatar alain 🐙
Browse files

initial commit

parents
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Typescript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# dotenv environment variable files
.env*
# gatsby files
.cache/
public
# Mac files
.DS_Store
# Yarn
yarn-error.log
.pnp/
.pnp.js
# Yarn Integrity file
.yarn-integrity
The BSD Zero Clause License (0BSD)
Copyright (c) 2020 Gatsby Inc.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
# Gatsby application
## commands
### install
```shell
yarn install
```
Installs the Gatsby app and all of its dependencies
### develop
```shell
yarn develop
```
Start development server (at http://localhost:8000/)
### build
```shell
yarn build
```
Make production build
/**
* Implement Gatsby's Browser APIs in this file.
*
* See: https://www.gatsbyjs.org/docs/browser-apis/
*/
// You can delete this file if you're not using it
module.exports = {
siteMetadata: {
title: `Public Stack`,
description: `Gatsby with Strapi for Public Stack site`,
author: `Waag`,
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-sass`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `files`,
path: `${__dirname}/src/files`,
},
},
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: /inline/
}
}
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `Make it Open - Visual Identity`,
short_name: `mio-vi`,
start_url: `/`,
background_color: `#FFFFFF`,
theme_color: `#FF0000`,
display: `minimal-ui`,
icon: `src/images/icon.png`, // This path is relative to the root of the site.
},
},
//`gatsby-plugin-offline`,
],
}
/**
* Implement Gatsby's Node APIs in this file.
*
* See: https://www.gatsbyjs.org/docs/node-apis/
*/
/**
* Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
*
* See: https://www.gatsbyjs.org/docs/ssr-apis/
*/
// You can delete this file if you're not using it
{
"name": "make-it-open-vi",
"private": true,
"description": "bla",
"version": "0.1.0",
"author": "Alain Otjens <alain@waag.org>",
"dependencies": {
"gatsby": "^2.28.2",
"gatsby-cli": "^2.15.1",
"gatsby-image": "^2.7.0",
"gatsby-plugin-manifest": "^2.8.0",
"gatsby-plugin-offline": "^3.6.0",
"gatsby-plugin-react-helmet": "^3.6.0",
"gatsby-plugin-react-svg": "^3.0.0",
"gatsby-plugin-sass": "^2.7.0",
"gatsby-plugin-sharp": "^2.10.1",
"gatsby-source-filesystem": "^2.7.0",
"gatsby-transformer-sharp": "^2.8.0",
"kute.js": "^2.0.16",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-responsive": "^8.2.0",
"text-clipper": "^2.1.0"
},
"devDependencies": {
"prettier": "2.2.1"
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": ""
}
}
import React from "react"
const ColorSelect = ({ label, colorOptions, colorSelections, index, action }) => (
<div className="color-select">
<span className="color-select-label">{ label }:</span>
<span className="color-select-colors">
{colorOptions.map((color, i) => <span key={color.value}
className={`color-button ${(colorSelections[index] === i ? "selected" : "")}`}
style={{ background: color.value }}
onClick={(e) => { action(index, i) }}
role="button" tabIndex={i}
aria-label={`choose color: ${color.value}`}
/> )}
</span>
</div>
)
export default ColorSelect
import React from "react"
import { StaticQuery, graphql } from 'gatsby';
function renderDownload(file, label) {
return (
<a className="button" href={file.node.publicURL}>{ label } &raquo;</a>
)
}
const Download = function ({ src, label }) {
return <StaticQuery
query={graphql`
query {
files: allFile(filter:{ extension: { regex: "/zip|docx/"}}) {
edges {
node {
publicURL
relativePath
}
}
}
}
`}
render={({ files }) => renderDownload(files.edges.find(file => file.node.relativePath === src), label)}
/>
}
export default Download
import React from "react"
const Footer = () => (
<footer>
{`designed & built by `}
<a href="https://waag.org">waag</a>
</footer>
)
export default Footer
import React, { useEffect, useState } from "react"
import { Link } from "gatsby"
const navItems = {
primary: [
{
title: "start",
subtitle: "",
link: "/"
},
{
title: "logo",
subtitle: "",
link: "/logo"
},
{
title: "typography",
subtitle: "",
link: "/typography"
},
{
title: "colors",
subtitle: "",
link: "/colors"
},
{
title: "icons",
subtitle: "",
link: "/icons"
},
],
secondary: [
{
title: "templates",
subtitle: "",
link: "/templates"
},
{
title: "example layouts",
subtitle: "",
link: "/layouts"
},
]
}
const Header = () => {
const [nav, setNav] = useState(false);
const [scrollPosition, setSrollPosition] = useState(0);
useEffect(() => {
window.addEventListener('scroll', handleScroll, { passive: true });
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
const handleScroll = () => {
setSrollPosition(window.pageYOffset);
};
return (
<header id="site-header" className={`${nav ? "nav-active" : null} ${scrollPosition > 50 ? "scrolled" : null}` } >
<div id="site-header-bg"/>
<div id="site-titles">
<h1 id="site-title"><Link to="/" >make it open <span>visual identity</span></Link></h1>
</div>
<nav id="nav-container">
<input type="checkbox" aria-label="toggle menu" checked={nav} onChange={() => setNav(!nav)} />
<span className="hamburger-bar"></span>
<span className="hamburger-bar"></span>
<span className="hamburger-bar"></span>
<ul id="nav">
{ navItems.primary.map(item => <li key={item.title} className="primary"><Link to={item.link}>
<div className="nav-item-title">{item.title}</div>
{item.subtitle && <div className="nav-item-subtitle">{item.subtitle}</div> }
</Link></li>) }
{ navItems.secondary.map(item => <li key={item.title} className="secondary"><Link to={item.link}>
<div className="nav-item-title">{item.title}</div>
{item.subtitle && <div className="nav-item-subtitle">{item.subtitle}</div> }
</Link></li>) }
</ul>
</nav>
</header>
)
}
export default Header
import React from 'react';
import Img from 'gatsby-image';
import { StaticQuery, graphql } from 'gatsby';
function renderImage(file, bgColor, className, style) {
return (
<div className={`image ${className}`} style={style}>
{ bgColor && <div className="image-color-bg" style={{ backgroundColor: bgColor }} /> }
<Img fluid={file.node.childImageSharp.fluid} />
</div>
)
}
const Image = function (props) {
return <StaticQuery
query={graphql`
query {
images: allFile(filter:{ extension: { regex: "/jpeg|jpg|png|gif/"}}) {
edges {
node {
extension
relativePath
childImageSharp {
fluid(maxWidth: 1400) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
`}
render={({ images }) => renderImage(images.edges.find(image => image.node.relativePath === props.src), props.bgColor, props.className, props.style)}
/>
}
export default Image;
\ No newline at end of file
import React from "react"
import PropTypes from "prop-types"
import "../styles/styles.scss"
import Header from "./header"
import Footer from "./footer"
const Layout = ({ children, id, className }) => {
return (
<div id={id} className={`page ${className}`}>
<Header siteTitle="make it open" />
<main>{children}</main>
<Footer />
</div>
)
}
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout
import React from "react"
import { bgColors, fgColors } from "../settings.js"
import { getRandomIndex } from "../util"
const PageTitle = ({title, subtitle, bgColor, fgColor}) => {
const colorBgBg = bgColor ? bgColor : bgColors[getRandomIndex(5)].value
const colorBgFg = fgColor ? fgColor : fgColors[getRandomIndex(5)].value
return (
<div id="page-header" style={{ "--color-bg-bg": colorBgBg, "--color-bg-fg": colorBgFg }}>
<h1>
{ title }
{ subtitle && <span className="sub"><br />{ subtitle }</span> }
</h1>
</div>
)
}
export default PageTitle
\ No newline at end of file
import React from "react"
import PropTypes from "prop-types"
const Row = ({ children, id, className }) => {
return (
<div id={id} className={`row ${className}`}>
<div className="columns-wrapper">
{children}
</div>
</div>
)
}
Row.propTypes = {
children: PropTypes.node.isRequired,
}
export default Row
import React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
function SEO({ description, lang, meta, title }) {
const metaDescription = description
return (
<Helmet
htmlAttributes={{
lang,
}}
title={title}
titleTemplate={`Make it Open | %s`}
meta={[
{
name: `description`,
content: metaDescription,
},
{
property: `og:title`,
content: title,
},
{
property: `og:description`,
content: metaDescription,
},
{
property: `og:type`,
content: `website`,
}
].concat(meta)}
/>
)
}
SEO.defaultProps = {
lang: `en`,
meta: [],
description: ``,
}
SEO.propTypes = {
description: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired,
}
export default SEO
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment