Hvordan vise Medium-artiklene dine på din hjemmeside

Du kan få hentet ut Medium-artiklene dine på et format du kan bruke på hjemmesiden din

Visste du at Medium har en måte å hente ut artiklene dine, og du trenger ikke engang autentisering eller tokens? Dette kan være nyttig om du ønsker å vise frem de siste artiklene fra din favorittblogger, eller bare ønsker å vise frem dine siste skriverier. I denne artikkelen vil du lære hvordan du kan hente ut Medium-artikler og vise dataene i et Nextjs-komponent.

Hent ut data

Medium har endepunktet https://medium.com/feed/@<brukernavn>, hvor du kan hente ut en brukers artikler, se for eksempel https://medium.com/feed/@marcushaaland.

Medium tilbyr et endepunkt for å hente ut en brukers artikler på et RSS-format

Om du er som meg, syns du kanskje formatet på dataene er rart. Formatet er på RSS, som er et XML-basert filformat. RSS er en vanlig måte for nettsider å tilby sitt innhold på, men vi kan lett gjøre RSS om til noe vi er mer kjent med: JSON.

Det finnes flere måter for å gjøre RSS om til JSON. En enkel måte er å bruke nettsiden rss2json. De tilbyr et API på formatet https://api.rss2json.com/v1/api.json?rss_url=<mediumfeedurl>, for eksempel https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@marcushaaland.

med rss2json.com kan vi gjøre om data fra RSS til JSON. Highlightingen kommer fra en Chrome-utvidelse

Nå er det lettere å se hvilke data vi har å jobbe med. Det mest interessante her er items, som inneholder en liste av brukerens artikler. Her kan vi hente ut artikkelinformasjon som tittel, medium-lenke, bilde og beskrivelse.

Vis dataene i et Nextjs-komponent

La oss få til noe visning av dataene. I dette eksempelet har jeg brukt Nextjs med Typescript. Hele koden finner du her: https://gist.github.com/haalmarc/4e6f471e539e2d5bd2490af16f124e72.

I et komponent posts.tsx bruker vi fetch til å hente dataene fra medium-endepunktet. Vi gjør dette i getStaticProps, ettersom vi ønsker dataene ved siderendring. Du kan lese mer om data-fetching i Nextjs her.

// posts.tsx
export const getStaticProps = async () => {
  const url = "https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@marcushaaland";
  const request = await fetch(url);
  const data = await request.json();
  const posts = data.items as Post[];
  return { props: { posts } };
};

Post-objektet har egentlig flere data, men vi bruker bare title, link, thumbnail og description.

interface Post {
  title: string;
  link: string;
  thumbnail: string;
  description: string;
}

Vi kan så benytte props-dataene i Posts-komponentet og vise dataene.

interface Props {
  posts: Post[];
}

export default function Posts({ posts }: Props) {
  return (
    <div>
      {posts.map((p: Post) => (
        <div key={p.link}>
          <h2>{p.title}</h2>
          <img src={p.thumbnail} width="200" />
          <p>{p.description)}</p>
          <a href={p.link}>Les mer</a>
        </div>
      ))}
    </div>
  );
}

Vi kan nå fyre opp applikasjonen, og sjekke ut hva vi har:

Vi har fått vist dataene fra medium, men det ser rotete ut med HTML-tagsene

Yay! Vi har fått data frem til brukeren. Men ja, jeg er helt enig, det ser ikke bra ut. Vi får ikke bare tekstinnholdet, men også HTML-tagsene. Vi har to valg: Enten parse HTML-en inn i UI-et, eller å fjerne tagsene. Jeg valgte sistnevnte, ettersom jeg ikke ønsker å gjenvise hele artikkelen, men bare en kort introduksjon.

Vi lager en funksjon for å formatere vekk tagsene ved bruk av regex:

function removeTags(htmlstring: string): string {
  // Fjern tagger og dets innhold
  let formattedString = htmlstring.replace(/<img .*?>/g, "");
  formattedString = formattedString.replace(/<figure.*?figure>/g, "");
  formattedString = formattedString.replace(/<h3.*?h3>/g, "");
  // Fjern tagger
  formattedString = formattedString.replace(/(<([^>]+)>)/gi, "");
  return formattedString;
}

Vi kan nå benytte oss av den nye funksjonen på beskrivelse. Siden vi ikke trenger hele teksten, kan vi slice for å bare inkludere starten av teksten.

<p>{removeTags(p.description).slice(0, 200)}...</p>

Vi viser nå en kortversjon av en brukers mediumartikler

Avsluttende ord

Vi har nå sett hvordan vi kan hente ut Medium-artikler på et JSON-format og å vise dataene til en bruker. Medium-feeden har dessverre en begrensning det er verdt å merke seg, hvor vi får bare hentet de ti siste artiklene. Det finnes en diskusjon HER for muligheter for å omgå det.

Hvordan ville du ha implementert artikkelhenting på din side?