api-guild / greenlight Goto Github PK

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.

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

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

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

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

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

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

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

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

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

sign up should have user icon

login/out should have enter/exit icons

explore should have a magnifying glass (search icon)

Dark theme background

Green teal accent color #49fcd4

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.

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

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

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

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

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

https://undraw.co/illustrations

accent color: #49fcd4

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

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

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