From bfe4d0066b2253f81f5da37409539eebdc8d9dd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lehoczky=20Zolt=C3=A1n?= Date: Wed, 7 Aug 2024 20:18:34 +0200 Subject: [PATCH 1/7] basic astro docs --- .gitignore | 2 + .prettierignore | 4 +- .prettierrc.mjs | 10 +- .vscode/extensions.json | 2 +- .vscode/settings.json | 12 +- package.json | 1 + packages/demo/.gitignore | 30 +- packages/demo/assets/css/main.css | 21 - packages/demo/astro.config.mjs | 14 + packages/demo/code-examples.ts | 103 - packages/demo/components/CodeBlock.vue | 22 - packages/demo/components/DemoFrame.vue | 16 - packages/demo/components/DemoSection.vue | 28 - packages/demo/components/GithubBadge.vue | 57 - packages/demo/components/GithubLink.vue | 8 - packages/demo/components/Icon/Github.vue | 8 - .../demo/components/Icon/HamburgerMenu.vue | 16 - packages/demo/components/Icon/LockClosed.vue | 16 - packages/demo/components/Icon/Warning.vue | 12 - packages/demo/components/ResizableWindow.vue | 53 - .../components/ResizableWindowDimensions.vue | 24 - .../demo/components/ResizableWindowHeader.vue | 33 - .../demo/components/ScreenWidthWarning.vue | 16 - packages/demo/composables/useShikiji.ts | 28 - .../watchWithFirstUpdateSkipped.ts | 18 - packages/demo/layouts/default.vue | 3 - packages/demo/layouts/frame-content.vue | 5 - packages/demo/nuxt.config.ts | 52 - packages/demo/package.json | 33 +- packages/demo/pages/example/border-radius.vue | 18 - packages/demo/pages/example/border.vue | 18 - packages/demo/pages/example/grid-gap.vue | 32 - packages/demo/pages/example/growing.vue | 18 - packages/demo/pages/example/position.vue | 22 - packages/demo/pages/example/shrinking.vue | 17 - packages/demo/pages/index.vue | 77 - packages/demo/postcss.config.cjs | 3 + .../demo/src/assets/box-to-circle.example.css | 9 + .../demo/src/assets/fluid-border.example.css | 9 + .../src/assets/fluid-grid-gap.example.css | 13 + .../src/assets/growing-square.example.css | 11 + .../demo/src/assets/padded-box.example.css | 9 + .../src/assets/positioned-box.example.css | 13 + .../src/assets/shrinking-square.example.css | 11 + .../demo/src/assets/typography.example.css | 13 + .../demo/src/components/DemoSection.astro | 31 + .../demo/src/components/GitHubBadge.astro | 63 + packages/demo/src/components/GitHubLink.astro | 18 + packages/demo/src/components/IconGitHub.astro | 21 + .../demo/src/components/IconHamburger.astro | 24 + .../demo/src/components/IconLockClosed.astro | 25 + .../demo/src/components/IconWarning.astro | 24 + .../demo/src/components/ResizableWindow.astro | 13 + .../components/ResizableWindowHeader.astro | 23 + .../src/components/ScreenWidthWarning.astro | 29 + packages/demo/src/env.d.ts | 1 + packages/demo/src/layouts/ExampleLayout.astro | 21 + packages/demo/src/layouts/MainLayout.astro | 42 + .../src/pages/examples/box-to-circle.astro | 18 + .../src/pages/examples/fluid-border.astro | 16 + .../src/pages/examples/fluid-grid-gap.astro | 31 + .../src/pages/examples/growing-square.astro | 14 + .../pages/examples/padded-box.astro} | 26 +- .../src/pages/examples/positioned-box.astro | 19 + .../src/pages/examples/shrinking-square.astro | 14 + .../pages/examples/typography.astro} | 27 +- packages/demo/src/pages/index.astro | 90 + packages/demo/src/utils/cn.ts | 6 + packages/demo/tailwind.config.ts | 15 +- packages/demo/tsconfig.json | 5 +- pnpm-lock.yaml | 9212 +++++------------ 71 files changed, 3334 insertions(+), 7434 deletions(-) delete mode 100644 packages/demo/assets/css/main.css create mode 100644 packages/demo/astro.config.mjs delete mode 100644 packages/demo/code-examples.ts delete mode 100644 packages/demo/components/CodeBlock.vue delete mode 100644 packages/demo/components/DemoFrame.vue delete mode 100644 packages/demo/components/DemoSection.vue delete mode 100644 packages/demo/components/GithubBadge.vue delete mode 100644 packages/demo/components/GithubLink.vue delete mode 100644 packages/demo/components/Icon/Github.vue delete mode 100644 packages/demo/components/Icon/HamburgerMenu.vue delete mode 100644 packages/demo/components/Icon/LockClosed.vue delete mode 100644 packages/demo/components/Icon/Warning.vue delete mode 100644 packages/demo/components/ResizableWindow.vue delete mode 100644 packages/demo/components/ResizableWindowDimensions.vue delete mode 100644 packages/demo/components/ResizableWindowHeader.vue delete mode 100644 packages/demo/components/ScreenWidthWarning.vue delete mode 100644 packages/demo/composables/useShikiji.ts delete mode 100644 packages/demo/composables/watchWithFirstUpdateSkipped.ts delete mode 100644 packages/demo/layouts/default.vue delete mode 100644 packages/demo/layouts/frame-content.vue delete mode 100644 packages/demo/nuxt.config.ts delete mode 100644 packages/demo/pages/example/border-radius.vue delete mode 100644 packages/demo/pages/example/border.vue delete mode 100644 packages/demo/pages/example/grid-gap.vue delete mode 100644 packages/demo/pages/example/growing.vue delete mode 100644 packages/demo/pages/example/position.vue delete mode 100644 packages/demo/pages/example/shrinking.vue delete mode 100644 packages/demo/pages/index.vue create mode 100644 packages/demo/postcss.config.cjs create mode 100644 packages/demo/src/assets/box-to-circle.example.css create mode 100644 packages/demo/src/assets/fluid-border.example.css create mode 100644 packages/demo/src/assets/fluid-grid-gap.example.css create mode 100644 packages/demo/src/assets/growing-square.example.css create mode 100644 packages/demo/src/assets/padded-box.example.css create mode 100644 packages/demo/src/assets/positioned-box.example.css create mode 100644 packages/demo/src/assets/shrinking-square.example.css create mode 100644 packages/demo/src/assets/typography.example.css create mode 100644 packages/demo/src/components/DemoSection.astro create mode 100644 packages/demo/src/components/GitHubBadge.astro create mode 100644 packages/demo/src/components/GitHubLink.astro create mode 100644 packages/demo/src/components/IconGitHub.astro create mode 100644 packages/demo/src/components/IconHamburger.astro create mode 100644 packages/demo/src/components/IconLockClosed.astro create mode 100644 packages/demo/src/components/IconWarning.astro create mode 100644 packages/demo/src/components/ResizableWindow.astro create mode 100644 packages/demo/src/components/ResizableWindowHeader.astro create mode 100644 packages/demo/src/components/ScreenWidthWarning.astro create mode 100644 packages/demo/src/env.d.ts create mode 100644 packages/demo/src/layouts/ExampleLayout.astro create mode 100644 packages/demo/src/layouts/MainLayout.astro create mode 100644 packages/demo/src/pages/examples/box-to-circle.astro create mode 100644 packages/demo/src/pages/examples/fluid-border.astro create mode 100644 packages/demo/src/pages/examples/fluid-grid-gap.astro create mode 100644 packages/demo/src/pages/examples/growing-square.astro rename packages/demo/{pages/example/padding.vue => src/pages/examples/padded-box.astro} (53%) create mode 100644 packages/demo/src/pages/examples/positioned-box.astro create mode 100644 packages/demo/src/pages/examples/shrinking-square.astro rename packages/demo/{pages/example/typography.vue => src/pages/examples/typography.astro} (54%) create mode 100644 packages/demo/src/pages/index.astro create mode 100644 packages/demo/src/utils/cn.ts diff --git a/.gitignore b/.gitignore index 91db659..242b94c 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,5 @@ coverage/ .nx/cache .nx/workspace-data + +demo.old diff --git a/.prettierignore b/.prettierignore index d4ec270..6389fa8 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,7 +1,5 @@ coverage dist node_modules -.nuxt -.output pnpm-lock.yaml -/.nx/workspace-data \ No newline at end of file +/.nx/workspace-data diff --git a/.prettierrc.mjs b/.prettierrc.mjs index 846a2a4..4cbdcfa 100644 --- a/.prettierrc.mjs +++ b/.prettierrc.mjs @@ -3,6 +3,14 @@ import config from "@lehoczky/prettier-config" /** @type {import("prettier").Options} */ export default { ...config, - plugins: ["prettier-plugin-tailwindcss"], + plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"], tailwindConfig: "./packages/demo/tailwind.config.ts", + overrides: [ + { + files: "*.astro", + options: { + parser: "astro", + }, + }, + ], } diff --git a/.vscode/extensions.json b/.vscode/extensions.json index a03e7df..5e5a692 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -6,7 +6,7 @@ "esbenp.prettier-vscode", "stylelint.vscode-stylelint", "streetsidesoftware.code-spell-checker", - "bierner.comment-tagged-templates", + "astro-build.astro-vscode", "vitest.explorer" ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index 6631dc0..81f0457 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,5 +6,15 @@ }, "css.validate": false, "stylelint.validate": ["css", "vue"], - "cSpell.words": ["octo", "octocat", "postcss", "Shiki", "shikiji", "vueuse"] + "cSpell.words": [ + "astro", + "astrojs", + "clsx", + "octo", + "octocat", + "postcss", + "Shiki", + "shikiji", + "vueuse" + ] } diff --git a/package.json b/package.json index 46b7e53..ba297d9 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "postcss": "^8.4.40", "postcss-html": "^1.7.0", "prettier": "^3.3.3", + "prettier-plugin-astro": "^0.14.1", "prettier-plugin-tailwindcss": "^0.5.14", "stylelint": "^16.8.1", "stylelint-config-recommended-vue": "^1.5.0", diff --git a/packages/demo/.gitignore b/packages/demo/.gitignore index 438cb08..016b59e 100644 --- a/packages/demo/.gitignore +++ b/packages/demo/.gitignore @@ -1,8 +1,24 @@ -node_modules -*.log* -.nuxt -.nitro -.cache -.output +# build output +dist/ + +# generated types +.astro/ + +# dependencies +node_modules/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# environment variables .env -dist +.env.production + +# macOS-specific files +.DS_Store + +# jetbrains setting folder +.idea/ diff --git a/packages/demo/assets/css/main.css b/packages/demo/assets/css/main.css deleted file mode 100644 index c5d229f..0000000 --- a/packages/demo/assets/css/main.css +++ /dev/null @@ -1,21 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer base { - h1 { - @apply text-4xl sm:text-5xl; - } - - h2 { - @apply mb-6 text-2xl sm:text-3xl; - } -} - -:root { - color-scheme: dark; -} - -.shiki { - @apply overflow-x-auto p-4; -} diff --git a/packages/demo/astro.config.mjs b/packages/demo/astro.config.mjs new file mode 100644 index 0000000..c94b8bb --- /dev/null +++ b/packages/demo/astro.config.mjs @@ -0,0 +1,14 @@ +import tailwind from "@astrojs/tailwind" +import { defineConfig } from "astro/config" + +// https://astro.build/config +export default defineConfig({ + integrations: [ + tailwind({ + applyBaseStyles: false, + }), + ], + devToolbar: { + enabled: false, + }, +}) diff --git a/packages/demo/code-examples.ts b/packages/demo/code-examples.ts deleted file mode 100644 index eb19d41..0000000 --- a/packages/demo/code-examples.ts +++ /dev/null @@ -1,103 +0,0 @@ -export const typography = /*css*/ ` -div { - font-size: fluid(16px, 28px, 480px, 720px); - line-height: fluid(26px, 38px, 480px, 720px); - letter-spacing: fluid(0, 0.6px, 480px, 720px); -} - -/* Compiled output: -div { - font-size: clamp(16px, -8px + 5vw, 28px); - line-height: clamp(26px, 2px + 5vw, 38px); - letter-spacing: clamp(0px, -1.2px + 0.25vw, 0.6px); -} -*/` - -export const growingSquare = /*css*/ ` -div { - width: fluid(50px, 200px, 480px, 720px); - height: fluid(50px, 200px, 480px, 720px); -} - -/* Compiled output: -div { - width: clamp(50px, -250px + 62.5vw, 200px); - height: clamp(50px, -250px + 62.5vw, 200px); -} -*/` - -export const paddedBox = /*css*/ ` -div { - padding: fluid(4px, 40px, 480px, 720px); -} - -/* Compiled output: -div { - padding: clamp(4px, -68px + 15vw, 40px); -} -*/` - -export const positionedBox = /*css*/ ` -div { - position: absolute; - top: fluid(0px, 60px, 480px, 720px); - left: fluid(0px, 60px, 480px, 720px); -} - -/* Compiled output: -div { - position: absolute; - top: clamp(0px, -120px + 25vw, 60px); - left: clamp(0px, -120px + 25vw, 60px); -} -*/` - -export const shrinkingSquare = /*css*/ ` -div { - width: fluid(200px, 50px, 480px, 720px); - height: fluid(200px, 50px, 480px, 720px); -} - -/* Compiled output: -div { - width: clamp(50px, 500px + -62.5vw, 200px); - height: clamp(50px, 500px + -62.5vw, 200px); -} -*/` - -export const boxToCircle = /*css*/ ` -div { - border-radius: fluid(0, 50px, 480px, 720px); -} - -/* Compiled output: -div { - border-radius: clamp(0px, -100px + 20.8333vw, 50px); -} -*/` - -export const fluidGridGap = /*css*/ ` -div { - display: grid; - grid-template-columns: 1fr 1fr; - gap: fluid(0, 30px, 480px, 720px); -} - -/* Compiled output: -div { - display: grid; - grid-template-columns: 1fr 1fr; - gap: clamp(0px, -60px + 12.5vw, 30px); -} -*/` - -export const fluidBorder = /*css*/ ` -div { - border: fluid(10px, 22px, 480px, 720px) solid black; -} - -/* Compiled output: -div { - border: clamp(10px, -14px + 5vw, 22px) solid black; -} -*/` diff --git a/packages/demo/components/CodeBlock.vue b/packages/demo/components/CodeBlock.vue deleted file mode 100644 index 1273f9a..0000000 --- a/packages/demo/components/CodeBlock.vue +++ /dev/null @@ -1,22 +0,0 @@ - - - diff --git a/packages/demo/components/DemoFrame.vue b/packages/demo/components/DemoFrame.vue deleted file mode 100644 index 58752dd..0000000 --- a/packages/demo/components/DemoFrame.vue +++ /dev/null @@ -1,16 +0,0 @@ -