I really do not want to update Client Copy

Copy.vue component

With every website I create, numerous “copy” changes are inevitable. Since I use Laravel to build web applications, there are many fields, labels, and descriptions that require adjustments. To simplify this process for my clients, I’ve devised a method for them to make these changes on their own. However, this approach currently requires them to log into GitHub (until I develop a user interface) and edit a file directly.

Here’s how it works:

1. Create a file named “app/copy.php” to house all the copy.
2. Then write the intial copy within this file.

For example:

<?php
return [
  'section_name' => [
      'area_1' => 'some copy',
      'area_2' => 'some copy',
  ],
  'section_name_2' => [
      'area_1' => 'some copy',
      'area_2' => 'some copy',
  ],
];

Then since I am using Inertia I add this line to “app/Http/Middleware/HandleInertiaRequests.php”

        return array_merge(parent::share($request), [
            'environment' => app()->environment(),
            'copy' => config('copy'),

From here I have access to it from VueJS so I made a component “Components/Copy.vue”

<template>
    <div :class="classValue">
        {{ output }}
    </div>
</template>

<script setup>
import {computed} from "vue";
import { Link, useForm, usePage } from '@inertiajs/vue3';

const props = defineProps({
    section: String,
    copy: String,
    classValue: {
        type: String,
        default: "text-gray-500 text-sm"
    }
})

const output = computed(() => {
    return usePage().props.copy[props.section][props.copy]
})

</script>

<style scoped>

</style>

Then when I want to use it I can just add it to another component like this:

<div>
      <Copy class="text-white" section="section_name_2" copy="area_2"/>
</div>

And that is it. Well kind of.

Once you convince a client GitHub is not that scary and show them how to edit that ONE file it will trigger my ci/cd build which you can see how easy this is to automate here https://alfrednutile.info/posts/256

Then when the build is done and deployed thanks to https://envoyer.io/ it is updated!