Merge pull request #2080 from G-Ambatte/addMetadata-#820

Add social metadata tags
2025-12-24 18:32:41 +00:00 · 2022-04-12 22:23:02 -04:00
parent daa0832740 85312859d2
commit b11fe0e760
8 changed files with 78 additions and 4 deletions
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -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>
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -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;
--- a/client/homebrew/thumbnail.png
+++ b/client/homebrew/thumbnail.png
--- a/client/template.js
+++ b/client/template.js
@@ -1,4 +1,6 @@
 module.exports = async(name, title = '', props = {})=>{
+	const HOMEBREWERY_PUBLIC_URL=props.publicUrl;
+
 	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 ?? '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 ?? `${HOMEBREWERY_PUBLIC_URL}/thumbnail.png`}">
+		<meta property="og:description" content="${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>
--- a/config/default.json
+++ b/config/default.json
@@ -3,5 +3,6 @@
 	"naturalcrit_url" : "local.naturalcrit.com:8010",
 	"secret" : "secret",
 	"web_port" : 8000,
-	"enable_v3" : true
+	"enable_v3" : true,
+	"publicUrl" : "https://homebrewery.naturalcrit.com"
 }
--- a/server/app.js
+++ b/server/app.js
@@ -264,6 +264,7 @@ const templateFn = require('./../client/template.js');
 app.use((req, res)=>{
 	const props = {
 		version     : require('./../package.json').version,
+		publicUrl   : config.get('publicUrl') ?? '',
 		url         : req.originalUrl,
 		brew        : req.brew,
 		brews       : req.brews,
--- a/server/googleActions.js
+++ b/server/googleActions.js
@@ -126,7 +126,8 @@ const GoogleActions = {
 				views       : parseInt(file.properties.views),
 				tags        : '',
 				published   : file.properties.published ? file.properties.published == 'true' : false,
-				systems     : []
+				systems     : [],
+				thumbnail   : file.properties.thumbnail
 			};
 		});
 	  return brews;
@@ -147,7 +148,8 @@ const GoogleActions = {
 					renderer  : brew.renderer,
 					tags      : brew.tags,
 					pageCount : brew.pageCount,
-					systems   : brew.systems.join()
+					systems   : brew.systems.join(),
+					thumbnail : brew.thumbnail
 				}
 			},
 			media : {
@@ -185,7 +187,8 @@ const GoogleActions = {
 				'title'     : brew.title,
 				'views'     : '0',
 				'pageCount' : brew.pageCount,
-				'renderer'  : brew.renderer || 'legacy'
+				'renderer'  : brew.renderer || 'legacy',
+				'thumbnail' : brew.thumbnail || ''
 			}
 		};

@@ -286,6 +289,7 @@ const GoogleActions = {
 				views      : parseInt(obj.data.properties.views) || 0, //brews with no view parameter will return undefined
 				version    : parseInt(obj.data.properties.version) || 0,
 				renderer   : obj.data.properties.renderer ? obj.data.properties.renderer : 'legacy',
+				thumbnail  : obj.data.properties.thumbnail || '',

 				gDrive   : true,
 				googleId : id
--- a/server/homebrew.model.js
+++ b/server/homebrew.model.js
@@ -17,6 +17,7 @@ const HomebrewSchema = mongoose.Schema({
 	renderer    : { type: String, default: '' },
 	authors     : [String],
 	published   : { type: Boolean, default: false },
+	thumbnail   : { type: String, default: '' },

 	createdAt  : { type: Date, default: Date.now },
 	updatedAt  : { type: Date, default: Date.now },