Add Shipping log section with the last 3 posts from the blog

Pabl0cks commented 1 month ago

Had to build the widget for it, tried to follow the same logic to fetch the data and style it with Chakra.

A couple of notes:

Initially tried coding the data fetching in the front but I was getting CORS errors (because of localhost I believe), so moved it to the server just in case.
Using substack RSS to fetch the posts, I'm assuming that the RSS will continue being ordered by date, but maybe I should add a manual order by date just in case it changes in the future?

We could also add a subscribe widget from substack below the posts if we see it interesting:

Screenshots:

vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
buidlguidl-v3	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 21, 2024 11:12am

carletex commented 1 month ago

Thanks for experimenting with this @Pabl0cks !!

Just a general comment about this section: I don't think it adds much value as it's displayed right now. The title & picture are almost the same on every post, it just changes the description a bit, so I don't really see the point of the section itself.

Like for me, A more valuable section will be something like:

Image for the whole Newsletter + Title (🛳 BG Shipping Log)
Sign up form
Maybe a link to past issues in a more "link manner" (vs card). 1, 2, 3 entries or whatever.

What do you all think?

Maybe this is something we should have talked before, but I personally didn't pay much attention to it when Andrea sent it, since I was focused in the other parts. Sorryt!

(Note: the Vercel deployment won't work since the backend is deployed on GAE)

technophile-04 commented 1 month ago

TYSM @Pabl0cks !! Really nice work !!

The title & picture are almost the same on every post, it just changes the description a bit, so I don't really see the point of the section itself. Like for me, A more valuable section will be something like:

Image for the whole Newsletter + Title (🛳 BG Shipping Log)

Sign up form

Maybe a link to past issues in a more "link manner" (vs card). 1, 2, 3 entries or whatever.

Visually I think it looks great, but totally agree with these points and makes more sense to have single section highlighting the main things

Pabl0cks commented 1 month ago

Thank you for the feedback! 🙌♥

The title & picture are almost the same on every post, it just changes the description a bit, so I don't really see the point of the section itself.

Like for me, A more valuable section will be something like:

Image for the whole Newsletter + Title (🛳 BG Shipping Log)

Sign up form

Maybe a link to past issues in a more "link manner" (vs card). 1, 2, 3 entries or whatever.

💯 Agree, cards feels too repetitive with their current content. Will talk with Andrea to create a new version of the section.

andrealbiac commented 1 month ago

Posting the design updates here too:

Captura de pantalla 2024-05-22 a las 12 14 21

Captura de pantalla 2024-05-22 a las 12 19 27

I think I prefer the second one, with the submission form below the picture, cause it's a bit more compact and the info is more organised (to my eye) ✌🏻

Pabl0cks commented 1 month ago

Thanks Andrea!

I think I prefer the second one, with the submission form below the picture, cause it's a bit more compact and the info is more organised (to my eye) ✌🏻

Started working yesterday on this. I'm afraid it won't be possible to tweak styles from Substack (there are some technical limitations with styling when you are loading external websites, if I understood correctly from <a href="https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe">link1</a> or <a href="https://stackoverflow.com/questions/6494721/override-body-style-for-content-in-an-iframe">link2</a>) All I found were hacky workarounds with jquery that I'm not confident they would even work, and probably not worth it, even if they do.</p> <p>So 2nd option seem the best to me too, since we won't be able to get rid of the watermark and legal notice.</p> <p>Haven't pushed the changes, still working on the RWD. This is how it's looking on laptop:</p> <p><img src="https://github.com/scaffold-eth/buidlguidl-v3/assets/55535804/1bb4f1f9-7b47-41ca-9a43-4b9767656ddf" alt="image" /></p> <p>The problem is since I can't change embedded background, in dark mode it must be white also 😬</p> <p><img src="https://github.com/scaffold-eth/buidlguidl-v3/assets/55535804/315c193b-daee-4087-a94d-e5310f5ac78e" alt="image" /></p> <p>What do you think about that? Should we skip adding the embedded subscribe widget?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/andrealbiac"><img src="https://avatars.githubusercontent.com/u/137904915?v=4" />andrealbiac</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <p>Hey, sorry for the late reply It's a shame we can't modify it in the end! And that they don't have a dark mode version :/</p> <p>I agree in that case that design is the best option, to me it looks very good in light mode. But what would be the other option if we want to avoid the dark mode problem? To have our own button instead of the widget + that takes you to the substack page?</p> <p>Also curious to know others opinions :)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Pabl0cks"><img src="https://avatars.githubusercontent.com/u/55535804?v=4" />Pabl0cks</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <blockquote> <p>I agree in that case that design is the best option, to me it looks very good in light mode. But what would be the other option if we want to avoid the dark mode problem? To have our own button instead of the widget + that takes you to the substack page?</p> </blockquote> <p>Yeah! 😥 Probably a button with a CTA to go to substack to subscribe. "Subscribe in Substack", "Open Substack" or something similar.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/andrealbiac"><img src="https://avatars.githubusercontent.com/u/137904915?v=4" />andrealbiac</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <p>Yeah, it's a pity but I guess that's the best option if we can't solve the dark mode issue.. Otherwise it's a bit weird that only that section stays in white no?</p> <p>To me 'Subscribe in Substack' or just 'Subscribe' is good for the button 🙌🏻</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

scaffold-eth / buidlguidl-v3

Add Shipping log section with the last 3 posts from the blog #97