From aae75da67a17ad0b4e8bc979154d085da071a28f Mon Sep 17 00:00:00 2001 From: Anita Lipsky <7695311+purplebugs@users.noreply.github.com> Date: Mon, 12 Aug 2024 20:49:08 +0200 Subject: [PATCH] build: Prepare repo for publishing to npm (#35) --- README.md | 20 ++++++++++-------- package.json | 11 +++++++--- public/element.html | 24 --------------------- src/element.js | 51 --------------------------------------------- 4 files changed, 19 insertions(+), 87 deletions(-) delete mode 100644 public/element.html delete mode 100644 src/element.js diff --git a/README.md b/README.md index 188c2ee..12b929a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# Lit Playground ⛹️‍♀️ +# Alpaca Map Web Component 🦙 -To try out creating web components using [lit](https://lit.dev/) +Web component created using [lit](https://lit.dev/) ## Audience 🗺️ @@ -16,17 +16,19 @@ To try out creating web components using [lit](https://lit.dev/) ``` -1. Copy and paste the following code inside the `` tag of website where the component should appear +1. Generate a [google maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key) - ``` - - ``` +1. Copy and paste the following code inside the `` tag of website where the component should appear, replacing `GOOGLE-API-KEY` with your key + +``` + +``` 1. Optional. To center the map on a favourite farm, replace the latitude and longitude with its `centerLat` and `centerLng` coordinates - ``` - - ``` +``` + +``` ## For developers 🤖 diff --git a/package.json b/package.json index ac26b13..e6c8fcd 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,13 @@ { - "name": "map-component", + "name": "@purplebugs/alpaca-map", "type": "module", - "version": "1.0.0", - "main": "src/index.js", + "version": "0.0.1", + "main": "src/alpaca-map.js", + "files": [ + "package.json", + "README.md", + "src" + ], "scripts": { "build:watch": "node --watch-path=./src build.js", "build": "node build.js", diff --git a/public/element.html b/public/element.html deleted file mode 100644 index 8da4051..0000000 --- a/public/element.html +++ /dev/null @@ -1,24 +0,0 @@ - - - Element - - - -

Anita is cool

- -

This is the header

- -

This will appear where I have the slot element in my element

- -

This is the footer

- - -
- - - - diff --git a/src/element.js b/src/element.js deleted file mode 100644 index 02e007a..0000000 --- a/src/element.js +++ /dev/null @@ -1,51 +0,0 @@ -import { LitElement, html, css } from "lit"; -console.log("hello world from element.js"); - -export class AlpacaElement extends LitElement { - static properties = { - name: { type: String }, - counter: { type: Number }, - }; - - static styles = [ - css` - button { - color: green; - } - - .box { - border: 1px solid black; - } - `, - ]; - - constructor() { - super(); - this.name = "Chanel"; - this.counter = 0; - } - - _increase() { - this.counter++; - } - - _title() { - // Calling this._increase without parentheses ensures it is not run on page load, but only when the h3 element is clicked - return html``; - } - - render() { - // Calling this._title() with parentheses ensures it is run every time the component is rendered, eg by default on page load - return html`
-
- -
${this._title()}
- - -
`; - } -} - -customElements.define("alpaca-element", AlpacaElement);