format acknowledgments (#143)

* Add migration to update "Acknowledgments" field in "Menu" model to use markdown editor

* Enhance AcknowledgmentsDialog styling and image handling

- Added 'markdown-body' class to the vue-markdown component for improved styling.
- Introduced CSS rules to ensure images within the markdown are responsive, with a maximum width of 500px.

migrations/1733825239_colophonPresentation.ts

@@ -0,0 +1,33 @@
+import { Client } from "@datocms/cli/lib/cma-client-node";
+
+export default async function (client: Client) {
+  console.log("Update existing fields/fieldsets");
+
+  const currentField = await client.fields.find("H7cTIWERTG-z24IE8ILCUw");
+
+  console.log(
+    'Update Multiple-paragraph text field "Acknowledgments" (`acknowledgments`) in model "Menu" (`menu`)'
+  );
+  await client.fields.update("H7cTIWERTG-z24IE8ILCUw", {
+    appearance: {
+      addons: currentField.appearance.addons,
+      editor: "markdown",
+      parameters: {
+        toolbar: [
+          "heading",
+          "bold",
+          "italic",
+          "strikethrough",
+          "code",
+          "unordered_list",
+          "ordered_list",
+          "quote",
+          "link",
+          "image",
+          "fullscreen",
+        ],
+      },
+      type: "markdown",
+    },
+  });
+}

src/components/AcknowledgmentsDialog/AcknowledgmentsDialog.vue

@@ -17,7 +17,7 @@
       </v-app-bar>
 
       <v-divider />
-      <vue-markdown class="px-4 py-5 flex-grow-1 overflow-y-auto justify-center" :source="acknowledgments" />
+      <vue-markdown class="px-4 py-5 flex-grow-1 overflow-y-auto justify-center markdown-body" :source="acknowledgments" />
       <!-- <div class="px-4 py-5 flex-grow-1 overflow-y-auto justify-center" v-html="acknowledgments" /> -->
     </v-card>
   </v-dialog>
@@ -57,4 +57,10 @@
 </script>
 
 <style>
+/* make image max 300 width */
+.markdown-body img {
+  width: 100%;
+  max-width: 500px;
+}
 </style>
+