Skip to content

Commit c710311

Browse files
FrontendlandFrontendland
committed
✨ Make fonts configurable, add type declaration and reexports
1 parent eda32e9 commit c710311

File tree

7 files changed

+50
-38
lines changed

7 files changed

+50
-38
lines changed

‎package.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"scripts": {
66
"dev": "astro dev",
77
"start": "astro dev",
8-
"build": "astro check && astro build"
8+
"build": "astro check && astro build",
9+
"build:package": "minify && copy components public scss package.json --outDir=dist"
910
},
1011
"dependencies": {
1112
"@astrojs/check": "0.7.0",
@@ -14,5 +15,10 @@
1415
"sass": "1.77.5",
1516
"svelte": "4.2.18",
1617
"typescript": "5.4.5"
18+
},
19+
"exports": {
20+
"./astro": "./astro.js",
21+
"./styles": "./scss/index.scss",
22+
"./config": "./scss/config.scss"
1723
}
1824
}

‎src/astro.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare module 'webcoreui/astro' {
2+
import type { Props as AccordionProps } from './components/Accordion/Accordion.astro'
3+
4+
export function Accordion(_props: AccordionProps): any
5+
}

‎src/astro.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Accordion from './components/Accordion/Accordion.astro'
2+
3+
export const Accordion = Accordion

‎src/components/Accordion/Accordion.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
interface Props {
2+
export interface Props {
33
items: {
44
title: string
55
content: string

‎src/pages/accordion.astro

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
---
2-
import Button from '@components/Button/Button.astro'
3-
import Card from '@components/Card/Card.astro'
4-
import Accordion from '@components/Accordion/Accordion.astro'
2+
import AstroAccordion from '@components/Accordion/Accordion.astro'
3+
4+
const accordionItems = [{
5+
title: 'Do you offer support?',
6+
content: 'We provide 30 days of support.'
7+
}, {
8+
title: 'Can I request customizations?',
9+
content: 'Yes!'
10+
}, {
11+
title: 'Are there any refunds?',
12+
content: 'Hopefully.'
13+
}]
514
---
615

716
<!DOCTYPE html>
@@ -18,18 +27,7 @@ import Accordion from '@components/Accordion/Accordion.astro'
1827
<img src="/img/logo.png" alt="Logo" />
1928
</a>
2029
<h1>Accordion</h1>
21-
<Accordion
22-
items={[{
23-
title: 'Do you offer support?',
24-
content: 'We provide 30 days of support.'
25-
}, {
26-
title: 'Can I request customizations?',
27-
content: 'Yes!'
28-
}, {
29-
title: 'Are there any refunds?',
30-
content: 'Hopefully.'
31-
}]}
32-
/>
30+
<AstroAccordion items={accordionItems} />
3331
</div>
3432
</body>
3533
</html>

‎src/pages/index.astro

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import Accordion from '@components/Accordion/Accordion.astro'
2323
</h1>
2424
<h2>
2525
Rocket launch your frontend projects with fully coded components. <br />
26-
Customizable. Lightweight. Accessible.
26+
Configurable. Themeable. Accessible.
2727
</h2>
2828
<div class="cta">
2929
<Button
@@ -56,7 +56,10 @@ import Accordion from '@components/Accordion/Accordion.astro'
5656

5757
<style is:global lang="scss">
5858
@import '../scss/index.scss';
59-
@include Setup();
59+
@include Setup((
60+
fontRegular: '/fonts/Inter-Regular.woff2',
61+
fontBold: '/fonts/Inter-Bold.woff2'
62+
));
6063

6164
.container {
6265
margin-top: 20px;

‎src/scss/resets.scss

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
@mixin Resets() {
2-
@if (config('includeFonts')) {
2+
@if (config('fontRegular')) {
33
@font-face {
44
font-family: Regular;
55
font-display: swap;
6-
src: url('/fonts/Inter-Regular.woff2') format('woff2');
6+
src: url(#{config('fontRegular')}) format('woff2');
77
}
8-
8+
}
9+
10+
@if (config('fontBold')) {
911
@font-face {
1012
font-family: Bold;
1113
font-display: swap;
12-
src: url('/fonts/Inter-Bold.woff2') format('woff2');
14+
src: url(#{config('fontBold')}) format('woff2');
1315
}
1416
}
15-
17+
1618
* {
1719
box-sizing: border-box;
1820
}
@@ -22,21 +24,16 @@
2224
color: #FFF;
2325
margin: 0;
2426
font-size: 18px;
25-
26-
@if (config('includeFonts')) {
27-
font-family: Regular, sans-serif;
28-
}
27+
font-family: Regular, sans-serif;
2928
}
30-
31-
@if (config('includeFonts')) {
32-
h1,
33-
h2,
34-
h3,
35-
h4,
36-
h5,
37-
h6 {
38-
font-family: Bold, sans-serif;
39-
}
29+
30+
h1,
31+
h2,
32+
h3,
33+
h4,
34+
h5,
35+
h6 {
36+
font-family: Bold, sans-serif;
4037
}
4138

4239
a {

0 commit comments

Comments
 (0)