Create a sample Facebook Conversation and style it (daisyui)

[nickpreston24]

• [x] Go to dasiyui.com and copy paste their sample
• [ ] Include a sample-comments.json file and load it as a module, if you can. Then render it using Alpine.js
• [ ] We should be able to make the reading experience a lot easier than FB makes is (like shifting the current thread to be front-and-center and auto-expanding what would normally be 'see more'. Anime.js will be instrumental in any visual indicators we might need, or anything like transitions.
• [ ] Load sample data from backend via Postgres or MySQL (Nick should be able to do this). Eventually, I (Nick) will replace the alpine vars with C# vars and HTMX snippets.

[Braden-Preston]

These conversations are small enough to where they can be rendered outright. We wouldn't have to add "see more" or anything else like that.

Imagine a PHP snippet which hits an API endpoint and dynamically returns HTML content for that conversation at render time. This is how Ronnie does the A-Z teachings for example.

I guess you could also go a step further and have just your CRON job rebuild whole WP pages when the convos they are generated from are updated via the scrapper. Then the result is fully static.

My thought is build a scoped Tailwind stylesheet to render conversations of this format on TPOT.

[nickpreston24]

"We wouldn't have to add "see more" or anything else like that."

Agreed. Having to click 100 times just to read a conversation is dumb and so is Facebook.

"I guess you could also go a step further and have just your CRON job rebuild whole WP pages when the convos they are generated from are updated via the scrapper. Then the result is fully static.

My thought is build a scoped Tailwind stylesheet to render conversations of this format on TPOT."

Really anything will work. I can in a few minutes turn every conversation 'node' in to a tree and generate from there. My real concern and goal with this ticket was to eliminate the need for extra clicking.

Hmmm... scoped TW sheet. Sounds cool, but ikd what you mean by it. If you mean something like alternation of the colors from different users, then that's a superb idea and I'm glad I thought of it! :laughing:

[Braden-Preston]

Scoped, as element scoping, in this case the styles of any element within a <div id="fb-comments"></div> would never bleed out or interfere with the main page:

#fb-comments .article {
    @apply bg-gray-200 p-4 rounded-full
}
#fb-comments .comment {
    @apply bg-gray-100 pl-7 relative flex flex-row
}

Didn't think of alternating colors. I guess it depends if we are rendering the user avatar or not. If we aren't, then maybe colors are the way to identify the speakers.

[nickpreston24]

Gotcha, and good idea.

Here's a chat example from Daisy.

If you feel the need to go ham, I have a poor man's storybook for this at Comments_Sample.html