From 011c21c0f434b4c829d8af6b12cf9ed075f37597 Mon Sep 17 00:00:00 2001 From: dimaslz Date: Sat, 9 Mar 2024 14:11:24 +0100 Subject: [PATCH] chore(landing): update examples --- ...to-deploy-production-live-main-on-push.yml | 297 ++++++++---------- .packito.json | 32 +- .prettierrc | 5 +- README.md | 31 +- generate-examples.js | 52 +++ package.json | 3 +- postcss.config.cjs | 10 +- src/app.html | 6 +- src/app.scss | 4 +- src/components/h/h1.svelte | 4 +- src/components/h/h2.svelte | 4 +- src/hooks/useClickOutside/useClickOutside.ts | 2 +- src/hooks/useDarkMode/useDarkMode.ts | 3 +- src/hooks/useElementSize/useElementSize.ts | 2 +- src/hooks/useFetch/useFetch.ts | 2 +- src/hooks/useHover/useHover.ts | 2 +- src/hooks/useInterval/useInterval.ts | 3 +- src/hooks/useLocalStorage/useLocalStorage.ts | 3 +- src/hooks/useMediaQuery/useMediaQuery.ts | 3 +- src/hooks/useScript/useScript.ts | 2 +- .../useSessionStorage/useSessionStorage.ts | 3 +- src/hooks/useTimeoutFn/useTimeoutFn.svelte | 2 - src/hooks/useToggle/useToggle.ts | 2 +- src/hooks/useWindowSize/useWindowSize.ts | 2 +- src/routes/about/+page.svelte | 4 +- src/routes/guide/useBoolean/code-snippet.js | 56 ++-- .../guide/useClickAnyWhere/code-snippet.js | 2 +- src/routes/guide/useClickOutside/+page.svelte | 4 +- .../guide/useClickOutside/code-snippet.js | 4 +- src/routes/guide/useClipboard/+page.svelte | 4 +- src/routes/guide/useClipboard/code-snippet.js | 68 ++-- src/routes/guide/useCounter/code-snippet.js | 2 +- src/routes/guide/useDarkMode/+page.svelte | 14 +- src/routes/guide/useDarkMode/code-snippet.js | 33 +- src/routes/guide/useDebounce/+page.svelte | 14 +- src/routes/guide/useDebounce/code-snippet.js | 29 +- src/routes/guide/useDebounceFn/+page.svelte | 16 +- .../guide/useDebounceFn/code-snippet.js | 20 +- .../guide/useDocumentTitle/+page.svelte | 14 +- .../guide/useDocumentTitle/code-snippet.js | 20 +- src/routes/guide/useElementSize/+page.svelte | 14 +- .../guide/useElementSize/code-snippet.js | 45 ++- .../guide/useEventListener/+page.svelte | 14 +- .../guide/useEventListener/code-snippet.js | 36 ++- src/routes/guide/useFetch/+page.svelte | 14 +- src/routes/guide/useFetch/code-snippet.js | 76 ++++- src/routes/guide/useHover/+page.svelte | 14 +- src/routes/guide/useHover/code-snippet.js | 32 +- src/routes/guide/useImageOnLoad/+page.svelte | 14 +- .../guide/useImageOnLoad/code-snippet.js | 42 ++- src/routes/guide/useInterval/+page.svelte | 14 +- src/routes/guide/useInterval/code-snippet.js | 57 +++- src/routes/guide/useIntervalFn/+page.svelte | 14 +- .../guide/useIntervalFn/code-snippet.js | 68 +++- src/routes/guide/useLocalStorage/+page.svelte | 14 +- .../guide/useLocalStorage/code-snippet.js | 88 +++++- src/routes/guide/useMap/+page.svelte | 14 +- src/routes/guide/useMap/code-snippet.js | 54 +++- src/routes/guide/useMediaQuery/+page.svelte | 16 +- .../guide/useMediaQuery/code-snippet.js | 58 +++- src/routes/guide/useScreen/+page.svelte | 14 +- src/routes/guide/useScreen/code-snippet.js | 19 +- src/routes/guide/useScript/+page.svelte | 14 +- src/routes/guide/useScript/code-snippet.js | 115 ++++++- .../guide/useSessionStorage/+page.svelte | 14 +- .../guide/useSessionStorage/code-snippet.js | 87 ++++- src/routes/guide/useState/+page.svelte | 14 +- src/routes/guide/useState/code-snippet.js | 27 +- src/routes/guide/useThrottle/+page.svelte | 14 +- src/routes/guide/useThrottle/code-snippet.js | 41 ++- src/routes/guide/useThrottleFn/+page.svelte | 14 +- .../guide/useThrottleFn/code-snippet.js | 29 +- src/routes/guide/useTimeoutFn/+page.svelte | 14 +- src/routes/guide/useTimeoutFn/code-snippet.js | 29 +- src/routes/guide/useToggle/+page.svelte | 14 +- src/routes/guide/useToggle/code-snippet.js | 17 +- src/routes/guide/useWindowSize/+page.svelte | 14 +- .../guide/useWindowSize/code-snippet.js | 50 ++- tsconfig.json | 5 +- 79 files changed, 1628 insertions(+), 398 deletions(-) create mode 100644 generate-examples.js diff --git a/.github/workflows/fito-deploy-production-live-main-on-push.yml b/.github/workflows/fito-deploy-production-live-main-on-push.yml index 051bb47..6fcb1f1 100644 --- a/.github/workflows/fito-deploy-production-live-main-on-push.yml +++ b/.github/workflows/fito-deploy-production-live-main-on-push.yml @@ -1,164 +1,135 @@ --- - name: "production-live" - on: - workflow_dispatch: {} - push: - branches: - - "main" - paths-ignore: - - ".github/workflows/fito-deploy-*.yml" - - "**/*.md" - concurrency: - group: "${{ github.workflow }}-${{ github.ref }}" - cancel-in-progress: false - env: - SSH_USER: "${{ secrets.FITO_ENV_CONNECTION_USER }}" - SSH_KEY: "${{ secrets.FITO_ENV_CONNECTION_PRIVATE_KEY }}" - SSH_HOST: "${{ secrets.FITO_ENV_CONNECTION_HOST }}" - ATTEMPTS: "${{ github.run_number }}" - jobs: - install-dependencies: - name: "install dependencies" - runs-on: "ubuntu-latest" - steps: - - - name: "Checkout under $GITHUB_WORKSPACE" - uses: "actions/checkout@v4" - with: - ref: "main" - - - name: "Set up NodeJS" - uses: "actions/setup-node@v3" - with: - node-version: "18.17" - - - name: "Install yarn" - run: "npm install -g yarn" - - - name: "Install dependencies" - run: "yarn install" - - - name: "Cache" - uses: "actions/cache@v3" - with: - path: "./*" - key: "${{ github.sha }}-cache" - test: - name: "test" - runs-on: "ubuntu-latest" - needs: "install-dependencies" - steps: - - - name: "Set up NodeJS" - uses: "actions/setup-node@v3" - with: - node-version: "18.17" - - - name: "Cache" - uses: "actions/cache@v3" - with: - path: "./*" - key: "${{ github.sha }}-cache" - - - name: "Run tests" - run: "yarn test" - build-application: - name: "build application" - runs-on: "ubuntu-latest" - needs: "test" - steps: - - - name: "Cache" - uses: "actions/cache@v3" - with: - path: "./*" - key: "${{ github.sha }}-cache" - - - name: "Set up NodeJS" - uses: "actions/setup-node@v3" - with: - node-version: "18.17" - - - name: "Build application" - run: "yarn build" - - - name: "Cache" - uses: "actions/cache@v3" - with: - path: "./*\nbuild\nnode_modules\npackage.json\nstatic" - key: "${{ github.sha }}-cache" - create-and-push-docker-image: - name: "create and push docker image" - runs-on: "ubuntu-latest" - needs: "build-application" - steps: - - - name: "Cache" - uses: "actions/cache@v3" - with: - path: "./*\nbuild\nnode_modules\npackage.json\nstatic" - key: "${{ github.sha }}-cache" - - - name: "Build docker image" - run: "wget https://statics.dimaslz.dev/fito/docker/dockerfile-standard.docker.tmpl -O Dockerfile.tmpl\n export FROM=\"node:18.17-alpine\"\n export ARGS=\"\"\n export SOURCE=\"build\"\n export FILES=\"COPY node_modules /app/node_modules\nCOPY package.json /app/package.json\nCOPY static /app/static\"\n export PORT=\"3000\"\n export RUN_COMMAND=\"\\\"yarn\\\", \\\"start\\\"\"\n envsubst < Dockerfile.tmpl > Dockerfile\n docker build . -t ${{ env.ATTEMPTS }}_${{ github.sha }}_svelteuse.dimaslz.dev_production_image" - - - name: "prepare connection" - run: "mkdir -p ~/.ssh/\necho \"$SSH_KEY\" > ~/.ssh/prod.key\nchmod 600 ~/.ssh/prod.key\ncat >>~/.ssh/config < ~/.ssh/prod.key\nchmod 600 ~/.ssh/prod.key\ncat >>~/.ssh/config <> $GITHUB_ENV" - - - name: "get current currentImageId" - run: "currentImageId=`ssh prod \"docker images --format=\\\"{{.Repository}} {{.ID}}\\\" | grep \\\"_svelteuse.dimaslz.dev\\\" || echo \\\"\\\"\"` && currentImageId=`echo $currentImageId | grep -Po \"\\s(.*?$)\" | tr -d \"\\n\" || echo \"\"` && echo \"currentImageId=$currentImageId\" >> $GITHUB_ENV" - - - name: "run" - run: "newContainerID=`ssh prod \"docker run --name ${{ env.ATTEMPTS }}_${{ github.sha }}_svelteuse.dimaslz.dev_production_container -d ${{ env.ATTEMPTS }}_${{ github.sha }}_svelteuse.dimaslz.dev_production_image \"` && echo \"newContainerID=$newContainerID\" >> $GITHUB_ENV" - - - name: "get container IP" - run: "newContainerIP=`ssh prod \"docker inspect -f \\\"{{range.NetworkSettings.Networks}}{{.IPAddress}}{{end}}\\\" ${{ env.newContainerID }}\"` && echo \"newContainerIP=$newContainerIP\" >> $GITHUB_ENV" - - - name: "get container PORT" - run: "newContainerPort=`ssh prod \"docker container ls | grep \\\"${{ env.ATTEMPTS }}_${{ github.sha }}_svelteuse.dimaslz.dev_production\\\" | grep -Po \\\"\\d+/tcp \\\" | grep -Po \\\"\\d+\\\"\"` && echo \"newContainerPort=$newContainerPort\" >> $GITHUB_ENV" - - - name: "Container is not running" - if: "${{ failure() }}" - run: "echo \"container is not running\" && exit 1" - - - name: "setup nginx config" - run: "wget https://statics.dimaslz.dev/fito/nginx/static-config-auth.nginx-certbot-1-step.tmpl -O nginx.tmpl\n\texport SERVER_NAME=\"svelteuse.dimaslz.dev\"\n\texport SERVER_URL=\"http://${{ env.newContainerIP }}:${{ env.newContainerPort }}\"\n\tenvsubst < nginx.tmpl > svelteuse.dimaslz.dev\n\tscp svelteuse.dimaslz.dev prod:/etc/nginx/sites-enabled/svelteuse.dimaslz.dev\n\tssh prod \"nginx -t && systemctl restart nginx\"" - - - name: "setup nginx config" - run: "wget https://statics.dimaslz.dev/fito/nginx/static-config-auth.nginx-certbot-2-step.tmpl -O nginx.tmpl\n\texport SERVER_NAME=\"svelteuse.dimaslz.dev\"\n\texport SERVER_URL=\"http://${{ env.newContainerIP }}:${{ env.newContainerPort }}\"\n\tenvsubst < nginx.tmpl > svelteuse.dimaslz.dev\n\tscp svelteuse.dimaslz.dev prod:/etc/nginx/sites-enabled/svelteuse.dimaslz.dev\n\tssh prod \"nginx -t && systemctl restart nginx\"" - - - name: "setup .htpasswd authentication" - run: "ssh prod \"sh -c \\\"echo -n 'svelteuse:' > /etc/nginx/.svelteuse.dimaslz.dev-htpasswd\\\" & sh -c \\\"openssl passwd -apr1 ${{ secrets.FITO_ENV_SVELTEUSE_DIMASLZ_DEV }} >> /etc/nginx/.svelteuse.dimaslz.dev-htpasswd\\\"\"" - - - name: "Container is not running" - if: "${{ failure() }}" - run: "echo \"container is not running\" && ssh prod \"docker rm -f ${{ env.newContainerID }}\" && exit 1" +name: "production-live" +on: + workflow_dispatch: {} + push: + branches: + - "main" + paths-ignore: + - ".github/workflows/fito-deploy-*.yml" + - "**/*.md" +concurrency: + group: "${{ github.workflow }}-${{ github.ref }}" + cancel-in-progress: false +env: + SSH_USER: "${{ secrets.FITO_ENV_CONNECTION_USER }}" + SSH_KEY: "${{ secrets.FITO_ENV_CONNECTION_PRIVATE_KEY }}" + SSH_HOST: "${{ secrets.FITO_ENV_CONNECTION_HOST }}" + ATTEMPTS: "${{ github.run_number }}" +jobs: + install-dependencies: + name: "install dependencies" + runs-on: "ubuntu-latest" + steps: + - name: "Checkout under $GITHUB_WORKSPACE" + uses: "actions/checkout@v4" + with: + ref: "main" + - name: "Set up NodeJS" + uses: "actions/setup-node@v3" + with: + node-version: "18.17" + - name: "Install yarn" + run: "npm install -g yarn" + - name: "Install dependencies" + run: "yarn install" + - name: "Cache" + uses: "actions/cache@v3" + with: + path: "./*" + key: "${{ github.sha }}-cache" + test: + name: "test" + runs-on: "ubuntu-latest" + needs: "install-dependencies" + steps: + - name: "Set up NodeJS" + uses: "actions/setup-node@v3" + with: + node-version: "18.17" + - name: "Cache" + uses: "actions/cache@v3" + with: + path: "./*" + key: "${{ github.sha }}-cache" + - name: "Run tests" + run: "yarn test" + build-application: + name: "build application" + runs-on: "ubuntu-latest" + needs: "test" + steps: + - name: "Cache" + uses: "actions/cache@v3" + with: + path: "./*" + key: "${{ github.sha }}-cache" + - name: "Set up NodeJS" + uses: "actions/setup-node@v3" + with: + node-version: "18.17" + - name: "Build application" + run: "yarn build" + - name: "Cache" + uses: "actions/cache@v3" + with: + path: "./*\nbuild\nnode_modules\npackage.json\nstatic" + key: "${{ github.sha }}-cache" + create-and-push-docker-image: + name: "create and push docker image" + runs-on: "ubuntu-latest" + needs: "build-application" + steps: + - name: "Cache" + uses: "actions/cache@v3" + with: + path: "./*\nbuild\nnode_modules\npackage.json\nstatic" + key: "${{ github.sha }}-cache" + - name: "Build docker image" + run: "wget https://statics.dimaslz.dev/fito/docker/dockerfile-standard.docker.tmpl -O Dockerfile.tmpl\n export FROM=\"node:18.17-alpine\"\n export ARGS=\"\"\n export SOURCE=\"build\"\n export FILES=\"COPY node_modules /app/node_modules\nCOPY package.json /app/package.json\nCOPY static /app/static\"\n export PORT=\"3000\"\n export RUN_COMMAND=\"\\\"yarn\\\", \\\"start\\\"\"\n envsubst < Dockerfile.tmpl > Dockerfile\n docker build . -t ${{ env.ATTEMPTS }}_${{ github.sha }}_svelteuse.dimaslz.dev_production_image" + - name: "prepare connection" + run: "mkdir -p ~/.ssh/\necho \"$SSH_KEY\" > ~/.ssh/prod.key\nchmod 600 ~/.ssh/prod.key\ncat >>~/.ssh/config < ~/.ssh/prod.key\nchmod 600 ~/.ssh/prod.key\ncat >>~/.ssh/config <> $GITHUB_ENV" + - name: "get current currentImageId" + run: "currentImageId=`ssh prod \"docker images --format=\\\"{{.Repository}} {{.ID}}\\\" | grep \\\"_svelteuse.dimaslz.dev\\\" || echo \\\"\\\"\"` && currentImageId=`echo $currentImageId | grep -Po \"\\s(.*?$)\" | tr -d \"\\n\" || echo \"\"` && echo \"currentImageId=$currentImageId\" >> $GITHUB_ENV" + - name: "run" + run: 'newContainerID=`ssh prod "docker run --name ${{ env.ATTEMPTS }}_${{ github.sha }}_svelteuse.dimaslz.dev_production_container -d ${{ env.ATTEMPTS }}_${{ github.sha }}_svelteuse.dimaslz.dev_production_image "` && echo "newContainerID=$newContainerID" >> $GITHUB_ENV' + - name: "get container IP" + run: "newContainerIP=`ssh prod \"docker inspect -f \\\"{{range.NetworkSettings.Networks}}{{.IPAddress}}{{end}}\\\" ${{ env.newContainerID }}\"` && echo \"newContainerIP=$newContainerIP\" >> $GITHUB_ENV" + - name: "get container PORT" + run: "newContainerPort=`ssh prod \"docker container ls | grep \\\"${{ env.ATTEMPTS }}_${{ github.sha }}_svelteuse.dimaslz.dev_production\\\" | grep -Po \\\"\\d+/tcp \\\" | grep -Po \\\"\\d+\\\"\"` && echo \"newContainerPort=$newContainerPort\" >> $GITHUB_ENV" + - name: "Container is not running" + if: "${{ failure() }}" + run: 'echo "container is not running" && exit 1' + - name: "setup nginx config" + run: "wget https://statics.dimaslz.dev/fito/nginx/static-config-auth.nginx-certbot-1-step.tmpl -O nginx.tmpl\n\texport SERVER_NAME=\"svelteuse.dimaslz.dev\"\n\texport SERVER_URL=\"http://${{ env.newContainerIP }}:${{ env.newContainerPort }}\"\n\tenvsubst < nginx.tmpl > svelteuse.dimaslz.dev\n\tscp svelteuse.dimaslz.dev prod:/etc/nginx/sites-enabled/svelteuse.dimaslz.dev\n\tssh prod \"nginx -t && systemctl restart nginx\"" + - name: "setup nginx config" + run: "wget https://statics.dimaslz.dev/fito/nginx/static-config-auth.nginx-certbot-2-step.tmpl -O nginx.tmpl\n\texport SERVER_NAME=\"svelteuse.dimaslz.dev\"\n\texport SERVER_URL=\"http://${{ env.newContainerIP }}:${{ env.newContainerPort }}\"\n\tenvsubst < nginx.tmpl > svelteuse.dimaslz.dev\n\tscp svelteuse.dimaslz.dev prod:/etc/nginx/sites-enabled/svelteuse.dimaslz.dev\n\tssh prod \"nginx -t && systemctl restart nginx\"" + - name: "setup .htpasswd authentication" + run: "ssh prod \"sh -c \\\"echo -n 'svelteuse:' > /etc/nginx/.svelteuse.dimaslz.dev-htpasswd\\\" & sh -c \\\"openssl passwd -apr1 ${{ secrets.FITO_ENV_SVELTEUSE_DIMASLZ_DEV }} >> /etc/nginx/.svelteuse.dimaslz.dev-htpasswd\\\"\"" + - name: "Container is not running" + if: "${{ failure() }}" + run: 'echo "container is not running" && ssh prod "docker rm -f ${{ env.newContainerID }}" && exit 1' diff --git a/.packito.json b/.packito.json index 88354e3..6f9b8e9 100644 --- a/.packito.json +++ b/.packito.json @@ -1,17 +1,17 @@ { - "remove": { - "devDependencies": "*", - "scripts": "*", - "type": true, - "esm": true, - "husky": true, - "commitlint": true - }, - "replace": { - "main": "index.js", - "module": "index.mjs" - }, - "copy": ["README.md", "LICENSE"], - "publisher": "npm", - "output": "./publish" -} \ No newline at end of file + "remove": { + "devDependencies": "*", + "scripts": "*", + "type": true, + "esm": true, + "husky": true, + "commitlint": true + }, + "replace": { + "main": "index.js", + "module": "index.mjs" + }, + "copy": ["README.md", "LICENSE"], + "publisher": "npm", + "output": "./publish" +} diff --git a/.prettierrc b/.prettierrc index fab6b59..d88cb5e 100644 --- a/.prettierrc +++ b/.prettierrc @@ -5,6 +5,5 @@ "singleQuote": false, "trailingComma": "all", "printWidth": 100, - "plugins": ["prettier-plugin-svelte"], - "pluginSearchDirs": ["."] -} \ No newline at end of file + "plugins": ["prettier-plugin-svelte"] +} diff --git a/README.md b/README.md index e268100..52097a1 100644 --- a/README.md +++ b/README.md @@ -53,6 +53,7 @@ This list is orientative, let's try to get all ๐Ÿ‘จโ€๐Ÿ’ป. - [x] [useWindowSize](/src/hooks/useWindowSize): , , + - [ ] useLocation (https://vueuse.org/core/useBrowserLocation/) - [ ] useEventCallback: - [ ] usePreferredDark (https://vueuse.org/core/usePreferredDark/) @@ -155,23 +156,23 @@ This list is orientative, let's try to get all ๐Ÿ‘จโ€๐Ÿ’ป. ```json { - "name": "Dimas Lรณpez Zurita", - "role": "Senior Software Engineer", - "alias": "dimaslz", - "linkedin": "https://www.linkedin.com/in/dimaslopezzurita", - "github": "https://github.com/dimaslz", - "twitter": "https://twitter.com/dimaslz", - "tags": "tooling, docker, tailwindcss, vue, SAAS, nodejs+express" + "name": "Dimas Lรณpez Zurita", + "role": "Senior Software Engineer", + "alias": "dimaslz", + "linkedin": "https://www.linkedin.com/in/dimaslopezzurita", + "github": "https://github.com/dimaslz", + "twitter": "https://twitter.com/dimaslz", + "tags": "tooling, docker, tailwindcss, vue, SAAS, nodejs+express" } ``` ## My other projects -* [https://ng-heroicons.dimaslz.dev/](https://ng-heroicons.dimaslz.dev/): An Angular components library to use Heroicons.com in your Angular projects. -* [https://randomdata.loremapi.io/](https://randomdata.loremapi.io/): A tool to create mock Api responses with your custom schema. -* [https://svg-icon-2-fw-component.dimaslz.dev](https://svg-icon-2-fw-component.dimaslz.dev): A tool to create a framework icon component from a SVG -* [https://loremapi.io](https://loremapi.io): Mock and document your Api's -* [https://cv.dimaslz.dev](https://cv.dimaslz.dev): My online CV -* [https://api.dimaslz.dev](https://api.dimaslz.dev): My professional info by API -* [https://dimaslz.dev](https://dimaslz.dev): Dev landing -* [https://dimaslz.com](https://dimaslz.com): Profesional landing profile +- [https://ng-heroicons.dimaslz.dev/](https://ng-heroicons.dimaslz.dev/): An Angular components library to use Heroicons.com in your Angular projects. +- [https://randomdata.loremapi.io/](https://randomdata.loremapi.io/): A tool to create mock Api responses with your custom schema. +- [https://svg-icon-2-fw-component.dimaslz.dev](https://svg-icon-2-fw-component.dimaslz.dev): A tool to create a framework icon component from a SVG +- [https://loremapi.io](https://loremapi.io): Mock and document your Api's +- [https://cv.dimaslz.dev](https://cv.dimaslz.dev): My online CV +- [https://api.dimaslz.dev](https://api.dimaslz.dev): My professional info by API +- [https://dimaslz.dev](https://dimaslz.dev): Dev landing +- [https://dimaslz.com](https://dimaslz.com): Profesional landing profile diff --git a/generate-examples.js b/generate-examples.js new file mode 100644 index 0000000..8683ac1 --- /dev/null +++ b/generate-examples.js @@ -0,0 +1,52 @@ +import fs from "fs/promises"; + +(async () => { + const hookFiles = (await fs.readdir("./src/hooks", { recursive: true })) + .filter( + (file) => + !file.endsWith(".test.ts") && + !file.endsWith("index.ts") && + !file.endsWith(".svelte") && + !file.endsWith("types.d.ts") && + file.endsWith(".ts"), + ) + .map((hook) => { + const [, name] = hook.split("/"); + return { + [name.replace(".ts", "")]: { + name: name.replace(".ts", ""), + file: `./src/hooks/${hook}`, + }, + }; + }) + .reduce((a, b) => ({ ...a, ...b }), {}); + + const pageExamples = (await fs.readdir("./src/routes/guide", { recursive: true })) + .filter((file) => file.startsWith("use") && file.endsWith("code-snippet.js")) + .map((file) => { + const [name] = file.split("/"); + + return { + file: `./src/routes/guide/${file}`, + hook: hookFiles[name], + }; + }); + + for (const { hook, file } of pageExamples) { + const hookContent = await fs.readFile(hook.file, { encoding: "utf-8" }); + const pageContent = await fs.readFile(file, { encoding: "utf-8" }); + + // console.log("AA", pageContent.match(/export const sourceCode = `[^\\`]*`;/gim)); + const newContent = hookContent + .replaceAll(/\$\{([^}]+)\}/gi, "\\${$1}") + .replaceAll("`", "\\`") + .replaceAll('from "@/hooks";', 'from "@dimaslz/svelteuse"') + .trim(); + + let sourceCodeValue = pageContent.replace( + /export const sourceCode = `[^]*`;/gim, + `export const sourceCode = \`\n${newContent}\n\`;\n`, + ); + await fs.writeFile(file, sourceCodeValue, { encoding: "utf-8" }); + } +})(); diff --git a/package.json b/package.json index f07b36b..3cccc8c 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,8 @@ "test:coverage": "vitest --reporter=verbose --coverage", "prettier": "prettier --plugin-search-dir . --check .", "lint": "eslint ./", - "format": "prettier --plugin-search-dir . --write ." + "format": "prettier --write .", + "generate-examples": "node generate-examples && yarn format" }, "devDependencies": { "@fontsource/fira-mono": "^5.0.8", diff --git a/postcss.config.cjs b/postcss.config.cjs index 33ad091..e873f1a 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -1,6 +1,6 @@ module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -} + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/src/app.html b/src/app.html index e7c11b4..d9d384a 100644 --- a/src/app.html +++ b/src/app.html @@ -1,4 +1,4 @@ - + @@ -6,8 +6,6 @@ %sveltekit.head% -
- %sveltekit.body% -
+
%sveltekit.body%
diff --git a/src/app.scss b/src/app.scss index a6a1e18..ca9baf7 100644 --- a/src/app.scss +++ b/src/app.scss @@ -4,7 +4,7 @@ html, body { - @apply text-gray-600 font-sans bg-white flex m-0 p-0 w-full h-auto min-h-full font-normal antialiased; + @apply text-gray-600 font-sans bg-white flex m-0 p-0 w-full h-auto min-h-full font-normal antialiased; - @apply dark:text-gray-200 dark:bg-gray-900; + @apply dark:text-gray-200 dark:bg-gray-900; } diff --git a/src/components/h/h1.svelte b/src/components/h/h1.svelte index fc649b2..5ce4489 100644 --- a/src/components/h/h1.svelte +++ b/src/components/h/h1.svelte @@ -1,4 +1,6 @@

-
+
+ +

diff --git a/src/components/h/h2.svelte b/src/components/h/h2.svelte index abc679d..cac5042 100644 --- a/src/components/h/h2.svelte +++ b/src/components/h/h2.svelte @@ -1,4 +1,6 @@

-
+
+ +

diff --git a/src/hooks/useClickOutside/useClickOutside.ts b/src/hooks/useClickOutside/useClickOutside.ts index ee7ca5e..04ea1d0 100644 --- a/src/hooks/useClickOutside/useClickOutside.ts +++ b/src/hooks/useClickOutside/useClickOutside.ts @@ -1,6 +1,6 @@ import { onMount } from "svelte"; -import { useEventListener } from ".."; +import { useEventListener } from "@/hooks"; type Handler = (event: MouseEvent) => void; diff --git a/src/hooks/useDarkMode/useDarkMode.ts b/src/hooks/useDarkMode/useDarkMode.ts index 9c46b20..7ba618f 100644 --- a/src/hooks/useDarkMode/useDarkMode.ts +++ b/src/hooks/useDarkMode/useDarkMode.ts @@ -1,7 +1,6 @@ import { get } from "svelte/store"; -import { useLocalStorage } from "@/hooks/useLocalStorage/useLocalStorage"; -import { useMediaQuery } from "@/hooks/useMediaQuery/useMediaQuery"; +import { useLocalStorage, useMediaQuery } from "@/hooks"; const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)"; diff --git a/src/hooks/useElementSize/useElementSize.ts b/src/hooks/useElementSize/useElementSize.ts index 93ee742..6fc5634 100644 --- a/src/hooks/useElementSize/useElementSize.ts +++ b/src/hooks/useElementSize/useElementSize.ts @@ -1,6 +1,6 @@ import { get } from "svelte/store"; -import { useState } from ".."; +import { useState } from "@/hooks"; interface Size { width: number; diff --git a/src/hooks/useFetch/useFetch.ts b/src/hooks/useFetch/useFetch.ts index 280d240..cef0113 100644 --- a/src/hooks/useFetch/useFetch.ts +++ b/src/hooks/useFetch/useFetch.ts @@ -1,4 +1,4 @@ -import { useState } from "@/hooks/useState/useState"; +import { useState } from "@/hooks"; interface State { data?: T; diff --git a/src/hooks/useHover/useHover.ts b/src/hooks/useHover/useHover.ts index e91abe0..8a56388 100644 --- a/src/hooks/useHover/useHover.ts +++ b/src/hooks/useHover/useHover.ts @@ -1,4 +1,4 @@ -import { useEventListener, useState } from ".."; +import { useEventListener, useState } from "@/hooks"; export function useHover({ onEnter = () => {}, diff --git a/src/hooks/useInterval/useInterval.ts b/src/hooks/useInterval/useInterval.ts index f5f7a6d..087f31b 100644 --- a/src/hooks/useInterval/useInterval.ts +++ b/src/hooks/useInterval/useInterval.ts @@ -1,7 +1,6 @@ import { get } from "svelte/store"; -import { type ReturnControls as IntervalFnReturnControls, useIntervalFn } from "@/hooks"; -import { useState } from "@/hooks/useState/useState"; +import { type ReturnControls as IntervalFnReturnControls, useIntervalFn, useState } from "@/hooks"; type IntervalOptions = { controls?: boolean; diff --git a/src/hooks/useLocalStorage/useLocalStorage.ts b/src/hooks/useLocalStorage/useLocalStorage.ts index 468a8c7..dbe022a 100644 --- a/src/hooks/useLocalStorage/useLocalStorage.ts +++ b/src/hooks/useLocalStorage/useLocalStorage.ts @@ -1,7 +1,6 @@ import { get } from "svelte/store"; -import { useEventListener, useState } from "@/hooks"; -import type { TsetValue } from "@/hooks/useState/useState"; +import { type TsetValue, useEventListener, useState } from "@/hooks"; import { parseJSON } from "@/utils"; declare global { diff --git a/src/hooks/useMediaQuery/useMediaQuery.ts b/src/hooks/useMediaQuery/useMediaQuery.ts index 0c9f23b..2378f18 100644 --- a/src/hooks/useMediaQuery/useMediaQuery.ts +++ b/src/hooks/useMediaQuery/useMediaQuery.ts @@ -1,4 +1,5 @@ -import { useState } from "@/hooks/useState/useState"; +import { useState } from "@/hooks"; + export function useMediaQuery(query: string): { matches: SvelteStore; unsubscribe: () => void; diff --git a/src/hooks/useScript/useScript.ts b/src/hooks/useScript/useScript.ts index f79de76..2655907 100644 --- a/src/hooks/useScript/useScript.ts +++ b/src/hooks/useScript/useScript.ts @@ -1,6 +1,6 @@ import { onMount } from "svelte"; -import { useState } from "@/hooks/useState/useState"; +import { useState } from "@/hooks"; export type UseScriptStatus = "idle" | "loading" | "ready" | "error"; export interface UseScriptOptions { diff --git a/src/hooks/useSessionStorage/useSessionStorage.ts b/src/hooks/useSessionStorage/useSessionStorage.ts index 4fb6324..bc689a4 100644 --- a/src/hooks/useSessionStorage/useSessionStorage.ts +++ b/src/hooks/useSessionStorage/useSessionStorage.ts @@ -1,7 +1,6 @@ import { get } from "svelte/store"; -import { useEventListener } from "@/hooks/useEventListener/useEventListener"; -import { type TsetValue, useState } from "@/hooks/useState/useState"; +import { type TsetValue, useEventListener, useState } from "@/hooks"; import { parseJSON } from "@/utils"; declare global { diff --git a/src/hooks/useTimeoutFn/useTimeoutFn.svelte b/src/hooks/useTimeoutFn/useTimeoutFn.svelte index d5920b0..66d48fd 100644 --- a/src/hooks/useTimeoutFn/useTimeoutFn.svelte +++ b/src/hooks/useTimeoutFn/useTimeoutFn.svelte @@ -1,8 +1,6 @@ diff --git a/src/hooks/useToggle/useToggle.ts b/src/hooks/useToggle/useToggle.ts index b2b725c..943c987 100644 --- a/src/hooks/useToggle/useToggle.ts +++ b/src/hooks/useToggle/useToggle.ts @@ -1,4 +1,4 @@ -import { useState } from ".."; +import { useState } from "@/hooks"; export function useToggle(defaultValue?: boolean): { value: SvelteStore; diff --git a/src/hooks/useWindowSize/useWindowSize.ts b/src/hooks/useWindowSize/useWindowSize.ts index fafb129..038f7c9 100644 --- a/src/hooks/useWindowSize/useWindowSize.ts +++ b/src/hooks/useWindowSize/useWindowSize.ts @@ -1,6 +1,6 @@ import { onMount } from "svelte"; -import { useEventListener, useState } from ".."; +import { useEventListener, useState } from "@/hooks"; interface WindowSize { width: number; diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index 055895e..9474a8d 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -3,6 +3,8 @@

SvelteUse

about

-
go to /
+
+ go to / +
diff --git a/src/routes/guide/useBoolean/code-snippet.js b/src/routes/guide/useBoolean/code-snippet.js index 6f23f80..31c2860 100644 --- a/src/routes/guide/useBoolean/code-snippet.js +++ b/src/routes/guide/useBoolean/code-snippet.js @@ -1,31 +1,3 @@ -export const sourceCode = ` -import { type TsetValue, useState } from "@/hooks"; - -export type UseBooleanOutput = { - value: SvelteStore; - setValue: TsetValue; - setTrue: () => void; - setFalse: () => void; - toggle: () => void; -}; - -export function useBoolean(defaultValue: boolean = false): UseBooleanOutput { - const [value, setValue] = useState(!!defaultValue); - - const setTrue = () => setValue(true); - const setFalse = () => setValue(false); - const toggle = () => setValue((x) => !x); - - return { - value, - setValue, - setTrue, - setFalse, - toggle, - }; -} - -`; export const exampleCode = ` @@ -37,8 +37,16 @@
-

Code example

+
+

Code base

- + +
+ +
+

Code example

+ + +
diff --git a/src/routes/guide/useDarkMode/code-snippet.js b/src/routes/guide/useDarkMode/code-snippet.js index 4841ec9..084a857 100644 --- a/src/routes/guide/useDarkMode/code-snippet.js +++ b/src/routes/guide/useDarkMode/code-snippet.js @@ -1,4 +1,4 @@ -export default ` +export const exampleCode = ` @@ -40,8 +40,16 @@
-

Code example

+
+

Code base

- + +
+ +
+

Code example

+ + +
diff --git a/src/routes/guide/useScreen/code-snippet.js b/src/routes/guide/useScreen/code-snippet.js index b2cf05f..514163d 100644 --- a/src/routes/guide/useScreen/code-snippet.js +++ b/src/routes/guide/useScreen/code-snippet.js @@ -1,4 +1,4 @@ -export default ` +export const exampleCode = ` @@ -24,8 +24,16 @@
-

Code example

+
+

Code base

- + +
+ +
+

Code example

+ + +
diff --git a/src/routes/guide/useWindowSize/code-snippet.js b/src/routes/guide/useWindowSize/code-snippet.js index 8810152..a3da725 100644 --- a/src/routes/guide/useWindowSize/code-snippet.js +++ b/src/routes/guide/useWindowSize/code-snippet.js @@ -1,4 +1,4 @@ -export default ` +export const exampleCode = `