f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-02 12:52:38 +00:00
Code Wiki Activity

Initial pass at social metadata tags

Browse Source
This commit is contained in:
G.Ambatte
2022-03-15 18:47:46 +13:00
parent 04cd53397a
commit a11e93ef54
6 changed files with 75 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
client/homebrew/editor/metadataEditor/metadataEditor.jsx
View File

@@ -7,6 +7,8 @@ const request = require('superagent');
const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
const homebreweryThumbnail = require('../../thumbnail.png');
const MetadataEditor = createClass({
displayName : 'MetadataEditor',
getDefaultProps : function() {
@@ -25,6 +27,23 @@ const MetadataEditor = createClass({
};
},
getInitialState : function(){
return {
showThumbnail : true
};
},
toggleThumbnailDisplay : function(){
this.setState({
showThumbnail : !this.state.showThumbnail
});
},
renderThumbnail : function(){
if(!this.state.showThumbnail) return;
return <img className='thumbnail-preview' src={this.props.metadata.thumbnail || homebreweryThumbnail}></img>;
},
handleFieldChange : function(name, e){
this.props.onChange(_.merge({}, this.props.metadata, {
[name] : e.target.value
@@ -162,6 +181,18 @@ const MetadataEditor = createClass({
<textarea value={this.props.metadata.description} className='value'
onChange={(e)=>this.handleFieldChange('description', e)} />
</div>
<div className='field thumbnail'>
<label>thumbnail</label>
<input type='text'
value={this.props.metadata.thumbnail}
placeholder='my.thumbnail.url'
className='value'
onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
<button className='display' onClick={this.toggleThumbnailDisplay}>
<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
</button>
{this.renderThumbnail()}
</div>
{/*}
<div className='field tags'>
<label>tags</label>

27
client/homebrew/editor/metadataEditor/metadataEditor.less
View File

@@ -24,6 +24,33 @@
flex : 1 1 auto;
min-width : 200px;
}
&.thumbnail{
height : 1.4em;
label{
line-height: 2.0em;
}
.value{
overflow: hidden;
text-overflow: ellipsis;
}
button{
border: 1px solid #999;
color: white;
padding: 0px 5px;
background-color: black;
&:hover{
background-color: #777;
}
}
.thumbnail-preview{
position : relative;
width : 80px;
height : min-content;
border : 2px solid white;
margin-left : 5px;
max-height : 115px;
}
}
}
.description.field textarea.value{
resize : none;

BIN
client/homebrew/thumbnail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

9
client/template.js
View File

@@ -1,4 +1,6 @@
module.exports = async(name, title = '', props = {})=>{
const HOMEBREWERY_PUBLIC_URL=(process.env.NODE_ENV == 'local' ? 'localhost:8000' : 'https://homebrewery.naturalcrit.com');
return `
<!DOCTYPE html>
<html>
@@ -7,6 +9,13 @@ module.exports = async(name, title = '', props = {})=>{
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
<link href=${`/${name}/bundle.css`} rel='stylesheet' />
<link rel="icon" href="/assets/homebrew/favicon.ico" type="image/x-icon" />
<meta property="og:title" content="${props.brew?.title ? props.brew.title : 'Homebrewery - Untitled Brew'}">
<meta property="og:url" content="${HOMEBREWERY_PUBLIC_URL}/${props.brew?.shareId ? `share/${props.brew.shareId}` : ''}">
<meta property="og:image" content="${props.brew?.thumbnail ? props.brew.thumbnail : `${HOMEBREWERY_PUBLIC_URL}/thumbnail.png`}">
<meta property="og:description" content="${props.brew?.description ? props.brew.description : 'No description.'}">
<meta property="og:site_name" content="The Homebrewery - Make your Homebrew content look legit!">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<title>${title.length ? `${title} - The Homebrewery`: 'The Homebrewery - NaturalCrit'}</title>
</head>
<body>