spoko-design-system 0.8.9 → 0.9.1
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/.github/dependabot.yml +11 -11
- package/.github/todo.yml +3 -3
- package/.github/workflows/deploy.yml +39 -39
- package/.stackblitzrc +5 -5
- package/.vscode/extensions.json +5 -5
- package/.vscode/launch.json +11 -11
- package/.vscode/settings.json +5 -5
- package/LICENSE +21 -21
- package/README.md +114 -114
- package/astro-i18next.config.mjs +17 -17
- package/astro-i18next.config.ts +10 -10
- package/astro.config.mjs +86 -86
- package/dev-dist/sw.js +91 -91
- package/dev-dist/workbox-c676b6d3.js +3391 -3391
- package/icon.config.ts +310 -310
- package/index.ts +70 -70
- package/package.json +41 -41
- package/public/arrow-bottom.svg +7 -7
- package/public/fonts/lg.svg +53 -53
- package/public/fonts/vwhead-bold-demo.html +549 -549
- package/public/fonts/vwhead-regular-demo.html +549 -549
- package/public/fonts/vwtext-bold-demo.html +549 -549
- package/public/fonts/vwtext-regular-demo.html +549 -549
- package/public/github.svg +3 -3
- package/public/grid_dot.svg +4 -4
- package/public/linkedin.svg +44 -44
- package/public/locales/en/translation.json +8 -8
- package/public/locales/pl/translation.json +8 -8
- package/public/make-scrollable-code-focusable.js +3 -3
- package/public/pagefind.yml +3 -3
- package/public/polo.blue.svg +29 -29
- package/public/spoko.space.svg +71 -71
- package/public/twitter.svg +46 -46
- package/renovate.json +6 -6
- package/sandbox.config.json +11 -11
- package/src/MyComponent.astro +8 -8
- package/src/components/Badge.vue +19 -19
- package/src/components/Badges.vue +21 -21
- package/src/components/Breadcrumbs.vue +94 -91
- package/src/components/Button.vue +101 -101
- package/src/components/ButtonCopy.astro +183 -183
- package/src/components/ButtonCopy.vue +36 -36
- package/src/components/Card.astro +27 -27
- package/src/components/Carousel.astro +26 -26
- package/src/components/Category/CategoriesCarousel.astro +101 -101
- package/src/components/Category/CategoryDetails.astro +169 -169
- package/src/components/Category/CategoryLink.vue +28 -28
- package/src/components/Category/CategorySidebarToggler.vue +9 -9
- package/src/components/Category/CategoryTile.astro +37 -37
- package/src/components/Category/CategoryViewToggler.astro +89 -89
- package/src/components/Category/SubCategoryLink.vue +19 -19
- package/src/components/Copyright.astro +12 -12
- package/src/components/Date.astro +7 -7
- package/src/components/Faq.astro +33 -33
- package/src/components/FaqItem.astro +80 -80
- package/src/components/FeaturesList.vue +37 -37
- package/src/components/FuckRussia.vue +62 -62
- package/src/components/HandDrive.astro +29 -29
- package/src/components/Header/Header.astro +210 -210
- package/src/components/Header/SkipToContent.astro +1 -1
- package/src/components/Headline.vue +87 -87
- package/src/components/Image.astro +30 -30
- package/src/components/LeftSidebar.astro +53 -53
- package/src/components/MainColors.vue +22 -22
- package/src/components/MainInput.vue +15 -15
- package/src/components/Modal.astro +27 -27
- package/src/components/PageContent.astro +5 -5
- package/src/components/PartNumber.vue +27 -27
- package/src/components/Post/PostCategories.astro +41 -41
- package/src/components/Post/PostCategories.vue +30 -30
- package/src/components/PostHeader.astro +103 -103
- package/src/components/PrCode.vue +141 -141
- package/src/components/Product/ProductButton.vue +18 -18
- package/src/components/Product/ProductCarousel.astro +35 -35
- package/src/components/Product/ProductEngineType.vue +42 -42
- package/src/components/Product/ProductImage.astro +40 -40
- package/src/components/Product/ProductLink.astro +101 -101
- package/src/components/Product/ProductLink.vue +59 -59
- package/src/components/Product/ProductLinkInfo.astro +37 -37
- package/src/components/Product/ProductNumber.astro +60 -60
- package/src/components/ProductCarousel.astro +38 -38
- package/src/components/ProductCodes.vue +39 -39
- package/src/components/ProductDetailName.vue +52 -52
- package/src/components/ProductDetailsList.vue +216 -216
- package/src/components/ProductTile.astro +48 -48
- package/src/components/Quote.vue +23 -23
- package/src/components/ReloadPrompt.astro +50 -50
- package/src/components/SlimBanner.vue +72 -72
- package/src/components/Table.vue +32 -32
- package/src/components/TableOfContents.astro +15 -15
- package/src/components/Translations.vue +23 -23
- package/src/components/flags/FlagPL.vue +3 -3
- package/src/components/flags/FlagUA.vue +2 -2
- package/src/components/{Layout → layout}/CallToAction.astro +52 -52
- package/src/components/{Layout → layout}/Container.astro +7 -7
- package/src/components/{Layout → layout}/Header.astro +80 -80
- package/src/config.ts +56 -56
- package/src/design.config.ts +98 -98
- package/src/env.d.ts +6 -6
- package/src/layouts/Layout.astro +61 -61
- package/src/layouts/MainLayout.astro +81 -81
- package/src/layouts/partials/FooterCommon.astro +4 -4
- package/src/layouts/partials/HeadCommon.astro +44 -44
- package/src/layouts/partials/HeadSEO.astro +41 -41
- package/src/pages/components/badges.mdx +57 -57
- package/src/pages/components/breadcrumbs.mdx +139 -139
- package/src/pages/components/buttons.mdx +360 -360
- package/src/pages/components/card.mdx +294 -294
- package/src/pages/components/carousel.mdx +62 -62
- package/src/pages/components/copyright.mdx +42 -42
- package/src/pages/components/details-list.mdx +115 -115
- package/src/pages/components/features-list.mdx +37 -37
- package/src/pages/components/flags.mdx +49 -49
- package/src/pages/components/fuck-russia.mdx +39 -39
- package/src/pages/components/hand-drive.mdx +38 -38
- package/src/pages/components/headline.mdx +137 -137
- package/src/pages/components/icons.astro +135 -135
- package/src/pages/components/image.mdx +513 -513
- package/src/pages/components/input.mdx +367 -367
- package/src/pages/components/jumbotron.mdx +359 -359
- package/src/pages/components/modal.mdx +64 -64
- package/src/pages/components/post-header.mdx +64 -64
- package/src/pages/components/pr-code.mdx +65 -65
- package/src/pages/components/product-number.mdx +58 -58
- package/src/pages/components/product-tile.mdx +51 -51
- package/src/pages/components/quote.mdx +33 -33
- package/src/pages/components/slimbanner.mdx +35 -35
- package/src/pages/components/table.mdx +108 -108
- package/src/pages/core/colors.mdx +10 -10
- package/src/pages/core/grid.mdx +89 -89
- package/src/pages/core/introduction.mdx +77 -77
- package/src/pages/core/shadows.astro +20 -20
- package/src/pages/core/typography.astro +49 -49
- package/src/pages/index.astro +133 -133
- package/src/pages/patterns/introduction.mdx +60 -60
- package/src/pwa.ts +12 -12
- package/src/styles/_variables.scss +70 -70
- package/src/styles/base/base.css +184 -184
- package/src/styles/base/grid.css +92 -92
- package/src/styles/base/typography.css +70 -70
- package/src/styles/content.css +73 -73
- package/src/styles/main.css +7 -7
- package/src/types/Product.ts +31 -31
- package/src/types/astro.d.ts +3 -3
- package/src/utils/product/getPriceFormatted.ts +15 -15
- package/src/utils/product/getProductChecklist.ts +17 -17
- package/src/utils/product/useFormatProductNumber.ts +41 -41
- package/src/utils/seo/getShorterDescription.ts +14 -14
- package/src/utils/text/formatDate.ts +5 -5
- package/src/utils/text/formatLocaleNumber.ts +6 -6
- package/src/utils/text/formatPad.ts +12 -12
- package/src/utils/text/getNumberFormatted.ts +33 -33
- package/src/utils/text/getTranslatedLink.ts +5 -5
- package/src/utils/text.ts +19 -19
- package/tailwind.config.cjs +8 -8
- package/tsconfig.json +28 -28
- package/uno-config/index.ts +259 -259
- package/uno-config/theme/breakpoints.ts +9 -9
- package/uno-config/theme/colors.ts +64 -64
- package/uno-config/theme/dimensions.ts +17 -17
- package/uno-config/theme/effects.ts +14 -14
- package/uno-config/theme/grid.ts +10 -10
- package/uno-config/theme/index.ts +28 -28
- package/uno-config/theme/shortcuts/buttons.ts +53 -53
- package/uno-config/theme/shortcuts/components.ts +123 -123
- package/uno-config/theme/shortcuts/index.ts +20 -20
- package/uno-config/theme/shortcuts/layout.ts +74 -74
- package/uno-config/theme/typography.ts +29 -29
- package/uno.config.ts +2 -2
package/.github/dependabot.yml
CHANGED
|
@@ -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
|
}
|
package/.vscode/extensions.json
CHANGED
|
@@ -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
|
+
}
|
package/.vscode/launch.json
CHANGED
|
@@ -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
|
+
}
|
package/.vscode/settings.json
CHANGED
|
@@ -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,114 +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
|
-
- 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/jumbotron" },
|
|
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 uno.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-lightest 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.
|
|
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/jumbotron" },
|
|
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 uno.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-lightest 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.
|
package/astro-i18next.config.mjs
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
/** @type {import('astro-i18next').AstroI18nextConfig} */
|
|
2
|
-
export default {
|
|
3
|
-
defaultLocale: "en",
|
|
4
|
-
locales: ["en", "pl"],
|
|
5
|
-
i18next: {
|
|
6
|
-
// debug is convenient during development to check for missing keys
|
|
7
|
-
debug: true,
|
|
8
|
-
initImmediate: false,
|
|
9
|
-
// backend: {
|
|
10
|
-
// loadPath: './src/locales/{{lng}}.yml',
|
|
11
|
-
// },
|
|
12
|
-
detection: {}, // Default detection settings
|
|
13
|
-
},
|
|
14
|
-
i18nextPlugins: {
|
|
15
|
-
fsBackend: 'i18next-fs-backend',
|
|
16
|
-
LanguageDetector: 'i18next-browser-languagedetector',
|
|
17
|
-
},
|
|
1
|
+
/** @type {import('astro-i18next').AstroI18nextConfig} */
|
|
2
|
+
export default {
|
|
3
|
+
defaultLocale: "en",
|
|
4
|
+
locales: ["en", "pl"],
|
|
5
|
+
i18next: {
|
|
6
|
+
// debug is convenient during development to check for missing keys
|
|
7
|
+
debug: true,
|
|
8
|
+
initImmediate: false,
|
|
9
|
+
// backend: {
|
|
10
|
+
// loadPath: './src/locales/{{lng}}.yml',
|
|
11
|
+
// },
|
|
12
|
+
detection: {}, // Default detection settings
|
|
13
|
+
},
|
|
14
|
+
i18nextPlugins: {
|
|
15
|
+
fsBackend: 'i18next-fs-backend',
|
|
16
|
+
LanguageDetector: 'i18next-browser-languagedetector',
|
|
17
|
+
},
|
|
18
18
|
};
|
package/astro-i18next.config.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import type { AstroI18nextConfig } from "astro-i18next";
|
|
2
|
-
|
|
3
|
-
const config: AstroI18nextConfig = {
|
|
4
|
-
defaultLocale: "en",
|
|
5
|
-
locales: ["en", "pl"],
|
|
6
|
-
i18nextServer: {
|
|
7
|
-
debug: true,
|
|
8
|
-
},
|
|
9
|
-
};
|
|
10
|
-
|
|
1
|
+
import type { AstroI18nextConfig } from "astro-i18next";
|
|
2
|
+
|
|
3
|
+
const config: AstroI18nextConfig = {
|
|
4
|
+
defaultLocale: "en",
|
|
5
|
+
locales: ["en", "pl"],
|
|
6
|
+
i18nextServer: {
|
|
7
|
+
debug: true,
|
|
8
|
+
},
|
|
9
|
+
};
|
|
10
|
+
|
|
11
11
|
export default config;
|