Browse Source

Add site (#18)

Add Gatsby SSG site
pull/34/head
Tom Konidas 8 months ago
committed by GitHub
parent
commit
e008180587
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 69
      .gitignore
  2. 14
      Gatsby/LICENSE
  3. 99
      Gatsby/README.md
  4. 48
      README.md
  5. 7
      gatsby-browser.js
  6. 51
      gatsby-config.js
  7. 37
      gatsby-node.js
  8. 7
      gatsby-ssr.js
  9. 19401
      package-lock.json
  10. 47
      package.json
  11. 3
      postcss.config.js
  12. 42
      src/components/applicationCard.js
  13. 84
      src/components/applications.js
  14. 7
      src/components/container.js
  15. 31
      src/components/footer.js
  16. 35
      src/components/header.js
  17. 40
      src/components/layout.js
  18. 50
      src/components/ratings.js
  19. 96
      src/components/seo.js
  20. 2
      src/data/Plexus.csv
  21. BIN
      src/images/plexus-icon.png
  22. 14
      src/pages/404.js
  23. 24
      src/pages/index.js
  24. 8
      src/style/global.css
  25. 88
      src/templates/application.js
  26. 31
      src/util/applicationUtils.js
  27. BIN
      static/og-plexus.jpg
  28. 24
      tailwind.config.js

69
.gitignore

@ -0,0 +1,69 @@
# 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

14
Gatsby/LICENSE

@ -0,0 +1,14 @@
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.

99
Gatsby/README.md

@ -0,0 +1,99 @@
<!-- AUTO-GENERATED-CONTENT:START (STARTER) -->
<p align="center">
<a href="https://www.gatsbyjs.com">
<img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
</a>
</p>
<h1 align="center">
Gatsby's default starter
</h1>
Kick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
_Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.com/docs/gatsby-starters/)._
## 🚀 Quick start
1. **Create a Gatsby site.**
Use the Gatsby CLI to create a new site, specifying the default starter.
```shell
# create a new Gatsby site using the default starter
gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default
```
1. **Start developing.**
Navigate into your new site’s directory and start it up.
```shell
cd my-default-starter/
gatsby develop
```
1. **Open the source code and start editing!**
Your site is now running at `http://localhost:8000`!
_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.com/tutorial/part-five/#introducing-graphiql)._
Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
## 🧐 What's inside?
A quick look at the top-level files and directories you'll see in a Gatsby project.
.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.com/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.com/docs/gatsby-config/) for more detail).
7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.com/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.com/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
9. **`LICENSE`**: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license.
10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
12. **`README.md`**: A text file containing useful reference information about your project.
## 🎓 Learning Gatsby
Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start:
- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.com/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
## 💫 Deploy
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-default)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/gatsbyjs/gatsby-starter-default)
<!-- AUTO-GENERATED-CONTENT:END -->

48
README.md

@ -1,40 +1,47 @@
# Plexus
<img src="https://techlore.tech/plexus.png" width="200" height="200">
A common concern expressed by users wanting to move to a de-googled Android ROM is: *Will my apps work without Google Play Services?*
A common concern expressed by users wanting to move to a de-googled Android ROM is: _Will my apps work without Google Play Services?_
Plexus crowdsources data from custom Android ROM users to display what apps do/don't work without Google Play Services.
Plexus crowdsources data from custom Android ROM users to display what apps do/don't work without Google Play Services.
## Explanation
Google Play Services are an integral part of most Android devices that enable users to utilize their Google account on their phone, as well as enable Google-specific features for applications that rely on them.
Google Play Services are an integral part of most Android devices that enable users to utilize their Google account on their phone, as well as enable Google-specific features for applications that rely on them.
When users move to a de-googled ROM like GrapheneOS or LineageOS, they are faced with opening their standard applications hoping they work. Plexus aims to beat the guessing game and allow users to know exactly what will happen once they flash a new ROM. Plexus supports ROMs with simply no Google Play Services, as well as ROMs with MicroG, an open source variation of Google Play Services.
## Navigating Plexus
Currently, Plexus is just a standard CSV spreadsheet in this repo.
Currently, Plexus is just a standard CSV spreadsheet [in this repo](./src/data/Plexus.csv).
**NOTE: Plexus is only for applications directly or indirectly from the Google Play Store. Please do not submit applications from F-Droid as they are all expected to work.**
## What Do The Ratings Mean?
1. Unusable. Mostly apps that fail to open
2. Acceptable but with missing or broken functionality
3. Almost everything works with minimal caveats
3. Almost everything works with minimal caveats
4. Perfect or like-perfect experience
## How To Add Your Applications & Contribute
This is quickly thrown together so we can start collecting data. It's by no means perfect, and I am aware not everyone uses Github.
This is quickly thrown together so we can start collecting data. It's by no means perfect, and I am aware not everyone uses Github.
### Testing Standards
* Test only Google Play Store applications (Regardless of where they came from, including the Aurora Store front end)
* Kindly disable netguard and other blockers
* No Google Play Services
* Pay extra attention to notifications as some will not properly work
* If you're testing from MicroG, only input data in the last two columns, and utilize two "X"s for the standard sections.
* If you're testing from a fully de-googled ROM (no MicroG, input data in the standard sections and mark the MicroG sections as "X"s
- Test only Google Play Store applications (Regardless of where they came from, including the Aurora Store front end)
- Kindly disable netguard and other blockers
- No Google Play Services
- Pay extra attention to notifications as some will not properly work
- If you're testing from MicroG, only input data in the last two columns, and utilize two "X"s for the standard sections.
- If you're testing from a fully de-googled ROM (no MicroG, input data in the standard sections and mark the MicroG sections as "X"s
### Contribute Method 1 (Recommended)
Start a pull request with your apps to submit. Ensure you're maintaining the proper CSV format in alphabetical order to make merging as simple as possible.
Start a pull request with your apps to submit. Ensure you're maintaining the proper CSV format in alphabetical order to make merging as simple as possible.
1. App Name
2. Month Last Tested
3. Year Last Tested
@ -44,7 +51,9 @@ Start a pull request with your apps to submit. Ensure you're maintaining the pro
7. MicroG issues. Explain your problems, or just say "No reported issues" if the app works perfectly. Label "X" if you're not testing with MicroG.
### Contribute Method 2 (Non-Github Method)
Email me at support@techlore.tech with all your apps you use on your phone that are from the Google Play Store (Directly or Indirectly) with the following information:
1. App Name
2. Month Last Tested
3. Year Last Tested
@ -53,12 +62,13 @@ Email me at support@techlore.tech with all your apps you use on your phone that
6. MicroG App Score. Label "X" if you're not testing with MicroG.
7. MicroG issues. Label "X" if you're not testing with MicroG.
I will then update the spreadsheet myself.
I will then update the spreadsheet myself.
## Future Plans & Goals
* Support for application version numbers.
* A website to allow better formatting of application data.
* Support for "recommended alternatives" similar to alternativeto.net
* An app you can download from F-Droid that conveniently scans app on your phone allowing you to submit scores within a centralized location.
![](https://i.creativecommons.org/p/zero/1.0/88x31.png) This project is licensed under the terms of the CC0 V1 License.
- Support for application version numbers.
- A website to allow better formatting of application data.
- Support for "recommended alternatives" similar to alternativeto.net
- An app you can download from F-Droid that conveniently scans app on your phone allowing you to submit scores within a centralized location.
![](https://i.creativecommons.org/p/zero/1.0/88x31.png) This project is licensed under the terms of the CC0 V1 License.

7
gatsby-browser.js

@ -0,0 +1,7 @@
/**
* 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

51
gatsby-config.js

@ -0,0 +1,51 @@
module.exports = {
siteMetadata: {
title: `Plexus`,
description: `Remove the fear of Android app compatibility on de-Googled devices.`,
author: `@tomkonidas`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `data`,
path: `${__dirname}/src/data/`,
},
},
`gatsby-transformer-csv`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `plexus`,
short_name: `plexus`,
start_url: `/`,
background_color: `#e74c3c`,
theme_color: `#e74c3c`,
display: `minimal-ui`,
icon: `src/images/plexus-icon.png`, // This path is relative to the root of the site.
},
},
`gatsby-plugin-postcss`,
{
resolve: "gatsby-plugin-slug-field",
options: {
filter: { internal: { type: "PlexusCsv" } },
source: "Application",
fieldName: "slug",
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
};

37
gatsby-node.js

@ -0,0 +1,37 @@
const path = require(`path`);
const { createFilePath } = require(`gatsby-source-filesystem`);
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions;
const result = await graphql(`
query {
allPlexusCsv {
edges {
node {
Application
id
MicroG_Notes
MicroG_Rating__1_4_
Month
Notes
Rating__1_4_
Year
fields {
slug
}
}
}
}
}
`);
result.data.allPlexusCsv.edges.forEach(({ node }) => {
createPage({
path: `/applications/${node.fields.slug}`,
component: path.resolve(`./src/templates/application.js`),
context: {
node,
},
});
});
};

7
gatsby-ssr.js

@ -0,0 +1,7 @@
/**
* 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

19401
package-lock.json
File diff suppressed because it is too large
View File

47
package.json

@ -0,0 +1,47 @@
{
"name": "plexus",
"private": true,
"description": "Remove the fear of Android app compatibility on de-Googled devices.",
"version": "0.1.0",
"author": "Tom Konidas <tomkonidas@protonmail.ch>",
"dependencies": {
"gatsby": "^2.24.50",
"gatsby-image": "^2.4.16",
"gatsby-plugin-manifest": "^2.4.24",
"gatsby-plugin-offline": "^3.2.24",
"gatsby-plugin-postcss": "^2.3.11",
"gatsby-plugin-react-helmet": "^3.3.10",
"gatsby-plugin-sharp": "^2.6.28",
"gatsby-plugin-slug-field": "^0.2.0",
"gatsby-source-filesystem": "^2.3.25",
"gatsby-transformer-csv": "^2.3.10",
"gatsby-transformer-sharp": "^2.5.13",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-helmet": "^6.1.0"
},
"devDependencies": {
"prettier": "2.1.0",
"tailwindcss": "^1.7.5"
},
"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"
},
"repository": {
"type": "git",
"url": "https://github.com/techlore-official/plexus"
},
"bugs": {
"url": "https://github.com/techlore-official/plexus/issues"
}
}

3
postcss.config.js

@ -0,0 +1,3 @@
module.exports = () => ({
plugins: [require("tailwindcss")],
});

42
src/components/applicationCard.js

@ -0,0 +1,42 @@
import React from "react";
import { Link } from "gatsby";
import { getRatingBg } from "../util/applicationUtils";
const ApplicationCard = ({ app }) => {
const APPLICATIONS_DIR = "applications/";
const getUrl = (slug) => APPLICATIONS_DIR + slug;
return (
<>
<div
className={`flex-shrink-0 flex items-center justify-center w-16 text-white text-sm leading-5 font-medium rounded-l-md ${getRatingBg(
app.Rating__1_4_
)}`}
>
{app.Rating__1_4_}
</div>
<div className="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white truncate">
<div className="flex-1 px-4 py-2 text-sm leading-5 truncate">
<Link
className="truncate text-gray-900 font-medium hover:text-gray-600 transition ease-in-out duration-150"
to={getUrl(app.fields.slug)}
>
{app.Application}
</Link>
<p className="text-gray-500">
{app.Year} {app.Month}
</p>
</div>
</div>
<div
className={`flex-shrink-0 flex items-center justify-center w-16 text-white text-sm leading-5 font-medium rounded-r-md ${getRatingBg(
app.MicroG_Rating__1_4_
)}`}
>
&mu;{app.MicroG_Rating__1_4_}
</div>
</>
);
};
export default ApplicationCard;

84
src/components/applications.js

@ -0,0 +1,84 @@
import React, { useState } from "react";
import { useStaticQuery, graphql } from "gatsby";
import Container from "./container";
import ApplicationCard from "./applicationCard";
import Ratings from "./ratings";
const Applications = () => {
const data = useStaticQuery(graphql`
query ApplicationsQuery {
allPlexusCsv {
edges {
node {
id
Application
Month
Year
Rating__1_4_
MicroG_Rating__1_4_
fields {
slug
}
}
}
}
}
`);
const [search, setSearch] = useState("");
const [displayedApps] = useState(data.allPlexusCsv.edges.length);
const getAppList = () => {
const apps = data.allPlexusCsv.edges.filter(({ node }) =>
node.Application.toLowerCase().includes(
search !== "*" ? search.toLowerCase() : ""
)
);
return apps;
};
return (
<div className="mt-8">
<Container>
<Ratings />
<div className="mt-8">
<div className="flex justify-between items-center">
<label
htmlFor="application"
className="text-lg leading-6 font-semibold text-gray-900 py-2"
>
Search
</label>
<div className="font-medium text-gray-700">
(enter <span className="font-bold text-brand">*</span> for all{" "}
<span className="font-bold">{displayedApps}</span> entries)
</div>
</div>
<input
onChange={(e) => setSearch(e.target.value)}
value={search}
id="application"
className="form-input p-3 block w-full sm:text-md sm:leading-5 rounded-md shadow-sm outline-none border border-gray-400 focus:border-purple-300"
placeholder="YouTube"
aria-describedby="application-optional"
/>
</div>
<div className="mt-2 mb-8 py-3">
<ul className="mt-3 grid grid-cols-1 gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
{search &&
getAppList().map(({ node }) => (
<li
className="col-span-1 flex shadow-sm rounded-md"
key={node.id}
>
<ApplicationCard app={node} />
</li>
))}
</ul>
</div>
</Container>
</div>
);
};
export default Applications;

7
src/components/container.js

@ -0,0 +1,7 @@
import React from "react";
const Container = ({ children }) => (
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">{children}</div>
);
export default Container;

31
src/components/footer.js

@ -0,0 +1,31 @@
import React from "react";
const Footer = ({ siteTitle }) => (
<footer className="bg-brand">
<div className="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
<div className="flex justify-center md:order-2">
<a
href="https://github.com/techlore-official/plexus"
className="ml-6 text-gray-100 hover:text-gray-200"
rel="noopener noreferrer"
>
<span className="sr-only">GitHub</span>
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
</a>
</div>
<div className="mt-8 md:mt-0 md:order-1">
<p className="text-center text-base leading-6 text-gray-100">
&copy; {new Date().getFullYear()} {siteTitle}
</p>
</div>
</div>
</footer>
);
export default Footer;

35
src/components/header.js

@ -0,0 +1,35 @@
import { Link } from "gatsby";
import PropTypes from "prop-types";
import Container from "./container";
import Logo from "../images/plexus-icon.png";
import React from "react";
const Header = ({ siteTitle }) => (
<header className="bg-black border-b-4 border-brand-dark">
<Container>
<div className="flex justify-between items-center py-6 md:justify-start md:space-x-10">
<div className="lg:w-0 lg:flex-1">
<h1 className="flex items-center">
<img className="h-6 w-auto sm:h-10" src={Logo} alt="Plexus" />
<Link
className="font-mono font-bold text-3xl md:text-5xl text-white ml-2"
to="/"
>
{siteTitle}
</Link>
</h1>
</div>
</div>
</Container>
</header>
);
Header.propTypes = {
siteTitle: PropTypes.string,
};
Header.defaultProps = {
siteTitle: ``,
};
export default Header;

40
src/components/layout.js

@ -0,0 +1,40 @@
/**
* Layout component that queries for data
* with Gatsby's useStaticQuery component
*
* See: https://www.gatsbyjs.org/docs/use-static-query/
*/
import React from "react";
import PropTypes from "prop-types";
import { useStaticQuery, graphql } from "gatsby";
import Header from "./header";
import Footer from "./footer";
import "../style/global.css";
const Layout = ({ children }) => {
const data = useStaticQuery(graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`);
return (
<div className="bg-gray-100 flex flex-col h-100 min-h-screen justify-between">
<Header siteTitle={data.site.siteMetadata.title} />
<main className="mb-auto">{children}</main>
<Footer siteTitle={data.site.siteMetadata.title} />
</div>
);
};
Layout.propTypes = {
children: PropTypes.node.isRequired,
};
export default Layout;

50
src/components/ratings.js

@ -0,0 +1,50 @@
import React from "react";
import { getRatingBg } from "../util/applicationUtils";
const ratings = [
{ key: "X", title: "Untested" },
{ key: "1", title: "Unusable" },
{ key: "2", title: "Acceptable" },
{ key: "3", title: "Good" },
{ key: "4", title: "Perfect" },
];
const Ratings = () => {
return (
<div>
<div className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-5">
{ratings.map((rating) => (
<div
key={rating.key}
className="bg-white overflow-hidden shadow rounded-lg"
>
<div className="px-3 py-5 sm:p-5">
<div className="flex items-center">
<div
className={`flex-shrink-0 rounded-md p-3 ${getRatingBg(
rating.key
)}`}
>
<div className="flex font-bold justify-center items-center h-6 w-6 text-white">
<div>{rating.key}</div>
</div>
</div>
<div className="ml-3 w-0 flex-1">
<dl>
<dd className="flex items-baseline">
<div className="text-xl leading-8 font-semibold text-gray-900">
{rating.title}
</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
))}
</div>
</div>
);
};
export default Ratings;

96
src/components/seo.js

@ -0,0 +1,96 @@
/**
* SEO component that queries for data with
* Gatsby's useStaticQuery React hook
*
* See: https://www.gatsbyjs.org/docs/use-static-query/
*/
import React from "react";
import PropTypes from "prop-types";
import { Helmet } from "react-helmet";
import { useStaticQuery, graphql } from "gatsby";
function SEO({ description, lang, meta, title }) {
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
description
author
}
}
}
`
);
const metaDescription = description || site.siteMetadata.description;
return (
<Helmet
htmlAttributes={{
lang,
}}
title={title}
titleTemplate={`%s | ${site.siteMetadata.title}`}
meta={[
{
name: `description`,
content: metaDescription,
},
{
property: `og:title`,
content: title,
},
{
property: `og:description`,
content: metaDescription,
},
{
property: `og:image`,
content: `https://plexus.netlify.app/og-plexus.jpg`,
},
{
property: `og:type`,
content: `website`,
},
{
name: `twitter:card`,
content: `summary`,
},
{
name: `twitter:creator`,
content: site.siteMetadata.author,
},
{
name: `twitter:title`,
content: title,
},
{
name: `twitter:description`,
content: metaDescription,
},
{
name: `twitter:image`,
content: `https://plexus.netlify.app/og-plexus.jpg`,
},
].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;

2
Plexus.csv → src/data/Plexus.csv

@ -185,4 +185,4 @@ Windscribe,May,2020,4,No reported issues,4,No reported issues
Xodo Docs,May,2020,4,No reported issues,4,No reported issues
Yi Home,June,2020,4,No reported issues,4,No reported issues
YouTube,May ,2020,1,Unusable,4,No reported issues
Zoom,January,2020,4,No reported issues,4,No reported issues
Zoom,January,2020,4,No reported issues,4,No reported issues

BIN
src/images/plexus-icon.png

After

Width: 800  |  Height: 800  |  Size: 41 KiB

14
src/pages/404.js

@ -0,0 +1,14 @@
import React from "react"
import Layout from "../components/layout"
import SEO from "../components/seo"
const NotFoundPage = () => (
<Layout>
<SEO title="404: Not found" />
<h1>NOT FOUND</h1>
<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
</Layout>
)
export default NotFoundPage

24
src/pages/index.js

@ -0,0 +1,24 @@
import React from "react";
import Layout from "../components/layout";
import Applications from "../components/applications";
import SEO from "../components/seo";
import Container from "../components/container";
const IndexPage = () => (
<Layout>
<SEO title="Home" />
<Container>
<div className="flex">
<h2 className="my-12 text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:leading-none">
Remove the fear of Android app compatibility <br />
<span className="text-5xl">
on <span className="text-brand">de-Googled</span> devices.
</span>
</h2>
</div>
</Container>
<Applications />
</Layout>
);
export default IndexPage;

8
src/style/global.css

@ -0,0 +1,8 @@
/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */
@tailwind utilities;
@import url("https://rsms.me/inter/inter.css");

88
src/templates/application.js

@ -0,0 +1,88 @@
import React from "react";
import { Link } from "gatsby";
import Layout from "../components/layout";
import Container from "../components/container";
import SEO from "../components/seo";
import Ratings from "../components/ratings";
import { getRatingBg, getRatingText } from "../util/applicationUtils";
const Application = ({ pageContext: { node } }) => {
return (
<Layout>
<SEO title={node.Application} />
<Container>
<div className="my-8">
<div className="flex justify-between items-center">
<div>
<h2 className="text-4xl font-semibold">{node.Application}</h2>
<p className="text-gray-500">
{node.Year} {node.Month}
</p>
</div>
<Link to="/">Go Back</Link>
</div>
<Ratings />
<div className="mt-4 grid gap-6 grid-cols-1 md:grid-cols-2">
<div className="bg-white rounded-lg shadow-lg">
<div
className={`flex justify-between items-center rounded-t-lg ${getRatingBg(
node.Rating__1_4_
)}`}
>
<div className="text-white font-semibold p-4">de-Googled</div>
<div className="text-white font-semibold p-4"></div>
<div className="p-4">
<div class="flex justify-center items-center p-1 h-8 w-8 bg-white text-xs leading-4 font-medium rounded-full">
<div
className={`font-bold ${getRatingText(
node.Rating__1_4_
)}`}
>
{node.Rating__1_4_}
</div>
</div>
</div>
</div>
<div className="p-4">
<div className="flex flex-col">
<div></div>
<div>{node.Notes}</div>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow-lg">
<div
className={`flex justify-between items-center rounded-t-lg ${getRatingBg(
node.MicroG_Rating__1_4_
)}`}
>
<div className="text-white font-semibold p-4">
&mu; (microG)
</div>
<div className="p-4">
<div class="flex justify-center items-center p-1 h-8 w-8 bg-white text-xs leading-4 font-medium rounded-full">
<div
className={`font-bold ${getRatingText(
node.MicroG_Rating__1_4_
)}`}
>
{node.MicroG_Rating__1_4_}
</div>
</div>
</div>
</div>
<div className="p-4">
<div className="flex flex-col">
<div></div>
<div>{node.MicroG_Notes}</div>
</div>
</div>
</div>
</div>
</div>
</Container>
</Layout>
);
};
export default Application;

31
src/util/applicationUtils.js

@ -0,0 +1,31 @@
const getRatingBg = (rating) => {
switch (rating) {
case "1":
return "bg-red-600";
case "2":
return "bg-orange-600";
case "3":
return "bg-blue-600";
case "4":
return "bg-green-600";
default:
return "bg-gray-600";
}
};
const getRatingText = (rating) => {
switch (rating) {
case "1":
return "text-red-600";
case "2":
return "text-orange-600";
case "3":
return "text-blue-600";
case "4":
return "text-green-600";
default:
return "text-gray-600";
}
};
export { getRatingBg, getRatingText };

BIN
static/og-plexus.jpg

After

Width: 575  |  Height: 575  |  Size: 42 KiB

24
tailwind.config.js

@ -0,0 +1,24 @@
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
},
purge: ["./src/**/*.js", "./src/**/*.jsx", "./src/**/*.ts", "./src/**/*.tsx"],
theme: {
extend: {
colors: {
brand: {
light: "#f75848",
default: "#e74c3c",
dark: "#d24537",
},
},
fontFamily: {
sans: ["Inter var", ...defaultTheme.fontFamily.sans],
},
},
},
variants: {},
plugins: [],
};
Loading…
Cancel
Save