Synopticon instance for Artus project

repo for frontend of Artus edition, based on Synopticon

Synopticon Project

Have Node.js installed

You need at least node, npm or yarn on your PC. To install node and npm you can use "the Node.js source code or a pre-built installer for your platform". If using yarn, you may need to set a project specific Version for it. For this run in the directory:

bash yarn set version berry

Install required packages

To install packages run the follwing command:

bash npm i

//: # ()

//: # ()

Develop

Run the app in develop mode:

bash npm run dev

Build

Produces a production-ready bundle:

bash npm run build

State Managment

For state management, we are using Pinia, which has been installed in the project setup steps by yarn.

Coding Guideline

In the Synopticon project we use script setup and *TypeScript *

Structure in Vue files

``` // Javascript Here

```

Scoped Styles

To avoid overlaps of the class names in different components, we use scoped styles to keep all classes around the related component, this way the development of each component will be faster and easier to debug in the future.

Naming conventions

Snakecase

Component, page and container names start with a lowercase letter and follow the Snakecase naming convention. This rule also applies to the function and class within them.
UPPERSNAKECASE for constant variables or environment variables.

Pages

Components with one syllable name are not accepted by Eslint-plugin-vue. In cases where the name of the page only contains one part, the suffix "page" will be appended to the component name, i.e. if the page name is user, it should be `userpage.vue`

Functions or Methods

Boolean return value

The most common use cases are variable names which start with has or is. If for instance a compute value is used to control the display of an element we use is_shown or is_active. The same logic applies to has like has_child, has_list, and etc.

Components and Containers

If a component’s/container’s name is one syllable, to avoid linting errors, we add the word vue at the end of the name, i.e. counter will be counter_vue.vue. For names with more than one syllable this isn't necessary.

Setup Endpoints and Multi View

It's possible to add base url for documents and image source in .env file root ├─ public ├─ src ├─ .env to add you base url create a variable called 'VITEBASEURL' VITE_BASE_URL= put the url here to add you base url for images create a variable called 'VITEIMAGEURL' VITE_IMAGE_URL= put the url here If in the project Multi View feature is required, it can be toggled on or of by setting VITE_MULTI_VIEW value to true or false VITE_MULTI_VIEW=true to change the amount of items shown in the document list page set VITE_PAGINATION_ITEMS to some integer. The default Value is 20. VITE_PAGINATION_ITEMS=integer This is a final example of .env file VITE_BASE_URL= put the url here VITE_IMAGE_URL= put the url here VITE_KWIC_WIDTH=100 The context characters for search results VITE_MULTI_VIEW=true VITE_PAGINATION_ITEMS=100 defines how many text should be shown on one site

Setup the Config File

In order to config a new setup, some changes should be made in config.ts file

src ├─ utils └─ config.ts

To TYPE_ROOT add your keyword i.e. schriften or autograph , etc.

export type TYPE_ROOT = "autograph";

Define a new enum value to E_ROOT with the same name and value

export enum E_ROOT { autograph = "autograph", }

Create and export a constant variable with type of INTERFACECONFIGINTERFACE that starts with the name of your keyword and followed by _CONFIGURATION in uppercase style (this is optional, it's possible to set any name you want for you variable).

export const AUTOGRAPH_CONFIGURATION:INTERFACE_CONFIG_INTERFACE ={} To make a valid config object follow INTERFACECONFIGINTERFACE structure

Your finished config object should be something like this. export const AUTOGRAPH_CONFIGURATION: INTERFACE_CONFIG_INTERFACE = { objectname: E_ROOT.autograph, partname: "Seite", textviews: [ { name: "Konstituierter Lesetext", objectname: E_ROOT.autograph, view: "default", }, { name: "Diplomatische Umschrift", objectname: E_ROOT.autograph, view: "autograph", }, ], addendumViews: [ { name: "Textkritischer Apparat", objectname: E_ROOT.autograph, view: "apparat", }, { name: "Texteingriffe", objectname: E_ROOT.autograph, view: "emendationen", }, { name: "Quellen und Siglen", objectname: E_ROOT.autograph, view: "quellen", }, { name: "Entstehung", objectname: "vorspann", view: "vorspann", }, ], }; Then at the end of config.ts file, in set_config function set up the switch keep it in mind to return one config as a default to have fallback in case of error or misconfiguration export const set_config = ( root_name: TYPE_ROOT ): INTERFACE_CONFIG_INTERFACE => { switch (root_name) { case E_ROOT.autograph: return AUTOGRAPH_CONFIGURATION; default: return AUTOGRAPH_CONFIGURATION; } }; This is a final example ``` export type TYPE_ROOT = "autograph";

export enum E_ROOT { autograph = "autograph" }

export const AUTOGRAPHCONFIGURATION: INTERFACECONFIGINTERFACE = { objectname: EROOT.autograph, partname: "Seite", textviews: [ { name: "Konstituierter Lesetext", objectname: EROOT.autograph, view: "default", }, { name: "Diplomatische Umschrift", objectname: EROOT.autograph, view: "autograph", }, ], addendumViews: [ { name: "Textkritischer Apparat", objectname: EROOT.autograph, view: "apparat", }, { name: "Texteingriffe", objectname: EROOT.autograph, view: "emendationen", }, { name: "Quellen und Siglen", objectname: E_ROOT.autograph, view: "quellen", }, { name: "Entstehung", objectname: "vorspann", view: "vorspann", }, ], };

export const setconfig = ( rootname: TYPEROOT ): INTERFACECONFIGINTERFACE => { switch (rootname) { case EROOT.autograph: return AUTOGRAPHCONFIGURATION; default: return AUTOGRAPHCONFIGURATION; } }; And for last step, you need to make change in `App.vue` src ├─ App.vue and arrange the url array regarding your end points
let urls = [ `${import.meta.env.VITEBASEURL}${EROOT.schriften}, ${import.meta.env.VITEBASEURL}${E_ROOT.autograph}, ]; ``