Skip to content

Commit aacc087

Browse files
JorgeRosbelJorgeRosbel
authored
Merge pull request #1 from JorgeRosbel/pure-astro
Pure astro
2 parents f7230ad + 148dd08 commit aacc087

33 files changed

+1056
-959
lines changed

‎package-lock.json‎

Lines changed: 55 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@primarix/lunar-ui",
3-
"version": "0.0.1",
4-
"description": "Astro UI Components",
3+
"version": "0.0.2",
4+
"description": "🌕 lunar-ui CLI: A modern collection of ready-to-use Astro components",
55
"main": "dist/index.mjs",
66
"types": "dist/index.d.ts",
77
"bin": {
@@ -11,8 +11,8 @@
1111
"build": "tsup",
1212
"build:dev": "npm run build && npm link",
1313
"watch": "tsup --watch",
14-
"format": "prettier --write \"**/*.{js,ts}\"",
15-
"check": "prettier --check \"**/*.{js,ts}\"",
14+
"format": "prettier --write \"**/*.{js,ts,astro}\"",
15+
"check": "prettier --check \"**/*.{js,ts,astro}\"",
1616
"prepare": "husky",
1717
"test": "vitest",
1818
"test:run": "vitest run",
@@ -22,14 +22,14 @@
2222
"push": "git add . && gitzen commit -y && git push && npm run build:dev"
2323
},
2424
"lint-staged": {
25-
"*.{js,ts}": [
25+
"*.{js,ts,astro}": [
2626
"prettier --write"
2727
]
2828
},
2929
"lint-staged:options": {
3030
"allowEmpty": true
3131
},
32-
"keywords": [],
32+
"keywords": ["cli","astro-components","astro-ui", "astro"],
3333
"author": "JorgeRosbel",
3434
"license": "Apache-2.0",
3535
"type": "module",
@@ -50,10 +50,11 @@
5050
"husky": "^9.1.7",
5151
"lint-staged": "^16.1.2",
5252
"prettier": "^3.6.2",
53+
"prettier-plugin-astro": "^0.14.1",
5354
"tsup": "^8.5.0",
55+
"tsx": "^4.20.3",
5456
"typescript": "^5.8.3",
55-
"vitest": "^3.2.4",
56-
"tsx": "^4.20.3"
57+
"vitest": "^3.2.4"
5758
},
5859
"dependencies": {
5960
"boxen": "^8.0.1",
@@ -63,4 +64,4 @@
6364
"gradient-string": "^3.0.0",
6465
"inquirer": "^12.7.0"
6566
}
66-
}
67+
}

‎prettier.config.mjs‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
/** @type {import("prettier").Options} */
22
export default {
3-
semi: true,
4-
singleQuote: true,
5-
printWidth: 100,
6-
tabWidth: 2,
7-
trailingComma: "es5",
8-
bracketSpacing: true,
9-
arrowParens: "avoid",
10-
overrides: [
11-
{
12-
files: "*.ts",
13-
options: { parser: "typescript" }
14-
}
15-
]
16-
};
3+
semi: true,
4+
singleQuote: true,
5+
printWidth: 100,
6+
tabWidth: 2,
7+
trailingComma: "es5",
8+
bracketSpacing: true,
9+
arrowParens: "avoid",
10+
plugins: ["prettier-plugin-astro"],
11+
overrides: [
12+
{
13+
files: "*.astro",
14+
options: { parser: "astro" },
15+
},
16+
{
17+
files: "*.ts",
18+
options: { parser: "typescript" }
19+
}
20+
]
21+
};

‎src/commands/add.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { mkdir, writeFile } from 'fs/promises';
22
import fs from 'fs';
3-
import { join } from 'path';
4-
import { components } from '@/ui/sender';
3+
import { join, dirname } from 'path';
54
import { created, fail } from '@/utils/logs';
5+
import { fileURLToPath } from 'url';
66

77
export const add = async () => {
88
try {
@@ -13,7 +13,11 @@ export const add = async () => {
1313
process.exit(1);
1414
}
1515

16-
const content = components.get(name);
16+
const __filename = fileURLToPath(import.meta.url);
17+
const __dirname = dirname(__filename);
18+
const componentPath = join(__dirname, 'ui', `${name}.astro`);
19+
20+
const content = fs.readFileSync(componentPath, 'utf-8');
1721

1822
if (!content) {
1923
fail('Invalid component name');

‎src/ui/AboutSection.astro‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
export interface Props {
3+
type?: 'person' | 'company';
4+
name: string;
5+
title: string;
6+
description: string;
7+
mission?: string;
8+
values?: string[];
9+
highlights?: string[];
10+
experience?: string;
11+
location?: string;
12+
}
13+
14+
const {
15+
type = 'company',
16+
name,
17+
title,
18+
description,
19+
mission,
20+
values = [],
21+
highlights = [],
22+
experience,
23+
location,
24+
} = Astro.props;
25+
---
26+
27+
<section class="py-16 bg-white dark:bg-black">
28+
<div class="container mx-auto px-4">
29+
<div class="max-w-4xl mx-auto">
30+
<!-- Header -->
31+
<div class="text-center mb-12">
32+
<h2 class="text-4xl font-bold text-black dark:text-white mb-4">
33+
{type === 'person' ? 'Sobre Mí' : 'Sobre Nosotros'}
34+
</h2>
35+
<div class="w-20 h-1 bg-black dark:bg-white mx-auto mb-6"></div>
36+
</div>
37+
38+
<!-- Main Content -->
39+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
40+
<!-- Left Column - Text Content -->
41+
<div class="space-y-6">
42+
<div>
43+
<h3 class="text-2xl font-bold text-black dark:text-white mb-2">{name}</h3>
44+
<p class="text-lg text-black/70 dark:text-white/70 mb-4">{title}</p>
45+
<p class="text-black dark:text-white leading-relaxed">{description}</p>
46+
</div>
47+
48+
{
49+
mission && (
50+
<div>
51+
<h4 class="text-xl font-semibold text-black dark:text-white mb-3">
52+
{type === 'person' ? 'Mi Misión' : 'Nuestra Misión'}
53+
</h4>
54+
<p class="text-black/70 dark:text-white/70 leading-relaxed">{mission}</p>
55+
</div>
56+
)
57+
}
58+
59+
{
60+
experience && (
61+
<div class="flex items-center gap-4 text-sm text-black/70 dark:text-white/70">
62+
<span>📍 {location}</span>
63+
<span>⏱️ {experience}</span>
64+
</div>
65+
)
66+
}
67+
</div>
68+
69+
<!-- Right Column - Highlights & Values -->
70+
<div class="space-y-8">
71+
{
72+
highlights.length > 0 && (
73+
<div>
74+
<h4 class="text-xl font-semibold text-black dark:text-white mb-4">
75+
{type === 'person' ? 'Lo Que Me Destaca' : 'Lo Que Nos Destaca'}
76+
</h4>
77+
<div class="space-y-4">
78+
{highlights.map((highlight: unknown) => (
79+
<div class="p-4 border border-black/20 dark:border-white/20 rounded-lg bg-black/5 dark:bg-white/5">
80+
<p class="text-black dark:text-white">{highlight}</p>
81+
</div>
82+
))}
83+
</div>
84+
</div>
85+
)
86+
}
87+
88+
<!-- Values -->
89+
{
90+
values.length > 0 && (
91+
<div>
92+
<h4 class="text-xl font-semibold text-black dark:text-white mb-4">
93+
{type === 'person' ? 'Mis Valores' : 'Nuestros Valores'}
94+
</h4>
95+
<div class="space-y-3">
96+
{values.map((value: unknown) => (
97+
<div class="flex items-center gap-3">
98+
<div class="w-2 h-2 bg-black dark:bg-white rounded-full flex-shrink-0" />
99+
<span class="text-black/70 dark:text-white/70">{value}</span>
100+
</div>
101+
))}
102+
</div>
103+
</div>
104+
)
105+
}
106+
</div>
107+
</div>
108+
</div>
109+
</div>
110+
</section>

0 commit comments

Comments
 (0)