teste-blog-medium-api
v0.1.0
Published
Downloads
4
Readme
Medium Blog
O Que é
Para você que deseja adicionar as postagens do Medium em seu site, esse projeto irá te ajudar! Antigamente o Medium fornecia uma API para realizar isso, mas essa API foi descontinuada. Mas através do XML que o Medium fornece construímos esse projeto, que falando a "modo grosso" ele puxa as postagens do XML e renderiza no view.
Como Usar
- git clone https://github.com/GuiiHenriq/medium-blog.git
- npm install
- npm run start (desenvolvimento)
- npm run build (produção)
Observações
Nosso projeto é construido totalmente em componentização, os componentes base são:
- Posts.js
- PostContent.js
- Search.js
- Categories.js
Guia
Pacote necessário: xml-js (já esta incluso no package.json)
Necessario uso de algum CORS para não bloquear a API (ex: https://cors-anywhere.herokuapp.com/https://medium.com/feed/@USERNAME
O XML fornecido pelo Medium é convertido em um JSON que gera um Array, entao devemos percorer o caminho para encontrar os elementos que precisamos, caso alguma informação da sua postagem não seja exibida, como Titulom, Thumbnail, URL do Post e etc. Verifique o caminho que está sendo chamado e o caminho fornecido pelo XML. *Exemplo do caminho percorrido no Array para chamar o título dos posts: postList.elements[0].elements[0].cdata*
Todos os fetchs e a chamada dos Array são inclusos no componentDidUpdate de cada arquivo .JS
A aplicação é baseada em 4 arquivos base: Posts.js = Pagina principal onde renderiza todas as postagens PostContent.js = Pagina especifica de cada post, com seu conteúdo completo. Search.js = Pagina de busca das postagens Categories.js = Pagina especifica para as categorias das postagens.
Existe um padrão que deve ser seguido na criação dos seus posts no Medium para que cada informação seja exibida corretamente no nosso view Exemplo: O Medium permite adicionar até 4 categorias em cada post, mas em nossa aplicação consideramos apenas a 1ª categoria, sendo assim, das 4 categorias que você colocar no seu post, considere que a primeira será a exibida em nossa aplicação.