openbeta / open-tacos Goto Github PK
View Code? Open in Web Editor NEWRock climbing route catalog (openbeta.io)
Home Page: https://openbeta.io
License: GNU Affero General Public License v3.0
Rock climbing route catalog (openbeta.io)
Home Page: https://openbeta.io
License: GNU Affero General Public License v3.0
Example of images: https://raw.githubusercontent.com/OpenBeta/opentacos-content/develop/content/USA/Oregon/Mt.%20Hood/Petes%20Pile/index.md
How to reproduce:
Result: build error
https://gitlab.com/openbeta/opentacos-content-ci/-/commit/177dc7294cb05be20c3655186b82082166f88307
Proposed solutions:
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
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
We no longer use Gatsby. Update readme with next.js build instructions.
Pick a style eg ts-standard for zero-config. Probably a good idea to do this after TypeScript task #135
As a user I want learn more about opentacos, onboarding, how to add new routes, report bugs, etc.
docs
dir using Hugo (or similar markdown static docs tool)docs
in nextjs build so that it's accessible as https://tacos.openbeta.io/docsMore 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.
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:
Todo:
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
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.
Example:
https://github.com/EnterpriseDB/docs/blob/develop/docker/docker-compose.quickstart.yaml
Backend:
Frontend:
Replace existing search widget with Algolia autocomplete
clean dead code (old search components)
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.
search widget code: https://github.com/OpenBeta/open-tacos/tree/nextjs/src/components/search
To do:
getAlgoliaResults()
function with the new debouncer functionAPI key is hard coded in https://github.com/OpenBeta/open-tacos/blob/nextjs/src/components/search/ClimbSearch.tsx#L10
To do:
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)
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
On mobile or small screen we should display 1 entry per row.
Hints:
Tailwind classes: flex flex-col md:flex-row
Possible photo providers:
Subtasks:
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.
Set up instructions are written for Mac and Linux users. If you are a Windows user or have access to Windows:
Running new linter & updating to conform to the rules
Use our new grade library https://github.com/OpenBeta/sandbag
yarn add openbeta/sandbag
utils.getScoreForGrade
with the library functionThis issue is blocked by OpenBeta/sandbag#7
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
Need to display markdown content in description (climb, area), protection (climb), and location (climb)
Add a new how-to page or update About page (https://tacos.openbeta.io/about) explaining how to contribute/edit routes.
Users can submit changes to route/area .md files directly to the content GitHub repo. Create a Github action to verify markdown file structure.
'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/
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:
gatsby-transformer-remark
instead of mdx pluginParity
Changes
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:
Use case: As a dev user I want to download some or all data available on open-tacos site.
2 options:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.