feat(next): configure svelte app and widgets.

Author: crijke

.env.development

@@ -1,3 +1,3 @@
-GATSBY_TEIKEI_BUNDLES_URL=https://map-staging.ernte-teilen.org
-GATSBY_TEIKEI_API_BASE_URL=https://api-staging.ernte-teilen.org
-GATSBY_TEIKEI_ASSETS_BASE_URL=https://map-staging.ernte-teilen.org/assets
+GATSBY_TEIKEI_BUNDLES_URL=https://map-next.ernte-teilen.org
+GATSBY_TEIKEI_API_BASE_URL=https://api-next.ernte-teilen.org
+GATSBY_TEIKEI_ASSETS_BASE_URL=https://map-next.ernte-teilen.org/assets

.env.production

@@ -1,3 +1,3 @@
-GATSBY_TEIKEI_BUNDLES_URL=https://map.ernte-teilen.org
-GATSBY_TEIKEI_API_BASE_URL=https://api.ernte-teilen.org
-GATSBY_TEIKEI_ASSETS_BASE_URL=https://map.ernte-teilen.org/assets
+GATSBY_TEIKEI_BUNDLES_URL=https://map-next.ernte-teilen.org
+GATSBY_TEIKEI_API_BASE_URL=https://api-next.ernte-teilen.org
+GATSBY_TEIKEI_ASSETS_BASE_URL=https://map-next.ernte-teilen.org/assets

gatsby-config.js

@@ -35,5 +35,6 @@ module.exports = {
       'Hier finden Landwirte und Verbraucher zusammen, die sich an Solidarischer Landwirtschaft beteiligen möchten.',
     apiBaseUrl: process.env.GATSBY_TEIKEI_API_BASE_URL,
     assetsBaseUrl: process.env.GATSBY_TEIKEI_ASSETS_BASE_URL,
+    bundlesUrl: process.env.GATSBY_TEIKEI_BUNDLES_URL,
   },
 }

package.json

@@ -3,7 +3,7 @@
   "description": "Source code for the ernte-teilen.org website",
   "license": "AGPL-3.0",
   "scripts": {
-    "dev": "gatsby develop",
+    "dev": "gatsby develop -p 3000",
     "clean": "gatsby clean",
     "build": "gatsby build",
     "serve": "gatsby serve",

src/components/Search/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
 
@@ -7,26 +7,49 @@ import './styles.scss'
 const Search = ({
   t,
   searchConfig: {
-    siteMetadata: { assetsBaseUrl, apiBaseUrl },
+    siteMetadata: { assetsBaseUrl, apiBaseUrl, bundlesUrl },
   },
-}) => (
-  <div href="/" className="et--search">
-    <div className="et--search__form">
-      <label className="et--search__label">
-        {t.search.label}
-        <div
-          className="et--search__input"
-          id="teikei-search"
-          data-locale="de"
-          data-country="DE"
-          data-base-url="/karte/#"
-          data-api-base-url={apiBaseUrl}
-          data-assets-base-url={assetsBaseUrl}
-        />
-      </label>
+}) => {
+  const elRef = useRef(null)
+
+  useEffect(() => {
+    if (!elRef.current) return
+
+    window.__sveltekit_teikei = {
+      base: new URL('.', window.location).pathname.slice(0, -1),
+    }
+
+    const element = elRef.current
+
+    import(/* webpackIgnore: true */ `${bundlesUrl}/widgets/search-widget.js`)
+      .then((app) => {
+        app.start(element)
+      })
+      .catch((err) => {
+        console.error('Failed to load teikei bundle', err)
+      })
+  }, [bundlesUrl])
+
+  return (
+    <div href="/" className="et--search">
+      <div className="et--search__form">
+        <label className="et--search__label">
+          {t.search.label}
+          <div
+            ref={elRef}
+            className="et--search__input"
+            id="teikei-search"
+            data-locale="de"
+            data-country="DE"
+            data-base-url="/karte/#"
+            data-api-base-url={apiBaseUrl}
+            data-assets-base-url={assetsBaseUrl}
+          />
+        </label>
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 Search.propTypes = {
   t: PropTypes.shape().isRequired,
@@ -44,6 +67,7 @@ export const query = graphql`
     siteMetadata {
       apiBaseUrl
       assetsBaseUrl
+      bundlesUrl
     }
   }
 `

src/templates/teikei.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
 
@@ -15,22 +15,45 @@ const TeikeiTemplate = ({
       frontmatter: { title },
     },
     site: {
-      siteMetadata: { apiBaseUrl, assetsBaseUrl },
+      siteMetadata: { apiBaseUrl, assetsBaseUrl, bundlesUrl },
     },
   },
-}) => (
-  <PageWrapper t={t} fixedHeader>
-    <PageMeta pathname={location.pathname} title={title} />
-    <div
-      id="teikei-app"
-      data-locale="de"
-      data-base-url="/karte#"
-      data-country="DE"
-      data-api-base-url={apiBaseUrl}
-      data-assets-base-url={assetsBaseUrl}
-    />
-  </PageWrapper>
-)
+}) => {
+  const elRef = useRef(null)
+
+  useEffect(() => {
+    if (!elRef.current) return
+
+    window.__sveltekit_teikei = {
+      base: new URL('.', window.location).pathname.slice(0, -1),
+    }
+
+    const element = elRef.current
+
+    import(/* webpackIgnore: true */ `${bundlesUrl}/main.js`)
+      .then((app) => {
+        app.start(element)
+      })
+      .catch((err) => {
+        console.error('Failed to load teikei bundle', err)
+      })
+  }, [bundlesUrl])
+
+  return (
+    <PageWrapper t={t} fixedHeader>
+      <PageMeta pathname={location.pathname} title={title} />
+      <div
+        ref={elRef}
+        id="teikei-app"
+        data-locale="de"
+        data-base-url="/karte#"
+        data-country="DE"
+        data-api-base-url={apiBaseUrl}
+        data-assets-base-url={assetsBaseUrl}
+      />
+    </PageWrapper>
+  )
+}
 
 TeikeiTemplate.propTypes = {
   location: PropTypes.shape({
@@ -53,6 +76,7 @@ export const query = graphql`
       siteMetadata {
         apiBaseUrl
         assetsBaseUrl
+        bundlesUrl
       }
     }
     t: localesYaml(locale: { eq: "de" }) {