Compare revisions

Nils Windisch · Nils Windisch · Paul Pestov · Kristine Voigt · Paul Pestov · Paul Pestov
--- a/.ci-scripts/remove-old-artifacts.sh
+++ b/.ci-scripts/remove-old-artifacts.sh
@@ -3,7 +3,7 @@
 # This script removes all data that belongs to branches that have been closed.
 # This way we ensure that the artifacts don't get too big.

-PROJECT_ID=14957
+PROJECT_ID=${CI_PROJECT_ID}

 # get active branches
 ACTIVE_BRANCHES=$(curl --header "PRIVATE-TOKEN: $API_TOKEN" "https://gitlab.gwdg.de/api/v4/projects/${PROJECT_ID}/repository/branches" | jq -r '.[].name')

--- a/.ci-scripts/set-path-base.sh
+++ b/.ci-scripts/set-path-base.sh
-#!/bin/bash
-
-# This script sets the base path for vuepress according to the branch we're on.
-# Since our environments always have their respective branch name in the URL,
-# the base path has to be adjusted to that. Otherwise the files of the environment
-# will not be found.
-
-if [[ $1 == "main" ]]; then
-    sed -i "s|base:\s*'/'|base: '/ahiqar/website/'|" src/.vuepress/config.js
-else
-    sed -i "s|base:\s*'/'|base: '/ahiqar/website/$1/'|" src/.vuepress/config.js
-fi
\ No newline at end of file
--- a/.ci-scripts/update-artifacts.sh
+++ b/.ci-scripts/update-artifacts.sh
@@ -5,13 +5,12 @@
 # This way we can preserve the old environments and have the new one, too.

 DIST_DIR=src/.vuepress/dist
-PROJECT_ID=14957

 # get the latest 'pages' artifact which contains the former states/environments
-JOBS=$(curl --header "PRIVATE-TOKEN: $API_TOKEN" "https://gitlab.gwdg.de/api/v4/projects/${PROJECT_ID}/jobs?scope=success" | jq 'sort_by(.finished_at) | reverse')
+JOBS=$(curl --header "PRIVATE-TOKEN: $API_TOKEN" "https://gitlab.gwdg.de/api/v4/projects/${CI_PROJECT_ID}/jobs?scope=success" | jq 'sort_by(.finished_at) | reverse')
 LATEST_JOB_ID=$(echo $JOBS | jq '.[] | select(.stage == "pages").id' | sed -n 1p)

-curl --output old-artifact.zip --header "PRIVATE-TOKEN: $API_TOKEN" "https://gitlab.gwdg.de/api/v4/projects/${PROJECT_ID}/jobs/${LATEST_JOB_ID}/artifacts"
+curl --output old-artifact.zip --header "PRIVATE-TOKEN: $API_TOKEN" "https://gitlab.gwdg.de/api/v4/projects/${CI_PROJECT_ID}/jobs/${LATEST_JOB_ID}/artifacts"

 # add current data to artifact
 unzip -u old-artifact.zip
@@ -20,11 +19,9 @@ unzip -u old-artifact.zip
 # the environments of the feature branches should be available at 
 # https://subugoe.pages.gwdg.de/ahiqar/website/${CI_COMMIT_REF_SLUG}/.
 # this has to be considered in the directory structure.
-if [ ! ${CI_COMMIT_REF_SLUG} = 'main' ]; then
-	mkdir -p public/${CI_COMMIT_REF_SLUG}
-    cp --recursive ${DIST_DIR}/* public/${CI_COMMIT_REF_SLUG}
-else
-	cp --recursive ${DIST_DIR}/* public
+
+if [[ ${CI_COMMIT_REF_SLUG} == "main" ]]; then
+  cp --recursive public/main/* public/
 fi

-[ $? -eq 0 ] && exit 0
+# [ $? -eq 0 ] && exit 0
--- a/.env
+++ b/.env
+VUE_APP_BASE_URL_API = http://localhost
+VUE_APP_BASE_URL_VIEWER = http://localhost
+VUE_APP_PUBLIC_PATH=/
--- a/.gitignore
+++ b/.gitignore
 node_modules
 .vscode/settings.json
 .DS_Store
+.env.local
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -7,33 +7,102 @@
 # see https://gitlab.gwdg.de/mrodzis/docker-images/-/tree/main/alpine for more 
 # info about it.

+## Templates
+.build-defaults: &build-defaults
+  image: node:lts-alpine3.10
+  stage: build
+  dependencies:
+    - install
+  script:
+    # test
+    - echo ${DEVELOP}
+    - echo ${VUE_APP_BASE_URL_API}
+    - echo $API_MAIN
+    - echo $VUE_APP_BASE_URL_VIEWER
+    # overwrite vars when build from main branch. to omit a second 
+    # job (see dependency in pages stage).
+    - if [[ $CI_COMMIT_REF_SLUG == "main" ]]; then
+    - VUE_APP_BASE_URL_API=${API_MAIN}
+    - VUE_APP_BASE_URL_VIEWER=${MAIN}
+    - VUE_APP_PUBLIC_PATH="/ahiqar/website/"
+    - fi
+    - npm run build
+    - mkdir --parents public/${CI_COMMIT_REF_SLUG}
+    - cp --recursive src/.vuepress/dist/* public/${CI_COMMIT_REF_SLUG}/
+  artifacts:
+    paths:
+      - public/
+
+
 cache:
  paths:
    - node_modules/

+
+variables:
+  # ↓ needed to handle concurrency
+  # ↓ see https://docs.gitlab.com/ee/ci/runners/configure_runners.html#handling-concurrency
+  GIT_CLONE_PATH: $CI_BUILDS_DIR/$CI_PROJECT_PATH/$CI_JOB_NAME
+  # ↓ reduces the amount of data transfered to the runner (shallow clone)
+  GIT_DEPTH: 2
+  MAIN: 'https://ahikar.sub.uni-goettingen.de'
+  DEVELOP: 'https://ahikar-dev.sub.uni-goettingen.de'
+  API_DEV: 'https://ahikar-dev.sub.uni-goettingen.de/api'
+  API_MAIN: "${MAIN}/api"
+  BASE_BACKEND: '/website'
+
+
 stages:
+  - pre-build
  - build
  - pages
  - preserve-pages
  - remove_unused_envs

-build_page:
+
+install:
  image: node:lts-alpine3.10
-  stage: build
+  stage: pre-build
  script:
-    - ash .ci-scripts/set-path-base.sh ${CI_COMMIT_REF_SLUG}
    - npm i
-    - node_modules/.bin/vuepress build src
  artifacts:
+    name: "node_modules"
    paths:
-      - src/.vuepress/dist
+      - node_modules/
+
+
+build_page-all:
+  variables:
+    VUE_APP_BASE_URL_API: "${API_DEV}"
+    VUE_APP_BASE_URL_VIEWER: "${DEVELOP}"
+    VUE_APP_PUBLIC_PATH: '/ahiqar/website/${CI_COMMIT_REF_SLUG}/'
+  <<: *build-defaults
+
+build_page-develop-backend:
+  only:
+    - develop
+  variables:
+    VUE_APP_BASE_URL_API: "${API_DEV}"
+    VUE_APP_BASE_URL_VIEWER: "${DEVELOP}"
+    VUE_APP_PUBLIC_PATH: "${BASE_BACKEND}"
+  <<: *build-defaults
+
+build_page-main-backend:
+  only:
+    - main
+  variables:
+    VUE_APP_BASE_URL_API: "${API_MAIN}"
+    VUE_APP_BASE_URL_VIEWER: "${MAIN}"
+    VUE_APP_PUBLIC_PATH: "${BASE_BACKEND}"
+  <<: *build-defaults
+

 # this stage creates a new environment for the current branch.
 pages:
  image: docker.gitlab.gwdg.de/mrodzis/docker-images/alpine
  stage: pages
  needs:
-    - job: build_page
+    - job: build_page-all
      artifacts: true
  script:
    - ash .ci-scripts/update-artifacts.sh
@@ -46,6 +115,7 @@ pages:
    paths:
      - public

+
 # preserves the current as well as all the old artifacts for the environments.
 pushback:
  image: docker.gitlab.gwdg.de/mrodzis/docker-images/alpine
@@ -60,12 +130,13 @@ pushback:
    paths:
      - updated-artifact.zip

+
 # removes the environments that are no longer needed.
 remove_envs:
  image: docker.gitlab.gwdg.de/mrodzis/docker-images/alpine
  stage: remove_unused_envs
  needs:
-    - job: build_page
+    - job: build_page-all
      artifacts: false
    - job: pages
      artifacts: false

--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,66 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

+## [0.1.0](https://gitlab.gwdg.de/subugoe/ahiqar/website/compare/v0.0.6...v0.1.0) (2021-07-23)
+
+
+### ⚠ BREAKING CHANGES
+
+* Pass the base URL of API server to the ApiService class and inject the viewer base
+URL at search result list items instead of hardcoded strings.
+
+### Features
+
+* add build with base path for backend ([95d93e7](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/95d93e7707b3fd11bff8bb418ff23ca4e7d8e296))
+* add env variables for URLs ([3c3083f](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/3c3083f991dfe756506a1eb7700bdfa4e1484f2f)), closes [#75](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/issues/75)
+* add matches to search result ([8ab0b60](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/8ab0b60783de10d91c373acd5bdbf6559812afe2)), closes [#76](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/issues/76)
+* add public path to env variable ([a0c317f](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/a0c317ffb95cdb60d846bcf3738f0dd0e18d898e))
+* display "no search results" message ([804383c](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/804383c871d6a45e8d1888b24eae3748d8069ae0)), closes [#60](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/issues/60)
+* fake logic that renders search result view ([c4b8a79](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/c4b8a795f4ba3c8213f987f5aef35565521b3567)), closes [#55](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/issues/55)
+* implement keyboard with arabic and syriac letters ([7dba2b7](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/7dba2b7ee85c10772900e3b37d0b2e3f09080e18))
+* info for the search ([f2ec6f7](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/f2ec6f7153c615255538c48acf21cf32e696bb76))
+* search results pagination ([79b8a28](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/79b8a280be13e37f5123b59d4a62394e0b25dfda)), closes [#61](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/issues/61)
+* set real search  API URL ([61fc5f5](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/61fc5f559164b9d775df762e9a56afb33e94ad38)), closes [#66](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/issues/66)
+* update search result ([5aa6941](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/5aa6941220b22a45e2bf0e869f714d114d55c59c))
+* update search result item content ([263d588](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/263d5880eb68a84e3895a800547651c3baef8b89))
+* update search result item link ([1ef5975](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/1ef59754d8d1202bb015c4a0880973951a2dcc06))
+
+
+### Bug Fixes
+
+* ci var resolution issue (reasonable workaround) ([1364c3b](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/1364c3bd1312a9dd55892693ac500db8e99c4ae8)), closes [#79](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/issues/79)
+* cp for main only ([541ea11](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/541ea11ae85b9093d3877369efdad51a83e4611c))
+* dependency from missing job ([c806caa](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/c806caa8c2053078cae239f3206ccb9982980680))
+* dependency from missing job (main) ([be4be0b](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/be4be0b422f9b725ba5ea0bd53c0ce77d5ab64d0))
+* faulty title on motif page ([e6b7249](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/e6b72490a410d2de8fc709fca2e84d23bad53585)), closes [#64](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/issues/64)
+* keyboard position ([ace6be8](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/ace6be89aa39462a33698bcfdf4c82c458203295))
+* remove env variable at ApiService constructor ([c64cf70](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/c64cf70d9ad5b5563e064fe5f818eb6de2b8726b))
+* runner concurrency ([e86a970](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/e86a970b1055a6683adad7f6dc510e682ef90eb7))
+* syntax ([93eb9ad](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/93eb9ad6138a85ca8e4e17fd248a18e526cda65d))
+* var resolution ([7219957](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/7219957071de0c42b4d8cf78146ff105cfea4676))
+
+
+### Styling
+
+* expand Search Hit Data Display ([dabc28f](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/dabc28f3137f18a612b0737c1fbf283e1ad9f17c)), closes [#58](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/issues/58)
+
+
+### Continuos Integration
+
+* get project id from predefined vars on CI ([b6b442b](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/b6b442b6c556498e065aedf72b1d489bb6c2431f))
+* set env vars ([d5851f2](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/d5851f21221e3c5f12e057bd7ed095f7302fa7c0))
+* update public path variable ([b3d775c](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/b3d775c756fed8584582e1162023786bfe154a2c))
+
+
+### Chore
+
+* edit info texts ([816e59e](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/816e59ed7a9684f37d75364ac93163dd2bde2773))
+* merge develop into issue branch ([ba853ee](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/ba853ee2ca7c9f76b90ccd3a0653aeef598a9e30))
+* move vars to gitlab ci configuration, provide jobs picked up by back end ([db624e6](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/db624e6fbf000f9835f442b80bb13efe3f8072b3))
+* nice qutation marks in ci file ([fc0aede](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/fc0aedeb7417d7d88d3234e413b2ff933d2e889a))
+* typo ([f349752](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/f349752e4986ed1059a72920399aa0696263f9c6))
+* use npm script ([b123971](https://gitlab.gwdg.de/subugoe/ahiqar/website/-/commit/b123971d5cb016dd01e1551a5e3d1a1f7957f2ee))
+
 ### [0.0.6](https://gitlab.gwdg.de/subugoe/ahiqar/website/compare/v0.0.5...v0.0.6) (2021-06-17)



--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
 {
  "name": "ahiqar-website",
-  "version": "0.0.6",
+  "version": "0.1.0",
  "description": "",
  "main": "",
  "authors": {
@@ -16,13 +16,17 @@
  "license": "",
  "devDependencies": {
    "@mdi/font": "^5.9.55",
+    "axios": "^0.21.1",
    "commitizen": "^4.2.4",
    "cz-conventional-changelog": "^3.3.0",
+    "dotenv-flow": "^3.2.0",
    "husky": "^6.0.0",
    "markdown-it-attrs": "^4.0.0",
    "material-design-icons-iconfont": "^6.1.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^7.3.1",
+    "simple-keyboard": "^3.2.11",
+    "simple-keyboard-layouts": "^3.0.138",
    "standard-version": "^9.3.0",
    "vuepress": "^1.8.2",
    "vuetify": "^2.5.3"

--- a/readme.md
+++ b/readme.md
@@ -3,7 +3,9 @@
 ## Get it running
 - `$ git clone git@gitlab.gwdg.de:subugoe/ahiqar/website.git`
 - `$ nvm use` *to make sure you use the required node version*
- `$ npm i` *to install al dependencies*
+- `$ npm i` *to install all dependencies*
+- Create `.env.local` file and copy everything from `.env` file
+- Replace your desired values in `.env.local` file
 - `$ npm run dev` *to get a running (locally) website at [`http://localhost:8080/`](http://localhost:8080/)*

 ## Edit Content

--- a/src/.vuepress/api/api.js
+++ b/src/.vuepress/api/api.js
+import axios from 'axios';
+
+class ApiService {
+  constructor(baseURL) {
+    this.http = axios.create({
+      baseURL: baseURL,
+      timeout: 5000,
+    });
+    this.http.interceptors.response.use(
+      (response) => response.data,
+      (error) => {
+        return Promise.reject(error);
+      },
+    );
+  }
+
+  async search(value, from, size) {
+    return this.request('/search', 'POST', {
+      query: {
+        simple_query_string: {
+          query: value
+        }
+      },
+      from,
+      size
+    })
+  }
+
+  async request (url, method, data, params) {
+    return await this.http.request({
+      url,
+      method,
+      data,
+      params,
+    });
+  }
+}
+
+export default new ApiService(process.env.VUE_APP_BASE_URL_API);
--- a/src/.vuepress/components/Contact.vue
+++ b/src/.vuepress/components/Contact.vue
@@ -59,6 +59,11 @@
        },
        {
          name: "Prof. Dr. Reinhard Gregor Kratz",
+             org: "Theologische Fakultät",
+          street: "Platz der Göttinger Sieben 2",
+          place: "D-37073 Göttingen",
+          tel: "0551-39-27130",
+          fax: "0551-39-26304",
          mail: "reinhard.kratz@theologie.uni-goettingen.de"
        }
      ]

--- a/src/.vuepress/components/Keyboard.vue
+++ b/src/.vuepress/components/Keyboard.vue
+<template>
+  <div class="simple-keyboard"></div>
+</template>
+
+<script>
+import Keyboard from 'simple-keyboard';
+import latinLayout from 'simple-keyboard-layouts/build/layouts/english';
+import arabicLayout from "simple-keyboard-layouts/build/layouts/arabic";
+
+import 'simple-keyboard/build/css/index.css';
+
+export default {
+  name: 'Keyboard',
+  props: {
+    input: {
+      type: String
+    },
+    layout: {
+      type: String
+    }
+  },
+  data: () => ({
+    keyboard: null,
+    syriacLayout: {
+      layout: {
+        // See: https://syriaca.org/geo/$nav-base/resources/keyboard/syr/syr.js
+        default: [
+          "| 1 2 3 4 5 6 7 8 9 0",
+          "\u0714 \u0728 \u0716 \u0729 \u0726 \u071b \u0725 \u0717 \u071e \u071a \u0713 \u0715 \u0706",
+          "\u072b \u0723 \u071d \u0712 \u0720 \u0710 \u072c \u0722 \u0721 \u071f \u071b {enter}",
+          "\u0724 \u072a \u0727 \u0700 . \u0718 \u0719 \u0707",
+        ],
+      },
+    }
+  }),
+  mounted() {
+    this.keyboard = new Keyboard({
+      onChange: this.onChange,
+      onKeyPress: this.onKeyPress,
+      layout: arabicLayout.layout
+    });
+    this.keyboard.setInput(this.input);
+  },
+  methods: {
+    onChange(input) {
+      this.$emit('change', input);
+    },
+    onKeyPress(button) {
+      this.$emit('key-press', button);
+      if (button === '{shift}' || button === '{lock}') this.handleShift();
+    },
+    handleShift() {
+      let currentLayout = this.keyboard.options.layoutName;
+      let shiftToggle = currentLayout === 'default' ? 'shift' : 'default';
+
+      this.keyboard.setOptions({
+        layoutName: shiftToggle
+      });
+    }
+  },
+  watch: {
+    input(value) {
+      this.keyboard.setInput(value);
+    },
+    layout(value) {
+      let layout = latinLayout.layout;
+      if (value === 'arabic') {
+        layout = arabicLayout.layout;
+      } else if (value === 'syriac') {
+        layout = this.syriacLayout.layout;
+      }
+
+      this.keyboard.setOptions({ layout });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.simple-keyboard {
+  padding: 8px;
+  border-radius: 0;
+}
+</style>
--- a/src/.vuepress/components/SearchInput.vue
+++ b/src/.vuepress/components/SearchInput.vue
 <template>
  <form action="">
-    <v-container>
-      <v-row>
+      <v-row class="mb-5">
        <v-col
          cols="6"
+          class="d-flex align-top input-container"
        >
-          <!-- TODO: provide input for characters other than latin -->
          <v-text-field
-            v-model="search"
+            autofocus
+            v-model="input"
            label="Your Search String"
+            hint="Operators: e.g. 'OR', 'AND', 'NOT', '*' and more"
+            persistent-hint
            outlined
            dense
-            hide-details
+            reverse
+            ref="searchTextField"
          ></v-text-field>
+          <v-btn
+            tile
+            large
+            height="40px"
+            color="primary"
+            class="ml-5"
+            @click="toggleKeyboard"
+          >
+            <v-icon dark>mdi-keyboard</v-icon>
+          </v-btn>
+          <v-card
+            class="keyboard-container"
+            v-if="showKeyboard"
+            elevation="8"
+          >
+            <div class="button-container pa-2">
+              <v-btn-toggle v-model="selectedKeyboardLayout">
+                <v-btn small>Arabic</v-btn>
+                <v-btn small>Syriac</v-btn>
+              </v-btn-toggle>
+              <v-btn icon class="button-close" @click="closeKeyboard">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </div>
+            <Keyboard
+              @change="onChange"
+              :input="input"
+              :layout="keyboardLayouts[selectedKeyboardLayout]"
+            />
+          </v-card>
        </v-col>
        <v-col
          cols="2"
-          class="d-flex align-center"
+          class="d-flex"
        >
          <v-btn
            tile
+            height="40px"
            color="primary"
+            @click="emitSearch"
          >
            Start Search
          </v-btn>
        </v-col>
      </v-row>
-    </v-container>
  </form>
 </template>
+<script>
+import Keyboard from "./Keyboard";
+export default {
+  components: { Keyboard },
+  data() {
+    return {
+      input: '',
+      showKeyboard: false,
+      selectedKeyboardLayout: 0,
+      keyboardLayouts: ['arabic', 'syriac']
+    }
+  },
+  methods: {
+    emitSearch() {
+      this.$emit('search', this.input);
+    },
+    onChange(input) {
+      this.input = input;
+      setTimeout(() => this.$refs.searchTextField.focus());
+    },
+    toggleKeyboard() {
+      this.showKeyboard = !this.showKeyboard;
+
+      if (this.showKeyboard) {
+        this.$refs.searchTextField.focus();
+      } else {
+        this.$refs.searchTextField.blur();
+      }
+    },
+    closeKeyboard() {
+      this.showKeyboard = false;
+    }
+  }
+}
+</script>

 <style lang="scss" scoped>
+@import '~vuetify/src/styles/settings/variables.scss';
+
+.input-container {
+  position: relative;
+}
+.keyboard-container {
+  position: absolute;
+  z-index: 100;
+  width: 600px;
+  top: 100%;
+  max-width: none;
+
+  @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    left: 0;
+    width: 100vw;
+  }
+
+  .button-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+  .button-close {
+    margin-left: auto;
+  }
+}
 </style>
--- a/src/.vuepress/components/SearchPage.vue
+++ b/src/.vuepress/components/SearchPage.vue
+<template>
+  <div>
+    <SearchInput @search="onSearchInput" />
+
+    <SearchResultList
+      v-if="items.length > 0"
+      :items="items"
+      @page-change="onPageChange"
+    />
+    <SearchResultEmpty v-else />
+  </div>
+</template>
+
+<script>
+import SearchResultList from "./SearchResultList";
+import SearchResultEmpty from "./SearchResultEmpty";
+import apiService from '../api/api';
+
+export default {
+  components: {
+    SearchResultList,
+    SearchResultEmpty
+  },
+  data() {
+    return {
+      query: '',
+      items: [],
+      size: 10
+    }
+  },
+  methods: {
+    onSearchInput(query) {
+      this.query = query;
+      this.search(this.query, 0, this.size)
+    },
+    onPageChange(page) {
+      const from = this.size * (page - 1);
+      this.search(this.query, from, this.size);
+    },
+    async search(value, from, size) {
+      const searchResponse = await apiService.search(value, from, size);
+
+      if (searchResponse) {
+        const items = searchResponse.hits?.hits;
+        if (items) {
+          this.items = items;
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/.vuepress/components/SearchResultList.vue
+++ b/src/.vuepress/components/SearchResultList.vue
 <template>
-  <div>
+  <div class="result-container">
    <v-list
      two-line
      subheader
    >
-      <!-- TODO: add actual search results hits -->
-      <v-list-item>
+      <v-list-item v-for="item in items" :key="item.item">
        <v-list-item-content>
-          <v-list-item-title>Sheet 2A</v-list-item-title>
-          <v-list-item-subtitle>Cod. Arab. 236 Copenhagen</v-list-item-subtitle>
-        </v-list-item-content>
-      </v-list-item>
-      <v-list-item>
-        <v-list-item-content>
-          <v-list-item-title>Sheet 1</v-list-item-title>
-          <v-list-item-subtitle>Vat. Arab. 2054</v-list-item-subtitle>
-        </v-list-item-content>
-      </v-list-item>
-      <v-list-item>
-        <v-list-item-content>
-          <v-list-item-title>Sheet 194</v-list-item-title>
-          <v-list-item-subtitle>Or. 1292. The Arabic Text in Leiden.</v-list-item-subtitle>
-        </v-list-item-content>
-      </v-list-item>
-      <v-list-item>
-        <v-list-item-content>
-          <v-list-item-title>Sheet 130</v-list-item-title>
-          <v-list-item-subtitle>Mingana Arabic Christian 93</v-list-item-subtitle>
-        </v-list-item-content>
-      </v-list-item>
-      <v-list-item>
-        <v-list-item-content>
-          <v-list-item-title>Sheet 3b</v-list-item-title>
-          <v-list-item-subtitle>Cambrigde Add 3497</v-list-item-subtitle>
-        </v-list-item-content>
-      </v-list-item>
-      <v-list-item>
-        <v-list-item-content>
-          <v-list-item-title>Sheet 82a</v-list-item-title>
-          <v-list-item-subtitle>Mingana Syriac 133 ff.82v-103r</v-list-item-subtitle>
-        </v-list-item-content>
-      </v-list-item>
-      <v-list-item>
-        <v-list-item-content>
-          <v-list-item-title>Sheet 293a</v-list-item-title>
-          <v-list-item-subtitle>Vat. sir. 159. ff.293rb-299va</v-list-item-subtitle>
+          <a :href="getItemUrl(item)" target="_blank">
+            <v-list-item-title>{{item.label}}</v-list-item-title>
+            <v-list-item-subtitle class="d-flex">
+              <span v-for="(matchItem, i) in item.matches" class="d-flex">
+                <span>"{{matchItem.match}}"</span>
+                <span>&nbsp;({{matchItem.occurrencesOnPage}})</span>
+                <span v-if="i < item.matches.length - 1">, </span>
+              </span>
+              <span class="ml-1">in Sheet {{item.n}}</span>
+            </v-list-item-subtitle>
+            <v-list-item-subtitle>{{getLanguage(item.lang)}}</v-list-item-subtitle>
+          </a>
        </v-list-item-content>
      </v-list-item>
    </v-list>
@@ -57,5 +30,57 @@
  </div>
 </template>

+<script>
+export default {
+  data() {
+    return {
+      page: 1,
+      languagesMap: {
+        ara: 'Arabic',
+        syc: 'Syriac',
+      }
+    }
+  },
+  computed: {
+    viewerBaseUrl() {
+      return process.env.VUE_APP_BASE_URL_VIEWER;
+    },
+  },
+  props: {
+    items: {
+      type: Array,
+      default: []
+    }
+  },
+  methods: {
+    getLanguage(code) {
+      return this.languagesMap[code] || 'Unknown';
+    },
+    getItemUrl(item) {
+      let language = '';
+
+      if (item.lang === 'ara') {
+        language = 'arabic-karshuni';
+      } else if (item.lang === 'syc') {
+        language = 'syriac'
+      }
+      return this.viewerBaseUrl + '/' + language + '/#/?itemurl=' + item.item
+    },
+  },
+  watch: {
+    page: function() {
+      this.$emit('page-change', this.page);
+    }
+  }
+}
+</script>
+
 <style lang="scss" scoped>
+a {
+  text-decoration: none;
+}
+
+.result-container {
+  min-height: 200px;
+}
 </style>
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
-const { description } = require('../../package')
+const { description } = require('../../package');
+const webpack = require('webpack');
+require('dotenv-flow').config();

 module.exports = {
-  base: '/',
+  base: process.env.VUE_APP_PUBLIC_PATH ? process.env.VUE_APP_PUBLIC_PATH : '/',
  head: [
    ['meta', { name: 'charset', content: 'UTF-8' }],
    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
@@ -39,8 +41,7 @@ module.exports = {
    }
  },

-  plugins: [
-  ],
+  plugins: [],
  markdown: {
    // options for markdown-it-anchor
    anchor: { permalink: false },
@@ -49,5 +50,10 @@ module.exports = {
    extendMarkdown: md => {
      md.use(require('markdown-it-attrs'))
    }
+  },
+  configureWebpack: (config) => {
+    return { plugins: [
+        new webpack.EnvironmentPlugin({...process.env})
+      ]}
  }
 }
--- a/src/de/motive.md
+++ b/src/de/motive.md
-<!-- markdownlint-disable MD033 -->
 ---
 home: false
 title: Motive
@@ -9,6 +8,7 @@ layout: Layout

 Bereits 1979 begann Max Küchler in seiner Studie "Frühjüdische Weisheitstraditionen" (Fribourg/Göttingen 1979) seine Ausführungen zu Ahiqar mit einer stichwortartigen Zusammenstellung an Themen, die in der Ahiqar-Erzählung behandelt werden. In Anknüpfung daran sind im Folgenden die zentralen Motive und Themen, die in den verschiedenen Transkriptionen Erwähnung finden, zusammengestellt und ausgezeichnet worden. Mit diesem Schritt ist eine motivgeschichtliche Analyse der syrischen und arabischen Aḥiqar-Traditionen erarbeitet, mit deren Hilfe das bisherige Bild von der Überlieferungsgeschichte korrigiert, präzisiert und erheblich erweitert wird. Eine kurze Beschreibung der diversen stichwortartigen Oberbegriffe folgt: {.body-2}

+<!-- markdownlint-disable MD033 -->
 <template>
  <v-simple-table>
    <template v-slot:default>
@@ -227,3 +227,4 @@ Bereits 1979 begann Max Küchler in seiner Studie "Frühjüdische Weisheitstradi
    },
  }
 </script>
+<!-- markdownlint-enable MD033 -->
--- a/src/index.md
+++ b/src/index.md
 ---
 home: true
 title: Ahiqar
-subtitle: The Syriac, Arabic, and Karshuni Ahiqar Texts
+subtitle: The Syriac, Arabic and Karshuni Ahiqar Texts
 layout: Layout
 ---
 # {{ $frontmatter.title }}{.text-h1 .mt-4 .mb-2 .font-weight-light .primary--text}

--- a/src/motifs.md
+++ b/src/motifs.md
-<!-- markdownlint-disable MD033 -->
 ---
 home: false
 title: Motifs
@@ -9,6 +8,7 @@ layout: Layout

 Already 1979, Max Küchler started his part on Ahiqar (published in his study "Frühjüdische Weisheitstraditionen" (Fribourg/Göttingen 1979)) with a collection of topics in the Ahiqar-tale in note form. In relation to that, we have collected and tagged  the central motifs and themes of this story that are present in the various transcriptions. This process helps to precise, correct and enlarge the motif history of this story. In the following, a short description of each motif is appended: {.body-2}

+<!-- markdownlint-disable MD033 -->
 <template>
  <v-simple-table>
    <template v-slot:default>
@@ -227,3 +227,4 @@ Already 1979, Max Küchler started his part on Ahiqar (published in his study "F
    },
  }
 </script>
+<!-- markdownlint-enable MD033 -->
No results found