add user articles

2025-12-18 00:13:27 +03:00
parent b72974ef62
commit f1a65f2fe4
25 changed files with 690 additions and 8 deletions
--- a/api/.gitignore
+++ b/api/.gitignore
@@ -0,0 +1 @@
+/sql
--- a/api/app/archive.go
+++ b/api/app/archive.go
@@ -0,0 +1,76 @@
+package app
+
+import (
+	"fmt"
+	"io"
+	"net/http"
+	"net/url"
+	"strings"
+
+	"github.com/PuerkitoBio/goquery"
+)
+
+func downloadAssetFile(url string) ([]byte, error) {
+	resp, err := http.Get(url)
+	if err != nil {
+		return nil, err
+	}
+	defer resp.Body.Close()
+
+	return io.ReadAll(resp.Body)
+}
+
+// FetchArticleHTML returns page's title, html and error
+func FetchArticleHTML(urlToFetch string) (string, string, error) {
+	url, err := url.Parse(urlToFetch)
+	if err != nil {
+		return "", "", err
+	}
+
+	resp, err := http.Get(url.String())
+	if err != nil {
+		return "", "", err
+	}
+	defer resp.Body.Close()
+
+	doc, err := goquery.NewDocumentFromReader(resp.Body)
+	if err != nil {
+		return "", "", err
+	}
+
+	doc.Find(`head link[rel="stylesheet"]`).Each(func(i int, s *goquery.Selection) {
+		v, ok := s.Attr("href")
+		if !ok || v == "" {
+			return
+		}
+
+		if strings.HasPrefix(v, "/") {
+			styles, err := downloadAssetFile(fmt.Sprintf("https://%s%s", url.Hostname(), v))
+			if err != nil {
+				return
+			}
+			doc.Find("head").AppendHtml("<style>" + string(styles) + "</style>")
+			s.Remove()
+		}
+	})
+
+	doc.Find("a").Each(func(i int, s *goquery.Selection) {
+		href, ok := s.Attr("href")
+		if !ok || href == "" {
+			return
+		}
+
+		if strings.HasPrefix(href, "/") {
+			s.SetAttr("href", "https://"+url.Hostname()+href)
+		}
+	})
+
+	doc.Find("script").Each(func(i int, s *goquery.Selection) {
+		s.Remove()
+	})
+
+	title := doc.Find("head title").Text()
+
+	html, _ := doc.Html()
+	return title, html, err
+}
--- a/api/go.mod
+++ b/api/go.mod
@@ -9,4 +9,12 @@ require (
 	golang.org/x/crypto v0.46.0
 )

-require github.com/golang-jwt/jwt/v5 v5.3.0
+require (
+	github.com/PuerkitoBio/goquery v1.11.0
+	github.com/golang-jwt/jwt/v5 v5.3.0
+)
+
+require (
+	github.com/andybalholm/cascadia v1.3.3 // indirect
+	golang.org/x/net v0.47.0 // indirect
+)
--- a/api/go.sum
+++ b/api/go.sum
@@ -1,9 +1,14 @@
 filippo.io/edwards25519 v1.1.0 h1:FNf4tywRC1HmFuKW5xopWpigGjJKiJSV0Cqo0cJWDaA=
 filippo.io/edwards25519 v1.1.0/go.mod h1:BxyFTGdWcka3PhytdK4V28tE5sGfRvvvRV7EaN4VDT4=
+github.com/PuerkitoBio/goquery v1.11.0 h1:jZ7pwMQXIITcUXNH83LLk+txlaEy6NVOfTuP43xxfqw=
+github.com/PuerkitoBio/goquery v1.11.0/go.mod h1:wQHgxUOU3JGuj3oD/QFfxUdlzW6xPHfqyHre6VMY4DQ=
+github.com/andybalholm/cascadia v1.3.3 h1:AG2YHrzJIm4BZ19iwJ/DAua6Btl3IwJX+VI4kktS1LM=
+github.com/andybalholm/cascadia v1.3.3/go.mod h1:xNd9bqTn98Ln4DwST8/nG+H0yuB8Hmgu1YHNnWw0GeA=
 github.com/go-sql-driver/mysql v1.8.1 h1:LedoTUt/eveggdHS9qUFC1EFSa8bU2+1pZjSRpvNJ1Y=
 github.com/go-sql-driver/mysql v1.8.1/go.mod h1:wEBSXgmK//2ZFJyE+qWnIsVGmvmEKlqwuVSjsCm7DZg=
 github.com/golang-jwt/jwt/v5 v5.3.0 h1:pv4AsKCKKZuqlgs5sUmn4x8UlGa0kEVt/puTpKx9vvo=
 github.com/golang-jwt/jwt/v5 v5.3.0/go.mod h1:fxCRLWMO43lRc8nhHWY6LGqRcf+1gQWArsqaEUEa5bE=
+github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/jmoiron/sqlx v1.4.0 h1:1PLqN7S1UYp5t4SrVVnt4nUVNemrDAtxlulVe+Qgm3o=
 github.com/jmoiron/sqlx v1.4.0/go.mod h1:ZrZ7UsYB/weZdl2Bxg6jCRO9c3YHl8r3ahlKmRT4JLY=
 github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
@@ -13,5 +18,71 @@ github.com/lib/pq v1.10.9/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
 github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
 github.com/mattn/go-sqlite3 v1.14.32 h1:JD12Ag3oLy1zQA+BNn74xRgaBbdhbNIDYvQUEuuErjs=
 github.com/mattn/go-sqlite3 v1.14.32/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
+github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
+golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
+golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
+golang.org/x/crypto v0.13.0/go.mod h1:y6Z2r+Rw4iayiXXAIxJIDAJ1zMW4yaTpebo8fPOliYc=
+golang.org/x/crypto v0.19.0/go.mod h1:Iy9bg/ha4yyC70EfRS8jz+B6ybOBKMaSxLj6P6oBDfU=
+golang.org/x/crypto v0.23.0/go.mod h1:CKFgDieR+mRhux2Lsu27y0fO304Db0wZe70UKqHu0v8=
+golang.org/x/crypto v0.31.0/go.mod h1:kDsLvtWBEx7MV9tJOj9bnXsPbxwJQ6csT/x4KIN4Ssk=
 golang.org/x/crypto v0.46.0 h1:cKRW/pmt1pKAfetfu+RCEvjvZkA9RimPbh7bhFjGVBU=
 golang.org/x/crypto v0.46.0/go.mod h1:Evb/oLKmMraqjZ2iQTwDwvCtJkczlDuTmdJXoZVzqU0=
+golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
+golang.org/x/mod v0.8.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
+golang.org/x/mod v0.12.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
+golang.org/x/mod v0.15.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
+golang.org/x/mod v0.17.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
+golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
+golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
+golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
+golang.org/x/net v0.6.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
+golang.org/x/net v0.10.0/go.mod h1:0qNGK6F8kojg2nk9dLZ2mShWaEBan6FAoqfSigmmuDg=
+golang.org/x/net v0.15.0/go.mod h1:idbUs1IY1+zTqbi8yxTbhexhEEk5ur9LInksu6HrEpk=
+golang.org/x/net v0.21.0/go.mod h1:bIjVDfnllIU7BJ2DNgfnXvpSvtn8VRwhlsaeUTyUS44=
+golang.org/x/net v0.25.0/go.mod h1:JkAGAh7GEvH74S6FOH42FLoXpXbE/aqXSrIQjXgsiwM=
+golang.org/x/net v0.33.0/go.mod h1:HXLR5J+9DxmrqMwG9qjGCxZ+zKXxBru04zlTvWlWuN4=
+golang.org/x/net v0.47.0 h1:Mx+4dIFzqraBXUugkia1OOvlD6LemFo1ALMHjrXDOhY=
+golang.org/x/net v0.47.0/go.mod h1:/jNxtkgq5yWUGYkaZGqo27cfGZ1c5Nen03aYrrKpVRU=
+golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.3.0/go.mod h1:FU7BRWz2tNW+3quACPkgCx/L+uEAv1htQ0V83Z9Rj+Y=
+golang.org/x/sync v0.6.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
+golang.org/x/sync v0.7.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
+golang.org/x/sync v0.10.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
+golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.12.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.17.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.20.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.28.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/telemetry v0.0.0-20240228155512-f48c80bd79b2/go.mod h1:TeRTkGYfJXctD9OcfyVLyj2J3IxLnKwHJR8f4D8a3YE=
+golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
+golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
+golang.org/x/term v0.5.0/go.mod h1:jMB1sMXY+tzblOD4FWmEbocvup2/aLOaQEp7JmGp78k=
+golang.org/x/term v0.8.0/go.mod h1:xPskH00ivmX89bAKVGSKKtLOWNx2+17Eiy94tnKShWo=
+golang.org/x/term v0.12.0/go.mod h1:owVbMEjm3cBLCHdkQu9b1opXd4ETQWc3BhuQGKgXgvU=
+golang.org/x/term v0.17.0/go.mod h1:lLRBjIVuehSbZlaOtGMbcMncT+aqLLLmKrsjNrUguwk=
+golang.org/x/term v0.20.0/go.mod h1:8UkIAJTvZgivsXaD6/pH6U9ecQzZ45awqEOzuCvwpFY=
+golang.org/x/term v0.27.0/go.mod h1:iMsnZpn0cago0GOrHO2+Y7u7JPn5AylBrcoWkElMTSM=
+golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
+golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
+golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
+golang.org/x/text v0.7.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
+golang.org/x/text v0.9.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
+golang.org/x/text v0.13.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
+golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
+golang.org/x/text v0.15.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
+golang.org/x/text v0.21.0/go.mod h1:4IBbMaMmOPCJ8SecivzSH54+73PCFmPWxNTLm+vZkEQ=
+golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
+golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
+golang.org/x/tools v0.6.0/go.mod h1:Xwgl3UAJ/d3gWutnCtw505GrjyAbvKui8lOU390QaIU=
+golang.org/x/tools v0.13.0/go.mod h1:HvlwmtVNQAhOuCjW7xxvovg8wbNq7LwfXh/k7wXUl58=
+golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d/go.mod h1:aiJjzUbINMkxbQROHiO6hDPo2LHcIPhhQsa9DLh0yGk=
+golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
--- a/api/main.go
+++ b/api/main.go
@@ -1,14 +1,20 @@
 package main

 import (
+	"bytes"
+	"compress/gzip"
 	"encoding/json"
 	"flag"
 	"fmt"
+	"io"
 	"log"
 	"net/http"
 	"os"
+	"strconv"
+	"strings"
 	"time"

+	"archive.local/app"
 	"github.com/golang-jwt/jwt/v5"
 	"github.com/jmoiron/sqlx"
 	"github.com/joho/godotenv"
@@ -29,6 +35,16 @@ type User struct {
 	UpdatedAt string `json:"updated_at" db:"updated_at"`
 }

+type Article struct {
+	ID        int64  `json:"id" db:"id"`
+	Title     string `json:"title" db:"title"`
+	URL       string `json:"url" db:"url"`
+	Body      []byte `json:"-" db:"body"`
+	UserID    int64  `json:"-" db:"user_id"`
+	CreatedAt string `json:"created_at" db:"created_at"`
+	UpdatedAt string `json:"updated_at" db:"updated_at"`
+}
+
 func readJSON(r *http.Request, s any) error {
 	return json.NewDecoder(r.Body).Decode(s)
 }
@@ -74,6 +90,39 @@ func generateAccessToken(userId int64) (string, error) {
 	return token.SignedString(jwtSecretKey)
 }

+func getUserIdFromAccessToken(accessToken string) (int64, error) {
+	token, err := jwt.Parse(accessToken, func(t *jwt.Token) (any, error) {
+		return jwtSecretKey, nil
+	})
+	if err != nil {
+		return -1, err
+	}
+
+	if claims, ok := token.Claims.(jwt.MapClaims); ok && token.Valid {
+		if id, ok := claims["id"].(float64); ok {
+			return int64(id), nil
+		} else {
+			return -1, fmt.Errorf("couldn't convert id to float64")
+		}
+	} else {
+		return -1, fmt.Errorf("invalid token")
+	}
+}
+
+func getUserIdFromRequest(r *http.Request) (int64, error) {
+	token, err := r.Cookie("access_token")
+	if err != nil {
+		return -1, err
+	}
+
+	userId, err := getUserIdFromAccessToken(token.Value)
+	if err != nil {
+		return -1, err
+	}
+
+	return userId, nil
+}
+
 type AuthResponse struct {
 	AccessToken string `json:"access_token"`
 }
@@ -195,6 +244,179 @@ func main() {
 		sendJSON(w, AuthResponse{token}, 200)
 	})

+	mux.HandleFunc("GET /articles", func(w http.ResponseWriter, r *http.Request) {
+		userId, err := getUserIdFromRequest(r)
+		if err != nil {
+			sendApiError(w, "invalid token", err, 401)
+			return
+		}
+
+		rows, err := db.Queryx("SELECT * FROM articles WHERE user_id = ?", userId)
+		if err != nil {
+			sendApiError(w, "couldn't find articles", err, 500)
+			return
+		}
+
+		articles := []Article{}
+		for rows.Next() {
+			var article Article
+			if err := rows.StructScan(&article); err != nil {
+				continue
+			}
+			articles = append(articles, article)
+		}
+
+		sendJSON(w, articles, 200)
+	})
+
+	mux.HandleFunc("POST /articles", func(w http.ResponseWriter, r *http.Request) {
+		userId, err := getUserIdFromRequest(r)
+		if err != nil {
+			sendApiError(w, "invalid token", err, 401)
+			return
+		}
+
+		var body struct {
+			URL string `json:"url"`
+		}
+		if err := readJSON(r, &body); err != nil {
+			sendApiError(w, "couldn't parse body", err, 500)
+			return
+		}
+
+		if body.URL == "" {
+			sendApiError(w, "invalid request", nil, 400)
+			return
+		}
+
+		title, html, err := app.FetchArticleHTML(body.URL)
+		if err != nil {
+			sendApiError(w, "couldn't fetch article", err, 500)
+			return
+		}
+
+		var b bytes.Buffer
+		gw := gzip.NewWriter(&b)
+		gw.Write([]byte(html))
+		gw.Close()
+
+		res, err := db.Exec("INSERT INTO articles (title, url, body, user_id) VALUES (?, ?, ?, ?)", title, body.URL, b.Bytes(), userId)
+		if err != nil {
+			sendApiError(w, "couldn't save article", err, 500)
+			return
+		}
+		_ = res
+
+		fmt.Fprint(w, "ok")
+	})
+
+	mux.HandleFunc("PATCH /articles/{id}", func(w http.ResponseWriter, r *http.Request) {
+		userId, err := getUserIdFromRequest(r)
+		if err != nil {
+			sendApiError(w, "invalid token", err, 401)
+			return
+		}
+
+		articleIdStr := r.PathValue("id")
+		articleId, err := strconv.Atoi(articleIdStr)
+		if err != nil {
+			sendApiError(w, "couldn't parse article id from url", err, 500)
+			return
+		}
+
+		var body struct {
+			Title string `json:"title"`
+		}
+		if err := readJSON(r, &body); err != nil {
+			sendApiError(w, "couldn't parse body", err, 500)
+			return
+		}
+
+		clauses := []string{}
+		args := map[string]any{"id": articleId, "user_id": userId}
+
+		if body.Title != "" {
+			clauses = append(clauses, "title = :title")
+			args["title"] = body.Title
+		}
+
+		q := "UPDATE articles SET " + strings.Join(clauses, ", ") + " WHERE id = :id AND user_id = :user_id"
+		res, err := db.NamedExec(q, args)
+		if err != nil {
+			sendApiError(w, "couldn't update article", err, 500)
+			return
+		}
+		_ = res
+
+		fmt.Fprint(w, "ok")
+	})
+
+	mux.HandleFunc("GET /articles/{id}/body", func(w http.ResponseWriter, r *http.Request) {
+		userId, err := getUserIdFromRequest(r)
+		if err != nil {
+			sendApiError(w, "invalid token", err, 401)
+			return
+		}
+
+		articleIdStr := r.PathValue("id")
+		articleId, err := strconv.Atoi(articleIdStr)
+		if err != nil {
+			sendApiError(w, "couldn't parse article id from url", err, 500)
+			return
+		}
+
+		row := db.QueryRowx("SELECT * FROM articles WHERE id = ? AND user_id = ?", articleId, userId)
+		if row.Err() != nil {
+			sendApiError(w, "article not found", err, 404)
+			return
+		}
+
+		var article Article
+		if err := row.StructScan(&article); err != nil {
+			sendApiError(w, "couldn't scan article to struct", err, 500)
+			return
+		}
+
+		gzr, err := gzip.NewReader(bytes.NewReader(article.Body))
+		if err != nil {
+			sendApiError(w, "couldn't parse article", err, 500)
+			return
+		}
+
+		data, err := io.ReadAll(gzr)
+		if err != nil {
+			sendApiError(w, "couldn't decompress article", err, 500)
+			return
+		}
+
+		w.WriteHeader(200)
+		w.Header().Set("Content-Type", "text/html")
+		w.Write(data)
+	})
+
+	mux.HandleFunc("DELETE /articles/{id}", func(w http.ResponseWriter, r *http.Request) {
+		userId, err := getUserIdFromRequest(r)
+		if err != nil {
+			sendApiError(w, "invalid token", err, 401)
+			return
+		}
+
+		articleIdStr := r.PathValue("id")
+		articleId, err := strconv.Atoi(articleIdStr)
+		if err != nil {
+			sendApiError(w, "couldn't parse article id from url", err, 500)
+			return
+		}
+
+		_, err = db.Exec("DELETE FROM articles WHERE id = ? AND user_id = ?", articleId, userId)
+		if err != nil {
+			sendApiError(w, "article not found", err, 404)
+			return
+		}
+
+		fmt.Fprint(w, "ok")
+	})
+
 	if err := http.ListenAndServe(*addr, handler(mux)); err != nil {
 		log.Fatalf("failed to start http server: %v\n", err)
 	}
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -5,6 +5,7 @@
    "": {
      "name": "web",
      "dependencies": {
+        "@phosphor-icons/react": "^2.1.10",
        "@tanstack/react-query": "^5.90.12",
        "axios": "^1.13.2",
        "clsx": "^2.1.1",
@@ -184,6 +185,8 @@

    "@nolyfill/is-core-module": ["@nolyfill/is-core-module@1.0.39", "", {}, "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA=="],

+    "@phosphor-icons/react": ["@phosphor-icons/react@2.1.10", "", { "peerDependencies": { "react": ">= 16.8", "react-dom": ">= 16.8" } }, "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA=="],
+
    "@rtsao/scc": ["@rtsao/scc@1.1.0", "", {}, "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g=="],

    "@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],
--- a/web/package.json
+++ b/web/package.json
@@ -9,6 +9,7 @@
    "lint": "eslint"
  },
  "dependencies": {
+    "@phosphor-icons/react": "^2.1.10",
    "@tanstack/react-query": "^5.90.12",
    "axios": "^1.13.2",
    "clsx": "^2.1.1",
--- a/web/src/api/articles/useArticlesQuery.ts
+++ b/web/src/api/articles/useArticlesQuery.ts
@@ -0,0 +1,20 @@
+import { $axios } from "@/lib/axios";
+import { useQuery } from "@tanstack/react-query";
+
+export type Article = {
+  id: number;
+  title: string;
+  url: string;
+  created_at: string;
+  updated_at: string;
+};
+
+export const useArticlesQuery = () => {
+  return useQuery({
+    queryKey: ["articles"],
+    queryFn: async () => {
+      const resp = await $axios.get<Article[]>("/articles");
+      return resp.data;
+    },
+  });
+};
--- a/web/src/api/articles/useDeleteArticleMutation.ts
+++ b/web/src/api/articles/useDeleteArticleMutation.ts
@@ -0,0 +1,17 @@
+import { $axios } from "@/lib/axios";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+export const useDeleteArticleMutation = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ id }: { id: number }) => {
+      const resp = await $axios.delete(`/articles/${id}`);
+      return resp.data;
+    },
+    onSuccess() {
+      queryClient.invalidateQueries({
+        queryKey: ["articles"],
+      });
+    },
+  });
+};
--- a/web/src/api/articles/useSaveArticleMutation.ts
+++ b/web/src/api/articles/useSaveArticleMutation.ts
@@ -0,0 +1,21 @@
+import { $axios } from "@/lib/axios";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+export type SaveArticleData = {
+  url: string;
+};
+
+export const useSaveArticleMutation = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (data: SaveArticleData) => {
+      const resp = await $axios.post("/articles", data);
+      return resp.data;
+    },
+    onSuccess() {
+      queryClient.invalidateQueries({
+        queryKey: ["articles"],
+      });
+    },
+  });
+};
--- a/web/src/api/articles/useUpdateArticleMutation.ts
+++ b/web/src/api/articles/useUpdateArticleMutation.ts
@@ -0,0 +1,22 @@
+import { Article } from "@/api/articles/useArticlesQuery";
+import { $axios } from "@/lib/axios";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+export type UpdateArticleData = Partial<Pick<Article, "title">> & {
+  id: number;
+};
+
+export const useUpdateArticleMutation = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ id, ...data }: UpdateArticleData) => {
+      const resp = await $axios.patch(`/articles/${id}`, data);
+      return resp.data;
+    },
+    onSuccess() {
+      queryClient.invalidateQueries({
+        queryKey: ["articles"],
+      });
+    },
+  });
+};
--- a/web/src/app/(auth)/layout.tsx
+++ b/web/src/app/(auth)/layout.tsx
@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return <div className="h-full">{children}</div>;
+}
--- a/web/src/app/(auth)/login/LoginForm.tsx
+++ b/web/src/app/(auth)/login/LoginForm.tsx
--- a/web/src/app/(auth)/login/page.tsx
+++ b/web/src/app/(auth)/login/page.tsx
@@ -1,6 +1,6 @@
-import { LoginForm } from "@/app/login/LoginForm";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
+import { LoginForm } from "./LoginForm";

 export default async function Login() {
  const c = await cookies();
--- a/web/src/app/(auth)/register/RegisterForm.tsx
+++ b/web/src/app/(auth)/register/RegisterForm.tsx
--- a/web/src/app/(auth)/register/page.tsx
+++ b/web/src/app/(auth)/register/page.tsx
@@ -1,6 +1,6 @@
-import { RegisterForm } from "@/app/register/RegisterForm";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
+import { RegisterForm } from "./RegisterForm";

 export default async function Register() {
  const c = await cookies();
--- a/web/src/app/(home)/ArticleDrawer.tsx
+++ b/web/src/app/(home)/ArticleDrawer.tsx
@@ -0,0 +1,49 @@
+import { Article } from "@/api/articles/useArticlesQuery";
+import { useUpdateArticleMutation } from "@/api/articles/useUpdateArticleMutation";
+import { Drawer } from "@/components/ui/Drawer";
+import { ArrowSquareOutIcon } from "@phosphor-icons/react";
+import { cloneElement, JSX, useState } from "react";
+
+export type ArticleDrawerProps = {
+  article: Article;
+  children: JSX.Element;
+};
+
+export const ArticleDrawer = ({ article, children }: ArticleDrawerProps) => {
+  const [open, setOpen] = useState(false);
+
+  const updateArticleMutation = useUpdateArticleMutation();
+
+  return (
+    <>
+      {cloneElement(children, { onClick: () => setOpen(true) })}
+      {open && (
+        <Drawer open onClose={() => setOpen(false)}>
+          <div className="flex justify-between w-full">
+            <div className="flex items-center gap-3">
+              <h2
+                className="text-2xl font-semibold text-pretty"
+                contentEditable
+                onBlur={(e) => {
+                  updateArticleMutation.mutate({
+                    id: article.id,
+                    title: e.target.innerText,
+                  });
+                }}
+              >
+                {article.title}
+              </h2>
+              <a href={article.url} target="_blank" rel="noopener noreferrer">
+                <ArrowSquareOutIcon size={28} />
+              </a>
+            </div>
+          </div>
+          <iframe
+            src={`${process.env.NEXT_PUBLIC_API_URL}/articles/${article.id}/body`}
+            className="mt-4 w-full h-full"
+          />
+        </Drawer>
+      )}
+    </>
+  );
+};
--- a/web/src/app/(home)/SaveArticleForm.tsx
+++ b/web/src/app/(home)/SaveArticleForm.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import {
+  SaveArticleData,
+  useSaveArticleMutation,
+} from "@/api/articles/useSaveArticleMutation";
+import { Button } from "@/components/ui/Button";
+import { Input } from "@/components/ui/Input";
+import { useForm } from "react-hook-form";
+
+export const SaveArticleForm = () => {
+  const mutation = useSaveArticleMutation();
+
+  const form = useForm<SaveArticleData>({
+    defaultValues: {
+      url: "",
+    },
+  });
+
+  const onSubmit = form.handleSubmit((data) => {
+    mutation.mutate(data, {
+      onSuccess() {
+        form.setValue("url", "");
+      },
+    });
+  });
+
+  return (
+    <form className="flex items-center gap-2" onSubmit={onSubmit}>
+      <Input
+        type="text"
+        placeholder="article url"
+        {...form.register("url", { required: true })}
+      />
+      <Button type="submit" size="small" disabled={mutation.isPending}>
+        Archive
+      </Button>
+    </form>
+  );
+};
--- a/web/src/app/(home)/UserArticles.tsx
+++ b/web/src/app/(home)/UserArticles.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { useArticlesQuery } from "@/api/articles/useArticlesQuery";
+import { SaveArticleForm } from "./SaveArticleForm";
+import { ArticleDrawer } from "@/app/(home)/ArticleDrawer";
+import { Button } from "@/components/ui/Button";
+import { useDeleteArticleMutation } from "@/api/articles/useDeleteArticleMutation";
+
+export const UserArticles = () => {
+  const { data: articles } = useArticlesQuery();
+
+  const deleteArticleMutation = useDeleteArticleMutation();
+
+  return (
+    <div>
+      <div className="flex justify-between items-center">
+        <h2 className="text-2xl">Articles</h2>
+        <SaveArticleForm />
+      </div>
+      <div className="mt-10 flex flex-col gap-3">
+        {articles?.map((article) => (
+          <div key={article.id} className="flex justify-between">
+            <ArticleDrawer article={article}>
+              <h3 className="line-clamp-3 cursor-pointer" tabIndex={0}>
+                {article.title}
+              </h3>
+            </ArticleDrawer>
+            <Button
+              color="danger"
+              disabled={
+                deleteArticleMutation.isPending &&
+                deleteArticleMutation.variables.id === article.id
+              }
+              onClick={() =>
+                deleteArticleMutation.mutate({
+                  id: article.id,
+                })
+              }
+            >
+              Delete
+            </Button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
--- a/web/src/app/(home)/layout.tsx
+++ b/web/src/app/(home)/layout.tsx
@@ -0,0 +1,11 @@
+import { Header } from "@/components/Header";
+import { ReactNode } from "react";
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <div className="h-full flex flex-col">
+      <Header />
+      <main className="h-full flex flex-col">{children}</main>
+    </div>
+  );
+}
--- a/web/src/app/(home)/page.tsx
+++ b/web/src/app/(home)/page.tsx
@@ -1,5 +1,6 @@
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
+import { UserArticles } from "./UserArticles";

 export default async function Home() {
  const c = await cookies();
@@ -10,8 +11,8 @@ export default async function Home() {
  }

  return (
-    <div>
-      <h1>archive.local</h1>
+    <div className="container mx-auto mt-4">
+      <UserArticles />
    </div>
  );
 }
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -1 +1,6 @@
@import "tailwindcss";
+
+@theme {
+  --color-accent: #ffe74c;
+  --color-secondary: #333745;
+}
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -0,0 +1,7 @@
+export const Header = () => {
+  return (
+    <header className="py-5 px-4 bg-accent">
+      <h1 className="text-3xl font-semibold text-secondary">archive.local</h1>
+    </header>
+  );
+};
--- a/web/src/components/ui/Button.tsx
+++ b/web/src/components/ui/Button.tsx
@@ -2,22 +2,35 @@ import { clsx } from "clsx";
 import { forwardRef, JSX } from "react";

 const sizeClasses = {
+  small: "py-1 px-2",
  medium: "py-2 px-4",
 };

-export type ButtonProps = JSX.IntrinsicElements["button"] & {
+const colorClasses = {
+  primary:
+    "border-neutral-800 not-disabled:hover:bg-neutral-800 not-disabled:hover:text-white/90",
+  danger:
+    "border-red-500 text-red-600 not-disabled:hover:bg-red-600 not-disabled:hover:text-white/90",
+};
+
+export type ButtonProps = Omit<JSX.IntrinsicElements["button"], "color"> & {
  size?: keyof typeof sizeClasses;
+  color?: keyof typeof colorClasses;
 };

 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ size = "medium", className, children, ...props }, ref) => {
+  (
+    { size = "medium", color = "primary", className, children, ...props },
+    ref,
+  ) => {
    return (
      <button
        ref={ref}
        className={clsx(
-          "border border-neutral-800 rounded-md not-disabled:cursor-pointer not-disabled:hover:bg-neutral-800 not-disabled:hover:text-white/90 disabled:cursor-not-allowed active:scale-95 transition duration-200",
+          "border rounded-md not-disabled:cursor-pointer disabled:cursor-not-allowed active:scale-95 transition duration-200",
          className,
          sizeClasses[size],
+          colorClasses[color],
        )}
        {...props}
      >
--- a/web/src/components/ui/Drawer.tsx
+++ b/web/src/components/ui/Drawer.tsx
@@ -0,0 +1,42 @@
+import { clsx } from "clsx";
+import { ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+export type DrawerProps = {
+  size?: number | string;
+  className?: string;
+  children: ReactNode;
+  open: boolean;
+  onClose: () => void;
+};
+
+export const Drawer = ({
+  size = 1400,
+  className,
+  children,
+  open,
+  onClose,
+}: DrawerProps) => {
+  if (!open) {
+    return null;
+  }
+
+  return createPortal(
+    <div
+      className="bg-neutral-900/90 backdrop-blur-sm fixed inset-0"
+      onPointerDown={onClose}
+    >
+      <div
+        className={clsx(
+          "bg-white fixed top-0 bottom-0 right-0 p-8 rounded-l-4xl w-full",
+          className,
+        )}
+        style={{ maxWidth: size }}
+        onPointerDown={(e) => e.stopPropagation()}
+      >
+        {children}
+      </div>
+    </div>,
+    document.body,
+  );
+};