Deprecated! Wrote some code to bundle svelte with websocket and rest connections to an api hosted out of one image, made this figma and this storybook of ui components, but it was too ambitious. The goal was to build a tool with UI that would render notion posts to markdown, handle asset management / uploads, and export posts to my old hexo site

Instead, I opted to use some existing tools to use notion as a CMS directly. - Blog

Notion Publish Tool - publish.mitchinson.dev

A publishing web app for mirroring Notion posts to mitchinson.dev

Includes:

• Asset uploading to Cloudinary CDN
• Dev.to cross posting
• Front end for initiating builds @ publish.mitchinson.dev
• The beginnings of a svelte ui component library - storybook - figma
  • (Referencing IBM Design Language)

Up to date motiviations, technical goals, and todo list available on this notion post.

Created with bmitchinson/ts-node-starter

Svelte code adapted from the TS config sveltejs/template

Built with

• Svelte
• Websockets
• Express
• Typescript
• Docker
• Notion, Dev.to, and Cloudinary API

Design

• Page / Component Design in Figma
  • (Ripped off from the IBM Component Library)
  • Hit the "F" in the upper left to flip through pages
• Storybook for component preview hosted on Github Pages

Testing

• API is unit tested with Jest + e2e tested with cypress.
• UI is tested in the e2e layer. I'd like to unit test components but, it's been a challenge to mock the web socket that sets component contents. Components mostly display information from the socket, they don't have much interactivity.
• There's also UI response mocks in storybook, but those tests have no automation. Visual regression testing is difficult with timed mock responses.

Getting Started

Alter .gitmodules to clone your own hexo site to the hexo-site directory. Then use git submodule update --init --recursive to pull down the modules.

Your hexo site should be configured to use hexo-deploy with a git PAT token. See my site as an example.

• npm run storybook opens storybook to view UI components in isolation.

  • If sass import errors, delete cached dist and storybook_build
  • Close any browser tabs that may have cached the storybook page and then quit browser, reopen

• npm run watch opens api in watch mode. manual page reloads are required to view svelte changes.

Links used to learn:

• MDN - Svelte Store
• MDN - Svelte: Reactivity, lifecycle, accessibility

Dependency Maintenance

• npx storybook upgrade will attempt to upgrade all @storybook/xyz packages as needed