1.2.1

app/components/icon.gjs

@@ -0,0 +1,54 @@
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+
+import clock from 'feather-icons/dist/icons/clock.svg?raw';
+import globe from 'feather-icons/dist/icons/globe.svg?raw';
+import home from 'feather-icons/dist/icons/home.svg?raw';
+import map from 'feather-icons/dist/icons/map.svg?raw';
+import mapPin from 'feather-icons/dist/icons/map-pin.svg?raw';
+import navigation from 'feather-icons/dist/icons/navigation.svg?raw';
+import phone from 'feather-icons/dist/icons/phone.svg?raw';
+import user from 'feather-icons/dist/icons/user.svg?raw';
+import settings from 'feather-icons/dist/icons/settings.svg?raw';
+
+const ICONS = {
+  clock,
+  globe,
+  home,
+  map,
+  mapPin,
+  navigation,
+  phone,
+  user,
+  settings
+};
+
+export default class IconComponent extends Component {
+  get svg() {
+    return ICONS[this.args.name];
+  }
+
+  get size() {
+    return this.args.size || 16;
+  }
+
+  get color() {
+    return this.args.color || '#888';
+  }
+
+  get style() {
+    return `width:${this.size}px;height:${this.size}px;color:${this.color}`;
+  }
+
+  get title() {
+    return this.args.title || '';
+  }
+
+  <template>
+    {{#if this.svg}}
+      <span class="icon" style={{this.style}} title={{this.title}}>
+        {{htmlSafe this.svg}}
+      </span>
+    {{/if}}
+  </template>
+}

app/components/place-details.gjs

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import capitalize from '../helpers/capitalize';
+import Icon from '../components/icon';
 
 export default class PlaceDetails extends Component {
   get place() {
@@ -129,55 +130,66 @@ export default class PlaceDetails extends Component {
 
       <div class="meta-info">
         {{#if this.cuisine}}
-          <p><strong>Cuisine:</strong> {{this.cuisine}}</p>
+          <p>
+            <strong>Cuisine:</strong>
+            {{this.cuisine}}
+          </p>
         {{/if}}
 
         {{#if this.openingHours}}
-          <p><strong>Open:</strong> {{this.openingHours}}</p>
+          <p class="content-with-icon">
+            <Icon @name="clock" @title="Opening hours" />
+            <span>{{this.openingHours}}</span>
+          </p>
         {{/if}}
 
         {{#if this.phone}}
-          <p><strong>Phone:</strong> <a href="tel:{{this.phone}}">{{this.phone}}</a></p>
+          <p class="content-with-icon">
+            <Icon @name="phone" @title="Phone" />
+            <span><a href="tel:{{this.phone}}">{{this.phone}}</a></span>
+          </p>
         {{/if}}
 
         {{#if this.website}}
-          <p>
+          <p class="content-with-icon">
-            <strong>Website:</strong>
+            <Icon @name="globe" @title="Website" />
-            <a href={{this.website}} target="_blank" rel="noopener noreferrer">
+            <span><a href={{this.website}} target="_blank" rel="noopener noreferrer">Website</a></span>
-              Visit Link
-            </a>
           </p>
         {{/if}}
 
         {{#if this.wikipedia}}
           <p>
             <strong>Wikipedia:</strong>
-            <a href="https://wikipedia.org/wiki/{{this.wikipedia}}" target="_blank" rel="noopener noreferrer">
+            <a href="https://wikipedia.org/wiki/{{this.wikipedia}}" target="_blank" rel="noopener noreferrer">Article</a>
-              Article
-            </a>
           </p>
         {{/if}}
 
         <hr class="meta-divider">
 
         {{#if this.address}}
-          <p><strong>Address:</strong> {{this.address}}</p>
+          <p class="content-with-icon">
+            <Icon @name="home" @title="Address" />
+            <span>{{this.address}}</span>
+          </p>
         {{/if}}
 
-
+        <p class="content-with-icon">
-        <p>
+          <Icon @name="mapPin" @title="Geo link" />
-          <strong>Geo:</strong>
+          <span>
             <a href={{this.geoLink}} target="_blank" rel="noopener noreferrer">
               {{this.visibleGeoLink}}
             </a>
+          </span>
         </p>
 
         {{#if this.osmUrl}}
-          <p>
+          <p class="content-with-icon">
-            <strong>OSM ID:</strong>
+            <Icon @name="map" @title="OSM ID" />
+            <span>
               <a href={{this.osmUrl}} target="_blank" rel="noopener noreferrer">
-              {{this.place.osmId}}
+                OpenStreetMap
               </a>
+            </span>
           </p>
         {{/if}}
       </div>

app/styles/app.css

@@ -223,3 +223,28 @@ body {
 .ol-touch .ol-control.ol-locate {
   top: 5.5em; /* Adjust for touch devices where controls might be larger */
 }
+
+span.icon {
+  display: inline-block;
+}
+
+.icon {
+  flex-shrink: 0;
+}
+
+.icon svg {
+  width: 100%;
+  height: 100%;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.content-with-icon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "marco",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "private": true,
   "description": "Small description for marco goes here",
   "repository": "",
@@ -46,6 +46,7 @@
     "@embroider/vite": "^1.5.0",
     "@eslint/js": "^9.39.2",
     "@glimmer/component": "^2.0.0",
+    "@remotestorage/module-places": "link:vendor/remotestorage-module-places",
     "@rollup/plugin-babel": "^6.1.0",
     "@warp-drive/core": "~5.8.0",
     "@warp-drive/ember": "~5.8.0",
@@ -62,6 +63,7 @@
     "ember-resolver": "^13.1.1",
     "ember-source": "~6.11.0-alpha.6",
     "ember-template-lint": "^7.9.3",
+    "ember-truth-helpers": "^5.0.0",
     "ember-welcome-page": "^8.0.4",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
@@ -69,11 +71,17 @@
     "eslint-plugin-n": "^17.23.1",
     "eslint-plugin-qunit": "^8.2.5",
     "eslint-plugin-warp-drive": "^5.8.0",
+    "feather-icons": "^4.29.2",
     "globals": "^16.5.0",
+    "latlon-geohash": "^2.0.0",
+    "ol": "^10.7.0",
+    "ol-mapbox-style": "^13.2.0",
     "prettier": "^3.7.4",
     "prettier-plugin-ember-template-tag": "^2.1.2",
     "qunit": "^2.25.0",
     "qunit-dom": "^3.5.0",
+    "remotestorage-widget": "^1.8.0",
+    "remotestoragejs": "2.0.0-beta.8",
     "sinon": "^21.0.1",
     "stylelint": "^16.26.1",
     "stylelint-config-standard": "^38.0.0",
@@ -85,14 +93,5 @@
   },
   "ember": {
     "edition": "octane"
-  },
-  "dependencies": {
-    "@remotestorage/module-places": "link:vendor/remotestorage-module-places",
-    "ember-truth-helpers": "^5.0.0",
-    "latlon-geohash": "^2.0.0",
-    "ol": "^10.7.0",
-    "ol-mapbox-style": "^13.2.0",
-    "remotestorage-widget": "^1.8.0",
-    "remotestoragejs": "2.0.0-beta.8"
   }
 }

pnpm-lock.yaml

@@ -7,28 +7,6 @@ settings:
 importers:
 
   .:
-    dependencies:
-      '@remotestorage/module-places':
-        specifier: link:vendor/remotestorage-module-places
-        version: link:vendor/remotestorage-module-places
-      ember-truth-helpers:
-        specifier: ^5.0.0
-        version: 5.0.0
-      latlon-geohash:
-        specifier: ^2.0.0
-        version: 2.0.0
-      ol:
-        specifier: ^10.7.0
-        version: 10.7.0
-      ol-mapbox-style:
-        specifier: ^13.2.0
-        version: 13.2.0(ol@10.7.0)
-      remotestorage-widget:
-        specifier: ^1.8.0
-        version: 1.8.0
-      remotestoragejs:
-        specifier: 2.0.0-beta.8
-        version: 2.0.0-beta.8
     devDependencies:
       '@babel/core':
         specifier: ^7.28.5
@@ -69,6 +47,9 @@ importers:
       '@glimmer/component':
         specifier: ^2.0.0
         version: 2.0.0
+      '@remotestorage/module-places':
+        specifier: link:vendor/remotestorage-module-places
+        version: link:vendor/remotestorage-module-places
       '@rollup/plugin-babel':
         specifier: ^6.1.0
         version: 6.1.0(@babel/core@7.28.6)(rollup@4.55.1)
@@ -117,6 +98,9 @@ importers:
       ember-template-lint:
         specifier: ^7.9.3
         version: 7.9.3
+      ember-truth-helpers:
+        specifier: ^5.0.0
+        version: 5.0.0
       ember-welcome-page:
         specifier: ^8.0.4
         version: 8.0.5(@babel/core@7.28.6)
@@ -138,9 +122,21 @@ importers:
       eslint-plugin-warp-drive:
         specifier: ^5.8.0
         version: 5.8.1(@babel/core@7.28.6)
+      feather-icons:
+        specifier: ^4.29.2
+        version: 4.29.2
       globals:
         specifier: ^16.5.0
         version: 16.5.0
+      latlon-geohash:
+        specifier: ^2.0.0
+        version: 2.0.0
+      ol:
+        specifier: ^10.7.0
+        version: 10.7.0
+      ol-mapbox-style:
+        specifier: ^13.2.0
+        version: 13.2.0(ol@10.7.0)
       prettier:
         specifier: ^3.7.4
         version: 3.7.4
@@ -153,6 +149,12 @@ importers:
       qunit-dom:
         specifier: ^3.5.0
         version: 3.5.0
+      remotestorage-widget:
+        specifier: ^1.8.0
+        version: 1.8.0
+      remotestoragejs:
+        specifier: 2.0.0-beta.8
+        version: 2.0.0-beta.8
       sinon:
         specifier: ^21.0.1
         version: 21.0.1
@@ -1794,6 +1796,9 @@ packages:
   charm@1.0.2:
     resolution: {integrity: sha512-wqW3VdPnlSWT4eRiYX+hcs+C6ViBPUWk1qTCd+37qw9kEm/a5n2qcyQDMBWvSYKN/ctqZzeXNQaeBjOetJJUkw==}
 
+  classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+
   clean-up-path@1.0.0:
     resolution: {integrity: sha512-PHGlEF0Z6976qQyN6gM7kKH6EH0RdfZcc8V+QhFe36eRxV0SMH5OUBZG7Bxa9YcreNzyNbK63cGiZxdSZgosRw==}
 
@@ -2062,6 +2067,9 @@ packages:
     resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==}
     deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
 
+  core-js@3.47.0:
+    resolution: {integrity: sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==}
+
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
@@ -2544,6 +2552,9 @@ packages:
       picomatch:
         optional: true
 
+  feather-icons@4.29.2:
+    resolution: {integrity: sha512-0TaCFTnBTVCz6U+baY2UJNKne5ifGh7sMG4ZC2LoBWCZdIyPa+y6UiR4lEYGws1JOFWdee8KAsAIvu0VcXqiqA==}
+
   file-entry-cache@11.1.1:
     resolution: {integrity: sha512-TPVFSDE7q91Dlk1xpFLvFllf8r0HyOMOlnWy7Z2HBku5H3KhIeOGInexrIeg2D64DosVB/JXkrrk6N/7Wriq4A==}
 
@@ -6397,6 +6408,8 @@ snapshots:
     dependencies:
       inherits: 2.0.4
 
+  classnames@2.5.1: {}
+
   clean-up-path@1.0.0: {}
 
   cliui@8.0.1:
@@ -6497,6 +6510,8 @@ snapshots:
 
   core-js@2.6.12: {}
 
+  core-js@3.47.0: {}
+
   core-util-is@1.0.3: {}
 
   cors@2.8.5:
@@ -7206,6 +7221,11 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.3
 
+  feather-icons@4.29.2:
+    dependencies:
+      classnames: 2.5.1
+      core-js: 3.47.0
+
   file-entry-cache@11.1.1:
     dependencies:
       flat-cache: 6.1.19

release/index.html

@@ -6,8 +6,8 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
   
-  <script type="module" crossorigin src="/assets/main-DMYEQljq.js"></script>
+  <script type="module" crossorigin src="/assets/main-D89DIKor.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/main-DySxVUEA.css">
+  <link rel="stylesheet" crossorigin href="/assets/main-Bth7aKvu.css">
 </head>
   <body>
  </body>