Feature/ Add "series" to link related articles

[John-Paul-Larkin]

Context

Implement a "Series" feature that allows users to link related articles together under a specific series, making it easier for readers to navigate through multi-part content. Similar to Dev.to's series functionality, this will enable authors to organize their content and guide readers through sequential posts.

Expected Behavior

• Allow users to group related articles into a series.
  -Add a series field to the article creation form and database. This field will allow authors to specify the series title. Example: series: "Building a Fullstack App"
• See Nialls comment below.
• Automatic Navigation: Once an article is part of a series, the system should automatically generate navigation links at the top and bottom of the article: "Previous article" / "Next article" with clickable links.
• Show Indication of the article’s place within the series (e.g., "Article 3 of 5").
• Articles index in the series should be chronological based on the publication date.

[John-Paul-Larkin]

@NiallJoeMaher
Can you review/Edit this to see if it is what you are looking for?

[NiallJoeMaher]

In the more options screen we should add another input. Here is that screen:

It is shown when you save a new post.

That input should have a title of "Series Name" and a placeholder of "The name of my series". The text below should say "This text is case-sensitive so make sure you type it exactly as you did in previous articles to ensure they are connected".

We will need a new Series table something like this:

CREATE TABLE IF NOT EXISTS "Series" (
    "id" SERIAL PRIMARY KEY,
    "title" text NOT NULL,
    "description" text,
    "userId" text NOT NULL,
    "createdAt" timestamp(3) with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL,
    "updatedAt" timestamp(3) with time zone NOT NULL
);

But created with Drizzle.
And also to update the current Post table to include a relation to this with a seriesId. Something like:

"seriesId" integer,
...
FOREIGN KEY ("seriesId") REFERENCES "Series" ("id") ON DELETE CASCADE,

[RangerCreaky]

I would like to work on this issue

[John-Paul-Larkin]

Thanks @RangerCreaky

I assigned you.

[RangerCreaky]

Hey @John-Paul-Larkin
Just wanted to clarify on the UI

Links on the top:

Links on the bottom:

**Mobile view top: **

**Mobile view bottom: **

Dark View

All the links underlined when hovered on,

Can you please confirm this UI
Thank you

[github-actions]

Uh oh! @RangerCreaky, the image you shared is missing helpful alt text. Check #1081 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[NiallJoeMaher]

Hey @RangerCreaky, this issue is about creating the series link 🔗 It's not about showing the series within the article yet.

In the more options screen we should add another input. Here is that screen:

It is shown when you save a new post.

That input should have a title of "Series Name" and a placeholder of "The name of my series". The text below should say "This text is case-sensitive so make sure you type it exactly as you did in previous articles to ensure they are connected".

We will need a new Series table something like this:

CREATE TABLE IF NOT EXISTS "Series" (
    "id" SERIAL PRIMARY KEY,
    "title" text NOT NULL,
    "description" text,
    "userId" text NOT NULL,
    "createdAt" timestamp(3) with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL,
    "updatedAt" timestamp(3) with time zone NOT NULL
);

But created with Drizzle. And also to update the current Post table to include a relation to this with a seriesId. Something like:

"seriesId" integer,
...
FOREIGN KEY ("seriesId") REFERENCES "Series" ("id") ON DELETE CASCADE,

[RangerCreaky]

@NiallJoeMaher

Sorry I missed attaching the image to add the series link:

However in the issue [The part which was not stroked off] as defined by @John-Paul-Larkin

Expected Behavior
Allow users to group related articles into a series.
-Add a series field to the article creation form and database. This field will allow authors to specify the series title. Example: series: "Building a Fullstack App"
See Nialls comment below.
Automatic Navigation: Once an article is part of a series, the system should automatically generate navigation links at the top and bottom of the article: "Previous article" / "Next article" with clickable links.
Show Indication of the article’s place within the series (e.g., "Article 3 of 5").
Articles index in the series should be chronological based on the publication

It also asks to show the navigation links on the top and the bottom of the article, Hence I considered the below points for this issue:

1. While creating a post, another input should be shown to add the series name (as shown in the image attached in this comment)
2. When the user lands up on an article which is a part of the series, they should also find previous and next links at the top and the bottom of the article (as shown in the images attached in the previous comment)

However, Please clarify if I understood something differently than expected...

[NiallJoeMaher]

Image above is great! I need to make designs for number 2 that's the only reason I'm ignoring it for now. I'll hopefully get to it later today if you want me to assign it to you as a follow up issue when the initial series creation is done? Sorry for the confusion!

[RangerCreaky]

Sure @NiallJoeMaher , I would love to take up the follow up issue. However, for now I will revert all the changes related to the showing of article on screen in the PR for this issue. Please do assign the next issue to me.

[RangerCreaky]

@NiallJoeMaher

We will need a new Series table something like this:

CREATE TABLE IF NOT EXISTS "Series" (
    "id" SERIAL PRIMARY KEY,
    "title" text NOT NULL,
    "description" text,
    "userId" text NOT NULL,
    "createdAt" timestamp(3) with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL,
    "updatedAt" timestamp(3) with time zone NOT NULL
);

But created with Drizzle.
And also to update the current Post table to include a relation to this with a seriesId. Something like:

"seriesId" integer,
...
FOREIGN KEY ("seriesId") REFERENCES "Series" ("id") ON DELETE CASCADE,

I assume, by this you meant a new table (series), should be created in the db
And the posts table should be updated to have a new foreign key referencing the id column of the series table, which also has the ON DELETE CASCADE.

As of my understanding, this would mean, If the series record is deleted from the db, then it would automatically delete all the posts referencing that series.

Is this really what we want? Rather shouldn't it be other way around?
Deleting the last post of a particular series should delete the series itself.

However, In the current situation, I could write a trigger in the code, But this condition doesn't seem appropriate to me
Please Clarify

Ref: https://stackoverflow.com/questions/14141266/postgresql-foreign-key-on-delete-cascade

[RangerCreaky]

@NiallJoeMaher @John-Paul-Larkin any update on my above query?

[NiallJoeMaher]

@RangerCreaky sorry about the delay! You are absolutely correct and thanks for pointing that out. Don't delete on cascade or we will have some very sad users 😂

[RangerCreaky]

Okay sure 😅

[RangerCreaky]

@NiallJoeMaher, sorry I couldn't work on this in the last week.
Please give me some more time, I will raise a PR by answering all the review comments by tommorow