mirror of
https://github.com/LBRYFoundation/lbry-tech.git
synced 2025-03-03 14:47:53 +00:00
fix conflicts
This commit is contained in:
parent
ee24935bdb
commit
d16586f9a3
14 changed files with 2312 additions and 921 deletions
|
|
@ -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({
|
||||
// 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,
|
||||
});
|
||||
2967
package-lock.json
generated
2967
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,10 @@
|
|||
background-color: var(--tertiary-background);
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--body-color);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
display: flex;
|
||||
gap: 25px;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
/* border-radius: 16px; */
|
||||
/* filter: blur(1px); */
|
||||
}
|
||||
|
||||
/* img {
|
||||
.card {
|
||||
position: absolute;
|
||||
width: 70%;
|
||||
transform: translateY(-40%);
|
||||
border-radius: 1em;
|
||||
box-shadow: inset 0 0 10px 10px #000;
|
||||
} */
|
||||
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;
|
||||
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;
|
||||
}
|
||||
|
|
@ -150,4 +271,4 @@
|
|||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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="description" content="${description}"/>
|
||||
<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="author" content={config.meta.title}/>
|
||||
<meta name="description" content={description || config.meta.title}/>
|
||||
<meta name="title" content={config.meta.title}/>
|
||||
<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="application-name" content="${config.meta.title}"/>
|
||||
<meta name="msapplication-TileColor" content="${config.meta.color}"/>
|
||||
<meta name="apple-mobile-web-app-title" content={config.meta.title}/>
|
||||
<meta name="application-name" content={config.meta.title}/>
|
||||
<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/>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@ header {
|
|||
background-color: var(--tertiary-background);
|
||||
}
|
||||
|
||||
header a {
|
||||
color: var(--body-text);
|
||||
}
|
||||
|
||||
header nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue