Skip to content

Commit

Permalink
tz lib update + better Astro Guide
Browse files Browse the repository at this point in the history
  • Loading branch information
@jekuer
jekuer committed Dec 20, 2024
1 parent d1b3509 commit 335cb56
Show file tree
Hide file tree
Showing 7 changed files with 110 additions and 93 deletions.
16 changes: 11 additions & 5 deletions demo/i18n/locales/de.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
16 changes: 11 additions & 5 deletions demo/i18n/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
70 changes: 35 additions & 35 deletions demo/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions demo/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": {
Expand Down
86 changes: 45 additions & 41 deletions demo/pages/use-with-astro.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '';
}
Expand All @@ -33,54 +33,58 @@ watch(locale, value => {
<h1 class="mb-16 underline decoration-primary-light decoration-4 dark:decoration-primary-dark">{{ $t('content.guide.astro.headline') }}</h1>
<div class="px-0 md:px-3 lg:px-5">
<h2 class="mb-6">{{ $t('content.guide.step0') }}: {{ $t('content.guide.astro.step_pick_solution') }}</h2>
<p>{{ $t('content.guide.astro.ssg_intro_1') }}<br />{{ $t('content.guide.astro.ssg_intro_2') }}</p>
<p class="pt-5">{{ $t('content.guide.options_intro_1') }}</p>
<p class="italic">{{ $t('content.guide.options_intro_2') }}</p>
<p>{{ $t('content.guide.astro.intro_1') }}</p>
<p>{{ $t('content.guide.astro.intro_2') }}</p>
<h2 class="mb-6 mt-20">{{ $t('content.guide.step1') }}: {{ $t('content.guide.astro.step_setup') }}</h2>
<h3 class="mb-6">{{ $t('content.guide.optionA') }}: {{ $t('content.guide.step_cdn') }}</h3>
<p>{{ $t('content.guide.step_cdn_p1') }}<br />{{ $t('content.guide.step_cdn_p2') }}</p>
<LazyCodeBlock>
<pre>&lt;script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2" async defer&gt;&lt;/script&gt;</pre>
</LazyCodeBlock>
<h3 class="mb-6 mt-20">{{ $t('content.guide.optionB') }}: {{ $t('content.guide.step_npm') }}</h3>
<p>{{ $t('content.guide.astro.npm_alternative_1') }}</p>
<LazyCodeBlock language="shell"><pre>npm install add-to-calendar-button</pre></LazyCodeBlock>
<div class="mb-6 mt-10 font-bold">{{ $t('content.guide.astro.npm_alternative_2') }}</div>
<LazyCodeBlock>
<h3 class="mb-6">{{ $t('content.guide.astro.setup_1') }}</h3>
<p>{{ $t('content.guide.astro.new_component') }}</p>
<h3 class="mb-6 mt-20">{{ $t('content.guide.astro.setup_2') }}</h3>
<p>{{ $t('content.guide.astro.npm_setup_1') }}</p>
<LazyCodeBlock language="shell"><pre>npm install add-to-calendar-button-react</pre></LazyCodeBlock>
<div class="mb-6 mt-10 font-bold">{{ $t('content.guide.astro.npm_setup_2') }}</div>
<LazyCodeBlock language="js"><pre>import { AddToCalendarButton } from 'add-to-calendar-button-react';</pre></LazyCodeBlock>
<h2 class="mb-6 mt-20">{{ $t('content.guide.step2') }}: {{ $t('content.guide.astro.step_define') }}</h2>
<p>
{{ $t('content.guide.astro.define') }}
</p>
<LazyCodeBlock language="js">
<pre>
&lt;script type="module" hoist&gt;
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);
&lt;/script&gt;</pre
import { AddToCalendarButton } from 'add-to-calendar-button-react';
import type { AddToCalendarButtonType } from 'add-to-calendar-button-react';

export default function atcb(props: AddToCalendarButtonType) {
return (
&lt;AddToCalendarButton
label={props.label}
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 }}
options="'Apple','Google','iCal','Outlook.com','Yahoo'"
&gt;&lt;/AddToCalendarButton&gt;
);
}</pre
>
</LazyCodeBlock>
<h2 class="mb-6 mt-20">{{ $t('content.guide.step2') }}: {{ $t('content.guide.step_use') }}</h2>
<p>
{{ $t('content.guide.step_use_start') }}
</p>
<p class="font-semibold italic">{{ $t('content.guide.step_use_simple') }}</p>
<h2 class="mb-6 mt-20">{{ $t('content.guide.step3') }}: {{ $t('content.guide.step_use') }}</h2>
<p>{{ $t('content.guide.astro.use') }}</p>
<p>{{ $t('content.guide.step_use_example') }}</p>
<LazyCodeBlock>
<pre>
&lt;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 }}
&gt;&lt;/add-to-calendar-button&gt;</pre
---
import AddToCalendarButton from '../components/AddToCalendarButton.tsx';
import Layout from '../layouts/Layout.astro';
---
&lt;Layout&gt;
&lt;AddToCalendarButton client:only="react" label="Woohooo" /&gt;
&lt;/Layout&gt;</pre
>
</LazyCodeBlock>
<p class="font-semibold italic">{{ $t('content.guide.step_use_simple') }}</p>
</div>
</div>
<div class="hidden border-l border-zinc-300 pl-8 text-xs dark:border-zinc-700 lg:block xl:pl-12">
Expand Down
9 changes: 5 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@
"build": "npx grunt"
},
"dependencies": {
"timezones-ical-library": "^1.8.3"
"timezones-ical-library": "^1.9.0"
},
"devDependencies": {
"@eslint/js": "^9.17.0",
Expand Down

0 comments on commit 335cb56

Please sign in to comment.