An embeddable web component displaying events on a agenda-like from a geojson endpoint | Read-only mirror of https://github.com/yverdon/agenda-embed — Ville d'Yverdon-les-Bains. Issues & pull requests at the source.
  • JavaScript 48.7%
  • HTML 24.1%
  • CSS 15.3%
  • TypeScript 8.2%
  • Vue 3.7%
Find a file
Repository files (latest commit first)
Filename Latest commit message Latest commit date
2023-10-06 13:39:04 +02:00
.github/workflows build: run tests on Github actions 2023-09-08 14:52:38 +02:00
cypress test: setup Cypress and add first suite 2023-09-08 14:47:23 +02:00
public chore: update dependencies 2023-10-06 11:32:29 +02:00
src build: setup process and expose files 2023-10-06 13:39:04 +02:00
.eslintrc.cjs test: setup Cypress and add first suite 2023-09-08 14:47:23 +02:00
.gitignore Initial version 2023-08-28 16:40:27 +02:00
CONTRIBUTING.md docs: getting started 2023-09-07 16:24:39 +02:00
cypress.config.ts test: setup Cypress and add first suite 2023-09-08 14:47:23 +02:00
env.d.ts Initial version 2023-08-28 16:40:27 +02:00
index.html feat: allow to customize API base URL and change endpoint name for /agenda 2023-10-06 11:33:21 +02:00
LICENSE Initial commit 2023-08-08 10:53:50 +02:00
package-lock.json chore: update dependencies 2023-10-06 11:32:29 +02:00
package.json build: setup process and expose files 2023-10-06 13:39:04 +02:00
postcss.config.js Initial version 2023-08-28 16:40:27 +02:00
prettier.config.js Initial version 2023-08-28 16:40:27 +02:00
README.md feat: allow to customize API base URL and change endpoint name for /agenda 2023-10-06 11:33:21 +02:00
tailwind.config.js Initial version 2023-08-28 16:40:27 +02:00
tsconfig.app.json Initial version 2023-08-28 16:40:27 +02:00
tsconfig.json Initial version 2023-08-28 16:40:27 +02:00
tsconfig.node.json Initial version 2023-08-28 16:40:27 +02:00
vite.config.ts build: setup process and expose files 2023-10-06 13:39:04 +02:00
yverdon.html feat: allow to customize API base URL and change endpoint name for /agenda 2023-10-06 11:33:21 +02:00

Agenda Embed

Web component to browse, filter and search events; including a detail view.

Usage

⚠️ Work in progress

Embed the web component directly in an HTML page:

<!-- Customize the style -->
<style>
  agenda-embed {
    --agd-color-primary: #008c6f;
    --agd-color-accent: #005d95;
    --agd-headings-font-family: 'Playfair Display', serif;
    --agd-headings-font-weight: 500;
    /* ... */
  }
</style>

<!-- Render the component -->
<agenda-embed></agenda-embed>

<!-- Initialize the component -->
<script type="module" src="/path/to/agenda-embed.js"></script>

Filter events displayed by domain

You can globally restrict the widget to events of a given domain by using the domain attribute on the component:

<agenda-embed domain="sport"></agenda-embed>

To display events from all domains, dont specify this attribute.

Customize the API target

Specify the api-base-url attribute to use a different API target:

<agenda-embed api-base-url="https://www.yourdomain.ch/api"></agenda-embed>

This parameter is optional, https://geocity.ch/rest is the default.

The end-points called by the widget are:

  • GET /agenda for the list of events
  • GET /agenda/:id for the event details