Hopp til innhold

Hvordan blogge i Jøkul

Leiv Fredrik Berge

2020.06.05

Portalen i Jøkul er ikke bare et komponentbibliotek eller statisk dokumentasjon, det er en portal for alt vi syns hører hjemme her. Og nå inklurerer det en blog. Hva innholdet skal være her er opp til alle som vil bidra. Denne posten skal prøve å ta for seg hvordan du kan bidra med en post, enten du er utvikler, designer, prosjektleder eller noe annet med noe å dele.

Kort teknisk, Portalen er basert på gatsby, en statisk side generator, som baserer seg på markdown. Blogposter skiller seg sånn sett veldig lite ut ifra resten av dokumentasjonen i portalen, så er du komfortabel med å lage dokumentasjon der, så er du veldig nære å kunne lage din blogpost.

Min første blogpost

  1. Naviger deg inn til /portal/src/texts/blog/ i din IDE, eller gå inn på github her
  2. I din IDE, lag en ny fil, gi den et fornuftig navn med filendelsen .mdx.
    På github kan du trykke på Create new file. Det er veldig viktig at fila slutter på .mdx, gatsby plukker bare opp filer med denne endelsen.
  3. I fila må du legge inn litt metadata om posten din.
    ---
    title: Min første bloggpost
    author: Forfatter Forfattersen
    description: En setning eller to om innholdet i bloggposten, denne vises på forsiden når din post er den nyeste
    publishDate: "2020.06.05"
    ---
    
  4. Resten av fila fyller du med ditt innhold i markdown-format.
    Du kan lese mer om hvordan du gjør det her i portalen
  5. Så lager du pull request, resten skjer av seg selv!

Hvordan legge til bilde

Bare tekst kan jo bli litt kjederlig. Du trenger kanskje et bilde for å forklare noe, eller bare et meme for å vise at du følger med i tiden.

Bruke bilde fra internet

  1. Legg bildet direkte inn i .mdx fila med ![](https://adressen-til-bildet.com/bildet.png)

Laste opp eget bilde

  1. Naviger deg til /portal/static/assets/blog/ i din IDE,
    eller gå inn på github her
  2. Legg inn fila di, eller trykk på last opp fil i Github.
    Jobber du lokalt må du restarte gatsby før du ser bildet, siden gatsby bare leser statiske assets ved oppstart.
  3. For å få bildet inn i posten din gjør du det med standard markdown,
    ![](/assets/blog/ditt-bilde.jpg)

Du kan litt React

Jeg lister ikke opp noe steg her, men avslører heller direkte den ikke så hemmelige hemmeligheten, at du kan putte React kode rett inn i mdx fila. Så vil du ha inn et bilde, gjør import someAsset from "./someAsset.svg", og <img src={someAsset} alt="Husk alt tekst, det er vanlig høflighet" />.

Oppsummering

Så, det er ikke så vanskelig, om du er usikker så kan du se på de eksisterende postene og få inspirasjon av de, feks kan du ta en titt på denne posten.