feat: consolidate deployment targets and publish to ghcr.io (#2539)

* WIP: proof of concept

* basic meta tag injection

* add support for scraping public/private links

* make tests go brrrrr

* cleanup initialization

* rewrite build config

* remove recipe meta on frontend

* make type checker happy

* remove other deployment methods

* fix issue with JSON response on un-authenticated request

* docs updates

* update tivy scanner

* fix linter stuff

* change registry tag

* build fixes

* fix same mistake I always make

frontend/components/Domain/Recipe/RecipePage/RecipePage.vue

@@ -1,7 +1,13 @@
 <template>
   <v-container :class="{ 'pa-0': $vuetify.breakpoint.smAndDown }">
     <v-card :flat="$vuetify.breakpoint.smAndDown" class="d-print-none">
-      <RecipePageHeader :recipe="recipe" :recipe-scale="scale" :landscape="landscape" @save="saveRecipe" @delete="deleteRecipe" />
+      <RecipePageHeader
+        :recipe="recipe"
+        :recipe-scale="scale"
+        :landscape="landscape"
+        @save="saveRecipe"
+        @delete="deleteRecipe"
+      />
       <LazyRecipeJsonEditor v-if="isEditJSON" v-model="recipe" class="mt-10" :options="EDITOR_OPTIONS" />
       <v-card-text v-else>
         <!--
@@ -100,7 +106,6 @@ import RecipePrintContainer from "~/components/Domain/Recipe/RecipePrintContaine
 import { EditorMode, PageMode, usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { Recipe } from "~/lib/api/types/recipe";
-import { useRecipeMeta } from "~/composables/recipes";
 import { useRouteQuery } from "~/composables/use-router";
 import { useUserApi } from "~/composables/api";
 import { uuid4, deepCopy } from "~/composables/use-utils";
@@ -275,9 +280,6 @@ export default defineComponent({
     /** =============================================================
      * Meta Tags
      */
-    const { recipeMeta } = useRecipeMeta();
-    useMeta(recipeMeta(ref(props.recipe)));
-
     const { user } = usePageUser();
 
     return {

frontend/composables/recipes/index.ts

@@ -3,4 +3,3 @@ export { useRecipe } from "./use-recipe";
 export { useRecipes, recentRecipes, allRecipes, useLazyRecipes } from "./use-recipes";
 export { parseIngredientText, useParsedIngredientText } from "./use-recipe-ingredients";
 export { useTools } from "./use-recipe-tools";
-export { useRecipeMeta } from "./use-recipe-meta";

frontend/composables/recipes/use-recipe-meta.ts

@@ -1,58 +0,0 @@
-import { Ref } from "@nuxtjs/composition-api";
-import { useStaticRoutes } from "~/composables/api";
-import { Recipe } from "~/lib/api/types/recipe";
-
-export interface RecipeMeta {
-  title?: string;
-  mainImage?: string;
-  meta: Array<any>;
-  __dangerouslyDisableSanitizers: Array<string>;
-  script: Array<any>;
-}
-
-export const useRecipeMeta = () => {
-  const { recipeImage } = useStaticRoutes();
-  function recipeMeta(recipe: Ref<Recipe | null>): RecipeMeta {
-    const imageURL = recipeImage(recipe?.value?.id ?? "");
-    return {
-      title: recipe?.value?.name,
-      mainImage: imageURL,
-      meta: [
-        { hid: "og:title", property: "og:title", content: recipe?.value?.name || "Recipe" },
-        {
-          hid: "og:description",
-          property: "og:description",
-          content: recipe?.value?.description ?? "",
-        },
-        {
-          hid: "og:image",
-          property: "og:image",
-          content: imageURL,
-        },
-        {
-          hid: "twitter:title",
-          property: "twitter:title",
-          content: recipe?.value?.name ?? "",
-        },
-        {
-          hid: "twitter:desc",
-          property: "twitter:description",
-          content: recipe?.value?.description ?? "",
-        },
-        { hid: "t-type", name: "twitter:card", content: "summary_large_image" },
-      ],
-      __dangerouslyDisableSanitizers: ["script"],
-      script: [
-        {
-          innerHTML: JSON.stringify({
-            "@context": "http://schema.org",
-            "@type": "Recipe",
-            ...recipe.value,
-          }),
-          type: "application/ld+json",
-        },
-      ],
-    };
-  }
-  return { recipeMeta };
-};

frontend/nuxt.config.js

@@ -1,5 +1,6 @@
 export default {
   // Global page headers: https://go.nuxtjs.dev/config-head
+  target: "static",
   head: {
     title: "Mealie",
     meta: [

frontend/pages/explore/recipes/_groupSlug/_recipeSlug.vue

@@ -7,10 +7,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, useAsync, useMeta, useRoute, useRouter } from "@nuxtjs/composition-api";
+import { defineComponent, useAsync, useMeta, useRoute, useRouter } from "@nuxtjs/composition-api";
 import RecipePage from "~/components/Domain/Recipe/RecipePage/RecipePage.vue";
 import { usePublicExploreApi } from "~/composables/api/api-client";
-import { useRecipeMeta } from "~/composables/recipes";
 
 export default defineComponent({
   components: { RecipePage },
@@ -22,8 +21,7 @@ export default defineComponent({
     const recipeSlug = route.value.params.recipeSlug;
     const api = usePublicExploreApi(groupSlug);
 
-    const { meta, title } = useMeta();
-    const { recipeMeta } = useRecipeMeta();
+    const { title } = useMeta();
 
     const recipe = useAsync(async () => {
       const { data, error } = await api.explore.recipes.getOne(recipeSlug);
@@ -35,8 +33,6 @@ export default defineComponent({
 
       if (data) {
         title.value = data?.name || "";
-        const metaObj = recipeMeta(ref(data));
-        meta.value = metaObj.meta;
       }
 
       return data;

frontend/pages/shared/recipes/_id.vue

@@ -10,7 +10,6 @@
 import { defineComponent, ref, useAsync, useMeta, useRoute, useRouter } from "@nuxtjs/composition-api";
 import RecipePage from "~/components/Domain/Recipe/RecipePage/RecipePage.vue";
 import { usePublicApi } from "~/composables/api/api-client";
-import { useRecipeMeta } from "~/composables/recipes";
 
 export default defineComponent({
   components: { RecipePage },
@@ -21,8 +20,7 @@ export default defineComponent({
     const recipeId = route.value.params.id;
     const api = usePublicApi();
 
-    const { meta, title } = useMeta();
-    const { recipeMeta } = useRecipeMeta();
+    const { title } = useMeta();
 
     const recipe = useAsync(async () => {
       const { data, error } = await api.shared.getShared(recipeId);
@@ -34,8 +32,6 @@ export default defineComponent({
 
       if (data) {
         title.value = data?.name || "";
-        const metaObj = recipeMeta(ref(data));
-        meta.value = metaObj.meta;
       }
 
       return data;