- correct citation in datset-detail.component.ts

- enable subdomain routing

src/App2.vue

@@ -0,0 +1,137 @@
+<template>
+    <!-- <HelloWorld msg="Welcome to Your Vue.js plus TypeScript App" /> -->
+
+    <!-- <link
+        rel="stylesheet"
+        href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
+        integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
+        crossorigin="anonymous"
+    /> -->
+
+    <!-- <home-view-component></home-view-component> -->
+    <router-view></router-view>
+
+    <div class="container-fluid">
+        <div class="copyright-notice">Copyright 2022 TETHYS RDR</div>
+    </div>
+
+    <!-- <vs-input
+        @search="onSearch"
+        title="searching solr datasets"
+        placeholder="Enter your search term..."
+    />
+    <div v-if="results.length > 0" class="result-list-info">
+        <div class="resultheader">
+            Your search yielded
+            <strong>{{ numFound }}</strong> results:
+        </div>
+    </div> -->
+</template>
+
+<script lang="ts">
+import App2 from "./app2";
+export default App2;
+</script>
+
+<style scoped lang="scss">
+// #app {
+//   font-family: Avenir, Helvetica, Arial, sans-serif;
+//   -webkit-font-smoothing: antialiased;
+//   -moz-osx-font-smoothing: grayscale;
+//   text-align: center;
+//   color: #2c3e50;
+//   margin-top: 60px;
+//   width: 100%;
+//   height: 100%;
+// }
+#app {
+    p,
+    ol,
+    ul,
+    // li,
+    dl,
+    textarea,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin-top: 1.5rem;
+    }
+}
+
+// footer:
+footer {
+    background-image: url(./assets/site/img/footer-bg.jpg);
+
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    padding-top: 26em;
+    padding-bottom: 3.8em;
+}
+
+footer .card {
+    background: transparent;
+    border: none;
+    position: relative;
+    margin-top: 2em;
+    box-shadow: none;
+}
+
+footer .card-title {
+    // font-family: Verdana;
+    color: #fff;
+    text-transform: uppercase;
+    font-weight: bold;
+}
+
+.list-group-flush {
+    border-radius: 0;
+}
+.list-group {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    padding-left: 0;
+    margin-bottom: 0;
+    border-radius: 0.25rem;
+}
+.list-group {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    padding-left: 0;
+    margin-bottom: 0;
+}
+.list-group-flush > .list-group-item {
+    border-width: 0 0 1px;
+}
+
+.list-group-item:first-child {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+}
+.list-group-flush .list-group-item {
+    border-right: 0;
+    border-left: 0;
+    border-radius: 0;
+}
+footer .list-group-item a {
+    color: #fff;
+    text-decoration: none;
+}
+
+.copyright-notice {
+    text-align: center;
+    color: #fff;
+    background-color: #384d6e;
+    padding: 0.3em 0;
+}
+</style>

src/app2.ts

@@ -0,0 +1,81 @@
+import { Options, Vue } from "vue-class-component";
+import { Watch } from "vue-property-decorator";
+// import { RouteLocation } from "vue-router";
+import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
+import HomeViewComponent from "./views/home-view/home-view-component.vue";
+import HelpViewComponent from "./views/map-view/help-view-component.vue";
+import SearchViewComponent from "./views/search-view/search-view-component.vue";
+import DatasetDetailComponent from "./views/dataset-detail.component.ts/dataset-detail.component.vue";
+import ServiceViewComponent from "./views/services-view/service-view-component.vue";
+import OaiViewComponent from "./views/oai-view/oai-view-component.vue";
+import ContactViewComponent from "./views/contact-view/contact-view-component.vue";
+import SitelinkViewComponent from "./views/sitelink-view/sitelink-view-component.vue";
+import ImprintViewComponent from "./views/imprint-view/imprint-view-component.vue";
+import TermsViewComponent from "./views/terms-view/terms-view-component";
+import { VUE_APP_PORTAL } from "./constants";
+// import VsInput from "./components/vs-input/vs-input.vue";
+// import VsResult from "./components/vs-result/vs-result.vue";
+// import FacetCategory from "./components/face-category/facet-category.vue";
+// import ActiveFacetCategory from "./components/active-facet-category/active-facet-category.vue";
+
+// import { SolrSettings } from "@/models/solr";
+// import { DatasetService } from "./services/dataset.service";
+// import { Suggestion } from "./models/dataset";
+// import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "./models/headers";
+// import { ActiveFilterCategories } from "@/models/solr";
+
+// https://devsoniq.com/how-to-toggle-bulma-css-navbar-in-your-vue-js-project/
+@Options({
+    components: {
+        HelloWorld,
+        HomeViewComponent,
+        // VsInput,
+        // VsResult,
+        // FacetCategory,
+        // ActiveFacetCategory,
+        HelpViewComponent,
+        SearchViewComponent,
+        DatasetDetailComponent,
+        ServiceViewComponent,
+        OaiViewComponent,
+        ContactViewComponent,
+        SitelinkViewComponent,
+        ImprintViewComponent,
+        TermsViewComponent,
+    },
+})
+export default class App2 extends Vue {
+    public active = false;
+    public portal = VUE_APP_PORTAL + "/login";
+
+    mounted(): void {
+        // const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0);
+        // // Check if there are any navbar burgers
+        // if ($navbarBurgers.length > 0) {
+        //     // Add a click event on each of them
+        //     $navbarBurgers.forEach((elNavBurger) => {
+        //         elNavBurger.addEventListener("click", () => {
+        //             // Get the target from the "data-target" attribute
+        //             const targetNavbar = elNavBurger.dataset.target;
+        //             const $target = document.getElementById(targetNavbar);
+        //             // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+        //             elNavBurger.classList.toggle("is-active");
+        //             $target?.classList.toggle("is-active");
+        //         });
+        //     });
+        // }
+    }
+
+    public showMobilemenu(event: PointerEvent): void {
+        // Don't follow the link
+        event.preventDefault();
+        this.active = !this.active;
+    }
+
+    @Watch("$route")
+    protected oRouteChangedChanged(): void {
+        //(to: RouteLocation, from: RouteLocation): void {
+        // console.log("setting " + from.path + " to " + to.path);
+        this.active = false;
+    }
+}

src/main.ts

@@ -1,12 +1,28 @@
 import { createApp } from "vue";
 import App from "./App.vue";
+import App2 from "./App2.vue";
 import "./assets/scss/main-styles.scss";
 // import FontAwesomeIcon from "@/utilities/fontawesome";
-import router from "./router/index";
+import index from "./router/index";
+import route1 from "./router/route1";
 import "@fortawesome/fontawesome-free/css/all.css";
 import VueMatomo from "vue-matomo";
 
-createApp(App)
+const host = window.location.host;
+const parts = host.split(".");
+// const domainLength = 2; // route1.example.com => domain length = 3
+let router, app;
+// let routes;
+if (parts[0] === "doi") {
+    router = route1;
+    app = App2;
+} else {
+    // If you want to do something else just comment the line below
+    router = index;
+    app = App;
+}
+
+createApp(app)
     .use(VueMatomo, {
         host: "https://webstat.geologie.ac.at/",
         siteId: 8,

src/router/index.ts

@@ -71,7 +71,7 @@ const routes = [
     },
 ];
 
-const router = createRouter({
+const index = createRouter({
     history: createWebHistory(),
     routes,
     // scrollBehavior(to, from, savedPosition) {
@@ -81,4 +81,4 @@ const router = createRouter({
     },
 });
 
-export default router;
+export default index;

src/router/route1.ts

@@ -0,0 +1,41 @@
+// import Vue from 'vue';
+// import Router from 'vue-router';
+import { createWebHistory, createRouter } from "vue-router";
+import DatasetDetailComponent from "@/views/dataset-detail.component.ts/dataset-detail.component";
+
+// Vue.use(Router);
+
+// export default new Router({
+//   mode: 'history',
+//   routes: [
+//     {
+//       path: '/',
+//       name: 'Route1',
+//       component: Route1,
+//     },
+//   ],
+// });
+
+const route1 = createRouter({
+    history: createWebHistory(),
+    routes: [
+        // {
+        //   path: '/',
+        //   name: 'Route1',
+        //   component: Route1,
+        // },
+        {
+            path: "/10.24341/tethys.:datasetId",
+            name: "dataset2",
+            component: DatasetDetailComponent,
+            props: true,
+        },
+    ],
+    // scrollBehavior(to, from, savedPosition) {
+    scrollBehavior() {
+        // return desired position
+        document.getElementById("app")?.scrollIntoView();
+    },
+});
+
+export default route1;

src/views/dataset-detail.component.ts/dataset-detail.component.ts

@@ -41,6 +41,19 @@ export default class DatasetDetailComponent extends Vue {
     }
 
     onSearch(suggestion: Suggestion | string): void {
+        const host = window.location.host;
+        const parts = host.split(".");
+        if (parts[0] === "doi") {
+            let term;
+            if (typeof suggestion === "string") {
+                term = suggestion;
+                window.open("https://tethys.at/search/" + term);
+            } else if (suggestion instanceof Suggestion) {
+                term = suggestion.value;
+                const type = suggestion.type;
+                window.open("https://tethys.at/search/" + term + "/" + type);
+            }
+        } else {
             let term;
             if (typeof suggestion === "string") {
                 term = suggestion;
@@ -49,6 +62,7 @@ export default class DatasetDetailComponent extends Vue {
                 term = suggestion.value;
                 this.$router.push({ name: "Search", params: { display: term, type: suggestion.type } });
             }
+        }
 
         // this.searchTerm = suggestion;
         // this.$router.push({ name: "Search", params: { display: term, suggestion instanceof Suggestion ? ty} });
@@ -116,7 +130,7 @@ export default class DatasetDetailComponent extends Vue {
                 // u.last_name + ", " + u.first_name?.substring(0, 1).toUpperCase() + "."
             })
             .join(", ");
-        citation += " " + moment(this.dataset.server_date_published).format("YYYY") + ": ";
+        citation += " (" + moment(this.dataset.server_date_published).format("YYYY") + "): ";
         citation += this.dataset.MainTitle?.value;
         citation += "." + this.dataset.creating_corporation + ", ";
         citation += this.dataset.publisher_name;

vue.config.js

@@ -21,6 +21,9 @@ module.exports = {
             title: "TETHYS - Research Data Repository",
         },
     },
+    devServer: {
+        disableHostCheck: true,
+    },
     configureWebpack: {
         plugins: [
             new webpack.DefinePlugin({