Merge remote-tracking branch 'origin/main' into 503-prep-2.0.1

Author: jspaaks

README.dev.md

@@ -111,6 +111,24 @@ git push origin gh-pages
 - After `gh-pages` is created, select it as the source for deployment of [GitHub pages](https://github.com/citation-file-format/cff-initializer-javascript/settings/pages).
 - Enable write permissions for `secrets.GITHUB_TOKEN` on workflows (see, e.g. [this post](https://github.com/peaceiris/actions-gh-pages/issues/744#issuecomment-1119685318)). This is done on [Settings -> Actions -> General -> Workflow permissions](https://github.com/citation-file-format/cff-initializer-javascript/settings/actions).
 
+## Previewing
+
+This is app is previewed using [Netlify](https://netlify.com) automatically by the [Preview workflow](.github/workflows/preview.yml).
+The main branch is previewed into <https://cffinit.netlify.app/main> and each Pull Request is previewing into a `https://cffinit.netlify.app/PRXXX` page.
+The way this works is:
+
+- The branch `gh-preview` is served by Netlify. There is a folder `main` and several folders `PRXXX` in that branch.
+- After a Pull Request or a push to `main` is created, the workflow runs.
+- The workflow changes the `publicPath` configuration in [quasar.conf.js](quasar.conf.js) to reflect the folder `main` or `PRXXX`.
+  - This is stored in a environment variable `PUBLICPATH` to be used later.
+  - We use `sed` with a `-i` to replace the value in-place.
+- The workflow builds the app (using the `npm run build` command) into a folder `./dist`.
+- The GitHub action `peaceiris/actions-gh-pages@v3` pushes the contents of `./dist` to the branch [gh-preview](https://github.com/citation-file-format/cff-initializer-javascript/tree/gh-preview) in the indicated path.
+- After the push is complete, we create a comment on the pull request (if applicable) with the link to the preview page.
+
+For this to work, you need a `gh-preview` branch to exist and to enable write permissions for `secrets.GITHUB_TOKEN`.
+See the section on [Publishing](#publishing) for details on how to do this.
+
 ## Making a release
 
 This section describes how to make a release in 2 parts:

src/components/IdentifierCardEditing.vue

@@ -5,20 +5,24 @@
         class="bg-formcard q-pa-md"
     >
         <q-card-section>
-            <div class="row items-center no-wrap">
+            <div class="items-center no-wrap">
                 <q-option-group
                     inline
                     type="radio"
                     v-bind:error="typeError.hasError"
                     v-bind:error-message="typeError.messages.join(', ')"
                     v-bind:model-value="type"
                     v-bind:options="typeOptions"
-                    v-on:update:modelValue="
-                        $emit('updateType', 'type', $event)
-                    "
+                    v-on:update:modelValue="$emit('updateType', 'type', $event)"
                 />
             </div>
-            <div class="q-gutter-md items-center no-wrap">
+            <div class="q-mt-md items-center no-wrap">
+                <div class="row">
+                    <q-label class="text-dark">
+                        What is the value of the {{ label }}?
+                        <SchemaGuideLink v-bind:anchor="anchor" />
+                    </q-label>
+                </div>
                 <q-input
                     bg-color="white"
                     label="Value"
@@ -28,12 +32,16 @@
                     v-bind:error="valueError.hasError"
                     v-bind:error-message="valueError.messages.join(', ')"
                     v-bind:model-value="value"
-                    v-on:update:modelValue="
-                        $emit('updateValue', 'value', $event)
-                    "
+                    v-on:update:modelValue="$emit('updateValue', 'value', $event)"
                 />
             </div>
-            <div class="q-gutter-md items-center no-wrap">
+            <div class="q-mt-md items-center no-wrap">
+                <div class="row">
+                    <q-label class="text-dark">
+                        What is the description for the {{ label }}?
+                        <SchemaGuideLink anchor="#definitionsidentifier-description" />
+                    </q-label>
+                </div>
                 <q-input
                     bg-color="white"
                     label="Description"
@@ -43,9 +51,7 @@
                     v-bind:error="descriptionError.hasError"
                     v-bind:error-message="descriptionError.messages.join(', ')"
                     v-bind:model-value="description"
-                    v-on:update:modelValue="
-                        $emit('updateDescription', 'description', $event)
-                    "
+                    v-on:update:modelValue="$emit('updateDescription', 'description', $event)"
                 />
             </div>
         </q-card-section>
@@ -88,6 +94,7 @@ import { IdentifierTypeType } from '../types'
 import { computed, defineComponent, PropType } from 'vue'
 import { getMyErrors } from 'src/store/validator'
 import { identifierErrors } from 'src/identifier-errors'
+import SchemaGuideLink from 'src/components/SchemaGuideLink.vue'
 
 export default defineComponent({
     name: 'IdentifierCardEditing',
@@ -97,11 +104,11 @@ export default defineComponent({
             required: true
         },
         type: {
-            type: String,
+            type: String as PropType<IdentifierTypeType>,
             default: ''
         },
         value: {
-            type: String as PropType<IdentifierTypeType>,
+            type: String,
             default: ''
         },
         description: {
@@ -113,20 +120,52 @@ export default defineComponent({
             default: 0
         }
     },
+    components: {
+        SchemaGuideLink
+    },
     setup (props) {
+        const linkInfo = {
+            doi: { label: 'DOI', anchor: '#definitionsdoi' },
+            url: { label: 'URL', anchor: '#definitionsurl' },
+            swh: {
+                label: 'Software Heritage identifier',
+                anchor: '#definitionsswh-identifier'
+            },
+            other: { label: 'identifier', anchor: '#definitionsidentifier' }
+        }
+
         return {
             typeOptions: [
                 { label: 'DOI', value: 'doi' },
                 { label: 'URL', value: 'url' },
                 { label: 'Software Heritage', value: 'swh' },
                 { label: 'Other', value: 'other' }
             ],
+            label: computed(() => linkInfo[props.type].label),
+            anchor: computed(() => linkInfo[props.type].anchor),
             typeError: computed(() => getMyErrors(`/identifiers/${props.index}/type`)),
             valueError: computed(() => getMyErrors(`/identifiers/${props.index}/value`)),
-            descriptionError: computed(() => getMyErrors(`/identifiers/${props.index}/description`)),
+            descriptionError: computed(() =>
+                getMyErrors(`/identifiers/${props.index}/description`)
+            ),
             identifierErrors: computed(() => identifierErrors(props.index))
         }
     },
-    emits: ['closePressed', 'removePressed', 'updateType', 'updateValue', 'updateDescription', 'moveUp', 'moveDown']
+    emits: [
+        'closePressed',
+        'removePressed',
+        'updateType',
+        'updateValue',
+        'updateDescription',
+        'moveUp',
+        'moveDown'
+    ]
 })
 </script>
+<style scoped>
+.row {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+}
+</style>