Bump sass from 1.77.2 to 1.77.8

Bumps [sass](https://github.com/sass/dart-sass) from 1.77.2 to 1.77.8.
- [Release notes](https://github.com/sass/dart-sass/releases)
- [Changelog](https://github.com/sass/dart-sass/blob/main/CHANGELOG.md)
- [Commits](https://github.com/sass/dart-sass/compare/1.77.2...1.77.8)

---
updated-dependencies:
- dependency-name: sass
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

astro.config.mjs

@@ -1,6 +1,7 @@
 import { defineConfig } from 'astro/config';
 import codeblocks from "@thewebforge/astro-code-blocks";
 import preload from "astro-preload";
+import orama from '@orama/plugin-astro';
 import * as config from './src/config.js';
 
 import mdx from "@astrojs/mdx";
@@ -8,10 +9,17 @@ import mdx from "@astrojs/mdx";
 // https://astro.build/config
 export default defineConfig({
   prefetch: true,
-  integrations: [preload(), codeblocks({
+  integrations: [preload(),
-    // Copy Button Options
+  orama({
-    copyButtonTitle: 'Copy',
+    // We can generate more than one DB, with different configurations
-    copyButtonTooltip: 'Copied to clipboard',
+    mydb: {
+      // Required. Only pages matching this path regex will be indexed
+      pathMatcher: /resources|turorials|api\/[0-9]{4}\/[0-9]{2}\/[0-9]{2}\/.+|spec|\/overview$/,
+
+      // Optional. ['body'] by default. Use it to constraint what is used to
+      // index a page.
+      contentSelectors: ['.content'],
+    },
     }), mdx()],
   redirects: config.REDIRECTS,
 });

package.json

@@ -4,13 +4,15 @@
   "dependencies": {
     "@astrojs/mdx": "^3.0.1",
     "@lbry/components": "^4.2.5",
+    "@orama/plugin-astro": "^2.0.7",
     "@thewebforge/astro-code-blocks": "^0.2.0",
     "astro": "^4.8.6",
+    "astro-loading-indicator": "^0.4.0",
     "astro-preload": "^1.1.2",
     "markdown-wasm": "^1.2.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "sass": "^1.77.2"
+    "sass": "^1.77.8"
   },
   "scripts": {
     "dev": "astro dev",

src/components/Footer.astro

@@ -17,6 +17,10 @@
         background-color: var(--tertiary-background);
     }
 
+    footer a {
+        color: var(--body-color);
+    }
+
     footer ul {
         display: flex;
         gap: 25px;

src/components/Header.astro

@@ -39,7 +39,19 @@ function handleMenu(e) {
       </ul>
     </div>
     <div class="right">
-        <div class="search"><p>Search TODO</p></div>
+        <div class="search"><p>Search TODO</p><script>
+          // Astro will do the job of bundling everything for you
+          import { getOramaDB, search } from "@orama/plugin-astro/client"
+      
+          // We load the DB that we generated at build time, this is an asynchronous
+          // operation, so we must either await, or rely on `.then` calls.
+          const db = await getOramaDB('mydb')
+      
+          // Now we can search inside our DB. Of course, feel free to use it in more
+          // interesting ways.
+          console.log('Search Results')
+          console.log(await search(db, { term: 'blob' }))
+        </script></div>
         <btn id="menu">
             <span></span>
             <span></span>

src/components/Hero.astro

@@ -7,12 +7,65 @@
         </div>
     </div>
     <div class="right">
-        <figure><img src="https://picsum.photos/750/420" /></figure>
+        <figure>
+            <div class="card">
+                <img src="https://picsum.photos/750/420" />
+                <div class="glow" />
                 <div class="body">
                     <a class="button-primary" href="/playground">Explore our Playground</a>
                 </div>
             </div>
+        </figure>
     </div>
+</div>
+<script>
+  const card = document.querySelector('.card');
+  let bounds;
+
+  function rotateToMouse(e) {
+  const mouseX = e.clientX;
+  const mouseY = e.clientY;
+  const leftX = mouseX - bounds.x;
+  const topY = mouseY - bounds.y;
+  const center = {
+    x: leftX - bounds.width / 2,
+    y: topY - bounds.height / 2
+  }
+  const distance = Math.sqrt(center.x**2 + center.y**2);
+  
+  card.style.transform = `
+    scale3d(1.07, 1.07, 1.07)
+    rotate3d(
+      ${center.y / 100},
+      ${-center.x / 100},
+      0,
+      ${Math.log(distance)* 2}deg
+    )
+    translate(0, -50%)
+  `;
+  
+  card.querySelector('.glow').style.backgroundImage = `
+    radial-gradient(
+      circle at
+      ${center.x * 2 + bounds.width/2}px
+      ${center.y * 2 + bounds.height/2}px,
+      #ffffff55,
+      #0000000f
+    )
+  `;
+  }
+
+  card.addEventListener('mouseenter', () => {
+    bounds = card.getBoundingClientRect();
+        document.addEventListener('mousemove', rotateToMouse);
+    });
+
+    card.addEventListener('mouseleave', () => {
+        document.removeEventListener('mousemove', rotateToMouse);
+        card.style.transform = '';
+        card.style.background = '';
+    });
+</script>
 <style>
 
 	.hero {
@@ -61,7 +114,13 @@
 
     .hero .right .body {
         position: absolute;
+        top: 50%;
+        left: 50%;
+        display: flex;
+        width: 100%;
         align-items: center;
+        justify-content: center;
+        transform: translate(-50%, -50%);
     }
 
     .hero .right .body a {
@@ -84,38 +143,61 @@
 
     .hero .right figure {
         position: absolute;
-        top: 0;
+        top: 50%;
         left: 0;
-        width: 100%;
+        width: 90%;
-        height: 100%;
+        max-width: 600px;
+        padding-top: 56.25%;
+        margin: auto;
         display: flex;
         align-items: center;
         justify-content: center;
         /* max-height: 90%; */
-        overflow: hidden;
+        /* overflow: hidden; */
+        transform: translate(0, -50%);
     }
 
     .hero .right img {
-        /* position: absolute; */
+        min-width: 100%;
-        width: 70%;
+        height: 100%;
-        align-self: center;
-        /* top: 25%; */
-        /* left: 85px; */
-        /* top: 92px; */
-        transform: rotate(-2deg);
         transform-origin: 0 0;
         box-shadow: 2px 2px 2px;
-        border-radius: 16px;
+        /* border-radius: 16px; */
-        filter: blur(1px);
+        /* filter: blur(1px); */
     }
 
-    /* img {
+    .card {
         position: absolute;
-        width: 70%;
+        top: 50%;
-        transform: translateY(-40%);
+        display: flex;
-        border-radius: 1em;
+        justify-content: center;
-        box-shadow: inset 0 0 10px 10px #000;
+        width: 100%;
-    } */
+        height: 100%;
+        max-height: 337.5px;
+        box-shadow: 0 1px 5px #00000099;
+        transform: rotate3d(0);
+        transform: translate(0, -50%);
+        border-radius: 16px;
+        overflow: hidden;
+        transition-duration: 300ms;
+        transition-property: transform, box-shadow;
+        transition-timing-function: ease-out;
+    }
+
+    .hero .right figure:hover .card {
+        box-shadow: 0 5px 20px 5px #00000044;
+        transition-duration: 150ms;
+    }
+
+    .card .glow {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        
+        background-image: radial-gradient(circle at 50% -20%, #ffffff22, #0000000f);
+    }
 
     @media only screen and (max-width: 1000px) {
         .hero {
@@ -136,6 +218,45 @@
             width: 80%;
         }
 
+        .hero .right figure {
+            position: relative;
+            width: 90%;
+            display: flex;
+            padding-top: 0;
+            align-items: center;
+            justify-content: center;
+            /* max-height: 90%; */
+            /* overflow: hidden; */
+            transform: translate(0, 0);
+        }
+
+        .hero .right figure .card {
+            position: relative;
+            width: 100%;
+            height: unset;
+            max-width: 600px;
+            box-shadow: 0 1px 5px #00000099;
+            transform: rotate3d(0);
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: none;
+        }
+
+        .hero .right figure .card:hover {
+            box-shadow: none;
+        }
+
+        .hero .right figure .card .body {
+            position: relative;
+            transform: translate(0, 0);
+            top: 0;
+            left: 0;
+        }
+
+        .hero .right figure img, .hero .right figure .glow {
+            display: none;
+        }
+
         .hero .body {
             width: fit-content;
         }

src/components/Resources.astro

@@ -11,7 +11,7 @@ import { resources } from '../config';
         {resources.map((resource: object) => (
             <div class="resource">
                 <div class="text">
-                    <p class="title">{resource.title}</p>
+                    <h2 class="title">{resource.title}</h2>
                     <p class="description">{resource.description}</p>
                 </div>
                 <div class="button-primary"><a href={resource.href}>Study {resource.title}</a></div>

src/components/TableOfContents.astro

@@ -57,6 +57,10 @@ const toc = headings && headings.length ? TocItem(headings) : [];
         font-size: 0.785rem;
     }
 
+    .toc ul li a {
+        color: var(--body-text);
+    }
+
     @media only screen and (max-width: 750px) {
         /* .toc {
             margin-top: var(--nav-height);

src/config.js

@@ -71,6 +71,11 @@ export const featured = [
   }
 ]
 
+export const meta = {
+  title: "LBRY Tech",
+  color: "#27E4EB"
+}
+
 export const REDIRECTS = {
   // "/api/blockchain": "/api/lbrycrd",
   // "/api/lbry": "/api/sdk",

src/layouts/Collections.astro

@@ -94,6 +94,10 @@ const isActive = (href: string)=>{
             z-index: 10;
         }
 
+        .wrapper .sidebar a {
+            color: var(--body-text);
+        }
+        
         .wrapper .sidebar .container {
             position: relative;
             padding: 1rem 1rem 0;
@@ -173,7 +177,7 @@ const isActive = (href: string)=>{
             inset-block: 0;
             inset-inline-end: 2rem;
             margin: calc(2rem + var(--nav-height)) 0;
-            // background-color: var(--secondary-background);
+            /* background-color: var(--secondary-background); */
             transition: 0.3s;
             z-index: 10;
             overflow-y: auto;

src/layouts/Layout.astro

@@ -4,12 +4,17 @@ import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 
 import { ViewTransitions } from 'astro:transitions';
+import LoadingIndicator from "astro-loading-indicator/component"
+
+import * as config from '../config.js';
+
 
 interface Props {
 	title?: string;
+	description?: string;
 }
 
-const { title } = Astro.props;
+const { title, description } = Astro.props;
 ---
 
 <!doctype html>
@@ -19,10 +24,10 @@ const { title } = Astro.props;
 		<title>{title || 'LBRY Tech'}</title>
 
 		<meta name="apple-mobile-web-app-capable" content="yes"/>
-		<meta name="author" content="${config.meta.title}"/>
+		<meta name="author" content={config.meta.title}/>
-		<meta name="description" content="${description}"/>
+		<meta name="description" content={description || config.meta.title}/>
-		<meta name="title" content="${config.meta.title}"/>
+		<meta name="title" content={config.meta.title}/>
-		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 		<!-- / Open Graph / -->
 		<meta property="og:title" content={title}/>
@@ -33,20 +38,21 @@ const { title } = Astro.props;
 		<meta property="og:locale" content="en_US"/>
 		<meta property="og:site_name" content="LBRY.tech"/>
 		<meta property="og:type" content="website"/>
-		<meta property="og:url" content="https://lbry.tech${state.href}"/>
+		<meta property="og:url" content={`https://lbry.tech${Astro.url.href}`}/>
 
 		<!-- / Social/App Stuff / -->
-		<meta name="apple-mobile-web-app-title" content="${config.meta.title}"/>
+		<meta name="apple-mobile-web-app-title" content={config.meta.title}/>
-		<meta name="application-name" content="${config.meta.title}"/>
+		<meta name="application-name" content={config.meta.title}/>
-		<meta name="msapplication-TileColor" content="${config.meta.color}"/>
+		<meta name="msapplication-TileColor" content={config.meta.color}/>
 		<meta name="msapplication-TileImage" content="/assets/apple-touch-icon.png"/>
-		<meta name="theme-color" content="${config.meta.color}"/>
+		<meta name="theme-color" content={config.meta.color}/>
 
 		<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png"/>
 		<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml"/>
-		<link rel="mask-icon" href="/assets/favicon.svg" color="${config.meta.color}"/>
+		<link rel="mask-icon" href="/assets/favicon.svg" color={config.meta.color}/>
 		<link rel="shortcut icon" href="/assets/favicon.ico"/>
 		<ViewTransitions />
+		<LoadingIndicator color="#27E4EB" />
 	</head>
 	<body>
 		<Header/>

src/styles/Header.css

@@ -3,6 +3,10 @@ header {
     background-color: var(--tertiary-background);
 }
 
+header a {
+    color: var(--body-text);
+}
+
 header nav {
     display: flex;
     justify-content: space-between;

src/styles/global.scss

@@ -85,7 +85,7 @@ p {
 }
 
 a {
-    color: var(--body-text);
+    color: var(--accent);
     text-decoration: none;
 }
 
@@ -103,6 +103,7 @@ a {
     border-radius: 0.5em;
     padding: 10px 20px;
     background-color: var(--tertiary-background);
+    color: var(--body-text);
 }
 
 .button-primary:hover {

src/styles/markdown.css

@@ -50,7 +50,7 @@ h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
       /* --color-border-muted: #21262d; */
       --color-border-muted: var(--tertiary-background);
       --color-neutral-muted: rgba(110,118,129,0.4);
-      --color-accent-fg: #2f81f7;
+      --color-accent-fg: var(--accent);
       --color-accent-emphasis: #1f6feb;
       --color-attention-fg: #d29922;
       --color-attention-subtle: rgba(187,128,9,0.15);
@@ -59,7 +59,7 @@ h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
 }
   
   .markdown-body {
-    font-size: 16px;
+    font-size: 1rem;
     line-height: 1.5;
     word-wrap: break-word;
   }
@@ -252,6 +252,8 @@ h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
     width: max-content;
     max-width: 100%;
     overflow: auto;
+    border-radius: 0.5em;
+    background-color: var(--tertiary-background);
   }
   
   .markdown-body td,
@@ -403,6 +405,7 @@ h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
     font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
     font-size: 12px;
     word-wrap: normal;
+    background-color: var(--secondary-background) !important;
   }
   
   .markdown-body .octicon {