Merge pull request #39 from jekuer/v1.7.0_dev

V1.7.0 dev

Author: jekuer

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,38 @@
+name: "CodeQL Analysis"
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+  schedule:
+    - cron: '31 11 * * 0'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.npmignore

@@ -1,4 +1,4 @@
-# THE .gitignore
+# THE .gitignore
 
 .vscode/*
 !.vscode/settings.json
@@ -18,3 +18,4 @@ assets/js/
 *.ico
 *.gif
 index.html
+security.md

Gruntfile.js

@@ -1,7 +1,8 @@
 const npmDelimiter = /\/\/ START INIT[\s\S]*?\/\/ END INIT/gm
 
 function process(content, exportPhrase) {
-  return content.replace(npmDelimiter, `${exportPhrase} { atcb_init };`);
+  content = content.replace('atcb_addToCalendar', 'addToCalendar');
+  return content.replace(npmDelimiter, `${exportPhrase} { addToCalendar, atcb_init };`);
 }
 module.exports = function(grunt) {
 

README.md

@@ -1,36 +1,44 @@
-# Your next Add-to-Calendar Button
+# 📅 Your next Add-to-Calendar Button!
 ![Add-to-Calendar Button](https://github.com/jekuer/add-to-calendar-button/blob/main/repo_image.png?raw=true)
 
-_A convenient JavaScript snippet, which lets you create beautiful buttons, where people can add events to their calendars._
+_A convenient JavaScript snippet, which lets you create beautiful buttons, where people can add events to their calendars._ 
 
+![#1 Product of the Day on ProductHunt](https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=319458&theme=dark&period=daily) 
 
-## Use case // Who this is for
+<br /><br />
+
+## 😎 Use case // Who this is for
 
 This is for everybody, who wants to include a button at his/her website or app, which enables users to easily add a specific event to their calendars.
 It's main goal is to keep this process as easy as possible. Simply define your button configuration via JSON and everything else is automatically generated by the script.
 It is for this simple use case. No strings attached.
 
+<br />
 
-## Background // Why this repo exists
+## 🔎 Background // Why this repo exists
 
 While building a personal wedding page, I was confronted with the task to include a button, where invited people could save the event to their calendars.
 I did not want to build this from scratch (first) and therefore started the usual web research.
 Unfortunately, all I found where some extremely outdated code snippets, which did not really fit all the modern systems and calendar tools.
-Beside that, there was only the solution by AddEvent.com - all over the place. I was looking at CodePen and all I found where thousands of pens, which basically only included the AddEvent tool.
+Beside that, there was only the solution by AddEvent.com - all over the place. I was looking at CodePen and all I found where thousands of pens, which basically only included the AddEvent tool. 
+
 The problems with AddEvent.com:
 * it holds tons of features, which I did not need. I do not want to track my button. I just want it to work.
 * it limits the free tier to 50 event adds per month (consider the wedding case - this is way too less).
-* it brings some data privacy issues, since you basically send your users to their service.
-* the UX/UI is not ideal (imho).
-*Bottom line:* Pay for features, which I do not need - at additional privacy "cost" - that made me create this solution (for you).
+* it brings some data privacy issues, since you basically send your users to their service. GDPR alert!
+* the UX/UI is not ideal (imho). 
+
+**Bottom line:** Paying for features, which I did not need - at additional privacy concerns - that made me create this solution (for you).
 
+<br />
 
-## DEMO
+## ▶️ Demo
 
 See [jekuer.github.io/add-to-calendar-button](https://jekuer.github.io/add-to-calendar-button/) for a live demo.
 
+<br />
 
-## Features
+## ✨ Features
 
 * Simple and convenient integration of multiple buttons - configure them directly within the HTML code.
 * Optimized UX (for desktop and mobile) - adjustable.
@@ -41,13 +49,14 @@ See [jekuer.github.io/add-to-calendar-button](https://jekuer.github.io/add-to-ca
   * Microsoft 365, Outlook, and Teams.
   * Automatically generated iCal/ics files (for all other calendars, like Apple).
 * Timed and all-day events.
-* Translatable labels and dynamic.
-* Well documented code, to easily understand the processes.
+* Translatable labels and dynamic dates.
+* Well documented code, to easily understand the processes and build on top of it.
 
 ![Demo Screenshot](https://github.com/jekuer/add-to-calendar-button/blob/main/demo.gif?raw=true)
 
+<br />
 
-## Setup
+## 🌱 Setup
 
 ### Option 1: simple
 
@@ -59,18 +68,19 @@ See [jekuer.github.io/add-to-calendar-button](https://jekuer.github.io/add-to-ca
 
 ### Option 2: npm
 
-1. Requires Node.js, npm, and a project, which builds on it (e.g. React or Angular).
+1. Requires Node, npm, and a project, which builds on it (e.g. React or Angular).
 2. Run **`npm install add-to-calendar-button`**.
-3. Import the module into your project/component. For example with Angular/React: `import { atcb_init } from 'add-to-calendar-button';`.
-4. Init the js after the DOM has been loaded. To determine the right moment and execute, ...
+3. Import the module into your project/component. For example with Angular/React: `import { addToCalendar, atcb_init } from 'add-to-calendar-button';`.
+4. Either use `addToCalendar` with your own buttons/forms/etc, or run `atcb_init` after the DOM has been loaded. To determine the right moment and execute, ...
   1. with Angular, you would use `ngAfterViewInit()` with `atcb_init();` (mind that, depending on your app, other hooks might be better);
   2. with React, you might want to include an event listener like `document.addEventListener('DOMContentLoaded', atcb_init, false);` or using hooks in a functional component like `useEffect(() => atcb_init());`
 5. Include the css. For example with Angular or React, add the following to the global style.css: `@import 'add-to-calendar-button/assets/css/atcb.min'`;
 6. Create your button as can be seen in the "Configuration" section below.
 7. That is it. The script takes care of all the rest. :)
 
+<br />
 
-## Configuration
+## 🎛️ Configuration
 
 A button can be easily created by placing a respective placeholder, wherever you want the button to appear.
 (The `style="display:none;"` theoretically is not necessary, but should be used for better compatibility.)
@@ -163,34 +173,66 @@ You can use startTime and endTime in the event block, but it is recommended to r
 </div>
 ```
 
-### React example
+### `addToCalendar` example with React
 
-A simpler method uses `JSON.stringify()` where you define your config in an external file or variable and then
-convert it to a string to be passed into the div.
+If you can't or don't want to use `atcb_init`, you can use the `addToCalendar` import with your own buttons or other elements/components. If you omit the second argument, the dropdown list will display as a modal in the middle of the viewport - in this case, add the "atcb_customTrigger" class to the submitting element for better keyboard support.
+
+This may work better with React and other frontend frameworks. 
 
 ```js
+import React from 'react'
+import { addToCalendar } from 'add-to-calendar-button'
+
 const AddToCalendar = () => {
+  const [name, setName] = React.useState('Some event')
+  return (
+      <form onSubmit={e => {
+        e.preventDefault()
+        addToCalendar({
+          name,
+          startDate: "2022-01-14",
+          endDate: "2022-01-18",
+          options: ['Apple', 'Google', 'iCal', 'Microsoft365', 'Outlook.com', 'MicrosoftTeams', 'Yahoo'],
+          trigger: "click",
+          iCalFileName: "Reminder-Event",
+        })
+      }}>
+        <input value={name} onChange={setName} />
+        <input class="atcb_customTrigger" type="submit" value="save">
+      </form>
+  );
+}
+```
 
-    useEffect(() => atcb_init());
+Alternatively, you could use `atcb_init` with a `useEffect` hook:
 
-    const event = { /* Event data */}
+```js
+import React from 'react'
+import { atcb_init } from 'add-to-calendar-button'
 
-    return (
-        <div className='atcb'>
-            <script type="application/ld+json">
-                {JSON.stringify(event)}
-            </script>
-        </div>
-    );
+const AddToCalendar = () => {
+  React.useEffect(atcb_init, [])
+  return (
+    <div className='atcb' style={{display: 'none'}}>
+      {JSON.stringify({
+          name: "Some event",
+          startDate: "2022-01-14",
+          endDate: "2022-01-18",
+          options: ['Apple', 'Google', 'iCal', 'Microsoft365', 'Outlook.com', 'MicrosoftTeams', 'Yahoo'],
+          trigger: "click",
+          iCalFileName: "Reminder-Event",
+        })}
+    </div>
+  );
 }
 ```
 
 ### Important information and hidden features
 
 * The "label" is optional, but enables you to customize the button text. Default: "Add to Calendar".
 * Dates need to be formatted as YYYY-MM-DD ([ISO-8601](https://en.wikipedia.org/wiki/ISO_8601)).
-* You can also use the word "today" as date. It will then dynamically use the current day at click.
-* Add "+5" at the end of the date to dynamically add 5 days (or any other number). "2022-01-30+12" would generate the 11th of February 2022. This can be interesting, when combined with "today".
+* You can also use the word "today" as date. It will then dynamically use the current day at click (not supported with schema.org style).
+* Add "+5" at the end of the date to dynamically add 5 days (or any other number). "2022-01-30+12" would generate the 11th of February 2022. This can be interesting, when combined with "today". 
 * Times need to be formatted as HH:MM.
 * Times are optional. If not set, the button generates all-day events.
 * 1 option is required. You can add as many as you want. The supported formats are listed above.
@@ -207,25 +249,29 @@ const AddToCalendar = () => {
 * Formatting a URL in the description like `[url]https://....[/url]` makes it clickable.
 * If you require line breaks within the description, use `\n` or `<br>`.
 
+<br />
 
-## Contributing
+## 🙌 Contributing
 
 Anyone is welcome to contribute, but mind the [guidelines](.github/CONTRIBUTING.md):
 
 * [Bug reports](.github/CONTRIBUTING.md#bugs)
 * [Feature requests](.github/CONTRIBUTING.md#features)
 * [Pull requests](.github/CONTRIBUTING.md#pull-requests)
 
-IMPORTANT NOTE: Run `npm install` and `npm run build` to create the minified js and css file, its sourcemap files as well as the npm_dist/ folder and content!
+**IMPORTANT NOTE:** Run `npm install` and `npm run build` to create the minified js and css file, its sourcemap files as well as the npm_dist/ folder and content!
 
+<br />
 
-## License
+## 📃 License
 
 The code is available under the [MIT license (with “Commons Clause” License Condition v1.0)](LICENSE.txt).
 
+<br />
 
-## Changelog (without bug fixes)
+## ⚡ Changelog (without minor changes and fixes)
 
+* v1.7 : new code structure and options + tons of optimizations
 * v1.6 : supporting Microsoft Teams
 * v1.5 : update to date format and better accesibility
 * v1.4 : schema.org support (also changed some keys in the JSON!)
@@ -234,8 +280,10 @@ The code is available under the [MIT license (with “Commons Clause” License
 * v1.1 : npm functionality
 * v1.0 : initial release
 
+<br />
 
-## Kudos go to
-* [github.com/dudewheresmycode](https://github.com/dudewheresmycodee)
+## 💜 Kudos go to
 * [uxwing.com](https://uxwing.com)
-* all contributors!
+* [Brian R (dudewheresmycode)](https://github.com/dudewheresmycode)
+* [Chad Ostrowski (chadoh)](https://github.com/chadoh)
+* ... and all other contributors!