new blog admin site

[ComputelessComputer]

some context:

• we write our blog in mdx. all the files are stored in: https://github.com/fastrepl/hyprnote/tree/main/apps/web/content
• our blog is a tanstack start app that was custom built to fit into the website’s tone and manner
• we use content collections to define the schema of the content. the config file is here: https://github.com/fastrepl/hyprnote/blob/main/apps/web/content-collections.ts

what we need:

• content admin web app https://github.com/fastrepl/hyprnote/tree/main/apps/web/src/routes/admin
  • an easy-to-use editor for non-technical users
  • a dropbox-like media library for our marketing assets
  • when attaching an image in the editor or selecting a cover image, the image can be fetched from media library or newly uploaded
• (additional) google docs add-on #3031

---

web app

/admin

• if not authorized, redirects to /auth (credentials from /auth should also work)
  • github oauth: we were allowing email and google oauth too - let's only allow github oauth via query param
• if authorized, redirects to /admin/collections

/admin/collections

• fetch blog posts (=articles) and show list of them in the left sidebar - do it smartly as it causes lags
  • sort them in descending manner
• create new post from button at the bottom of left sidebar
  • this opens up empty left sidebar item that's just a textfield
  • redirects to /admin/collections/$slug once slug is decided from the textfield
• fetch mdx content
• parse frontmatter
• parse markdown and custom components like Image, CtaCard, ...
  • render in tiptap editor
• show preview for how it would look like in an actual blog
• if markdown content is empty, show import from google docs button - this might help: https://github.com/mr0grog/google-docs-to-markdown
  • parse only the tab content that is defined in query param (if none - the first tab only) they have tabs and they have different query params (tab=t.0#heading=h.urffyea5adn5 vs tab=t.qr3x2f7ta5ra) - might also have params for headings but doesnt matter.
  • the docs title should be parsed into meta_title and display_title
  • images are downloaded and then uploaded to supabase

/admin/media

• basically a media library - CRUD needed
• two tab types - asset preview and folder
  • asset preview shows image or video/audio player
  • folder shows the nested structure in that path in a grid view. grid is max 4 in cols but responsive.
    • grid item is a preview of asset. hovering over it shows title and who uploaded it in the header. copy, download replace, delete button in the footer.

---

ui

collections

layout for collections - already implemented
[[Content Admin (title)] [Media (link to /admin/media)] Welcome [sign out]]
[Sidebar][Main]

layout for Sidebar
[Searchbar]
[Files - flex 1; show mdx files under https://github.com/fastrepl/hyprnote/tree/main/apps/web/content/articles, drag-and-drop mdx files only]
[Add]

layout for Main
[Tabs]
[[Breadcrumbs - flex 1] [Sync button - rotates when saving][Publish button - to set published: true]]
[Body]

or without mdx content
[[Breadcrumbs - flex 1] [Import from Google Docs - this switches Breadcrumbs to input field]]

layout for Body (default)
[editor][metadata panel]

layout for Body (preview)
[editor with metadata panel on top][preview]

media

layout for media - needs to be improved
[[Content Admin (title)] [Media (link to /admin/media) - highlighted] Welcome [sign out]]
[Sidebar][Main]

layout for Sidebar
[Searchbar]
[Files - flex 1; dirtree ui, show nested structure under blog bucket, drag-and-drop image, video, audio files only]
[Add]

layout for Main
[Tabs]
[[Breadcrumbs - flex 1] [X selected][Download][Delete]]
[Body]

layout for Body
[Image, Video, Audio preview] or [Grid view of assets, if tab type is folder view]