api-guild / greenlight Goto Github PK

View Code? Open in Web Editor NEW

1.0 2.0 1.0 12.77 MB

guerrilla data for analysts with deadlines

Home Page: https://api-guild.github.io/greenlight/

License: BSD Zero Clause License

JavaScript 89.53% SCSS 8.73% CSS 1.74%

tableau embedded-analytics gatsbyjs gatsby gatsby-starter static-site-generator bulma

greenlight's Introduction

Greenlight

guerrilla data for analysts with deadlines.

Website

"Gatsby believed in the green light, the orgiastic future that year by year recedes before us. It eluded us then, but that’s no matter—tomorrow we will run faster, stretch out our arms farther…. And one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past."

What is Greenlight?

The mission of this project is to provide a way for people who want to host their data visualizations at their own domains with little effort and time. To accomplish this, the project is built using Gatsby, which to quote them is ”a modern web framework for blazing fast websites.” To find out more about Gatsby you can visit their GitHub Repo.

What is Greenlight?
Table of Contents
Installation
Usage
Contributions
LICENSE
Maintainers

Installation

Install the Gatsby CLI

# install the Gatsby CLI from NPM
npm install -g gatsby-cli

Install Greenlight Starter

# create a new Gatsby site using the Greenlight starter
gatsby new {your-project-name} https://github.com/API-Guild/greenlight

Start the site in develop mode.

# start the develop server from your new project
cd {your-project-name}
gatsby develop

Open your site in the browser at http://localhost:8000

Usage

After installation you can add your markdown or MDX files to the /content/blog directory. It is recommended you create folders within this directory and store any assets, like images, in the folder created for each post you create.

Here is a diagram of the basic file structure of Greenlight.

.
|-.cache
|-content/blog/{your-files-here}
|-node_modules
|-public
|-src
|-static
|-.gitignore
|-.prettierignore
|-.prettierrc
|-gatsby-browser.js
|-gatsby-config.js
|-gatsby-node.js
|-LICENSE
|-package-lock.json
|-package.json
|-README.md

Contributions

We gladly welcome any contributions whether it is fixing bugs, documentation, or adding features. You can request an issue, fork the repo, work on the issue and then submit a pull request.

LICENSE

The BSD Zero Clause License (0BSD)

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.

Maintainers

Stephen Price
Trevor Smith

greenlight's People

Contributors

Stargazers

Watchers

Forkers

lamoliveira

greenlight's Issues

write a README

Setup base styles

Dark theme background

Green teal accent color #49fcd4

support white and dark theme toggling by way of SASS variables

remove purge-css as it causes bugs with table styles

style the html obtained from remark nodes via GraphQL to display with bulma classes

create an Ask Data (NLP) embedding component

Setup Typography.js

https://www.gatsbyjs.com/plugins/gatsby-plugin-typography/

https://kyleamathews.github.io/typography.js/

add a white theme (+ 2 other themes) that are commented out on global.scss

The theme should use as many color variables as needed to look good but at a minimum, it should modify:

$accentMain
$background
$text

The fewer variables needed to get a good effect, the better

improve the current theming system to it can easily be changed for different colors by end users

add <Link>'s to Home, About, Contact and Reports pages on the Navbar

pages must be created if not already available and must have an < link /> available on the navbar

tableau undefined when page is reloaded

tableau component will need to implement hydration so that the embed script runs after the dom is rendered:

https://aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices#what-is-server-side-rendering-ssr

gatsbyjs/gatsby#11013

https://stackoverflow.com/questions/63193411/using-jquery-and-external-scripts-in-gatsby

refactor gatsby-node.js so that it applies error handling like gatsby-starter-blog

add syntax highlighting via the prism plugin for markdown codeblocks

https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/

create a demo Tableau workbook for sample visualizations

create a react component for embedding Tableau dashboards

Create layout that includes collapsible menu, header and footer (basic bulma components)

create a test .mdx file in case we need it for embedding Tableau dashboards

refactor menuList so that it takes an array of objects as props containing text and a URL "Link" component

remove support for .md and only keep support for MDX (functionally they are the same but under the hood they use different plugins and add complexity)

This would require uninstalling .md plugins and only using .mdx plugins. Also all current .md posts should be written as .mdx instead

Deploy site to Github Pages

https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/how-gatsby-works-with-github-pages/

add Table of Contents to .mdx files

https://www.gatsbyjs.com/docs/how-to/routing/mdx/

and possibly: https://github.com/styxlab/gatsby-theme-try-ghost/tree/master/packages/gatsby-transformer-rehype

support embedding scripts from multiple servers and using the appropriate version per vizualization

Here is an example of how to load a script and assign it a local variable name: https://chewett.co.uk/blog/2021/how-to-load-multiple-d3-versions-at-once/

This should be done once per component (avoiding duplicates) and then all subsequent methods would have to prefix with the local variable name.

Create an index of blog posts for the Explore page

add support for markdown and mdx pages for user created reports

refactor explore markup

Look into `<div dangerouslySetInnerHTML={{ __html: post.html }} />` on data-table-post.js to see what options we have available

I think this method is doable but also prone to code injection

refactor SEO component according to social media and Google tutorial

Here is the tutorial: https://www.gatsbyjs.com/tutorial/seo-and-social-sharing-cards-tutorial/

Docs on SEO for Gatsby: https://www.gatsbyjs.com/docs/how-to/adding-common-features/seo/

Test results with this Google tool: https://search.google.com/test/rich-results
https://support.google.com/webmasters/answer/7552505?hl=en

https://www.gatsbyjs.com/tutorial/seo-and-social-sharing-cards-tutorial/

https://search.google.com/test/rich-results

replace gatsby-remark-prismjs with gatsby-remark-vscode

From the gatsby-plugin-mdx docs:

In some cases, like gatsby-remark-prismjs, it makes more sense to use a library like prism-react-renderer to render codeblocks using a React component.

https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/
https://github.com/FormidableLabs/prism-react-renderer

However the vscode plugin seems to have even better syntax highlighting and customization
https://www.gatsbyjs.com/plugins/gatsby-remark-vscode/?=syntax-highlighting

gatsby-remark-prismjs is not being applied correctly once gatsby-remark-images was added to the configuration.

A different solution would be to get the configuration to work with both plugins correctly

create a logo favicon on canva or https://logomakr.com/

Use the greenlight motif to create something simple - like a minimalist or cartoon lightbulb

refactor mdx styling so that it uses rehype react

Create the landing page (basic markup from Bulma components)

https://undraw.co/illustrations

accent color: #49fcd4

install font-awesome and add icons to sign up, log in and explore

explore should have a magnifying glass (search icon)

tables should support horizontal scrolling so they don't smash up on mobile (test with 5+ columns)

write a quick start guide

build a presentation

create thumbnails for visualizations using createRemoteFileNode

The process is explained here: https://www.gatsbyjs.com/docs/how-to/images-and-media/preprocessing-external-images/

This would allow users to embed visualizations and then let the node environment generate thumbnails (later optimized via sharp) to display them on the page until the data visualization loads and becomes interactive.

Thumbnails can be obtained in the same way as PDFs as outlined in this blog post: https://www.dataplusscience.com/TableauBatchPDF.html

add pagination functionality to posts

When a user creates a folder in /content/blog/ they can add metadata that indexes the post number and allow for pagination within the same post, i.e.:

blogpost page1
blogpost page2
blogpost page3

The UI for this blog post would have left and right arrows to navigation between pages of the same blogpost

write content for the Contact and About pages

setup project to use markdown/MDX using the file structure example from https://github.com/gatsbyjs/gatsby-starter-blog

implement Tableau sizing and responsiveness best practices

Explore should support pagination rather than show all results (maybe a limit of 10 posts per page?)

create a logo on canva or https://logomakr.com/

Use the greenlight motif to create something simple - like a minimalist or cartoon lightbulb. use the same size as the Bulma logo used on the navbar.

Search bars on dropdown and explore should autocomplete and filter listed items

build a component for Tableau buttons

add Tableau web edit functionality

add gatsby-inline-rehype-images to get Sharp support for images added to markdown from URLs

https://www.gatsbyjs.com/plugins/gatsby-rehype-inline-images/

allow users to declare the JS API server per component or use site default server

Users can declare an API prop that provides a URL to obtain a given version of the Tableau API or if no prop is provided then it will default to the default API set for the entire site - this could even be a downloaded file to further improve performance