Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-02 20:15:24 +02:00
Code Issues Releases Activity

add support for meta tags on share pages (#867)

Browse source
This commit is contained in:
Hayden 2021-12-06 17:14:14 -09:00 • committed by GitHub
parent 5454d2c8b8
commit 5839992c19
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 190 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

14
frontend/composables/api/static-routes.ts
View file

@ -1,25 +1,29 @@
import { useContext } from "@nuxtjs/composition-api";
import { detectServerBaseUrl } from "../use-utils";
export const useStaticRoutes = () => {
const { $config } = useContext();
const { $config, req } = useContext();
const serverBase = detectServerBaseUrl(req);
const prefix = `${$config.SUB_PATH}/api`.replace("//", "/");
const fullBase = serverBase + prefix;
// Methods to Generate reference urls for assets/images *
function recipeImage(recipeSlug: string, version = null, key = null) {
return `${prefix}/media/recipes/${recipeSlug}/images/original.webp?&rnd=${key}&version=${version}`;
return `${fullBase}/media/recipes/${recipeSlug}/images/original.webp?&rnd=${key}&version=${version}`;
}
function recipeSmallImage(recipeSlug: string, version = null, key = null) {
return `${prefix}/media/recipes/${recipeSlug}/images/min-original.webp?&rnd=${key}&version=${version}`;
return `${fullBase}/media/recipes/${recipeSlug}/images/min-original.webp?&rnd=${key}&version=${version}`;
}
function recipeTinyImage(recipeSlug: string, version = null, key = null) {
return `${prefix}/media/recipes/${recipeSlug}/images/tiny-original.webp?&rnd=${key}&version=${version}`;
return `${fullBase}/media/recipes/${recipeSlug}/images/tiny-original.webp?&rnd=${key}&version=${version}`;
}
function recipeAssetPath(recipeSlug: string, assetName: string) {
return `${prefix}/media/recipes/${recipeSlug}/assets/${assetName}`;
return `${fullBase}/media/recipes/${recipeSlug}/assets/${assetName}`;
}
return {

18
frontend/composables/recipes/use-recipe-meta.ts
View file

@ -1,36 +1,36 @@
import { Ref } from "@nuxtjs/composition-api";
import { useStaticRoutes } from "../api";
// import { useStaticRoutes } from "../api";
import { Recipe } from "~/types/api-types/recipe";
export const useRecipeMeta = (recipe: Ref<Recipe>) => {
const { recipeImage } = useStaticRoutes();
console.log(recipe.value);
// const { recipeImage } = useStaticRoutes();
return () => {
const imageURL = "";
return {
title: recipe?.value?.name || "Recipe",
title: recipe?.value?.name,
// @ts-ignore
mainImage: recipeImage(recipe?.value?.image),
mainImage: imageURL,
meta: [
{ hid: "og:title", property: "og:title", content: recipe?.value?.name || "Recipe" },
{
hid: "og:desc",
property: "og:description",
content: recipe?.value?.description || "",
content: recipe?.value?.description,
},
{
hid: "og-image",
property: "og:image",
content: recipeImage(recipe?.value?.image || ""),
content: imageURL,
},
{
hid: "twitter:title",
property: "twitter:title",
content: recipe?.value?.name || "Recipe",
content: recipe?.value?.name,
},
{
hid: "twitter:desc",
property: "twitter:description",
content: recipe?.value?.description || "",
content: recipe?.value?.description,
},
{ hid: "t-type", name: "twitter:card", content: "summary_large_image" },
],

18
frontend/composables/use-utils.ts
View file

@ -2,6 +2,24 @@ export const useAsyncKey = function () {
return String(Date.now());
};
export function detectServerBaseUrl(req: any) {
if (!req || req === undefined) {
return "";
}
if (req.headers.referer) {
const url = new URL(req.headers.referer);
return `${url.protocol}//${url.host}`;
} else if (req.headers.host) {
const protocol = req.connection.encrypted ? "https" : "http:";
return `${protocol}//${req.headers.host}`;
} else if (req.connection.remoteAddress) {
const protocol = req.connection.encrypted ? "https" : "http:";
return `${protocol}//${req.connection.localAddress}:${req.connection.localPort}`;
}
return "";
}
export function uuid4() {
// @ts-ignore
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>