Skip to content

Commit 8bc4eb1

Browse files
IhsenBouallegueIhsenBouallegue
committed
Add tailwindcss and Team page with new components
1 parent 9d3e17f commit 8bc4eb1

27 files changed

+504
-54
lines changed

‎astro.config.mjs

+41-13
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
11
import { defineConfig } from "astro/config";
22
import starlight from "@astrojs/starlight";
33

4+
import tailwind from "@astrojs/tailwind";
5+
46
// https://astro.build/config
57
export default defineConfig({
68
site: "https://docs.openipc.org",
79
base: "/",
810
integrations: [
911
starlight({
1012
title: "Documentation",
13+
customCss: ["./src/tailwind.css"],
1114
social: {
1215
github: "https://github.com/OpenIPC",
1316
},
1417
logo: {
15-
light: './src/assets/logo/OpenIPC__OPENIPC_logo_vertical.svg',
16-
dark: './src/assets/logo/OpenIPC__OPENIPC_logo_vertical_white.svg',
18+
light: "./src/assets/logo/OpenIPC__OPENIPC_logo_vertical.svg",
19+
dark: "./src/assets/logo/OpenIPC__OPENIPC_logo_vertical_white.svg",
1720
},
1821
editLink: {
19-
baseUrl: 'https://github.com/OpenIPC/docs/edit/main/',
22+
baseUrl: "https://github.com/OpenIPC/docs/edit/main/",
2023
},
2124
sidebar: [
2225
{
@@ -26,10 +29,13 @@ export default defineConfig({
2629
label: "About the Project",
2730
link: "/getting-started/introduction/",
2831
},
29-
{ label: "Quick Start", link: "/getting-started/quick-start/" },
3032
{
31-
label: "Basic Configuration",
32-
link: "/getting-started/configuration/",
33+
label: "Quick Start",
34+
link: "/getting-started/quick-start/",
35+
},
36+
{
37+
label: "Roadmap",
38+
link: "/getting-started/roadmap/",
3339
},
3440
],
3541
},
@@ -38,15 +44,21 @@ export default defineConfig({
3844
items: [
3945
{
4046
label: "FPV (First Person View)",
41-
autogenerate: { directory: "/use-cases/fpv" },
47+
autogenerate: {
48+
directory: "/use-cases/fpv",
49+
},
4250
},
4351
{
4452
label: "Home Automation",
45-
autogenerate: { directory: "/use-cases/home-automation" },
53+
autogenerate: {
54+
directory: "/use-cases/home-automation",
55+
},
4656
},
4757
{
4858
label: "Video Surveillance",
49-
autogenerate: { directory: "/use-cases/video-surveillance" },
59+
autogenerate: {
60+
directory: "/use-cases/video-surveillance",
61+
},
5062
},
5163
],
5264
},
@@ -78,7 +90,10 @@ export default defineConfig({
7890
label: "Configuration Details",
7991
link: "/software/configuration-details/",
8092
},
81-
{ label: "Firmware Updates", link: "/software/firmware-updates/" },
93+
{
94+
label: "Firmware Updates",
95+
link: "/software/firmware-updates/",
96+
},
8297
],
8398
},
8499
{
@@ -97,15 +112,28 @@ export default defineConfig({
97112
{
98113
label: "Resources",
99114
items: [
100-
{ label: "Frequently Asked Questions", link: "/resources/faq/" },
101-
{ label: "Useful Links", link: "/resources/useful-links/" },
115+
{
116+
label: "Frequently Asked Questions",
117+
link: "/resources/faq/",
118+
},
119+
{
120+
label: "Useful Links",
121+
link: "/resources/useful-links/",
122+
},
102123
],
103124
},
104125
{
105126
label: "Reference",
106-
autogenerate: { directory: "reference" },
127+
autogenerate: {
128+
directory: "reference",
129+
},
130+
},
131+
{
132+
label: "Team",
133+
link: "/team/",
107134
},
108135
],
109136
}),
137+
tailwind({ applyBaseStyles: false }),
110138
],
111139
});

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,11 @@
1313
"dependencies": {
1414
"@astrojs/check": "^0.3.4",
1515
"@astrojs/starlight": "^0.15.2",
16+
"@astrojs/starlight-tailwind": "^2.0.1",
17+
"@astrojs/tailwind": "^5.1.0",
1618
"astro": "^4.0.1",
1719
"sharp": "^0.33.1",
20+
"tailwindcss": "^3.4.1",
1821
"typescript": "^5.3.3"
1922
},
2023
"devDependencies": {

‎src/components/card-grid.astro

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
import Card from "./card.astro";
3+
4+
interface Props {
5+
members: {
6+
name: string;
7+
github: string;
8+
title: string;
9+
}[];
10+
}
11+
12+
const { members } = Astro.props;
13+
---
14+
15+
<div class="grid grid-cols-3 gap-6 pt-6">
16+
{members.map((member) => <Card {...member} />)}
17+
</div>

‎src/components/card.astro

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
interface Props {
3+
name: string;
4+
github: string;
5+
title: string;
6+
}
7+
8+
const { name, github, title } = Astro.props;
9+
10+
const avatarUrl = `https://github.com/${github}.png`;
11+
const githubUrl = `https://github.com/${github}`;
12+
13+
const hoverColors = [
14+
"hover:shadow-red-500",
15+
"hover:shadow-green-500",
16+
"hover:shadow-blue-500",
17+
"hover:shadow-yellow-500",
18+
"hover:shadow-purple-500",
19+
"hover:shadow-pink-500",
20+
];
21+
22+
// Hash function to convert name to a number
23+
const hashCode = (str: string) => {
24+
let hash = 0;
25+
for (let i = 0; i < str.length; i++) {
26+
const character = str.charCodeAt(i);
27+
hash = (hash << 5) - hash + character;
28+
hash = hash & hash; // Convert to 32bit integer
29+
}
30+
return Math.abs(hash);
31+
};
32+
33+
// Use hash function to select a consistent color for each name
34+
const randomColorClass = hoverColors[hashCode(name) % hoverColors.length];
35+
---
36+
37+
<div
38+
class={`card max-w-sm rounded-md overflow-hidden shadow-lg hover:shadow-lg transition-shadow duration-300 ease-in-out ${randomColorClass} border-solid border-2 cursor-pointer`}
39+
style="margin: 0;"
40+
>
41+
<a
42+
href={githubUrl}
43+
target="_blank"
44+
rel="noopener noreferrer"
45+
class="no-underline hover:no-underline"
46+
>
47+
<div
48+
class="bg-cover bg-center h-44 p-4"
49+
style={`background-image: url(${avatarUrl})`}
50+
>
51+
</div>
52+
<div class="px-6 py-2">
53+
<p class="font-bold text-xl">{name}</p>
54+
<span class="text-gray-600 text-base m-0 pt-0 inset-0">
55+
{title}
56+
</span>
57+
</div>
58+
</a>
59+
</div>

‎src/content/docs/development/contribution-guidelines.md

-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,3 @@
22
title: Example Guide
33
description: Example
44
---
5-

‎src/content/docs/getting-started/introduction.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ title: About the Project
33
description: Discover the essence of OpenIPC and its impactful presence in the world of open-source camera firmware.
44
---
55

6-
# OpenIPC: Empowering Camera Innovation
6+
## OpenIPC: Empowering Camera Innovation
77

88
OpenIPC stands as a pioneering force in the realm of open-source projects, specifically revolutionizing IP camera firmware. Initiated to break free from the limitations of proprietary firmware, OpenIPC symbolizes empowerment, innovation, and versatility. This project caters to a myriad of applications, from enhancing home security systems to enriching FPV (First Person View) experiences, and advancing IoT (Internet of Things) integrations.
99

1010
The essence of OpenIPC lies in its community-driven approach. By leveraging the collective wisdom and contributions of its user base, OpenIPC continuously evolves, integrating new features, enhancing security, and ensuring user-friendliness. This collaboration leads to a firmware that not only meets the diverse needs of its users but also stays ahead in technological advancements.
1111

12-
### Explore More About OpenIPC:
12+
## Explore More About OpenIPC:
1313

1414
- **Getting Started**: Embark on your OpenIPC journey and understand the basics of installation and configuration in our comprehensive [Getting Started Guide](/getting-started/quick-start/).
1515
- **Diverse Use Cases**: Discover the versatility of OpenIPC across different scenarios in our detailed Use Cases section, which includes specialized guides for [FPV setups](/use-cases/fpv/quick-start), [home automation](/use-cases/home-automation/quick-start) configurations, and [video surveillance](/use-cases/video-surveillance/quick-start) applications.

‎src/content/docs/getting-started/quick-start.md

-2
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,3 @@
22
title: Quick Start
33
description: A guide in my new Starlight docs site.
44
---
5-
6-

‎src/content/docs/getting-started/configuration.md renamed to ‎src/content/docs/getting-started/roadmap.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
---
2-
title: Basic Configuration
2+
title: Roadmap
33
description: A guide in my new Starlight docs site.
44
---
5-

‎src/content/docs/hardware/flashing-firmware.md

-2
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,3 @@
22
title: Example Guide
33
description: A guide in my new Starlight docs site.
44
---
5-
6-

‎src/content/docs/hardware/supported-devices.md

-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,3 @@
22
title: Example Guide
33
description: A guide in my new Starlight docs site.
44
---
5-

‎src/content/docs/hardware/troubleshooting.md

-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,3 @@
22
title: Example Guide
33
description: A guide in my new Starlight docs site.
44
---
5-

‎src/content/docs/index.mdx

+4-5
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,12 @@ import { Card, CardGrid } from "@astrojs/starlight/components";
2323

2424
<CardGrid stagger>
2525
<Card title="Explore Hardware Compatibility" icon="camera">
26-
Check [the Hardware section](/hardware/supported-devices/). for
27-
compatible devices and setup instructions.
26+
Check [the Hardware section](/hardware/supported-devices/). for compatible
27+
devices and setup instructions.
2828
</Card>
2929
<Card title="Configure Your Camera" icon="gear">
30-
Navigate to [the Software
31-
section](/software/software-overview/). for software settings
32-
and customizations.
30+
Navigate to [the Software section](/software/software-overview/). for
31+
software settings and customizations.
3332
</Card>
3433
<Card title="Join the Community" icon="group">
3534
Connect with other users in the OpenIPC community for support and

‎src/content/docs/reference/example.md

-3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,3 @@
22
title: Example Reference
33
description: A reference page in my new Starlight docs site.
44
---
5-
6-
7-

‎src/content/docs/resources/faq.md

-2
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,3 @@
22
title: Example Guide
33
description: A guide in my new Starlight docs site.
44
---
5-
6-

‎src/content/docs/resources/useful-links.md

-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,3 @@
22
title: Example Guide
33
description: A guide in my new Starlight docs site.
44
---
5-

‎src/content/docs/software/configuration-details.md

-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,3 @@
22
title: Example Guide
33
description: A guide in my new Starlight docs site.
44
---
5-

‎src/content/docs/software/firmware-updates.md

-2
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,3 @@
22
title: Example Guide
33
description: A guide in my new Starlight docs site.
44
---
5-
6-

‎src/content/docs/software/software-overview.md

-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,3 @@
22
title: Example Guide
33
description: A guide in my new Starlight docs site.
44
---
5-

‎src/content/docs/team.mdx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
title: Team
3+
description: Meet the team behind the OpenIPC Docs.
4+
---
5+
6+
export const meta = {
7+
title: "Team",
8+
description: "Meet the team behind the OpenIPC Docs.",
9+
};
10+
11+
import CardGrid from "../../components/card-grid.astro";
12+
13+
#### Thanks to everyone who has contributed to the documentation of OpenIPC!
14+
15+
16+
<CardGrid
17+
members={[
18+
{ name: "Igor", github: "FlyRouter", title: "The magical wizard"},
19+
{ name: "Ihsen", github: "IhsenBouallegue", title: "The docs wizard" },
20+
{ name: "Fly Router", github: "FlyRouter", title: "The magical wizard"},
21+
{ name: "Ihsen 2", github: "IhsenBouallegue", title: "The magical wizard"},
22+
{ name: "Igor", github: "FlyRouter", title: "The magical wizard"},
23+
]}
24+
/>

‎src/content/docs/use-cases/fpv/cameras.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
---
22
title: Compatible Cameras
33
description: How to choose a camera for your OpenIPC FPV system
4-
---
4+
---

‎src/content/docs/use-cases/fpv/nvr-groundstation.md

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
---
22
title: GroundStation on NVR
3-
description: How to make an NVR Board work with OpenIPC
3+
description: How to make an NVR Board work with OpenIPC
44
---
55

6-
76
## Upgrade from original HI3536DV100 NVR board firmware to OpenIPC FPV firmware
87

98
- Install [PUTTY](https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html) and [TFTP](https://pjo2.github.io/tftpd64/) server
@@ -30,4 +29,4 @@ reset
3029
## Buy a device
3130

3231
- [https://www.aliexpress.com/item/1005004023376532.html](https://www.aliexpress.com/item/1005004023376532.html)
33-
- [https://www.aliexpress.com/item/1005002358182146.html](https://www.aliexpress.com/item/1005002358182146.html)
32+
- [https://www.aliexpress.com/item/1005002358182146.html](https://www.aliexpress.com/item/1005002358182146.html)

‎src/content/docs/use-cases/fpv/quick-start.md

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ This guide is designed to provide a detailed walkthrough for setting up an FPV (
2222

2323
- **Camera**: An SSC338 based board with a Sony IMX415 sensor was used for this guide.
2424
![Camera](/src/assets/images/sbs-Camera.jpg)
25+
2526
- [Camera Purchase Link](https://www.aliexpress.com/item/1005004350557805.html)
2627

2728
- **Groundstation**: An Nvr board is recommended for its popularity and cost-effectiveness.

0 commit comments

Comments
 (0)