From 335cb568f222c2325075f4f0a2699465af653037 Mon Sep 17 00:00:00 2001 From: Jens Kuerschner Date: Fri, 20 Dec 2024 16:44:28 +0100 Subject: [PATCH] tz lib update + better Astro Guide --- demo/i18n/locales/de.json | 16 +++++-- demo/i18n/locales/en.json | 16 +++++-- demo/package-lock.json | 70 ++++++++++++++-------------- demo/package.json | 4 +- demo/pages/use-with-astro.vue | 86 ++++++++++++++++++----------------- package-lock.json | 9 ++-- package.json | 2 +- 7 files changed, 110 insertions(+), 93 deletions(-) diff --git a/demo/i18n/locales/de.json b/demo/i18n/locales/de.json index 1ad54104..7368b919 100644 --- a/demo/i18n/locales/de.json +++ b/demo/i18n/locales/de.json @@ -295,12 +295,18 @@ }, "astro": { "headline": "Wie man den Add to Calendar Button mit Astro nutzt", - "step_pick_solution": "Wähle ein Vorgehen", - "ssg_intro_1": "Für Static Site Generators (SSG) empfehlen wir generell die Nutzung des Add to Calendar Buttons via CDN.", - "ssg_intro_2": "Alternativ kannst du aber auch das npm Package installieren und das Modul über eine Observer-Funktion implementieren.", + "step_pick_solution": "Wähle das beste Vorgehen", + "intro_1": "Du kannst einfach das Add to Calendar Button Skript via CDN laden und so wie in der allgemeinen HTML-Anleitung beschrieben integrieren. Hierbei muss du darauf achten, dass das Ganze nur client-seitig geschieht. Zudem ist dieser Weg nicht ganz ideal.", + "intro_2": "Wir empfehlen die Nutzung des React-Wrapper npm-Packages, die Erstellung einer benutzerdefinierten JSX-Komponente und die Integration dieser Komponente mit dem Attribut 'client:only=\"react\"'.", "step_setup": "Setup", - "npm_alternative_1": "Alternativ kannst du das Package auch aus der npm Registry installieren.", - "npm_alternative_2": "...und einen Observer aufsetzen, der das Skript entsprechend lädt:" + "setup_1": "Erstelle eine neue Komponente", + "new_component": "Erstelle eine neue Komponente im components-Verzeichnis deines Astro-Projekts. Nenne diese \"AddtoCalendarButton.tsx\". Falls du mehrere Buttons nutzen möchtest, kannst du entweder mehrere Komponenten erstellen oder das Ganze über entsprechende Props dynamisch gestalten.", + "setup_2": "Installiere das React-Wrapper npm-Package", + "npm_setup_1": "Installiere das Package über die npm Registry.", + "npm_setup_2": "...und importiere es in deine Komponente.", + "step_define": "Definiere den Button", + "define": "Definiere den Button in deiner Komponente. In unserem Beispiel haben wir das Label als Prop definiert, um es dynamisch zu halten.", + "use": "Du kannst die Komponente nun überall importieren, wo sie benötigt wird und sie wie jede andere benutzten." }, "nextjs": { "headline": "Wie man den Add to Calendar Button mit Next.js nutzt", diff --git a/demo/i18n/locales/en.json b/demo/i18n/locales/en.json index e7b7c9be..a47e1fdb 100644 --- a/demo/i18n/locales/en.json +++ b/demo/i18n/locales/en.json @@ -295,12 +295,18 @@ }, "astro": { "headline": "How to install the Add to Calendar Button with Astro", - "step_pick_solution": "Pick a solution", - "ssg_intro_1": "For static site generators (SSG), we generally recommend to load the Add to Calendar Button script via CDN.", - "ssg_intro_2": "Alternatively, you can still use the npm package and include the module via an observer function.", + "step_pick_solution": "Pick the best solution", + "intro_1": "You can simply load the Add to Calendar Button script via CDN and integrate as described at the default HTML guide. However, this some at some cost and you would need to take precaution to only load and render it on the client.", + "intro_2": "We recommend to use the React wrapper npm package, create a custom JSX component, and then integrate this component with 'client:only=\"react\"' attribute.", "step_setup": "Setup", - "npm_alternative_1": "Alternatively, install the package from the npm registry.", - "npm_alternative_2": "...and setup an Observer to load the script properly:" + "setup_1": "Create a new component", + "new_component": "Create a new component in the components folder and name it \"AddtoCalendarButton.tsx\". If you have multiple buttons, you can either create multiple components or make it accept the props you need to customize it.", + "setup_2": "Add the React wrapper package", + "npm_setup_1": "Install the package from the npm registry.", + "npm_setup_2": "...and import it into your new component:", + "step_define": "Define the button", + "define": "Define the button in your new component. In our example, we also added a label prop to illustrate how you can make it more dynamic.", + "use": "You can now import this component wherever you need it and use it like any other Astro component." }, "nextjs": { "headline": "How to install the Add to Calendar Button with Next.js", diff --git a/demo/package-lock.json b/demo/package-lock.json index af49c7a1..2a10ae60 100644 --- a/demo/package-lock.json +++ b/demo/package-lock.json @@ -15,7 +15,7 @@ "dependencies": { "@headlessui/tailwindcss": "^0.2.1", "@heroicons/vue": "^2.2.0", - "@nuxt/eslint": "^0.7.3", + "@nuxt/eslint": "^0.7.4", "@nuxt/image": "^1.8.1", "@nuxtjs/i18n": "^9.1.1", "@nuxtjs/sitemap": "^7.0.0", @@ -28,7 +28,7 @@ "nuxt-schema-org": "^4.0.4", "nuxt-security": "^2.1.5", "shiki": "^1.24.3", - "timezones-ical-library": "^1.8.3", + "timezones-ical-library": "^1.9.0", "vue-marquee-text-component": "^2.0.1" }, "devDependencies": { @@ -50,10 +50,10 @@ } }, "..": { - "version": "2.7.3", + "version": "2.8.0", "license": "ELv2", "dependencies": { - "timezones-ical-library": "^1.8.3" + "timezones-ical-library": "^1.9.0" }, "devDependencies": { "@eslint/js": "^9.17.0", @@ -1721,9 +1721,9 @@ } }, "node_modules/@clack/core": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.3.5.tgz", - "integrity": "sha512-5cfhQNH+1VQ2xLQlmzXMqUoiaH0lRBq9/CLW9lTyMbuKLC3+xEK01tHVvyut++mLOn5urSHmkm6I0Lg9MaJSTQ==", + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.4.0.tgz", + "integrity": "sha512-YJCYBsyJfNDaTbvDUVSJ3SgSuPrcujarRgkJ5NLjexDZKvaOiVVJvAQYx8lIgG0qRT8ff0fPgqyBCVivanIZ+A==", "license": "MIT", "dependencies": { "picocolors": "^1.0.0", @@ -1731,12 +1731,12 @@ } }, "node_modules/@clack/prompts": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.8.2.tgz", - "integrity": "sha512-6b9Ab2UiZwJYA9iMyboYyW9yJvAO9V753ZhS+DHKEjZRKAxPPOb7MXXu84lsPFG+vZt6FRFniZ8rXi+zCIw4yQ==", + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.9.0.tgz", + "integrity": "sha512-nGsytiExgUr4FL0pR/LeqxA28nz3E0cW7eLTSh3Iod9TGrbBt8Y7BHbV3mmkNC4G0evdYyQ3ZsbiBkk7ektArA==", "license": "MIT", "dependencies": { - "@clack/core": "0.3.5", + "@clack/core": "0.4.0", "picocolors": "^1.0.0", "sisteransi": "^1.0.5" } @@ -3219,17 +3219,17 @@ } }, "node_modules/@nuxt/eslint": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/@nuxt/eslint/-/eslint-0.7.3.tgz", - "integrity": "sha512-EFq0W9hYklUcjt7/wNP+Fm+Wz3DZZ2eJS1l45GQU6g3CfAXdbpozu7L6FLeFatoVbWfNZtzjGmDbOI8UJVGrlw==", + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@nuxt/eslint/-/eslint-0.7.4.tgz", + "integrity": "sha512-9J/g7KHfhcYLjZRy5Ri7Y9pTZsltK9zYyhBkQLdS9EQBOfTL4eE0SS3tXWsvYK6oiAxXc4MskWEMuklwRyAp/w==", "license": "MIT", "dependencies": { "@eslint/config-inspector": "^0.6.0", - "@nuxt/devtools-kit": "^1.6.3", - "@nuxt/eslint-config": "0.7.3", - "@nuxt/eslint-plugin": "0.7.3", + "@nuxt/devtools-kit": "^1.6.4", + "@nuxt/eslint-config": "0.7.4", + "@nuxt/eslint-plugin": "0.7.4", "@nuxt/kit": "^3.14.1592", - "chokidar": "^4.0.1", + "chokidar": "^4.0.3", "eslint-flat-config-utils": "^0.4.0", "eslint-typegen": "^0.3.2", "find-up": "^7.0.0", @@ -3253,28 +3253,28 @@ } }, "node_modules/@nuxt/eslint-config": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/@nuxt/eslint-config/-/eslint-config-0.7.3.tgz", - "integrity": "sha512-8udO5d+AUhKdn+CkJ5EO9gRvG8a3qwjXqBFnhExW/VE9vSyLTtjxopCgWvAngtkdotCM0zr9vkVp2Eg+VqBLag==", + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@nuxt/eslint-config/-/eslint-config-0.7.4.tgz", + "integrity": "sha512-pjwzS04KxmWgWs2HwYftyojBJss3xvI9YTQ3x/5sSH3u3yQtUJPhLiD2nvfeat2DKJLcoYaUZKK+32v9EfaHDQ==", "license": "MIT", "dependencies": { "@antfu/install-pkg": "^0.5.0", - "@clack/prompts": "^0.8.2", + "@clack/prompts": "^0.9.0", "@eslint/js": "^9.16.0", - "@nuxt/eslint-plugin": "0.7.3", + "@nuxt/eslint-plugin": "0.7.4", "@stylistic/eslint-plugin": "^2.12.1", - "@typescript-eslint/eslint-plugin": "^8.18.0", - "@typescript-eslint/parser": "^8.18.0", + "@typescript-eslint/eslint-plugin": "^8.18.1", + "@typescript-eslint/parser": "^8.18.1", "eslint-config-flat-gitignore": "0.2.0", "eslint-flat-config-utils": "^0.4.0", "eslint-merge-processors": "^0.1.0", - "eslint-plugin-import-x": "^4.5.0", + "eslint-plugin-import-x": "^4.6.1", "eslint-plugin-jsdoc": "^50.6.1", "eslint-plugin-regexp": "^2.7.0", "eslint-plugin-unicorn": "^56.0.1", "eslint-plugin-vue": "^9.32.0", "eslint-processor-vue-blocks": "^0.1.2", - "globals": "^15.13.0", + "globals": "^15.14.0", "local-pkg": "^0.5.1", "pathe": "^1.1.2", "vue-eslint-parser": "^9.4.3" @@ -3290,13 +3290,13 @@ } }, "node_modules/@nuxt/eslint-plugin": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/@nuxt/eslint-plugin/-/eslint-plugin-0.7.3.tgz", - "integrity": "sha512-yKaZGitmjAJ3peXZXDT8bDUT1wyC+VlaPuj6gm1GGBGyZP4cBnZVZmqMtR9YPT+rfcWkRt3T2628xYtv/hWNcQ==", + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@nuxt/eslint-plugin/-/eslint-plugin-0.7.4.tgz", + "integrity": "sha512-bMTEDVLF8rLVgr8y+GZ3IHOiRljokZrPdHvzBYKKajtPIKr9AGS3bka5KLXdt6XHPpZbUDIe76LycjAkiUcyqA==", "license": "MIT", "dependencies": { - "@typescript-eslint/types": "^8.18.0", - "@typescript-eslint/utils": "^8.18.0" + "@typescript-eslint/types": "^8.18.1", + "@typescript-eslint/utils": "^8.18.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0" @@ -15884,9 +15884,9 @@ } }, "node_modules/timezones-ical-library": { - "version": "1.8.3", - "resolved": "https://registry.npmjs.org/timezones-ical-library/-/timezones-ical-library-1.8.3.tgz", - "integrity": "sha512-aXpr/l5Vxfrpf2s9OUoS8Qoj+DG9ykq1YWMzWk4tG1TwxKLnrFWiAgOKrQbBtPEynVtkU1aB1TftTX/SkvSzdQ==", + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/timezones-ical-library/-/timezones-ical-library-1.9.0.tgz", + "integrity": "sha512-oMmAE34HTHI85ocqEDo7bfpk0jvqryzwkCimIyiKyGinJbviiPBU9ima71K+JEBVgR51GdgG3fRc/7H6CZLQPg==", "license": "Apache-2.0", "engines": { "node": ">=18.17.0", diff --git a/demo/package.json b/demo/package.json index 42f3c14e..3b88b349 100644 --- a/demo/package.json +++ b/demo/package.json @@ -36,7 +36,7 @@ "dependencies": { "@headlessui/tailwindcss": "^0.2.1", "@heroicons/vue": "^2.2.0", - "@nuxt/eslint": "^0.7.3", + "@nuxt/eslint": "^0.7.4", "@nuxt/image": "^1.8.1", "@nuxtjs/i18n": "^9.1.1", "@nuxtjs/sitemap": "^7.0.0", @@ -49,7 +49,7 @@ "nuxt-schema-org": "^4.0.4", "nuxt-security": "^2.1.5", "shiki": "^1.24.3", - "timezones-ical-library": "^1.8.3", + "timezones-ical-library": "^1.9.0", "vue-marquee-text-component": "^2.0.1" }, "devDependencies": { diff --git a/demo/pages/use-with-astro.vue b/demo/pages/use-with-astro.vue index 946d6c79..74ec17df 100644 --- a/demo/pages/use-with-astro.vue +++ b/demo/pages/use-with-astro.vue @@ -14,13 +14,13 @@ nextDay.setDate(today.getDate() + 3); const defaultDate = nextDay.getFullYear() + '-' + ('0' + (nextDay.getMonth() + 1)).slice(-2) + '-' + ('0' + nextDay.getDate()).slice(-2); let defaultLang = (function () { if (locale.value != 'en') { - return '\n language="' + locale.value + '"'; + return '\n language="' + locale.value + '"'; } return ''; })(); watch(locale, value => { if (value != 'en') { - defaultLang = '\n language="' + locale.value + '"'; + defaultLang = '\n language="' + locale.value + '"'; } else { defaultLang = ''; } @@ -33,54 +33,58 @@ watch(locale, value => {

{{ $t('content.guide.astro.headline') }}

{{ $t('content.guide.step0') }}: {{ $t('content.guide.astro.step_pick_solution') }}

-

{{ $t('content.guide.astro.ssg_intro_1') }}
{{ $t('content.guide.astro.ssg_intro_2') }}

-

{{ $t('content.guide.options_intro_1') }}

-

{{ $t('content.guide.options_intro_2') }}

+

{{ $t('content.guide.astro.intro_1') }}

+

{{ $t('content.guide.astro.intro_2') }}

{{ $t('content.guide.step1') }}: {{ $t('content.guide.astro.step_setup') }}

-

{{ $t('content.guide.optionA') }}: {{ $t('content.guide.step_cdn') }}

-

{{ $t('content.guide.step_cdn_p1') }}
{{ $t('content.guide.step_cdn_p2') }}

- -
<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2" async defer></script>
-
-

{{ $t('content.guide.optionB') }}: {{ $t('content.guide.step_npm') }}

-

{{ $t('content.guide.astro.npm_alternative_1') }}

-
npm install add-to-calendar-button
-
{{ $t('content.guide.astro.npm_alternative_2') }}
- +

{{ $t('content.guide.astro.setup_1') }}

+

{{ $t('content.guide.astro.new_component') }}

+

{{ $t('content.guide.astro.setup_2') }}

+

{{ $t('content.guide.astro.npm_setup_1') }}

+
npm install add-to-calendar-button-react
+
{{ $t('content.guide.astro.npm_setup_2') }}
+
import { AddToCalendarButton } from 'add-to-calendar-button-react';
+

{{ $t('content.guide.step2') }}: {{ $t('content.guide.astro.step_define') }}

+

+ {{ $t('content.guide.astro.define') }} +

+
-<script type="module" hoist>
-  const observer = new IntersectionObserver((entries) => {
-    for (const entry of entries) {
-      if (!entry.isIntersecting) continue;
-      observer.disconnect();
-      import('../../node_modules/add-to-calendar-button/dist/module/index.js');
-    }
-  });
-  const instances = document.querySelectorAll('add-to-calendar-button');
-  for (const instance of instances) observer.observe(instance);
-</script>
-

{{ $t('content.guide.step2') }}: {{ $t('content.guide.step_use') }}

-

- {{ $t('content.guide.step_use_start') }} -

-

{{ $t('content.guide.step_use_simple') }}

+

{{ $t('content.guide.step3') }}: {{ $t('content.guide.step_use') }}

+

{{ $t('content.guide.astro.use') }}

{{ $t('content.guide.step_use_example') }}

-<add-to-calendar-button
-  name="{{ $t('demo_data.name_dummy') }}"
-  options="'Apple','Google'"
-  location="{{ $t('demo_data.location') }}"
-  startDate="{{ defaultDate }}"
-  endDate="{{ defaultDate }}"
-  startTime="10:15"
-  endTime="23:30"
-  timeZone="{{ $t('demo_data.default_timezone') }}"{{ defaultLang }}
-></add-to-calendar-button>
+

{{ $t('content.guide.step_use_simple') }}