Library/framework data (descriptions, links etc.)

[sustained]

I wasn't really sure how to title this.

We're working on a project for Vue Land (the bot) and we need some data relating to popular libraries and frameworks for one of the commands (library/framework lookup).

@gustojs and I were talking about it an hour or so ago in #library-maintainers and he mentioned that you fine folks over here may also need some similar data for the Vue Community project, most notably the descriptions? But I'd wager a guess that you'll also at a minimum need the website/repository URLs, the taglines and the icons.

cause if somebody wants to write library descriptions, we've got a ton of descriptions to write about on vue-community, contributions welcome :wink: - gusto

The issue we have is that using Vue Community as a data source presents a problem simply because it's Markdown. We have the exact same issue with the @vuejs/awesome-vue repository.

Ideally we need something more structured like JSON or YAML or Markdown(+FrontMatter).

It's relatively easy to transform those formats into Markdown but the opposite can certainly prove quite troublesome (depending on how well-structured the Markdown is, of course). It would also be possible for you to have a component e.g. <library name="saber" /> that abstracts away the JSON-data-loading aspect of things.

So the question is - would you be open to using JSON as a data source for certain things? Or if not JSON then Markdown with FrontMatter? Something more structured?

If so we would be able to pool our efforts across the two projects (perhaps in a third repository e.g. vue-data, if preferable to you).

Plus it would be useful for anyone else who wants to make apps/tools relating to Vue and its ecosystem- not just Elfayer's vue-land-bot and your vue-community!

I realise that Markdown is ideal for your project, mostly because even non-programmers such as designers can contribute easily. But that's why I mentioned Markdown+FrontMatter as a potential compromise.

Thoughts?

---

The data I started compiling for the bot looks something like this, by the way:

{
  "name": "Vuetify",
  "tagline": "Material Design Component Framework.",
  "tags": ["ui", "framework", "material", "design", "component", "library"],
  "icon": "vuetify.png",
  "colour": "#7BC6FF",
  "url": {
    "site": "https://vuetifyjs.com/en/",
    "repo": "https://github.com/vuetifyjs/vuetify"
  },
  "fields": [
    "Vuetify is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components that make building your application a breeze.",
    "Build amazing applications with the power of Vue, Material Design and a massive library of beautifully crafted components and features. Built according to Google's Material Design Spec, Vuetify components feature an easy-to-remember semantic design that shifts remembering complex classes and markup, to type-as-you speak properties that have simple and clear names.",
    "Harness the power of the Vuetify community and get help 24/7 from the development team and our talented community members across the world. Become a backer and get access to dedicated support from the team."
  ],
  "author": {
    "name": "John Leider",
    "url": "https://github.com/johnleider",
    "avatar": "johnleider.png"
  }
}

(The fields are, for now, taken from the websites/repositories of the libraries but I'm open to contributing brand new copy if that was your intent).

[sustained]

With the YAML/FrontMatter approach we could perhaps have the best of both worlds.

Taking the Vuetify section as an example, and trying to combine both of our data, we'd end up with something vaguely along the lines of:

---
name: Vuetify
tagline: Material Design Component Framework
popular: true
tags:
  - ui
  - framework
  - material
  - design
  - component
  - library
icon: vuetify.png
colour: "#7BC6FF"
links:
  - url: https://vuetifyjs.com/en/
    title: Vuetify documentation
  - url: https://github.com/vuetifyjs/vuetify
    title: Vuetify repository
  - url: https://community.vuetifyjs.com/
    title: Vuetify chat on Discord
author:
  name: John Leider
  url: https://github.com/johnleider
  avatar: johnleider.png
---

> Vuetify is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components that make building your application a breeze. Build amazing applications with the power of Vue, Material Design and a massive library of beautifully crafted components and features.

Vuetify is praised not only for a wide selection of components, but also for the way it's maintained. Currently it's developed by a full team of developers and it's got big and well organized community. The project is funded via Patreon and Open Collective.

The library's ecosystem provides multiple tools, such as theme generator, Webpack loader or opinionated Eslint config. It's also easy to implement Vuetify in your application thanks to provided plugins for Vue CLI and Nuxt.

Internally, Vuetify is written with Typescript. The upcoming release of Vuetify 2 with improved theme system, accessibility and performance, will also bring the move from Stylus to SASS.

Benefits

• use of structured data in FrontMatter section opens up more possibilities
• use of Markdown in the rest of the document allows anyone to contribute copy

Drawbacks

• probably requires wrapper components for Vue Community that load/parse Markdown/FrontMatter, making this project likely more complicated than you want it to be

[gustojs]

cause if somebody wants to write library descriptions, we've got a ton of descriptions to write about on vue-community, contributions welcome 😉 - gusto

What I meant here is that the primary focus of potential description-writers should be on descriptions at VueCommunity. For the bot they're not really that needed - one liner is enough, cause people will run the command to get the link and to click on the link to know more anyways.

And the VueCommunity descriptions work more in the context of the article they're written for, not as standalone descriptions.

There is a project meant for 2020 which can take advantage of such a database, but it's in way too early stage due to the priority being Vue 3.

[dobromir-hristov]

Well, having even separate markdown files with frontmatter for each project is better than just md files. Json is not ideal as we cant benefit nicely from markdown formatting. I dont mind the wrappers, problem is I dont have time to implement this as I am working on a new project for Vue 3, as Darek mentioned.

I like the idea, will keep structure and order.

[sustained]

Okay - I wasn't sure it was a good idea or not, good to hear.

I'm personally happy to tackle something like this since we need it for the bot project anyway (which is my current focus) and so I'll at least start throwing something very basic together.

Probably in another repository for the time being and just with the basics like the links and taglines (per request of gusto).

I will however make the decision here and now to use Markdown+FrontMatter instead of JSON. That way we can more easily incorporate it into Vue Community at a later data (and if others need data in JSON it's simple to extract FM and convert).

Also I believe both Akryum and Justineo could benefit from this data for other projects of theirs, so that's potentially 3-4 projects where it could prove useful.

[dobromir-hristov]

Well, Vuepress already has frontmatter reader into the .md files, to extract basic data, we just need to tap into that :) Ask the Vuepress maintainers about it. I assume they have a webpack loader that does this for us, returning a structured object or something.

[sustained]

I can personally vouch for this library which does all that you need and more.

[sustained]

Well I'll just start working on something to grab the data I personally need for the Disord bot and we can look into incorporating it into vuecommunity later once everyone is not so busy with Vue 3 projects and conferences and such.