create-absolutejs 0.8.3 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +24 -24
- package/README.md +179 -179
- package/dist/data.js +3 -0
- package/dist/generators/configurations/generateDrizzleConfig.js +15 -15
- package/dist/generators/configurations/generatePrettierrc.js +9 -9
- package/dist/generators/configurations/initializeRoot.js +2 -0
- package/dist/generators/db/dockerInitTemplates.js +79 -79
- package/dist/generators/db/generateDatabaseTypes.js +6 -6
- package/dist/generators/db/generateDockerContainer.js +19 -19
- package/dist/generators/db/generateDrizzleSchema.js +17 -17
- package/dist/generators/db/generateSqliteSchema.js +8 -8
- package/dist/generators/db/handlerTemplates.js +259 -259
- package/dist/generators/db/scaffoldDocker.js +1 -1
- package/dist/generators/html/generateHTMLPage.js +60 -60
- package/dist/generators/htmx/generateHTMXPage.js +86 -86
- package/dist/generators/project/generateAbsoluteAuthConfig.js +96 -96
- package/dist/generators/project/generateBuildBlock.d.ts +2 -1
- package/dist/generators/project/generateBuildBlock.js +9 -5
- package/dist/generators/project/generateDBBlock.js +9 -9
- package/dist/generators/project/generateImportsBlock.js +1 -0
- package/dist/generators/project/generateMarkupCSS.js +145 -145
- package/dist/generators/project/generateRoutesBlock.js +36 -36
- package/dist/generators/project/generateServer.d.ts +2 -1
- package/dist/generators/project/generateServer.js +29 -19
- package/dist/generators/project/scaffoldBackend.d.ts +2 -1
- package/dist/generators/project/scaffoldBackend.js +2 -1
- package/dist/generators/react/generateReactComponents.js +95 -95
- package/dist/generators/svelte/generateSveltePage.js +210 -210
- package/dist/generators/vue/generateVuePage.js +261 -261
- package/dist/messages.js +43 -43
- package/dist/scaffold.js +1 -0
- package/dist/templates/README.md +35 -35
- package/dist/templates/assets/svg/google-logo.svg +7 -7
- package/dist/templates/assets/svg/htmx-logo-black.svg +9 -9
- package/dist/templates/assets/svg/htmx-logo-white.svg +9 -9
- package/dist/templates/assets/svg/vue-logo.svg +4 -4
- package/dist/templates/configurations/.prettierignore +3 -3
- package/dist/templates/configurations/.prettierrc.json +9 -9
- package/dist/templates/configurations/drizzle.config.ts +13 -13
- package/dist/templates/configurations/eslint.config.mjs +243 -243
- package/dist/templates/configurations/tsconfig.example.json +98 -98
- package/dist/templates/constants.ts +2 -2
- package/dist/templates/db/docker-compose.db.yml +15 -15
- package/dist/templates/git/gitignore +51 -51
- package/dist/templates/html/scripts/typescript-example.ts +21 -21
- package/dist/templates/react/components/App.tsx +52 -52
- package/dist/templates/react/components/Head.tsx +34 -34
- package/dist/templates/react/components/OAuthLink.tsx +39 -39
- package/dist/templates/react/components/ProfilePicture.tsx +56 -56
- package/dist/templates/styles/colors.ts +11 -11
- package/dist/templates/styles/reset.css +84 -84
- package/dist/templates/svelte/components/Counter.svelte +19 -19
- package/dist/templates/svelte/composables/counter.svelte.ts +14 -14
- package/dist/templates/tailwind/postcss.config.ts +8 -8
- package/dist/templates/tailwind/tailwind.config.ts +7 -7
- package/dist/templates/tailwind/tailwind.css +1 -1
- package/dist/templates/vue/components/CountButton.vue +39 -39
- package/dist/templates/vue/composables/useCount.ts +14 -14
- package/dist/versions.d.ts +1 -1
- package/dist/versions.js +1 -1
- package/package.json +1 -1
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
import { ProviderOption } from 'citra';
|
|
2
|
-
|
|
3
|
-
type OAuthLinkProps = {
|
|
4
|
-
logoUrl: string;
|
|
5
|
-
name: string;
|
|
6
|
-
provider: Lowercase<ProviderOption> | undefined;
|
|
7
|
-
mode: 'in' | 'up';
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export const OAuthLink = ({
|
|
11
|
-
provider,
|
|
12
|
-
logoUrl,
|
|
13
|
-
name,
|
|
14
|
-
mode
|
|
15
|
-
}: OAuthLinkProps) => {
|
|
16
|
-
const buttonText = `Sign ${mode} with ${name}`;
|
|
17
|
-
|
|
18
|
-
return (
|
|
19
|
-
<a
|
|
20
|
-
style={{
|
|
21
|
-
alignItems: 'center',
|
|
22
|
-
display: 'flex',
|
|
23
|
-
gap: '0.5rem'
|
|
24
|
-
}}
|
|
25
|
-
href={provider ? `/oauth2/${provider}/authorization` : undefined}
|
|
26
|
-
>
|
|
27
|
-
{provider ? (
|
|
28
|
-
<img
|
|
29
|
-
style={{ height: '2rem', width: '2rem' }}
|
|
30
|
-
alt={`${name} logo`}
|
|
31
|
-
src={logoUrl}
|
|
32
|
-
/>
|
|
33
|
-
) : (
|
|
34
|
-
<p>Provider not configured</p>
|
|
35
|
-
)}
|
|
36
|
-
<span>{buttonText}</span>
|
|
37
|
-
</a>
|
|
38
|
-
);
|
|
39
|
-
};
|
|
1
|
+
import { ProviderOption } from 'citra';
|
|
2
|
+
|
|
3
|
+
type OAuthLinkProps = {
|
|
4
|
+
logoUrl: string;
|
|
5
|
+
name: string;
|
|
6
|
+
provider: Lowercase<ProviderOption> | undefined;
|
|
7
|
+
mode: 'in' | 'up';
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export const OAuthLink = ({
|
|
11
|
+
provider,
|
|
12
|
+
logoUrl,
|
|
13
|
+
name,
|
|
14
|
+
mode
|
|
15
|
+
}: OAuthLinkProps) => {
|
|
16
|
+
const buttonText = `Sign ${mode} with ${name}`;
|
|
17
|
+
|
|
18
|
+
return (
|
|
19
|
+
<a
|
|
20
|
+
style={{
|
|
21
|
+
alignItems: 'center',
|
|
22
|
+
display: 'flex',
|
|
23
|
+
gap: '0.5rem'
|
|
24
|
+
}}
|
|
25
|
+
href={provider ? `/oauth2/${provider}/authorization` : undefined}
|
|
26
|
+
>
|
|
27
|
+
{provider ? (
|
|
28
|
+
<img
|
|
29
|
+
style={{ height: '2rem', width: '2rem' }}
|
|
30
|
+
alt={`${name} logo`}
|
|
31
|
+
src={logoUrl}
|
|
32
|
+
/>
|
|
33
|
+
) : (
|
|
34
|
+
<p>Provider not configured</p>
|
|
35
|
+
)}
|
|
36
|
+
<span>{buttonText}</span>
|
|
37
|
+
</a>
|
|
38
|
+
);
|
|
39
|
+
};
|
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
type ProfilePictureProps = {
|
|
2
|
-
userImage: string | null | undefined;
|
|
3
|
-
givenName?: string;
|
|
4
|
-
familyName?: string;
|
|
5
|
-
color?: string;
|
|
6
|
-
width?: string;
|
|
7
|
-
height?: string;
|
|
8
|
-
fontSize?: string;
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
export const ProfilePicture = ({
|
|
12
|
-
userImage,
|
|
13
|
-
givenName = '',
|
|
14
|
-
familyName = '',
|
|
15
|
-
color = '#4285F4',
|
|
16
|
-
width = '2rem',
|
|
17
|
-
height = '2rem',
|
|
18
|
-
fontSize = '0.85rem'
|
|
19
|
-
}: ProfilePictureProps) => {
|
|
20
|
-
if (userImage) {
|
|
21
|
-
return (
|
|
22
|
-
<img
|
|
23
|
-
alt="Profile"
|
|
24
|
-
src={userImage}
|
|
25
|
-
style={{
|
|
26
|
-
borderRadius: '50%',
|
|
27
|
-
height,
|
|
28
|
-
objectFit: 'cover',
|
|
29
|
-
width
|
|
30
|
-
}}
|
|
31
|
-
/>
|
|
32
|
-
);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
const initials = `${givenName.charAt(0).toUpperCase()}${familyName.charAt(0).toUpperCase()}`;
|
|
36
|
-
|
|
37
|
-
return (
|
|
38
|
-
<div
|
|
39
|
-
style={{
|
|
40
|
-
alignItems: 'center',
|
|
41
|
-
backgroundColor: color,
|
|
42
|
-
borderRadius: '50%',
|
|
43
|
-
color: 'white',
|
|
44
|
-
display: 'flex',
|
|
45
|
-
fontSize,
|
|
46
|
-
fontWeight: 600,
|
|
47
|
-
height,
|
|
48
|
-
justifyContent: 'center',
|
|
49
|
-
userSelect: 'none',
|
|
50
|
-
width
|
|
51
|
-
}}
|
|
52
|
-
>
|
|
53
|
-
{initials}
|
|
54
|
-
</div>
|
|
55
|
-
);
|
|
56
|
-
};
|
|
1
|
+
type ProfilePictureProps = {
|
|
2
|
+
userImage: string | null | undefined;
|
|
3
|
+
givenName?: string;
|
|
4
|
+
familyName?: string;
|
|
5
|
+
color?: string;
|
|
6
|
+
width?: string;
|
|
7
|
+
height?: string;
|
|
8
|
+
fontSize?: string;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export const ProfilePicture = ({
|
|
12
|
+
userImage,
|
|
13
|
+
givenName = '',
|
|
14
|
+
familyName = '',
|
|
15
|
+
color = '#4285F4',
|
|
16
|
+
width = '2rem',
|
|
17
|
+
height = '2rem',
|
|
18
|
+
fontSize = '0.85rem'
|
|
19
|
+
}: ProfilePictureProps) => {
|
|
20
|
+
if (userImage) {
|
|
21
|
+
return (
|
|
22
|
+
<img
|
|
23
|
+
alt="Profile"
|
|
24
|
+
src={userImage}
|
|
25
|
+
style={{
|
|
26
|
+
borderRadius: '50%',
|
|
27
|
+
height,
|
|
28
|
+
objectFit: 'cover',
|
|
29
|
+
width
|
|
30
|
+
}}
|
|
31
|
+
/>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
const initials = `${givenName.charAt(0).toUpperCase()}${familyName.charAt(0).toUpperCase()}`;
|
|
36
|
+
|
|
37
|
+
return (
|
|
38
|
+
<div
|
|
39
|
+
style={{
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
backgroundColor: color,
|
|
42
|
+
borderRadius: '50%',
|
|
43
|
+
color: 'white',
|
|
44
|
+
display: 'flex',
|
|
45
|
+
fontSize,
|
|
46
|
+
fontWeight: 600,
|
|
47
|
+
height,
|
|
48
|
+
justifyContent: 'center',
|
|
49
|
+
userSelect: 'none',
|
|
50
|
+
width
|
|
51
|
+
}}
|
|
52
|
+
>
|
|
53
|
+
{initials}
|
|
54
|
+
</div>
|
|
55
|
+
);
|
|
56
|
+
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
export const primaryColor = '#5FBEEB';
|
|
2
|
-
export const secondaryColor = '#35d5a2';
|
|
3
|
-
export const tertiaryColor = '#ff4b91';
|
|
4
|
-
|
|
5
|
-
export const lightPrimaryColor = '#ffffff';
|
|
6
|
-
export const lightSecondaryColor = '#f5f5f5';
|
|
7
|
-
export const lightTertiaryColor = '#e0e0e0';
|
|
8
|
-
|
|
9
|
-
export const darkPrimaryColor = '#1a1a1a';
|
|
10
|
-
export const darkSecondaryColor = '#2c2c2c';
|
|
11
|
-
export const darkTertiaryColor = '#3c3c3c';
|
|
1
|
+
export const primaryColor = '#5FBEEB';
|
|
2
|
+
export const secondaryColor = '#35d5a2';
|
|
3
|
+
export const tertiaryColor = '#ff4b91';
|
|
4
|
+
|
|
5
|
+
export const lightPrimaryColor = '#ffffff';
|
|
6
|
+
export const lightSecondaryColor = '#f5f5f5';
|
|
7
|
+
export const lightTertiaryColor = '#e0e0e0';
|
|
8
|
+
|
|
9
|
+
export const darkPrimaryColor = '#1a1a1a';
|
|
10
|
+
export const darkSecondaryColor = '#2c2c2c';
|
|
11
|
+
export const darkTertiaryColor = '#3c3c3c';
|
|
@@ -1,84 +1,84 @@
|
|
|
1
|
-
* {
|
|
2
|
-
box-sizing: border-box;
|
|
3
|
-
line-height: 1.5;
|
|
4
|
-
margin: 0;
|
|
5
|
-
padding: 0;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
html {
|
|
9
|
-
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
10
|
-
height: 100%;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
body {
|
|
14
|
-
background-color: #2c2c2c;
|
|
15
|
-
color: #f5f5f5;
|
|
16
|
-
color-scheme: light dark;
|
|
17
|
-
display: flex;
|
|
18
|
-
flex-direction: column;
|
|
19
|
-
font-synthesis: none;
|
|
20
|
-
font-weight: 400;
|
|
21
|
-
height: 100%;
|
|
22
|
-
-moz-osx-font-smoothing: grayscale;
|
|
23
|
-
text-rendering: optimizeLegibility;
|
|
24
|
-
-webkit-font-smoothing: antialiased;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
main {
|
|
28
|
-
align-items: center;
|
|
29
|
-
display: flex;
|
|
30
|
-
flex: 1;
|
|
31
|
-
flex-direction: column;
|
|
32
|
-
justify-content: center;
|
|
33
|
-
text-align: center;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
h1,
|
|
37
|
-
h2,
|
|
38
|
-
h3,
|
|
39
|
-
h4,
|
|
40
|
-
h5,
|
|
41
|
-
h6 {
|
|
42
|
-
line-height: 1.1;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
p {
|
|
46
|
-
font-size: 1.2rem;
|
|
47
|
-
max-width: 1280px;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
a {
|
|
51
|
-
color: #5fbeeb;
|
|
52
|
-
font-size: 1.5rem;
|
|
53
|
-
font-weight: 500;
|
|
54
|
-
position: relative;
|
|
55
|
-
text-decoration: none;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
button {
|
|
59
|
-
background-color: #1a1a1a;
|
|
60
|
-
border: 1px solid transparent;
|
|
61
|
-
border-radius: 0.5rem;
|
|
62
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
63
|
-
cursor: pointer;
|
|
64
|
-
font-family: inherit;
|
|
65
|
-
font-size: 1.1rem;
|
|
66
|
-
font-weight: 500;
|
|
67
|
-
margin: 2rem 0;
|
|
68
|
-
padding: 0.6rem 1.2rem;
|
|
69
|
-
transition: border-color 0.25s;
|
|
70
|
-
}
|
|
71
|
-
button:hover {
|
|
72
|
-
border-color: #5fbeeb;
|
|
73
|
-
}
|
|
74
|
-
button:focus,
|
|
75
|
-
button:focus-visible {
|
|
76
|
-
outline: 4px auto -webkit-focus-ring-color;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
@media (prefers-color-scheme: light) {
|
|
80
|
-
body {
|
|
81
|
-
background-color: #f5f5f5;
|
|
82
|
-
color: #1a1a1a;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
1
|
+
* {
|
|
2
|
+
box-sizing: border-box;
|
|
3
|
+
line-height: 1.5;
|
|
4
|
+
margin: 0;
|
|
5
|
+
padding: 0;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
html {
|
|
9
|
+
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
10
|
+
height: 100%;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
body {
|
|
14
|
+
background-color: #2c2c2c;
|
|
15
|
+
color: #f5f5f5;
|
|
16
|
+
color-scheme: light dark;
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
font-synthesis: none;
|
|
20
|
+
font-weight: 400;
|
|
21
|
+
height: 100%;
|
|
22
|
+
-moz-osx-font-smoothing: grayscale;
|
|
23
|
+
text-rendering: optimizeLegibility;
|
|
24
|
+
-webkit-font-smoothing: antialiased;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
main {
|
|
28
|
+
align-items: center;
|
|
29
|
+
display: flex;
|
|
30
|
+
flex: 1;
|
|
31
|
+
flex-direction: column;
|
|
32
|
+
justify-content: center;
|
|
33
|
+
text-align: center;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
h1,
|
|
37
|
+
h2,
|
|
38
|
+
h3,
|
|
39
|
+
h4,
|
|
40
|
+
h5,
|
|
41
|
+
h6 {
|
|
42
|
+
line-height: 1.1;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
p {
|
|
46
|
+
font-size: 1.2rem;
|
|
47
|
+
max-width: 1280px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
a {
|
|
51
|
+
color: #5fbeeb;
|
|
52
|
+
font-size: 1.5rem;
|
|
53
|
+
font-weight: 500;
|
|
54
|
+
position: relative;
|
|
55
|
+
text-decoration: none;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
button {
|
|
59
|
+
background-color: #1a1a1a;
|
|
60
|
+
border: 1px solid transparent;
|
|
61
|
+
border-radius: 0.5rem;
|
|
62
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
63
|
+
cursor: pointer;
|
|
64
|
+
font-family: inherit;
|
|
65
|
+
font-size: 1.1rem;
|
|
66
|
+
font-weight: 500;
|
|
67
|
+
margin: 2rem 0;
|
|
68
|
+
padding: 0.6rem 1.2rem;
|
|
69
|
+
transition: border-color 0.25s;
|
|
70
|
+
}
|
|
71
|
+
button:hover {
|
|
72
|
+
border-color: #5fbeeb;
|
|
73
|
+
}
|
|
74
|
+
button:focus,
|
|
75
|
+
button:focus-visible {
|
|
76
|
+
outline: 4px auto -webkit-focus-ring-color;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@media (prefers-color-scheme: light) {
|
|
80
|
+
body {
|
|
81
|
+
background-color: #f5f5f5;
|
|
82
|
+
color: #1a1a1a;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
type CounterProps = {
|
|
3
|
-
initialCount: number;
|
|
4
|
-
};
|
|
5
|
-
|
|
6
|
-
let { initialCount }: CounterProps = $props();
|
|
7
|
-
import { counter } from '../composables/counter.svelte';
|
|
8
|
-
const { getCount, increment } = counter(initialCount);
|
|
9
|
-
</script>
|
|
10
|
-
|
|
11
|
-
<button onclick={increment}>count is {getCount()}</button>
|
|
12
|
-
|
|
13
|
-
<style>
|
|
14
|
-
@media (prefers-color-scheme: light) {
|
|
15
|
-
button {
|
|
16
|
-
background-color: #ffffff;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
</style>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
type CounterProps = {
|
|
3
|
+
initialCount: number;
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
let { initialCount }: CounterProps = $props();
|
|
7
|
+
import { counter } from '../composables/counter.svelte';
|
|
8
|
+
const { getCount, increment } = counter(initialCount);
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<button onclick={increment}>count is {getCount()}</button>
|
|
12
|
+
|
|
13
|
+
<style>
|
|
14
|
+
@media (prefers-color-scheme: light) {
|
|
15
|
+
button {
|
|
16
|
+
background-color: #ffffff;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
</style>
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
export const counter = (initialCount: number) => {
|
|
2
|
-
let count = $state(initialCount);
|
|
3
|
-
|
|
4
|
-
const getCount = () => count;
|
|
5
|
-
|
|
6
|
-
const increment = () => {
|
|
7
|
-
count += 1;
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
return {
|
|
11
|
-
getCount,
|
|
12
|
-
increment
|
|
13
|
-
};
|
|
14
|
-
};
|
|
1
|
+
export const counter = (initialCount: number) => {
|
|
2
|
+
let count = $state(initialCount);
|
|
3
|
+
|
|
4
|
+
const getCount = () => count;
|
|
5
|
+
|
|
6
|
+
const increment = () => {
|
|
7
|
+
count += 1;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
return {
|
|
11
|
+
getCount,
|
|
12
|
+
increment
|
|
13
|
+
};
|
|
14
|
+
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import autoprefixer from 'autoprefixer';
|
|
2
|
-
import tailwindcss from 'tailwindcss';
|
|
3
|
-
|
|
4
|
-
const config = {
|
|
5
|
-
plugins: [tailwindcss, autoprefixer]
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
export default config;
|
|
1
|
+
import autoprefixer from 'autoprefixer';
|
|
2
|
+
import tailwindcss from 'tailwindcss';
|
|
3
|
+
|
|
4
|
+
const config = {
|
|
5
|
+
plugins: [tailwindcss, autoprefixer]
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
export default config;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import type { Config } from 'tailwindcss';
|
|
2
|
-
|
|
3
|
-
const config: Config = {
|
|
4
|
-
content: ['./src/frontend/**/*.{js,ts,jsx,tsx,mdx}']
|
|
5
|
-
};
|
|
6
|
-
|
|
7
|
-
export default config;
|
|
1
|
+
import type { Config } from 'tailwindcss';
|
|
2
|
+
|
|
3
|
+
const config: Config = {
|
|
4
|
+
content: ['./src/frontend/**/*.{js,ts,jsx,tsx,mdx}']
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
export default config;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import 'tailwindcss';
|
|
1
|
+
@import 'tailwindcss';
|
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { useCount } from '../composables/useCount';
|
|
3
|
-
|
|
4
|
-
const props = defineProps<{ initialCount: number }>();
|
|
5
|
-
const { count, increment } = useCount(props.initialCount);
|
|
6
|
-
</script>
|
|
7
|
-
|
|
8
|
-
<template>
|
|
9
|
-
<button @click="increment">count is {{ count }}</button>
|
|
10
|
-
</template>
|
|
11
|
-
|
|
12
|
-
<style scoped>
|
|
13
|
-
button {
|
|
14
|
-
background-color: #1a1a1a;
|
|
15
|
-
border: 1px solid transparent;
|
|
16
|
-
border-radius: 0.5rem;
|
|
17
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
18
|
-
cursor: pointer;
|
|
19
|
-
font-family: inherit;
|
|
20
|
-
font-size: 1.1rem;
|
|
21
|
-
font-weight: 500;
|
|
22
|
-
margin: 2rem 0;
|
|
23
|
-
padding: 0.6rem 1.2rem;
|
|
24
|
-
transition: border-color 0.25s;
|
|
25
|
-
}
|
|
26
|
-
button:hover {
|
|
27
|
-
border-color: #5fbeeb;
|
|
28
|
-
}
|
|
29
|
-
button:focus,
|
|
30
|
-
button:focus-visible {
|
|
31
|
-
outline: 4px auto -webkit-focus-ring-color;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
@media (prefers-color-scheme: light) {
|
|
35
|
-
button {
|
|
36
|
-
background-color: #ffffff;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
</style>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { useCount } from '../composables/useCount';
|
|
3
|
+
|
|
4
|
+
const props = defineProps<{ initialCount: number }>();
|
|
5
|
+
const { count, increment } = useCount(props.initialCount);
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<template>
|
|
9
|
+
<button @click="increment">count is {{ count }}</button>
|
|
10
|
+
</template>
|
|
11
|
+
|
|
12
|
+
<style scoped>
|
|
13
|
+
button {
|
|
14
|
+
background-color: #1a1a1a;
|
|
15
|
+
border: 1px solid transparent;
|
|
16
|
+
border-radius: 0.5rem;
|
|
17
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
18
|
+
cursor: pointer;
|
|
19
|
+
font-family: inherit;
|
|
20
|
+
font-size: 1.1rem;
|
|
21
|
+
font-weight: 500;
|
|
22
|
+
margin: 2rem 0;
|
|
23
|
+
padding: 0.6rem 1.2rem;
|
|
24
|
+
transition: border-color 0.25s;
|
|
25
|
+
}
|
|
26
|
+
button:hover {
|
|
27
|
+
border-color: #5fbeeb;
|
|
28
|
+
}
|
|
29
|
+
button:focus,
|
|
30
|
+
button:focus-visible {
|
|
31
|
+
outline: 4px auto -webkit-focus-ring-color;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@media (prefers-color-scheme: light) {
|
|
35
|
+
button {
|
|
36
|
+
background-color: #ffffff;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
</style>
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { ref } from 'vue';
|
|
2
|
-
|
|
3
|
-
export const useCount = (initialCount: number) => {
|
|
4
|
-
const count = ref(initialCount);
|
|
5
|
-
|
|
6
|
-
const increment = () => {
|
|
7
|
-
count.value++;
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
return {
|
|
11
|
-
count,
|
|
12
|
-
increment
|
|
13
|
-
};
|
|
14
|
-
};
|
|
1
|
+
import { ref } from 'vue';
|
|
2
|
+
|
|
3
|
+
export const useCount = (initialCount: number) => {
|
|
4
|
+
const count = ref(initialCount);
|
|
5
|
+
|
|
6
|
+
const increment = () => {
|
|
7
|
+
count.value++;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
return {
|
|
11
|
+
count,
|
|
12
|
+
increment
|
|
13
|
+
};
|
|
14
|
+
};
|
package/dist/versions.d.ts
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Run `bun run check-versions` to compare against latest npm versions.
|
|
5
5
|
*/
|
|
6
6
|
export declare const versions: {
|
|
7
|
-
readonly '@absolutejs/absolute': "0.
|
|
7
|
+
readonly '@absolutejs/absolute': "0.15.7";
|
|
8
8
|
readonly '@absolutejs/auth': "0.22.0";
|
|
9
9
|
readonly '@elysiajs/static': "1.4.7";
|
|
10
10
|
readonly elysia: "1.4.22";
|
package/dist/versions.js
CHANGED
package/package.json
CHANGED