feat(riot-v5): add config for router and register tag instead of import

src/components/catalog/catalog-element.riot

@@ -33,6 +33,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       each="{item in props.item.images}" item="{ item }" />
   </div>
   <script>
+    import router from '../../scripts/router';
+
     export default {
       onMounted(props) {
         const card = this.$('material-card');
@@ -44,7 +46,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         }
         card.onclick = (e) => {
           if (!props.item.repo) {
-            // registryUI.taglist.go(props.item);
+            router.taglist(props.item);
           } else {
             this.update({
               expanded: !this.state.expanded,

src/components/catalog/catalog.riot

@@ -28,8 +28,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   </div>
   <catalog-element each="{ item in state.repositories }" item="{ item }" />
   <script>
-    import MaterialCard from 'riot-mui/src/material-elements/material-card/material-card.riot';
-    import MaterialSpinner from 'riot-mui/src/material-elements/material-spinner/material-spinner.riot';
     import CatalogElement from './catalog-element.riot'
     import {
       Http
@@ -37,8 +35,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
     export default {
       components: {
-        MaterialCard,
-        MaterialSpinner,
         CatalogElement
       },
       state: {

src/components/docker-registry-ui.riot

@@ -21,8 +21,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     </material-navbar>
   </header>
   <main>
-    <catalog registry-url="{ state.registryUrl }" name="{ state.name }"
-      catalog-elements-limit="{ state.catalogElementsLimit }"></catalog>
+    <router base="#!">
+      <route path="{baseRoute}">
+        <catalog registry-url="{ state.registryUrl }" name="{ state.name }"
+          catalog-elements-limit="{ state.catalogElementsLimit }" />
+      </route>
+      <route path="{baseRoute}taglist/(.*)">
+
+      </route>
+    </router>
   </main>
   <footer>
     <material-footer>
@@ -41,8 +48,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     import {
       version
     } from '../../package.json';
-    import MaterialNavbar from 'riot-mui/src/material-elements/material-navbar/material-navbar.riot';
-    import MaterialFooter from 'riot-mui/src/material-elements/material-footer/material-footer.riot';
+    import {
+      Router,
+      Route,
+    } from '@riotjs/route'
     import Catalog from './catalog/catalog.riot';
     import {
       stripHttps
@@ -50,9 +59,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
     export default {
       components: {
-        MaterialNavbar,
-        MaterialFooter,
-        Catalog
+        Catalog,
+        Router,
+        Route
       },
       onBeforeMount(props) {
         this.state.registryUrl = props.registryUrl || (window.location.origin + window.location.pathname.replace(/\/+$/,
@@ -60,6 +69,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         this.state.name = props.name || stripHttps(props.registryUrl);
         this.state.catalogElementsLimit = props.catalogElementsLimit || 100000;
       },
+      baseRoute: '/(\\?[^#]*)?(#!)?(/?)',
       version
     }
   </script>