Skip to content

Commit ae110dd

Browse files
RigelluteRigellute
committed
Add frontend
1 parent 0cdfdf8 commit ae110dd

18 files changed

+14255
-0
lines changed

‎www/.eslintrc

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
// https://eslint.org/docs/user-guide/configuring#specifying-environments
3+
"env": {
4+
"browser": true,
5+
"node": true
6+
},
7+
// https://github.com/babel/babel-eslint
8+
"parser": "babel-eslint",
9+
"rules": {
10+
// https://eslint.org/docs/2.0.0/rules/strict
11+
"strict": 0
12+
},
13+
"settings": {
14+
"react": {
15+
"version": "detect"
16+
}
17+
},
18+
"extends": [
19+
// https://eslint.org/docs/rules/
20+
"eslint:recommended",
21+
// https://github.com/yannickcr/eslint-plugin-react#recommended
22+
"plugin:react/recommended",
23+
// https://github.com/benmosher/eslint-plugin-import
24+
"plugin:import/recommended"
25+
]
26+
}

‎www/.gitignore

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Project dependencies
2+
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
3+
.cache
4+
node_modules
5+
yarn-error.log
6+
7+
# Build directory
8+
/public
9+
10+
# macOS
11+
.DS_Store
12+
13+
# deployment-specific configs
14+
now.json

‎www/.prettierignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.cache
2+
package.json
3+
package-lock.json
4+
public

‎www/README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Codebar Stats
2+
3+
This repository is the static Gatsby website for Codebar.
4+
5+
## What is Tailwind CSS?
6+
7+
> "Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces."
8+
> –[Tailwind CSS](https://tailwindcss.com)
9+
10+
## What is Gatsby?
11+
12+
> "Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps." -[Gatsby](https://www.gatsbyjs.org/)
13+
14+
## Development
15+
16+
```sh
17+
yarn start
18+
```
19+
20+
## Format and lint
21+
22+
- `yarn analyze` - See what ESLint and Prettier can fix
23+
- `yarn fix` - Run Prettier and ESLint with the `--fix` option
24+
25+
## Build your site
26+
27+
Use `yarn build` to build your site for production.

‎www/gatsby-browser.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import "./src/css/style.css";

‎www/gatsby-config.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
const resolveConfig = require("tailwindcss/resolveConfig");
2+
const tailwindConfig = require("./tailwind.config.js");
3+
4+
const fullConfig = resolveConfig(tailwindConfig);
5+
6+
module.exports = {
7+
siteMetadata: {
8+
title: `codebar stats`,
9+
description: `Statistics for codebar`,
10+
author: `@AlexKeliris`,
11+
},
12+
plugins: [
13+
`gatsby-plugin-eslint`,
14+
`gatsby-plugin-react-helmet`,
15+
{
16+
resolve: `gatsby-plugin-manifest`,
17+
options: {
18+
name: `gatsby-starter-tailwind`,
19+
short_name: `starter`,
20+
start_url: `/`,
21+
background_color: fullConfig.theme.colors.white,
22+
theme_color: fullConfig.theme.colors.teal["400"],
23+
display: `minimal-ui`,
24+
icon: `src/images/code-bar-icon.png`,
25+
},
26+
},
27+
{
28+
resolve: `gatsby-plugin-postcss`,
29+
options: {
30+
postCssPlugins: [
31+
require(`tailwindcss`)(tailwindConfig),
32+
require(`autoprefixer`),
33+
...(process.env.NODE_ENV === `production`
34+
? [require(`cssnano`)]
35+
: []),
36+
],
37+
},
38+
},
39+
`gatsby-plugin-offline`,
40+
],
41+
};

‎www/package.json

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
{
2+
"name": "codebar-stats",
3+
"description": "",
4+
"version": "1.0.0",
5+
"author": "Alexander Keliris <[email protected]>",
6+
"dependencies": {
7+
"gatsby": "2.21.22",
8+
"gatsby-plugin-manifest": "2.4.2",
9+
"gatsby-plugin-offline": "3.2.1",
10+
"gatsby-plugin-postcss": "2.3.1",
11+
"gatsby-plugin-react-helmet": "3.3.1",
12+
"gatsby-plugin-sharp": "2.6.2",
13+
"prop-types": "15.7.2",
14+
"react": "16.13.1",
15+
"react-dom": "16.13.1",
16+
"react-helmet": "6.0.0"
17+
},
18+
"scripts": {
19+
"analyze:lint": "eslint --ext .jsx --ext .js .",
20+
"analyze:prettier": "prettier --list-different \"**/*.{css,js,jsx,json,md}\"",
21+
"analyze": "npm run analyze:lint && npm run analyze:prettier",
22+
"fix:lint": "eslint --ext .jsx --ext .js . --fix",
23+
"fix:prettier": "prettier --write \"**/*.{css,js,jsx,json,md}\"",
24+
"fix": "npm run fix:lint && npm run fix:prettier",
25+
"build": "gatsby build",
26+
"develop": "gatsby develop",
27+
"dev": "npm run develop",
28+
"start": "npm run develop",
29+
"serve": "gatsby serve",
30+
"clean": "gatsby clean",
31+
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
32+
},
33+
"devDependencies": {
34+
"@tailwindcss/custom-forms": "0.2.1",
35+
"autoprefixer": "9.7.6",
36+
"babel-eslint": "10.1.0",
37+
"cssnano": "4.1.10",
38+
"eslint": "6.8.0",
39+
"eslint-loader": "3.0.4",
40+
"eslint-plugin-import": "2.20.2",
41+
"eslint-plugin-react": "7.19.0",
42+
"gatsby-plugin-eslint": "2.0.8",
43+
"prettier": "2.0.5",
44+
"tailwindcss": "1.4.6"
45+
},
46+
"repository": {
47+
"type": "git",
48+
"url": "https://github.com/codebar/stats-api"
49+
},
50+
"bugs": {
51+
"url": "https://github.com/codebar/stats-api"
52+
}
53+
}

‎www/src/components/header.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { graphql, useStaticQuery, Link } from "gatsby";
2+
import React, { useState } from "react";
3+
4+
function Header() {
5+
const [isExpanded, toggleExpansion] = useState(false);
6+
const { site } = useStaticQuery(graphql`
7+
query SiteTitleQuery {
8+
site {
9+
siteMetadata {
10+
title
11+
}
12+
}
13+
}
14+
`);
15+
16+
return (
17+
<header className="bg-teal-700">
18+
<div className="flex flex-wrap items-center justify-between max-w-4xl p-4 mx-auto md:p-8">
19+
<Link to="/">
20+
<h1 className="flex items-center text-white no-underline">
21+
<svg
22+
className="w-8 h-8 mr-2 fill-current"
23+
height="54"
24+
viewBox="0 0 54 54"
25+
width="54"
26+
xmlns="http://www.w3.org/2000/svg"
27+
>
28+
<path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" />
29+
</svg>
30+
<span className="text-xl font-bold tracking-tight">
31+
{site.siteMetadata.title}
32+
</span>
33+
</h1>
34+
</Link>
35+
36+
<button
37+
className="flex items-center block px-3 py-2 text-white border border-white rounded md:hidden"
38+
onClick={() => toggleExpansion(!isExpanded)}
39+
>
40+
<svg
41+
className="w-3 h-3 fill-current"
42+
viewBox="0 0 20 20"
43+
xmlns="http://www.w3.org/2000/svg"
44+
>
45+
<title>Menu</title>
46+
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
47+
</svg>
48+
</button>
49+
50+
<nav
51+
className={`${
52+
isExpanded ? `block` : `hidden`
53+
} md:block md:flex md:items-center w-full md:w-auto`}
54+
>
55+
<Link
56+
className="block mt-4 text-white no-underline md:inline-block md:mt-0 md:ml-6"
57+
to="/about"
58+
>
59+
About
60+
</Link>
61+
</nav>
62+
</div>
63+
</header>
64+
);
65+
}
66+
67+
export default Header;

‎www/src/components/layout.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import PropTypes from "prop-types";
2+
import React from "react";
3+
4+
import Header from "./header";
5+
6+
function Layout({ children }) {
7+
return (
8+
<div className="flex flex-col min-h-screen font-sans text-gray-900">
9+
<Header />
10+
11+
<main className="flex-1 w-full max-w-4xl px-4 py-8 mx-auto md:px-8 md:py-16">
12+
{children}
13+
</main>
14+
</div>
15+
);
16+
}
17+
18+
Layout.propTypes = {
19+
children: PropTypes.node.isRequired,
20+
};
21+
22+
export default Layout;

‎www/src/components/seo.js

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { useStaticQuery, graphql } from "gatsby";
2+
import PropTypes from "prop-types";
3+
import React from "react";
4+
import { Helmet } from "react-helmet";
5+
6+
function SEO({ description, lang, meta, keywords, title }) {
7+
const { site } = useStaticQuery(graphql`
8+
query DefaultSEOQuery {
9+
site {
10+
siteMetadata {
11+
title
12+
description
13+
author
14+
}
15+
}
16+
}
17+
`);
18+
19+
const metaDescription = description || site.siteMetadata.description;
20+
21+
return (
22+
<Helmet
23+
htmlAttributes={{
24+
lang,
25+
}}
26+
meta={[
27+
{
28+
name: `description`,
29+
content: metaDescription,
30+
},
31+
{
32+
property: `og:title`,
33+
content: title,
34+
},
35+
{
36+
property: `og:description`,
37+
content: metaDescription,
38+
},
39+
{
40+
property: `og:type`,
41+
content: `website`,
42+
},
43+
{
44+
name: `twitter:card`,
45+
content: `summary`,
46+
},
47+
{
48+
name: `twitter:creator`,
49+
content: site.siteMetadata.author,
50+
},
51+
{
52+
name: `twitter:title`,
53+
content: title,
54+
},
55+
{
56+
name: `twitter:description`,
57+
content: metaDescription,
58+
},
59+
]
60+
.concat(
61+
keywords.length > 0
62+
? {
63+
name: `keywords`,
64+
content: keywords.join(`, `),
65+
}
66+
: []
67+
)
68+
.concat(meta)}
69+
title={title}
70+
titleTemplate={`%s | ${site.siteMetadata.title}`}
71+
/>
72+
);
73+
}
74+
75+
SEO.defaultProps = {
76+
lang: `en`,
77+
keywords: [],
78+
meta: [],
79+
};
80+
81+
SEO.propTypes = {
82+
description: PropTypes.string,
83+
keywords: PropTypes.arrayOf(PropTypes.string),
84+
lang: PropTypes.string,
85+
meta: PropTypes.array,
86+
title: PropTypes.string.isRequired,
87+
};
88+
89+
export default SEO;

‎www/src/css/style.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/*! purgecss start ignore */
2+
@tailwind base;
3+
@tailwind components;
4+
/*! purgecss end ignore */
5+
@tailwind utilities;

‎www/src/images/abduction-illustration.svg

Lines changed: 1 addition & 0 deletions
Loading

‎www/src/images/code-bar-icon.png

7.4 KB
Loading

‎www/src/pages/404.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from "react";
2+
3+
import Layout from "../components/layout";
4+
import SEO from "../components/seo";
5+
import abductionIllustration from "../images/abduction-illustration.svg";
6+
7+
function NotFoundPage() {
8+
return (
9+
<Layout>
10+
<SEO title="404: Not found" />
11+
<div>
12+
<img
13+
alt="Ghost getting abducted by aliens"
14+
className="block mx-auto w-1/2"
15+
src={abductionIllustration}
16+
/>
17+
<h2 className="bg-yellow-400 text-2xl font-bold inline-block my-8 p-3">
18+
Looks like this page is a ghost that got abducted by aliens...
19+
</h2>
20+
</div>
21+
</Layout>
22+
);
23+
}
24+
25+
export default NotFoundPage;

0 commit comments

Comments
 (0)