From a48e6f82d114c5e56b79782d6649881c8b466ac9 Mon Sep 17 00:00:00 2001 From: venashial Date: Sat, 16 Apr 2022 00:29:35 -0700 Subject: [PATCH] docs: Improve example component + Fix sidebar on mobile --- mdsvex.config.js | 11 +- package.json | 2 +- pnpm-lock.yaml | 20 +- src/app.d.ts | 1 + src/package/components/NavRow.svelte | 123 +++++---- src/package/config/svelte.config.js | 2 +- src/package/styles/classes/base.postcss | 2 +- src/package/styles/normalize.postcss | 6 + .../styles/variables/typography.postcss | 6 +- src/routes/__layout.svelte | 2 +- .../_internal/components/Example.svelte | 8 +- .../_internal/components/Sidebar.svelte | 255 +++++++++--------- src/routes/classes/Actions.md | 2 +- src/routes/classes/Divider.md | 2 +- src/routes/classes/InfoTable.md | 2 +- src/routes/classes/Link.md | 4 +- src/routes/classes/Member.md | 2 +- src/routes/classes/Stat.md | 4 +- src/routes/classes/Tags.md | 2 +- src/routes/classes/Title.md | 2 +- src/routes/components/Avatar.md | 2 +- src/routes/components/Badge.md | 2 +- src/routes/components/Button.md | 20 +- src/routes/components/Checkbox.md | 4 +- src/routes/components/CheckboxList.md | 2 +- src/routes/components/CheckboxVirtualList.md | 2 +- src/routes/components/Chips.md | 4 +- src/routes/components/FormField.md | 2 +- src/routes/components/NavRow.md | 2 +- src/routes/components/Select.md | 2 +- src/routes/components/TextInput.md | 2 +- src/routes/getting-started/configure.md | 40 +++ src/routes/getting-started/postcss.md | 31 --- tsconfig.json | 32 ++- 34 files changed, 323 insertions(+), 282 deletions(-) create mode 100644 src/routes/getting-started/configure.md delete mode 100644 src/routes/getting-started/postcss.md diff --git a/mdsvex.config.js b/mdsvex.config.js index 71cdaa7f..2e8d396e 100644 --- a/mdsvex.config.js +++ b/mdsvex.config.js @@ -8,7 +8,16 @@ const config = defineConfig({ dashes: 'oldschool', }, - remarkPlugins: [[examples, { ExampleComponent: '$routes/_internal/components/Example.svelte' }]], + remarkPlugins: [ + [ + examples, + { + defaults: { + Wrapper: '$routes/_internal/components/Example.svelte' + } + } + ] + ], rehypePlugins: [], layout: { diff --git a/package.json b/package.json index 27c9d325..2e3a66b0 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.1", "mdsvex": "^0.10.5", - "mdsvexamples": "^0.0.8", + "mdsvexamples": "^0.3.0", "nodemon": "^2.0.15", "sveld": "^0.13.4", "svelte": "^3.44.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 69323c0d..73699a49 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -19,7 +19,7 @@ specifiers: insane: ^2.6.2 marked: ^4.0.12 mdsvex: ^0.10.5 - mdsvexamples: ^0.0.8 + mdsvexamples: 0.3.0 nodemon: ^2.0.15 postcss: ^8.4.8 postcss-easy-import: ^4.0.0 @@ -73,14 +73,14 @@ dependencies: devDependencies: '@sveltejs/adapter-static': 1.0.0-next.29 - '@sveltejs/kit': 1.0.0-next.304_svelte@3.46.4 + '@sveltejs/kit': 1.0.0-next.314_svelte@3.46.4 '@typescript-eslint/eslint-plugin': 5.14.0_e3f5f4efe2bd492e36eb6c1c619dfc98 '@typescript-eslint/parser': 5.14.0_eslint@7.32.0+typescript@4.6.2 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 mdsvex: 0.10.5_svelte@3.46.4 - mdsvexamples: 0.0.8 + mdsvexamples: 0.3.0 nodemon: 2.0.15 sveld: 0.13.4_4db7643ceec6f88f007a3dfc606d2828 svelte: 3.46.4 @@ -358,8 +358,8 @@ packages: tiny-glob: 0.2.9 dev: true - /@sveltejs/kit/1.0.0-next.304_svelte@3.46.4: - resolution: {integrity: sha512-3+bCoDsF2Omolx51lK6+4Zgr8NYge8USxKpZpAg8OfonEW8L4GToyV4g+udLMCI3CC4QEw3eS1RFUj9UxLf2NQ==} + /@sveltejs/kit/1.0.0-next.314_svelte@3.46.4: + resolution: {integrity: sha512-EkXjEd30XO8+AydBLARxAtI6Ak8V0KFSEJ07sNsrkGq9J70sWPL7yGenhGaeq6S852XZAqeyWd6uGQZmQLR4Wg==} engines: {node: '>=14.13'} hasBin: true peerDependencies: @@ -2193,14 +2193,14 @@ packages: vfile-message: 2.0.4 dev: true - /mdsvexamples/0.0.8: - resolution: {integrity: sha512-BFyJeke4r/PbWWk4+jXVXjuR0/YNMJK10rXjRGarmr7+bqg3kIlfTFjew/uMx9KBYchWLaJlnVQPrh5nQN5/lg==} + /mdsvexamples/0.3.0: + resolution: {integrity: sha512-d662JjeT0Vw+XPwc2u+DAnGq+x8JMNJa17vMQpT+uvHJpkBs5Uszm0oDoU3LHmI1ZVB/Hq17HVrr0N/IUFQUJg==} dependencies: abstract-syntax-tree: 2.20.5 prism-svelte: 0.5.0 prismjs: 1.27.0 unist-util-visit: 4.1.0 - unplugin: 0.5.2 + unplugin: 0.6.2 upath: 2.0.1 transitivePeerDependencies: - esbuild @@ -3903,8 +3903,8 @@ packages: webpack-virtual-modules: 0.4.3 dev: false - /unplugin/0.5.2: - resolution: {integrity: sha512-3SPYtus/56cxyD4jfjrnqCvb6jPxvdqJNaRXnEaG2BhNEMaoygu/39AG+LwKmiIUzj4XHyitcfZ7scGlWfEigA==} + /unplugin/0.6.2: + resolution: {integrity: sha512-+QONc2uBFQbeo4x5mlJHjTKjR6pmuchMpGVrWhwdGFFMb4ttFZ4E9KqhOOrNcm3Q8NNyB1vJ4s5e36IZC7UWYw==} peerDependencies: esbuild: '>=0.13' rollup: ^2.50.0 diff --git a/src/app.d.ts b/src/app.d.ts index 9cbf1c51..36396ad5 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -1,4 +1,5 @@ /// +/// // See https://kit.svelte.dev/docs/types#the-app-namespace // for information about these interfaces diff --git a/src/package/components/NavRow.svelte b/src/package/components/NavRow.svelte index a6d15c9f..c982a58c 100644 --- a/src/package/components/NavRow.svelte +++ b/src/package/components/NavRow.svelte @@ -1,81 +1,80 @@ diff --git a/src/package/config/svelte.config.js b/src/package/config/svelte.config.js index cf662072..2650d031 100644 --- a/src/package/config/svelte.config.js +++ b/src/package/config/svelte.config.js @@ -10,6 +10,6 @@ export const plugins = [svelteSvg(), Icons({ compiler: 'svelte', defaultClass: 'icon', - scale: 1.1428, // 1.1428rem = 16px when root size is 14px + scale: 1, }), ] \ No newline at end of file diff --git a/src/package/styles/classes/base.postcss b/src/package/styles/classes/base.postcss index 64b19aba..8ae999a2 100644 --- a/src/package/styles/classes/base.postcss +++ b/src/package/styles/classes/base.postcss @@ -2,7 +2,7 @@ background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-standard); - font-size: var(--font-size-nm); + font-size: var(--font-size); font-weight: var(--font-weight-regular); scrollbar-color: var(--color-scrollbar) var(--color-bg); diff --git a/src/package/styles/normalize.postcss b/src/package/styles/normalize.postcss index d0fc06eb..212eb2cd 100644 --- a/src/package/styles/normalize.postcss +++ b/src/package/styles/normalize.postcss @@ -53,3 +53,9 @@ p { ul { padding: 0 0 0 1.5rem; } + +.icon { + height: auto; + width: 16px; + aspect-ratio: 1 / 1; +} \ No newline at end of file diff --git a/src/package/styles/variables/typography.postcss b/src/package/styles/variables/typography.postcss index c94446b0..85fd5976 100644 --- a/src/package/styles/variables/typography.postcss +++ b/src/package/styles/variables/typography.postcss @@ -17,9 +17,9 @@ --h5-size: 14px; --h6-size: 12px; - --font-size-lg: 17px; - --font-size-sm: 12px; - --font-size: 14px; + --font-size-lg: 19px; + --font-size-sm: 13px; + --font-size: 16px; /* Line heights */ --lh-condensed-ultra: 1; diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 9712f589..29e5735c 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -24,7 +24,7 @@ body { margin: 0; - font-size: var(--body-font-size); + font-size: var(--font-size); font-family: var(--body-font); --accent-color: hsl(331, 80%, 45%); diff --git a/src/routes/_internal/components/Example.svelte b/src/routes/_internal/components/Example.svelte index ed58d29a..6d3b60f6 100644 --- a/src/routes/_internal/components/Example.svelte +++ b/src/routes/_internal/components/Example.svelte @@ -1,10 +1,12 @@
diff --git a/src/routes/_internal/components/Sidebar.svelte b/src/routes/_internal/components/Sidebar.svelte index 48b4f797..a8057f2b 100644 --- a/src/routes/_internal/components/Sidebar.svelte +++ b/src/routes/_internal/components/Sidebar.svelte @@ -1,159 +1,156 @@ \ No newline at end of file + + &__toggle { + position: fixed; + left: 16px; + bottom: 16px; + padding: 8px; + aspect-ratio: 1 / 1; + background-color: var(--accent-color); + z-index: 20; + border-radius: var(--rounded); + color: white; + box-shadow: var(--shadow-inset-sm), var(--shadow-floating); + transition: left 0.2s cubic-bezier(0.38, 0.52, 0.37, 1.27); + + :global(.icon) { + width: 32px; + height: auto; + } + + @media (--md) { + visibility: hidden; + } + } + + &.slideIn { + left: 0; + + .sidebar__toggle { + left: calc(32px + min(70vw, var(--sidebar-width))); + } + } + + scrollbar-color: var(--scrollbar-thumb-color) var(--sidebar-color); + + &::-webkit-scrollbar { + width: 14px; + } + + &::-webkit-scrollbar-track { + background-color: var(--sidebar-color); + } + + &::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-thumb-color); + border-radius: 999px; + border: 3px solid var(--sidebar-color); + } + } + diff --git a/src/routes/classes/Actions.md b/src/routes/classes/Actions.md index 5ecd8dfd..7ee91fbf 100644 --- a/src/routes/classes/Actions.md +++ b/src/routes/classes/Actions.md @@ -1,4 +1,4 @@ -```svelte example +```svelte example raised diff --git a/src/routes/classes/Stat.md b/src/routes/classes/Stat.md index 11353737..7bbecdb9 100644 --- a/src/routes/classes/Stat.md +++ b/src/routes/classes/Stat.md @@ -1,6 +1,6 @@ ### Single Example -```svelte example +```svelte example raised @@ -13,7 +13,7 @@ ### Group Example -```svelte example +```svelte example raised diff --git a/src/routes/components/Badge.md b/src/routes/components/Badge.md index ab244b8c..55830e4a 100644 --- a/src/routes/components/Badge.md +++ b/src/routes/components/Badge.md @@ -1,4 +1,4 @@ -```svelte example +```svelte example raised diff --git a/src/routes/components/Button.md b/src/routes/components/Button.md index 5f4d8985..fd6fe387 100644 --- a/src/routes/components/Button.md +++ b/src/routes/components/Button.md @@ -6,12 +6,12 @@ import IconDownload from 'virtual:icons/heroicons-outline/download' - + ``` -### Group example +### Color variants example -```svelte example +```svelte example raised + +
+
``` \ No newline at end of file diff --git a/src/routes/components/Checkbox.md b/src/routes/components/Checkbox.md index fd63a679..44c3893b 100644 --- a/src/routes/components/Checkbox.md +++ b/src/routes/components/Checkbox.md @@ -1,6 +1,6 @@ ### Text-only Example -```svelte example +```svelte example raised @@ -10,7 +10,7 @@ ### Text with Icon Example -```svelte example +```svelte example raised @@ -20,7 +20,7 @@ ### Force an option to be selected with `neverEmpty` -```svelte example +```svelte example raised diff --git a/src/routes/components/Select.md b/src/routes/components/Select.md index 2604d4f1..2beecfcb 100644 --- a/src/routes/components/Select.md +++ b/src/routes/components/Select.md @@ -1,4 +1,4 @@ -```svelte example +```svelte example raised diff --git a/src/routes/getting-started/configure.md b/src/routes/getting-started/configure.md new file mode 100644 index 00000000..7dfc9f18 --- /dev/null +++ b/src/routes/getting-started/configure.md @@ -0,0 +1,40 @@ +--- +title: Configure +--- + +To make use of the built-in icons, styles, and plugins in omorphia, you will need to update the config files. + +## SvelteKit + +Add the following parts to your `svelte.config.js` file: + +```js +import { preprocess, plugins } from 'omorphia/config/svelte.config' + +/** @type {import('@sveltejs/kit').Config} */ +const config = { + preprocess: [ + preprocess, + ], + + kit: { + vite: { + plugins: [ + ...plugins, + ], + }, + }, +}; + +export default config; +``` + +## PostCSS + +Create a `postcss.config.cjs` file in the root of your project. + +Add the following line to that file: + +```js +module.exports = require('omorphia/config/postcss.config.cjs') +``` \ No newline at end of file diff --git a/src/routes/getting-started/postcss.md b/src/routes/getting-started/postcss.md deleted file mode 100644 index d91c459e..00000000 --- a/src/routes/getting-started/postcss.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: PostCSS Configuration ---- - -Use [PostCSS](https://postcss.org/) to process your css in components and `.postcss` files. - -Install PostCSS with: - -```bash -pnpx svelte-add@latest postcss -``` - -This is the recommended `postcss.config.cjs` setup: - -```js -const config = { - plugins: [ - require('postcss-import'), - require('postcss-strip-inline-comments'), - require('postcss-nested'), - require('postcss-preset-env'), - require('autoprefixer'), - require('postcss-extend-rule'), - process.env.NODE_ENV === 'development' && require('cssnano')({ - preset: 'default', - }) - ], -}; - -module.exports = config; -``` \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 92cc890c..477218dd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,17 +1,21 @@ { - "paths": { - "omorphia/*": [ - "src/package/*" - ], - "omorphia": [ - "src/package" - ], - "$package/*": [ - "src/package/*" - ], - "$routes/*": [ - "src/routes/*" - ] - }, + "compilerOptions": { + "paths": { + "omorphia/*": [ + "src/package/*" + ], + "omorphia": [ + "src/package" + ], + "$package/*": [ + "src/package/*" + ], + "$routes/*": [ + "src/routes/*" + ], + "$lib":["src/package"], + "$lib/*":["src/package/*"] + } + }, "extends": "./.svelte-kit/tsconfig.json" }