From d79fe1dee003970f08c1dbd035e4a529ec10c8d4 Mon Sep 17 00:00:00 2001
From: Francis Dinh <normandy@biribiri.dev>
Date: Sat, 23 Jul 2022 17:42:00 -0400
Subject: [PATCH 1/4] refactor: page.text.vue to use composition api

---
 .../client/src/components/page/page.text.vue  | 65 +++++++------------
 1 file changed, 25 insertions(+), 40 deletions(-)

diff --git a/packages/client/src/components/page/page.text.vue b/packages/client/src/components/page/page.text.vue
index 8d2955466..7bf79f0a8 100644
--- a/packages/client/src/components/page/page.text.vue
+++ b/packages/client/src/components/page/page.text.vue
@@ -1,53 +1,38 @@
 <template>
 <div class="mrdgzndn">
-	<Mfm :key="text" :text="text" :is-note="false" :i="$i"/>
+	<Mfm :key="text" :text="text" :is-note="false"/>
 	<MkUrlPreview v-for="url in urls" :key="url" :url="url" class="url"/>
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
+import { defineAsyncComponent, watch, computed } from 'vue';
+import * as mfm from 'mfm-js';
 import { TextBlock } from '@/scripts/hpml/block';
 import { Hpml } from '@/scripts/hpml/evaluator';
-import { defineAsyncComponent, defineComponent, PropType } from 'vue';
-import * as mfm from 'mfm-js';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
 
-export default defineComponent({
-	components: {
-		MkUrlPreview: defineAsyncComponent(() => import('@/components/url-preview.vue')),
-	},
-	props: {
-		block: {
-			type: Object as PropType<TextBlock>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		}
-	},
-	data() {
-		return {
-			text: this.hpml.interpolate(this.block.text),
-		};
-	},
-	computed: {
-		urls(): string[] {
-			if (this.text) {
-				return extractUrlFromMfm(mfm.parse(this.text));
-			} else {
-				return [];
-			}
-		}
-	},
-	watch: {
-		'hpml.vars': {
-			handler() {
-				this.text = this.hpml.interpolate(this.block.text);
-			},
-			deep: true
-		}
-	},
+const props = defineProps<{
+	block: TextBlock;
+	hpml: Hpml;
+}>();
+
+const MkUrlPreview = defineAsyncComponent(() => import('@/components/url-preview.vue'));
+
+let text: string = $ref(props.hpml.interpolate(props.block.text) ?? '');
+
+const urls = computed((): string[] => {
+	if (text) {
+		return extractUrlFromMfm(mfm.parse(text));
+	} else {
+		return [];
+	}
+});
+
+watch(props.hpml.vars, () => {
+	text = props.hpml.interpolate(props.block.text) ?? '';
+}, {
+	deep: true,
 });
 </script>
 

From d6a5eb46664d3d23778d1a7069d76e1a7e350fdb Mon Sep 17 00:00:00 2001
From: Francis Dinh <normandy@biribiri.dev>
Date: Sat, 23 Jul 2022 17:51:53 -0400
Subject: [PATCH 2/4] Add padding

This will let not have text right up against the edge.
---
 packages/client/src/components/page/page.text.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/client/src/components/page/page.text.vue b/packages/client/src/components/page/page.text.vue
index 7bf79f0a8..565d40e02 100644
--- a/packages/client/src/components/page/page.text.vue
+++ b/packages/client/src/components/page/page.text.vue
@@ -38,6 +38,8 @@ watch(props.hpml.vars, () => {
 
 <style lang="scss" scoped>
 .mrdgzndn {
+	padding: 1em;
+
 	&:not(:first-child) {
 		margin-top: 0.5em;
 	}

From ebfe2162e973623845b8b0521939be83305da3f7 Mon Sep 17 00:00:00 2001
From: Francis Dinh <normandy@biribiri.dev>
Date: Sat, 23 Jul 2022 17:57:04 -0400
Subject: [PATCH 3/4] only add padding for left and right sides

---
 packages/client/src/components/page/page.text.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/page/page.text.vue b/packages/client/src/components/page/page.text.vue
index 565d40e02..4cd4c24bc 100644
--- a/packages/client/src/components/page/page.text.vue
+++ b/packages/client/src/components/page/page.text.vue
@@ -38,7 +38,8 @@ watch(props.hpml.vars, () => {
 
 <style lang="scss" scoped>
 .mrdgzndn {
-	padding: 1em;
+	padding-left: 1em;
+	padding-right: 1em;
 
 	&:not(:first-child) {
 		margin-top: 0.5em;

From 6ffbabeedc7609eb04b934f913b8f8b4aaa4a0d6 Mon Sep 17 00:00:00 2001
From: Francis Dinh <normandy@biribiri.dev>
Date: Sun, 24 Jul 2022 11:58:15 -0400
Subject: [PATCH 4/4] use immediate: true for watch

---
 packages/client/src/components/page/page.text.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/page/page.text.vue b/packages/client/src/components/page/page.text.vue
index 4cd4c24bc..1e07da8c0 100644
--- a/packages/client/src/components/page/page.text.vue
+++ b/packages/client/src/components/page/page.text.vue
@@ -19,7 +19,7 @@ const props = defineProps<{
 
 const MkUrlPreview = defineAsyncComponent(() => import('@/components/url-preview.vue'));
 
-let text: string = $ref(props.hpml.interpolate(props.block.text) ?? '');
+let text: string = $ref('');
 
 const urls = computed((): string[] => {
 	if (text) {
@@ -30,9 +30,10 @@ const urls = computed((): string[] => {
 });
 
 watch(props.hpml.vars, () => {
-	text = props.hpml.interpolate(props.block.text) ?? '';
+	text = props.hpml.interpolate(props.block.text) as string;
 }, {
 	deep: true,
+	immediate: true,
 });
 </script>