Skip to content

Commit 9eac7ae

Browse files
Kapil GowruKapil Gowru
Kapil Gowru
authored and
Kapil Gowru
committed
feat: adding a custom component for the footer
1 parent f425345 commit 9eac7ae

File tree

110 files changed

+388
-268
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

110 files changed

+388
-268
lines changed

‎fern/components/FernStatus.tsx‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
import React, { useState, useEffect } from 'react';
2+
3+
interface StatusData {
4+
ongoing_incidents?: Array<{
5+
current_worst_impact: string;
6+
}>;
7+
in_progress_maintenances?: Array<any>;
8+
scheduled_maintenances?: Array<{
9+
starts_at: string;
10+
}>;
11+
}
12+
13+
interface StatusState {
14+
dotClass: string;
15+
statusMessage: string;
16+
}
17+
18+
export const FernStatusWidget = () => {
19+
const [status, setStatus] = React.useState<StatusState>({
20+
dotClass: 'is-loading',
21+
statusMessage: 'Checking status...'
22+
});
23+
24+
const apiEndpoint = 'https://status.buildwithfern.com/api/v1/summary';
25+
const refreshInterval = 5 * 60 * 1000; // 5 minutes
26+
27+
const updateStatus = (data: StatusData) => {
28+
let dotClass = 'is-green';
29+
let statusMessage = 'All systems operational';
30+
31+
// Check for ongoing incidents
32+
if (data.ongoing_incidents && data.ongoing_incidents.length > 0) {
33+
let worstImpact = 0;
34+
for (const incident of data.ongoing_incidents) {
35+
let impactLevel = 0;
36+
37+
if (incident.current_worst_impact === 'degraded_performance') {
38+
impactLevel = 1;
39+
} else if (incident.current_worst_impact === 'partial_outage') {
40+
impactLevel = 2;
41+
} else if (incident.current_worst_impact === 'full_outage') {
42+
impactLevel = 3;
43+
}
44+
45+
if (impactLevel > worstImpact) {
46+
worstImpact = impactLevel;
47+
}
48+
}
49+
50+
// Set status based on severity
51+
if (worstImpact === 3) {
52+
dotClass = 'is-red';
53+
statusMessage = 'Service outage';
54+
} else if (worstImpact === 2) {
55+
dotClass = 'is-orange';
56+
statusMessage = 'Partial outage';
57+
} else if (worstImpact === 1) {
58+
dotClass = 'is-yellow';
59+
statusMessage = 'Degraded performance';
60+
}
61+
}
62+
63+
// Check for in-progress maintenance
64+
if (data.in_progress_maintenances && data.in_progress_maintenances.length > 0) {
65+
if (dotClass === 'is-green') {
66+
dotClass = 'is-blue';
67+
statusMessage = 'Maintenance in progress';
68+
}
69+
}
70+
71+
// Check for scheduled maintenance
72+
if (data.scheduled_maintenances && data.scheduled_maintenances.length > 0) {
73+
if (dotClass === 'is-green') {
74+
const now = new Date();
75+
let soonMaintenance = false;
76+
77+
for (const maintenance of data.scheduled_maintenances) {
78+
const startsAt = new Date(maintenance.starts_at);
79+
const hoursDiff = (startsAt.getTime() - now.getTime()) / (1000 * 60 * 60);
80+
81+
if (hoursDiff <= 24) {
82+
soonMaintenance = true;
83+
break;
84+
}
85+
}
86+
87+
if (soonMaintenance) {
88+
dotClass = 'is-blue';
89+
statusMessage = 'Scheduled maintenance soon';
90+
}
91+
}
92+
}
93+
94+
setStatus({ dotClass, statusMessage });
95+
};
96+
97+
const fetchStatus = async () => {
98+
try {
99+
const response = await fetch(apiEndpoint);
100+
if (response.ok) {
101+
const data: StatusData = await response.json();
102+
updateStatus(data);
103+
} else {
104+
setStatus({ dotClass: 'is-red', statusMessage: 'Cannot check status' });
105+
}
106+
} catch (error) {
107+
console.error('Error fetching status:', error);
108+
setStatus({ dotClass: 'is-red', statusMessage: 'Cannot check status' });
109+
}
110+
};
111+
112+
React.useEffect(() => {
113+
fetchStatus();
114+
const interval = setInterval(fetchStatus, refreshInterval);
115+
return () => clearInterval(interval);
116+
}, []);
117+
118+
const getBackgroundColor = () => {
119+
switch (status.dotClass) {
120+
case 'is-green': return '#00c853';
121+
case 'is-red': return '#f44336';
122+
case 'is-orange': return '#ff9800';
123+
case 'is-blue': return '#2196f3';
124+
case 'is-yellow': return '#ffc107';
125+
case 'is-loading': return '#cccccc';
126+
default: return '#cccccc';
127+
}
128+
};
129+
130+
return (
131+
<div id="fern-status-widget" style={{ display: 'flex', alignItems: 'center' }}>
132+
<div
133+
className={`footer_badge-dot ${status.dotClass}`}
134+
style={{
135+
width: '10px',
136+
height: '10px',
137+
borderRadius: '50%',
138+
marginRight: '8px',
139+
position: 'relative',
140+
display: 'inline-block',
141+
backgroundColor: getBackgroundColor(),
142+
}}
143+
/>
144+
<span id="fern-status-text">{status.statusMessage}</span>
145+
146+
<style jsx>{`
147+
.footer_badge-dot::after {
148+
content: '';
149+
position: absolute;
150+
top: -4px;
151+
left: -4px;
152+
right: -4px;
153+
bottom: -4px;
154+
border-radius: 50%;
155+
background: radial-gradient(circle, transparent 0%, currentColor 70%, currentColor 100%);
156+
opacity: 0.4;
157+
animation: pulse-expand 2s infinite ease-out;
158+
}
159+
160+
.footer_badge-dot.is-green::after { color: #00c853; }
161+
.footer_badge-dot.is-red::after { color: #f44336; }
162+
.footer_badge-dot.is-orange::after { color: #ff9800; }
163+
.footer_badge-dot.is-blue::after { color: #2196f3; }
164+
.footer_badge-dot.is-yellow::after { color: #ffc107; }
165+
.footer_badge-dot.is-loading::after { color: #cccccc; }
166+
167+
@keyframes pulse-expand {
168+
0% { transform: scale(0.6); opacity: 0.5; }
169+
100% { transform: scale(1.5); opacity: 0; }
170+
}
171+
`}</style>
172+
</div>
173+
);
174+
};

‎fern/docs.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,3 +119,7 @@ layout:
119119
header-height: 75px
120120
searchbar-placement: header
121121
tabs-placement: header
122+
123+
experimental:
124+
mdx-components:
125+
- ./components

‎fern/products/docs/pages/changelog/overview.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
title: Changelog Overview
33
---
44

5-
# Changelog
5+
Welcome to the changelog section. Here you can track all the updates and changes to the project.
66

7-
Stay up to date with the latest changes and updates to your documentation site.
7+
<Warning>This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/docs/getting-started/overview).</Warning>

‎fern/products/docs/pages/component-library/custom-components/custom-react-components.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
22
title: Custom React Components
3-
description: Integrate your own React components into documentation.
3+
description: How to create and use custom React components.
44
---
55

6-
# Custom React Components
6+
Learn how to integrate custom React components into your documentation.
77

8-
You can integrate your own custom React components to extend the functionality of your documentation site.
8+
<Warning>This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/docs/getting-started/overview).</Warning>

‎fern/products/docs/pages/component-library/custom-components/reusable-snippets.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
22
title: Reusable Snippets
3-
description: Create and use reusable content snippets.
3+
description: Creating and managing reusable content snippets.
44
---
55

6-
# Reusable Snippets
6+
Learn how to create and manage reusable content snippets for your documentation.
77

8-
Reusable snippets let you define content once and use it in multiple places throughout your documentation.
8+
<Warning>This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/docs/getting-started/overview).</Warning>

‎fern/products/docs/pages/component-library/default-components/accordion-groups.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
22
title: Accordion Groups
3-
description: Group multiple accordions together for organized content.
3+
description: How to use the Accordion Groups component.
44
---
55

6-
# Accordion Groups
6+
Documentation for the Accordion Groups component used to organize multiple collapsible sections together.
77

8-
Accordion groups allow you to organize multiple accordions together for better structure.
8+
<Warning>This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/docs/getting-started/overview).</Warning>

‎fern/products/docs/pages/component-library/default-components/accordions.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
title: Accordions
3-
description: Use accordions to show and hide content sections.
3+
description: How to use the Accordions component.
44
---
55

6-
# Accordions
6+
Documentation for the Accordions component used to create collapsible sections that can show/hide content.
77

8-
Accordions let you expand and collapse sections of content, making your documentation easier to navigate.
8+
<Warning>This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/docs/getting-started/overview).</Warning>
99

‎fern/products/docs/pages/component-library/default-components/aside.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
22
title: Aside
3-
description: Highlight important information with the Aside component.
3+
description: How to use the Aside component.
44
---
55

6-
# Aside
6+
Documentation for the Aside component used to display supplementary content or sidebars.
77

8-
Use the Aside component to draw attention to important notes or tips in your documentation.
8+
<Warning>This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/docs/getting-started/overview).</Warning>

‎fern/products/docs/pages/component-library/default-components/callouts.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
22
title: Callouts
3-
description: Use callouts to emphasize key information.
3+
description: How to use the Callouts component.
44
---
55

6-
# Callouts
6+
Documentation for the Callouts component used to highlight important information, warnings, or tips.
77

8-
Callouts are used to highlight warnings, tips, or other important information in your docs.
8+
<Warning>This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/docs/getting-started/overview).</Warning>

‎fern/products/docs/pages/component-library/default-components/card-groups.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
22
title: Card Groups
3-
description: Organize multiple cards together.
3+
description: How to use the Card Groups component.
44
---
55

6-
# Card Groups
6+
Documentation for the Card Groups component used to organize multiple cards together.
77

8-
Card groups help you organize multiple cards in a grid or row.
8+
<Warning>This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/docs/getting-started/overview).</Warning>

0 commit comments

Comments
 (0)