spoko-design-system 0.2.87 → 0.2.89

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.
Files changed (171) hide show
  1. package/.astro/content.d.ts +167 -0
  2. package/.astro/settings.json +4 -4
  3. package/.github/dependabot.yml +11 -11
  4. package/.github/todo.yml +3 -3
  5. package/.github/workflows/deploy.yml +39 -39
  6. package/.stackblitzrc +5 -5
  7. package/.vscode/extensions.json +5 -5
  8. package/.vscode/launch.json +11 -11
  9. package/.vscode/settings.json +5 -5
  10. package/LICENSE +21 -21
  11. package/README.md +114 -113
  12. package/astro-i18next.config.mjs +17 -17
  13. package/astro-i18next.config.ts +10 -10
  14. package/astro.config.mjs +83 -83
  15. package/dev-dist/sw.js +91 -91
  16. package/dev-dist/workbox-c676b6d3.js +3391 -3391
  17. package/icon.config.ts +224 -224
  18. package/index.ts +62 -62
  19. package/package.json +3 -3
  20. package/public/fonts/lg.svg +53 -53
  21. package/public/fonts/vwhead-bold-demo.html +549 -549
  22. package/public/fonts/vwhead-regular-demo.html +549 -549
  23. package/public/fonts/vwtext-bold-demo.html +549 -549
  24. package/public/fonts/vwtext-regular-demo.html +549 -549
  25. package/public/github.svg +3 -3
  26. package/public/grid_dot.svg +4 -4
  27. package/public/linkedin.svg +44 -44
  28. package/public/locales/en/translation.json +8 -8
  29. package/public/locales/pl/translation.json +8 -8
  30. package/public/make-scrollable-code-focusable.js +3 -3
  31. package/public/pagefind.yml +3 -3
  32. package/public/polo.blue.svg +29 -29
  33. package/public/spoko.space.svg +71 -71
  34. package/public/twitter.svg +46 -46
  35. package/renovate.json +6 -6
  36. package/sandbox.config.json +11 -11
  37. package/src/MyComponent.astro +8 -8
  38. package/src/components/Badge.vue +19 -19
  39. package/src/components/Badges.vue +21 -21
  40. package/src/components/Breadcrumbs.vue +107 -107
  41. package/src/components/Button.vue +63 -63
  42. package/src/components/ButtonCopy.vue +36 -36
  43. package/src/components/Card.astro +27 -27
  44. package/src/components/Carousel.astro +26 -26
  45. package/src/components/Category/CategoriesCarousel.astro +101 -101
  46. package/src/components/Category/CategoryDetails.astro +135 -137
  47. package/src/components/Category/CategoryLink.vue +23 -23
  48. package/src/components/Category/CategorySidebarToggler.vue +9 -9
  49. package/src/components/Category/CategoryTile.astro +49 -49
  50. package/src/components/Category/CategoryViewToggler.astro +107 -107
  51. package/src/components/Category/SubCategoryLink.vue +29 -29
  52. package/src/components/CategoryLink.astro +18 -18
  53. package/src/components/Copyright.astro +12 -12
  54. package/src/components/Date.astro +7 -7
  55. package/src/components/Faq.astro +33 -33
  56. package/src/components/FaqItem.astro +96 -96
  57. package/src/components/FeaturesList.vue +41 -41
  58. package/src/components/FuckRussia.vue +62 -62
  59. package/src/components/HandDrive.astro +29 -29
  60. package/src/components/Header/Header.astro +210 -210
  61. package/src/components/Header/SkipToContent.astro +1 -1
  62. package/src/components/Headline.vue +48 -48
  63. package/src/components/Image.astro +30 -30
  64. package/src/components/Jumbatron.vue +40 -40
  65. package/src/components/LeftSidebar.astro +53 -53
  66. package/src/components/MainColors.vue +23 -23
  67. package/src/components/MainInput.vue +15 -15
  68. package/src/components/Modal.astro +27 -27
  69. package/src/components/PageContent.astro +5 -5
  70. package/src/components/PartNumber.vue +27 -27
  71. package/src/components/PostHeader.astro +103 -103
  72. package/src/components/PrCode.vue +141 -141
  73. package/src/components/Product/ProductButton.vue +18 -18
  74. package/src/components/Product/ProductCarousel.astro +35 -35
  75. package/src/components/Product/ProductCodes.vue +174 -174
  76. package/src/components/Product/ProductEngineType.vue +42 -42
  77. package/src/components/Product/ProductImage.astro +40 -40
  78. package/src/components/Product/ProductLink.astro +101 -101
  79. package/src/components/Product/ProductLink.vue +59 -59
  80. package/src/components/Product/ProductLinkInfo.astro +37 -37
  81. package/src/components/Product/ProductNumber.astro +61 -61
  82. package/src/components/ProductCarousel.astro +38 -38
  83. package/src/components/ProductCodes.vue +39 -39
  84. package/src/components/ProductDetailName.vue +52 -52
  85. package/src/components/ProductDetailsList.vue +65 -65
  86. package/src/components/ProductTile.astro +48 -48
  87. package/src/components/Quote.vue +23 -23
  88. package/src/components/ReloadPrompt.astro +50 -50
  89. package/src/components/SlimBanner.vue +72 -72
  90. package/src/components/Table.vue +32 -32
  91. package/src/components/TableOfContents.astro +15 -15
  92. package/src/components/Translations.vue +23 -23
  93. package/src/components/flags/FlagPL.vue +3 -3
  94. package/src/components/flags/FlagUA.vue +2 -2
  95. package/src/components/layout/Container.astro +7 -7
  96. package/src/components/layout/Header.astro +80 -80
  97. package/src/config.ts +56 -56
  98. package/src/design.config.ts +98 -98
  99. package/src/env.d.ts +6 -6
  100. package/src/layouts/Layout.astro +60 -60
  101. package/src/layouts/MainLayout.astro +81 -81
  102. package/src/layouts/partials/FooterCommon.astro +4 -4
  103. package/src/layouts/partials/HeadCommon.astro +44 -44
  104. package/src/layouts/partials/HeadSEO.astro +41 -41
  105. package/src/pages/components/badges.mdx +57 -57
  106. package/src/pages/components/breadcrumbs.mdx +139 -139
  107. package/src/pages/components/buttons.mdx +253 -253
  108. package/src/pages/components/card.mdx +294 -294
  109. package/src/pages/components/carousel.mdx +62 -62
  110. package/src/pages/components/copyright.mdx +42 -42
  111. package/src/pages/components/details-list.mdx +115 -115
  112. package/src/pages/components/features-list.mdx +37 -37
  113. package/src/pages/components/flags.mdx +49 -49
  114. package/src/pages/components/fuck-russia.mdx +39 -39
  115. package/src/pages/components/hand-drive.mdx +38 -38
  116. package/src/pages/components/headline.mdx +152 -152
  117. package/src/pages/components/icons.astro +135 -135
  118. package/src/pages/components/image.mdx +513 -513
  119. package/src/pages/components/input.mdx +45 -45
  120. package/src/pages/components/jumbatron.mdx +95 -95
  121. package/src/pages/components/modal.mdx +64 -64
  122. package/src/pages/components/post-header.mdx +60 -60
  123. package/src/pages/components/pr-code.mdx +65 -65
  124. package/src/pages/components/product-number.mdx +58 -58
  125. package/src/pages/components/product-tile.mdx +51 -51
  126. package/src/pages/components/quote.mdx +33 -33
  127. package/src/pages/components/slimbanner.mdx +35 -35
  128. package/src/pages/components/table.mdx +108 -108
  129. package/src/pages/core/colors.mdx +10 -10
  130. package/src/pages/core/grid.mdx +89 -89
  131. package/src/pages/core/introduction.mdx +77 -77
  132. package/src/pages/core/shadows.astro +20 -20
  133. package/src/pages/core/typography.astro +47 -47
  134. package/src/pages/index.astro +126 -126
  135. package/src/pages/patterns/introduction.mdx +60 -60
  136. package/src/pwa.ts +12 -12
  137. package/src/styles/_variables.scss +70 -70
  138. package/src/styles/base/base.css +184 -184
  139. package/src/styles/base/grid.css +92 -92
  140. package/src/styles/base/typography.css +70 -70
  141. package/src/styles/content.css +73 -73
  142. package/src/styles/main.css +7 -7
  143. package/src/types/Product.ts +31 -31
  144. package/src/types/astro.d.ts +3 -3
  145. package/src/utils/product/getPriceFormatted.ts +15 -15
  146. package/src/utils/product/getProductChecklist.ts +17 -17
  147. package/src/utils/product/useFormatProductNumber.ts +41 -41
  148. package/src/utils/seo/getShorterDescription.ts +14 -14
  149. package/src/utils/text/formatDate.ts +5 -5
  150. package/src/utils/text/formatLocaleNumber.ts +6 -6
  151. package/src/utils/text/formatPad.ts +12 -12
  152. package/src/utils/text/getNumberFormatted.ts +33 -33
  153. package/src/utils/text/getTranslatedLink.ts +5 -5
  154. package/src/utils/text.ts +19 -19
  155. package/tailwind.config.cjs +8 -8
  156. package/tsconfig.json +28 -28
  157. package/{src/uno-config → uno-config}/index.ts +58 -58
  158. package/{src/uno-config → uno-config}/theme/breakpoints.ts +9 -9
  159. package/{src/uno-config → uno-config}/theme/colors.ts +66 -66
  160. package/{src/uno-config → uno-config}/theme/dimensions.ts +17 -17
  161. package/{src/uno-config → uno-config}/theme/effects.ts +14 -14
  162. package/{src/uno-config → uno-config}/theme/grid.ts +10 -10
  163. package/{src/uno-config → uno-config}/theme/index.ts +25 -25
  164. package/{src/uno-config → uno-config}/theme/shortcuts/buttons.ts +38 -35
  165. package/{src/uno-config → uno-config}/theme/shortcuts/components.ts +80 -61
  166. package/uno-config/theme/shortcuts/constants.ts +3 -0
  167. package/{src/uno-config → uno-config}/theme/shortcuts/index.ts +16 -14
  168. package/{src/uno-config → uno-config}/theme/shortcuts/layout.ts +58 -54
  169. package/uno-config/theme/shortcuts/product.ts +6 -0
  170. package/{src/uno-config → uno-config}/theme/typography.ts +29 -29
  171. package/uno.config.ts +2 -3
@@ -0,0 +1,167 @@
1
+ declare module 'astro:content' {
2
+ interface Render {
3
+ '.mdx': Promise<{
4
+ Content: import('astro').MarkdownInstance<{}>['Content'];
5
+ headings: import('astro').MarkdownHeading[];
6
+ remarkPluginFrontmatter: Record<string, any>;
7
+ components: import('astro').MDXInstance<{}>['components'];
8
+ }>;
9
+ }
10
+ }
11
+
12
+ declare module 'astro:content' {
13
+ export interface RenderResult {
14
+ Content: import('astro/runtime/server/index.js').AstroComponentFactory;
15
+ headings: import('astro').MarkdownHeading[];
16
+ remarkPluginFrontmatter: Record<string, any>;
17
+ }
18
+ interface Render {
19
+ '.md': Promise<RenderResult>;
20
+ }
21
+
22
+ export interface RenderedContent {
23
+ html: string;
24
+ metadata?: {
25
+ imagePaths: Array<string>;
26
+ [key: string]: unknown;
27
+ };
28
+ }
29
+ }
30
+
31
+ declare module 'astro:content' {
32
+ type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
33
+
34
+ export type CollectionKey = keyof AnyEntryMap;
35
+ export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
36
+
37
+ export type ContentCollectionKey = keyof ContentEntryMap;
38
+ export type DataCollectionKey = keyof DataEntryMap;
39
+
40
+ type AllValuesOf<T> = T extends any ? T[keyof T] : never;
41
+ type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
42
+ ContentEntryMap[C]
43
+ >['slug'];
44
+
45
+ export type ReferenceDataEntry<
46
+ C extends CollectionKey,
47
+ E extends keyof DataEntryMap[C] = string,
48
+ > = {
49
+ collection: C;
50
+ id: E;
51
+ };
52
+ export type ReferenceContentEntry<
53
+ C extends keyof ContentEntryMap,
54
+ E extends ValidContentEntrySlug<C> | (string & {}) = string,
55
+ > = {
56
+ collection: C;
57
+ slug: E;
58
+ };
59
+
60
+ /** @deprecated Use `getEntry` instead. */
61
+ export function getEntryBySlug<
62
+ C extends keyof ContentEntryMap,
63
+ E extends ValidContentEntrySlug<C> | (string & {}),
64
+ >(
65
+ collection: C,
66
+ // Note that this has to accept a regular string too, for SSR
67
+ entrySlug: E,
68
+ ): E extends ValidContentEntrySlug<C>
69
+ ? Promise<CollectionEntry<C>>
70
+ : Promise<CollectionEntry<C> | undefined>;
71
+
72
+ /** @deprecated Use `getEntry` instead. */
73
+ export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
74
+ collection: C,
75
+ entryId: E,
76
+ ): Promise<CollectionEntry<C>>;
77
+
78
+ export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
79
+ collection: C,
80
+ filter?: (entry: CollectionEntry<C>) => entry is E,
81
+ ): Promise<E[]>;
82
+ export function getCollection<C extends keyof AnyEntryMap>(
83
+ collection: C,
84
+ filter?: (entry: CollectionEntry<C>) => unknown,
85
+ ): Promise<CollectionEntry<C>[]>;
86
+
87
+ export function getEntry<
88
+ C extends keyof ContentEntryMap,
89
+ E extends ValidContentEntrySlug<C> | (string & {}),
90
+ >(
91
+ entry: ReferenceContentEntry<C, E>,
92
+ ): E extends ValidContentEntrySlug<C>
93
+ ? Promise<CollectionEntry<C>>
94
+ : Promise<CollectionEntry<C> | undefined>;
95
+ export function getEntry<
96
+ C extends keyof DataEntryMap,
97
+ E extends keyof DataEntryMap[C] | (string & {}),
98
+ >(
99
+ entry: ReferenceDataEntry<C, E>,
100
+ ): E extends keyof DataEntryMap[C]
101
+ ? Promise<DataEntryMap[C][E]>
102
+ : Promise<CollectionEntry<C> | undefined>;
103
+ export function getEntry<
104
+ C extends keyof ContentEntryMap,
105
+ E extends ValidContentEntrySlug<C> | (string & {}),
106
+ >(
107
+ collection: C,
108
+ slug: E,
109
+ ): E extends ValidContentEntrySlug<C>
110
+ ? Promise<CollectionEntry<C>>
111
+ : Promise<CollectionEntry<C> | undefined>;
112
+ export function getEntry<
113
+ C extends keyof DataEntryMap,
114
+ E extends keyof DataEntryMap[C] | (string & {}),
115
+ >(
116
+ collection: C,
117
+ id: E,
118
+ ): E extends keyof DataEntryMap[C]
119
+ ? string extends keyof DataEntryMap[C]
120
+ ? Promise<DataEntryMap[C][E]> | undefined
121
+ : Promise<DataEntryMap[C][E]>
122
+ : Promise<CollectionEntry<C> | undefined>;
123
+
124
+ /** Resolve an array of entry references from the same collection */
125
+ export function getEntries<C extends keyof ContentEntryMap>(
126
+ entries: ReferenceContentEntry<C, ValidContentEntrySlug<C>>[],
127
+ ): Promise<CollectionEntry<C>[]>;
128
+ export function getEntries<C extends keyof DataEntryMap>(
129
+ entries: ReferenceDataEntry<C, keyof DataEntryMap[C]>[],
130
+ ): Promise<CollectionEntry<C>[]>;
131
+
132
+ export function render<C extends keyof AnyEntryMap>(
133
+ entry: AnyEntryMap[C][string],
134
+ ): Promise<RenderResult>;
135
+
136
+ export function reference<C extends keyof AnyEntryMap>(
137
+ collection: C,
138
+ ): import('astro/zod').ZodEffects<
139
+ import('astro/zod').ZodString,
140
+ C extends keyof ContentEntryMap
141
+ ? ReferenceContentEntry<C, ValidContentEntrySlug<C>>
142
+ : ReferenceDataEntry<C, keyof DataEntryMap[C]>
143
+ >;
144
+ // Allow generic `string` to avoid excessive type errors in the config
145
+ // if `dev` is not running to update as you edit.
146
+ // Invalid collection names will be caught at build time.
147
+ export function reference<C extends string>(
148
+ collection: C,
149
+ ): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;
150
+
151
+ type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
152
+ type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
153
+ ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
154
+ >;
155
+
156
+ type ContentEntryMap = {
157
+
158
+ };
159
+
160
+ type DataEntryMap = {
161
+
162
+ };
163
+
164
+ type AnyEntryMap = ContentEntryMap & DataEntryMap;
165
+
166
+ export type ContentConfig = typeof import("./../src/content.config.mjs");
167
+ }
@@ -1,5 +1,5 @@
1
- {
2
- "_variables": {
3
- "lastUpdateCheck": 1738837064987
4
- }
1
+ {
2
+ "_variables": {
3
+ "lastUpdateCheck": 1738837064987
4
+ }
5
5
  }
@@ -1,11 +1,11 @@
1
- # To get started with Dependabot version updates, you'll need to specify which
2
- # package ecosystems to update and where the package manifests are located.
3
- # Please see the documentation for all configuration options:
4
- # https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
5
-
6
- version: 2
7
- updates:
8
- - package-ecosystem: "" # See documentation for possible values
9
- directory: "/" # Location of package manifests
10
- schedule:
11
- interval: "weekly"
1
+ # To get started with Dependabot version updates, you'll need to specify which
2
+ # package ecosystems to update and where the package manifests are located.
3
+ # Please see the documentation for all configuration options:
4
+ # https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
5
+
6
+ version: 2
7
+ updates:
8
+ - package-ecosystem: "" # See documentation for possible values
9
+ directory: "/" # Location of package manifests
10
+ schedule:
11
+ interval: "weekly"
package/.github/todo.yml CHANGED
@@ -1,3 +1,3 @@
1
- - name: todo-issue
2
- uses: DerJuulsn/todo-issue@v1.1.4
3
-
1
+ - name: todo-issue
2
+ uses: DerJuulsn/todo-issue@v1.1.4
3
+
@@ -1,40 +1,40 @@
1
- name: Deploy to GitHub Pages
2
-
3
- on:
4
- # Trigger the workflow every time you push to the `main` branch
5
- # Using a different branch name? Replace `main` with your branch’s name
6
- push:
7
- branches: [ ma ]
8
- # Allows you to run this workflow manually from the Actions tab on GitHub.
9
- workflow_dispatch:
10
-
11
- # Allow this job to clone the repo and create a page deployment
12
- permissions:
13
- contents: read
14
- pages: write
15
- id-token: write
16
-
17
- jobs:
18
- build:
19
- runs-on: ubuntu-latest
20
- steps:
21
- - name: Checkout your repository using git
22
- uses: actions/checkout@v4
23
- - name: Install, build, and upload your site
24
- uses: withastro/action@v3
25
- with:
26
- pnpm@latest
27
- # path: . # The root location of your Astro project inside the repository. (optional)
28
- # node-version: 18 # The specific version of Node that should be used to build your site. Defaults to 18. (optional)
29
- # package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
30
-
31
- deploy:
32
- needs: build
33
- runs-on: ubuntu-latest
34
- environment:
35
- name: github-pages
36
- url: ${{ steps.deployment.outputs.page_url }}
37
- steps:
38
- - name: Deploy to GitHub Pages
39
- id: deployment
1
+ name: Deploy to GitHub Pages
2
+
3
+ on:
4
+ # Trigger the workflow every time you push to the `main` branch
5
+ # Using a different branch name? Replace `main` with your branch’s name
6
+ push:
7
+ branches: [ ma ]
8
+ # Allows you to run this workflow manually from the Actions tab on GitHub.
9
+ workflow_dispatch:
10
+
11
+ # Allow this job to clone the repo and create a page deployment
12
+ permissions:
13
+ contents: read
14
+ pages: write
15
+ id-token: write
16
+
17
+ jobs:
18
+ build:
19
+ runs-on: ubuntu-latest
20
+ steps:
21
+ - name: Checkout your repository using git
22
+ uses: actions/checkout@v4
23
+ - name: Install, build, and upload your site
24
+ uses: withastro/action@v3
25
+ with:
26
+ pnpm@latest
27
+ # path: . # The root location of your Astro project inside the repository. (optional)
28
+ # node-version: 18 # The specific version of Node that should be used to build your site. Defaults to 18. (optional)
29
+ # package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
30
+
31
+ deploy:
32
+ needs: build
33
+ runs-on: ubuntu-latest
34
+ environment:
35
+ name: github-pages
36
+ url: ${{ steps.deployment.outputs.page_url }}
37
+ steps:
38
+ - name: Deploy to GitHub Pages
39
+ id: deployment
40
40
  uses: actions/deploy-pages@v4
package/.stackblitzrc CHANGED
@@ -1,6 +1,6 @@
1
- {
2
- "startCommand": "npm start",
3
- "env": {
4
- "ENABLE_CJS_IMPORTS": true
5
- }
1
+ {
2
+ "startCommand": "npm start",
3
+ "env": {
4
+ "ENABLE_CJS_IMPORTS": true
5
+ }
6
6
  }
@@ -1,5 +1,5 @@
1
- {
2
- "recommendations": ["astro-build.astro-vscode"],
3
- "unwantedRecommendations": [],
4
- "lokalise.i18n-ally"
5
- }
1
+ {
2
+ "recommendations": ["astro-build.astro-vscode"],
3
+ "unwantedRecommendations": [],
4
+ "lokalise.i18n-ally"
5
+ }
@@ -1,11 +1,11 @@
1
- {
2
- "version": "0.2.0",
3
- "configurations": [
4
- {
5
- "command": "./node_modules/.bin/astro dev",
6
- "name": "Development server",
7
- "request": "launch",
8
- "type": "node-terminal"
9
- }
10
- ]
11
- }
1
+ {
2
+ "version": "0.2.0",
3
+ "configurations": [
4
+ {
5
+ "command": "./node_modules/.bin/astro dev",
6
+ "name": "Development server",
7
+ "request": "launch",
8
+ "type": "node-terminal"
9
+ }
10
+ ]
11
+ }
@@ -1,6 +1,6 @@
1
- {
2
- "i18n-ally.sourceLanguage": "en",
3
- "i18n-ally.keystyle": "nested",
4
- "i18n-ally.localesPaths": "public/locales",
5
- "i18n-ally.sortKeys": true,
1
+ {
2
+ "i18n-ally.sourceLanguage": "en",
3
+ "i18n-ally.keystyle": "nested",
4
+ "i18n-ally.localesPaths": "public/locales",
5
+ "i18n-ally.sortKeys": true,
6
6
  }
package/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2022 Jordi Enric Roig Ramis
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2022 Jordi Enric Roig Ramis
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,113 +1,114 @@
1
- # Spoko Design System
2
-
3
- SDS is the easiest way to start websites with simple design system. Since Astro is compatible with many frameworks, you can import your components and document them right in the markdown files.
4
- The project is still in the development phase, use at your own risk ;-)
5
- #
6
- Please feel free to fork it, edit it and let me know what do you think about it.
7
-
8
-
9
-
10
- | title | Introduction |
11
- |-------------|--------------------------------|
12
- | description | Docs intro |
13
- | layout | ../../layouts/MainLayout.astro |
14
-
15
-
16
- ## Getting started
17
-
18
- ### Installation
19
-
20
- ```js
21
- pnpm add spoko-design-system
22
- ```
23
-
24
- or just clone the repository.
25
-
26
-
27
-
28
- ### Example:
29
- - https://sds.spoko.space/
30
-
31
- #
32
-
33
- Most of the components from this repository can be seen in my projects:
34
-
35
- - https://catalog.polo.blue/
36
- - https://polo.blue
37
-
38
-
39
- ### Feateures
40
- - ⚡️[Vue 3](https://github.com/vuejs/core), [Vite](https://github.com/vitejs/vite), [pnpm](https://pnpm.io/) - born with fastness
41
- - 🎨 [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine
42
- - 😃 [astro-icon](https://github.com/natemoo-re/astro-icon) - for local icons, sprites and `@iconify-json/*` sets
43
- - 🍔 [astro-navbar](https://github.com/surjithctly/astro-navbar) - fully responsive and accessible headless navigation bar
44
- - 🌍 [astro-i18next](https://github.com/yassinedoghri/astro-i18next) - Astro integration of i18next
45
- - 🔎 [astro-pagefind](https://github.com/shishkin/astro-pagefind) - Astro integration for Pagefind static site search
46
- - 🗒 [astrojs/mdx](https://github.com/withastro/astro/tree/main/packages/integrations/mdx/) - markdown support
47
- - 📦 [astro-compress](https://github.com/astro-community/AstroCompress) - compression utilities to your Astro project
48
- - 📲 [PWA](https://github.com/vite-pwa/astro) - Zero-config PWA Integration for Astro
49
- - 🏷️ [astro-meta-tags](https://github.com/patrick91/astro-meta-tags) - Meta Tags inside for Astro Dev Toolbar
50
- - 🖨 Static-site generation (SSG)
51
- - 🎡 [Swiper](https://github.com/nolimits4web/swiper) - modern mobile touch slider with hardware accelerated transitions and amazing native behavior
52
- - 🌠 [View Transitions API](https://docs.astro.build/en/guides/view-transitions/#full-site-view-transitions-spa-mode) - [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) - makes it easy to change the DOM in a single step, while creating an animated transition between the two states. It's available in Chrome 111+ ([more details](https://developer.chrome.com/docs/web-platform/view-transitions?hl=en))
53
- - ☁️ Deploy on Netlify
54
-
55
- ### Adding new sections
56
-
57
- Although it's not required, you can create folders for new sections.
58
-
59
- To show the section on the left side navigation, add it to the navigation config file at `src/config.ts`.
60
-
61
-
62
- ```js
63
- export const SIDEBAR = [
64
- { text: "Core", header: true },
65
- { text: "Introduction", link: "/core/introduction" },
66
- ...,
67
- { text: "Components", header: true },
68
- { text: "Buttons", link: "/components/jumbatron" },
69
- ...,
70
- { text: "New section", header: true },
71
- { text: "New component", link: "/new-section/new-component.md" },
72
- ];
73
- ```
74
-
75
- ### Adding new pages
76
-
77
- To add new pages just create an .astro or markdown file in `src/pages/[section]/my-page.mdx`. Remember to add it to the navigation config in `src/config.ts` so it shows up in the left side navigation.
78
-
79
- You're free to organize the pages however you want.
80
-
81
- ### Customizing Core section (colors, typography, shadows...)
82
-
83
- If you want to customize the default colors, typography or shadows you can find the configuration file at `src/config/design.config.ts`. I think I have prepared enough shades of blue ;-)
84
-
85
- Feel free to add new pages to the Core section
86
-
87
-
88
- ### Customizing the page layout
89
-
90
- You can find the css for the pages in `src/styles/content.css`.
91
-
92
-
93
- ### Adding your components
94
-
95
- Astro is great for design systems because it allows you to import components from different frameworks like react, vue or svelte.
96
-
97
- To get started check how the `MainButton` component is used in the `src/pages/buttons.mdx` file.
98
-
99
- You can import your component library or create your own and document it easily.
100
-
101
-
102
- ### `.component-preview` utility
103
-
104
- There's a class called `.component-preview` that you can use to wrap your component in a grid, and it will look like this:
105
-
106
- <div class="component-preview">
107
- <button class="text-white bg-blue-500 px-4 py-2 rounded-md">Your component</button>
108
- </div>
109
-
110
-
111
- ### Have fun!
112
-
113
- Spoko Design System template was made in Poland by **[@spoko.space](https://spoko.space)** for personal and commercial use.
1
+ # Spoko Design System
2
+
3
+ SDS is the easiest way to start websites with simple design system. Since Astro is compatible with many frameworks, you can import your components and document them right in the markdown files.
4
+ The project is still in the development phase, use at your own risk ;-)
5
+ #
6
+ Please feel free to fork it, edit it and let me know what do you think about it.
7
+
8
+
9
+
10
+ | title | Introduction |
11
+ |-------------|--------------------------------|
12
+ | description | Docs intro |
13
+ | layout | ../../layouts/MainLayout.astro |
14
+
15
+
16
+ ## Getting started
17
+
18
+ ### Installation
19
+
20
+ ```js
21
+ pnpm add spoko-design-system
22
+ ```
23
+
24
+ or just clone the repository.
25
+
26
+
27
+
28
+ ### Example:
29
+ - https://sds.spoko.space/
30
+
31
+ #
32
+
33
+ Most of the components from this repository can be seen in my projects:
34
+
35
+ - https://catalog.polo.blue/
36
+ - https://polo.blue
37
+ - https://polo6r.pl
38
+
39
+
40
+ ### Feateures
41
+ - ⚡️[Vue 3](https://github.com/vuejs/core), [Vite](https://github.com/vitejs/vite), [pnpm](https://pnpm.io/) - born with fastness
42
+ - 🎨 [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine
43
+ - 😃 [astro-icon](https://github.com/natemoo-re/astro-icon) - for local icons, sprites and `@iconify-json/*` sets
44
+ - 🍔 [astro-navbar](https://github.com/surjithctly/astro-navbar) - fully responsive and accessible headless navigation bar
45
+ - 🌍 [astro-i18next](https://github.com/yassinedoghri/astro-i18next) - Astro integration of i18next
46
+ - 🔎 [astro-pagefind](https://github.com/shishkin/astro-pagefind) - Astro integration for Pagefind static site search
47
+ - 🗒 [astrojs/mdx](https://github.com/withastro/astro/tree/main/packages/integrations/mdx/) - markdown support
48
+ - 📦 [astro-compress](https://github.com/astro-community/AstroCompress) - compression utilities to your Astro project
49
+ - 📲 [PWA](https://github.com/vite-pwa/astro) - Zero-config PWA Integration for Astro
50
+ - 🏷️ [astro-meta-tags](https://github.com/patrick91/astro-meta-tags) - Meta Tags inside for Astro Dev Toolbar
51
+ - 🖨 Static-site generation (SSG)
52
+ - 🎡 [Swiper](https://github.com/nolimits4web/swiper) - modern mobile touch slider with hardware accelerated transitions and amazing native behavior
53
+ - 🌠 [View Transitions API](https://docs.astro.build/en/guides/view-transitions/#full-site-view-transitions-spa-mode) - [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) - makes it easy to change the DOM in a single step, while creating an animated transition between the two states. It's available in Chrome 111+ ([more details](https://developer.chrome.com/docs/web-platform/view-transitions?hl=en))
54
+ - ☁️ Deploy on Netlify
55
+
56
+ ### Adding new sections
57
+
58
+ Although it's not required, you can create folders for new sections.
59
+
60
+ To show the section on the left side navigation, add it to the navigation config file at `src/config.ts`.
61
+
62
+
63
+ ```js
64
+ export const SIDEBAR = [
65
+ { text: "Core", header: true },
66
+ { text: "Introduction", link: "/core/introduction" },
67
+ ...,
68
+ { text: "Components", header: true },
69
+ { text: "Buttons", link: "/components/jumbatron" },
70
+ ...,
71
+ { text: "New section", header: true },
72
+ { text: "New component", link: "/new-section/new-component.md" },
73
+ ];
74
+ ```
75
+
76
+ ### Adding new pages
77
+
78
+ To add new pages just create an .astro or markdown file in `src/pages/[section]/my-page.mdx`. Remember to add it to the navigation config in `src/config.ts` so it shows up in the left side navigation.
79
+
80
+ You're free to organize the pages however you want.
81
+
82
+ ### Customizing Core section (colors, typography, shadows...)
83
+
84
+ If you want to customize the default colors, typography or shadows you can find the configuration file at `src/config/design.config.ts`. I think I have prepared enough shades of blue ;-)
85
+
86
+ Feel free to add new pages to the Core section
87
+
88
+
89
+ ### Customizing the page layout
90
+
91
+ You can find the css for the pages in `src/styles/content.css`.
92
+
93
+
94
+ ### Adding your components
95
+
96
+ Astro is great for design systems because it allows you to import components from different frameworks like react, vue or svelte.
97
+
98
+ To get started check how the `MainButton` component is used in the `src/pages/buttons.mdx` file.
99
+
100
+ You can import your component library or create your own and document it easily.
101
+
102
+
103
+ ### `.component-preview` utility
104
+
105
+ There's a class called `.component-preview` that you can use to wrap your component in a grid, and it will look like this:
106
+
107
+ <div class="component-preview">
108
+ <button class="text-white bg-blue-500 px-4 py-2 rounded-md">Your component</button>
109
+ </div>
110
+
111
+
112
+ ### Have fun!
113
+
114
+ Spoko Design System template was made in Poland by **[@spoko.space](https://spoko.space)** for personal and commercial use.