update the ui for creating/editing notes

app/notes.py

@@ -100,16 +100,21 @@ def edit(note_id):
         #     options={"transform": {"width": 200}},
         # )
 
-        # Alternatively we can use Pillow to handle our image transform but
-        # the burden will be on our own server rather than Supabase's and we
-        # have to write a lot more code to accomplish the transform, you may
-        # also want to cache this as this action will be performed everytime
-        # you load an image. Pillow transform code can be found in the
-        # resize_image function below
-        r = supabase.storage.from_("featured_image").get_public_url(
-            note["featured_image"]
-        )
-        preview_image = resize_image(r, 200, 200)
+        try:
+            # Alternatively we can use Pillow to handle our image transform but
+            # the burden will be on our own server rather than Supabase's and we
+            # have to write a lot more code to accomplish the transform, you may
+            # also want to cache this as this action will be performed everytime
+            # you load an image. Pillow transform code can be found in the
+            # resize_image function below
+            r = supabase.storage.from_("featured_image").get_public_url(
+                note["featured_image"]
+            )
+            preview_image = resize_image(r, 200, 200)
+        except:
+            # We should log that the image isn't loading along with the error 
+            # message but for this demo we will just skip this
+            pass
 
     if form.validate_on_submit():
         title = form.title.data
@@ -148,7 +153,7 @@ def edit(note_id):
             )
 
             if res:
-                flash("Your new note was added successfully.", "info")
+                flash("Your note was updated successfully.", "info")
                 return redirect(url_for("notes.home"))
             else:
                 flash(

package.json

@@ -25,7 +25,7 @@
     "tailwindcss": "^3.3.3"
   },
   "devDependencies": {
-    "supabase": "2.67.1",
+    "supabase": "2.72.9",
     "vite": "^5.0.0"
   }
 }

supabase/seed.sql

@@ -28,3 +28,203 @@ UPDATE "public"."profiles_info" SET
     "dob" = '1999-02-18',
     "profile_location" = 'East Vivienneton, Jamaica'
 WHERE profile_id = '4c6ed4d5-746c-4124-9d3e-b32e5f769476';
+
+--
+-- Data for Name: notes; Type: TABLE DATA; Schema: public; Owner: postgres
+--
+
+INSERT INTO "public"."notes" ("id", "author_id", "title", "content", "featured_image", "is_public", "created_at", "updated_at") VALUES
+	('b5ba00e1-4aa6-44a0-a6a5-225405a0bee5', 'd0fc7e46-a8a5-4fd4-8ba7-af485013e6fa', 'Winter Travel Tips: How to Stay Safe, Cozy, and Stress-Free on the Road', 'Winter travel has a special kind of magic—snow-covered landscapes, fewer crowds, and that cozy feeling of escaping the cold (or embracing it). But winter also brings delays, slippery roads, and weather that doesn’t care about your itinerary. A little planning goes a long way.
+
+Whether you’re heading to a snowy mountain town or flying somewhere sunny, these winter travel tips will help you stay safe, comfortable, and sane.
+
+## 1. Check the Weather (Then Check It Again)
+
+Winter weather can change fast. A sunny forecast today can turn into a snowstorm tomorrow.
+
+- Check the forecast a few days before departure and again the morning you leave  
+- Look at conditions along your entire route, not just your destination  
+- Sign up for flight or train alerts so you’re notified about delays early  
+
+Flexibility is your best friend in winter.
+
+## 2. Pack Smart, Not Heavy
+
+Layering beats bulky packing every time. Aim for clothing you can mix, match, and adjust.
+
+Essentials to consider:
+- Thermal base layers  
+- A waterproof outer layer (coat, boots, gloves)  
+- Extra socks (more than you think you need)  
+- A warm hat and scarf—even if you “never wear them”  
+
+If you’re flying, pack at least one warm outfit in your carry-on in case your luggage is delayed.
+
+## 3. Prepare for Travel Delays
+
+Winter delays are common, especially at busy airports.
+
+To stay comfortable during unexpected waits:
+- Bring snacks and a refillable water bottle  
+- Download movies, podcasts, or books ahead of time  
+- Keep chargers and power banks easily accessible  
+
+A calm mindset helps too—build buffer time into your plans whenever possible.
+
+## 4. Winterize Your Road Trip
+
+Driving in winter requires extra preparation.
+
+Before you go:
+- Check tire tread and tire pressure  
+- Top off windshield washer fluid rated for freezing temperatures  
+- Keep an emergency kit in your car (blanket, flashlight, snacks, jumper cables)  
+
+And remember: slow down. Getting there safely always beats getting there fast.
+
+## 5. Protect Your Skin and Health
+
+Cold air and dry heat can be tough on your body.
+
+Don’t forget to pack:
+- Moisturizer and lip balm  
+- Hand cream (especially for flights)  
+- Any medications you may need if you get stuck traveling longer than planned  
+
+Staying hydrated helps more than people realize—even in cold weather.
+
+## 6. Embrace Seasonal Experiences
+
+One upside of winter travel is access to experiences you won’t find other times of year.
+
+Depending on where you’re going, look for:
+- Winter festivals or holiday markets  
+- Snowshoeing, skiing, or ice skating  
+- Cozy cafés, hot springs, or scenic train rides  
+
+Lean into the season instead of fighting it.
+
+## 7. Get Travel Insurance
+
+Winter travel comes with higher odds of cancellations and delays. Travel insurance can cover:
+- Weather-related trip interruptions  
+- Lost or delayed baggage  
+- Emergency accommodations  
+
+It’s one of those things you hope you won’t need—but are glad you have.
+
+## Final Thoughts
+
+Winter travel doesn’t have to be stressful. With a bit of planning, realistic expectations, and the right gear, it can be one of the most memorable times to explore somewhere new. Pack smart, stay flexible, and don’t forget to enjoy the slower pace that winter naturally brings.
+
+Safe travels—and stay warm out there.', 'd0fc7e46-a8a5-4fd4-8ba7-af485013e6fa/hq7llejm_fi.png', true, '2025-12-28 21:43:37.398559+00', NULL),
+	('f7fce10f-5cf4-4613-949c-a4b118e96a6d', 'd0fc7e46-a8a5-4fd4-8ba7-af485013e6fa', 'Summer Holidays: How to Plan the Perfect Sunny Escape', 'Summer holidays are all about longer days, lighter moods, and the freedom to slow down or speed up depending on your travel style. Whether you’re dreaming of beach lounging, cultural city breaks, or outdoor adventures, a little planning can turn a good summer trip into a great one.
+
+Here’s how to make the most of your summer holidays without the stress.
+
+## 1. Choose the Right Destination for Your Style
+
+Not all summer trips are the same. Before booking, think about what you actually want to do.
+
+Ask yourself:
+- Do I want relaxation, adventure, or culture?
+- Am I okay with crowds, or do I prefer quieter spots?
+- Do I want heat, mild weather, or a mix of both?
+
+Coastal towns, islands, and lakes are perfect for unwinding, while cities and national parks offer variety and energy.
+
+## 2. Book Early (or Be Strategically Last-Minute)
+
+Summer is peak travel season in many places, which means popular hotels and flights fill up fast.
+
+- Book early for family travel and major tourist destinations  
+- Look for shoulder-season dates in early June or late August  
+- Be flexible with airports and travel days to find better deals  
+
+A little flexibility can save you money—and headaches.
+
+## 3. Pack Light, Smart, and Breathable
+
+Hot weather calls for practical packing.
+
+Summer essentials include:
+- Lightweight, breathable clothing  
+- Comfortable walking shoes or sandals  
+- Sun protection: sunscreen, sunglasses, and a hat  
+- A reusable water bottle  
+
+Leave room in your bag for souvenirs and spontaneous finds.
+
+## 4. Plan Around the Heat
+
+Midday heat can drain your energy fast, especially in warm destinations.
+
+To stay comfortable:
+- Schedule sightseeing early in the morning or late afternoon  
+- Take midday breaks for lunch, swimming, or rest  
+- Choose accommodations with air conditioning or shaded outdoor spaces  
+
+Traveling at a slower pace often leads to better experiences.
+
+## 5. Embrace Local Summer Culture
+
+Summer brings festivals, food, and outdoor life to the forefront.
+
+Look for:
+- Open-air markets and street food  
+- Local festivals, concerts, or beach events  
+- Sunset walks, evening cafés, and nighttime city energy  
+
+These moments often become the highlights of a summer holiday.
+
+## 6. Stay Safe in the Sun
+
+It’s easy to underestimate how strong the sun can be when you’re having fun.
+
+Remember to:
+- Apply sunscreen regularly (especially after swimming)  
+- Drink plenty of water throughout the day  
+- Take shade breaks to avoid heat exhaustion  
+
+Taking care of yourself means you can enjoy more of your trip.
+
+## 7. Leave Room for Spontaneity
+
+Some of the best summer memories come from unplanned moments.
+
+- Say yes to last-minute boat trips or local recommendations  
+- Wander without an agenda once in a while  
+- Allow downtime to simply enjoy where you are  
+
+A perfect itinerary still needs breathing room.
+
+## Final Thoughts
+
+Summer holidays are less about checking boxes and more about enjoying the feeling of being somewhere new. With smart planning, realistic expectations, and a relaxed mindset, your summer escape can be refreshing, memorable, and exactly what you need.
+
+Here’s to sunshine, new places, and unforgettable summer days. ☀️
+', 'd0fc7e46-a8a5-4fd4-8ba7-af485013e6fa/thaenzhx_fi.png', true, '2025-12-28 20:22:45.697065+00', NULL);
+
+
+--
+-- Data for Name: shortkeys; Type: TABLE DATA; Schema: public; Owner: postgres
+--
+
+INSERT INTO "public"."shortkeys" ("id", "created_at") VALUES
+	('GM4kvUihM4Q', '2025-12-28 20:22:45.697065+00'),
+	('PmVblrFXdX8', '2025-12-28 20:23:10.898893+00'),
+	('HxHHG4KPFfM', '2025-12-28 21:43:37.398559+00'),
+	('NUUwiu1oFMU', '2025-12-28 21:43:40.745445+00'),
+	('Fn8TZZNUuQQ', '2025-12-28 21:47:49.837509+00'),
+	('x6WhRsQp5Ek', '2025-12-28 21:48:15.192522+00'),
+	('IM49MhCGogQ', '2025-12-28 21:51:47.971795+00'),
+	('XFJ6_BLvgck', '2025-12-31 18:05:24.223385+00'),
+	('9WD-1huwLCM', '2025-12-31 18:07:05.120053+00'),
+	('6Ke2RyOcHKQ', '2025-12-31 18:09:19.882442+00'),
+	('0Av9rxCkvjA', '2025-12-31 18:14:22.925978+00'),
+	('SYhDvsQZbEk', '2025-12-31 18:15:05.759066+00'),
+	('wVruOz66UuM', '2025-12-31 18:27:18.319267+00'),
+	('MGJZYXzftuw', '2025-12-31 18:29:36.804977+00'),
+	('SRuzxE-xto4', '2025-12-31 18:31:34.657098+00');
+
+

templates/index.html

@@ -14,7 +14,7 @@ <h2 class="font-semibold text-2xl mb-4 pb-4 border-b">All Notes</h2>
           <div class="flex flex-col">
             <p class="flex items-center text-sm">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"></path>
               </svg>
               <span class="flex flex-col">
                 <a href="{{ url_for('u', slug=note.profiles.slug) }}" class="text-gray-400 hover:text-gray-600">{{ note.profiles.display_name }}</a>
@@ -24,9 +24,6 @@ <h2 class="font-semibold text-2xl mb-4 pb-4 border-b">All Notes</h2>
             <h3 class="text-lg leading-6 font-medium text-gray-900 mt-2">
               <a href="{{ url_for('user_note', slug=note.profiles.slug, note_slug=note.slug) }}" class="block h-6 font-medium hover:text-indigo-500 group">
                 <span>{{ note.title }}</span>
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 hidden group-hover:inline ml-2">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
-                </svg>                      
               </a>
             </h3>
             <p class="mt-2 max-w-2xl text-sm text-gray-500">{{ note.content | truncate(190) | markdown }}</p>

templates/notes/edit.html

@@ -5,13 +5,13 @@
 {% block title %}Edit Note{% endblock %}
 
 {% block content %}
-<div class="w-11/12 p-12 px-6 py-10 rounded-lg sm:w-8/12 md:w-6/12 lg:w-full 2xl:w-3/12 sm:px-10 sm:py-6">
+<div class="w-11/12 p-12 px-6 py-10 rounded-lg lg:w-full 2xl:w-8/12 sm:px-9 sm:py-6">
   {{ breadcrumbs('Notes', 'notes.home', 'Edit Note') }}
-  <div class="flex">
-      <div class="flex-auto">
-          <h2 class="font-semibold text-2xl mb-4">Edit Note</h2>
-      </div>
-  </div>
+  <!-- <div class="flex"> -->
+  <!--     <div class="flex-auto"> -->
+  <!--         <h2 class="font-semibold text-2xl mb-4">Edit Note</h2> -->
+  <!--     </div> -->
+  <!-- </div> -->
 
   {{ alert('mb-10') }}
   <form class="flex flex-row gap-2" action="{{ url_for('notes.edit', note_id=note.id) }}" method="post" enctype="multipart/form-data">
@@ -20,7 +20,7 @@ <h2 class="font-semibold text-2xl mb-4">Edit Note</h2>
 			<div class="col-span-6 sm:col-span-3">
 				<div class="form-control">
 					{{ form.title.label(class="label") }}
-					{{ form.title(class="border-b border-gray-200 p-4") }}
+					{{ form.title(class="border-b border-gray-200 text-xl font-semibold p-4") }}
 				</div>
 				{{ form_error(form.title) }}
 			</div>

templates/notes/index.html

@@ -5,7 +5,7 @@
 {% block title %}Notes{% endblock %}
 
 {% block content %}
-<div class="w-11/12 p-12 px-6 py-10 rounded-lg lg:w-full 2xl:w-5/12 sm:px-10 sm:py-6">
+<div class="w-11/12 p-12 px-6 py-10 rounded-lg lg:w-full 2xl:w-8/12 sm:px-10 sm:py-6">
     <div class="flex">
         <div class="flex-auto">
             <h2 class="font-semibold text-2xl mb-4">Notes</h2>
@@ -23,9 +23,9 @@ <h2 class="font-semibold text-2xl mb-4">Notes</h2>
         {% for note in notes %}
         <li class="border-b border-gray-200 rounded">
           <div class="flex gap-2 items-center justify-between">
-            <a href="{{ url_for('notes.edit', note_id=note.id) }}" class="grow font-medium text-gray-600 hover:text-gray-500 px-4 py-3 sm:px-6">
-              <h3 class="text-base leading-6 font-semibold">{{ note.title }}</h3>
-              <p class="mt-0 max-w-2xl text-xs text-gray-500">{{ note.content | truncate(60) | markdown }}</p>
+            <a href="{{ url_for('notes.edit', note_id=note.id) }}" class="grow font-medium text-gray-600 hover:text-gray-500 px-4 pb-3 sm:px-6">
+              <h3 class="text-lg leading-6 font-semibold mb-2">{{ note.title }}</h3>
+              <p class="mt-0 max-w-2xl text-xs text-gray-500">{{ note.content | truncate(240) | markdown }}</p>
             </a>
             <div class="flex items-center justify-between">
               {% if not note.is_public %}