From 5ad497f75db9c4ebec76b80c307c39e8cc9baaf5 Mon Sep 17 00:00:00 2001 From: zhengqi zhang <770166635@qq.com> Date: Mon, 3 Jun 2024 16:31:00 +0800 Subject: [PATCH 1/7] Add Tooling deployed On Scroll --- public/locales/en/translation.json | 1 + src/components/LinesEllipsis/index.tsx | 164 ++++++++++++++++++ .../AdditionalInfo/AdditionalInfo.module.css | 109 ++++++++++++ .../Content/AdditionalInfo/AdditionalInfo.tsx | 106 +++++++++++ .../Content/Category/Category.module.css | 34 ++++ .../Tooling/Content/Category/Category.tsx | 20 +++ .../Tooling/Content/Content.module.css | 22 +++ src/components/Tooling/Content/Content.tsx | 94 ++++++++++ .../Tooling/Content/List/List.module.css | 63 +++++++ src/components/Tooling/Content/List/List.tsx | 96 ++++++++++ .../NetworkSelector.module.css | 55 ++++++ .../NetworkSelector/NetworkSelector.tsx | 65 +++++++ .../Content/Search/SearchInput.module.css | 80 +++++++++ .../Tooling/Content/Search/SearchInput.tsx | 25 +++ src/components/Tooling/Tooling.astro | 30 ++++ src/config/sidebar.ts | 4 + src/content/config.ts | 18 ++ .../developers/tooling-deployed-on-scroll.mdx | 19 ++ src/content/tools/en/alchemy-pay.mdx | 14 ++ src/content/tools/en/bware-labs.mdx | 10 ++ src/content/tools/en/chainlink.mdx | 10 ++ src/content/tools/en/chainstack.mdx | 10 ++ src/content/tools/en/dune.mdx | 10 ++ src/content/tools/en/espresso-systems.mdx | 10 ++ src/content/tools/en/etherspot.mdx | 10 ++ src/content/tools/en/openocean.mdx | 10 ++ src/content/tools/en/quick-node.mdx | 10 ++ src/content/tools/en/search-on-dora.mdx | 10 ++ 28 files changed, 1109 insertions(+) create mode 100644 src/components/LinesEllipsis/index.tsx create mode 100644 src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.module.css create mode 100644 src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.tsx create mode 100644 src/components/Tooling/Content/Category/Category.module.css create mode 100644 src/components/Tooling/Content/Category/Category.tsx create mode 100644 src/components/Tooling/Content/Content.module.css create mode 100644 src/components/Tooling/Content/Content.tsx create mode 100644 src/components/Tooling/Content/List/List.module.css create mode 100644 src/components/Tooling/Content/List/List.tsx create mode 100644 src/components/Tooling/Content/NetworkSelector/NetworkSelector.module.css create mode 100644 src/components/Tooling/Content/NetworkSelector/NetworkSelector.tsx create mode 100644 src/components/Tooling/Content/Search/SearchInput.module.css create mode 100644 src/components/Tooling/Content/Search/SearchInput.tsx create mode 100644 src/components/Tooling/Tooling.astro create mode 100644 src/content/docs/en/developers/tooling-deployed-on-scroll.mdx create mode 100644 src/content/tools/en/alchemy-pay.mdx create mode 100644 src/content/tools/en/bware-labs.mdx create mode 100644 src/content/tools/en/chainlink.mdx create mode 100644 src/content/tools/en/chainstack.mdx create mode 100644 src/content/tools/en/dune.mdx create mode 100644 src/content/tools/en/espresso-systems.mdx create mode 100644 src/content/tools/en/etherspot.mdx create mode 100644 src/content/tools/en/openocean.mdx create mode 100644 src/content/tools/en/quick-node.mdx create mode 100644 src/content/tools/en/search-on-dora.mdx diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 5af7f0f46..0d2ff57bb 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -89,6 +89,7 @@ "erc1155TokenBridge": "ERC1155 Token Bridge", "theScrollMessenger": "The Scroll Messenger", "transactionFeesOnScroll": "Transaction Fees on Scroll", + "toolingDeployedOnScroll": "Tooling deployed On Scroll", "l2Fee": "L2 Fee", "l1Fee": "L1 Fee", "gasOracle": "Gas Oracle", diff --git a/src/components/LinesEllipsis/index.tsx b/src/components/LinesEllipsis/index.tsx new file mode 100644 index 000000000..e6a6bd0a0 --- /dev/null +++ b/src/components/LinesEllipsis/index.tsx @@ -0,0 +1,164 @@ +import { useState, useEffect, useRef } from "preact/hooks" + +const agentStyle = { + position: "absolute", + bottom: 0, + left: 0, + height: 0, + overflow: "hidden", + paddingTop: 0, + paddingBottom: 0, + border: "none", +} + +const mirrorProps = [ + "box-sizing", + "width", + "font-size", + "font-weight", + "font-family", + "font-style", + "letter-spacing", + "text-indent", + "white-space", + "word-break", + "overflow-wrap", + "padding-left", + "padding-right", +] + +function prevSibling(node, count) { + while (node && count--) { + node = node.previousElementSibling + } + return node +} + +const LinesEllipsis = props => { + const { component: Component = "div", ellipsis, trimRight = true, basedOn, maxLine = 1, text, className, onReflow, ...rest } = props + + const [displayedText, setDisplayedText] = useState(text) + const [clamped, setClamped] = useState(false) + + const units = useRef([]) + const shadowRef = useRef() + const targetRef = useRef() + const ellipsisRef = useRef() + + useEffect(() => { + const handleSizeChanged = entries => { + if (targetRef.current) { + copyStyleToShadow() + reflow({ basedOn, text, maxLine }) + } + } + const resizeObserver = new ResizeObserver(handleSizeChanged) + resizeObserver.observe(targetRef.current) + + return () => { + if (targetRef.current) { + resizeObserver && resizeObserver.unobserve(targetRef.current) + } + } + }, [basedOn, text, maxLine]) + + const copyStyleToShadow = () => { + const targetStyle = window.getComputedStyle(targetRef.current) + mirrorProps.forEach(key => { + shadowRef.current.style[key] = targetStyle[key] + }) + } + + const reflow = props => { + /* eslint-disable no-control-regex */ + const basedOn = props.basedOn || (/^[\x00-\x7F]+$/.test(props.text) ? "words" : "letters") + + if (basedOn === "words") { + units.current = props.text.split(/\b|(?=\W)/) + } else if (basedOn === "letters") { + units.current = Array.from(props.text) + } else { + // default + units.current = props.text.split(/\b|(?=\W)/) + } + shadowRef.current.innerHTML = units.current + .map(c => { + return `${c}` + }) + .join("") + const ellipsisIndex = putEllipsis(calcIndexes()) + const nextClamped = ellipsisIndex > -1 + const nextDisplayedText = nextClamped ? units.current.slice(0, ellipsisIndex).join("") : props.text + setClamped(nextClamped) + setDisplayedText(nextDisplayedText) + onReflow({ clamped: nextClamped, text: nextDisplayedText }) + } + + // return the index of the first letter/word of each line + // row count: maxLine + 1 + const calcIndexes = () => { + const indexes = [0] + let spanNode = shadowRef.current.firstElementChild + if (!spanNode) return indexes + + let index = 0 + let line = 1 + let offsetTop = spanNode.offsetTop + while ((spanNode = spanNode.nextElementSibling)) { + if (spanNode.offsetTop > offsetTop) { + line++ + indexes.push(index) + offsetTop = spanNode.offsetTop + } + index++ + if (line > maxLine) { + break + } + } + return indexes + } + + const putEllipsis = indexes => { + // no ellipsis + if (indexes.length <= maxLine) return -1 + const lastIndex = indexes[maxLine] + const truncatedUnits = units.current.slice(0, lastIndex) + + // the first letter/word of maxLine + 1 row + const maxOffsetTop = shadowRef.current.children[lastIndex].offsetTop + shadowRef.current.innerHTML = + truncatedUnits + .map((c, i) => { + return `${c}` + }) + .join("") + `${ellipsisRef.current.innerHTML}` + const ellipsisNode = shadowRef.current.lastElementChild + let lastTextNode = prevSibling(ellipsisNode, 1) + while ( + lastTextNode && + (ellipsisNode.offsetTop > maxOffsetTop || + ellipsisNode.offsetHeight > lastTextNode.offsetHeight || + ellipsisNode.offsetTop > lastTextNode.offsetTop) + ) { + shadowRef.current.removeChild(lastTextNode) + lastTextNode = prevSibling(ellipsisNode, 1) + truncatedUnits.pop() + } + return truncatedUnits.length + } + + return ( + <> + + {trimRight ? displayedText.trimRight() : displayedText} + {clamped && {ellipsis}} + +
+ + {ellipsis} + + + ) +} + +export default LinesEllipsis \ No newline at end of file diff --git a/src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.module.css b/src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.module.css new file mode 100644 index 000000000..a34b1e976 --- /dev/null +++ b/src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.module.css @@ -0,0 +1,109 @@ +.additionalInfo { + height: 100%; + overflow: auto; + background: rgba(255, 255, 255, 0.5); + border-radius: 15px; + display: flex; + justify-content: center; + max-width: 532px; + margin: 0 auto; + position: relative; +} +.closeButton { + position: absolute; + right: 20px; + top: 20px; + cursor: pointer; + display: none; +} +.infoBox { + background: #fff; + padding: 18px 20px; + width: 100%; +} + +.infoBox p { + font-size: 14px; +} + +.title { + color: #101010; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: normal; + letter-spacing: 0.18px; + margin-bottom: 15px; +} + +.content { + max-height: 460px; + overflow: auto; +} + +.noToolInfo { + text-align: center; + margin: 0 auto; + height: max-content; + max-width: 280px; + align-self: center; +} + +.noToolInfo svg { + margin-bottom: 20px; +} + +.noToolInfoTitle { + color: #ababab; + text-align: center; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: normal; + letter-spacing: 0.18px; + margin-bottom: 8px; +} + +.noToolInfoDescription { + color: #ababab; + text-align: center; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 18px; /* 128.571% */ + letter-spacing: 0.14px; +} + +@media screen and (max-width: 1300px) { + .closeButton { + display: block; + } + .additionalContainer { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(16, 16, 16, 0.2); + z-index: 9999; + height: 100%; + max-height: 100%; + padding: 20px; + display: flex; + } + .additionalInfo { + background: #ffffff; + border-radius: 15px; + justify-self: center; + align-self: center; + width: 100%; + height: 532px; + } + + .noToolSelected { + display: none; + } + .noToolInfo { + padding-top: 20px; + } +} diff --git a/src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.tsx b/src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.tsx new file mode 100644 index 000000000..05329fe3d --- /dev/null +++ b/src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.tsx @@ -0,0 +1,106 @@ +import styles from "./AdditionalInfo.module.css" +import { useState, useEffect, useMemo } from "preact/hooks" +import { clsx } from "~/lib" + +enum Status { + NO_ADDITIONAL_INFO, + HAS_ADDITIONAL_INFO, + NO_TOOL_SELECTED, +} + +const AdditionalInfo = ({ data, selectedTool, onClose }) => { + const status = useMemo(() => { + if (!selectedTool) { + return Status.NO_TOOL_SELECTED + } + + if (selectedTool && !selectedTool.remarkPluginFrontmatter.noAdditionalInfo) { + return Status.HAS_ADDITIONAL_INFO + } + + return Status.NO_ADDITIONAL_INFO + }, [selectedTool]) + + return ( + <> +
+
+
+ + + +
+ + {status === Status.HAS_ADDITIONAL_INFO && ( +
+
{selectedTool.remarkPluginFrontmatter.name}
+
{data}
+
+ )} + {status !== Status.HAS_ADDITIONAL_INFO && ( +
+ + + + + + + + + + + + + + + + + + + {status === Status.NO_TOOL_SELECTED ? ( + <> +
No tool selected
+
+ Try selecting a tool to learn more about using it on Scroll. +
+ + ) : ( + <> +
No additional information for this project
+
+ Try selecting another tool to learn more about using it on Scroll. +
+ + )} +
+ )} +
+
+ + ) +} + +export default AdditionalInfo diff --git a/src/components/Tooling/Content/Category/Category.module.css b/src/components/Tooling/Content/Category/Category.module.css new file mode 100644 index 000000000..4c143e5c9 --- /dev/null +++ b/src/components/Tooling/Content/Category/Category.module.css @@ -0,0 +1,34 @@ +.toolsCategory { + display: flex; + flex-wrap: wrap; + padding-left: 0; +} +.toolsCategory .item { + display: inline-flex; + height: 44px; + padding: 0px 30px; + flex-direction: column; + justify-content: center; + align-items: center; + flex-shrink: 0; + border-radius: 100px; + margin-top: 0; + cursor: pointer; + margin-right: 13px; + margin-bottom: 10px; + border-width: 1px; + border-style: solid; + background: #ffffff; + @apply border-black dark:border-white; +} +.toolsCategory .item.active { + @apply text-white bg-black dark:text-black dark:bg-white; +} +@media screen and (max-width: 50em) { + .toolsCategory .item { + height: 36px; + padding: 0px 20px; + margin-right: 12px; + margin-bottom: 12px; + } +} diff --git a/src/components/Tooling/Content/Category/Category.tsx b/src/components/Tooling/Content/Category/Category.tsx new file mode 100644 index 000000000..97849cd11 --- /dev/null +++ b/src/components/Tooling/Content/Category/Category.tsx @@ -0,0 +1,20 @@ +import { useState, useEffect, useMemo } from "preact/hooks" +import { clsx } from "~/lib" +import styles from "./Category.module.css" + +const Category = ({ categories, value, onChange }) => { + return ( + + ) +} + +export default Category diff --git a/src/components/Tooling/Content/Content.module.css b/src/components/Tooling/Content/Content.module.css new file mode 100644 index 000000000..456f5eade --- /dev/null +++ b/src/components/Tooling/Content/Content.module.css @@ -0,0 +1,22 @@ +.toolsContainer { + border-radius: 27px; + background: #fff8f3; + padding: 30px; +} + +.toolsList { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 30px; + margin-top: 30px; +} + +.toolsList > div { + overflow: scroll; +} + +@media screen and (max-width: 1300px) { + .toolsList { + grid-template-columns: 1fr; + } +} diff --git a/src/components/Tooling/Content/Content.tsx b/src/components/Tooling/Content/Content.tsx new file mode 100644 index 000000000..9fe8237cf --- /dev/null +++ b/src/components/Tooling/Content/Content.tsx @@ -0,0 +1,94 @@ +import styles from "./Content.module.css" +import { clsx } from "~/lib" +import { useState, useEffect, useMemo } from "preact/hooks" +import SearchInput from "./Search/SearchInput" +import NetworkSelector from "./NetworkSelector/NetworkSelector" +import Category from "./Category/Category" +import List from "./List/List" +import AdditionalInfo from "./AdditionalInfo/AdditionalInfo" + +const Content = ({ tools, toolsMarkdown }) => { + const categories = [...new Set(tools.flatMap((tool) => tool.remarkPluginFrontmatter.category))] + + const [selectedTool, setSelectedTool] = useState(null) + + const [searchParams, setSearchParams] = useState({ + category: [], + network: "All networks", + keyword: "", + }) + + const handleChangeCategory = (value) => { + setSearchParams((prev) => { + const newCategory = prev.category.includes(value) + ? prev.category.filter((item) => item !== value) + : [...prev.category, value] + + return { + ...prev, + category: newCategory, + } + }) + } + + const handleChangeNetwork = (value) => { + setSearchParams((pre) => ({ + ...pre, + network: value, + })) + } + + const handleChangeKeyword = (e) => { + setSearchParams((prev) => ({ + ...prev, + keyword: e.target.value, + })) + } + + const handleToolClick = (blog) => { + setSelectedTool(blog) + } + + useEffect(() => { + if (selectedTool) { + document.querySelectorAll(".tools-item").forEach((div) => { + div.style.display = "none" + }) + const selectedDiv = document.getElementById(selectedTool.id) + if (selectedDiv) { + selectedDiv.style.display = "block" + } + } + }, [selectedTool]) + + const filteredTools = useMemo(() => { + setSelectedTool(null) + return tools.filter((tool) => { + const categoryMatch = + searchParams.category.length === 0 || + searchParams.category.some((category) => tool.remarkPluginFrontmatter.category.includes(category)) + const networkMatch = + searchParams.network === "All networks" || tool.remarkPluginFrontmatter.network === searchParams.network + const keywordMatch = tool.remarkPluginFrontmatter.name.toLowerCase().includes(searchParams.keyword.toLowerCase()) + + return categoryMatch && networkMatch && keywordMatch + }) + }, [searchParams]) + + return ( +
+ +
+ + +
+ +
+ + handleToolClick(null)} data={toolsMarkdown} selectedTool={selectedTool} /> +
+
+ ) +} + +export default Content diff --git a/src/components/Tooling/Content/List/List.module.css b/src/components/Tooling/Content/List/List.module.css new file mode 100644 index 000000000..1d4e68d09 --- /dev/null +++ b/src/components/Tooling/Content/List/List.module.css @@ -0,0 +1,63 @@ +.toolsContainerList { + background: #ffffff; + border-radius: 15px; + height: 532px; + overflow: auto; +} +.toolItem { + display: flex; + padding: 20px; +} + +.toolItem:hover { + background-color: #f9f9f9; + cursor: pointer; +} + +.toolItem:not(:last-child) { + border-bottom: 1px solid #ece8e3; +} + +.logo { + width: 66px; + height: fit-content; + flex-shrink: 0; + border-radius: 15px; + margin-right: 15px; + margin-top: 6px; +} + +.toolInfo { + width: 100%; +} + +.toolName { + color: #101010; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: normal; + letter-spacing: 0.18px; + display: flex; + justify-items: center; + align-items: center; +} + +.category { + display: inline-block; + padding: 3px 5px; + font-size: 12px; + color: #0f8e7e; + letter-spacing: 0.12px; + border-radius: 5px; + background: #dffcf8; + margin-right: 5px; +} + +.toolDescription { + color: #5b5b5b; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 18px; +} diff --git a/src/components/Tooling/Content/List/List.tsx b/src/components/Tooling/Content/List/List.tsx new file mode 100644 index 000000000..4e630aa17 --- /dev/null +++ b/src/components/Tooling/Content/List/List.tsx @@ -0,0 +1,96 @@ +import styles from "./List.module.css" +import LinesEllipsis from "../../../../components/LinesEllipsis" + +const List = ({ tools, onChange, selectedTool }) => { + const handleReflow = (value) => { + // don't trigger measure when the height exceeds the standard height by default + // if (!isExpended && cardRef.current!.clientHeight > standardHeight) { + // return + // } + // onResize() + } + + return ( +
+ {tools.map((tool, index) => ( +
onChange(tool)} className={styles.toolItem}> + {tool.remarkPluginFrontmatter.logo.alt} +
+
+
+ {tool.remarkPluginFrontmatter.name} + window.open(tool.remarkPluginFrontmatter.website, "_blank")} + > + + + + + + + + + +
+ + {!tool.remarkPluginFrontmatter.noAdditionalInfo && ( + + + + + + )} +
+
+ {tool.remarkPluginFrontmatter.category.map((category, index) => ( + + {category} + + ))} +
+ +  ... more + + } + basedOn="words" + onReflow={handleReflow} + /> +
+
+ ))} +
+ ) +} + +export default List diff --git a/src/components/Tooling/Content/NetworkSelector/NetworkSelector.module.css b/src/components/Tooling/Content/NetworkSelector/NetworkSelector.module.css new file mode 100644 index 000000000..dc9f43b3a --- /dev/null +++ b/src/components/Tooling/Content/NetworkSelector/NetworkSelector.module.css @@ -0,0 +1,55 @@ +.container { + height: 40px; + width: 218px; + position: relative; +} + +.networkSelector { + position: absolute; + left: 0; + top: 0; + width: 218px; + border-radius: 20px; + border: 1px solid #101010; + background: #fff; + display: flex; + justify-content: space-between; + padding: 0 12px; + align-items: flex-start; + cursor: pointer; + overflow: visible; +} + +.networkSelector .optionsList { + margin-bottom: 0; + padding-left: 0; + flex: 1; + margin-left: 7px; + color: #101010; + list-style: none; +} + +.optionsList li { + height: 38px; + line-height: 38px; + font-size: 16px; + font-weight: bold; + font-family: var(--font-family-body-text); + letter-spacing: 0.16px; +} + +@media (max-width: 50em) { + .container, + .networkSelector { + } + .optionsList { + margin-left: 0; + } +} + +@media (max-width: 604px) { + .container, + .networkSelector { + width: 148px; + } +} diff --git a/src/components/Tooling/Content/NetworkSelector/NetworkSelector.tsx b/src/components/Tooling/Content/NetworkSelector/NetworkSelector.tsx new file mode 100644 index 000000000..adf563d7a --- /dev/null +++ b/src/components/Tooling/Content/NetworkSelector/NetworkSelector.tsx @@ -0,0 +1,65 @@ +import { useState, useEffect, useMemo } from "preact/hooks" +import { clsx } from "~/lib" +import styles from "./NetworkSelector.module.css" + +const NetworkSelector = ({ value, onChange }) => { + const [isModalOpen, setIsModalOpen] = useState(false) + const networks = ["All networks", "Mainnet", "Testnet"] + + const handleNetworkClick = (network) => { + onChange(network) + setIsModalOpen(!isModalOpen) + } + + const filteredNetworks = useMemo(() => { + if (isModalOpen) { + return [value, ...networks.filter((network) => network !== value)] + } + return [value] + }, [isModalOpen, networks, value]) + + return ( +
+
+ + + +
    + {filteredNetworks.map((network, idx) => { + return ( +
  • handleNetworkClick(network)}> + {network} +
    • + ) + })} +
+ + + +
+
+ ) +} + +export default NetworkSelector diff --git a/src/components/Tooling/Content/Search/SearchInput.module.css b/src/components/Tooling/Content/Search/SearchInput.module.css new file mode 100644 index 000000000..e33b5efa2 --- /dev/null +++ b/src/components/Tooling/Content/Search/SearchInput.module.css @@ -0,0 +1,80 @@ +.wrapper { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + width: 100%; + flex-shrink: 0; + overflow: hidden; + + flex: 1; + height: 40px; + border-radius: 20px; + padding: unset; + margin-right: 30px; +} + +.input { + margin: 0; + font-size: 16px; + width: 100%; + outline: none; + display: block; + appearance: none; + flex-grow: 1; + padding-left: 36px; + border-bottom: 1px solid #000; + border-radius: 0; + background: url(/assets/search.svg) left 12px top 50% / 17px no-repeat; + border: none; + height: 35px; + line-height: 35px; + padding-bottom: 0; + @apply text-black border-black; +} +.input.large { + height: 48px; + border-bottom: none; + padding-bottom: 0; + background: transparent url(/svgs/search.svg) left center no-repeat; + background-size: 20px auto; +} + +.input::placeholder { + font-style: italic; +} + +.input:focus { + outline: none; + border-radius: 0; +} + +.closeButton { + background-color: transparent; + border: none; + padding: 0; + display: none; + height: 25px; +} + +@media (max-width: 50em) { + .wrapper { + margin-right: 16px; + } + + .input { + @apply pl-[40px]; + } + + .input:focus { + @apply rounded-primary; + } + + .closeButton { + display: block; + } + + .closeButtonMobile { + display: none; + } +} diff --git a/src/components/Tooling/Content/Search/SearchInput.tsx b/src/components/Tooling/Content/Search/SearchInput.tsx new file mode 100644 index 000000000..9df7972d5 --- /dev/null +++ b/src/components/Tooling/Content/Search/SearchInput.tsx @@ -0,0 +1,25 @@ +import React, { ChangeEvent, useCallback, useEffect, useState, useRef } from "react" +import styles from "./SearchInput.module.css" +import { clsx } from "~/lib" + +const SearchInput = ({ value, onChange }) => { + const inputRef = useRef(null) + + return ( +
+ +
+ ) +} + +export default SearchInput diff --git a/src/components/Tooling/Tooling.astro b/src/components/Tooling/Tooling.astro new file mode 100644 index 000000000..ffd5c22c3 --- /dev/null +++ b/src/components/Tooling/Tooling.astro @@ -0,0 +1,30 @@ +--- +import { getCollection } from "astro:content" +import Content from "./Content/Content.tsx" + +const pages = await getCollection("tools") + +const tools = await Promise.all( + pages.map(async (page) => { + const renderedPage = await page.render() + return { + ...renderedPage, + id: "tool-" + renderedPage.remarkPluginFrontmatter.name.toLowerCase().replace(/ /g, "-"), + } + }) +) +--- + + + + + { + tools.map((tool, index) => ( + + )) + } + + + diff --git a/src/config/sidebar.ts b/src/config/sidebar.ts index 4fcd504fc..1a5760f82 100644 --- a/src/config/sidebar.ts +++ b/src/config/sidebar.ts @@ -132,6 +132,10 @@ export const getSidebar = () => { // }, // ], }, + { + title: t("sidebar.developers.toolingDeployedOnScroll"), + url: formatUrl("developers/tooling-deployed-on-scroll"), + }, ], }, { diff --git a/src/content/config.ts b/src/content/config.ts index ce53f516c..aae5b1e1c 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -31,6 +31,24 @@ const docsCollection = defineCollection({ }), }) +const toolsCollection = defineCollection({ + schema: z.object({ + name: z.string(), + excerpt: z.string(), + category: z.array(z.string()), + network: z.string().optional(), + logo: z + .object({ + src: z.string().optional(), + alt: z.string().optional(), + }) + .optional(), + website: z.string().optional(), + noAdditionalInfo: z.boolean().optional(), + }), +}) + export const collections = { docs: docsCollection, + tools: toolsCollection, } diff --git a/src/content/docs/en/developers/tooling-deployed-on-scroll.mdx b/src/content/docs/en/developers/tooling-deployed-on-scroll.mdx new file mode 100644 index 000000000..28af60cd3 --- /dev/null +++ b/src/content/docs/en/developers/tooling-deployed-on-scroll.mdx @@ -0,0 +1,19 @@ +--- +section: developers +date: Last Modified +title: "Tooling deployed on Scroll" +lang: "en" +permalink: "developers/tooling-deployed-on-scroll/" +excerpt: "" +--- + +import Aside from "../../../../components/Aside.astro" +import Tooling from "../../../../components/Tooling/Tooling.astro" + + + + + + diff --git a/src/content/tools/en/alchemy-pay.mdx b/src/content/tools/en/alchemy-pay.mdx new file mode 100644 index 000000000..a2b0bcd41 --- /dev/null +++ b/src/content/tools/en/alchemy-pay.mdx @@ -0,0 +1,14 @@ +--- +name: "Alchemy Pay" +category: ["Infrastructure", "Tooling"] +excerpt: "At Dora we believe that as applications leverage online & onchain infrastructure, unlocking search drives understandability — embedding interactivity at the discoverability layer catalyzes mass adoption." +logo: { src: "https://scroll-eco-list.netlify.app/logos/Chainlink.png", alt: "Chainlink Logo" } +website: "https://chain.link/" +network: "Mainnet" +--- + +Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link. + +Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link. + +Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link. diff --git a/src/content/tools/en/bware-labs.mdx b/src/content/tools/en/bware-labs.mdx new file mode 100644 index 000000000..0d3107875 --- /dev/null +++ b/src/content/tools/en/bware-labs.mdx @@ -0,0 +1,10 @@ +--- +name: "Bware Labs" +category: ["Infrastructure", "Tooling"] +excerpt: "At Dora we believe that as applications leverage online & onchain infrastructure, unlocking search drives understandability — embedding interactivity at the discoverability layer catalyzes mass adoption." +logo: { src: "https://scroll-eco-list.netlify.app/logos/Bware%20Labs.png", alt: "Chainlink Logo" } +website: "https://bwarelabs.com/" +network: "Mainnet" +--- + +Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link. diff --git a/src/content/tools/en/chainlink.mdx b/src/content/tools/en/chainlink.mdx new file mode 100644 index 000000000..203b4ccf6 --- /dev/null +++ b/src/content/tools/en/chainlink.mdx @@ -0,0 +1,10 @@ +--- +name: "Chainlink" +category: ["Infrastructure", "Tooling"] +excerpt: "Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link." +logo: { src: "https://scroll-eco-list.netlify.app/logos/Chainlink.png", alt: "Chainlink Logo" } +website: "https://chain.link/" +network: "Testnet" +--- + +Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link. diff --git a/src/content/tools/en/chainstack.mdx b/src/content/tools/en/chainstack.mdx new file mode 100644 index 000000000..50da96151 --- /dev/null +++ b/src/content/tools/en/chainstack.mdx @@ -0,0 +1,10 @@ +--- +name: "Chainstack" +category: ["Indexer", "Tooling"] +excerpt: "Crypto’s Data Platform\nQuery, visualize, share and export data across 15+ blockchains. Build together with Web3’s biggest data community." +logo: { src: "https://scroll-eco-list.netlify.app/logos/Chainstack.png", alt: "Chainlink Logo" } +website: "https://bwarelabs.com/" +network: "Mainnet" +--- + +Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link. diff --git a/src/content/tools/en/dune.mdx b/src/content/tools/en/dune.mdx new file mode 100644 index 000000000..2e99e0ce3 --- /dev/null +++ b/src/content/tools/en/dune.mdx @@ -0,0 +1,10 @@ +--- +name: "Dune" +category: ["Indexer", "Tooling"] +excerpt: "Crypto’s Data Platform Query, visualize, share and export data across 15+ blockchains. Build together with Web3’s biggest data community." +logo: { src: "https://scroll-eco-list.netlify.app/logos/dune.jpg", alt: "Chainlink Logo" } +website: "https://bwarelabs.com/" +network: "Mainnet" +--- + +Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link. diff --git a/src/content/tools/en/espresso-systems.mdx b/src/content/tools/en/espresso-systems.mdx new file mode 100644 index 000000000..6aa53f48c --- /dev/null +++ b/src/content/tools/en/espresso-systems.mdx @@ -0,0 +1,10 @@ +--- +name: "Espresso Systems" +category: ["Infrastructure", "Privacy", "Tooling"] +excerpt: "Espresso Systems builds tools and infrastructure that create more safe, open, and performant options for interacting and transacting on-chain." +logo: { src: "https://scroll-eco-list.netlify.app/logos/Espresso%20Systems.png", alt: "Chainlink Logo" } +website: "https://bwarelabs.com/" +network: "Mainnet" +--- + +Espresso Systems builds tools and infrastructure that create more safe, open, and performant options for interacting and transacting on-chain. diff --git a/src/content/tools/en/etherspot.mdx b/src/content/tools/en/etherspot.mdx new file mode 100644 index 000000000..9e65183fc --- /dev/null +++ b/src/content/tools/en/etherspot.mdx @@ -0,0 +1,10 @@ +--- +name: "Etherspot" +category: ["Infrastructure", "Tooling", "Wallet"] +excerpt: "Account Abstraction SDK that simplifies complex blockchain operations and enables easy onboarding of new users for a frictionless Web3 experience" +logo: { src: "https://scroll-eco-list.netlify.app/logos/Etherspot.png", alt: "Chainlink Logo" } +website: "https://bwarelabs.com/" +network: "Mainnet" +--- + +Espresso Systems builds tools and infrastructure that create more safe, open, and performant options for interacting and transacting on-chain. diff --git a/src/content/tools/en/openocean.mdx b/src/content/tools/en/openocean.mdx new file mode 100644 index 000000000..cdeadebe9 --- /dev/null +++ b/src/content/tools/en/openocean.mdx @@ -0,0 +1,10 @@ +--- +name: "OpenOcean" +category: ["DeFi", "Tooling"] +excerpt: "OpenOcean is the leading DEX aggregator across 30+ networks and integrated 1000+ deep liquidity sources. With its dynamic intelligent routing algorithm, OpenOcean brings the best swap returns .." +logo: { src: "https://scroll-eco-list.netlify.app/logos/OpenOcean.png", alt: "Chainlink Logo" } +website: "https://bwarelabs.com/" +network: "Mainnet" +noAdditionalInfo: true +--- + diff --git a/src/content/tools/en/quick-node.mdx b/src/content/tools/en/quick-node.mdx new file mode 100644 index 000000000..21c46bdb5 --- /dev/null +++ b/src/content/tools/en/quick-node.mdx @@ -0,0 +1,10 @@ +--- +name: "QuickNode" +category: ["Infrastructure", "Tooling"] +excerpt: "Since its founding in 2017, QuickNode has emerged as the go-to solution for businesses and innovators requiring world-class blockchain development tools for speed, reliability, and security. Handling ... " +logo: { src: "https://scroll-eco-list.netlify.app/logos/QuickNode.png", alt: "Chainlink Logo" } +website: "https://bwarelabs.com/" +network: "Mainnet" +noAdditionalInfo: true +--- + diff --git a/src/content/tools/en/search-on-dora.mdx b/src/content/tools/en/search-on-dora.mdx new file mode 100644 index 000000000..dc7094942 --- /dev/null +++ b/src/content/tools/en/search-on-dora.mdx @@ -0,0 +1,10 @@ +--- +name: "Search On Dora" +category: ["Infrastructure", "Tooling"] +excerpt: "At Dora we believe that as applications leverage online & onchain infrastructure, unlocking search drives understandability — embedding interactivity at the discoverability layer catalyzes mass adoption. " +logo: { src: "https://scroll-eco-list.netlify.app/logos/Search%20On%20Dora.png", alt: "Chainlink Logo" } +website: "https://bwarelabs.com/" +network: "Mainnet" +noAdditionalInfo: true +--- + From 5034aebc711d6582b9ad3ec1e79b5145917a9d61 Mon Sep 17 00:00:00 2001 From: zhengqi zhang <770166635@qq.com> Date: Wed, 5 Jun 2024 08:14:35 +0800 Subject: [PATCH 2/7] update styles --- src/components/Tooling/Content/Content.tsx | 2 +- src/components/Tooling/Content/List/List.tsx | 2 +- .../Tooling/Content/NetworkSelector/NetworkSelector.module.css | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Tooling/Content/Content.tsx b/src/components/Tooling/Content/Content.tsx index 9fe8237cf..e6e0cffa1 100644 --- a/src/components/Tooling/Content/Content.tsx +++ b/src/components/Tooling/Content/Content.tsx @@ -62,7 +62,7 @@ const Content = ({ tools, toolsMarkdown }) => { }, [selectedTool]) const filteredTools = useMemo(() => { - setSelectedTool(null) + // setSelectedTool(null) return tools.filter((tool) => { const categoryMatch = searchParams.category.length === 0 || diff --git a/src/components/Tooling/Content/List/List.tsx b/src/components/Tooling/Content/List/List.tsx index 4e630aa17..9c68f5dc9 100644 --- a/src/components/Tooling/Content/List/List.tsx +++ b/src/components/Tooling/Content/List/List.tsx @@ -24,7 +24,7 @@ const List = ({ tools, onChange, selectedTool }) => {
{tool.remarkPluginFrontmatter.name} Date: Mon, 8 Jul 2024 18:11:13 -0400 Subject: [PATCH 3/7] migrate info from contracts page to tooling page --- .../docs/en/developers/scroll-contracts.mdx | 96 +------------------ .../developers/tooling-deployed-on-scroll.mdx | 4 +- src/content/tools/en/aave.mdx | 10 ++ src/content/tools/en/eas.mdx | 22 +++++ .../tools/en/{ => fake-data}/alchemy-pay.mdx | 0 .../tools/en/{ => fake-data}/bware-labs.mdx | 0 .../tools/en/{ => fake-data}/chainlink.mdx | 0 .../tools/en/{ => fake-data}/chainstack.mdx | 0 src/content/tools/en/{ => fake-data}/dune.mdx | 0 .../en/{ => fake-data}/espresso-systems.mdx | 0 .../tools/en/{ => fake-data}/etherspot.mdx | 0 .../tools/en/{ => fake-data}/openocean.mdx | 0 .../tools/en/{ => fake-data}/quick-node.mdx | 0 .../en/{ => fake-data}/search-on-dora.mdx | 0 src/content/tools/en/safe.mdx | 34 +++++++ src/content/tools/en/uniswap.mdx | 43 +++++++++ 16 files changed, 113 insertions(+), 96 deletions(-) create mode 100644 src/content/tools/en/aave.mdx create mode 100644 src/content/tools/en/eas.mdx rename src/content/tools/en/{ => fake-data}/alchemy-pay.mdx (100%) rename src/content/tools/en/{ => fake-data}/bware-labs.mdx (100%) rename src/content/tools/en/{ => fake-data}/chainlink.mdx (100%) rename src/content/tools/en/{ => fake-data}/chainstack.mdx (100%) rename src/content/tools/en/{ => fake-data}/dune.mdx (100%) rename src/content/tools/en/{ => fake-data}/espresso-systems.mdx (100%) rename src/content/tools/en/{ => fake-data}/etherspot.mdx (100%) rename src/content/tools/en/{ => fake-data}/openocean.mdx (100%) rename src/content/tools/en/{ => fake-data}/quick-node.mdx (100%) rename src/content/tools/en/{ => fake-data}/search-on-dora.mdx (100%) create mode 100644 src/content/tools/en/safe.mdx create mode 100644 src/content/tools/en/uniswap.mdx diff --git a/src/content/docs/en/developers/scroll-contracts.mdx b/src/content/docs/en/developers/scroll-contracts.mdx index 5832db79d..c92c4e22a 100644 --- a/src/content/docs/en/developers/scroll-contracts.mdx +++ b/src/content/docs/en/developers/scroll-contracts.mdx @@ -81,59 +81,12 @@ Use the table below to configure your Ethereum tools to the Scroll mainnet. - WETH L2: [`0x5300000000000000000000000000000000000004`](https://scrollscan.com/address/0x5300000000000000000000000000000000000004) - Transaction Fee Vault: [`0x5300000000000000000000000000000000000005`](https://scrollscan.com/address/0x5300000000000000000000000000000000000005) -## Protocols on Scroll Mainnet - -### Uniswap v3 - -- Main Contracts - - Core Factory: [`0x70C62C8b8e801124A4Aa81ce07b637A3e83cb919`](https://scrollscan.com/address/0x70C62C8b8e801124A4Aa81ce07b637A3e83cb919) - - NFT Position Manager: [`0xB39002E4033b162fAc607fc3471E205FA2aE5967`](https://scrollscan.com/address/0xB39002E4033b162fAc607fc3471E205FA2aE5967) - - Router: [`0xfc30937f5cDe93Df8d48aCAF7e6f5D8D8A31F636`](https://scrollscan.com/address/0xfc30937f5cDe93Df8d48aCAF7e6f5D8D8A31F636) -- Additional Contracts - - multicall2Address: [`0xC1D2e074C38FdD5CA965000668420C80316F0915`](https://scrollscan.com/address/0xC1D2e074C38FdD5CA965000668420C80316F0915) - - proxyAdminAddress: [`0x1E6dcAb806A42055098f23E2B3ac72D6E195F967`](https://scrollscan.com/address/0x1E6dcAb806A42055098f23E2B3ac72D6E195F967) - - tickLensAddress: [`0x85780e12e90D2a684eB8E7404c985b5B5c8ce7E9`](https://scrollscan.com/address/0x85780e12e90D2a684eB8E7404c985b5B5c8ce7E9) - - nftDescriptorLibraryAddressV1_3_0: [`0xAeE9c206ba89F3DA25EEe4636208519e0B86965B`](https://scrollscan.com/address/0xAeE9c206ba89F3DA25EEe4636208519e0B86965B) - - nonfungibleTokenPositionDescriptorAddressV1_3_0: [`0xACcf12204b7591B2ECCEFe737440B0f53748B191`](https://scrollscan.com/address/0xACcf12204b7591B2ECCEFe737440B0f53748B191) - - descriptorProxyAddress: [`0x675DD953225D296A44790dC1390a1E7eF378f464`](https://scrollscan.com/address/0x675DD953225D296A44790dC1390a1E7eF378f464) - - v3MigratorAddress: [`0xF00577B5Dd0DA227298E954Ed11356F264Cf93d4`](https://scrollscan.com/address/0xF00577B5Dd0DA227298E954Ed11356F264Cf93d4) - - v3StakerAddress: [`0xFdFbE973c9ecB036Ecfb7af697FcACe789D3f928`](https://scrollscan.com/address/0xFdFbE973c9ecB036Ecfb7af697FcACe789D3f928) - - quoterV2Address: [`0x2566e082Cb1656d22BCbe5644F5b997D194b5299`](https://scrollscan.com/address/0x2566e082Cb1656d22BCbe5644F5b997D194b5299) - -### Safe - -Scroll is available in the [official Safe app](app.safe.global), and the transaction service API is at https://safe-transaction-scroll.safe.global/. - - - - -- CompatibilityFallbackHandler: [`0xf48f2B2d2a534e402487b3ee7C18c33Aec0Fe5e4`](https://scrollscan.com/address/0xf48f2B2d2a534e402487b3ee7C18c33Aec0Fe5e4) -- CreateCall: [`0x7cbB62EaA69F79e6873cD1ecB2392971036cFAa4`](https://scrollscan.com/address/0x7cbB62EaA69F79e6873cD1ecB2392971036cFAa4) -- DefaultCallbackHandler: [`0x1AC114C2099aFAf5261731655Dc6c306bFcd4Dbd`](https://scrollscan.com/address/0x1AC114C2099aFAf5261731655Dc6c306bFcd4Dbd) -- GnosisSafe: [`0xd9Db270c1B5E3Bd161E8c8503c55cEABeE709552`](https://scrollscan.com/address/0xd9Db270c1B5E3Bd161E8c8503c55cEABeE709552) -- GnosisSafeL2: [`0x3E5c63644E683549055b9Be8653de26E0B4CD36E`](https://scrollscan.com/address/0x3E5c63644E683549055b9Be8653de26E0B4CD36E) -- GnosisSafeProxyFactory: [`0xa6B71E26C5e0845f74c812102Ca7114b6a896AB2`](https://scrollscan.com/address/0xa6B71E26C5e0845f74c812102Ca7114b6a896AB2) -- MultiSend: [`0xA238CBeb142c10Ef7Ad8442C6D1f9E89e07e7761`](https://scrollscan.com/address/0xA238CBeb142c10Ef7Ad8442C6D1f9E89e07e7761) -- MultiSendCallOnly: [`0x40A2aCCbd92BCA938b02010E17A5b8929b49130D`](https://scrollscan.com/address/0x40A2aCCbd92BCA938b02010E17A5b8929b49130D) -- SignMessageLib: [`0xA65387F16B013cf2Af4605Ad8aA5ec25a2cbA3a2`](https://scrollscan.com/address/0xA65387F16B013cf2Af4605Ad8aA5ec25a2cbA3a2) -- SimulateTxAccessor: [`0x59AD6735bCd8152B84860Cb256dD9e96b85F69Da`](https://scrollscan.com/address/0x59AD6735bCd8152B84860Cb256dD9e96b85F69Da) -#### Ethereum Attestation Service (EAS) - -- EAS: [`0xC47300428b6AD2c7D03BB76D05A176058b47E6B0`](https://scrollscan.com/address/0xC47300428b6AD2c7D03BB76D05A176058b47E6B0) -- SchemaRegistry: [`0xD2CDF46556543316e7D34e8eDc4624e2bB95e3B6`](https://scrollscan.com/address/0xD2CDF46556543316e7D34e8eDc4624e2bB95e3B6) -- EIP712Proxy: [`0x77b7DA1c40762Cd8AFfE2069b575328EfD4D9801`](https://scrollscan.com/address/0x77b7DA1c40762Cd8AFfE2069b575328EfD4D9801) -- Indexer: `Not deployed yet` - -## Additional Useful Contracts +### Additional Useful Contracts - Multicall3: [`0xcA11bde05977b3631167028862bE2a173976CA11`](https://scrollscan.com/address/0xcA11bde05977b3631167028862bE2a173976CA11) -## Tokens +### Tokens
{status === Status.HAS_ADDITIONAL_INFO && ( -
-
{selectedTool.remarkPluginFrontmatter.name}
+
+
{selectedTool.remarkPluginFrontmatter.name}
{data}
)} diff --git a/src/components/Tooling/Content/Category/Category.module.css b/src/components/Tooling/Content/Category/Category.module.css index 4c143e5c9..6060d581c 100644 --- a/src/components/Tooling/Content/Category/Category.module.css +++ b/src/components/Tooling/Content/Category/Category.module.css @@ -18,11 +18,8 @@ margin-bottom: 10px; border-width: 1px; border-style: solid; - background: #ffffff; - @apply border-black dark:border-white; } .toolsCategory .item.active { - @apply text-white bg-black dark:text-black dark:bg-white; } @media screen and (max-width: 50em) { .toolsCategory .item { diff --git a/src/components/Tooling/Content/Category/Category.tsx b/src/components/Tooling/Content/Category/Category.tsx index 97849cd11..4d61e7218 100644 --- a/src/components/Tooling/Content/Category/Category.tsx +++ b/src/components/Tooling/Content/Category/Category.tsx @@ -7,7 +7,12 @@ const Category = ({ categories, value, onChange }) => {
    {categories.map((category) => (
  • onChange(category)} > {category} diff --git a/src/components/Tooling/Content/Content.module.css b/src/components/Tooling/Content/Content.module.css index 456f5eade..f848b8fe8 100644 --- a/src/components/Tooling/Content/Content.module.css +++ b/src/components/Tooling/Content/Content.module.css @@ -1,6 +1,6 @@ .toolsContainer { border-radius: 27px; - background: #fff8f3; + /* background: #fff8f3; */ padding: 30px; } diff --git a/src/components/Tooling/Content/Content.tsx b/src/components/Tooling/Content/Content.tsx index e6e0cffa1..dc655f051 100644 --- a/src/components/Tooling/Content/Content.tsx +++ b/src/components/Tooling/Content/Content.tsx @@ -68,7 +68,7 @@ const Content = ({ tools, toolsMarkdown }) => { searchParams.category.length === 0 || searchParams.category.some((category) => tool.remarkPluginFrontmatter.category.includes(category)) const networkMatch = - searchParams.network === "All networks" || tool.remarkPluginFrontmatter.network === searchParams.network + searchParams.network === "All networks" || tool.remarkPluginFrontmatter.network.includes(searchParams.network) const keywordMatch = tool.remarkPluginFrontmatter.name.toLowerCase().includes(searchParams.keyword.toLowerCase()) return categoryMatch && networkMatch && keywordMatch @@ -76,7 +76,7 @@ const Content = ({ tools, toolsMarkdown }) => { }, [searchParams]) return ( -
    +
    diff --git a/src/components/Tooling/Content/List/List.module.css b/src/components/Tooling/Content/List/List.module.css index 1d4e68d09..213f3243e 100644 --- a/src/components/Tooling/Content/List/List.module.css +++ b/src/components/Tooling/Content/List/List.module.css @@ -1,5 +1,4 @@ .toolsContainerList { - background: #ffffff; border-radius: 15px; height: 532px; overflow: auto; @@ -9,7 +8,8 @@ padding: 20px; } -.toolItem:hover { +.toolItem:hover, +.toolItem.active { background-color: #f9f9f9; cursor: pointer; } @@ -55,7 +55,6 @@ } .toolDescription { - color: #5b5b5b; font-size: 14px; font-style: normal; font-weight: 400; diff --git a/src/components/Tooling/Content/List/List.tsx b/src/components/Tooling/Content/List/List.tsx index 9c68f5dc9..06a5b6335 100644 --- a/src/components/Tooling/Content/List/List.tsx +++ b/src/components/Tooling/Content/List/List.tsx @@ -1,5 +1,6 @@ import styles from "./List.module.css" import LinesEllipsis from "../../../../components/LinesEllipsis" +import { clsx } from "~/lib" const List = ({ tools, onChange, selectedTool }) => { const handleReflow = (value) => { @@ -11,9 +12,16 @@ const List = ({ tools, onChange, selectedTool }) => { } return ( -
    +
    {tools.map((tool, index) => ( -
    onChange(tool)} className={styles.toolItem}> +
    onChange(tool)} + className={clsx( + styles.toolItem, + tool.id === selectedTool?.id && "bg-[#f9f9f9] dark:bg-black", + "hover:bg-[#f9f9f9] dark:hover:bg-black" + )} + > {tool.remarkPluginFrontmatter.logo.alt} { />
    -
    +
    {tool.remarkPluginFrontmatter.name} { @@ -52,17 +60,17 @@ const List = ({ tools, onChange, selectedTool }) => { fill-rule="evenodd" clip-rule="evenodd" d="M8 14.5714C11.6286 14.5714 14.5714 11.6286 14.5714 8C14.5714 4.37143 11.6286 1.42857 8 1.42857C4.37143 1.42857 1.42857 4.37143 1.42857 8C1.42857 11.6286 4.37143 14.5714 8 14.5714ZM8 16C12.4171 16 16 12.4171 16 8C16 3.58286 12.4171 0 8 0C3.58286 0 0 3.58286 0 8C0 12.4171 3.58286 16 8 16Z" - fill="#101010" + fill="currentColor" /> )} @@ -80,7 +88,7 @@ const List = ({ tools, onChange, selectedTool }) => { maxLine={tool.id === selectedTool?.id ? 100 : 1} ellipsis={ <> -  ... more +  ... more } basedOn="words" diff --git a/src/components/Tooling/Content/Search/SearchInput.tsx b/src/components/Tooling/Content/Search/SearchInput.tsx index 9df7972d5..3e6b20c91 100644 --- a/src/components/Tooling/Content/Search/SearchInput.tsx +++ b/src/components/Tooling/Content/Search/SearchInput.tsx @@ -11,9 +11,6 @@ const SearchInput = ({ value, onChange }) => { className={clsx( styles.input, ".focus-visible", - "dark:text-white", - "dark:border-white", - "dark:!bg-[url(/assets/search-white.svg)]" )} onChange={onChange} ref={inputRef} diff --git a/src/content/config.ts b/src/content/config.ts index aae5b1e1c..c863de902 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -18,6 +18,7 @@ const docsCollection = defineCollection({ stub: z.string().optional(), ecosystem: z.string().optional(), l2healthflag: z.string().optional(), + widerContent: z.boolean().optional(), metadata: z .object({ @@ -36,7 +37,8 @@ const toolsCollection = defineCollection({ name: z.string(), excerpt: z.string(), category: z.array(z.string()), - network: z.string().optional(), + // network: z.string().optional(), + network: z.array(z.string()).optional(), logo: z .object({ src: z.string().optional(), diff --git a/src/content/docs/en/developers/tooling-deployed-on-scroll.mdx b/src/content/docs/en/developers/tooling-deployed-on-scroll.mdx index 0849c69b5..da1cd22ad 100644 --- a/src/content/docs/en/developers/tooling-deployed-on-scroll.mdx +++ b/src/content/docs/en/developers/tooling-deployed-on-scroll.mdx @@ -5,6 +5,7 @@ title: "Tooling deployed on Scroll" lang: "en" permalink: "developers/tooling-deployed-on-scroll/" excerpt: "" +widerContent: true --- import Aside from "../../../../components/Aside.astro" diff --git a/src/content/tools/en/aave.mdx b/src/content/tools/en/aave.mdx index 4b4fcaf29..043551df1 100644 --- a/src/content/tools/en/aave.mdx +++ b/src/content/tools/en/aave.mdx @@ -4,7 +4,7 @@ category: ["Defi"] excerpt: "" logo: { src: "https://cryptologos.cc/logos/aave-aave-logo.png", alt: "Aave Logo" } website: "https://search.onaave.com/?q=Scroll" -network: "Mainnet" +network: ["Mainnet"] --- You can find contract addresses for Aave on [Scroll Mainnet](https://github.com/bgd-labs/aave-address-book/blob/main/src/AaveV3Scroll.sol) and [Scroll Sepolia](https://github.com/bgd-labs/aave-address-book/blob/main/src/AaveV3ScrollSepolia.sol). \ No newline at end of file diff --git a/src/content/tools/en/eas.mdx b/src/content/tools/en/eas.mdx index acce23d60..0f4a0f8d8 100644 --- a/src/content/tools/en/eas.mdx +++ b/src/content/tools/en/eas.mdx @@ -4,19 +4,26 @@ category: ["Identity"] excerpt: "Ethereum Attestation Service (EAS) is an infrastructure public good for making attestations onchain or offchain about anything." logo: { src: "https://pbs.twimg.com/profile_images/1593335725751083008/0XMyDyLq_400x400.png", alt: "EAS Logo" } website: "https://attest.org/" -network: "Mainnet" +network: ["Mainnet"] --- **_Scroll Mainnet contracts:_** -- EAS: [`0xC47300428b6AD2c7D03BB76D05A176058b47E6B0`](https://scrollscan.com/address/0xC47300428b6AD2c7D03BB76D05A176058b47E6B0) -- SchemaRegistry: [`0xD2CDF46556543316e7D34e8eDc4624e2bB95e3B6`](https://scrollscan.com/address/0xD2CDF46556543316e7D34e8eDc4624e2bB95e3B6) -- EIP712Proxy: [`0x77b7DA1c40762Cd8AFfE2069b575328EfD4D9801`](https://scrollscan.com/address/0x77b7DA1c40762Cd8AFfE2069b575328EfD4D9801) +- EAS: +[`0xC47300428b6AD2c7D03BB76D05A176058b47E6B0`](https://scrollscan.com/address/0xC47300428b6AD2c7D03BB76D05A176058b47E6B0) +- SchemaRegistry: +[`0xD2CDF46556543316e7D34e8eDc4624e2bB95e3B6`](https://scrollscan.com/address/0xD2CDF46556543316e7D34e8eDc4624e2bB95e3B6) +- EIP712Proxy: +[`0x77b7DA1c40762Cd8AFfE2069b575328EfD4D9801`](https://scrollscan.com/address/0x77b7DA1c40762Cd8AFfE2069b575328EfD4D9801) - Indexer: `Not deployed yet` **_Scroll Sepolia contracts:_** -- EAS: [`0xaEF4103A04090071165F78D45D83A0C0782c2B2a`](https://sepolia.scrollscan.com/address/0xaEF4103A04090071165F78D45D83A0C0782c2B2a) -- SchemaRegistry: [`0x55D26f9ae0203EF95494AE4C170eD35f4Cf77797`](https://sepolia.scrollscan.com/address/0x55D26f9ae0203EF95494AE4C170eD35f4Cf77797) -- EIP712Proxy: [`0xB3574f76b1720E61FdA98702c7016674CD6Eaa7b`](https://sepolia.scrollscan.com/address/0xB3574f76b1720E61FdA98702c7016674CD6Eaa7b) -- Indexer: [`0x7C2cb1eDC328491da52de2a0afc44D3B0Ae7ee17`](https://sepolia.scrollscan.com/address/0x7C2cb1eDC328491da52de2a0afc44D3B0Ae7ee17) \ No newline at end of file +- EAS: +[`0xaEF4103A04090071165F78D45D83A0C0782c2B2a`](https://sepolia.scrollscan.com/address/0xaEF4103A04090071165F78D45D83A0C0782c2B2a) +- SchemaRegistry: +[`0x55D26f9ae0203EF95494AE4C170eD35f4Cf77797`](https://sepolia.scrollscan.com/address/0x55D26f9ae0203EF95494AE4C170eD35f4Cf77797) +- EIP712Proxy: +[`0xB3574f76b1720E61FdA98702c7016674CD6Eaa7b`](https://sepolia.scrollscan.com/address/0xB3574f76b1720E61FdA98702c7016674CD6Eaa7b) +- Indexer: +[`0x7C2cb1eDC328491da52de2a0afc44D3B0Ae7ee17`](https://sepolia.scrollscan.com/address/0x7C2cb1eDC328491da52de2a0afc44D3B0Ae7ee17) \ No newline at end of file diff --git a/src/content/tools/en/fake-data/alchemy-pay.mdx b/src/content/tools/en/fake-data/alchemy-pay.mdx index a2b0bcd41..26c3e333e 100644 --- a/src/content/tools/en/fake-data/alchemy-pay.mdx +++ b/src/content/tools/en/fake-data/alchemy-pay.mdx @@ -4,7 +4,7 @@ category: ["Infrastructure", "Tooling"] excerpt: "At Dora we believe that as applications leverage online & onchain infrastructure, unlocking search drives understandability — embedding interactivity at the discoverability layer catalyzes mass adoption." logo: { src: "https://scroll-eco-list.netlify.app/logos/Chainlink.png", alt: "Chainlink Logo" } website: "https://chain.link/" -network: "Mainnet" +network: ["Mainnet"] --- Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link. diff --git a/src/content/tools/en/fake-data/bware-labs.mdx b/src/content/tools/en/fake-data/bware-labs.mdx index 0d3107875..8360bb8e4 100644 --- a/src/content/tools/en/fake-data/bware-labs.mdx +++ b/src/content/tools/en/fake-data/bware-labs.mdx @@ -4,7 +4,7 @@ category: ["Infrastructure", "Tooling"] excerpt: "At Dora we believe that as applications leverage online & onchain infrastructure, unlocking search drives understandability — embedding interactivity at the discoverability layer catalyzes mass adoption." logo: { src: "https://scroll-eco-list.netlify.app/logos/Bware%20Labs.png", alt: "Chainlink Logo" } website: "https://bwarelabs.com/" -network: "Mainnet" +network: ["Mainnet"] --- Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link. diff --git a/src/content/tools/en/fake-data/chainlink.mdx b/src/content/tools/en/fake-data/chainlink.mdx index 203b4ccf6..4b6e90973 100644 --- a/src/content/tools/en/fake-data/chainlink.mdx +++ b/src/content/tools/en/fake-data/chainlink.mdx @@ -4,7 +4,7 @@ category: ["Infrastructure", "Tooling"] excerpt: "Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link." logo: { src: "https://scroll-eco-list.netlify.app/logos/Chainlink.png", alt: "Chainlink Logo" } website: "https://chain.link/" -network: "Testnet" +network: ["Testnet"] --- Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link. diff --git a/src/content/tools/en/fake-data/chainstack.mdx b/src/content/tools/en/fake-data/chainstack.mdx index 50da96151..0a89c34b8 100644 --- a/src/content/tools/en/fake-data/chainstack.mdx +++ b/src/content/tools/en/fake-data/chainstack.mdx @@ -4,7 +4,7 @@ category: ["Indexer", "Tooling"] excerpt: "Crypto’s Data Platform\nQuery, visualize, share and export data across 15+ blockchains. Build together with Web3’s biggest data community." logo: { src: "https://scroll-eco-list.netlify.app/logos/Chainstack.png", alt: "Chainlink Logo" } website: "https://bwarelabs.com/" -network: "Mainnet" +network: ["Mainnet"] --- Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link. diff --git a/src/content/tools/en/fake-data/dune.mdx b/src/content/tools/en/fake-data/dune.mdx index 2e99e0ce3..db1253d19 100644 --- a/src/content/tools/en/fake-data/dune.mdx +++ b/src/content/tools/en/fake-data/dune.mdx @@ -4,7 +4,7 @@ category: ["Indexer", "Tooling"] excerpt: "Crypto’s Data Platform Query, visualize, share and export data across 15+ blockchains. Build together with Web3’s biggest data community." logo: { src: "https://scroll-eco-list.netlify.app/logos/dune.jpg", alt: "Chainlink Logo" } website: "https://bwarelabs.com/" -network: "Mainnet" +network: ["Mainnet"] --- Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link. diff --git a/src/content/tools/en/fake-data/espresso-systems.mdx b/src/content/tools/en/fake-data/espresso-systems.mdx index 6aa53f48c..d3b736c37 100644 --- a/src/content/tools/en/fake-data/espresso-systems.mdx +++ b/src/content/tools/en/fake-data/espresso-systems.mdx @@ -4,7 +4,7 @@ category: ["Infrastructure", "Privacy", "Tooling"] excerpt: "Espresso Systems builds tools and infrastructure that create more safe, open, and performant options for interacting and transacting on-chain." logo: { src: "https://scroll-eco-list.netlify.app/logos/Espresso%20Systems.png", alt: "Chainlink Logo" } website: "https://bwarelabs.com/" -network: "Mainnet" +network: ["Mainnet"] --- Espresso Systems builds tools and infrastructure that create more safe, open, and performant options for interacting and transacting on-chain. diff --git a/src/content/tools/en/fake-data/etherspot.mdx b/src/content/tools/en/fake-data/etherspot.mdx index 9e65183fc..670946e9f 100644 --- a/src/content/tools/en/fake-data/etherspot.mdx +++ b/src/content/tools/en/fake-data/etherspot.mdx @@ -4,7 +4,7 @@ category: ["Infrastructure", "Tooling", "Wallet"] excerpt: "Account Abstraction SDK that simplifies complex blockchain operations and enables easy onboarding of new users for a frictionless Web3 experience" logo: { src: "https://scroll-eco-list.netlify.app/logos/Etherspot.png", alt: "Chainlink Logo" } website: "https://bwarelabs.com/" -network: "Mainnet" +network: ["Mainnet"] --- Espresso Systems builds tools and infrastructure that create more safe, open, and performant options for interacting and transacting on-chain. diff --git a/src/content/tools/en/fake-data/openocean.mdx b/src/content/tools/en/fake-data/openocean.mdx index cdeadebe9..a63c700f3 100644 --- a/src/content/tools/en/fake-data/openocean.mdx +++ b/src/content/tools/en/fake-data/openocean.mdx @@ -4,7 +4,7 @@ category: ["DeFi", "Tooling"] excerpt: "OpenOcean is the leading DEX aggregator across 30+ networks and integrated 1000+ deep liquidity sources. With its dynamic intelligent routing algorithm, OpenOcean brings the best swap returns .." logo: { src: "https://scroll-eco-list.netlify.app/logos/OpenOcean.png", alt: "Chainlink Logo" } website: "https://bwarelabs.com/" -network: "Mainnet" +network: ["Mainnet"] noAdditionalInfo: true --- diff --git a/src/content/tools/en/fake-data/quick-node.mdx b/src/content/tools/en/fake-data/quick-node.mdx index 21c46bdb5..fc1359600 100644 --- a/src/content/tools/en/fake-data/quick-node.mdx +++ b/src/content/tools/en/fake-data/quick-node.mdx @@ -4,7 +4,7 @@ category: ["Infrastructure", "Tooling"] excerpt: "Since its founding in 2017, QuickNode has emerged as the go-to solution for businesses and innovators requiring world-class blockchain development tools for speed, reliability, and security. Handling ... " logo: { src: "https://scroll-eco-list.netlify.app/logos/QuickNode.png", alt: "Chainlink Logo" } website: "https://bwarelabs.com/" -network: "Mainnet" +network: ["Mainnet"] noAdditionalInfo: true --- diff --git a/src/content/tools/en/fake-data/search-on-dora.mdx b/src/content/tools/en/fake-data/search-on-dora.mdx index dc7094942..4a2bddcaa 100644 --- a/src/content/tools/en/fake-data/search-on-dora.mdx +++ b/src/content/tools/en/fake-data/search-on-dora.mdx @@ -4,7 +4,7 @@ category: ["Infrastructure", "Tooling"] excerpt: "At Dora we believe that as applications leverage online & onchain infrastructure, unlocking search drives understandability — embedding interactivity at the discoverability layer catalyzes mass adoption. " logo: { src: "https://scroll-eco-list.netlify.app/logos/Search%20On%20Dora.png", alt: "Chainlink Logo" } website: "https://bwarelabs.com/" -network: "Mainnet" +network: ["Mainnet"] noAdditionalInfo: true --- diff --git a/src/content/tools/en/safe.mdx b/src/content/tools/en/safe.mdx index 6bec967f5..b034db800 100644 --- a/src/content/tools/en/safe.mdx +++ b/src/content/tools/en/safe.mdx @@ -4,7 +4,7 @@ category: ["Identity", "Wallet"] excerpt: "" logo: { src: "https://app.safe.global/images/safe-logo-green.png", alt: "Safe Logo" } website: "https://app.safe.global" -network: "Mainnet" +network: ["Mainnet"] --- Scroll Mainnet is available in the [official Safe app](app.safe.global), and the transaction service API is at https://safe-transaction-scroll.safe.global. Here are the relevant contracts for Scroll Mainnet: diff --git a/src/content/tools/en/uniswap.mdx b/src/content/tools/en/uniswap.mdx index 257423b04..116301e2a 100644 --- a/src/content/tools/en/uniswap.mdx +++ b/src/content/tools/en/uniswap.mdx @@ -4,7 +4,7 @@ category: ["Defi"] excerpt: "" logo: { src: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Uniswap_Logo.svg/2051px-Uniswap_Logo.svg.png", alt: "Uniswap Logo" } website: "https://uniswap.org/" -network: "Mainnet" +network: ["Mainnet"] --- **_Scroll Mainnet_** diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro index 69d8b2004..f78e9fadc 100644 --- a/src/layouts/MainLayout.astro +++ b/src/layouts/MainLayout.astro @@ -137,6 +137,10 @@ changeLanguage(content.lang) margin-right: 20px; } + .wider-content { + grid-template-columns: minmax(230px, 2fr) 8fr 2fr; + } + #grid-right { grid-column: 3; display: flex; @@ -213,7 +217,7 @@ changeLanguage(content.lang)
    -
    +
    From 432be9f3035237aee469fc0cdc12b3a73c4c3a76 Mon Sep 17 00:00:00 2001 From: zhengqi zhang <770166635@qq.com> Date: Tue, 9 Jul 2024 21:45:22 +0800 Subject: [PATCH 6/7] Support dark mode --- .../Content/AdditionalInfo/AdditionalInfo.tsx | 2 +- src/components/Tooling/Content/Content.module.css | 4 +++- src/layouts/MainLayout.astro | 13 +++++++++---- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.tsx b/src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.tsx index 40d515d7c..e03c8333f 100644 --- a/src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.tsx +++ b/src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.tsx @@ -31,7 +31,7 @@ const AdditionalInfo = ({ data, selectedTool, onClose }) => { fill-rule="evenodd" clip-rule="evenodd" d="M17.731 1.56775C18.0897 1.20911 18.0897 0.627628 17.731 0.268984C17.3724 -0.0896612 16.7909 -0.0896612 16.4322 0.268984L9 7.70123L1.56775 0.268984C1.20911 -0.0896611 0.627629 -0.0896611 0.268984 0.268984C-0.0896607 0.627628 -0.0896607 1.20911 0.268984 1.56775L7.70123 9L0.268984 16.4323C-0.0896612 16.7909 -0.0896612 17.3724 0.268984 17.731C0.627628 18.0897 1.20911 18.0897 1.56775 17.731L17.731 1.56775ZM12.0065 10.7078C11.6479 10.3491 11.0664 10.3491 10.7078 10.7078C10.3491 11.0664 10.3491 11.6479 10.7078 12.0065L16.4322 17.731C16.7909 18.0897 17.3724 18.0897 17.731 17.731C18.0897 17.3724 18.0897 16.7909 17.731 16.4322L12.0065 10.7078Z" - fill="black" + fill="currentColor" />
    diff --git a/src/components/Tooling/Content/Content.module.css b/src/components/Tooling/Content/Content.module.css index f848b8fe8..d84b42e7b 100644 --- a/src/components/Tooling/Content/Content.module.css +++ b/src/components/Tooling/Content/Content.module.css @@ -2,11 +2,13 @@ border-radius: 27px; /* background: #fff8f3; */ padding: 30px; + margin-bottom: 30px; } .toolsList { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr minmax(424px, 1fr); + /* grid-template-columns: 8fr 2fr; */ gap: 30px; margin-top: 30px; } diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro index f78e9fadc..323d736b3 100644 --- a/src/layouts/MainLayout.astro +++ b/src/layouts/MainLayout.astro @@ -137,15 +137,20 @@ changeLanguage(content.lang) margin-right: 20px; } - .wider-content { - grid-template-columns: minmax(230px, 2fr) 8fr 2fr; - } - #grid-right { grid-column: 3; display: flex; } } + + @media screen and (max-width: 90em) and (min-width: 72em) { + .wider-content { + grid-template-columns: 1fr minmax(0, 68vw); + } + .wider-content #grid-right { + display: none; + } + }