Skip to content
This repository was archived by the owner on Nov 23, 2022. It is now read-only.

Commit d6369f1

Browse files
DerMollyDerMolly
committed
finished the GUI Metadata
Signed-off-by: Philip Molares <[email protected]>
1 parent 2a63a01 commit d6369f1

File tree

6 files changed

+73
-45
lines changed

6 files changed

+73
-45
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
"i18next": "19.8.4",
5959
"i18next-browser-languagedetector": "6.0.1",
6060
"i18next-http-backend": "1.0.22",
61+
"iso-639-1": "^2.1.7",
6162
"js-yaml": "4.0.0",
6263
"katex": "0.12.0",
6364
"luxon": "1.25.0",

‎public/locales/en.json

+13-1
Original file line numberDiff line numberDiff line change
@@ -348,7 +348,19 @@
348348
"revisions": "<0></0> revisions are saved"
349349
},
350350
"metadataEditor": {
351-
"title": "Metadata"
351+
"title": "Edit Metadata",
352+
"labels": {
353+
"title": "Title",
354+
"type": "Document type",
355+
"description": "Description",
356+
"tags": "Tags",
357+
"lang": "Language",
358+
"dir": "Text direction",
359+
"breaks": "Breaks",
360+
"robots": "Robots",
361+
"GA": "Google Analytics",
362+
"disqus": "Disqus"
363+
}
352364
},
353365
"gistImport": {
354366
"title": "Import from Gist",

‎src/components/editor/document-bar/metadata-editor/datalist-metadata-input.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,9 @@
55
*/
66

77
import React, { Fragment, useCallback } from 'react'
8-
import { iso6391 } from '../../yaml-metadata/yaml-metadata'
98
import { MetadataInputFieldProps, SelectMetadataOptions } from './metadata-editor'
109

11-
export const DatalistMetadataInput: React.FC<MetadataInputFieldProps<string> & SelectMetadataOptions<iso6391>> = ({ id, content, onContentChange, options }) => {
10+
export const DatalistMetadataInput: React.FC<MetadataInputFieldProps<string> & SelectMetadataOptions<string>> = ({ id, content, onContentChange, options }) => {
1211
const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
1312
onContentChange(event.currentTarget.value)
1413
}, [onContentChange])
@@ -17,7 +16,7 @@ export const DatalistMetadataInput: React.FC<MetadataInputFieldProps<string> & S
1716
<Fragment>
1817
<input list={id} onChange={onChange} value={content}/>
1918
<datalist id={id}>
20-
{options.map((option: iso6391) => {
19+
{options.map(option => {
2120
return (
2221
<option value={option}>
2322
{option}

‎src/components/editor/document-bar/metadata-editor/metadata-editor.tsx

+48-35
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,19 @@
44
* SPDX-License-Identifier: AGPL-3.0-only
55
*/
66

7+
import ISO from 'iso-639-1'
78
import React, { useState } from 'react'
8-
import { Modal } from 'react-bootstrap'
9+
import { Modal, Row } from 'react-bootstrap'
10+
import { useTranslation } from 'react-i18next'
911
import { CommonModal } from '../../../common/modals/common-modal'
10-
import { TextDirection, YAMLMetaData } from '../../yaml-metadata/yaml-metadata'
12+
import { supportedDocumentTypes, TextDirection, YAMLMetaData } from '../../yaml-metadata/yaml-metadata'
1113
import { BooleanMetadataInput } from './boolean-metadata-input'
12-
import { InputLabel } from './input-label'
1314
import { DatalistMetadataInput } from './datalist-metadata-input'
14-
import { TextDirectionMetadataInput } from './text-direction-metadata-input'
15+
import { InputLabel } from './input-label'
1516
import { StringMetadataInput } from './string-metadata-input'
1617
import { StringMetadataTextarea } from './string-metadata-textarea'
1718
import { TagsMetadataInput } from './tags-metadata-input'
19+
import { TextDirectionMetadataInput } from './text-direction-metadata-input'
1820

1921
export interface MetadataEditorProps {
2022
show: boolean,
@@ -32,6 +34,7 @@ export interface SelectMetadataOptions<T> {
3234
}
3335

3436
export const MetadataEditor: React.FC<MetadataEditorProps> = ({ show, onHide }) => {
37+
const { t } = useTranslation();
3538
const [yamlMetadata, setYamlMetadata] = useState<Omit<YAMLMetaData, 'opengraph'>>({
3639
title: "Test Title",
3740
description: "Test Description\nwith two lines",
@@ -48,42 +51,52 @@ export const MetadataEditor: React.FC<MetadataEditorProps> = ({ show, onHide })
4851

4952
return (
5053
<CommonModal
54+
size='xl'
5155
show={show}
5256
onHide={onHide}
5357
closeButton={true}
5458
titleI18nKey={'editor.modal.metadataEditor.title'}>
5559
<Modal.Body>
56-
<InputLabel id={'title'} label={"title"}>
57-
<StringMetadataInput id={'title'} content={yamlMetadata.title} onContentChange={title => setYamlMetadata({...yamlMetadata, title})}/>
58-
</InputLabel>
59-
<InputLabel id={'description'} label={"description"}>
60-
<StringMetadataTextarea id={'description'} content={yamlMetadata.description} onContentChange={description => setYamlMetadata({...yamlMetadata, description})}/>
61-
</InputLabel>
62-
<InputLabel id={'tags'} label={"tags"}>
63-
<TagsMetadataInput id={'tags'} content={yamlMetadata.tags} onContentChange={tags => setYamlMetadata({...yamlMetadata, tags})}/>
64-
</InputLabel>
65-
<InputLabel id={'robots'} label={"robots"}>
66-
<StringMetadataInput id={'robots'} content={yamlMetadata.robots} onContentChange={robots => setYamlMetadata({...yamlMetadata, robots})}/>
67-
</InputLabel>
68-
<InputLabel id={'lang'} label={"lang"}>
69-
<DatalistMetadataInput id={'lang'} options={['aa', 'ab', 'af', 'de-at']} content={yamlMetadata.lang} onContentChange={lang => setYamlMetadata({...yamlMetadata, lang})}/>
70-
</InputLabel>
71-
<InputLabel id={'dir'} label={"dir"}>
72-
<TextDirectionMetadataInput
73-
id={'dir'}
74-
content={yamlMetadata.dir}
75-
onContentChange={dir => setYamlMetadata({...yamlMetadata, dir })}
76-
/>
77-
</InputLabel>
78-
<InputLabel id={'breaks'} label={"breaks"}>
79-
<BooleanMetadataInput id={'breaks'} label={"breaks"} content={yamlMetadata.breaks} onContentChange={breaks => setYamlMetadata({...yamlMetadata, breaks})}/>
80-
</InputLabel>
81-
<InputLabel id={'GA'} label={"GA"}>
82-
<StringMetadataInput id={'GA'} content={yamlMetadata.GA} onContentChange={GA => setYamlMetadata({...yamlMetadata, GA})}/>
83-
</InputLabel>
84-
<InputLabel id={'disqus'} label={"disqus"}>
85-
<StringMetadataInput id={'disqus'} content={yamlMetadata.disqus} onContentChange={disqus => setYamlMetadata({...yamlMetadata, disqus})}/>
86-
</InputLabel>
60+
<Row>
61+
<div className='col-6'>
62+
<InputLabel id={'title'} label={t('editor.modal.metadataEditor.labels.title')}>
63+
<StringMetadataInput id={'title'} content={yamlMetadata.title} onContentChange={title => setYamlMetadata({...yamlMetadata, title})}/>
64+
</InputLabel>
65+
<InputLabel id={'type'} label={t('editor.modal.metadataEditor.labels.type')}>
66+
<DatalistMetadataInput id={'type'} options={supportedDocumentTypes} content={yamlMetadata.type} onContentChange={type => setYamlMetadata({...yamlMetadata, type})}/>
67+
</InputLabel>
68+
<InputLabel id={'description'} label={t('editor.modal.metadataEditor.labels.description')}>
69+
<StringMetadataTextarea id={'description'} content={yamlMetadata.description} onContentChange={description => setYamlMetadata({...yamlMetadata, description})}/>
70+
</InputLabel>
71+
<InputLabel id={'tags'} label={t('editor.modal.metadataEditor.labels.tags')}>
72+
<TagsMetadataInput id={'tags'} content={yamlMetadata.tags} onContentChange={tags => setYamlMetadata({...yamlMetadata, tags})}/>
73+
</InputLabel>
74+
<InputLabel id={'lang'} label={t('editor.modal.metadataEditor.labels.lang')}>
75+
<DatalistMetadataInput id={'lang'} options={ISO.getAllCodes()} content={yamlMetadata.lang} onContentChange={lang => setYamlMetadata({...yamlMetadata, lang})}/>
76+
</InputLabel>
77+
</div>
78+
<div className='col-6'>
79+
<InputLabel id={'dir'} label={t('editor.modal.metadataEditor.labels.dir')}>
80+
<TextDirectionMetadataInput
81+
id={'dir'}
82+
content={yamlMetadata.dir}
83+
onContentChange={dir => setYamlMetadata({...yamlMetadata, dir })}
84+
/>
85+
</InputLabel>
86+
<InputLabel id={'breaks'} label={t('editor.modal.metadataEditor.labels.breaks')}>
87+
<BooleanMetadataInput id={'breaks'} label={t('editor.modal.metadataEditor.labels.breaks')} content={yamlMetadata.breaks} onContentChange={breaks => setYamlMetadata({...yamlMetadata, breaks})}/>
88+
</InputLabel>
89+
<InputLabel id={'robots'} label={t('editor.modal.metadataEditor.labels.robots')}>
90+
<StringMetadataInput id={'robots'} content={yamlMetadata.robots} onContentChange={robots => setYamlMetadata({...yamlMetadata, robots})}/>
91+
</InputLabel>
92+
<InputLabel id={'GA'} label={t('editor.modal.metadataEditor.labels.GA')}>
93+
<StringMetadataInput id={'GA'} content={yamlMetadata.GA} onContentChange={GA => setYamlMetadata({...yamlMetadata, GA})}/>
94+
</InputLabel>
95+
<InputLabel id={'disqus'} label={t('editor.modal.metadataEditor.labels.disqus')}>
96+
<StringMetadataInput id={'disqus'} content={yamlMetadata.disqus} onContentChange={disqus => setYamlMetadata({...yamlMetadata, disqus})}/>
97+
</InputLabel>
98+
</div>
99+
</Row>
87100
</Modal.Body>
88101
</CommonModal>
89102
)

‎src/components/editor/yaml-metadata/yaml-metadata.ts

+4-6
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,13 @@
44
* SPDX-License-Identifier: AGPL-3.0-only
55
*/
66

7-
// import { RevealOptions } from 'reveal.js'
8-
9-
export type iso6391 = 'aa' | 'ab' | 'af' | 'am' | 'ar' | 'ar-ae' | 'ar-bh' | 'ar-dz' | 'ar-eg' | 'ar-iq' | 'ar-jo' | 'ar-kw' | 'ar-lb' | 'ar-ly' | 'ar-ma' | 'ar-om' | 'ar-qa' | 'ar-sa' | 'ar-sy' | 'ar-tn' | 'ar-ye' | 'as' | 'ay' | 'de-at' | 'de-ch' | 'de-li' | 'de-lu' | 'div' | 'dz' | 'el' | 'en' | 'en-au' | 'en-bz' | 'en-ca' | 'en-gb' | 'en-ie' | 'en-jm' | 'en-nz' | 'en-ph' | 'en-tt' | 'en-us' | 'en-za' | 'en-zw' | 'eo' | 'es' | 'es-ar' | 'es-bo' | 'es-cl' | 'es-co' | 'es-cr' | 'es-do' | 'es-ec' | 'es-es' | 'es-gt' | 'es-hn' | 'es-mx' | 'es-ni' | 'es-pa' | 'es-pe' | 'es-pr' | 'es-py' | 'es-sv' | 'es-us' | 'es-uy' | 'es-ve' | 'et' | 'eu' | 'fa' | 'fi' | 'fj' | 'fo' | 'fr' | 'fr-be' | 'fr-ca' | 'fr-ch' | 'fr-lu' | 'fr-mc' | 'fy' | 'ga' | 'gd' | 'gl' | 'gn' | 'gu' | 'ha' | 'he' | 'hi' | 'hr' | 'hu' | 'hy' | 'ia' | 'id' | 'ie' | 'ik' | 'in' | 'is' | 'it' | 'it-ch' | 'iw' | 'ja' | 'ji' | 'jw' | 'ka' | 'kk' | 'kl' | 'km' | 'kn' | 'ko' | 'kok' | 'ks' | 'ku' | 'ky' | 'kz' | 'la' | 'ln' | 'lo' | 'ls' | 'lt' | 'lv' | 'mg' | 'mi' | 'mk' | 'ml' | 'mn' | 'mo' | 'mr' | 'ms' | 'mt' | 'my' | 'na' | 'nb-no' | 'ne' | 'nl' | 'nl-be' | 'nn-no' | 'no' | 'oc' | 'om' | 'or' | 'pa' | 'pl' | 'ps' | 'pt' | 'pt-br' | 'qu' | 'rm' | 'rn' | 'ro' | 'ro-md' | 'ru' | 'ru-md' | 'rw' | 'sa' | 'sb' | 'sd' | 'sg' | 'sh' | 'si' | 'sk' | 'sl' | 'sm' | 'sn' | 'so' | 'sq' | 'sr' | 'ss' | 'st' | 'su' | 'sv' | 'sv-fi' | 'sw' | 'sx' | 'syr' | 'ta' | 'te' | 'tg' | 'th' | 'ti' | 'tk' | 'tl' | 'tn' | 'to' | 'tr' | 'ts' | 'tt' | 'tw' | 'uk' | 'ur' | 'us' | 'uz' | 'vi' | 'vo' | 'wo' | 'xh' | 'yi' | 'yo' | 'zh' | 'zh-cn' | 'zh-hk' | 'zh-mo' | 'zh-sg' | 'zh-tw' | 'zu'
10-
117
export enum TextDirection {
128
LTR = 'ltr',
139
RTL = 'rtl'
1410
}
1511

12+
export const supportedDocumentTypes = ['slide', '']
13+
1614
export interface RawYAMLMetadata {
1715
title: string | undefined
1816
description: string | undefined
@@ -39,7 +37,7 @@ export class YAMLMetaData {
3937
breaks: boolean
4038
GA: string
4139
disqus: string
42-
type: 'slide' | ''
40+
type: string
4341
// slideOptions: RevealOptions
4442
opengraph: Map<string, string>
4543

@@ -52,7 +50,7 @@ export class YAMLMetaData {
5250
this.disqus = rawData?.disqus ?? ''
5351

5452
this.type = (rawData?.type as YAMLMetaData['type']) ?? ''
55-
this.lang = (rawData?.lang as iso6391) ?? 'en'
53+
this.lang = rawData?.lang ?? 'en'
5654
this.dir = (rawData?.dir as YAMLMetaData['dir']) ?? 'ltr'
5755

5856
/* this.slideOptions = (rawData?.slideOptions as RevealOptions) ?? {

‎yarn.lock

+5
Original file line numberDiff line numberDiff line change
@@ -8356,6 +8356,11 @@ isexe@^2.0.0:
83568356
resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
83578357
integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
83588358

8359+
iso-639-1@^2.1.7:
8360+
version "2.1.7"
8361+
resolved "https://registry.yarnpkg.com/iso-639-1/-/iso-639-1-2.1.7.tgz#9e46207148c9b0ddc6f9fe36ce3f60c8db017134"
8362+
integrity sha512-vPBh9Exxv0c430dRYiKtRt6TgErlsKy22Nkz473HFkzRkWTZeM7RLfX2raDoD7g74kA7HB4S2giwu6ZwiisQtg==
8363+
83598364
isobject@^2.0.0:
83608365
version "2.1.0"
83618366
resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"

0 commit comments

Comments
 (0)