🐥 TIL: Using Reader API to convert HTML to markdown

I just came accross a service which can be used to convert any HTML content into a Markdown file. The service is called Jina Reader API and was announced in April 2024.

Usage is very simple as explained on their demo page which you can find here.

It is basically a POST request to a specific URL and you can get it returned as a JSON string:

curl https://r.jina.ai/ \
  -H "Accept: application/json" \
  -H "Content-Type: application/json" \
  -H "X-Retain-Images: none" \
  -d @- <<EOFEOF
  {
    "url": "https://www.yellowduck.be/posts/til-generic-components-in-vuejs"
  }
EOFEOF

To do the same in Elixir, you can do this:

Req.post!(
  "https://r.jina.ai/",
  headers: %{
    "Accept" => "application/json",
    "X-Retain-Images" => "none"
  },
  json: %{
    url: "https://www.yellowduck.be/posts/til-generic-components-in-vuejs"
  }
).body

The resulting JSON data looks like this:

%{
  "code" => 200,
  "data" => %{
    "content" => "Today, I learned that when you use TypeScript with VueJS, you can create [generic components](https://vuejs.org/api/sfc-script-setup.html#generics) to make them type-safe:\n\n> Generic type parameters can be declared using the `generic` attribute on the `<script>` tag:\n> \n> ```\n> <script setup lang=\"ts\" generic=\"T\">\n> defineProps<{\n>   items: T[]\n>   selected: T\n> }>()\n> </script>\n> ```\n> \n> The value of generic works exactly the same as the parameter list between `<...>` in TypeScript. For example, you can use multiple parameters, \\> `extends` constraints, default types, and reference imported types:\n> \n> ```\n> <script\n>   setup\n>   lang=\"ts\"\n>   generic=\"T extends string | number, U extends Item\"\n> >\n> import type { Item } from './types'\n> defineProps<{\n>   id: T\n>   list: U[]\n> }>()\n> </script>\n> ```\n> \n> In order to use a reference to a generic component in a `ref` you need to use the \\[`vue-component-type-helpers`\\]([https://www.npmjs.com/package/\\>](https://www.npmjs.com/package/%3E) vue-component-type-helpers) library as `InstanceType` won't work.\n> \n> ```\n> <script\n>   setup\n>   lang=\"ts\"\n> >\n> import componentWithoutGenerics from '../component-without-generics.vue';\n> import genericComponent from '../generic-component.vue';\n> \n> import type { ComponentExposed } from 'vue-component-type-helpers';\n> \n> // Works for a component without generics\n> ref<InstanceType<typeof componentWithoutGenerics>>();\n> \n> ref<ComponentExposed<typeof genericComponent>>();\n> ```\n\n[source](https://vuejs.org/api/sfc-script-setup.html#generics)\n\nIf this post was enjoyable or useful for you, **please share it**! If you have comments, questions, or feedback, you can email my [personal email](mailto:pieter@yellowduck.be). To get new posts, subscribe use [the RSS feed](https://www.yellowduck.be/posts/feed).",
    "description" => "",
    "title" => "🐥 TIL: Generic components in VueJS",
    "url" => "https://www.yellowduck.be/posts/til-generic-components-in-vuejs",
    "usage" => %{"tokens" => 468}
  },
  "status" => 20000
}

Way faster and easier than using OpenAI to do the same.