调整样式

This commit is contained in:
liushuang 2024-08-07 23:12:22 +08:00
parent 2351f3e12d
commit 32f4c649ec
6 changed files with 223 additions and 121 deletions

@ -1,15 +1,15 @@
import React, {Component} from "react"; import React, { Component } from "react";
import {observer, inject} from "mobx-react"; import { observer, inject } from "mobx-react";
import {Input, Form} from "antd"; import { Input, Form } from "antd";
import {ALIOSS_IMAGE_HOSTING} from "../../utils/constant"; import { ALIOSS_IMAGE_HOSTING } from "../../utils/constant";
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
xs: {span: 6}, xs: { span: 6 }
}, },
wrapperCol: { wrapperCol: {
xs: {span: 16}, xs: { span: 16 }
}, }
}; };
@inject("imageHosting") @inject("imageHosting")
@ -20,56 +20,73 @@ class AliOSS extends Component {
// 从localstorage里面读取 // 从localstorage里面读取
const imageHosting = JSON.parse(localStorage.getItem(ALIOSS_IMAGE_HOSTING)); const imageHosting = JSON.parse(localStorage.getItem(ALIOSS_IMAGE_HOSTING));
this.state = { this.state = {
imageHosting, imageHosting
}; };
} }
regionChange = (e) => { regionChange = e => {
const {imageHosting} = this.state; const { imageHosting } = this.state;
imageHosting.region = e.target.value; imageHosting.region = e.target.value;
this.setState({imageHosting}); this.setState({ imageHosting });
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting)); localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
}; };
accessKeyIdChange = (e) => { accessKeyIdChange = e => {
const {imageHosting} = this.state; const { imageHosting } = this.state;
imageHosting.accessKeyId = e.target.value; imageHosting.accessKeyId = e.target.value;
this.setState({imageHosting}); this.setState({ imageHosting });
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting)); localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
}; };
accessKeySecretChange = (e) => { accessKeySecretChange = e => {
const {imageHosting} = this.state; const { imageHosting } = this.state;
imageHosting.accessKeySecret = e.target.value; imageHosting.accessKeySecret = e.target.value;
this.setState({imageHosting}); this.setState({ imageHosting });
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting)); localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
}; };
bucketChange = (e) => { bucketChange = e => {
const {imageHosting} = this.state; const { imageHosting } = this.state;
imageHosting.bucket = e.target.value; imageHosting.bucket = e.target.value;
this.setState({imageHosting}); this.setState({ imageHosting });
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting)); localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
}; };
render() { render() {
const {region, accessKeyId, accessKeySecret, bucket} = this.state.imageHosting; const {
region,
accessKeyId,
accessKeySecret,
bucket
} = this.state.imageHosting;
return ( return (
<Form {...formItemLayout}> <Form {...formItemLayout}>
<Form.Item label="Bucket" style={style.formItem}> <Form.Item label="Bucket" style={style.formItem}>
<Input value={bucket} onChange={this.bucketChange} placeholder="例如my-wechat" /> <Input
value={bucket}
onChange={this.bucketChange}
placeholder="例如images"
/>
</Form.Item> </Form.Item>
<Form.Item label="Region" style={style.formItem}> <Form.Item label="Region" style={style.formItem}>
<Input value={region} onChange={this.regionChange} placeholder="例如oss-cn-hangzhou" /> <Input
value={region}
onChange={this.regionChange}
placeholder="例如oss"
/>
</Form.Item> </Form.Item>
<Form.Item label="AccessKey ID" style={style.formItem}> <Form.Item label="AccessKey ID" style={style.formItem}>
<Input value={accessKeyId} onChange={this.accessKeyIdChange} placeholder="例如qweASDF1234zxcvb" /> <Input
value={accessKeyId}
onChange={this.accessKeyIdChange}
placeholder="例如2fsae2fasddfq34gi"
/>
</Form.Item> </Form.Item>
<Form.Item label="AccessKey Secret" style={style.formItem}> <Form.Item label="AccessKey Secret" style={style.formItem}>
<Input <Input
value={accessKeySecret} value={accessKeySecret}
onChange={this.accessKeySecretChange} onChange={this.accessKeySecretChange}
placeholder="例如:qweASDF1234zxcvbqweASD" placeholder="例如:we23df2ae2fdw423"
/> />
</Form.Item> </Form.Item>
<Form.Item label="提示" style={style.formItem}> <Form.Item label="提示" style={style.formItem}>
@ -77,7 +94,7 @@ class AliOSS extends Component {
<a <a
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
href="https://preview.mdnice.com/article/developer/aliyun-image-hosting/" href="https://doc.luckday.cn"
> >
阿里云图床配置文档 阿里云图床配置文档
</a> </a>
@ -89,8 +106,8 @@ class AliOSS extends Component {
const style = { const style = {
formItem: { formItem: {
marginBottom: "10px", marginBottom: "10px"
}, }
}; };
export default AliOSS; export default AliOSS;

@ -1,15 +1,15 @@
import React, {Component} from "react"; import React, { Component } from "react";
import {observer, inject} from "mobx-react"; import { observer, inject } from "mobx-react";
import {Input, Form, Checkbox} from "antd"; import { Input, Form, Checkbox } from "antd";
import {GITHUB_IMAGE_HOSTING} from "../../utils/constant"; import { GITHUB_IMAGE_HOSTING } from "../../utils/constant";
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
xs: {span: 6}, xs: { span: 6 }
}, },
wrapperCol: { wrapperCol: {
xs: {span: 16}, xs: { span: 16 }
}, }
}; };
@inject("imageHosting") @inject("imageHosting")
@ -20,54 +20,69 @@ class Gitee extends Component {
// 从localstorage里面读取 // 从localstorage里面读取
const imageHosting = JSON.parse(localStorage.getItem(GITHUB_IMAGE_HOSTING)); const imageHosting = JSON.parse(localStorage.getItem(GITHUB_IMAGE_HOSTING));
this.state = { this.state = {
imageHosting, imageHosting
}; };
} }
usernameChange = (e) => { usernameChange = e => {
const {imageHosting} = this.state; const { imageHosting } = this.state;
imageHosting.username = e.target.value; imageHosting.username = e.target.value;
this.setState({imageHosting}); this.setState({ imageHosting });
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting)); localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
}; };
repoChange = (e) => { repoChange = e => {
const {imageHosting} = this.state; const { imageHosting } = this.state;
imageHosting.repo = e.target.value; imageHosting.repo = e.target.value;
this.setState({imageHosting}); this.setState({ imageHosting });
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting)); localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
}; };
tokenChange = (e) => { tokenChange = e => {
const {imageHosting} = this.state; const { imageHosting } = this.state;
imageHosting.token = e.target.value; imageHosting.token = e.target.value;
this.setState({imageHosting}); this.setState({ imageHosting });
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting)); localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
}; };
jsdelivrChange = (e) => { jsdelivrChange = e => {
const {imageHosting} = this.state; const { imageHosting } = this.state;
imageHosting.jsdelivr = e.target.checked ? "true" : "false"; imageHosting.jsdelivr = e.target.checked ? "true" : "false";
console.log(imageHosting); console.log(imageHosting);
this.setState({imageHosting}); this.setState({ imageHosting });
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting)); localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
}; };
render() { render() {
const {username, repo, token, jsdelivr} = this.state.imageHosting; const { username, repo, token, jsdelivr } = this.state.imageHosting;
return ( return (
<Form {...formItemLayout}> <Form {...formItemLayout}>
<Form.Item label="用户名" style={style.formItem}> <Form.Item label="用户名" style={style.formItem}>
<Input value={username} onChange={this.usernameChange} placeholder="例如mdnice" /> <Input
value={username}
onChange={this.usernameChange}
placeholder="例如luckday"
/>
</Form.Item> </Form.Item>
<Form.Item label="仓库名" style={style.formItem}> <Form.Item label="仓库名" style={style.formItem}>
<Input value={repo} onChange={this.repoChange} placeholder="例如picture" /> <Input
value={repo}
onChange={this.repoChange}
placeholder="例如picture"
/>
</Form.Item> </Form.Item>
<Form.Item label="token" style={style.formItem}> <Form.Item label="token" style={style.formItem}>
<Input value={token} onChange={this.tokenChange} placeholder="例如qweASDF1234zxcvb" /> <Input
value={token}
onChange={this.tokenChange}
placeholder="例如qwewsxABCD1234zxcvb"
/>
</Form.Item> </Form.Item>
<Form.Item label="jsDelivr CDN" style={style.formItem}> <Form.Item label="jsDelivr CDN" style={style.formItem}>
<Checkbox checked={jsdelivr === "true"} onChange={this.jsdelivrChange}> <Checkbox
checked={jsdelivr === "true"}
onChange={this.jsdelivrChange}
>
强烈建议开启加速图片 强烈建议开启加速图片
</Checkbox> </Checkbox>
</Form.Item> </Form.Item>
@ -76,7 +91,7 @@ class Gitee extends Component {
<a <a
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
href="https://preview.mdnice.com/article/developer/github-image-hosting/" href="https://doc.luckday.cn"
> >
GitHub图床配置文档 GitHub图床配置文档
</a> </a>
@ -88,8 +103,8 @@ class Gitee extends Component {
const style = { const style = {
formItem: { formItem: {
marginBottom: "10px", marginBottom: "10px"
}, }
}; };
export default Gitee; export default Gitee;

@ -1,15 +1,15 @@
import React, {Component} from "react"; import React, { Component } from "react";
import {observer, inject} from "mobx-react"; import { observer, inject } from "mobx-react";
import {Input, Form} from "antd"; import { Input, Form } from "antd";
import {GITEE_IMAGE_HOSTING} from "../../utils/constant"; import { GITEE_IMAGE_HOSTING } from "../../utils/constant";
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
xs: {span: 6}, xs: { span: 6 }
}, },
wrapperCol: { wrapperCol: {
xs: {span: 16}, xs: { span: 16 }
}, }
}; };
@inject("imageHosting") @inject("imageHosting")
@ -20,50 +20,62 @@ class Gitee extends Component {
// 从localstorage里面读取 // 从localstorage里面读取
const imageHosting = JSON.parse(localStorage.getItem(GITEE_IMAGE_HOSTING)); const imageHosting = JSON.parse(localStorage.getItem(GITEE_IMAGE_HOSTING));
this.state = { this.state = {
imageHosting, imageHosting
}; };
} }
usernameChange = (e) => { usernameChange = e => {
const {imageHosting} = this.state; const { imageHosting } = this.state;
imageHosting.username = e.target.value; imageHosting.username = e.target.value;
this.setState({imageHosting}); this.setState({ imageHosting });
localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting)); localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting));
}; };
repoChange = (e) => { repoChange = e => {
const {imageHosting} = this.state; const { imageHosting } = this.state;
imageHosting.repo = e.target.value; imageHosting.repo = e.target.value;
this.setState({imageHosting}); this.setState({ imageHosting });
localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting)); localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting));
}; };
tokenChange = (e) => { tokenChange = e => {
const {imageHosting} = this.state; const { imageHosting } = this.state;
imageHosting.token = e.target.value; imageHosting.token = e.target.value;
this.setState({imageHosting}); this.setState({ imageHosting });
localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting)); localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting));
}; };
render() { render() {
const {username, repo, token} = this.state.imageHosting; const { username, repo, token } = this.state.imageHosting;
return ( return (
<Form {...formItemLayout}> <Form {...formItemLayout}>
<Form.Item label="用户名" style={style.formItem}> <Form.Item label="用户名" style={style.formItem}>
<Input value={username} onChange={this.usernameChange} placeholder="例如mdnice" /> <Input
value={username}
onChange={this.usernameChange}
placeholder="例如luckday"
/>
</Form.Item> </Form.Item>
<Form.Item label="仓库名" style={style.formItem}> <Form.Item label="仓库名" style={style.formItem}>
<Input value={repo} onChange={this.repoChange} placeholder="例如picture" /> <Input
value={repo}
onChange={this.repoChange}
placeholder="例如picture"
/>
</Form.Item> </Form.Item>
<Form.Item label="token" style={style.formItem}> <Form.Item label="token" style={style.formItem}>
<Input value={token} onChange={this.tokenChange} placeholder="例如qweASDF1234zxcvb" /> <Input
value={token}
onChange={this.tokenChange}
placeholder="例如adsfwe2fsdf23q44twdf"
/>
</Form.Item> </Form.Item>
<Form.Item label="提示" style={style.formItem}> <Form.Item label="提示" style={style.formItem}>
<span>配置后请在右上角进行切换</span> <span>配置后请在右上角进行切换</span>
<a <a
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
href="https://preview.mdnice.com/article/developer/gitee-image-hosting/" href="https://doc.luckday.cn"
> >
Gitee 图床配置文档 Gitee 图床配置文档
</a> </a>
@ -75,8 +87,8 @@ class Gitee extends Component {
const style = { const style = {
formItem: { formItem: {
marginBottom: "10px", marginBottom: "10px"
}, }
}; };
export default Gitee; export default Gitee;

@ -1,16 +1,16 @@
import React, {Component} from "react"; import React, { Component } from "react";
import {observer, inject} from "mobx-react"; import { observer, inject } from "mobx-react";
import {Input, Select, Form} from "antd"; import { Input, Select, Form } from "antd";
import {QINIUOSS_IMAGE_HOSTING} from "../../utils/constant"; import { QINIUOSS_IMAGE_HOSTING } from "../../utils/constant";
const {Option} = Select; const { Option } = Select;
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
xs: {span: 6}, xs: { span: 6 }
}, },
wrapperCol: { wrapperCol: {
xs: {span: 16}, xs: { span: 16 }
}, }
}; };
@inject("imageHosting") @inject("imageHosting")
@ -19,68 +19,84 @@ class QiniuOSS extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
// 从localstorage里面读取 // 从localstorage里面读取
const imageHosting = JSON.parse(localStorage.getItem(QINIUOSS_IMAGE_HOSTING)); const imageHosting = JSON.parse(
localStorage.getItem(QINIUOSS_IMAGE_HOSTING)
);
const link = imageHosting.domain.split("://")[1]; const link = imageHosting.domain.split("://")[1];
this.state = { this.state = {
imageHosting, imageHosting,
link, link
}; };
} }
regionChange = (value) => { regionChange = value => {
const {imageHosting} = this.state; const { imageHosting } = this.state;
imageHosting.region = value; imageHosting.region = value;
this.setState({imageHosting}); this.setState({ imageHosting });
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting)); localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
}; };
accessKeyChange = (e) => { accessKeyChange = e => {
const {imageHosting} = this.state; const { imageHosting } = this.state;
imageHosting.accessKey = e.target.value; imageHosting.accessKey = e.target.value;
this.setState({imageHosting}); this.setState({ imageHosting });
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting)); localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
}; };
secretKeyChange = (e) => { secretKeyChange = e => {
const {imageHosting} = this.state; const { imageHosting } = this.state;
imageHosting.secretKey = e.target.value; imageHosting.secretKey = e.target.value;
this.setState({imageHosting}); this.setState({ imageHosting });
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting)); localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
}; };
bucketChange = (e) => { bucketChange = e => {
const {imageHosting} = this.state; const { imageHosting } = this.state;
imageHosting.bucket = e.target.value; imageHosting.bucket = e.target.value;
this.setState({imageHosting}); this.setState({ imageHosting });
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting)); localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
}; };
linkChange = (e) => { linkChange = e => {
this.setState({link: e.target.value}); this.setState({ link: e.target.value });
const {imageHosting} = this.state; const { imageHosting } = this.state;
imageHosting.domain = "https://" + e.target.value; imageHosting.domain = "https://" + e.target.value;
this.setState({imageHosting}); this.setState({ imageHosting });
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting)); localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
}; };
namespaceChange = ({target: {value}}) => { namespaceChange = ({ target: { value } }) => {
const {imageHosting} = this.state; const { imageHosting } = this.state;
imageHosting.namespace = value; imageHosting.namespace = value;
this.setState({imageHosting}); this.setState({ imageHosting });
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting)); localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
}; };
render() { render() {
const {region, accessKey, secretKey, bucket, namespace} = this.state.imageHosting; const {
const {link} = this.state; region,
accessKey,
secretKey,
bucket,
namespace
} = this.state.imageHosting;
const { link } = this.state;
return ( return (
<Form {...formItemLayout}> <Form {...formItemLayout}>
<Form.Item label="存储空间名称" style={style.formItem}> <Form.Item label="存储空间名称" style={style.formItem}>
<Input value={bucket} onChange={this.bucketChange} placeholder="例如my-wechat" /> <Input
value={bucket}
onChange={this.bucketChange}
placeholder="例如images"
/>
</Form.Item> </Form.Item>
<Form.Item label="存储区域" style={style.formItem}> <Form.Item label="存储区域" style={style.formItem}>
<Select value={region} onChange={this.regionChange} placeholder="例如qiniu.region.z2"> <Select
value={region}
onChange={this.regionChange}
placeholder="例如qiniu.region.z2"
>
<Option value="z0">华东</Option> <Option value="z0">华东</Option>
<Option value="z1">华北</Option> <Option value="z1">华北</Option>
<Option value="z2">华南</Option> <Option value="z2">华南</Option>
@ -89,23 +105,40 @@ class QiniuOSS extends Component {
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item label="AccessKey" style={style.formItem}> <Form.Item label="AccessKey" style={style.formItem}>
<Input value={accessKey} onChange={this.accessKeyChange} placeholder="例如qweASDF1234zxcvb" /> <Input
value={accessKey}
onChange={this.accessKeyChange}
placeholder="例如asdfq2e2fa224t235t"
/>
</Form.Item> </Form.Item>
<Form.Item label="SecretKey" style={style.formItem}> <Form.Item label="SecretKey" style={style.formItem}>
<Input value={secretKey} onChange={this.secretKeyChange} placeholder="例如qweASDF1234zxcvbqweASD" /> <Input
value={secretKey}
onChange={this.secretKeyChange}
placeholder="例如34swffdg34y0fg8asdf"
/>
</Form.Item> </Form.Item>
<Form.Item label="自定义域名" style={style.formItem}> <Form.Item label="自定义域名" style={style.formItem}>
<Input value={link} onChange={this.linkChange} addonBefore="https://" placeholder="例如qiniu.mdnice.com" /> <Input
value={link}
onChange={this.linkChange}
addonBefore="https://"
placeholder="例如qiniu.luckday.cn"
/>
</Form.Item> </Form.Item>
<Form.Item label="自定义命名空间" style={style.formItem}> <Form.Item label="自定义命名空间" style={style.formItem}>
<Input value={namespace} onChange={this.namespaceChange} placeholder="例如image/" /> <Input
value={namespace}
onChange={this.namespaceChange}
placeholder="例如image/"
/>
</Form.Item> </Form.Item>
<Form.Item label="提示" style={style.formItem}> <Form.Item label="提示" style={style.formItem}>
<span>配置后请在右上角进行切换</span> <span>配置后请在右上角进行切换</span>
<a <a
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
href="https://preview.mdnice.com/article/developer/qiniu-image-hosting/" href="https://doc.luckday.cn"
> >
七牛云图床配置文档 七牛云图床配置文档
</a> </a>
@ -117,8 +150,8 @@ class QiniuOSS extends Component {
const style = { const style = {
formItem: { formItem: {
marginBottom: "10px", marginBottom: "10px"
}, }
}; };
export default QiniuOSS; export default QiniuOSS;

@ -97,10 +97,35 @@ code {
font-weight: bolder; font-weight: bolder;
} }
.ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
background-color: #f6f6f6;
}
.ant-upload.ant-upload-drag:not(.ant-upload-disabled):hover {
border-color: #4a148c;
}
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active { .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
color: #4a148c; color: #4a148c;
} }
.ant-tabs-nav .ant-tabs-tab:hover { .ant-tabs-nav .ant-tabs-tab:hover {
color: #8E24AA; color: #8E24AA;
}
.ant-checkbox-checked .ant-checkbox-inner {
background-color: #4a148c;
border-color: #4a148c;
}
.ant-checkbox-input:focus+.ant-checkbox-inner, .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner {
border-color: #4a148c;
}
a {
color: #4a148c;
}
a:hover, a:active {
color: #8E24AA;
} }

@ -4,7 +4,7 @@ import MarkdownNice from "../lib/Lib";
// 编辑器默认的内容 // 编辑器默认的内容
const defaultText = `编辑器默认的内容`; const defaultText = `编辑器默认的内容`;
// 标题,是一个字符串 // 标题,是一个字符串
const defaultTitle = "Markdown Nice"; const defaultTitle = "Markdown";
// 自定义图床参数 // 自定义图床参数
const useImageHosting = { const useImageHosting = {