Autogenerate project preview images for Open Graph #1886
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Handler triggers a generate thumnail method using the html2image module. - CSS styling to the added to the template. - Project models needs a new column for BYTEA data - A method to add the generated image to the new BYTEA column needs to be added - Cache headers have to be set in the view to tell Nginx to the cache the date
for more information, see https://pre-commit.ci
-Ran db migration -Generate thumbnail method writes png to the db
…nto auto-thumbnails
for more information, see https://pre-commit.ci
…nto auto-thumbnails
Configured precommit to run locally
for more information, see https://pre-commit.ci
…nt to serve image from project view
for more information, see https://pre-commit.ci
jace
changed the title
vidya-ram
reviewed
Nov 8, 2023
| text-align: left; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } |
There was a problem hiding this comment.
You can move these to a new preview.scss file under assets/sass/pages
vidya-ram
reviewed
Nov 8, 2023
| var gradient = 'linear-gradient(to bottom right, hsl('+ huePair[0] +', 100%, 87%), hsl('+ (huePair[0]+(huePair[1]-huePair[0])*0.33) +', 100%, 87%), hsl('+ (huePair[0]+(huePair[1]-huePair[0])*0.66) +', 100%, 87%), hsl('+ huePair[1] +', 100%, 87%))'; | ||
| console.log(gradient); | ||
| document.getElementById("container").style.background = gradient; | ||
| }) |
There was a problem hiding this comment.
Same. Move the JS part to a new preview.js file under assets/js. Include it in webpack.config.js
vidya-ram
reviewed
Nov 8, 2023
| window.addEventListener("load", () => { | ||
| var hueValues = [5, 23, 39, 48, 92, 172, 201, 220, 273, 335] | ||
| huePair = randomizeElements(hueValues, 2); | ||
| var gradient = 'linear-gradient(to bottom right, hsl('+ huePair[0] +', 100%, 87%), hsl('+ (huePair[0]+(huePair[1]-huePair[0])*0.33) +', 100%, 87%), hsl('+ (huePair[0]+(huePair[1]-huePair[0])*0.66) +', 100%, 87%), hsl('+ huePair[1] +', 100%, 87%))'; |
There was a problem hiding this comment.
You can use template string here
gradient = linear-gradient(to bottom right, hsl(${huePair[0]}, 100%, 87%)....
vidya-ram
reviewed
Nov 8, 2023
|
|
||
| window.addEventListener("load", () => { | ||
| var hueValues = [5, 23, 39, 48, 92, 172, 201, 220, 273, 335] | ||
| huePair = randomizeElements(hueValues, 2); |
There was a problem hiding this comment.
Why is 2 being sent to. randomizeElements. Function expects just one parameter
vidya-ram
reviewed
Nov 8, 2023
| result.push(element); | ||
| } | ||
| return result; | ||
| }; |
There was a problem hiding this comment.
Set doesn't allow duplicate
This can be simplified
const randomizeElements = (hueList) => {
const uniqueHuePair = new Set();
let hueCount = array.length;
let randomIndex;
let hue;
while (randomSelection.size < 2) {
randomIndex = randomizeIndex(hueCount);
hue = hueList[randomIndex];
uniqueHuePair.add(hue);
}
return uniqueHuePair;
};
var [hueValue1, hueValue2] = randomizeElements(hueValues)
…after function call
for more information, see https://pre-commit.ci
for more information, see https://pre-commit.ci
for more information, see https://pre-commit.ci
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Handler triggers a generate thumnail method using the html2image module.