4/5/2022 ∙ 3 minuty czytania

Osobista strona internetowa — podstawy framework'a Remix 💿

Kolejna część serii poświęconej tworzeniu strony na której właśnie się znajdujesz drogi czytelniku.

W poprzednim artykule umieściłem podstawowe informacje na temat tego, w jaki sposób postawiłem stronę i umieściłem ja na serwerach fly.io. Dzisiaj pokaże jak w prosty sposób dodawać artykuły.

Dodawanie postów na bloga

Remix, czyli framework, z którego korzystam przy tworzeniu tej strony, ma bardzo przyjazny DX (ang. Developer Experience) i pozwala nam tworzyć treść na wiele różnych sposobów.

Cala nasza aplikacja żyje w katalogu app. Jego struktura jest bardzo prosta. Postaram się w paru zdaniach wyjaśnić, na czym ona właściwie polega.

.
├── entry.client.tsx
├── entry.server.tsx
├── root.tsx
└── routes
    ├── hello-world.md
    ├── index.tsx
    ├── project-launch.md
    └── remix-basics.md

Powyższe drzewo przedstawia wynik działania polecania tree w katalogu app. Nie będę dzisiaj omawiał wszystkich plików. W miarę dodawania kolejnych funkcjonalności opisze ich zadanie. Skupimy się na najważniejszym dzisiaj katalogu, czyli routes. To tutaj Remix trzyma pliki powiązane ze ścieżkami. Kiedy użytkownik wchodzi na dany adres URL, to Remix wyszukuje plik, który odpowiada jego nazwie i renderuje go na stronie. Na przykład:

kacgrzes.io -> index.tsx
kacgrzes.io/ -> index.tsx
kacgrzes.io/hello-world -> hello-world.md
kacgrzes.io/project-launch -> project-launch.md
kacgrzes.io/remix-basics -> remix-basics.md

To, co jest tutaj warte uwagi to, ze Remix obsługuje różne rozszerzenia i pozwala nie tylko renderować pliki Reaktowe (z rozszerzeniem .js / .ts / .jsx, .tsx), ale również pliki .md jak i .mdx (Markdown na sterydach, który umożliwia dodawanie komponentów Reakta).

Zerknijmy w plik index.tsx:

import { Link } from '@remix-run/react'

export default function Index() {
  return (
    <div>
      <h1>Blog</h1>
      <ul>
        <li>
          <Link to={'/remix-basic'}>Personal website - remix basic</Link>
        </li>
        <li>
          <Link to={'/project-launch'}>Personal website - project launch</Link>
        </li>
        <li>
          <Link to={'/hello-world'}>Hello World!</Link>
        </li>
      </ul>
    </div>
  )
}

Jak widzisz, jest to bardzo prosta struktura. Jeśli korzystaliśmy wcześniej z biblioteki react-router to komponent Link również nie powinien być dla nas obcy. Jest to komponent za pomocą którego nawigujemy po ścieżkach naszej strony.

Reszta plików (i zarazem ścieżek) to pliki w formacie Markdown czyli języka znaczników przeznaczonego do formatowania tekstu. Dzięki temu możemy skupić się na pisaniu treści pomijając konieczność pisania poprawnego HTML'a. Remix ma wbudowany parser, który zamienia ten format na HTML'a, podobnie z reszta dzieje sie w przypadku plików reaktowych. Remix renderuje naszą treść po stronie serwera, a następnie wysyła odpowiedź zrozumiałą dla naszej przeglądarki. Co właściwie dzieje się za kulisami, wyjaśnię na pewno w jednym z kolejnych postów.

> exit

Poniżej znajdziesz więcej postów, które mogą Cię zainteresować.