links

Author: mythz

MyApp/Pages/AutoQuery.cshtml

@@ -41,7 +41,7 @@
         Instant APIs from your DTOs.
       </h1>
 
-      <p class="mt-4 text-lg leading-8 text-slate-600 dark:text-slate-300">
+      <p class="mt-4 max-w-[640px] text-lg leading-8 text-slate-600 dark:text-slate-300">
         High performance, industrial strength, code-first APIs. Skip the boilerplate and instantly expose queryable &amp; CRUD endpoints for your databases.
       </p>
 
@@ -88,7 +88,8 @@
           <!-- Code Block -->
           <div class="overflow-x-auto">
             <!-- Added !bg-transparent to pre/code to prevent double background colors -->
-            <pre class="!bg-transparent text-sm leading-6 text-slate-300 font-mono"><span class="text-slate-500"> // Create Queyrable APIs from just Request DTOs</span><code><span class="text-yellow-300">[Route(</span><span class="text-green-300">"/bookings"</span><span class="text-yellow-300">)]</span>
+            <pre class="!bg-transparent text-sm leading-6 text-slate-300 font-mono"><span class="text-slate-500">// Create Queyrable APIs from just Request DTOs</span>
+<code><span class="text-yellow-300">[Route(</span><span class="text-green-300">"/bookings"</span><span class="text-yellow-300">)]</span>
 <span class="text-purple-400">public class</span> <span class="text-yellow-300">SearchBookings</span> : <span class="text-blue-400">QueryDb</span>&lt;<span class="text-green-400">Booking</span>&gt;
 {
     <span class="text-purple-400">public</span> <span class="text-blue-400">string</span>? Name { <span class="text-purple-400">get</span>; <span class="text-purple-400">set</span>; }
@@ -98,9 +99,8 @@
     <span class="text-purple-400">public</span> <span class="text-blue-400">DateTime</span>? FromDate { <span class="text-purple-400">get</span>; <span class="text-purple-400">set</span>; }
 }
 
-<span class="text-slate-500">/* Immediately available from:
-   GET /bookings?Name=John&AboveCost=50
-*/</span></code></pre>
+<span class="text-slate-500">// Immediately available from:
+// GET /bookings?Name=John&AboveCost=50</span></code></pre>
           </div>
         </div>
 

MyApp/Pages/AutoUi.cshtml

@@ -33,7 +33,7 @@
     <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl lg:flex-shrink-0 lg:pt-8">
       <div class="mt-24 sm:mt-32 lg:mt-16">
         <div class="inline-flex space-x-6">
-          <span class="rounded-full bg-indigo-500/10 px-3 py-1 text-sm font-semibold leading-6 text-indigo-400 ring-1 ring-inset ring-indigo-500/20">What's new</span>
+          <a href="https://docs.servicestack.net/ai-chat-ui" class="rounded-full bg-indigo-500/10 px-3 py-1 text-sm font-semibold leading-6 text-indigo-400 ring-1 ring-inset ring-indigo-500/20">What's new</a>
           <span class="inline-flex items-center space-x-2 text-sm font-medium leading-6 text-gray-300">
             <a href="https://docs.servicestack.net/ai-chat-ui">Just shipped: AI ChatGPT-like UI</a>
           </span>

MyApp/Pages/React/Index.cshtml

@@ -45,7 +45,7 @@
             <div class="max-w-2xl">
                 <div class="inline-flex items-center rounded-full border border-cyan-500/30 bg-cyan-950/30 px-3 py-1 text-sm font-medium text-cyan-300 backdrop-blur-xl mb-8">
                     <span class="flex h-2 w-2 rounded-full bg-cyan-400 mr-2 animate-pulse"></span>
-                    New React Templates Available
+                    <a href="/react/#start">New React Templates Available</a>
                 </div>
 
                 <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-white leading-[1.1]">
@@ -574,7 +574,7 @@
 
         <div>
             <div class="mb-8">
-                <h3 class="mt-8 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-50 dark:text-gray-50 sm:text-4xl">
+                <h3 id="start" class="mt-8 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-50 dark:text-gray-50 sm:text-4xl">
                     Getting Started
                 </h3>
 

MyApp/Pages/Vue/Index.cshtml

@@ -30,7 +30,7 @@
                         <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#42b883] opacity-75"></span>
                         <span class="relative inline-flex rounded-full h-2 w-2 bg-[#42b883]"></span>
                     </span>
-                    <span>Vue Component Library</span>
+                    <a href="https://docs.servicestack.net/vue/autoquerygrid">Vue Component Library</a>
                 </div>
 
                 <!-- Headline -->

MyApp/wwwroot/css/app.css

@@ -140,6 +140,7 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --breakpoint-sm: 40rem;
     --breakpoint-md: 48rem;
     --breakpoint-lg: 64rem;
     --breakpoint-xl: 80rem;
@@ -1394,15 +1395,36 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
+  .max-w-\[8rem\] {
+    max-width: 8rem;
+  }
+  .max-w-\[10rem\] {
+    max-width: 10rem;
+  }
+  .max-w-\[12rem\] {
+    max-width: 12rem;
+  }
+  .max-w-\[20rem\] {
+    max-width: 20rem;
+  }
   .max-w-\[48\%\] {
     max-width: 48%;
   }
+  .max-w-\[100px\] {
+    max-width: 100px;
+  }
   .max-w-\[100rem\] {
     max-width: 100rem;
   }
   .max-w-\[240px\] {
     max-width: 240px;
   }
+  .max-w-\[500px\] {
+    max-width: 500px;
+  }
+  .max-w-\[640px\] {
+    max-width: 640px;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -1427,6 +1449,9 @@
   .max-w-screen-md {
     max-width: var(--breakpoint-md);
   }
+  .max-w-screen-sm {
+    max-width: var(--breakpoint-sm);
+  }
   .max-w-sm {
     max-width: var(--container-sm);
   }