Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(blog): building a blog environment using honox #11

Open
wants to merge 30 commits into
base: main
Choose a base branch
from

Conversation

yossydev
Copy link
Collaborator

I don't know how this repository operates, so you don't have to merge this PR right away!
You can use this PR to handle all of your blogging needs, or you can merge it first! I leave it up to you!

Overview

At first, I tried to build the environment.
I ran npm create hono@latest, pnpm install && pnpm dev and confirmed that http://localhost:5173/ is up and running!

Consultation

Should I make it possible to run blog with docker?
Personally, I don't think it's particularly necessary to run it with docker, so I haven't made any special settings. If it is necessary, I will respond!

Related

@flipvh
Copy link
Contributor

flipvh commented Mar 19, 2024

Hi Yossy, supercool! Yes lets continue in this PR and see what happens. Cella is still changing a lot so it might make sense to just work in a clean hono environment without cella for now. When we have a working proof of concept, we take the next step into making it work inside cella.

@yossydev
Copy link
Collaborator Author

Hi flipvh! Roger that! I'll continue this PR as is!
I will try to set up the environment needed to create the site and also create a simple UI using https://www.loglib.io/blog as a reference!

@flipvh
Copy link
Contributor

flipvh commented Mar 20, 2024

About your question in the issue concerning hosting. Yes for hosting we currently use render.com. It hosts all that we need: db, static site, our api and our tus server for file uploading. However, I'd like to also try cloudflare and perhaps even fly.io. But didn't find time for that yet

@yossydev
Copy link
Collaborator Author

About your question in the issue concerning hosting. Yes for hosting we currently use render.com. It hosts all that we need: db, static site, our api and our tus server for file uploading. However, I'd like to also try cloudflare and perhaps even fly.io. But didn't find time for that yet

Understood! I'm not in a hurry at all, so take your time! Thanks for letting me know! 🙇‍♂️

@yossydev
Copy link
Collaborator Author

I was looking around a bit at things at hand and found that shadcn/ui depends on react, so I was able to get it to work, although I had to configure it a bit to use HonoX!

https://github.com/yossydev/honox-shadcn

@yossydev
Copy link
Collaborator Author

yossydev commented Mar 22, 2024

I was able to get the blog to display in SSR! I think this completes the environment setup area!
One concern is that I would have liked to do it using SSG if I could, but once I got the error TypeError: __vite_ssr_import_0__.jsxDEV is not a function and the mdx is not properly parsed, I am now using SSR. I will look into this when I have time!

Next I'm going to work on the UI area! It's a simple one!

@yossydev
Copy link
Collaborator Author

Hi @flipvh👋

I will share some visuals for the blog design later.
comment: #10 (comment)

Have you decided on a design for your blog yet? 👀

@flipvh
Copy link
Contributor

flipvh commented Mar 28, 2024

thnks for the reminder. I borrowed the style from a friend a bit (https://mave.io).

The wrapper elements are basically the same as those used for the pages in /frontend/src/modules/marketing. For example https://cellajs.com/accessibility shows this. You can see the main wrapping component that is used for that page here: https://github.com/cellajs/cella/blob/main/frontend/src/modules/common/public-page.tsx

See the attachments
overview
post

@flipvh
Copy link
Contributor

flipvh commented Mar 28, 2024

Hope that helps @yossydev! let me know if you need more or have questions! PS: did you manage to get cella running on your local machine? We are looking for feedback on how to make this more convenient or easy. Exciting!

@yossydev
Copy link
Collaborator Author

yossydev commented Mar 29, 2024

Hi @flipvh 👋

Thank you, I will try to get a copy of the article! Now that I have the UI, all I have to do is make it! It helps!
comment: #11 (comment)

I built the environment first and didn't touch the rest! 🙏
I will try to touch it and if I find anything I will definitely let you know! I want to make cellajs better too!
comment: #11 (comment)

@yossydev
Copy link
Collaborator Author

yossydev commented Apr 1, 2024

I'm working on an implementation, but I'm afraid that if I try to use the components in /frontend, I'll end up with a lot of packages that depend on it, and that will pretty much eliminate all the goodness of HonoX.
So I think I'll just refer to the style. However, I'm a little concerned that this will result in two components with similar styles, which will reduce maintainability.

I'll also try to read some more code in /frontend. If I understand more of the cellajs philosophy, can I contribute to the blog as well as other parts of the site?

@yossydev
Copy link
Collaborator Author

yossydev commented Apr 1, 2024

Hi @flipvh 👋

I'm trying to launch cellajs, but I'm encountering an error when using docker. Do you know what could be the cause of this? I'm trying to run pnpm run docker without making any edits on the main branch. The first method of pnpm install didn't work for me because I'm using mise instead of Volta for node version management.

> [email protected] docker /Users/yy/Desktop/cella
> docker-compose --env-file env/.env up

[+] Running 4/0
 ✔ Container db        Created                                                                                                                                                                                                          0.0s
 ✔ Container frontend  Created                                                                                                                                                                                                          0.0s
 ✔ Container tus       Created                                                                                                                                                                                                          0.0s
 ✔ Container backend   Created                                                                                                                                                                                                          0.0s
Attaching to backend, db, frontend, tus
db        |
db        | PostgreSQL Database directory appears to contain a database; Skipping initialization
db        |
db        | 2024-04-01 16:10:36.435 UTC [1] LOG:  starting PostgreSQL 16.2 (Debian 16.2-1.pgdg120+2) on aarch64-unknown-linux-gnu, compiled by gcc (Debian 12.2.0-14) 12.2.0, 64-bit
db        | 2024-04-01 16:10:36.435 UTC [1] LOG:  listening on IPv4 address "0.0.0.0", port 5432
db        | 2024-04-01 16:10:36.435 UTC [1] LOG:  listening on IPv6 address "::", port 5432
db        | 2024-04-01 16:10:36.438 UTC [1] LOG:  listening on Unix socket "/var/run/postgresql/.s.PGSQL.5432"
db        | 2024-04-01 16:10:36.444 UTC [29] LOG:  database system was shut down at 2024-04-01 16:09:55 UTC
db        | 2024-04-01 16:10:36.449 UTC [1] LOG:  database system is ready to accept connections
tus       |
tus       | > [email protected] dev /app/tus
tus       | > NODE_ENV=development tsup --watch --onSuccess "tsx dist/index.cjs"
tus       |
frontend  |
frontend  | > [email protected] dev /app/frontend
frontend  | > NODE_ENV=development vite --mode development
frontend  |
frontend  | node:internal/modules/cjs/loader:1147
frontend  |   throw err;
frontend  |   ^
frontend  |
frontend  | Error: Cannot find module '/app/frontend/node_modules/vite/bin/vite.js'
frontend  |     at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
frontend  |     at Module._load (node:internal/modules/cjs/loader:985:27)
frontend  |     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
frontend  |     at node:internal/main/run_main_module:28:49 {
frontend  |   code: 'MODULE_NOT_FOUND',
frontend  |   requireStack: []
frontend  | }
frontend  |
frontend  | Node.js v20.11.1
frontend  |  ELIFECYCLE  Command failed with exit code 1.
backend   |
backend   | > [email protected] migrate:script /app/backend
backend   | > tsx dist/src/db/migrate.cjs
backend   |
backend   | node:internal/modules/cjs/loader:1147
backend   |   throw err;
backend   |   ^
backend   |
backend   | Error: Cannot find module '/app/backend/node_modules/tsx/dist/cli.mjs'
backend   |     at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
backend   |     at Module._load (node:internal/modules/cjs/loader:985:27)
backend   |     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
backend   |     at node:internal/main/run_main_module:28:49 {
backend   |   code: 'MODULE_NOT_FOUND',
backend   |   requireStack: []
backend   | }
backend   |
backend   | Node.js v20.11.1
backend   |  ELIFECYCLE  Command failed with exit code 1.
frontend exited with code 0
tus       | CLI Building entry: src/index.ts
tus       | CLI Using tsconfig: tsconfig.json
tus       | CLI tsup v8.0.2
tus       | CLI Using tsup config: /app/tus/tsup.config.ts
tus       | CLI Running in watch mode
tus       | CLI Target: es2020
tus       | CLI Cleaning output folder
tus       | CJS Build start
tus       | CJS dist/index.cjs     768.00 B
tus       | CJS dist/index.cjs.map 1.08 KB
tus       | CJS ⚡️ Build success in 25ms
tus       | CLI Watching for changes in "."
tus       | CLI Ignoring changes in "**/{.git,node_modules}/**" | "dist"

@flipvh
Copy link
Contributor

flipvh commented Apr 2, 2024

Hi @yossydev let me check it out and thnks for your interest in cella. It would be great if you can help us out with cella itself too if you see opportunities there. Actually, we don't use Docker ourselves so its a bit easy to forget about checking if that flow still works. But I will do so now. I also plan to support a serverless Postgres solution ( like Neon or Supabase) so it becomes easier to just install without having to run postgres locally.

@yossydev
Copy link
Collaborator Author

yossydev commented Apr 3, 2024

Hi @flipvh 👋

Actually, we don't use Docker ourselves so its a bit easy to forget about checking if that flow still works. But I will do so now. I also plan to support a serverless Postgres solution ( like Neon or Supabase) so it becomes easier to just install without having to run postgres locally.

I see! I understand! If there is anything I can do to help, I will contribute to cellajs as well!

@yossydev
Copy link
Collaborator Author

yossydev commented Apr 3, 2024

Hi @flipvh 👋

This is a consultation, but what about DI the logic of /frontend components to be received by props? (so called container/presentation way of making it).
I think doing this would allow testing with storybooks and make cellajs blogging much easier!

Currently, it depends on various libraries, especially the dependency on tanstack-router is a bit troublesome, and HonoX is not a good match since it is file system routing. I'm thinking that if things stay as they are, I'll need to create two components with the same UI.

I feel like a little bit of test code would make it a better template.

@flipvh
Copy link
Contributor

flipvh commented Apr 3, 2024

Hi @yossydev that sounds interesting. To be sure I understand correctly can you give small examples?

Yes, testing is on our roadmap, we are indeed looking at storybook, vitest and playwright. We currently use pivotal tracker to manage issues/tickets, you can see a story about starting with testing here: https://www.pivotaltracker.com/story/show/186816158

And about storybook I am following this PR: shadcn-ui/ui#1561

Thanks!!

@yossydev
Copy link
Collaborator Author

yossydev commented Apr 3, 2024

OK, I'll put out a PR later!

@yossydev
Copy link
Collaborator Author

yossydev commented Apr 6, 2024

Hi @flipvh 👋
I was talking about writing a storybook the other day and trying things out, but it seemed quite complicated and time-consuming, so I decided to make a blog first!

And once I've done that, I've got the look and feel of the home page! The code is not very maintainable, so I'll fix that later!

Next, I want to make a blog detail page, but if Hono's react-renderer middleware doesn't seem to support nested layout, I'll make a PR on the Hono side, so please wait a bit! It shouldn't be that difficult though!

Sorry for the late implementation!

localhost_5173_

↑ This is the top page UI we created!

@flipvh
Copy link
Contributor

flipvh commented Apr 6, 2024

That looks like great progress. Well done!

@yossydev
Copy link
Collaborator Author

Nested Layout in react-renderer implemented in hono's middleware!(https://github.com/honojs/middleware/releases/tag/%40hono%2Freact-renderer%400.2.0)
And I actually used it on this blog and it worked! This blog will probably be ready this weekend!

@flipvh
Copy link
Contributor

flipvh commented Apr 22, 2024

No rush @yossydev, but thanks for the update!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants