Create new `BlogTimeline` component and `blogLine` page to replace `BlogIndex`

[AVGVSTVS96]

A new component BlogTimeline.astro and new page blogPage.astro has been added for displaying a list of blog posts on a timeline. Changes have been made to Projects.astro, navLinks.ts, and index.astro, with the addition of linkCaret.svg for use in BlogTimeline.astro

---

Create new BlogTimeline component and blogLine page

Add new linkCaret icon for BlogTimeline

Add new link to NavLinks.ts

Displays blog posts next to a timeline. Props can be passed to the BlogTimeline component to change display behavior:

• split prop defaults to false and controls whether the timeline is displayed in between the posts and their dates or if the posts and dates are displayed in the same column on the right side of the timeline.
• postCount prop controls how many posts are displayed
• lineClamp prop controls how many lines of description text are displayed for each post

Adjust timeline and add transition

• increase timeline and icon opacity from 50 to 70

• add icon group-hover animation, translate icon left on x axis when parent blog post card is hovered

  index.astro: Add BlogTimeline and restructure layouts

  Projects.astro: Remove heading, refactor, remove HTML attributes

• Remove BlogIndex from index.astro, replace with BlogTimeline

• Wrap index.astro page content in article tag

  • Wrap index.astro sections in section tags
  • Move classes around, remove unnecessary tags

• Make section heading smaller and bold

• Remove card-mx and card-p from individual sections in index.astro, add the main article tag wrapping the page content.

  • Remove card-mx and card-p from Projects.astro

• Remove HTML attributes from Projects.astro

Replace blog.astro page with new blogPage.astro with new BlogTimeline component

Add blogPage link to navLinks.astro, replacing original blog link

[cloudflare-pages[bot]]

Deploying astrosite with    Cloudflare Pages

Latest commit:	f16ef0f
Status:	✅  Deploy successful!
Preview URL:	https://f2f78bfc.astrosite-aid.pages.dev
Branch Preview URL:	https://createblogtimeline.astrosite-aid.pages.dev

View logs

[codesandbox[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

[AVGVSTVS96]

• #316 👈
• #310 : 1 other dependent PR (#311 )
• #309
• #308
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @AVGVSTVS96 and the rest of your teammates on Graphite

[AVGVSTVS96]

Merge activity

• May 5, 2:30 AM EDT: @AVGVSTVS96 started a stack merge that includes this pull request via Graphite.
• May 5, 2:41 AM EDT: Graphite rebased this pull request as part of a merge.
• May 5, 2:42 AM EDT: @AVGVSTVS96 merged this pull request with Graphite.