Merge pull request #49 from LBRYFoundation/style-change

Style Changes

astro.config.mjs

@@ -1,17 +1,25 @@
 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";
 
 // https://astro.build/config
 export default defineConfig({
   prefetch: true,
-  integrations: [preload(), codeblocks({
-    // Copy Button Options
-    copyButtonTitle: 'Copy',
-    copyButtonTooltip: 'Copied to clipboard',
-  }), mdx()],
+  integrations: [preload(),
+  orama({
+    // We can generate more than one DB, with different configurations
+    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,8 +4,10 @@
   "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",

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>
-        <div class="body">
-            <a class="button-primary" href="/playground">Explore our Playground</a>
-        </div>
+        <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%;
-        height: 100%;
+        width: 90%;
+        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; */
-        width: 70%;
-        align-self: center;
-        /* top: 25%; */
-        /* left: 85px; */
-        /* top: 92px; */
-        transform: rotate(-2deg);
+        min-width: 100%;
+        height: 100%;
         transform-origin: 0 0;
         box-shadow: 2px 2px 2px;
+        /* border-radius: 16px; */
+        /* filter: blur(1px); */
+    }
+
+    .card {
+        position: absolute;
+        top: 50%;
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        max-height: 337.5px;
+        box-shadow: 0 1px 5px #00000099;
+        transform: rotate3d(0);
+        transform: translate(0, -50%);
         border-radius: 16px;
-        filter: blur(1px);
+        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;
     }
 
-    /* img {
+    .card .glow {
         position: absolute;
-        width: 70%;
-        transform: translateY(-40%);
-        border-radius: 1em;
-        box-shadow: inset 0 0 10px 10px #000;
-    } */
+        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;
         }
@@ -150,4 +271,4 @@
             color: var(--accent);
         }
     }
-</style>
+</style>

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

@@ -93,6 +93,10 @@ const isActive = (href: string)=>{
             transition: 0.3s;
             z-index: 10;
         }
+
+        .wrapper .sidebar a {
+            color: var(--body-text);
+        }
 
         .wrapper .sidebar .container {
             position: relative;
@@ -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;