waveterm/docusaurus-og
0
0
Fork 0
mirror of https://github.com/wavetermdev/docusaurus-og.git synced 2026-08-05 13:46:35 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #23 from acid-info/final-hero

Browse Source 
3d presets and hero typography
This commit is contained in:
jeangovil
2023-06-02 21:45:46 +03:30
committed by GitHub
parent d91cc4950e 6616fa0e02
commit 7f5250104d
11 changed files with 129 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/docusaurus-playground/docusaurus.config.js
+9 -1
View File
@@ -26,7 +26,7 @@ const config = {
'@acid-info/logos-docusaurus-preset',
/** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */
({
businessUnit: 'Nimbus',
businessUnit: 'Nomos',
theme: {
name: 'default',
options: {
@@ -66,6 +66,14 @@ const config = {
label: 'About',
to: '/about',
},
{
label: 'Features',
href: '/#features',
},
{
label: 'Usecases',
href: '/#usecases',
},
{
label: 'Github',
href: 'https://github.com/status-im',
packages/docusaurus-playground/src/pages/index.mdx
+8 -7
View File
@@ -13,9 +13,9 @@ import {
Box,
} from '../components/mdx'
<Hero size="medium">
<Hero size="large">
<HeroInfo>
<HeroTitle>Durable, decentralized data storage</HeroTitle>
<HeroTitle>Ethereum network participation for everyone</HeroTitle>
{/*
<HeroDescription className={"long"}>
Waku is a decentralized communications network that enables private, censorship-resistant messaging for web3
@@ -23,12 +23,13 @@ import {
</HeroDescription>
* */}
<HeroDescription className={'short'}>
Codex provides immutable, censorship-resistant data storage via a
censorship-resistant, permissionless and incentivized p2p network
Nimbus promotes client diversity and decentralization on Ethereum by
lowering participation barriers and reducing hardware overheads for
validators
</HeroDescription>
<HeroActions>
<HeroAction href="https://docs.waku.org" target="_blank">
Build on Waku
<HeroAction href="/about" target="_blank">
Learn more
</HeroAction>
<HeroAction variant="filled" href="https://docs.waku.org" target="_blank">
Run Waku
@@ -39,7 +40,7 @@ import {
modelId={'architecture04'}
mode={'abstract'}
rotateSpeed={0.04}
startY={'top'}
startY={'bottom'}
asciiConfig={{
characters: ' + ^ ^%%%0 -a @@@ ###',
}}
packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss
+14 -8
View File
@@ -7,16 +7,22 @@
z-index: -2;
font-weight: 100 !important;
text-shadow: 1px 1px 6px rgba(var(--lsd-surface-primary), 1);
opacity: 0.7;
line-height: 2.3rem !important;
}
.mdx-hero-description--small {
margin-top: 1rem;
//margin-top: 1rem;
@include lsd.typography('h6');
max-width: 1200px;
}
.mdx-hero-description--large {
font-size: 5.0625rem !important;
line-height: 5.5rem !important;
text-transform: uppercase;
}
.mdx-hero-description--medium {
@include lsd.typography('h3');
}
@include utils.responsive('lg', 'down') {
@@ -25,12 +31,12 @@
}
.mdx-hero-description--large {
font-size: 1.875rem !important;
line-height: 2.25rem !important;
text-transform: uppercase;
//font-size: 1.875rem !important;
//line-height: 2.25rem !important;
//text-transform: uppercase;
}
.mdx-hero-description--medium {
@include lsd.typography('h4');
@include lsd.typography('subtitle1');
}
}
packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/Controls.tsx
+3 -6
View File
@@ -30,7 +30,7 @@ function calculateVector(
target: number[],
): [number, number, number] {
// Calculate the lerp factor based on the scroll position
const t = scrollY / scrollYMax
const t = Math.min(scrollY, scrollYMax) / scrollYMax
const newVector = [0, 0, 0]
for (let i = 0; i < 3; i++) {
@@ -58,11 +58,8 @@ export const Controls = ({
const [lockOrbit, setLockOrbit] = React.useState(false)
useFrame((state, delta) => {
const speed = enableRotateOnScroll
? calcRotateSpeed(scrollY, rotateSpeed)
: rotateSpeed
ref.current.rotation.y += delta * (isMobile() ? 0.1 * speed : speed)
ref.current.rotation.y -=
delta * (isMobile() ? 0.1 * rotateSpeed : rotateSpeed)
})
useEffect(() => {
packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.configs.ts
+63 -12
View File
@@ -84,10 +84,10 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [
],
},
abstract: {
cameraPos: [2.299135943394893, 0.8656851576290204, -0.7027825038010787],
cameraRot: [-1.916700195994318, 1.0755068798100078, 1.959565308882676],
cameraPos: [1.8397825927313005, 0.5006635210357668, -0.7112749496103248],
cameraRot: [-2.0637769654190388, 0.941591559117755, 2.1572780914058356],
controlsTarget: [
0.6048467950344667, 0.0046384989689828805, -0.3924669053385349,
0.7525282128865571, -0.19650999135957886, -0.33673737792715125,
],
},
targetLook: {
@@ -110,12 +110,30 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [
],
},
abstract: {
cameraPos: [1.1470783184950044, 0.23878712525763962, 1.4621079231748313],
cameraRot: [0.0781563760261837, 0.753617521461716, -0.05353888616056665],
cameraPos: [-0.5465903796360435, 0.8773980794748312, 0.08538618930043433],
cameraRot: [
-0.26855166005001807, -1.1713993239674987, -0.24830772343977955,
],
controlsTarget: [
-0.10475467093508074, 0.34294485241818873, 0.1321388746243302,
-0.0544632211815667, 0.8222830795164463, -0.1148867151943581,
],
},
targetLook: {
cameraPos: [-0.08633866196975185, 1.065498410363367, 3.299441795447572],
cameraRot: [
-0.30705338387773307, -0.04232616594886318, -0.01341603621000156,
],
controlsTarget: [
0.057360484222938594, 0.03995565554668334, 0.06512362298065871,
],
},
// abstract: {
// cameraPos: [1.1470783184950044, 0.23878712525763962, 1.4621079231748313],
// cameraRot: [0.0781563760261837, 0.753617521461716, -0.05353888616056665],
// controlsTarget: [
// -0.10475467093508074, 0.34294485241818873, 0.1321388746243302,
// ],
// },
},
{
modelId: 'architecture06',
@@ -154,13 +172,33 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [
-0.03052411570622545, 1.1636581998026059, 0.23819862568800665,
],
},
// abstract: {
// cameraPos: [-0.05747471409961126, 1.1561369169508278, 0.2934743027588207],
// cameraRot: [
// 0.13523803197626882, -0.45004875426349367, 0.05912213357583956,
// ],
// controlsTarget: [
// -0.03052411570622545, 1.1636581998026059, 0.23819862568800665,
// ],
// },
abstract: {
cameraPos: [-0.05747471409961126, 1.1561369169508278, 0.2934743027588207],
cameraPos: [
-0.18886266143333627, 1.0759713173211645, 0.49472614307040697,
],
cameraRot: [
0.13523803197626882, -0.45004875426349367, 0.05912213357583956,
0.11827338438455919, -0.49355424749746096, 0.056236459481599846,
],
controlsTarget: [
-0.03052411570622545, 1.1636581998026059, 0.23819862568800665,
-0.03586918676122722, 1.1095292429426495, 0.21231853618809665,
],
},
targetLook: {
cameraPos: [-0.6194495673706852, 0.6791728914823414, 1.1145248759455844],
cameraRot: [
0.08253419059538356, -0.589296072042965, 0.045942607479927136,
],
controlsTarget: [
0.09058057232790886, 0.7667301800204325, 0.05607398084523753,
],
},
},
@@ -176,9 +214,22 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [
],
},
abstract: {
cameraPos: [0, 0, 0],
cameraRot: [0, 0, 0],
controlsTarget: [0, 0, 0],
cameraPos: [-0.04896235033638902, 0.9472082701791184, 0.5228785650143615],
cameraRot: [
0.09075944802968429, -0.13324364459355229, 0.012089995097095805,
],
controlsTarget: [
-0.006060485975867984, 0.9762180394124839, 0.20412308284554606,
],
},
targetLook: {
cameraPos: [-0.09472312110216502, 0.9706051013497217, 1.2832894173829374],
cameraRot: [
-0.19425365632872382, -0.10491000822068351, -0.020598661004321738,
],
controlsTarget: [
0.031601966631050554, 0.7390204722154392, 0.1061462404432137,
],
},
},
{
packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.scss
+2 -1
View File
@@ -27,7 +27,7 @@
}
.mdx-hero-model--top {
top: 0;
top: 300px;
}
.mdx-hero-model--bottom {
@@ -46,6 +46,7 @@
.mdx-hero-model--ascii {
filter: grayscale(100%);
opacity: 0.65;
table {
&,
* {
packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.tsx
+4 -3
View File
@@ -48,7 +48,7 @@ const useLookPreset = (
}
const getInitialY = (mode: 'abstract' | 'simple'): number => {
return mode === 'abstract' ? 0 : window.innerWidth > 997 ? -100 : 0
return mode === 'abstract' ? 0 : window.innerWidth > 997 ? 0 : 0
}
export const HeroModel = (props: HeroModelProps) => {
@@ -89,7 +89,8 @@ export const HeroModel = (props: HeroModelProps) => {
...(withParallelEffect
? {
transform: `translateY(${
getInitialY(mode) + scrollY * 0.1
0
// getInitialY(mode) + scrollY * 0.1
}px) scale(var(--mdx-hero-model-wrapper-scale))`,
}
: {}),
@@ -134,7 +135,7 @@ export const HeroModel = (props: HeroModelProps) => {
scrollY,
0,
calcScrollThreshold() * RESIZE_SPEED_FACTOR,
1,
0,
1,
),
}}
packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/index.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export const HeroModel: React.FC<HeroModelProps> = (props) => {
return (
<div
style={{
transform: `translateY(${offsetY}px)`,
// transform: `translateY(${-1*offsetY}px)`,
position: 'absolute',
top: 0,
left: 0,
packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss
+10 -1
View File
@@ -5,11 +5,16 @@
font-weight: 300 !important;
z-index: 1;
text-shadow: 0px 0px 6px rgba(var(--lsd-surface-primary), 0.5);
@include lsd.typography('h4');
}
.mdx-hero-title--large {
font-size: 5.0625rem !important;
line-height: 5.5rem !important;
line-height: 5rem !important;
}
.mdx-hero-title--medium {
@include lsd.typography('h2');
}
.mdx-hero-title--uppercase {
@@ -21,8 +26,12 @@
@include lsd.typography('h4');
text-transform: uppercase;
}
.mdx-hero-title--medium {
@include lsd.typography('h4');
}
.mdx-hero-title--large {
font-size: 1.875rem !important;
line-height: 2.1rem !important;
}
}
packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/ScrollToBottom.tsx
+7 -2
View File
@@ -2,6 +2,7 @@ import { ArrowDownIcon, IconButton } from '@acid-info/lsd-react'
import clsx from 'clsx'
import React, { HTMLProps } from 'react'
import styles from './styles.module.scss'
import { useScrollY } from '../../../lib/useScrollY'
type TProps = {}
@@ -9,7 +10,7 @@ export const ScrollToBottom = (
props: TProps & HTMLProps<HTMLButtonElement>,
): JSX.Element => {
const { children, className, ...rest } = props
const scrollY = useScrollY()
const handleScrollToBottom = () => {
const article = document.querySelector('.main-wrapper article')
const secondElement = article?.children?.[1]
@@ -28,7 +29,11 @@ export const ScrollToBottom = (
<IconButton
onClick={handleScrollToBottom}
size="small"
className={clsx(styles.scrollToBottom, className)}
className={clsx(
styles.scrollToBottom,
className,
scrollY > 20 ? styles.hide : '',
)}
{...(rest as any)}
>
<ArrowDownIcon color="primary" />
packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/styles.module.scss
+8
View File
@@ -4,6 +4,14 @@
z-index: 100;
position: absolute;
background: rgb(var(--lsd-surface-primary)) !important;
transition: all 0.2s ease-in-out;
transform: translateY(0);
opacity: 1;
&.hide {
opacity: 0;
transform: translateY(-10px);
}
bottom: calc(
var(--ifm-navbar-height) + var(--logos-hero-info-height) - 100vh + 16px