@fullstackunicorn/create-root 1.0.23 → 1.0.24

package/assets/root.fullstackunicorn.dev/frontend/{panels → modules}/cards/Linker.pod.js

@@ -1,13 +1,13 @@
-import { useStyle } from '#@/style/@use'
-import { Link } from '#@/modules/core/Link'
-import { View } from '#@/imports/core/View'
-import { Icon } from '#@/modules/core/Icon'
-import { Textline } from '#@/imports/core/Text'
-import { Text } from '#@/imports/core/Text'
+import { useStyle } from '#@/style/@use.js'
+import { Link } from '#@/modules/core/Link.js'
+import { View } from '#@/imports/core/View.js'
+import { Icon } from '#@/modules/core/Icon.js'
+import { Textline, Text } from '#@/imports/core/Text.js'
 
-export const LinkerPod = ({ 
-    svg, title, description, label, 
-    isHover, setIsHover, onPress, linkTo }) => {
+export const LinkerPod = ({
+    svg, title, description, label,
+    isHover, onPress, linkTo,
+}) => {
 
     const { s, c, f, t, F, B, S, I, H } = useStyle()
 
@@ -20,7 +20,6 @@ export const LinkerPod = ({
     S.pressable = [...t.root.cards.pressable, B.hover]
     S.icon = t.root.cards.icon
     S.label = t.root.cards.label
-    S.slider = t.root.cards.slider
 
     return (
         <View classes={S.box}>
@@ -28,11 +27,11 @@ export const LinkerPod = ({
                 <Textline classes={S.title} font={f.f1} text={title} />
                 <Text classes={S.description} font={f.f1} text={description} />
             </View>
-            <Link classes={S.pressable} linkTo={linkTo} onPress={onPress} setIsHover={setIsHover}>
+            <Link classes={S.pressable} linkTo={linkTo} onPress={onPress}>
                 <Icon classes={S.icon} svg={svg.logo} />
                 <Textline classes={S.label} font={f.f1} text={label} />
                 <Icon classes={S.icon} svg={svg.action} />
             </Link>
         </View>
     )
-}
+}

package/assets/root.fullstackunicorn.dev/frontend/{panels → modules}/cards/Slider.js

@@ -1,14 +1,15 @@
 import { useState } from 'react'
-import { SliderPod } from './Slider.pod.js'
+import { SliderPod } from '#@/modules/cards/Slider.pod.js'
 
-export const Slider = ({ 
-    svg, title, description, label, 
-    isTrue, setIsTrue }) => {
+export const Slider = ({
+    svg, title, description, label,
+    isTrue, setIsTrue,
+}) => {
 
-    const [isHover, setIsHover ] = useState(false)
+    const [isHover, setIsHover] = useState(false)
 
     return (
-        <SliderPod 
+        <SliderPod
             isTrue={isTrue}
             setIsTrue={setIsTrue}
             svg={svg}
@@ -19,4 +20,4 @@ export const Slider = ({
             setIsHover={setIsHover}
         />
     )
-}
+}

package/assets/root.fullstackunicorn.dev/frontend/{panels → modules}/cards/Slider.pod.js

@@ -1,19 +1,19 @@
-import { useStyle } from '#@/style/@use'
-import { Slider } from '#@/modules/core/Slider'
-import { Icon } from '#@/modules/core/Icon'
-import { View } from '#@/imports/core/View'
-import { Text } from '#@/imports/core/Text'
-import { Textline } from '#@/imports/core/Text'
-import { Pressable } from '#@/imports/core/Pressable'
+import { useStyle } from '#@/style/@use.js'
+import { Slider } from '#@/modules/core/Slider.js'
+import { Icon } from '#@/modules/core/Icon.js'
+import { View } from '#@/imports/core/View.js'
+import { Text, Textline } from '#@/imports/core/Text.js'
+import { Pressable } from '#@/imports/core/Pressable.js'
 
-export const SliderPod = ({ 
-    svg, title, description, label, 
-    isHover, setIsHover, isTrue, setIsTrue }) => {
+export const SliderPod = ({
+    svg, title, description, label,
+    isHover, setIsHover, isTrue, setIsTrue,
+}) => {
 
     const { s, c, f, t, F, B, S, I, H } = useStyle()
-    
+
     B.hover = isHover ? [c.base_C1_W600] : [c.base_NN_W650]
-    
+
     S.box = t.root.cards.box
     S.top = t.root.cards.top
     S.title = t.root.cards.title
@@ -22,7 +22,7 @@ export const SliderPod = ({
     S.icon = t.root.cards.icon
     S.label = t.root.cards.label
     S.slider = t.root.cards.slider
-    
+
     return (
         <View classes={S.box}>
             <View classes={S.top}>
@@ -36,4 +36,4 @@ export const SliderPod = ({
             </Pressable>
         </View>
     )
-}
+}

package/assets/root.fullstackunicorn.dev/frontend/{panels/wrapper/fixed → modules/layout}/Wrapper.js

@@ -1,5 +1,5 @@
 import { useGetWidth } from '#@/base/layout/@use.js'
-import { WrapperPod } from '#@/panels/wrapper/fixed/Wrapper.pod.js'
+import { WrapperPod } from '#@/modules/layout/Wrapper.pod.js'
 
 export const Wrapper = ({ settings, children }) => {
 
@@ -22,4 +22,4 @@ export const Wrapper = ({ settings, children }) => {
             {children}
         </WrapperPod>
     )
-}
+}

package/assets/root.fullstackunicorn.dev/frontend/{panels/wrapper/fixed → modules/layout}/Wrapper.pod.js

@@ -20,4 +20,4 @@ export const WrapperPod = ({ paddingX, children }) => {
             </View>
         </View>
     )
-}
+}

package/assets/root.fullstackunicorn.dev/frontend/{panels/selectors/actions → modules/modals/select}/Actions.js

@@ -1,6 +1,6 @@
 import { useGetStatics } from '#@/base/statics/@use.js'
 import { TextButton } from '#@/modules/buttons/TextButton.js'
-import { SelectPicked } from '#@/panels/selectors/actions/SelectPicked.js'
+import { SelectPicked } from '#@/modules/modals/select/SelectPicked.js'
 import { ActionsPod } from './Actions.pod.js'
 
 export const Actions = ({ selected, onSave, onRestore, isDisabled, compact = false }) => {

package/assets/root.fullstackunicorn.dev/frontend/{panels/selectors → modules/modals}/select/SelectPage.js

@@ -1,4 +1,4 @@
-import { SelectItem } from '#@/panels/selectors/select/SelectItem'
+import { SelectItem } from '#@/modules/modals/select/SelectItem.js'
 import { SelectPagePod } from './SelectPage.pod.js'
 
 export const SelectPage = ({ itemLogic, itemVerbal, itemVisual, selected, setValue }) => {
@@ -30,4 +30,4 @@ export const SelectPage = ({ itemLogic, itemVerbal, itemVisual, selected, setVal
             {/* <InputText value={value}/> */}
         </SelectPagePod>
     )
-} 
+} 

package/assets/root.fullstackunicorn.dev/frontend/{panels/sliders → modules/modals}/slider/SliderPage.js

@@ -1,4 +1,4 @@
-import { SliderItem } from '#@/panels/sliders/slider/SliderItem'
+import { SliderItem } from '#@/modules/modals/slider/SliderItem.js'
 import { SliderPagePod } from './SliderPage.pod.js'
 
 export const SliderPage = ({ formResult, sliderLogic, sliderVerbal, sliderVisual, description }) => {
@@ -34,4 +34,4 @@ export const SliderPage = ({ formResult, sliderLogic, sliderVerbal, sliderVisual
             mapper={mapper}
         />
     )
-}
+}

package/assets/root.fullstackunicorn.dev/frontend/{panels → modules}/page/PageScrollable.js

@@ -1,5 +1,5 @@
 import { usePersistentScroll } from '#@/imports/scroll/@use.js'
-import { PageScrollablePod } from './PageScrollable.pod.js'
+import { PageScrollablePod } from '#@/modules/page/PageScrollable.pod.js'
 
 export const PageScrollable = ({ type = 'fixed', children }) => {
 

package/assets/root.fullstackunicorn.dev/frontend/modules/page/PageScrollable.pod.js

@@ -0,0 +1,23 @@
+import { useStyle } from '#@/style/@use.js'
+import { Scrollable } from '#@/imports/core/Scrollable.js'
+import { Fader } from '#@/imports/animated/Fader.js'
+
+export const PageScrollablePod = ({ children, type, scrollRef, onScroll }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.scrollable = [s.col_cX, s.XYc]
+
+    return (
+        <Scrollable
+            classes={S.scrollable}
+            isPage
+            scrollRef={scrollRef}
+            onScroll={onScroll}
+        >
+            <Fader classes={t.page[type]}>
+                {children}
+            </Fader>
+        </Scrollable>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/modules/prose/@runs.js

@@ -0,0 +1,52 @@
+import { formatter } from '#@/modules/prose/@formatter.js'
+
+class Runs {
+
+    build = ({ tokens = [], spans = [], lookup = {} }) => {
+        return spans.map(span => {
+            const sliced = tokens.slice(span.start, span.end + 1)
+            return {
+                style: F3.obj.safe(span.style),
+                runs: this.merge(sliced, lookup)
+            }
+        })
+    }
+
+    merge = (tokens = [], lookup = {}) => {
+        const result = []
+        let text = ''
+
+        const flushText = () => {
+            if (!text) return
+            result.push({ render: 'text', text })
+            text = ''
+        }
+
+        for (const token of tokens) {
+            const value = token?.[0] || ''
+            const rendered = formatter.render(value, lookup)
+
+            if (F3.str.isGood(rendered)) {
+                text += rendered
+                continue
+            }
+
+            const data = F3.obj.safe(rendered)
+            const render = data.render || 'text'
+
+            if (render === 'text' || render === 'phrase') {
+                text += data.text || ''
+                continue
+            }
+
+            flushText()
+            result.push(data)
+        }
+
+        flushText()
+
+        return result
+    }
+}
+
+export const runs = new Runs()

package/assets/root.fullstackunicorn.dev/frontend/modules/prose/Prose.js

@@ -0,0 +1,56 @@
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { formatter } from '#@/modules/prose/@formatter.js'
+import { runs } from '#@/modules/prose/@runs.js'
+import { Url, Link } from '#@/modules/prose/Basic.js'
+import { ProsePod, StylePod, TokenCodePod } from './Prose.pod.js'
+
+export const Style = ({ block = 'p', style = {}, runs = [] }) => {
+    const content = runs.map((run, index) => {
+        if (run.render === 'url') return <Url key={index} {...run} />
+        if (run.render === 'link') return <Link key={index} {...run} />
+        if (run.render === 'code') return <TokenCodePod key={index} text={run.code} />
+        return run.text || ''
+    })
+
+    return (
+        <StylePod
+            block={block}
+            style={style}
+            tokens={content}
+        />
+    )
+}
+
+export const Styles = ({ block = 'p', styles = [] }) => {
+    return styles.map((item, index) => {
+        return (
+            <Style
+                key={index}
+                block={block}
+                style={item.style}
+                runs={item.runs}
+            />
+        )
+    })
+}
+
+export const Prose = ({ lang = {} }) => {
+
+    const statics = useGetStatics()
+    const lookup = { logic: statics.logic.lookup, verbal: statics.verbal.lookup }
+
+    const attributes = F3.obj.safe(lang.attributes)
+    const style = F3.obj.safe(lang.style || attributes.style)
+    const spansRaw = F3.arr.safe(lang.spans || attributes.spans)
+
+    const tokens = formatter.tokenize(lang.value)
+    const spans = formatter.spans(tokens, spansRaw)
+    const styles = runs.build({ tokens, spans, lookup })
+
+    return (
+        <ProsePod
+            style={style}
+            styles={<Styles block={style.block} styles={styles} />}
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/{panels → modules}/prose/Prose.pod.js

@@ -1,21 +1,9 @@
 import { useStyle } from '#@/style/@use'
-import { formatter } from '#@/panels/prose/@formatter'
-import { TextFont, TextSpan, TextClick } from '#@/imports/core/Text'
+import { formatter } from '#@/modules/prose/@formatter.js'
+import { TextFont, TextSpan } from '#@/imports/core/Text'
 import { View } from '#@/imports/core/View'
 import { Bulleted } from '#@/modules/core/Bulleted.js'
 
-export const SpanPod = ({ text }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    return <TextSpan text={text} font={f.f1} />
-}
-
-export const TokenPod = ({ onPress, children }) => {
-    if (!onPress) return children
-    return <TextClick onPress={onPress}>{children}</TextClick>
-}
-
 export const TokenCodePod = ({ text }) => {
 
     const { s, c, f, t, F, B, S, I, H } = useStyle()

package/assets/root.fullstackunicorn.dev/frontend/pages/@use.js

@@ -1,6 +1,8 @@
 import { useState, useEffect } from 'react'
 import { atom, useAtom, useSetAtom, useGetAtom } from '#@/imports/npm'
 import { useUrl } from '#@/base/router/@use.js'
+import { abs } from '#@/abstracts/abs.js'
+import { useGetResource, useSetResource } from '#@/base/resources/@use.js'
 // import { service } from '#@/imports/service.js'
 
 export const meta = atom({})
@@ -9,25 +11,38 @@ export const useMeta = () => useAtom(meta)
 export const useSetMeta = () => useSetAtom(meta)
 export const useGetMeta = () => useGetAtom(meta)
 
-export const useApi = (func, ctx) => {
+export const useApi = (fetch, parse, uriTemplate, ctx) => {
     const { lang, path } = useUrl()
-    const [result, setResult] = useState()
+    const key = abs.makeKey(F3.fabUrl(uriTemplate, { lang, path }), 'get')
+    const cached = useGetResource(key)
+    const setResource = useSetResource()
     const setMeta = useSetMeta()
+
     useEffect(() => {
+        if (cached.data) {
+            const preloaded = parse(cached.data)
+            if (preloaded?.meta) setMeta(preloaded.meta)
+        }
         const load = async () => {
             try {
-                const response = await func({ lang, path }, ctx)
-                if (response?.meta) setMeta(response.meta)
-                setResult(response?.data)
+                const raw = await fetch({ lang, path }, ctx)
+                if (!raw) return
+                setResource({ key, data: raw })
+                const result = parse(raw)
+                if (result?.meta) setMeta(result.meta)
             } catch (error) {
-                console.error('api-request-failed', {lang,path,ctx,error})
-                setResult({isError:true})
+                console.error('api-resource-failed', { lang, path, error })
             }
         }
         load()
-        return () => setResult(undefined)
     }, [lang, path])
-    return result
+
+    const parsed = cached.data ? parse(cached.data) : undefined
+    if (!parsed) return undefined
+    return {
+        data: parsed.data,
+        heading: parsed.heading
+    }
 }
 
 export const useLoad = (func, lang, path, ctx) => {
@@ -40,8 +55,8 @@ export const useLoad = (func, lang, path, ctx) => {
                 if (response?.meta) setMeta(response.meta)
                 setResult(response?.data)
             } catch (error) {
-                console.error('load-request-failed', {lang,path,ctx,error})
-                setResult({isError:true})
+                console.error('load-request-failed', { lang, path, ctx, error })
+                setResult({ isError: true })
             }
         }
         load()

package/assets/root.fullstackunicorn.dev/frontend/pages/root/Callout.api.js

@@ -1,31 +1,15 @@
 import { uri } from '#@/App.uri.js'
 import { api } from '#@/client/@api.js'
-import { useUrl } from '#@/base/router/@use.js'
-import { useLoad } from '#@/pages/@use.js'
+import { useApi } from '#@/pages/@use.js'
 
-// #1 define the routeId
-const routeId = 'callout'
+const fetch = async params => await api.statics.get(uri.data.content.verbal, params)
 
-// #2 define fetch for preload and api
-const dataFetch = async params => {
-    const verbal = await api.statics.get(uri.data.content.verbal, params)
-    const meta = verbal['@meta']
-    const data = verbal['@data']
-    return { data, meta }
+const parse = raw => {
+    if (!raw) return undefined
+    const data = raw['@data']
+    const meta = raw['@meta']
+    const heading = raw['@head'].heading
+    return { meta, data, heading }
 }
 
-// #3 define usePreload hook //@NOTE: as key uri pick one of the 2 paths
-export const usePreloadCallout = () => {
-    const { lang } = useUrl()
-    const path = routeId
-    const result = F3.fabUrl(uri.data.content.verbal, {lang, path}) 
-    return result
-}
-
-// #4 define useApi hook
-export const useApiCallout = () => {
-    const { lang } = useUrl()
-    const path = 'callout'
-    const result = useLoad(dataFetch, lang, path)
-    return result
-}
+export const useApiCallout = () => useApi(fetch, parse, uri.data.content.verbal)

package/assets/root.fullstackunicorn.dev/frontend/pages/root/Callout.js

@@ -1,4 +1,4 @@
-import { PageScrollable } from '#@/panels/page/PageScrollable.js'
+import { PageScrollable } from '#@/modules/page/PageScrollable.js'
 import { useApiCallout } from '#@/pages/root/Callout.api.js'
 
 export const Callout = () => {    

package/assets/root.fullstackunicorn.dev/frontend/pages/root/Legal.api.js

@@ -1,35 +1,27 @@
 import { uri } from '#@/App.uri.js'
 import { api } from '#@/client/@api.js'
-import { useUrl } from '#@/base/router/@use.js'
-import { useLoad } from '#@/pages/@use.js'
+import { useApi } from '#@/pages/@use.js'
 
-// #1 define the routeId
-const routeId = 'legals'
-
-// #2 define fetch for preload and api
-const dataFetch = async params => {
+const fetch = async params => {
     const logic = await api.statics.get(uri.data.legals.logic, params)
     const verbal = await api.statics.get(uri.data.legals.verbal, params)
-    const meta = verbal['@meta']
+    return { verbal, logic }
+}
+
+const parse = raw => {
+    if (!raw) return undefined
+    const verbal = raw?.verbal
+    const logic = raw?.logic
+    if (!F3.obj.isGood(verbal)) return undefined
+    if (!F3.obj.isGood(logic)) return undefined
     const data = {}
     data.arr = verbal['@data'].arr
     data.obj = verbal['@data'].obj
     data.langs = logic['@langs']
-    data.versions = logic.versions || []
-    return { data, meta }
-}
-
-// #3 define usePreload hook //@NOTE: as key uri pick one of the 2 paths
-export const usePreloadLegal = list => {
-    const { lang } = useUrl()
-    const path = routeId
-    const result = F3.fabUrl(uri.data.legals.verbal, {lang, path}) 
-    return result
+    data.versions = logic.versions
+    const meta = verbal['@meta']
+    const heading = verbal['@head'].heading
+    return { meta, data, heading }
 }
 
-// #4 define useApi hook
-export const useApiLegal = () => {
-    const { lang, path } = useUrl()
-    const result = useLoad(dataFetch, lang, path)
-    return result
-}
+export const useApiLegal = () => useApi(fetch, parse, uri.data.legals.verbal)

package/assets/root.fullstackunicorn.dev/frontend/pages/root/Legal.js

@@ -1,4 +1,4 @@
-import { PageScrollable } from '#@/panels/page/PageScrollable.js'
+import { PageScrollable } from '#@/modules/page/PageScrollable.js'
 import { Legal as LegalFeature } from '#@/features/legal/Legal.js'
 import { useApiLegal } from '#@/pages/root/Legal.api.js'
 
@@ -9,7 +9,7 @@ export const Legal = () => {
     if (!api) return null
     return (
         <PageScrollable type='docs' isScroll>
-            <LegalFeature api={api}/>
+            <LegalFeature api={api.data}/>
         </PageScrollable>
     )
 }

package/assets/root.fullstackunicorn.dev/frontend/pages/root/Legals.api.js

@@ -1,19 +1,25 @@
 import { uri } from '#@/App.uri.js'
 import { api } from '#@/client/@api.js'
 import { useApi } from '#@/pages/@use.js'
- 
-const dataFetch = async params => {
 
+const fetch = async params => {
     const verbal = await api.statics.get(uri.data.legals.verbal, params)
     const logic = await api.statics.get(uri.data.legals.logic, params)
+    return { verbal, logic }
+}
 
-    const meta = verbal['@meta']
+const parse = raw => {
+    if (!raw) return undefined
+    const verbal = raw?.verbal
+    const logic = raw?.logic
+    if (!F3.obj.isGood(verbal)) return undefined
+    if (!F3.obj.isGood(logic)) return undefined
     const data = {}
-    data.heading = verbal['@head'].heading
     data.list = logic['@data'].list
-    data.data = verbal['@data'].items
-
-    return { data, meta }
+    data.items = verbal['@data'].items
+    const meta = verbal['@meta']
+    const heading = verbal['@head'].heading
+    return { meta, data, heading }
 }
 
-export const useApiLegals = () => useApi(dataFetch)
+export const useApiLegals = () => useApi(fetch, parse, uri.data.legals.verbal)

package/assets/root.fullstackunicorn.dev/frontend/pages/root/Legals.js

@@ -1,5 +1,5 @@
 import { routes } from '#@/root/routes.js'
-import { PageScrollable } from '#@/panels/page/PageScrollable.js'
+import { PageScrollable } from '#@/modules/page/PageScrollable.js'
 import { useUrl } from '#@/base/router/@use.js'
 import { LegalCard } from '#@/base/legals/LegalCard.js'
 import { useApiLegals } from '#@/pages/root/Legals.api.js'
@@ -12,14 +12,14 @@ export const Legals = () => {
     if (!api) return null
     return (
         <PageScrollable type='fixed'>
-            {api.list.map((link, index) => {
+            {api.data.list.map((link, index) => {
                 const slug = link.split('/')[1]
                 return (
                     <LegalCard
                         key = {index}
-                        title={api.data[slug].title}
-                        description={api.data[slug].description}
-                        label={api.data[slug].label}
+                        title={api.data.items[slug].title}
+                        description={api.data.items[slug].description}
+                        label={api.data.items[slug].label}
                         linkTo={F3.fabUrl(routes.public.legal.path, { slug, lang })}
                     />
                 )

package/assets/root.fullstackunicorn.dev/frontend/pages/root/User.api.js

@@ -1,18 +1,15 @@
 import { uri } from '#@/App.uri.js'
 import { api } from '#@/client/@api.js'
 import { useApi } from '#@/pages/@use.js'
- 
-const dataFetch = async params => {
 
-    const verbal = await api.statics.get(uri.data.root.verbal, params)
-    // const logic = await api.statics.get(uri.data.content.logic, params)
+const fetch = async params => await api.statics.get(uri.data.root.verbal, params)
 
-    const meta = verbal['@meta']
-    const data = {}
-    data.heading = verbal['@head'].heading
-    data.data = verbal['@data']
-
-    return { data, meta }
+const parse = raw => {
+    if (!raw) return undefined
+    const data = raw['@data']
+    const meta = raw['@meta']
+    const heading = raw['@head'].heading
+    return { meta, data, heading }
 }
 
-export const useApiUser = () => useApi(dataFetch)
+export const useApiUser = () => useApi(fetch, parse, uri.data.root.verbal)

package/assets/root.fullstackunicorn.dev/frontend/pages/root/User.js

@@ -1,5 +1,5 @@
 import { constants } from '#@/root/constants.js'
-import { PageScrollable } from '#@/panels/page/PageScrollable.js'
+import { PageScrollable } from '#@/modules/page/PageScrollable.js'
 import { AccountCard } from '#@/base/account/AccountCard.js'
 import { LanguageCard } from '#@/base/language/LanguageCard.js'
 import { ThemeCard } from '#@/base/theme/ThemeCard.js'

package/assets/root.fullstackunicorn.dev/frontend/pages/{app → scope}/Checkout.js

@@ -1,5 +1,5 @@
 import { CheckoutCard } from '#@/base/checkout/CheckoutCard.js'
-import { PageScrollable } from '#@/panels/page/PageScrollable.js'
+import { PageScrollable } from '#@/modules/page/PageScrollable.js'
 
 export const Checkout = ({ isCancel }) => {
     return (

package/assets/root.fullstackunicorn.dev/frontend/pages/scope/Home.abs.js

@@ -0,0 +1,18 @@
+class Abs {
+
+    constructor() {
+        this.settings = {}
+        this.keys = {}
+        this.settings.slideshow = {}
+        this.settings.slideshow.aspectRatio = 1920/815
+        this.keys.slideshow = {}
+        this.keys.slideshow.picture = 'picture'
+        this.keys.slideshow.subhead = 'subhead'
+        this.keys.slideshow.title = 'title'
+        this.keys.slideshow.description = 'description'
+        this.keys.slideshow.href = 'href'
+    }
+
+}
+
+export const abs = new Abs()