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

Lines changed: 41 additions & 13 deletions
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

Lines changed: 3 additions & 0 deletions
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

Lines changed: 17 additions & 0 deletions
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

Lines changed: 59 additions & 0 deletions
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

Lines changed: 0 additions & 1 deletion
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 0 additions & 2 deletions
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

Lines changed: 1 addition & 2 deletions
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

Lines changed: 0 additions & 2 deletions
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

Lines changed: 0 additions & 1 deletion
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-

0 commit comments

Comments
 (0)