This issue is for the need for an overall code audit, focusing in particular on:

• Modules etc that could be removed as a result of being ported over from PL blog but not needed here
• Potential barriers to deployment over IPFS

Please separate the results out into their own issues so they're easier to work - thanks!

Right now, formatting blows out on 404 pages:

Can we please replace with the following?

I believe this is the only place where the VuePress-standard "external site" indicators appear. Please remove them; we have so many outbound links for news sites, etc, that they don't make sense within the context of the blog as a whole. Thank you!

We don't actually ever need to get as granular as time of publication on the blog, and the addition of the time picker in the Forestry UI makes the UI itself unwieldy. Looks like we can actually remove this from the Forestry UI:
https://forestry.io/docs/settings/fields/datetime/#options

However, not sure what might need to be done on the back end or existing post pages themselves to keep from breaking things. @jdiogopeixoto, can you please have a look? 🙏

Code from PL blog might take care of this, but test and confirm on all standard social media sites.

Prior to launch, tentatively scheduled for 8 April 2021.

For @jessicaschilling

• Update top-level README.md to reflect latest info: Vuepress specifics, deploy details, maintainership, etc
• Close or migrate any open issues from https://github.com/ipfs/blog/issues
• Make this repo public
• Add standard org-wide issue labels and issue templates
• Confirm RSS feed works as intended (close, but added additional #119 for hotfix)
• Protect staging branch so it can't be accidentally deleted upon merge?
• Confirm Discourse comments display as intended (this should cut over fine as we explicitly included the preview domains in Discourse prefs, but we'll want to remove that after launch). To confirm: blog.ipfs.io, both Fleek preview domains. NOTE that http://127.0.0.1:8080/ipns/blog.ipfs.io/ and http://blog.ipfs.io.ipns.localhost:8080 are being investigated in #80
• Make sure any Hugo redirects are migrated to Vuepress redirects (#93 handles this)
• Ensure all content published to old blog since Feb 2021 has been migrated (NOTE: new posts are scheduled for both 7 and 8 April)
• Make sure Forestry UI link to image crop tool points to prod location
• Update repo description for go-live, not staging, links
• Countly: Duplicate test dashboard for prod (including 404 info)
• Countly: Set up dashboard/project view permissions and weekly email to relevant folks
• Update https://ipfs.io/media/ with press-kit info (@angiemaguire is reviewing ipfs-inactive/website#421)
• Training: @jennwrites, @autonome, @angiemaguire, @emilymvaughan, @achingbrain
• Forestry permissioning: Investigate with @andyschwab whether this can be driven entirely from GitHub auth and groups; add users/roles as needed
• Sync staging and main one last time
• Send internal email and create meeting slide
• Write blog post

For @jdiogopeixoto and/or @zebateira

• Confirm we won't accidentally spam Discourse when we cut over (or remediate)
• Remove ability to write directly to main from Forestry
• Change Fleek CANONICAL_BASE env variable (in both prod and staging) from https://ipfs-blog.on.fleek.co to to https://blog.ipfs.io
• Get Countly working in prod environment
• 404 page: not working at the moment – fleek uses ipfs under the hood, so the 404s only works if we setup it up ipfs-friendly (example: https://github.com/ProtoSchool/protoschool.github.io/pull/550/files)
  • add file ipfs-404.html to the root of the build folder
  • add route /404 instead of rendering it in the unknown route

For others

• Confirm no URIs will break (If everyone can lend a hand with this, would be ideal!)
• DNS switching (@andyschwab):
  • Stage a PR in infra repo for cutting over DNS
  • Merge and confirm after approx 10min
• Move https://github.com/ipfs/blog into ipfs-inactive org (@jessicaschilling will file a support ticket for this; it's not time-critical but let's at least get ticket in at launch time)

Right now, if you drill down to a specific view using search/filter, and then click on the "Blog" link in the header or the "Blog & news" link in the footer, the URL updates to remove query parameters but the cards displayed do not reset. Please fix 😊

To do

Consolidated checklist in this comment summarizes the discussion in the comments underneath ...

Note that this doesn't include font consistency issues ... will take a closer look at those in #36.

• To increase readability of long lines of text, please modify H2 on pages without header images to max out at something similar to this:
  

• To increase readability of long lines of text, please modify body width on individual post pages to something closer to that on the Filecoin blog. This probably means modifying the header width on individual post pages so it doesn't look significantly wider than the body — suggestions welcome on this, but something along this might work (note enlarging hero image to make it feel a little more balanced):
  

• On individual post pages at mobile widths, please add a bit more horizontal margin to the post body area - this looks a little too tight:
  

• Also on individual post pages at mobile widths, please tidy up the chicklets and share links so they don't share a div or word-wrap within chicklets:
  

• Please remove the breadcrumb from the cards page; on individual post pages, add a small subheader for "Blog & news" as in the following:
  

• When links are on a dark blue background, please use #6bc4ce instead of the existing link color.

• Please make visual modifications to the language picker as described in #47.

• On all pages, please change page background to #f1f3f2; on card pages, make cards all white for better card visibility (no need for shadow now). Please don't rip out any of the logic behind identifying blog posts, though; I still suspect we will still need to differentiate these somehow, but let's see what happens in user testing.

• On cards page, now that background is in color, please remove outlines from form fields:
  

• On cards page, please change highlight color to #9ad4db instead of current pink

• In search filter, please add single quotes around "enter" in Press 'enter' to select

• On cards, please rearrange content elements as such:
  

• Also based on the mockup immediately above, please make all chicklets gray and highlight them with ipfs-css charcoal-muted on hover.

• However, please apply this visual treatment for blog post chicklets to make them "special" (sorry this is in a different mockup!)
  

• On cards, please display full card title when hovering on card title (as alt text) so that titles truncated with ellipses can be read in full

• The blueGreen color value used in text links and button backgrounds should be #34797D (understood that isn't in the main ipfs-css set, but teal is not quite WCAG-compliant on the new background noted above).

• On individual blog post pages, please add the same corner radius to the hero image as there is on the cards themselves.

• On individual blog post pages, please de-emphasize tag chicklets by using a lighter background (ipfs-css gray-muted might work out of the box):
  

• Please add visual formatting for code blocks as described in #33 - inline code display is already OK, but still need to match visual formatting for multi-line blocks of code.

We'll never use post author avatars, and they're taking up build time with all the errors. Please remove that logic. 🙏

Get @zebateira and @terichadbourne contributor access to this repo.
Request submitted 25 Feb.

Right now, <code> blocks are in monospaced type, but the sizing is weird relative to body text and there's no color background. Let's borrow from IPFS docs (e.g. https://docs.ipfs.io/install/command-line/#official-distributions ) in terms of:

• colors used
• monospace font used (may be the same as what we're already using?)
• size relationship between code text and body text

We're currently hotlinking to github. Instead, they should be stored in the static directory and served out of IPFS with the rest of the blog.

In the original IA wireframes we'd used size to differentiate between blog post cards (the most important) and other types of cards, but masonry layouts are awkward to build in a bulletproof way and it didn't test great with users either.

Investigate a way to visually differentiate between blog post cards and other types of cards at a glance (most likely background color as a starting point). Bonus points for having an affordance for being able to tell between different types of "other types of cards" - i.e. to be able to spot all the news links or tutorials.

This issue is to bring the visual display of the language picker a little more closely into line with the one on the Filecoin blog at https://filecoin.io/blog/#posts:

• Note it can't be a 1:1 match since the entire site isn't translated -- so rather than display in nav, let's keep displaying in the main page header area
• The below is a rough mockup, but gives an idea about smaller font size, change in wording, and tighter bottom margin:
  

Current status:

• We have font hierarchy and styles carried over from the PL blog, which don't make so much sense in this context (our posts are longer, more complex, contain more code)
• Font set isn't consistent with ipfs-css (i.e. Montserrat headlines, Inter text)
• Looks like there are also some overrides that happened somewhere along the way; we should resolve those per @cwaring against https://github.com/tailwindlabs/tailwindcss-typography (which is already installed?) (moving this into #51)

Let's use this issue to tidy up the font hierarchy and styling overall. Can separate out any highly specific or detailed items into their own issues.

For the newsletter example in the site footer, could we please make this link to the most recent post tagged weekly so it's always up to date?

there are some missing images from https://github.com/ipfs/blog
when bringing back these image, favor placing them in src/.vuepress/public so they can be found by forestry.io 😉

examples:
https://ipfsblog-vuepress.netlify.app/_002-ipscend/
https://ipfsblog-vuepress.netlify.app/weekly-008/

Hi @Ricardo-Silva91 -- wanted to do as much review as I could so you had some stuff to think about when you came back from your holidays! We will probably need to do a really detailed review once you're closer to done, but here are some first questions/requests. Also added #5 with some minor text/CSS edits that were just quicker to address that way ... please feel free to correct any poor code on my part 😊

Thank you so much! This looks awesome and it's so exciting to see it closer to real.

Site-wide: general

• Some stuff needs tweaking for mobile widths, but I think you're already aware of that:

  • Individual blog page headers
  • Main page introductory and search info
  • Footer content

• Please make the favicon an IPFS cube instead of the PL logo 😊 ... can we also please make this tab title "Home | IPFS Blog & News"?
  

Main page: general

• Is it possible for search/sort result views to be reflected in the URL, so a user could share a search?
• It doesn't look like cards appear in reverse-date order across all content types. Can this please be the case?
• On the main page, if we're displaying cards as a grid rather than masonry, we should make them all the same height. Please make max-height the equivalent to (3 lines title + author/date + 1 row tags + 5 lines teaser text).
• We may want to make the breakpoint to go down from 3-cards wide to 2-cards a bigger number; they look cramped at tablet width. Might be worth seeing how this looks with uniform card heights first, though - your ideas?

Main page: introductory text and search info

• In the introductory text at the top of the main page, please make all these icons slightly bigger (to match wireframe), all the same size, and the same color/color hover as page buttons:
  
• RSS isn't implemented yet - just confirming that's on our radar?
• There's still some weird behavior in the search as a whole, but I don't want to dig too deep until you're done ironing the known bugs out 😊
• Please make text "Search for words or #tags" the same size as "All content" here:
  
• In the search results box, border-opacity-10 isn't working for some reason. Do you mind a look? In any case, the border should be the same color as the borders above it for the dropdowns, but slightly wider.
  
• In the search results box, can you please make the following modifications? Example screenshot below.
  • Can tags in the search results info look visually the same as in the search field above them (darker teal, white text, "x" on right - but not the smaller font)?
  • Can tags in the search results please have the # text in them?
  • If 0 results, please add s to result
    

Main page: individualcards

• For author names on cards ...

  • Please remove the profile images (I know this is inconsistent with the PL blog)
  • This might mean you need to add some vertical margin to the line with the author name to make it not look crowded
  • Please make author names clickable, to result in a search view for all items by author.
  • This would mean that for content with multiple authors, it would be multiple clickable authors rather than one author of "John Smith and Jane Doe".
  • Please note that blog posts are the only types of content that should have authors.

• Please make tag chicklets with dashes etc not word-break, and please wrap the chicklet div as a whole to multiple lines if need be:
  

• Please add # to chicklets for tags, and please add a first chicklet for all cards with that card's content type (no #, clickable to a drilldown of all items of that content type). (see wireframe screenshot below)
  

• Please make titles that are longer than 3 lines truncate with ellipses:
  

• On cards, can we please make the "Lorem ipsum" for blog pages just pull the first 5 lines of the blog body, truncated with an ellipses? (see notes above about standard height for what might dictate how many characters)
  

• For blog and news links that don't have a hero image, can we please steal this one from the existing blog? https://blog.ipfs.io/header_images/blog-placeholder.png

Main page: footer

• In the footer newsletter signup, please make the "please send me..." text span the full width of the button/field combo above it:
  

• For the newsletter example, could we please make this link to the most recent post tagged weekly so it's always up to date?
  

Individual blog pages

• On individual blog pages, can we please have tags preceded by # and have them be the same teal color with white text as in the search drilldown on the main page?
  

• On individual blog pages, can links/link hovers be the same color as elsewhere?

• On individual blog pages, can the social icons please all be the same size, and have the same color/color hover as page buttons?

• On individual blog pages, can the social icons link to the appropriate social service as a page share?

• On individual blog pages, can you please remove the author image, and make each author's name clickable to a search as described above for the main page?

Note

One last note about the lazy-load on the main page to follow up on our conversation from the other day: We're not concerned about the footer being difficult to reach in lazy-load mode, except for the newsletter signup material - because that's linked to from the introductory text on the main page. Is it possible to make sure that a user who clicks the newsletter signup link in that introductory text, while in lazy-load mode, actually gets to the newsletter signup section of the footer?

Currently we don't have any placeholder for the lazy images, we just load an empty space. @cwaring suggested we should use a greybox loading placeholder, which I agree.
We should consider this in the near future.

As illustrated in the /2020-06-26-go-ipfs-0-6-0/ blog post, long code strings will break out of margins:

IPFS CIDs will always cause this problem, so please have these scroll horizontally in their own div (or similar solution).

Remove translation toggle from listing page and set a link at the top of the content of multilanguage page to the other translations.

• remove LanguageSelector component from Blog
• add forestry frontmatter field for alternative languages (maybe try a array with a dropdown selector if possible 🤔)
• in BlogPost check frontmatter for alternativer languages and add new version of LanguageSelector before Content.

Per @atopal request, we need to add some form of site performance instrumentation to (at minimum) the primary IPFS websites going forward:

• New blog.ipfs.io
• Existing blog.ipfs.io (this may simply be some sort of baseline measurement, considering we are so close to relaunch)
• Existing ipfs.io (for comparison purposes)
• Replatformed ipfs.io
• docs.ipfs.io

Kicking this work off in this repo, since we're already doing a lot of pre-launch work on the blog.

@zebateira: Can you please research potential approaches? Some notes:

• @atopal is partial to SpeedCurve, but it's a commercial service with whom we don't currently have an account, so we should evaluate the larger landscape
• This is likely to scale to all PL websites, so a larger scope may be a cost consideration if we utilize a commercial service
• Data would be repurposed in our reporting dashboards, so bonus points for a programmatic way of getting it into Observable

@atopal: Please edit this comment or add additional comments for any other specs or notes. I'm tentatively labeling this as P2, on the assumption that it's acceptable to work on this post-blog-launch as long as payload problems in #41 are resolved for launch — but please revise if you feel this is needed sooner.

cc @terichadbourne @johnnymatthews @yusefnapora @johndmulhausen for context and/or discussion.

One major pain point in the old blog is that images don't scale/crop in elegant ways, leading to awkward display like https://ipfsblog-vuepress.netlify.app/_099-identity-ipfs-ion/. Would prefer not to crop automatically so we don't see things like that example, but this probably means two things:

• Keep the same aspect ratio for the card and for the hero image
• Allow the user to reposition/crop the photo to fit that aspect ratio at the time of upload from within the Forestry form interface

Originally discussed in #6 (comment).

It would be awesome if GitHub @ mentions were auto-linked to GitHub profiles in blog posts. I'm hoping there's an existing plugin but there likely isn't.

On Firefox mobile, the website is responsive momentarily, but then it switches to "desktop" mode.
You reproduce this on the desktop only if you use the mobile device option on the dev tools.

@jessicaschilling do we have any percentage on the number of mobile firefox users on the currently deployed ipfs blog?
That would help drive the decision to wait for this to be fixed before launch or not if the number of users are really small.
In any case we can investigate what is the issue now.

The org is standardizing on use of a private instance of Countly for site analytics (rather than old blog's use of Google Analytics). @cwaring indicates that we'll need to write a manual analytics plugin to add countly integration.

Forestry Instant Previews have never worked reliably; either they hang on startup, shut down at inconvenient times, or flat out don't work. @jdiogopeixoto, can you please investigate if we can get these working? Would be much more convenient to have instant updates than to wait for a Fleek build.

Confirmed with @andyschwab that the plan is to deploy the new blog via Fleek rather than our own cluster. Next steps on this are as follows ...

• @jdiogopeixoto, can you please set up a free Fleek account for deploying this repo? (Unfortunately, Fleek's permissioning isn't granular enough at the moment for me to be able to add you to the PL Fleek without giving you admin access to ALL PL sites, sigh.)
• We'll need to set it up with main as the production branch, but I believe also to build deploy previews for all pull requests so we can preview other branches (see below).
• Please set up Forestry to write to a new staging branch instead of main — I think that Fleek will still build deploy previews for changes made to staging, but we will need to confirm. (This staging vs main is the methodology currently being used for the Filecoin blog, so we want to be consistent.)

Once we confirm the above works (main successfully deployed via Fleek, plus updates to staging being visible to blog post authors), will need to do the following:

• Move Fleek config over to PL Fleek account (could use .fleek.json config method)
• Remove existing Netlify deploy workflow (I believe @andyschwab has access to this; I don't)

Now that there's an official Tailwind typography plugin, let's move the blog's current use of tailwindcss-typography over to the newer replacement. May not be necessary for initial site launch, but should definitely happen in conjunction with any visual rebranding work.

Seeing a strange visual bug when a blog post has many authors:

Tags are not working correctly:

• When clicking on a tag inside a card it always adds the tag to the filter and removes the existing ones
• When removing a tag from the results it doesn't update the multiselect
• When clicking on a tag inside a blog post with multiple tags then going back to the blog post (using the browser back button) and clicking on a different one isn't setting the filter correctly

The search area is not responsive, we need to change it. There are also some margins inside the top text that make it not being aligned, we can improve that.

As we get closer to site launch and get more open questions closed, we'll need to add how-to guidance for content creators (both core team and external contributors). This issue is a holding place for storing those:

• Update top-level README.md with VuePress-specific info deferring into issue #22 for bulk of work, but will trim down readme in the interim to avoid confusion

• Make canonical tags list easily accessible: in repo readme and in Forestry edit pages

• Add explanatory notes in Forestry edit pages wherever appropriate, particularly for image naming guidance (see #10 (comment) for context)
  

• Remind post authors that header art shouldn't have too many words, to avoid conflicting with card titles

• Reword image-crop instructions

Please check and modify as needed all breakpoints for the footer for awkward visuals, particularly the newsletter entry div:

If a post has no tags, PostMeta component doesn't render the category chicklet

Investigate Forestry permissioning overall and how we will need to solve for three problems:

• How to draft blog posts in a staging environment without any danger of accidentally committing to main prior to approval
• How approval workflow for draft posts should work
• The best way for readers to submit links (news, tutorials, etc): can this be done within Forestry or will we need to create something to automatically generate a PR using a third-party form tool?

If possible, let's add a field in the Forestry blog post template to account for redirects/aliases. Please see https://github.com/ipfs/blog/edit/master/content/post/125-go-ipfs-0-8-0.md for an example of how this is done in Hugo frontmatter.

Currently the blog index is loading over 5.2mb of JS which is blocking the site rendering for nearly 10s. This payload needs to be significantly reduced to meet performance standards and introduce async lazy loading for additional page meta.

related: #40 #30

Simply adding our two Fleek subdomains to Discourse's "Allowed Hosts" for embeds should "just work" — as it has for the old Netlify deploy as well as our existing production site hosted on our IPFS cluster ... unfortunately that seems not to be the case. Can you please investigate? 🙏

Afraid this is super unclear, and would welcome an investigation by @zebateira and/or @jdiogopeixoto ...

Right now it looks like the Discourse comments plugin is automatically generating blog posts at https://discuss.ipfs.io/c/news/blog-entries/20/l/latest . Can we be certain we're not going to spam the forums when we cut the site over?

Right now, inline images on posts are not centered.

We should either center via site-wide CSS or add docs for consistent and best practice centering.

Then update all posts that might have either post-specific centering CSS.

Post dates appear to be displaying a day early in cards.

However, the date appears correctly both in frontmatter and in Forestry:

header images added like https://app.forestry.io/sites/o1m1vi-99lz4lw/#/pages/src-_blog-weekly-112-welcome-to-ipfs-weekly-112-md/

will get an extra /header_images/ on LazyImage src path

Add new VideoCard component on frontend.

VuePress generates a page/path for each markdown file and all those paths generated are being added to the sitemap.
For the markdown files that we are using to link videos, tutorials, etc... we don't want them being added to the sitemap - because those paths shouldn't exist.

So the work here would be to remove those paths from the sitemap and, if possible, remove them from being generated at all.

Currently the index page is not accessible without Javascript enabled removing all the SEO and performance benefits of using VuePress to render the application.

This is a blocker for migrating to production.

Right now comments do not load for users of IPFS Companion due to DNSLink redirect.
I think we should at least whitelist the default local gateway, it will probably fix it for most users.

Not sure who has the admin on http://discuss.ipfs.io/, but AFAIK we just need to whitelist http://localhost:8080/ipns/blog.ipfs.io/ http://blog.ipfs.io.ipns.localhost:8080 as a valid embed URL.

For link content types, can we please add the ability to upload an image for the card, as well as specify a separate fallback image for each content type if none is uploaded?

As I understand it, the use of a separate directory for each blog post in the original site was to accommodate Hugo's limitations as a platform. Furthermore, if we store all images in a single public directory as discussed in #13 (and name images accordingly), there doesn't seem to be a need for a separate directory for each post at all:

• not useful for keeping images organized
• no impact on the URL structure, since that's specified in each post's frontmatter

Two requests for this issue:

1. Can others confirm whether my statements above are correct?
2. If so, can we please bulk-move existing blog posts out of their individual folders?

Members of the public will be encouraged to submit links for all content types except blog posts. To achieve that, we'll need a form with the following fields:

• Link
• Title
• Date (auto-filled to current date)
• Card image (optional)
• Tags (optional)
• Short description (optional)
  The result should be a PR that a core team member can modify and/or merge.

When this is done, add a link to the form at the top of the main blog page as indicated in the wireframe.