Overview

Create component, that lists itmes that are related based on the arguments passed.

ITEMS == Articles (Stray) and the Episodes

Input:

• List of tags.
• Number of items to list.
• article to be excluded

Usually it'll list 3/4 items, but that should be configurable.

Algorithm

1. Filter items that contain at least one tag included in the provided list.
2. Those that contain more tags from the list should appear first.
3. When there are no matching results, show random or recent three articles.
4. When there is article being excluded, it should not appear under any conditions. The reason is, that this component will be shown mostly in the sidebar or below the article content, and we don't want to see "Related" articles listing the currently visited one.

Overview

When we visit the discussions page on any of the episodes directly, we'll see the empty page.

1. In the first moment you can see that the default (read) view is loaded.
2. Then the content disappears, but the comments section does not appear.
3. It works well in development.
4. When you load content properly, but you click on navigation links the page is scrolled to the top. Please prevent that from happening, so there is a smooth transition between the article content, but it doesn't affect page scroll.

Steps to reproduce:

1. https://hanamimastery.com/episodes/9-guide-to-models-in-hanami-and-rom?view=discuss

Dev notes

• Because our page is generated on build time, there is no easy way to inform frontend that we do have to use getStaticPaths function, but the server cannot know about possible query parameters. This is why we did the monkeyPatch, using the router() and parsing the query directly, however it doesn't work properly in the pre-generated HTML documents.

Possible solutions:

• Either fix the loading of the discussions content
• Or replace the /episodes/:slug/?view=discussions with /episodes/:slug/:view, where view is a discussion page that can be easily generated on the build time.

Currently all the episodes, are marked as authored by Sebastian Wilgosz. We don't want that.

We already have a data/team folder, where we can add author's information.

Read these information from md file, and include in articles, dynamically.

Example:

https://github.com/swilgosz/hanamimastery/tree/master/data/episodes/33-semantic-versioning.md

uses author: "fiachetti" as the author's definition.

1. Show author's information

Based on this, author information should be visible on the article's page

Add by <a href="/authors/fiachetti">Federico Iachetti</a> annotation, and the same for other authors in the system.

2. Link Author's information

Create a basic author's page, that includes:

1. Basic information about the author, with social media linked.
2. List of articles/episodes published by this author.
3. Add support for avatars, including default avatar in case no avatar is present.

3. Update article's metadata

Make sure that all the metadata (og:author) points to the correct author.

Overview

I want the articles content to be readable across services, but the typography is not perfect for mobile nor desktop devices.

• Headers are too big, in contrast to text,
• Quotes are not styled completely
• Margins between paragraphs, headers, lists and images could be improved

Todo

Update our typography styles to make articles easier to read and look better in general - maybe some pre-configured CSS templates could be applied?

Overview

Implement automatic RSS feed generation.

Todo:

• Feedly should load content
• Ruby Land sources should not return error: http://rubyland.news/sources
• Publication date should be recognized properly
• The descriptions should be loaded properly.
• The feed thumbnail (feedly) should be properly recognized.

Useful links:

• https://www.drewbolles.com/blog/how-to-easily-add-an-rss-feed-to-a-nextjs-site-without-writing-xml-templates
• https://stackoverflow.com/questions/45854169/how-can-i-use-an-es6-import-in-node-js

Acceptance criteria:

We have 2 streams of content:

1. Episodes - official episodes, with YT videos
2. Stray - thoughts out of the main scope.

Write a RSS generator, that

• Loops through all content
• Merge two streams of content (articles and episodes)
• Sorts by FILE CREATION DATE (or if not possible, by ID from meta data)
• Generates RSS feed.
• Saves file in the public/rss.xml

NICE to have

• render the rss.xml file content under https://hanamimastery.com/rss (no extension) if possible

Dev notes

• Draft PR: #8
• Merge to the preview branch if you want to laung CI and see the deployment preview.
• Make sure URLS for episodes are: https://hanamimastery.com/episodes/<<SLUG>> and for stray articles: https://hanamimastery.com/articles/<<SLUG>>
• Make sure articles are ordered correctly. The newest article published is: https://hanamimastery.com/articles/hanami-architecture-explained, the previous one: https://hanamimastery.com/episodes/5-configure-anything-with-dry-configurable

Overview.

There is an issue in the UI, where container's top-margin (above article's wrapper and sidebar wrapper) is reduced.

Screenshots.

Possible source of the problem

When we open the console, we can easily see that several JS scripts raised errors. Possibly those result in UI being broken, as iframes (sharing buttons, GitHub sponsors, optinmonster.js) - cannot be fully loaded.

Acceptance criteria

Fix the Errors appearing in the dev tools console

• Failed to find player
• Unexpected token u in JSON at position 0

Overview

When visiting Single episode/article page, on Android applications, there should be share buttons available right-away in all browsers. For chrome, it works as in the image below, for Firefox though, buttons do not appear.

Chrome Mobile:

Firefox mobile, android:

For desktop it works well though.

Todo

• Figure out the reason why it happens
• Fix the share buttons to appear in firefox browser too.

Overview

The social media buttons script on the single article is not refreshed when the user navigates between pages.

Fix it by adding proper useEffect in the app.js - or figure out different solution

Type: Bug

Acceptance criteria

• all links are working as currently (next-link component used, without full page reloading)
• When a user visits the home page then clicks on the article/episode, share buttons shows up without page refresh required
• When user visits single article/episode page, and navigate to other, the counters are properly refreshed.

Overview

RSS feed returns 500 page.

Steps to reproduce.

Visit https://hanamimastery.com/feed

Suggested Fix

On vercel we get two problems with generating sitemaps or RSS files.

1. They need to be generated in build-time, not on fly, when the request happens, due to timeouts.
2. Because of how vercel static page generation works, the data files cannot be found in the repo after being built.

Possible solution would be to replace getServerSideProps with getStaticProps in the pages/feed.jsx. However, it requires some adjustments, as those functions work differently.

Overview

In the branch static-about-page there is a new static page added but the deployment fails with

Also, Author is not loaded properly in the article on production (https://hanamimastery.com) while working fine locally.

Acceptance criteria

• Make the about page rendering the same way on production as locally
• Fix the author name not being loaded in the article tiles.

Overview

I want to have special tags in the markdown files that should be cleaned out in the rendered HTML.

Todo

• Wiki links

[[...]] - If there is a pair of doubled square brackets in the content, and it is not inside of the code block, remove the brackets.

Examples

• my paragraph and [[something inside]] it => <p>my paragraph and something inside it</p>

• [[Can contain. Even multiple sentences]] => <p>Can contain. Event multiple Sentences</p

• ## This [[header is also wrapped]] - > <h2>This header is also wrapped</h2>

• **Block references

^... - Each block of text (paragraph, header, link, code, etc can be marked with the caret character, following the reference identifier. It will be placed at the end of the line always. as long as the reference is at the end of the mdx component content, remove everything after the ^ character.

APPLY only for text outside of code blocks

Examples:

• # My awesome header^flk2j3j => <h1>My awesome header</h1>
• > Important quote^kaop2n$2 => `Imprtant quote
• Paragraph example^2324234 => <p>Paragraph example</p>

Solution

During the MDX component parsing, check each piece of content to contain any of the special tags and get rid of them.

Overview

We need to redesign the episode page to better present all the elements of the episode.

Elements of the episode:

• Youtube Embed Video
• title
• Content
• Special Thanks component
• Sponsoring button
• Newsletter subscription
• Episode metadata: CreatedAt - Tags - Author
• Resources, important links, Source Code github Link
• Notes (code snippets)
• Social Sharing icons (floating?)
• Consider the floating table of contents.

Suggestions

I've thought about having different views:

1. Notes, where you hide content, and only list code snippets.
2. Text, where you show the full, text content.
3. Video should be placed on top of the screen if it's added to an episode
4. Cover image should be placed on top in case there is no video attached.

Acceptance criteria:

• Use material-ui comonents
• Use existing fonts and colors or suggest complete sets of colors/google-fonts to replace all on the page.
• Mobile/Tablet/desktop screens.

Resources:

• Example episode

Overview

Currently, we have several versions of the same page:

• Main content
• ?view=discuss - discussions page.

Both refer to the same resource and contain the same meta tags.

Todo

• Differentiate between those two versions of the page adjusting title/meta description in the discussions view of single article/episode
• Add Canonical Tag for discussions, to point to the main content url

Currently, when we add a markdown file to the repository, it'll be published on the next push. We want to have a way to keep unpublished episodes (drafts, scheduled).

Todo

Add a way to set published: false/true in the article/episode metadata. When building content (and fetching a list of available URLs, take this into the account.

Caevats

1. When links are built for URLs, at the moment, sitemap and automatic links resolver does not know the content of the markdown files to build all URLs supported.

Maybe having a short script that builds a collection of only published content (for server-side rendering, and sitemap generation) will work here?

Even though the GTM script is loaded on the page, for some reason the data are not fetched by GA/GTM service.

To allow for better filtering, add a URL supporting filtering resources by tag.

https://hanamimastery.com/t/dry-rb

Overview

Visit the https://hanamimastery.com/feed
There are several invalid parts that should be upgraded.

• Images are not visible in the single ITEM feed.
• Videos are incorrectly set in the enclosure (check out feedly RSS reader for the example how it's interpreted). - the videos are not loaded.

Possible solutions to the video.

1. Change the Youtu.be/XXXX links to youtube.com/embed/XXXX - or play with other URLS.
2. If not working, try to embed the video at the beginning of the description... but that also may cause problems.

###Dev notes

• This may require forking the RSS engine or writing our own. The Fork + PR to master with tweaks/upgrades is the preferred solution as we encourage to OS contributions, but it depends on how much time it would take.

Type: Bug

Overview

When scrolling down through the content on single article/episode, I want to have the Important links (Read, Discusssions, Source) following the reader

Episode example: https://hanamimastery.com/episodes/20-dry-validation

I want to have a table of contents component, which is automatically built based on the headers in the article's content

• Place it in the left sidebar of article/image.

• Hide it on mobile, or figure out a neat way to unfold/fold it on mobile to not reduce the readability
• Based on the article content, it'll extract all headers, and list the nested chapters based on headers.
• Headers must be clickable, which means, all the content headers need to have ID auto-generated.
• If possible, make it sticky, so it follows the reader when you scroll

Overview

Upgrade the next.js and related packages to the latest version, while keeping the project functional.

Refer to: https://nextjs.org/docs/upgrading

List of features:

• Social sharing
• Discuss comments
• Episodes listing https://hanamimastery.com/
• Articles listing https://hanamimastery.com/stray
• RSS feed https://hanamimastery.com/feed
• Youtube Iframe previews
• Github sponsors iframe
• Newsletter form iframe
• HTML Metadata generation

Overview

When sharing episodes on social media, some of them are unable to fetch the preview of the post. Examples are:

• twitter.com
• reddit.com

While in other portals everything seem to work fine.

• LinkedIn shows video previews
• Facebook shows thumbnails

Sharing on Twitter and Reddit is pretty important due to the community placement.

Solution

Figure out why Twitter and Reddit cannot recognize the previews and fix the issue.

At the moment, all our code snippets look pretty crappy. It would be awesome to improve the overall syntax highlighting and experience.

Example: https://github.com/react-syntax-highlighter/react-syntax-highlighter

This is how things look currently

Ideas