Commite91c9f8

committed

feat(editor): add custom embedly styles

1 parent89baa42 commite91c9f8Copy full SHA for e91c9f8

File tree

+67

-6

lines changed

+67

-6

lines changed

Lines changed: 49 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,49 @@`
	`1`	`+/**`
	`2`	`+ *`
	`3`	`+ * embed.ly custom styles, those styles only works in paid user of embed.ly`
	`4`	`+ * see details in: https://docs.embed.ly/docs/cards`
	`5`	`+ *`
	`6`	`+ */`
	`7`	`+constgetEmbedHeadStyle=themeData=>{`
	`8`	`+const{`
	`9`	`+ providerName,`
	`10`	`+ title,`
	`11`	`+ digest,`
	`12`	`+ selectionBg,`
	`13`	`+ selectionFg,`
	`14`	`+ link,`
	`15`	`+ linkHover,`
	`16`	`+}=themeData.richEditor.embed`
	`17`	`+`
	`18`	+return`
	`19`	`+ .card .title {`
	`20`	`+ margin-top: 15px;`
	`21`	`+ }`
	`22`	`+ .card .title a {`
	`23`	`+ color:${title};`
	`24`	`+ }`
	`25`	`+ .card .description {`
	`26`	`+ color:${digest};`
	`27`	`+ margin-top: 10px;`
	`28`	`+ margin-bottom: 10px;`
	`29`	`+ }`
	`30`	`+ .card .action {`
	`31`	`+ color:${link};`
	`32`	`+ }`
	`33`	`+ .card .meta .meta-txt a:hover, .card .action:hover, .modal-container .preview-overlay-txt:hover, .modal-container .reset-embed-btn:hover, .modal-container .code-txt-label a:hover, .modal-container .services-list li a:hover, .modal-container .resources-list li a:hover, .slideshow .action:hover {`
	`34`	`+ color:${linkHover};`
	`35`	`+ }`
	`36`	`+ .card .provider-name {`
	`37`	`+ color:${providerName};`
	`38`	`+ }`
	`39`	`+ .no-touch .card .provider-name:hover, .touch .card .provider-name {`
	`40`	`+ border-bottom: 1px dotted${providerName};`
	`41`	`+ }`
	`42`	`+ ::selection {`
	`43`	`+ background:${selectionBg};`
	`44`	`+ color:${selectionFg};`
	`45`	`+ }`
	`46`	+ `
	`47`	`+}`
	`48`	`+`
	`49`	`+exportdefaultgetEmbedHeadStyle`

Lines changed: 4 additions & 5 deletions

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@ import { connectStore } from '@utils'`
`12`	`12`	`import{usePlatform}from'@hooks'`
`13`	`13`
`14`	`14`	`// import MarkDownStyle from './MarkDownStyle'`
	`15`	`+importgetEmbedHeadStylefrom'./EditorEmbedCustom'`
`15`	`16`	`importCodeSyxHighlightfrom'./CodeSyxHighlight'`
`16`	`17`	`importAntUIOverWritefrom'./AntUIOverWrite'`
`17`	`18`	`importGlobalStylefrom'./GlobalStyle'`
`@@ -25,11 +26,9 @@ const ThemeContainer = ({ children, theme: { themeData } }) => {`
`25`	`26`	`<ThemeProvidertheme={themeData}>`
`26`	`27`	`<React.Fragment>`
`27`	`28`	`<Helmetmeta={[{name:'theme-color',content:themeData.mobileTab}]}>`
`28`		-<styleclassName="embedly-css">{`
`29`		`- .card .title {`
`30`		`- margin-top: 5px;`
`31`		`- }`
`32`		- `}</style>
	`29`	+<styleclassName="embedly-css">{`${getEmbedHeadStyle(
	`30`	`+themeData`
	`31`	+)}`}</style>
`33`	`32`	`</Helmet>`
`34`	`33`	`<div>{children}</div>`
`35`	`34`	`<CodeSyxHighlight/>`

Lines changed: 14 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,9 @@ const markdownFont = '#7698A0'`
`16`	`16`	`constdescText='#a3bbbd'`
`17`	`17`	`constprimaryMate='orange'`
`18`	`18`
	`19`	`+constselectionBg='#FEDEB6'`
	`20`	`+constselectionFg='#251A1A'`
	`21`	`+`
`19`	`22`	`constcyan={`
`20`	`23`	`name:'cyan',`
`21`	`24`	`logoText:descText,`
`@@ -38,7 +41,7 @@ const cyan = {`
`38`	`41`	`link:'orange',`
`39`	`42`	`main:'#7DC0C5',`
`40`	`43`	`bodyBg:contentBg,`
`41`		`-selectionBg:'#A0BBBC',`
	`44`	`+ selectionBg,`
`42`	`45`	`avatarOpacity:1,`
`43`	`46`	`baseColor:{`
`44`	`47`	`error:'#fd7f68 !important',`
`@@ -261,6 +264,16 @@ const cyan = {`
`261`	`264`	`taskDone:'#528416',`
`262`	`265`	`taskPeding:darken(0.1,contentBoxBg),`
`263`	`266`	`br:'#e8e8e8',`
	`267`	`+// embed`
	`268`	`+embed:{`
	`269`	`+title:'#75979c',`
	`270`	`+digest:'#75979c',`
	`271`	`+ selectionBg,`
	`272`	`+ selectionFg,`
	`273`	`+link:'#dcb27c',`
	`274`	`+linkHover:'#d49451',`
	`275`	`+providerName:'#696565',`
	`276`	`+},`
`264`	`277`	`},`
`265`	`278`	`code:{`
`266`	`279`	`bg:darken(0.05,contentBoxBg),`

Comments

(0)