#astro amp | Explore Tumblr posts and blogs

sensualnoiree · 8 months ago

Text

astro notes: daily transits & horoscopes 10/24

Thursday begins with the Leo Moon squaring the Scorpio Sun, marking the Last Quarter phase of the lunar cycle. This is a critical time for reflection and release, especially as the lunar cycle began with the potent solar eclipse on October 2. The focus is on clearing out emotional, physical, or spiritual clutter in preparation for the upcoming New Moon on November 1. The energy shifts to a more optimistic and heart-centered tone by the afternoon as the Leo Moon trines Venus in Sagittarius, sparking desires for romance, pleasure, and adventure. To add to this positive energy, a bold Mars-Uranus sextile gives us the courage to take risks and trust in new experiences.

Rising Sign Delineations:

Aries Rising The Last Quarter Moon in your 5th house of creativity and pleasure squares the Sun in your 8th house, urging you to release any emotional baggage related to intimacy, shared resources, or power dynamics. This is a time to declutter your emotional space and clear out lingering fears around vulnerability. The Moon-Venus trine in your 5th and 9th houses invites you to engage in fun, playful activities—perhaps through a spontaneous trip or philosophical exploration. With Mars in your 4th house sextile Uranus in your 2nd house, you’re encouraged to take risks in your personal life, whether that’s around home matters or finances.

Taurus Rising The Last Quarter Moon activates your 4th house of home and family, squaring the Scorpio Sun in your 7th house of relationships. You may feel the need to let go of old emotional patterns tied to your family or partnerships. The Moon-Venus trine in your 4th and 8th houses opens the door for heart-to-heart conversations at home or deep emotional bonding with a partner. Mars sextile Uranus between your 3rd and 1st houses encourages you to take bold actions in communication, helping you express your needs more authentically.

Gemini Rising With the Last Quarter Moon in your 3rd house of communication squaring the Sun in your 6th house, this is a time to release any mental clutter or outdated ways of thinking that may be affecting your daily routines. The Moon-Venus trine in your 3rd and 7th houses brings opportunities for harmonious and loving conversations with those closest to you, especially partners or close friends. Mars in your 2nd house sextile Uranus in your 12th house encourages you to take financial risks based on intuitive insights or spiritual guidance.

Cancer Rising The Last Quarter Moon in your 2nd house of values and resources squares the Scorpio Sun in your 5th house, asking you to release attachments to outdated beliefs around money, self-worth, or how you express yourself creatively. This afternoon’s Moon-Venus trine between your 2nd and 6th houses supports self-care and indulgence in practical pleasures, such as a health-focused treat or something that makes you feel good in your body. With Mars sextile Uranus between your 1st and 11th houses, you’re feeling bold in social situations, ready to take risks in your connections and personal goals.

Leo Rising The Last Quarter Moon in your 1st house squares the Scorpio Sun in your 4th house, signaling a need to release any emotional baggage that’s been weighing on your sense of self, especially in relation to family or home matters. Today’s Moon-Venus trine in your 1st and 5th houses brings a playful and romantic energy, perfect for enjoying creative activities or spending time with a loved one. Mars in your 12th house sextile Uranus in your 10th house encourages you to take a bold step toward your career goals, even if it feels risky.

Virgo Rising The Last Quarter Moon in your 12th house of subconscious patterns squares the Scorpio Sun in your 3rd house, pushing you to let go of hidden fears or anxieties that may be blocking your ability to communicate openly. This is a time to declutter your mind and focus on mental clarity. The Moon-Venus trine in your 12th and 4th houses supports emotional healing and finding pleasure in private, introspective activities. Mars sextile Uranus between your 11th and 9th houses encourages you to take risks in pursuing your long-term goals or spiritual path.

Libra Rising The Last Quarter Moon in your 11th house of social networks squares the Scorpio Sun in your 2nd house, encouraging you to release any limiting beliefs around money or self-worth that may be impacting your friendships or community involvement. The Moon-Venus trine in your 11th and 3rd houses invites you to connect with friends in a way that brings joy and lightness, perhaps through social gatherings or uplifting conversations. Mars in your 10th house sextile Uranus in your 8th house encourages you to take a bold step in your career, especially in matters of shared resources or personal transformation.

Scorpio Rising The Last Quarter Moon in your 10th house of career squares the Scorpio Sun in your 1st house, asking you to release any outdated goals or public personas that no longer align with who you truly are. This is a time to let go of professional expectations that don’t serve your personal growth. The Moon-Venus trine in your 10th and 2nd houses brings a sense of pleasure and reward through your work or financial ventures. Mars in your 9th house sextile Uranus in your 7th house encourages bold, exciting developments in relationships, especially those tied to shared adventures or belief systems.

Sagittarius Rising The Last Quarter Moon in your 9th house of higher learning squares the Scorpio Sun in your 12th house, encouraging you to release any subconscious beliefs or fears that may be limiting your personal growth or spiritual expansion. The Moon-Venus trine in your 9th and 1st houses invites you to explore romance and pleasure through travel or intellectual pursuits. With Mars in your 8th house sextile Uranus in your 6th house, you’re encouraged to take risks in matters of health, wellness, or shared resources, trusting that innovative approaches will pay off.

Capricorn Rising The Last Quarter Moon in your 8th house of transformation squares the Scorpio Sun in your 11th house, asking you to let go of emotional attachments or fears around power dynamics in your friendships or community. The Moon-Venus trine in your 8th and 12th houses supports deep emotional healing, possibly through introspective practices or intimate connections. Mars sextile Uranus between your 7th and 5th houses encourages you to take risks in relationships or creative projects, trusting that change will bring excitement and renewal.

Aquarius Rising The Last Quarter Moon in your 7th house of relationships squares the Scorpio Sun in your 10th house, pushing you to release any outdated relationship patterns that may be impacting your career or public image. The Moon-Venus trine in your 7th and 11th houses invites harmony and pleasure in your social interactions, especially within partnerships or group settings. Mars sextile Uranus between your 6th and 4th houses encourages you to take bold actions in your daily routine or home life, embracing innovative solutions that lead to growth.

Pisces Rising The Last Quarter Moon in your 6th house of work and health squares the Scorpio Sun in your 9th house, asking you to let go of any limiting beliefs that may be holding you back from fully embracing a wellness or daily routine. The Moon-Venus trine in your 6th and 10th houses brings pleasure through work or career accomplishments, especially those that allow you to indulge in self-care or wellness. Mars in your 5th house sextile Uranus in your 3rd house encourages you to take risks in creative pursuits or communications, trusting your instincts to lead the way.

follow for more astro insights like this and head on over to @quenysefields or my etsy --> sensualnoiree to grab my new astrology guidebook on reading your own natal chart :)

#astro #astro community #astro blog #astro observations #sensualnoiree #astrology #astro notes #astro posts #astro placements #astrology signs #astrology chart #astrology readings #astroblr #astrocom #astrology fyp #astrology notes #astrology observations #astronotes

21 notes · View notes

married-2-the-music · 1 year ago

Text

Ranking: K-pop Boy Group Soloists(Part ONE)

This time, I thought I would try something different on the blog. Instead of doing a deep dive into one group, I’m doing shallow dives into a bunch of soloists and their first mini albums, then comparing and contrasting. This time is male soloists, from SHINee to ASTRO to BTS. For each, I watched an interview if I could find one, to get to know them better. So, let’s get into it! Minho of SHINee…

View On WordPress

1 note · View note

aethreaicarus · 5 months ago

Text

The Main Characters are here!

Astro I wanted to look both fancy and cosy! So I went with star patterned pyjamas and a long ponytail! I also gave him makeup cuz yes-

For Pebble I was struggling a little with what dog breed he would be, eventually I settled on a French bulldog and Pomeranian mix! I don't want the Twisted charging at me- I reference a bit of Pet Sematary for his Twisted and I'm scared-

Shelly has a bigger body build and her outfit didn't change much, but I gave her a hat I've seen in Qwel's sketches!

Oh Sprout had me simping- I gave him dimples because yes and a roll cake hairclip to reference Cosmo! For his Twisted, I wanted it to look like his leaves wilted and died.

Vee was fun~! I amp up the gameshow hostess vibes and gave her some Murder Drones vibes. For her Twisted I went for a FNAF/Security Breach vibes!

But of course... The star of the show remains. The one behind the Ichor operations. It's his fault after all.

#dandys world #dandy's world fanart #dandy's world astro #dandy's world pebble #dandy's world shelly #dandy's world sprout #dandy's world vee

8 notes · View notes

jcmarchi · 3 months ago

Text

Powering Search With Astro Actions and Fuse.js

New Post has been published on https://thedigitalinsider.com/powering-search-with-astro-actions-and-fuse-js/

Powering Search With Astro Actions and Fuse.js

Static sites are wonderful. I’m a big fan.

They also have their issues. Namely, static sites either are purely static or the frameworks that generate them completely lose out on true static generation when you just dip your toes in the direction of server routes.

Astro has been watching the front-end ecosystem and is trying to keep one foot firmly embedded in pure static generation, and the other in a powerful set of server-side functionality.

With Astro Actions, Astro brings a lot of the power of the server to a site that is almost entirely static. A good example of this sort of functionality is dealing with search. If you have a content-based site that can be purely generated, adding search is either going to be something handled entirely on the front end, via a software-as-a-service solution, or, in other frameworks, converting your entire site to a server-side application.

With Astro, we can generate most of our site during our build, but have a small bit of server-side code that can handle our search functionality using something like Fuse.js.

In this demo, we’ll use Fuse to search through a set of personal “bookmarks” that are generated at build time, but return proper results from a server call.

Starting the project

To get started, we’ll just set up a very basic Astro project. In your terminal, run the following command:

npm create astro@latest

Astro’s adorable mascot Houston is going to ask you a few questions in your terminal. Here are the basic responses, you’ll need:

Where should we create your new project? Wherever you’d like, but I’ll be calling my directory ./astro-search

How would you like to start your new project? Choose the basic minimalist starter.

Install dependencies? Yes, please!

Initialize a new git repository? I’d recommend it, personally!

This will create a directory in the location specified and install everything you need to start an Astro project. Open the directory in your code editor of choice and run npm run dev in your terminal in the directory.

When you run your project, you’ll see the default Astro project homepage.

We’re ready to get our project rolling!

Basic setup

To get started, let’s remove the default content from the homepage. Open the /src/pages/index.astro file.

This is a fairly barebones homepage, but we want it to be even more basic. Remove the <Welcome /> component, and we’ll have a nice blank page.

For styling, let’s add Tailwind and some very basic markup to the homepage to contain our site.

npx astro add tailwind

The astro add command will install Tailwind and attempt to set up all the boilerplate code for you (handy!). The CLI will ask you if you want it to add the various components, I recommend letting it, but if anything fails, you can copy the code needed from each of the steps in the process. As the last step for getting to work with Tailwind, the CLI will tell you to import the styles into a shared layout. Follow those instructions, and we can get to work.

Let’s add some very basic markup to our new homepage.

--- // ./src/pages/index.astro import Layout from '../layouts/Layout.astro'; --- <Layout> <div class="max-w-3xl mx-auto my-10"> <h1 class="text-3xl text-center">My latest bookmarks</h1> <p class="text-xl text-center mb-5">This is only 10 of A LARGE NUMBER THAT WE'LL CHANGE LATER</p> </div> </Layout>

Your site should now look like this.

Not exactly winning any awards yet! That’s alright. Let’s get our bookmarks loaded in.

Adding bookmark data with Astro Content Layer

Since not everyone runs their own application for bookmarking interesting items, you can borrow my data. Here’s a small subset of my bookmarks, or you can go get 110 items from this link on GitHub. Add this data as a file in your project. I like to group data in a data directory, so my file lives in /src/data/bookmarks.json.

Open code

[ King Arthur Baking", "url": "<https://www.kingarthurbaking.com/recipes/our-favorite-sandwich-bread-recipe>", "description": "Classic American sandwich loaf, perfect for French toast and sandwiches.", "id": "007y8pmEOvhwldfT3wx1MW" , "pageTitle": "Chris Coyier's discussion of Automatic Social Share Images , "pageTitle": "Automatic Social Share Images , "pageTitle": "Emma Wedekind: Foundations of Design Systems / React Boston 2019 - YouTube", "url": "<https://m.youtube.com/watch?v=pXb2jA43A6k>", "description": "Emma Wedekind: Foundations of Design Systems / React Boston 2019 Presented by: Emma Wedekind – LogMeIn Design systems are in the world around us, from street...", "id": "0d56d03e-aba4-4ebd-9db8-644bcc185e33" , "pageTitle": "Editorial Design Patterns With CSS Grid And Named Columns — Smashing Magazine", "url": "<https://www.smashingmagazine.com/2019/10/editorial-design-patterns-css-grid-subgrid-naming/>", "description": "By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids.", "id": "13ac1043-1b7d-4a5b-a3d8-b6f5ec34cf1c" , "pageTitle": "Netlify pro tip: Using Split Testing to power private beta releases - DEV Community 👩‍💻👨‍💻", "url": "<https://dev.to/philhawksworth/netlify-pro-tip-using-split-testing-to-power-private-beta-releases-a7l>", "description": "Giving users ways to opt in and out of your private betas. Video and tutorial.", "id": "1fbabbf9-2952-47f2-9005-25af90b0229e" , "pageTitle": "Netlify Public Folder, Part I: What? Recreating the Dropbox Public Folder With Netlify , "pageTitle": "Why Is CSS So Weird? - YouTube", "url": "<https://m.youtube.com/watch?v=aHUtMbJw8iA&feature=youtu.be>", "description": "Love it or hate it, CSS is weird! It doesn't work like most programming languages, and it doesn't work like a design tool either. But CSS is also solving a v...", "id": "2e29aa3b-45b8-4ce4-85b7-fd8bc50daccd" , "pageTitle": "Internet world despairs as non-profit .org sold for $$$$ to private equity firm, price caps axed • The Register", "url": "<https://www.theregister.co.uk/2019/11/20/org_registry_sale_shambles/>", "id": "33406b33-c453-44d3-8b18-2d2ae83ee73f" , "pageTitle": "Netlify Identity for paid subscriptions - Access Control / Identity - Netlify Community", "url": "<https://community.netlify.com/t/netlify-identity-for-paid-subscriptions/1947/2>", "description": "I want to limit certain functionality on my website to paying users. Now I’m using a payment provider (Mollie) similar to Stripe. My idea was to use the webhook fired by this service to call a Netlify function and give…", "id": "34d6341c-18eb-4744-88e1-cfbf6c1cfa6c" , "pageTitle": "SmashingConf Freiburg 2019: Videos And Photos — Smashing Magazine", "url": "<https://www.smashingmagazine.com/2019/10/smashingconf-freiburg-2019/>", "description": "We had a lovely time at SmashingConf Freiburg. This post wraps up the event and also shares the video of all of the Freiburg presentations.", "id": "354cbb34-b24a-47f1-8973-8553ed1d809d" , "pageTitle": "Adding Google Calendar to your JAMStack", "url": "<https://www.raymondcamden.com/2019/11/18/adding-google-calendar-to-your-jamstack>", "description": "A look at using Google APIs to add events to your static site.", "id": "361b20c4-75ce-46b3-b6d9-38139e03f2ca" , "pageTitle": "How to Contribute to an Open Source Project , Netlify", "url": "<https://www.netlify.com/docs/functions/>", "description": "Netlify builds, deploys, and hosts your front end. Learn how to get started, see examples, and view documentation for the modern web platform.", "id": "3bf9e31b-5288-4b3b-89f2-97034603dbf6" , "pageTitle": "Serverless Can Help You To Focus - By Simona Cotin", "url": "<https://hackernoon.com/serverless-can-do-that-7nw32mk>", "id": "43b1ee63-c2f8-4e14-8700-1e21c2e0a8b1" , "pageTitle": "Nuxt, Next, Nest?! My Head Hurts. - DEV Community 👩‍💻👨‍💻", "url": "<https://dev.to/laurieontech/nuxt-next-nest-my-head-hurts-5h98>", "description": "I clearly know what all of these things are. Their names are not at all similar. But let's review, just to make sure we know...", "id": "456b7d6d-7efa-408a-9eca-0325d996b69c" , "pageTitle": "Consuming a headless CMS GraphQL API with Eleventy - Webstoemp", "url": "<https://www.webstoemp.com/blog/headless-cms-graphql-api-eleventy/>", "description": "With Eleventy, consuming data coming from a GraphQL API to generate static pages is as easy as using Markdown files.", "id": "4606b168-21a6-49df-8536-a2a00750d659" , ]

Now that the data is in the project, we need for Astro to incorporate the data into its build process. To do this, we can use Astro’s new(ish) Content Layer API. The Content Layer API adds a content configuration file to your src directory that allows you to run and collect any number of content pieces from data in your project or external APIs. Create the file /src/content.config.ts (the name of this file matters, as this is what Astro is looking for in your project).

import defineCollection, z from "astro:content"; import file from 'astro/loaders'; const bookmarks = defineCollection( schema: z.object( pageTitle: z.string(), url: z.string(), description: z.string().optional() ), loader: file("src/data/bookmarks.json"), ); export const collections = bookmarks ;

In this file, we import a few helpers from Astro. We can use defineCollection to create the collection, z as Zod, to help define our types, and file is a specific content loader meant to read data files.

The defineCollection method takes an object as its argument with a required loader and optional schema. The schema will help make our content type-safe and make sure our data is always what we expect it to be. In this case, we’ll define the three data properties each of our bookmarks has. It’s important to define all your data in your schema, otherwise it won’t be available to your templates.

We provide the loader property with a content loader. In this case, we’ll use the file loader that Astro provides and give it the path to our JSON.

Finally, we need to export the collections variable as an object containing all the collections that we’ve defined (just bookmarks in our project). You’ll want to restart the local server by re-running npm run dev in your terminal to pick up the new data.

Using the new bookmarks content collection

Now that we have data, we can use it in our homepage to show the most recent bookmarks that have been added. To get the data, we need to access the content collection with the getCollection method from astro:content. Add the following code to the frontmatter for ./src/pages/index.astro .

--- import Layout from '../layouts/Layout.astro'; import getCollection from 'astro:content'; const bookmarks = await getCollection('bookmarks'); ---

This code imports the getCollection method and uses it to create a new variable that contains the data in our bookmarkscollection. The bookmarks variable is an array of data, as defined by the collection, which we can use to loop through in our template.

--- import Layout from '../layouts/Layout.astro'; import getCollection from 'astro:content'; const bookmarks = await getCollection('bookmarks'); --- <Layout> <div class="max-w-3xl mx-auto my-10"> <h1 class="text-3xl text-center">My latest bookmarks</h1> <p class="text-xl text-center mb-5"> This is only 10 of bookmarks.length </p> <h2 class="text-2xl mb-3">Latest bookmarks</h2> <ul class="grid gap-4"> bookmarks.slice(0, 10).map((item) => ( <li> <a href=item.data?.url class="block p-6 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"> <h3 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"> item.data?.pageTitle </h3> <p class="font-normal text-gray-700 dark:text-gray-400"> item.data?.description </p> </a> </li> )) </ul> </div> </Layout>

This should pull the most recent 10 items from the array and display them on the homepage with some Tailwind styles. The main thing to note here is that the data structure has changed a little. The actual data for each item in our array actually resides in the data property of the item. This allows Astro to put additional data on the object without colliding with any details we provide in our database. Your project should now look something like this.

Now that we have data and display, let’s get to work on our search functionality.

Building search with actions and vanilla JavaScript

To start, we’ll want to scaffold out a new Astro component. In our example, we’re going to use vanilla JavaScript, but if you’re familiar with React or other frameworks that Astro supports, you can opt for client Islands to build out your search. The Astro actions will work the same.

Setting up the component

We need to make a new component to house a bit of JavaScript and the HTML for the search field and results. Create the component in a ./src/components/Search.astro file.

<form id="searchForm" class="flex mb-6 items-center max-w-sm mx-auto"> <label for="simple-search" class="sr-only">Search</label> <div class="relative w-full"> <input type="text" id="search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search Bookmarks" required /> </div> <button type="submit" class="p-2.5 ms-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> <svg class="w-4 h-4" aria-hidden="true" xmlns="<http://www.w3.org/2000/svg>" fill="none" viewBox="0 0 20 20"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"></path> </svg> <span class="sr-only">Search</span> </button> </form> <div class="grid gap-4 mb-10 hidden" id="results"> <h2 class="text-xl font-bold mb-2">Search Results</h2> </div> <script> const form = document.getElementById("searchForm"); const search = document.getElementById("search"); const results = document.getElementById("results"); form?.addEventListener("submit", async (e) => e.preventDefault(); console.log("SEARCH WILL HAPPEN"); ); </script>

The basic HTML is setting up a search form, input, and results area with IDs that we’ll use in JavaScript. The basic JavaScript finds those elements, and for the form, adds an event listener that fires when the form is submitted. The event listener is where a lot of our magic is going to happen, but for now, a console log will do to make sure everything is set up properly.

Setting up an Astro Action for search

In order for Actions to work, we need our project to allow for Astro to work in server or hybrid mode. These modes allow for all or some pages to be rendered in serverless functions instead of pre-generated as HTML during the build. In this project, this will be used for the Action and nothing else, so we’ll opt for hybrid mode.

To be able to run Astro in this way, we need to add a server integration. Astro has integrations for most of the major cloud providers, as well as a basic Node implementation. I typically host on Netlify, so we’ll install their integration. Much like with Tailwind, we’ll use the CLI to add the package and it will build out the boilerplate we need.

npx astro add netlify

Once this is added, Astro is running in Hybrid mode. Most of our site is pre-generated with HTML, but when the Action gets used, it will run as a serverless function.

Setting up a very basic search Action

Next, we need an Astro Action to handle our search functionality. To create the action, we need to create a new file at ./src/actions/index.js. All our Actions live in this file. You can write the code for each one in separate files and import them into this file, but in this example, we only have one Action, and that feels like premature optimization.

In this file, we’ll set up our search Action. Much like setting up our content collections, we’ll use a method called defineAction and give it a schema and in this case a handler. The schema will validate the data it’s getting from our JavaScript is typed correctly, and the handler will define what happens when the Action runs.

import defineAction from "astro:actions"; import z from "astro:schema"; import getCollection from "astro:content"; export const server = search: defineAction( schema: z.object( query: z.string(), ), handler: async (query) => const bookmarks = await getCollection("bookmarks"); const results = await bookmarks.filter((bookmark) => return bookmark.data.pageTitle.includes(query); ); return results; , ), ;

For our Action, we’ll name it search and expect a schema of an object with a single property named query which is a string. The handler function will get all of our bookmarks from the content collection and use a native JavaScript .filter() method to check if the query is included in any bookmark titles. This basic functionality is ready to test with our front-end.

Using the Astro Action in the search form event

When the user submits the form, we need to send the query to our new Action. Instead of figuring out where to send our fetch request, Astro gives us access to all of our server Actions with the actions object in astro:actions. This means that any Action we create is accessible from our client-side JavaScript.

In our Search component, we can now import our Action directly into the JavaScript and then use the search action when the user submits the form.

When results are returned, we can now get search results!

Though, they’re highly problematic. This is just a simple JavaScript filter, after all. You can search for “Favorite” and get my favorite bread recipe, but if you search for “favorite” (no caps), you’ll get an error… Not ideal.

That’s why we should use a package like Fuse.js.

Adding Fuse.js for fuzzy search

Fuse.js is a JavaScript package that has utilities to make “fuzzy” search much easier for developers. Fuse will accept a string and based on a number of criteria (and a number of sets of data) provide responses that closely match even when the match isn’t perfect. Depending on the settings, Fuse can match “Favorite”, “favorite”, and even misspellings like “favrite” all to the right results.

Is Fuse as powerful as something like Algolia or ElasticSearch? No. Is it free and pretty darned good? Absolutely! To get Fuse moving, we need to install it into our project.

npm install fuse.js

From there, we can use it in our Action by importing it in the file and creating a new instance of Fuse based on our bookmarks collection.

import defineAction from "astro:actions"; import z from "astro:schema"; import getCollection from "astro:content"; import Fuse from "fuse.js"; export const server = search: defineAction( schema: z.object( query: z.string(), ), handler: async (query) => const bookmarks = await getCollection("bookmarks"); const fuse = new Fuse(bookmarks, threshold: 0.3, keys: [ name: "data.pageTitle", weight: 1.0 , name: "data.description", weight: 0.7 , name: "data.url", weight: 0.3 , ], ); const results = await fuse.search(query); return results; , ), ;

In this case, we create the Fuse instance with a few options. We give it a threshold value between 0 and 1 to decide how “fuzzy” to make the search. Fuzziness is definitely something that depends on use case and the dataset. In our dataset, I’ve found 0.3 to be a great threshold.

The keys array allows you to specify which data should be searched. In this case, I want all the data to be searched, but I want to allow for different weighting for each item. The title should be most important, followed by the description, and the URL should be last. This way, I can search for keywords in all these areas.

Once there’s a new Fuse instance, we run fuse.search(query) to have Fuse check the data, and return an array of results.

When we run this with our front-end, we find we have one more issue to tackle.

The structure of the data returned is not quite what it was with our simple JavaScript. Each result now has a refIndex and an item. All our data lives on the item, so we need to destructure the item off of each returned result.

To do that, adjust the front-end forEach.

// create a div for each search result data.forEach(( item ) => const div = document.createElement("div"); div.innerHTML = ` <a href="$item.data?.url" class="block p-6 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"> <h3 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"> $item.data?.pageTitle </h3> <p class="font-normal text-gray-700 dark:text-gray-400"> $item.data?.description </p> </a>`; // append the div to the results container results.appendChild(div); );

Now, we have a fully working search for our bookmarks.

Next steps

This just scratches the surface of what you can do with Astro Actions. For instance, we should probably add additional error handling based on the error we get back. You can also experiment with handling this at the page-level and letting there be a Search page where the Action is used as a form action and handles it all as a server request instead of with front-end JavaScript code. You could also refactor the JavaScript from the admittedly low-tech vanilla JS to something a bit more robust with React, Svelte, or Vue.

One thing is for sure, Astro keeps looking at the front-end landscape and learning from the mistakes and best practices of all the other frameworks. Actions, Content Layer, and more are just the beginning for a truly compelling front-end framework.

0 notes

mercurytrinemoon · 1 year ago

Text

Aries risings and eclipses: comebacks and rebrands

There's a few celebrities that caught my attention in the past couple of weeks and I felt the urge to look at their charts and talk about them a bit. What I've quickly realized is that… they're all Aries risings and we just went through a total eclipse in Aries and are still battling through a Mercury retrograde (also in Aries). So, this is an Aries rising-only astro news compilation.

Shakira

During the recent Easter break I found myself having a Shakira moment, reminiscing on her old hits and belting out Underneath Your Clothes. I thought that's probably thanks to Mercury just stationing retrograde, which often makes people go back to old stuff. And then I thought… What if everyone's having a Shakira moment now?

And this is when I realized suddenly she's everywhere: giving a surprise show at Times Square, being a guest on Hot Ones, giving a ton of new interviews that flood my YouTube recommend page. She just released a new album but seems like this is a huge reset for her and her name is, once again, on everyone's lips. Shakira is an Aries rising and an Aries Venus with nodes in her 1st and 7th axis - she's not quite an eclipse baby (although almost a Full Moon baby!) but nodes close to her axis may make her sensitive to eclipse seasons. Her ascendant ruler, Mars, is exalted in the 10th house in Capricorn, giving her a slow and steady rise to success and a grounded, solidified place in the public eye.

Interestingly, she received an MTV Vanguard award just last autumn at a time of her exact reverse nodal return, which already foreshadowed things for her.

Her new album was released on March 22nd this year, just a couple of days after Sun ingressed into Aries and a few days before the eclipse. What's important to note that she's also going through her Jupiter return in Taurus. Mercury retrograding in her 1st house makes people and the media reminisce on her career and what she achieved up to this point. Of course a planet retrograding in someone's 1st house can cause a hiccup of some sorts and that happened in her case as well - there was a small outrage surrounding her comments on the last year's Barbie movie and how she and her sons hated it.

Jojo Siwa

Switching lanes let's get to someone that is now talked about in the media excessively but for the wrong reasons and that is… Jojo Siwa. Now, I had to read up on her after I saw people poking fun at the way she's presenting herself but apparently, she was all rainbows and sunshines until she changed her color palette to black and is now calling herself edgy and groundbreaking. She was on Toddlers and Tiaras I believe… so you get the vibe.

Siwa is a Taurus stellium (makes sense with the bows and glitter) with Aries rising, of course. Her ascendant ruler is right next to Neptune in the 11th house, which can bring potential problems when it comes to how she's being received by the public. The badazzledness of the sweet sweet Taurus is amped up by the flashy Jupiter in Leo (opposed by that Mars and squared by Mercury, certainly adding to the loudness of her personality and the, let's say, overall audacity).

The nodes are pretty significant for her as well, as her Sun is accompanied by the north node (really intensifying the Sun's radiant quality) and… she's actually an eclipse baby, being born in the middle of the eclipse season, only three days after a total lunar eclipse in Scorpio. So we have double the strength of having eclipses in her 1st-7th house axis, as well as being an eclipse child in general.

So the "rebranding" seems, well, on brand for her at this time. But again, Mercury retrograding in her 1st house seems to not serve her well, especially given she has it retrograde natally as well. Uranus being co-present in her sign, a bubbly Taurus, paired with Jupiter, which is still a pretty badazzled planet, didn't result in a true 180° switch that she aimed for. In turn we got a somewhat inflated (Jupiter) sense of self and a warped view of things.

But the plus side is that the current Jupiter transit also helped her gain popularity as her video for the new song passed 23 million views on YouTube. Talk about expansion!

Rihanna

Rihanna didn't make a comeback in the same sense Shakira did but she surely made people talk. The singer is allegedly an Aries rising but she also has quite an Aries planetary party with Moon, Venus and Jupiter there as well. And in a true Aries fashion, even if she's not necessarily doing much with her career at the moment, she made sure to remind everyone of herself, especially that she's also in her 1st house profection year so it's all about "ME!" - something an Aries loves.

Rihanna made the headlines by doing a fashion spread for the Interview Magazine. And, to be more precise, by posing in a nun-inspired outfit. The cover photo made some people outraged, while others were sighing in awe. The news broke pretty much on the eclipse (the morning after I believe).

Rihanna dabbles in these high-fashion, obscure themes probably because of the mixture of her Pisces Sun (religious themes? She surely went all-in for the Catholic-themed MET Gala a few year back) and her Aries stellium in the 1st. The ram likes to shock and be bold and sexual but considering she also has Moon and Venus - two feminine planets - in the sign, makes her bold and daring in her fashion choices as well.

Billie Eilish

The last person I want to talk about is… Billie Eilish. I know, I KNOW, you may think "but she's a Pisces rising!". Well Billie somewhat went through a different kind of rebrand and it's that her birth certificate has just been obtained and according to the new info, she is, in fact an Aries rising.

The confusion might be there although if, like me, you see a massive Pisces influence in her, her "new" ascendant ruler is Mars… in Pisces! A corrected birth time is a big deal already, especially given the eclipse and Mercury retrograde - both helped "refresh" her astrological persona and "status" as an Aries ascendant. But that is not all, as on the day of the eclipse Billie announced a brand new album that she will debut on May 17th.

EDIT: Billie is also an eclipse baby! Born just 4 days after a Solar Eclipse. So this is even more fitting.

What's great about this date is that Mars will already be in Aries, probably making her a lot more active. Also, that is only one day before Jupiter cazimi and Venus conjunct Uranus - a great time to release new things into the world. Interestingly, Venus and Uranus will conjoin just a couple of degrees away from Billie's lot of fortune in Taurus. I truly love when astrology is doing its thing.

#random #astrology #mercurytrinemoon #astrology notes #astro notes #celebrity chart #astro observations #aries #shakira #rihanna #jojo siwa #billie eilish

39 notes · View notes