Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update illustrations & icons docs + Fixes

Browse Source
This commit is contained in:
venashial 2022-05-07 17:22:33 -07:00
parent 91b602341b
commit fd936e5bf3
13 changed files with 228 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -27,7 +27,7 @@
"mdsvexamples": "^0.3.0", "mdsvexamples": "^0.3.0",
"nodemon": "^2.0.15", "nodemon": "^2.0.15",
"sveld": "^0.13.4", "sveld": "^0.13.4",
"svelte": "^3.44.0", "svelte": "^3.48.0",
"svelte-check": "^2.2.6", "svelte-check": "^2.2.6",
"svelte-preprocess": "^4.10.1", "svelte-preprocess": "^4.10.1",
"svelte2tsx": "^0.5.5", "svelte2tsx": "^0.5.5",
@ -53,6 +53,7 @@
"homepage": "https://omorphia.modrinth.com", "homepage": "https://omorphia.modrinth.com",
"dependencies": { "dependencies": {
"@iconify-json/carbon": "^1.1.1", "@iconify-json/carbon": "^1.1.1",
"@iconify-json/fa-regular": "^1.1.1",
"@iconify-json/heroicons-outline": "^1.1.1", "@iconify-json/heroicons-outline": "^1.1.1",
"@iconify-json/heroicons-solid": "^1.1.1", "@iconify-json/heroicons-solid": "^1.1.1",
"@iconify-json/lucide": "^1.1.7", "@iconify-json/lucide": "^1.1.7",

85
pnpm-lock.yaml generated
View File

@ -2,6 +2,7 @@ lockfileVersion: 5.3
specifiers: specifiers:
'@iconify-json/carbon': ^1.1.1 '@iconify-json/carbon': ^1.1.1
'@iconify-json/fa-regular': ^1.1.1
'@iconify-json/heroicons-outline': ^1.1.1 '@iconify-json/heroicons-outline': ^1.1.1
'@iconify-json/heroicons-solid': ^1.1.1 '@iconify-json/heroicons-solid': ^1.1.1
'@iconify-json/lucide': ^1.1.7 '@iconify-json/lucide': ^1.1.7
@ -33,7 +34,7 @@ specifiers:
postcss-strip-inline-comments: ^0.1.5 postcss-strip-inline-comments: ^0.1.5
sanitize.css: ^13.0.0 sanitize.css: ^13.0.0
sveld: ^0.13.4 sveld: ^0.13.4
svelte: ^3.44.0 svelte: ^3.48.0
svelte-check: ^2.2.6 svelte-check: ^2.2.6
svelte-preprocess: ^4.10.1 svelte-preprocess: ^4.10.1
svelte-tiny-virtual-list: ^2.0.1 svelte-tiny-virtual-list: ^2.0.1
@ -46,10 +47,11 @@ specifiers:
dependencies: dependencies:
'@iconify-json/carbon': 1.1.1 '@iconify-json/carbon': 1.1.1
'@iconify-json/fa-regular': 1.1.1
'@iconify-json/heroicons-outline': 1.1.1 '@iconify-json/heroicons-outline': 1.1.1
'@iconify-json/heroicons-solid': 1.1.1 '@iconify-json/heroicons-solid': 1.1.1
'@iconify-json/lucide': 1.1.7 '@iconify-json/lucide': 1.1.7
'@poppanator/sveltekit-svg': 0.3.1_svelte@3.46.4 '@poppanator/sveltekit-svg': 0.3.1_svelte@3.48.0
autoprefixer: 10.4.2_postcss@8.4.8 autoprefixer: 10.4.2_postcss@8.4.8
cssnano: 5.1.1_postcss@8.4.8 cssnano: 5.1.1_postcss@8.4.8
highlight.js: 11.5.0 highlight.js: 11.5.0
@ -73,20 +75,20 @@ dependencies:
devDependencies: devDependencies:
'@sveltejs/adapter-static': 1.0.0-next.29 '@sveltejs/adapter-static': 1.0.0-next.29
'@sveltejs/kit': 1.0.0-next.314_svelte@3.46.4 '@sveltejs/kit': 1.0.0-next.326_svelte@3.48.0
'@typescript-eslint/eslint-plugin': 5.14.0_e3f5f4efe2bd492e36eb6c1c619dfc98 '@typescript-eslint/eslint-plugin': 5.14.0_e3f5f4efe2bd492e36eb6c1c619dfc98
'@typescript-eslint/parser': 5.14.0_eslint@7.32.0+typescript@4.6.2 '@typescript-eslint/parser': 5.14.0_eslint@7.32.0+typescript@4.6.2
eslint: 7.32.0 eslint: 7.32.0
eslint-config-prettier: 8.5.0_eslint@7.32.0 eslint-config-prettier: 8.5.0_eslint@7.32.0
eslint-plugin-svelte3: 3.4.1_eslint@7.32.0+svelte@3.46.4 eslint-plugin-svelte3: 3.4.1_eslint@7.32.0+svelte@3.48.0
mdsvex: 0.10.5_svelte@3.46.4 mdsvex: 0.10.5_svelte@3.48.0
mdsvexamples: 0.3.0 mdsvexamples: 0.3.0
nodemon: 2.0.15 nodemon: 2.0.15
sveld: 0.13.4_4db7643ceec6f88f007a3dfc606d2828 sveld: 0.13.4_4db7643ceec6f88f007a3dfc606d2828
svelte: 3.46.4 svelte: 3.48.0
svelte-check: 2.4.5_47ee9d04cb9dda3c584354882c0ecf6b svelte-check: 2.4.5_d3ea40bd46a6dc733b9b800bd83057b3
svelte-preprocess: 4.10.4_9839acb1407290622c7a666e6c1abf33 svelte-preprocess: 4.10.4_e7204e9bc547a97aca5df2183360009e
svelte2tsx: 0.5.5_svelte@3.46.4+typescript@4.6.2 svelte2tsx: 0.5.5_svelte@3.48.0+typescript@4.6.2
tslib: 2.3.1 tslib: 2.3.1
typescript: 4.6.2 typescript: 4.6.2
@ -250,6 +252,12 @@ packages:
'@iconify/types': 1.0.12 '@iconify/types': 1.0.12
dev: false dev: false
/@iconify-json/fa-regular/1.1.1:
resolution: {integrity: sha512-KFMX9DurKhOUpKqGlYRqlnCbcieEKo35961pnyf7NqUvHefBk1PZCU/kKbM2ib3piy8cn3V7RGvmZKq/INKGAA==}
dependencies:
'@iconify/types': 1.0.12
dev: false
/@iconify-json/heroicons-outline/1.1.1: /@iconify-json/heroicons-outline/1.1.1:
resolution: {integrity: sha512-Jy/aFbNQdszRxzhBvHB2AVu/IeMcK/YG3qJVf3XeqvBvhcPq/rWFEmo7jshzBclR/wbt9ylcBEUY1qRFcCXS9Q==} resolution: {integrity: sha512-Jy/aFbNQdszRxzhBvHB2AVu/IeMcK/YG3qJVf3XeqvBvhcPq/rWFEmo7jshzBclR/wbt9ylcBEUY1qRFcCXS9Q==}
dependencies: dependencies:
@ -303,12 +311,12 @@ packages:
'@nodelib/fs.scandir': 2.1.5 '@nodelib/fs.scandir': 2.1.5
fastq: 1.13.0 fastq: 1.13.0
/@poppanator/sveltekit-svg/0.3.1_svelte@3.46.4: /@poppanator/sveltekit-svg/0.3.1_svelte@3.48.0:
resolution: {integrity: sha512-atwGnEYD3S18hrwvM4S55sAB2EKzbvLPVBWoL9KSVqPgbSfRvKQb6aBrA7gWOQVz3uoCwDujUvvlbxvzYxmthw==} resolution: {integrity: sha512-atwGnEYD3S18hrwvM4S55sAB2EKzbvLPVBWoL9KSVqPgbSfRvKQb6aBrA7gWOQVz3uoCwDujUvvlbxvzYxmthw==}
peerDependencies: peerDependencies:
svelte: 3.x svelte: 3.x
dependencies: dependencies:
svelte: 3.46.4 svelte: 3.48.0
svgo: 2.8.0 svgo: 2.8.0
dev: false dev: false
@ -358,16 +366,17 @@ packages:
tiny-glob: 0.2.9 tiny-glob: 0.2.9
dev: true dev: true
/@sveltejs/kit/1.0.0-next.314_svelte@3.46.4: /@sveltejs/kit/1.0.0-next.326_svelte@3.48.0:
resolution: {integrity: sha512-EkXjEd30XO8+AydBLARxAtI6Ak8V0KFSEJ07sNsrkGq9J70sWPL7yGenhGaeq6S852XZAqeyWd6uGQZmQLR4Wg==} resolution: {integrity: sha512-prJqmXZ2H1wmFfnMw7wDujfbkcA8vuubuqUkpVVmXhfh2+SEzQscPTNwxoE5EJxb5sywtLWEvYx3hv1gPS4Lvg==}
engines: {node: '>=14.13'} engines: {node: '>=14.13'}
hasBin: true hasBin: true
peerDependencies: peerDependencies:
svelte: ^3.44.0 svelte: ^3.44.0
dependencies: dependencies:
'@sveltejs/vite-plugin-svelte': 1.0.0-next.39_svelte@3.46.4+vite@2.9.1 '@sveltejs/vite-plugin-svelte': 1.0.0-next.39_svelte@3.48.0+vite@2.9.1
chokidar: 3.5.3
sade: 1.8.1 sade: 1.8.1
svelte: 3.46.4 svelte: 3.48.0
vite: 2.9.1 vite: 2.9.1
transitivePeerDependencies: transitivePeerDependencies:
- diff-match-patch - diff-match-patch
@ -377,7 +386,7 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@sveltejs/vite-plugin-svelte/1.0.0-next.39_svelte@3.46.4+vite@2.9.1: /@sveltejs/vite-plugin-svelte/1.0.0-next.39_svelte@3.48.0+vite@2.9.1:
resolution: {integrity: sha512-gnvvcAW2LK+KnUn8lKb2ypcXKwSp2K57mem5C4VNKfjxdRpM6+XwNavWwVf6otnDhz3qPYl/TKKW6/dRr6eeAw==} resolution: {integrity: sha512-gnvvcAW2LK+KnUn8lKb2ypcXKwSp2K57mem5C4VNKfjxdRpM6+XwNavWwVf6otnDhz3qPYl/TKKW6/dRr6eeAw==}
engines: {node: ^14.13.1 || >= 16} engines: {node: ^14.13.1 || >= 16}
peerDependencies: peerDependencies:
@ -392,8 +401,8 @@ packages:
debug: 4.3.3 debug: 4.3.3
kleur: 4.1.4 kleur: 4.1.4
magic-string: 0.25.9 magic-string: 0.25.9
svelte: 3.46.4 svelte: 3.48.0
svelte-hmr: 0.14.10_svelte@3.46.4 svelte-hmr: 0.14.10_svelte@3.48.0
vite: 2.9.1 vite: 2.9.1
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
@ -1465,7 +1474,7 @@ packages:
eslint: 7.32.0 eslint: 7.32.0
dev: true dev: true
/eslint-plugin-svelte3/3.4.1_eslint@7.32.0+svelte@3.46.4: /eslint-plugin-svelte3/3.4.1_eslint@7.32.0+svelte@3.48.0:
resolution: {integrity: sha512-7p59WG8qV8L6wLdl4d/c3mdjkgVglQCdv5XOTk/iNPBKXuuV+Q0eFP5Wa6iJd/G2M1qR3BkLPEzaANOqKAZczw==} resolution: {integrity: sha512-7p59WG8qV8L6wLdl4d/c3mdjkgVglQCdv5XOTk/iNPBKXuuV+Q0eFP5Wa6iJd/G2M1qR3BkLPEzaANOqKAZczw==}
engines: {node: '>=10'} engines: {node: '>=10'}
peerDependencies: peerDependencies:
@ -1473,7 +1482,7 @@ packages:
svelte: ^3.2.0 svelte: ^3.2.0
dependencies: dependencies:
eslint: 7.32.0 eslint: 7.32.0
svelte: 3.46.4 svelte: 3.48.0
dev: true dev: true
/eslint-scope/5.1.1: /eslint-scope/5.1.1:
@ -2181,7 +2190,7 @@ packages:
resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==} resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
dev: false dev: false
/mdsvex/0.10.5_svelte@3.46.4: /mdsvex/0.10.5_svelte@3.48.0:
resolution: {integrity: sha512-/B23WZn5Vjrjh7Qp2YsOXLkU9YFm59IEylKNXC10o05ZaCP4LNv32tGXKP6aEssss6hk/LdISJuneELHFIS2pQ==} resolution: {integrity: sha512-/B23WZn5Vjrjh7Qp2YsOXLkU9YFm59IEylKNXC10o05ZaCP4LNv32tGXKP6aEssss6hk/LdISJuneELHFIS2pQ==}
peerDependencies: peerDependencies:
svelte: 3.x svelte: 3.x
@ -2189,7 +2198,7 @@ packages:
'@types/unist': 2.0.6 '@types/unist': 2.0.6
prism-svelte: 0.4.7 prism-svelte: 0.4.7
prismjs: 1.27.0 prismjs: 1.27.0
svelte: 3.46.4 svelte: 3.48.0
vfile-message: 2.0.4 vfile-message: 2.0.4
dev: true dev: true
@ -3330,7 +3339,7 @@ packages:
glob: 7.2.0 glob: 7.2.0
dev: true dev: true
/rollup-plugin-svelte/7.1.0_rollup@2.70.0+svelte@3.46.4: /rollup-plugin-svelte/7.1.0_rollup@2.70.0+svelte@3.48.0:
resolution: {integrity: sha512-vopCUq3G+25sKjwF5VilIbiY6KCuMNHP1PFvx2Vr3REBNMDllKHFZN2B9jwwC+MqNc3UPKkjXnceLPEjTjXGXg==} resolution: {integrity: sha512-vopCUq3G+25sKjwF5VilIbiY6KCuMNHP1PFvx2Vr3REBNMDllKHFZN2B9jwwC+MqNc3UPKkjXnceLPEjTjXGXg==}
engines: {node: '>=10'} engines: {node: '>=10'}
peerDependencies: peerDependencies:
@ -3340,7 +3349,7 @@ packages:
require-relative: 0.8.7 require-relative: 0.8.7
rollup: 2.70.0 rollup: 2.70.0
rollup-pluginutils: 2.8.2 rollup-pluginutils: 2.8.2
svelte: 3.46.4 svelte: 3.48.0
dev: true dev: true
/rollup-pluginutils/2.8.2: /rollup-pluginutils/2.8.2:
@ -3572,9 +3581,9 @@ packages:
fs-extra: 9.1.0 fs-extra: 9.1.0
prettier: 2.6.1 prettier: 2.6.1
rollup: 2.70.0 rollup: 2.70.0
rollup-plugin-svelte: 7.1.0_rollup@2.70.0+svelte@3.46.4 rollup-plugin-svelte: 7.1.0_rollup@2.70.0+svelte@3.48.0
svelte: 3.46.4 svelte: 3.48.0
svelte-preprocess: 4.10.4_9839acb1407290622c7a666e6c1abf33 svelte-preprocess: 4.10.4_e7204e9bc547a97aca5df2183360009e
typescript: 4.6.2 typescript: 4.6.2
transitivePeerDependencies: transitivePeerDependencies:
- '@babel/core' - '@babel/core'
@ -3589,7 +3598,7 @@ packages:
- sugarss - sugarss
dev: true dev: true
/svelte-check/2.4.5_47ee9d04cb9dda3c584354882c0ecf6b: /svelte-check/2.4.5_d3ea40bd46a6dc733b9b800bd83057b3:
resolution: {integrity: sha512-nRft8BbG2wcxyCdHDZ7X43xLcvDzua3xLwq6wzHGcAF3ka3Jyhv2rvgq0+SF9NwHLMefp9C2XkM6etzsxK/cMQ==} resolution: {integrity: sha512-nRft8BbG2wcxyCdHDZ7X43xLcvDzua3xLwq6wzHGcAF3ka3Jyhv2rvgq0+SF9NwHLMefp9C2XkM6etzsxK/cMQ==}
hasBin: true hasBin: true
peerDependencies: peerDependencies:
@ -3602,8 +3611,8 @@ packages:
picocolors: 1.0.0 picocolors: 1.0.0
sade: 1.8.1 sade: 1.8.1
source-map: 0.7.3 source-map: 0.7.3
svelte: 3.46.4 svelte: 3.48.0
svelte-preprocess: 4.10.4_9839acb1407290622c7a666e6c1abf33 svelte-preprocess: 4.10.4_e7204e9bc547a97aca5df2183360009e
typescript: 4.6.2 typescript: 4.6.2
transitivePeerDependencies: transitivePeerDependencies:
- '@babel/core' - '@babel/core'
@ -3618,16 +3627,16 @@ packages:
- sugarss - sugarss
dev: true dev: true
/svelte-hmr/0.14.10_svelte@3.46.4: /svelte-hmr/0.14.10_svelte@3.48.0:
resolution: {integrity: sha512-VffsN0fT4cTJ7b4apf9VDIrgsbLFaJzPypcAuy4NcHx2PKKayfwLwabaYPWdHK5lJ/uQ/HBrkEsWHzo64NU6mQ==} resolution: {integrity: sha512-VffsN0fT4cTJ7b4apf9VDIrgsbLFaJzPypcAuy4NcHx2PKKayfwLwabaYPWdHK5lJ/uQ/HBrkEsWHzo64NU6mQ==}
engines: {node: ^12.20 || ^14.13.1 || >= 16} engines: {node: ^12.20 || ^14.13.1 || >= 16}
peerDependencies: peerDependencies:
svelte: '>=3.19.0' svelte: '>=3.19.0'
dependencies: dependencies:
svelte: 3.46.4 svelte: 3.48.0
dev: true dev: true
/svelte-preprocess/4.10.4_9839acb1407290622c7a666e6c1abf33: /svelte-preprocess/4.10.4_e7204e9bc547a97aca5df2183360009e:
resolution: {integrity: sha512-fuwol0N4UoHsNQolLFbMqWivqcJ9N0vfWO9IuPAiX/5okfoGXURyJ6nECbuEIv0nU3M8Xe2I1ONNje2buk7l6A==} resolution: {integrity: sha512-fuwol0N4UoHsNQolLFbMqWivqcJ9N0vfWO9IuPAiX/5okfoGXURyJ6nECbuEIv0nU3M8Xe2I1ONNje2buk7l6A==}
engines: {node: '>= 9.11.2'} engines: {node: '>= 9.11.2'}
requiresBuild: true requiresBuild: true
@ -3676,7 +3685,7 @@ packages:
postcss-load-config: 3.1.4_postcss@8.4.8 postcss-load-config: 3.1.4_postcss@8.4.8
sorcery: 0.10.0 sorcery: 0.10.0
strip-indent: 3.0.0 strip-indent: 3.0.0
svelte: 3.46.4 svelte: 3.48.0
typescript: 4.6.2 typescript: 4.6.2
dev: true dev: true
@ -3688,12 +3697,12 @@ packages:
resolution: {integrity: sha512-tOWeMPxeIoW9RshS0WbogRhdYdbxcJV0ebkzSh1lwR7Ihl0hSZMmB4YyCHHoXJK4xcbxCCFh0AnQ1vkzGZfLVQ==} resolution: {integrity: sha512-tOWeMPxeIoW9RshS0WbogRhdYdbxcJV0ebkzSh1lwR7Ihl0hSZMmB4YyCHHoXJK4xcbxCCFh0AnQ1vkzGZfLVQ==}
dev: false dev: false
/svelte/3.46.4: /svelte/3.48.0:
resolution: {integrity: sha512-qKJzw6DpA33CIa+C/rGp4AUdSfii0DOTCzj/2YpSKKayw5WGSS624Et9L1nU1k2OVRS9vaENQXp2CVZNU+xvIg==} resolution: {integrity: sha512-fN2YRm/bGumvjUpu6yI3BpvZnpIm9I6A7HR4oUNYd7ggYyIwSA/BX7DJ+UXXffLp6XNcUijyLvttbPVCYa/3xQ==}
engines: {node: '>= 8'} engines: {node: '>= 8'}
dev: true dev: true
/svelte2tsx/0.5.5_svelte@3.46.4+typescript@4.6.2: /svelte2tsx/0.5.5_svelte@3.48.0+typescript@4.6.2:
resolution: {integrity: sha512-5n8jP721bM3vXPk36AM9diZg2aasLvsfP/Zt9CQVrcqcnzexOYVeS8kpGk+3mofOPvPvXnOCLdff62usI/KOMw==} resolution: {integrity: sha512-5n8jP721bM3vXPk36AM9diZg2aasLvsfP/Zt9CQVrcqcnzexOYVeS8kpGk+3mofOPvPvXnOCLdff62usI/KOMw==}
peerDependencies: peerDependencies:
svelte: ^3.24 svelte: ^3.24
@ -3701,7 +3710,7 @@ packages:
dependencies: dependencies:
dedent-js: 1.0.1 dedent-js: 1.0.1
pascal-case: 3.1.2 pascal-case: 3.1.2
svelte: 3.46.4 svelte: 3.48.0
typescript: 4.6.2 typescript: 4.6.2
dev: true dev: true

50
src/package/components/Button.svelte
View File

@ -3,42 +3,48 @@
// TODO: icon only buttons should have uniform padding // TODO: icon only buttons should have uniform padding
// TODO: Could be a class // TODO: Could be a class
import { classCombine } from '../utils/classCombine' import { classCombine } from '../utils/classCombine';
/** The element to be styled as a button */ /** The element to be styled as a button */
export let as: 'button' | 'a' | 'summary' | 'input' = 'button' export let as: 'button' | 'a' | 'summary' | 'input' = 'button';
export let href = '' export let href = '';
if (href) as = 'a' if (href) as = 'a';
/** Use `value` if the button is an `<input`> */ /** Use `value` if the button is an `<input`> */
export let value = '' export let value = '';
export let size: 'sm' | 'md' | 'lg' = 'md' export let size: 'sm' | 'md' | 'lg' = 'md';
export let color: '' | 'raised' | 'primary' | 'primary-light' | 'danger'| 'danger-light' | 'transparent' = '' export let color:
| ''
| 'raised'
| 'primary'
| 'primary-light'
| 'danger'
| 'danger-light'
| 'transparent' = '';
/** Show notification badge in the upper right of button */ /** Show notification badge in the upper right of button */
export let badge = false export let badge = false;
export let disabled = false export let disabled = false;
let className: string let className: string;
$: className = classCombine(['button', `button--size-${size}`, `button--color-${color}`, badge && 'has-badge']) $: className = classCombine([
'button',
`button--size-${size}`,
`button--color-${color}`,
badge && 'has-badge',
]);
</script> </script>
{#if as === 'button'} {#if as === 'a'}
<button class={className} {disabled} on:click>
<slot/>
</button>
{:else if as === 'a'}
<a class={className} {href} {disabled} on:click> <a class={className} {href} {disabled} on:click>
<slot /> <slot />
</a> </a>
{:else if as === 'summary'} {:else}
<summary class={className} {disabled} on:click> <svelte:element this={as} class={className} {disabled} on:click>
<slot /> <slot />
</summary> </svelte:element>
{:else if as === 'input'}
<input class={className} {value} {disabled} on:click/>
{/if} {/if}
<style lang="postcss"> <style lang="postcss">
@ -145,7 +151,7 @@
/* Only child doesn't work as intended because text is passed through as `innerText` */ /* Only child doesn't work as intended because text is passed through as `innerText` */
:global(.icon:only-child) { :global(.icon:only-child) {
margin: 4px -6px; margin: 4px -7px;
} }
} }
</style> </style>

3
src/package/config/svelte.config.js
View File

@ -6,7 +6,8 @@ export const preprocess = sveltePreprocess({
postcss: true, postcss: true,
}) })
export const plugins = [svelteSvg(), export const plugins = [
svelteSvg(),
Icons({ Icons({
compiler: 'svelte', compiler: 'svelte',
defaultClass: 'icon', defaultClass: 'icon',

1
src/package/styles/classes/divider.postcss
View File

@ -2,4 +2,5 @@
margin: 0.25rem 0; margin: 0.25rem 0;
border: none; border: none;
border-top: 1px solid var(--color-divider); border-top: 1px solid var(--color-divider);
width: 100%;
} }

1
src/package/styles/normalize.postcss
View File

@ -57,5 +57,6 @@ ul {
.icon { .icon {
height: auto; height: auto;
width: 16px; width: 16px;
min-width: 16px;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
} }

2
src/package/utils/ago.ts
View File

@ -1,6 +1,6 @@
/** /**
* Human readable elapsed or remaining time (example: 3 minutes ago) * Human readable elapsed or remaining time (example: 3 minutes ago)
* @author github.com/victornpb * @author https://github.com/victornpb
* @see https://stackoverflow.com/a/67338038/938822 * @see https://stackoverflow.com/a/67338038/938822
*/ */
export function ago( export function ago(

2
src/routes/_internal/components/Sidebar.svelte
View File

@ -80,7 +80,7 @@ import { page } from '$app/stores';
height: 100vh; height: 100vh;
max-height: 100vh; max-height: 100vh;
overflow-y: auto; overflow-y: auto;
grid-gap: 16px; grid-gap: 40px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

10
src/routes/classes/Divider.md
View File

@ -1,9 +1,13 @@
```svelte example raised ```svelte example raised hideStyle
<div class="card">
Some words could go here. Some words could go here.
<hr class="divider" /> <hr class="divider" />
And some other words could go here. And some other words could go here.
</div>
<style>
.example__source__code {
flex-direction: column;
}
</style>
``` ```

2
src/routes/getting-started/configure.md
View File

@ -2,7 +2,7 @@
title: Configure title: Configure
--- ---
To make use of the built-in icons, styles, and plugins in omorphia, you will need to update the config files. To make use of the built-in icons, styles, and plugins in omorphia, you will need to update your project's config files.
## SvelteKit ## SvelteKit

58
src/routes/getting-started/icons.md
View File

@ -2,64 +2,26 @@
title: Icons title: Icons
--- ---
<script>
import IconHeart from 'virtual:icons/heroicons-outline/heart'
</script>
Use [unplugin-icons](https://github.com/antfu/unplugin-icons) to import icons as Svelte components.
## Installation
Install the package with:
```bash
pnpm add -D unplugin-icons
```
Import the plugin in your `svelte.config.js` file:
```js
import Icons from 'unplugin-icons/vite';
const config = {
kit: {
vite: {
plugins: [
Icons({
compiler: 'svelte',
}),
],
},
},
};
```
## Choosing icons ## Choosing icons
`heroicons-outline` is the most used icon pack, and should be preferred above all others. If you can't find a good icon, or are looking for an alternative, use `lucide`, `fa-regular` (FontAwesome), `heroicons-solid`, and `carbon`, in that order. [Browse icons...](https://icones.js.org/collection/heroicons-outline) The follwing icon packs are included with omorphia:
To install an icon pack, run: `heroicons-outline` `lucide` `fa-regular` `heroicons-solid` `carbon`
```bash Aim to find icons from `heroicons-outline` first, and then from the following packs if you can't find what you are looking for. [Browse icons...](https://icones.js.org/collection/heroicons-outline)
pnpm add -D @iconify-json/heroicons-outline
```
Replacing `heroicons-outline`, with the pack you are trying to install.
## Using icons ## Using icons
Import an icon in the `<script>` tag of your component: Import an icon in the `<script>` tag of your component.
```js
import IconHeart from 'virtual:icons/heroicons-outline/heart'
```
Then use the icon as if it were a Svelte component: Then use the icon as if it were a Svelte component:
> The `height` and `width` props are optional, and take CSS compatible values > The `height` and `width` props are optional, and take CSS compatible values
```html ```svelte example
That's lovely <IconHeart height="14px" />! <script lang="ts">
``` import IconHeart from 'virtual:icons/heroicons-outline/heart'
</script>
That's lovely <IconHeart height="14px" />! <p> That's lovely <IconHeart height="14px" />! </p>
```

18
src/routes/getting-started/illustrations.md
View File

@ -2,6 +2,20 @@
title: Using illustrations title: Using illustrations
--- ---
TODO Find an illustration from [unDraw](https://undraw.co/illustrations) and download it as an SVG.
Use `.illustration` class. Put the illustration in the `src/assets/images/illustrations` folder. Rename it to `undraw_` + the illustration slug.
Replace colors in the SVG with CSS variables such as `var(--color-brand)` and `var(--color-raised)`. For colors that are the same as the font color, use `currentColor`.
Add the `.illustration` class to the SVG
Import the SVG in the `<script>` of your svelte file, and treat the illustration as a Svelte component:
```svelte
<script>
import NoData from '$assets/images/illustrations/undraw_no_data.svg'
</script>
<NoData />
```

2
src/routes/index.md
View File

@ -24,7 +24,7 @@ pnpm add omorphia
Use a component by importing from `omorphia`. For example, use the [Button component](/components/Button) like so: Use a component by importing from `omorphia`. For example, use the [Button component](/components/Button) like so:
```svelte example ```svelte example raised
<script lang="ts"> <script lang="ts">
import { Button } from "omorphia" import { Button } from "omorphia"
</script> </script>