openbeta / open-tacos Goto Github PK

Problem: we're trying to build wall -> climbs, area -> subareas data model inside gatsby-node.js. The code is becoming difficult to understand, and causes slow build with larger dataset (50 US states, > 100K files).

Solution:
The new GraphQL API elegantly provides the data needed for createPages(). onCreateNode() can be removed.

https://www.gatsbyjs.com/docs/third-party-graphql

New api: https://api.openbeta.io

• If we want to keep the openverse image sourcing we should upgrade to a real api integration w/ auth key so we don't get rate limited.
• Could be also be built into the build process to fetch the image url?
  https://api.openverse.engineering/v1/#section/Introduction

API key is hard coded in https://github.com/OpenBeta/open-tacos/blob/nextjs/src/components/search/ClimbSearch.tsx#L10

To do:

• add NEXT_PUBLIC_ALGOLIA_API_KEY to .env
• use new env var to initialize algolia client

Users can submit changes to route/area .md files directly to the content GitHub repo. Create a Github action to verify markdown file structure.

https://github.com/DavidAnson/markdownlint

Backend:

• Index opentacos-content with Algolia client (PR OpenBeta/openbeta-graphql#28)

Frontend:

• Replace existing search widget with Algolia autocomplete

• clean dead code (old search components)

'All-contributors' is a Github bot that updates the project README file automatically to include a table that recognizes all contributors. Read more: https://allcontributors.org/

Order routes by metadata.left-to-right index

• Sample route data
• Add GraphSQL sort to this query

When GPS and FA information are provided, they should be rendered.

For example, many of the routes at Pete's Pile have this information but it is not rendered:
https://tacos.openbeta.io/usa/oregon/mt-hood/petes-pile/6-quiky-combat-wall

Gatsby typescript guide

If you are new to TypeScript, adoption can and should be incremental. Since Gatsby natively supports JavaScript and TypeScript, you can change files from .js to .tsx at any point to start adding types and gaining the benefits of a type system.

we can start using TS for new components and slowly migrate existing ones.

On mobile or small screen we should display 1 entry per row.

Hints:
Tailwind classes: flex flex-col md:flex-row

More: https://tailwindcss.com/docs/responsive-design

How to reproduce:

• Edit a climb. Replace existing content with random html tags
• Submit change

Result: build error

https://gitlab.com/openbeta/opentacos-content-ci/-/commit/177dc7294cb05be20c3655186b82082166f88307

Proposed solutions:

• Sanitize inputs
• Enforce schema in Plate editor component

Pick a style eg ts-standard for zero-config. Probably a good idea to do this after TypeScript task #135

• Investigate using 3rd party CMS vs rolling our own
• Add JWT/permission middleware to backend API
• Support basic edit operation

sample page: https://open-tacos.vercel.app/climbs/c89d1225-e8ee-4592-829c-e814d7b803b3

Possible photo providers:

1. https://imgix.com/ can't search images by tags
2. https://cloudinary.com/
3. https://www.backblaze.com/
4. Raw Amazon S3 (pros: inexpensive, cons: no support for metadata)
5. Any other?

Subtasks:

• Set up AWS S3
• Link Imgix with S3. Can't search images by tags :(
• Evaluate Imagekit.io
• Nextjs build can load photos from Imgix
• Create a graphql mutation on the backend to link photo lat,lng to its photo id
• Climb, area pages can display relevant photos from Imgix #306
• Tag photos with areas/climbs
• Setup Auth0 and/or NextAuth --> #299
• Allow logged in user to upload photos

Evaluate Gatsby latest SSR and DSG:

• https://www.gatsbyjs.com/docs/how-to/rendering-options/using-server-side-rendering/
• https://www.gatsbyjs.com/docs/how-to/rendering-options/using-deferred-static-generation/

As a user I want to see a heatmap of the area I'm looking at.

Optionally, I want to select type of climb, sport, bouldering, etc and the heat map will update accordingly.

mock up

Use case:
As a contributor I don't want to deal with installing node, gatsby-cli on my computer. The Dockerfile should contain everything needed to execute the build.

1. Create a Dockerfile that includes, node.js, npm, yarn, gatsby-cli
2. Document this new way of doing build in README.md

Example:
https://github.com/EnterpriseDB/docs/blob/develop/docker/docker-compose.quickstart.yaml

https://css-tricks.com/essential-meta-tags-social-media/

Set up instructions are written for Mac and Linux users. If you are a Windows user or have access to Windows:

• Go through the README and verify that you can build and run the project.
• If there are missing steps, or something else you need to do differently, please document the steps.

Running new linter & updating to conform to the rules

We no longer use Gatsby. Update readme with next.js build instructions.

Story

As a sport / trad climber, I want to find crags or a destination with a high number of climbs that match my ability.

Important filters:

• High density of climbs for my ability
• Temps/seasons
• Sport | Trad filter
• Star ratings ?

Todo:

• Design
  • Dev prototype #174
  • Designer layout
• Frontend
  • New search component: TBD
• Backend:
  • OpenBeta/openbeta-graphql#47

Previous PR introduce a prominent CTA Edit button when description is less than 20 words. We should show the normal Edit button in other cases

Create animated counter widget to show totally climbs and crags to give users an idea the size of our db

Actual: Discord button isn't centered in the "closed" version of the header menu

Expected: Discord button should be centered vertically in the menu's close position, or at least not so close to the bottom

As a user I want learn more about opentacos, onboarding, how to add new routes, report bugs, etc.

• create a skeleton docs dir using Hugo (or similar markdown static docs tool)
• include docs in nextjs build so that it's accessible as https://tacos.openbeta.io/docs
• create stub pages for common tasks (how to setup dev env, report bugs)

Use case: As a dev user I want to download some or all data available on open-tacos site.

2 options:

1. Users can download on-demand
2. Create cronjob to dump all data from open-tacos-content repo

Add a new how-to page or update About page (https://tacos.openbeta.io/about) explaining how to contribute/edit routes.

Use case: as a user I want to view climbs at a wall by grade.

By default we should sort climbs by their left-to-right index. Optionally, users can also sort climbs by grade.

Notes:

• we generate climb cards here: https://github.com/OpenBeta/open-tacos/blob/develop/src/templates/leaf-area-page-md.js#L95
• a helper lib for comparing YDS is under development. For now don't worry about writing the sort/comparator yourself.

Need to display markdown content in description (climb, area), protection (climb), and location (climb)

• Implement a debouncer function to reduce API calls. More info: https://www.algolia.com/doc/ui-libraries/autocomplete/guides/debouncing-sources/
• maybe don't send the request until the user has typed at least 3 letters

search widget code: https://github.com/OpenBeta/open-tacos/tree/nextjs/src/components/search

To do:

1. Create a new debounce promise function (sample code)
2. Wrap getAlgoliaResults() function with the new debouncer function

Use case:

I'm working on both, graphql server and this project, at the same time. I want to be able to specify my local api server in .env.local.

Default: read API_SERVER env from .env file or from environment vars (default to https://api.openbeta.io)

• Editor doesn't display markdown for image
• Editor should support image upload

Example of images: https://raw.githubusercontent.com/OpenBeta/opentacos-content/develop/content/USA/Oregon/Mt.%20Hood/Petes%20Pile/index.md

Previously in Gatsby, pages with a lot of text are written in markdown. The build then renders them to html. For example, src/pages/about.md -> /about

https://github.com/OpenBeta/open-tacos/blob/develop/src/pages/export.md
https://github.com/OpenBeta/open-tacos/blob/develop/src/pages/about.md

More information density on the main page. We can have multiple categories, curated lists, recommendations, etc.

Data will come from the new api (#136). For now we can hard code such list.

before

Use our new grade library https://github.com/OpenBeta/sandbag

• yarn add openbeta/sandbag
• Delete getScoreForGrade
• Replace references to utils.getScoreForGrade with the library function

This issue is blocked by OpenBeta/sandbag#7

Render images embedded in md files.

Reference guide: https://www.gatsbyjs.com/blog/mdx-embedded-gatsby-image/

We can store photos in the same content repo, but it won't scale well (the repo will be bloated). We should look into a third-party solution such as https://cloudinary.com

Parity

• Add back heatmap w/ markers
• Discuss Edit flow
• Add back about / export pages
• Fix font #158

Changes

• Have the US page show the biggest 10 crags.
• Add (for now hardcoded) list of interesting crags, show with special markers on map
  - [ ]Add starred to crag

The build is very slow during Source and Transform stage following the introduction of gatsby-remark-images

https://github.com/OpenBeta/open-tacos/blob/develop/gatsby-config.js#L66

Out of memory when doing a full build (./prebuild full).

Todos:

• Try gatsby-transformer-remark instead of mdx plugin
• Prototype a nextjs site (drop Gatsby)

Team: https://vercel.com/teams/openbeta-dev/

we will eventually deploy on our own kubernetes like existing open-tacos. For now let's take advantage of Vercel CI/CD to preview our PRs.

• fix unit tests
• fix linting errors

When reorganizing/refactoring gatsby-node.js (PR #77) I decided to remove area grade/climb type distribution introduced by PR #51.

With the new Area and Climb nodes, we can write simple code/graphql query to calculate area statistics. I suggest doing the calculation in each sub-area instead of doing in leaf-area-page-md.js.

Use the new graphql api