Instead of using Typescript types, move topics metadata into separate YAML files.

Example of /public/topics/<topic>/<topic>.yml:

label: Some label
description: Some description
categories:
    - Languages
    - Tooling

• detect system preferences
• manual toggle
• styling

Set up preview builds so that PRs can be checked by other people.

Repro:

Desired behavior:

• the back button should refresh the columns based on the current URL

Render markdown files with syntax highlighting.

• Markdown
• syntax highlighting
  • pick color scheme

Add a quality-of-life improvement in the form of the "focus mode" - the view that takes the entire screen space and distributes selected columns equally (if 2 then each 50%, if 3 then each 33% etc).

Filter out the technologies that aren't available in a newly selected topic (that remained from the previous one).

• twitter
• hacker news
• product hunt
• slack

Add Github actions that do some basic checking:

• check if all topics have at least one tech (warn)
• check that all techs are registered and can be matched (err)
• warn with a comment if a destructive change has been detected (some of the previously available urls is now not available because it was either the topic or tech modified, or it was removed)

Add details on how to add new cards, or features, or languages.

• submit a PR that will be reviewed
• license information
• NextJS + Vercel
  • automatic preview builds and CI/CD
• adding new topic
• adding new technology
• code of conduct file
• best practices
  • think about the readers' level of familiarity with the material (prefer more details and explanations over obfuscation and hard to understand, cryptic things)
  • stay consistent in writing style and styling
  • if you're making a change, think about its effect on technologies in the same topic - do you need to update them as well?
  • try not to post a topic with only one technology if you can - you may be an expect in one, but not in multiple areas, and that is fine, but makes it that much less useful for other people, so think about extending with at least one more tech for the comparison
• don't:
  • remove or reorder someone else's content just for the sake of your own promotion
  • don't write in "sales language" - the website is not there to promote and market things, but primarily to help out by giving very concrete, pragmatic information and steps
• it's ok:
  • remove and/or reorder things based on the popularity of technologies, for the sake of staying up to date with the latest trends
  • refresh the content with the latest instructions and steps (if it's useful, maybe even keep the older version around)
  • add mentions of your personal projects, as long as they focus on the specific topic sufficiently (if not, maybe even consider creating a new topic) and have some tangible traction so that readers don't get spammed and information gets diluted, losing all point

• generate rosetta folder structure as JSON at build time and use that, instead of querying the file system on demand
• pull markdown files directly from Github instead of local file system (should be faster + caching/CDN)

• favicon
• og tags
• text (copy)
• pre-load an example put a link to an example
• query params

Add icons for technologies and show them alongside labels within dropdown pickers and buttons.

const TopicMeta: Record<
  string,
  {
    label: string;
    description?: ReactNode;
+   icon: string // path to an icon image
  }
 > = ...

Some of the suggestions:

• language features - ...language concepts (js/ts, py, rust, go, cpp, c, ...)
  • primitive types
  • arrays, slices, lists, tuples
  • records, objects, dictionaries
  • enums
  • unions
  • classes
  • inheritance
  • closures
  • generics
  • macros
  • memory management
  • types
• tooling
  • env managers (pyenv, nvm, ...)
  • package managers (npm, yarn, pip, cargo, ...)
  • formatters & linters (eslint, prettier, clippy, ...)
  • local debugging setup
  • watchers, hot reload
• BE web frameworks - ...techniques (expressJS, nestJS, fastify, django, beego, rocket,...)
• API design - ...apis (REST, graphql, webhooks, gRPC, RPC-like)
• message brokers - pub, sub, topics (rabbit mq, kafka, pubsub, redis, (bull, celery)...)
• caching - read/write (memcached, redis)
• proxies - ...configs (nginx, envoy, haproxy, apache)
• databases - ...features (rdb, nosql, ...)
  • GUI clients
  • orms (per lang)
• FE web frameworks
  • components, hooks (react, angular, svelte, solid, web comp)
  • stores (redux, native, mobx, recoil)
  • forms (react-hook-forms, formik, angular)
  • ssg & ssr (next, nuxt, gatsby, react server components...)
• css - ...features (css, sass, less)
• styling frameworks - ...features (pure css, styled-components, tailwind...)
• deep learning - ...blocks & algorithms (keras, pytorch, tensorflow, native...)
• 3d graphics - binding resources (opengl (old, new), webgl, webgpu, dx, vk, metal)
• 2d graphics (svg, canvas)
  • ...primitives
  • ...screen effects
• VCS - git, svn, p4

Display when the snippets have been last modified.

Story: As a user I want to be able to see when the snippet was last modified so that I can assess how outdated the information is.