Skip to content

Commit 2cd084d

Browse files
elliesimenselliesimens
committed
updated for v26
1 parent 95c5dba commit 2cd084d

File tree

3 files changed

+67
-48
lines changed

3 files changed

+67
-48
lines changed

‎src/pages/components/Blogs.tsx‎

Lines changed: 40 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,26 @@
11
import React from "react";
22

33
const posts = [
4+
{
5+
title: "Reactime Reimagined: A Major Leap Forward in React Debugging",
6+
href: "https://medium.com/@elliesimens/reactime-reimagined-a-major-leap-forward-in-react-debugging-7b76a0a66f42",
7+
category: {
8+
name: "React, State Management, Performance Optimization",
9+
href: "https://medium.com/tag/react",
10+
},
11+
description:
12+
"Today, we’re thrilled to announce Reactime v26. Calling this an update would be an understatement–Reactime v26 is a complete overhaul, introducing groundbreaking new features and transforming its design. This release delivers a more intuitive, efficient, and refined experience for developers, setting a new standard for React debugging tools.",
13+
date: "January 2, 2025",
14+
datetime: "2025-01-02",
15+
imageUrl:
16+
"https://images.unsplash.com/photo-1515378960530-7c0da6231fb1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
17+
readingTime: "5 min",
18+
author: {
19+
name: "Ellie Simens",
20+
href: "https://medium.com/@elliesimens",
21+
imageUrl: "https://avatars.githubusercontent.com/u/183773690?v=4",
22+
},
23+
},
424
{
525
title: "Reactime v25: The Time to React is Now!",
626
href: "https://medium.com/@loganjnelsen/reactime-v25-the-time-to-react-is-now-ace90e45a9c7",
@@ -41,26 +61,26 @@ const posts = [
4161
imageUrl: "https://avatars.githubusercontent.com/u/147180726?v=4",
4262
},
4363
},
44-
{
45-
title: "Reactime Renovation: Updates Coming in Version 23.0!",
46-
href: "https://medium.com/@liam.donaher/reactime-renovation-updates-coming-in-version-23-0-37b2ef2a2771",
47-
category: {
48-
name: "React, Open Source, Debugging, Optimization",
49-
href: "https://medium.com/tag/react",
50-
},
51-
description:
52-
"Reactime is a lightweight chrome extension that sheds light on users’ React applications. With features that include a node diagram of React components, render-time analytics, state snapshots and time travel debugging...",
53-
date: "January 11, 2024",
54-
datetime: "2024-01-11",
55-
imageUrl:
56-
"https://images.unsplash.com/photo-1522071820081-009f0129c71c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY4MTMyNDYxNQ&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080",
57-
readingTime: "4 min",
58-
author: {
59-
name: "Liam Donaher",
60-
href: "https://medium.com/@liam.donaher",
61-
imageUrl: "https://avatars.githubusercontent.com/u/147748756?v=4",
62-
},
63-
},
64+
// {
65+
// title: "Reactime Renovation: Updates Coming in Version 23.0!",
66+
// href: "https://medium.com/@liam.donaher/reactime-renovation-updates-coming-in-version-23-0-37b2ef2a2771",
67+
// category: {
68+
// name: "React, Open Source, Debugging, Optimization",
69+
// href: "https://medium.com/tag/react",
70+
// },
71+
// description:
72+
// "Reactime is a lightweight chrome extension that sheds light on users’ React applications. With features that include a node diagram of React components, render-time analytics, state snapshots and time travel debugging...",
73+
// date: "January 11, 2024",
74+
// datetime: "2024-01-11",
75+
// imageUrl:
76+
// "https://images.unsplash.com/photo-1522071820081-009f0129c71c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY4MTMyNDYxNQ&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080",
77+
// readingTime: "4 min",
78+
// author: {
79+
// name: "Liam Donaher",
80+
// href: "https://medium.com/@liam.donaher",
81+
// imageUrl: "https://avatars.githubusercontent.com/u/147748756?v=4",
82+
// },
83+
// },
6484
// {
6585
// title: "Reactime: Real-time Debugging, Timeless Results",
6686
// href: "https://medium.com/@kelvinmirhan/reactime-real-time-debugging-timeless-results-3f163b721d01",

‎src/pages/components/FeaturesSection.tsx‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -14,56 +14,57 @@ import React from "react";
1414

1515
const features = [
1616
{
17-
name: "Time Travel Rendering",
17+
name: "State SnapShot Display",
1818
description:
19-
"Rewind to previous state changes from your DOM history with a simple click of a button",
20-
icon: ClockIcon,
19+
"See your application state in an interactive format for clear and concise state management, all recorded state changes are saved in snapshots.",
20+
icon: CameraIcon,
2121
},
2222
{
23-
name: "Context Display Panel",
23+
name: "Time Travel Rendering",
2424
description:
25-
"Visualize the relationships of context providers and consumers, along with live context theme data",
26-
icon: EyeIcon,
25+
"Rewind to previous state changes by jumping to a specific snapshot, using the time travel slider, or playing through a series of snapshots with the play button.",
26+
icon: ClockIcon,
2727
},
2828
{
29-
name: "State SnapShot Display",
29+
name: "Context Data Display",
3030
description:
31-
"See your application state in an interactive format for clear and concise state management",
32-
icon: CameraIcon,
31+
"Visualize the relationships of context providers and consumers, along with live context theme data, properties and values.",
32+
icon: EyeIcon,
3333
},
3434
{
3535
name: "Prop Visualization",
36-
description: "See how properties flow down the component tree",
36+
description:
37+
"View the component map and track component relationships, as well as the flow of properties down the component tree.",
3738
icon: CogIcon,
3839
},
3940
{
4041
name: "Accessibility Debugging",
4142
description:
42-
"Check how a screen reader reads your application per state change",
43+
"Prioritize accessibility by analyzing how a screen reader interprets your application per state change.",
4344
icon: EyeIcon,
4445
},
4546
{
4647
name: "Components Performance Display",
4748
description:
48-
"Visualize the latency trends for component render times on each state change",
49+
"Analyze the latency trends for component render times, organized per component, per state change.",
4950
icon: PresentationChartLineIcon,
5051
},
5152
{
5253
name: "State History Diffing",
5354
description:
54-
"View the exact value differences in state changes, organized by snapshot",
55+
"Compare snapshots in order to pinpoint the exact difference in property values per state change.",
5556
icon: ArrowPathIcon,
5657
},
5758
{
58-
name: "Download State History",
59+
name: "Download / Upload State History",
5960
description:
60-
"Save your state history as a JSON source file for future reference",
61+
"Download or upload a JSON source file of your application's state history to resume or share your working session.",
6162
icon: ArrowDownTrayIcon,
6263
},
6364
{
6465
name: "Atom and Selector Relationships",
6566
description:
66-
"Visualize the mapping of Atoms and Selectors to components in Recoil Apps",
67+
"Visualize the detailed mapping of Atoms and Selectors to their associated components in Recoil applications.",
6768
icon: MapIcon,
6869
},
6970
];
@@ -77,11 +78,12 @@ export default function FeaturesSection() {
7778
What is Reactime?
7879
</p>
7980
<p className="mx-auto mt-5 max-w-prose text-xl text-gray-500">
80-
Reactime is a developer tool that is compatible with react-based
81-
framework applications. It is full of features that will make life
82-
easier as a developer. From time-travel debugging to state snapshot
83-
display, check out how using Reactime will improve the developer
84-
experience!
81+
Reactime is an open-source Chrome extension with a comprehensive suite
82+
of tools designed to elevate the debugging process. From its intuitive
83+
component map and time-travel snapshots to its accessibility tree,
84+
dynamic visualizations of web metrics, rendering statistics, and
85+
comprehensive diffing history, Reactime provides an all-in-one
86+
solution for optimizing complex React applications.
8587
</p>
8688
<div className="mt-20">
8789
<div className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">

‎src/pages/components/LandingPage.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default function LandingPage() {
3939
<div>
4040
<a
4141
target="_blank"
42-
href="https://medium.com/@loganjnelsen/reactime-v25-the-time-to-react-is-now-ace90e45a9c7"
42+
href="https://medium.com/@elliesimens/reactime-reimagined-a-major-leap-forward-in-react-debugging-7b76a0a66f42"
4343
className="inline-flex space-x-4"
4444
>
4545
{/* <span className="rounded px-2.5 py-1 text-sm font-semibold text-rose-500">
@@ -56,21 +56,18 @@ export default function LandingPage() {
5656
</div>
5757
<div className="mt-6 sm:max-w-xl">
5858
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
59-
Reactime <br /> a time traveling debugger for modern
59+
Reactime: <br /> an all-in-one developer tool for
6060
React-based applications
6161
</h1>
6262
<p className="mt-6 text-xl text-gray-500">
63-
Download the Google Chrome Extension that rewinds time
64-
and replays previous versions of stateful React
65-
components. Now compatible with Next.js and Remix
66-
applications*.
63+
Download the Google Chrome Extension that rewinds time and provides comprehensive insights into the stateful behavior of your React components.
6764
</p>
6865
{/* This code is for the newsletter */}
6966
{/* <p className="className=mt-6 mt-10 text-xl text-gray-500">
7067
Sign up for our newsletter!
7168
</p> */}
7269
<p className="mt-6 text-sm text-gray-500">
73-
Beta Support for Remix Applications*
70+
Compatible with Next.js, Remix, and Recoil
7471
</p>
7572
</div>
7673
{/* <form

0 commit comments

Comments
 (0)