From 4740d4e5889771530d5a57b06e90df452eecbd03 Mon Sep 17 00:00:00 2001 From: Adam Schwartz Date: Tue, 3 Nov 2020 17:15:46 -0500 Subject: [PATCH] =?UTF-8?q?DocsWorkersExamples=20=E2=86=92=20DocsCodeExamp?= =?UTF-8?q?lesOverview?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Renaming since now Access uses this (https://git.io/JTbPs) as well as Workers, and the design works as a way of displaying a grid of any code examples, not specifically Workers code examples. --- gatsby-browser.js | 2 +- ...ples.js => docs-code-examples-overview.js} | 20 +++++----- ...es.css => docs-code-examples-overview.css} | 40 +++++++++---------- 3 files changed, 31 insertions(+), 31 deletions(-) rename src/components/{docs-workers-examples.js => docs-code-examples-overview.js} (84%) rename src/css/docs/components/{docs-workers-examples.css => docs-code-examples-overview.css} (61%) diff --git a/gatsby-browser.js b/gatsby-browser.js index 1384ab96..02e828f1 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -55,5 +55,5 @@ import "./src/css/docs/components/docs-mobile-header.css" import "./src/css/docs/components/docs-mobile-title-header.css" import "./src/css/docs/components/docs-mobile-nav-backdrop.css" import "./src/css/docs/components/docs-footer.css" -import "./src/css/docs/components/docs-workers-examples.css" +import "./src/css/docs/components/docs-code-examples-overview.css" import "./src/css/docs/components/docs-tutorials.css" diff --git a/src/components/docs-workers-examples.js b/src/components/docs-code-examples-overview.js similarity index 84% rename from src/components/docs-workers-examples.js rename to src/components/docs-code-examples-overview.js index 9acbefd2..beb873bb 100644 --- a/src/components/docs-workers-examples.js +++ b/src/components/docs-code-examples-overview.js @@ -12,7 +12,7 @@ const getCodeBlockFromMDXAST = ast => { } } -const DocsWorkersData = props => { +const DocsExamplesData = props => { const query = useStaticQuery(graphql` query { allMdx { @@ -70,7 +70,7 @@ const DocsWorkersData = props => { return props.children({ examples, tags }) } -class DocsWorkersExamples extends React.Component { +class DocsCodeExamplesOverview extends React.Component { constructor(props) { super(props) @@ -84,7 +84,7 @@ class DocsWorkersExamples extends React.Component { const activeTag = this.state.activeTag return ( - + {({ examples, tags }) => ( <>
@@ -106,7 +106,7 @@ class DocsWorkersExamples extends React.Component { ))}
-
+
{examples .filter(ex => activeTag === "All examples" ? @@ -114,18 +114,18 @@ class DocsWorkersExamples extends React.Component { ex.tags.indexOf(activeTag) >= 0 ) .map((example, i) => ( -
-
+
+
{example.title}
-
+

{example.summary}

- +
@@ -133,9 +133,9 @@ class DocsWorkersExamples extends React.Component {
)} - + ) } } -export default DocsWorkersExamples +export default DocsCodeExamplesOverview diff --git a/src/css/docs/components/docs-workers-examples.css b/src/css/docs/components/docs-code-examples-overview.css similarity index 61% rename from src/css/docs/components/docs-workers-examples.css rename to src/css/docs/components/docs-code-examples-overview.css index 2a70314b..66407ae1 100644 --- a/src/css/docs/components/docs-workers-examples.css +++ b/src/css/docs/components/docs-code-examples-overview.css @@ -1,15 +1,15 @@ -.DocsWorkersExamples { +.DocsCodeExamplesOverview { margin: 2.5rem 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: var(--docs-content-gap); } -.DocsWorkersExamples--example { +.DocsCodeExamplesOverview--example { border-radius: .5em; } -.DocsWorkersExamples--example-title { +.DocsCodeExamplesOverview--example-title { font-size: 1.5em; line-height: 1.2; font-weight: 500; @@ -19,7 +19,7 @@ overflow: hidden; } -.DocsWorkersExamples--example-title .Link { /* TODO */ +.DocsCodeExamplesOverview--example-title .Link { /* TODO */ color: inherit; --underline-opacity: .75; text-decoration: underline; @@ -27,12 +27,12 @@ box-shadow: 0 0 0 var(--focus-size) var(--focus-color); } -.DocsWorkersExamples--example-description { +.DocsCodeExamplesOverview--example-description { margin-bottom: 1em; } @media (min-width: 1153px) { - .DocsWorkersExamples--example-description { + .DocsCodeExamplesOverview--example-description { --lines: 2; display: -webkit-box; -webkit-line-clamp: var(--lines); @@ -42,17 +42,17 @@ } } -.DocsWorkersExamples--example-description > *:last-child { +.DocsCodeExamplesOverview--example-description > *:last-child { margin-bottom: 0; } -.DocsWorkersExamples--example-codeblock-link { +.DocsCodeExamplesOverview--example-codeblock-link { display: block; position: relative; color: inherit; } -.DocsWorkersExamples--example-codeblock-link::after { +.DocsCodeExamplesOverview--example-codeblock-link::after { content: ""; position: absolute; top: 0; @@ -65,33 +65,33 @@ } @media (hover: hover) { - .DocsWorkersExamples--example-codeblock-link:hover:not(:active)::after { + .DocsCodeExamplesOverview--example-codeblock-link:hover:not(:active)::after { background: rgba(255, 255, 255, .2); } - [theme="dark"] .DocsWorkersExamples--example-codeblock-link:hover:not(:active)::after { + [theme="dark"] .DocsCodeExamplesOverview--example-codeblock-link:hover:not(:active)::after { background: rgba(var(--color-rgb), .05); } } -.DocsWorkersExamples--example-codeblock-link:active::after { +.DocsCodeExamplesOverview--example-codeblock-link:active::after { background: rgba(var(--shadow-color-rgb), .05); --active-box-shadow-color: rgba(var(--shadow-color-rgb), .2); } -.DocsWorkersExamples--example-codeblock-link pre { +.DocsCodeExamplesOverview--example-codeblock-link pre { height: 19em; margin-bottom: 0; pointer-events: none; } -.DocsWorkersExamples--example-codeblock-link pre, -.DocsWorkersExamples--example-codeblock-link pre code { +.DocsCodeExamplesOverview--example-codeblock-link pre, +.DocsCodeExamplesOverview--example-codeblock-link pre code { overflow: hidden; } @media (max-width: 1152px) { - .DocsWorkersExamples { + .DocsCodeExamplesOverview { margin-left: 0; margin-right: 0; grid-template-columns: 100%; @@ -99,21 +99,21 @@ } @media (max-width: 768px) { - .DocsWorkersExamples--example-title { + .DocsCodeExamplesOverview--example-title { font-size: 1.375em; margin-bottom: .5rem; } - .DocsWorkersExamples--example-codeblock-link { + .DocsCodeExamplesOverview--example-codeblock-link { margin-left: -1rem; width: calc(100% + 2rem); } - .DocsWorkersExamples--example-codeblock-link::after { + .DocsCodeExamplesOverview--example-codeblock-link::after { border-radius: 0; } - .DocsWorkersExamples--example-codeblock-link pre { + .DocsCodeExamplesOverview--example-codeblock-link pre { height: 12.2em; --border-radius: 0em; }