Simplify layout implementation

Author: cmpadden

components/ExternalIndicator.vue

@@ -12,7 +12,7 @@ const props = defineProps({
     class="inline-flex items-center gap-1 rounded border border-orange-500/30 bg-orange-500/20 px-2 py-0.5"
   >
     <span
-      class="text-[10px] leading-none uppercase tracking-wide text-orange-300"
+      class="text-[10px] uppercase leading-none tracking-wide text-orange-300"
       >External - {{ site }}</span
     >
     <svg

components/Header.vue

@@ -3,7 +3,7 @@ const route = useRoute();
 </script>
 
 <template>
-  <nav class="container mx-auto py-3">
+  <nav class="container py-3">
     <div class="flex items-center text-gray-700 dark:text-gray-200">
       <div class="flex-1" />
       <div class="flex items-center space-x-2">

components/section/BlogPosts.vue

@@ -5,19 +5,19 @@ const props = defineProps({
 });
 
 function externalSite(article) {
-  if (!article?.external_url) return ''
-  if (article?.external_site) return article.external_site
+  if (!article?.external_url) return "";
+  if (article?.external_site) return article.external_site;
   try {
-    const u = new URL(article.external_url)
-    return u.hostname.replace(/^www\./, '')
+    const u = new URL(article.external_url);
+    return u.hostname.replace(/^www\./, "");
   } catch {
-    return article.external_url
+    return article.external_url;
   }
 }
 </script>
 
 <template>
-  <section class="container mx-auto space-y-2">
+  <section class="container space-y-2">
     <div class="grid grid-cols-1 gap-3">
       <div v-for="(article, ix) of articles" :key="ix">
         <NuxtLink :to="article.path">
@@ -32,7 +32,10 @@ function externalSite(article) {
                 {{ article.title }}
               </div>
               <div class="flex items-center gap-2 md:ml-auto">
-                <ExternalIndicator v-if="article.external_url" :site="externalSite(article)" />
+                <ExternalIndicator
+                  v-if="article.external_url"
+                  :site="externalSite(article)"
+                />
               </div>
             </div>
             <template v-if="show_dates">

components/section/Interests.vue

@@ -2,7 +2,7 @@
   <section class="text-white">
     <div class="bg-gradient-to-b from-background to-transparent">
       <div
-        class="container mx-auto grid grid-cols-1 space-y-6 py-8 md:grid-cols-3 md:space-x-6 md:space-y-0"
+        class="container grid grid-cols-1 space-y-6 py-8 md:grid-cols-3 md:space-x-6 md:space-y-0"
       >
         <div>
           <div

components/section/Playground.vue

@@ -110,7 +110,7 @@ const filtered_links = computed(() => {
   <section
     class="to-background-dark bg-gradient-to-b from-transparent text-white"
   >
-    <div class="container mx-auto py-8 text-white">
+    <div class="container py-8 text-white">
       <div class="mb-2 grid grid-cols-1 gap-3 sm:grid-cols-3">
         <nuxt-link
           class="relative text-orange-500 ring-2 ring-white hover:text-white hover:ring-orange-500"

layouts/light.vue

@@ -1,7 +1,7 @@
 <template>
   <main>
     <Header />
-    <div class="container mx-auto h-screen font-display">
+    <div class="container h-screen font-display">
       <div class="flex flex-col border-2">
         <slot />
       </div>

pages/about.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container mx-auto space-y-5 rounded-lg bg-white/20 py-5">
+  <div class="container space-y-5 rounded-lg bg-white/20 py-5">
     <SectionAboutMe />
     <div class="flex flex-row items-center justify-center">
       <div class="text-orange-500">

pages/blog/[...slug].vue

@@ -36,7 +36,7 @@ function externalSite(p: any) {
 
 <template>
   <div
-    class="container mx-auto mb-10 max-w-[1024px] space-y-6 text-white shadow-lg"
+    class="container mb-10 max-w-[1024px] space-y-6 text-white shadow-lg"
     v-if="page"
   >
     <!-- title -->
@@ -111,8 +111,9 @@ function externalSite(p: any) {
           rel="noopener noreferrer"
           class="font-semibold text-orange-300"
         >
-          {{ externalSite(page) }} </a
-        > blog.
+          {{ externalSite(page) }}
+        </a>
+        blog.
       </div>
     </div>
 

pages/blog/index.vue

@@ -209,7 +209,7 @@ watch(
   <section
     class="min-h-screen bg-emerald-950 bg-[url('/images/noise.svg')] py-10 text-white"
   >
-    <div class="container mx-auto space-y-8">
+    <div class="container space-y-8">
       <div class="space-y-4">
         <div class="grid gap-4">
           <template v-for="article in paginatedArticles" :key="article._id">

pages/index.vue

@@ -8,7 +8,7 @@ const articles = await queryCollection("content")
 <template>
   <div class="min-h-screen bg-emerald-950 bg-[url('/images/noise.svg')]">
     <section class="bg-gradient-to-b from-background to-transparent py-2">
-      <div class="container mx-auto my-7">
+      <div class="container my-7">
         <div class="text-orange-500">
           <Logo />
         </div>