generated from TBD54566975/tbd-project-template
-
Notifications
You must be signed in to change notification settings - Fork 105
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* fix blog card component * fix admonition text * fix navbar styles * update toc padding * fix sidebar navbar association * fix sidebar navigation * update reading progress bar * add BlockBg component * update BlockBg component * remove log * fix build error --------- Co-authored-by: Nick DeJesus <[email protected]>
- Loading branch information
1 parent
a859236
commit df9b18f
Showing
15 changed files
with
437 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import * as React from "react"; | ||
| import { SVGProps } from "react"; | ||
| const ArrowLeft = (props: SVGProps<SVGSVGElement>) => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width={16} | ||
| height={17} | ||
| fill="none" | ||
| {...props} | ||
| > | ||
| <path | ||
| fill="#000" | ||
| d="M13.335 7.833v1.334h-8V10.5H4V9.167H2.668V7.833h1.333V6.5h1.334v1.333h8Z" | ||
| /> | ||
| <path | ||
| fill="#000" | ||
| fillRule="evenodd" | ||
| d="M6.668 5.167H5.335V6.5h1.333V5.167Zm0 0h1.333V3.833H6.668v1.334Z" | ||
| clipRule="evenodd" | ||
| /> | ||
| <path | ||
| fill="#000" | ||
| d="M6.668 11.833H5.335V10.5h1.333v1.333ZM6.668 11.833h1.333v1.334H6.668v-1.334Z" | ||
| /> | ||
| </svg> | ||
| ); | ||
| export default ArrowLeft; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| import { cn } from "@site/lib/utils"; | ||
| import { useMemo } from "react"; | ||
|
|
||
| function getRandomNumber({ min, max }: { min: number; max: number }): number { | ||
| if (min > max) { | ||
| throw new Error("Minimum should be less than or equal to maximum."); | ||
| } | ||
| return Math.floor(Math.random() * (max - min + 1)) + min; | ||
| } | ||
|
|
||
| function populateGrid(grid: number[][], decreaseBlockLevel: number): void { | ||
| const rows = grid.length; | ||
| const cols = grid[0].length; | ||
|
|
||
| for (let i = 0; i < rows; i++) { | ||
| for (let j = 0; j < cols; j++) { | ||
| if (grid[i][j] === 0) { | ||
| // sometimes populate the grid randomly without checking if the cell is occupied | ||
| if (Math.floor(Math.random() * 2) % 2 === 0) { | ||
| grid[i][j] = 1; | ||
| continue; | ||
| } | ||
| let isOccupied = false; | ||
| if (i > 0 && grid[i - 1][j] === 1) { | ||
| isOccupied = true; | ||
| } | ||
| if (j > 0 && grid[i][j - 1] === 1) { | ||
| isOccupied = true; | ||
| } | ||
| if (i < rows - 1 && grid[i + 1][j] === 1) { | ||
| isOccupied = true; | ||
| } | ||
| if (j < cols - 1 && grid[i][j + 1] === 1) { | ||
| isOccupied = true; | ||
| } | ||
| if (!isOccupied) { | ||
| grid[i][j] = 1; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| let randomIterations = decreaseBlockLevel; | ||
|
|
||
| while (randomIterations--) { | ||
| for (let i = 0; i < rows; i++) { | ||
| for (let j = 0; j < cols; j++) { | ||
| if (grid[i][j] === 1 && Math.floor(Math.random() * 2) % 2 === 0) { | ||
| grid[i][j] = 0; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| const widths = { | ||
| 0: "25%", | ||
| 1: "50%", | ||
| 2: "75%", | ||
| 3: "100%", | ||
| } as const; | ||
|
|
||
| const BlockBg = ({ | ||
| maxSize, | ||
| minSize, | ||
| rows = 12, | ||
| columns = 12, | ||
| className, | ||
| children, | ||
| decreaseBlockLevel = 2, | ||
| }: { | ||
| minSize: number; | ||
| maxSize: number; | ||
| rows?: number; | ||
| columns?: number; | ||
| className?: string; | ||
| children?: React.ReactNode; | ||
| decreaseBlockLevel?: number; | ||
| }) => { | ||
| const grid = useMemo(() => { | ||
| const generatedGrid = new Array(rows) | ||
| .fill(0) | ||
| .map(() => new Array(columns).fill(0)); | ||
| populateGrid(generatedGrid, decreaseBlockLevel); | ||
| return generatedGrid; | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div | ||
| className={`${className} relative grid overflow-clip *:[grid-area:1/1]`} | ||
| > | ||
| <div className={cn("absolute inset-0 z-0")}> | ||
| {grid.map((row, i) => { | ||
| // generate a random height for the row | ||
| const height = getRandomNumber({ min: minSize, max: maxSize }); | ||
| return ( | ||
| <div | ||
| className="grid h-full w-full grid-rows-1" | ||
| key={i} | ||
| style={{ | ||
| height, | ||
| gridTemplateColumns: `repeat(${rows}, minmax(0,1fr))`, | ||
| }} | ||
| > | ||
| {row.map((col, j) => { | ||
| if (!col) return null; | ||
| // sometime use height as width sometime use height sometimes take full width | ||
| const randomNumber = Math.floor(Math.random() * 4) as 0 | 1 | 3; | ||
|
|
||
| const width = | ||
| Math.floor(Math.random() * 2) % 2 === 0 | ||
| ? height | ||
| : Math.floor(Math.random() * 2) % 2 === 0 | ||
| ? getRandomNumber({ min: minSize, max: maxSize }) | ||
| : widths[randomNumber]; | ||
|
|
||
| const randomHeight = | ||
| (Number.parseInt(widths[randomNumber].split("%")[0], 10) * | ||
| height) / | ||
| 100; | ||
| return ( | ||
| <div | ||
| key={j} | ||
| className="bg-[--block-color]" | ||
| style={{ | ||
| height: randomHeight, | ||
| width, | ||
| gridColumnStart: j + 1, | ||
| }} | ||
| /> | ||
| ); | ||
| })} | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
|
|
||
| <div className="z-10">{children}</div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default BlockBg; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default as BlockBg } from "./BlockBg"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { cn, textClassesMap, ToneTypes } from "@site/lib/utils"; | ||
| import React from "react"; | ||
| import Heading from "@theme/Heading"; | ||
|
|
||
| type SpotLightCardProps = { | ||
| src: string; | ||
| alt?: string; | ||
| className?: string; | ||
| tone?: ToneTypes; | ||
| title: string; | ||
| handle: string; | ||
| children?: React.ReactNode; | ||
| }; | ||
|
|
||
| const SpotLightCard = ({ | ||
| src, | ||
| alt, | ||
| className, | ||
| tone = "yellow", | ||
| title, | ||
| handle, | ||
| children, | ||
| }: SpotLightCardProps) => { | ||
| return ( | ||
| <div className={cn("border-[0.5px] border-solid", className)}> | ||
| <img | ||
| src={src} | ||
| alt={alt} | ||
| className="block aspect-[312/225] w-full object-cover lg:aspect-[584/328.5]" | ||
| /> | ||
| <div className="bg-black p-twist-core-spacing-9 lg:p-twist-core-spacing-12"> | ||
| <p | ||
| className={cn( | ||
| "publication mb-[15px] lg:mb-[27px]", | ||
| textClassesMap[tone], | ||
| )} | ||
| > | ||
| {title} | ||
| </p> | ||
| <Heading as="h3" className="mb-twist-core-spacing-4 lg:mb-[14px]"> | ||
| {handle} | ||
| </Heading> | ||
| {typeof children === "string" ? <p>{children}</p> : children} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default SpotLightCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default as SpotLightCard } from "./SpotLightCard"; |
Oops, something went wrong.