DocsWorkersExamples → DocsCodeExamplesOverview

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.
cloudflare · Nov 3, 2020 · 4740d4e · 4740d4e
1 parent d8babf0
commit 4740d4e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 31 deletions.
diff --git 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 → ...components/docs-code-examples-overview.js b/src/components/docs-workers-examples.js → ...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 (
-      <DocsWorkersData>
+      <DocsExamplesData>
         {({ examples, tags }) => (
           <>
             <div className="TagsFilter">
@@ -106,36 +106,36 @@ class DocsWorkersExamples extends React.Component {
               ))}
             </div>
 
-            <div className="DocsWorkersExamples">
+            <div className="DocsCodeExamplesOverview">
               {examples
                 .filter(ex =>
                   activeTag === "All examples" ?
                     true :
                     ex.tags.indexOf(activeTag) >= 0
                 )
                 .map((example, i) => (
-                  <div key={example.url} className="DocsWorkersExamples--example">
-                    <div className="DocsWorkersExamples--example-title">
+                  <div key={example.url} className="DocsCodeExamplesOverview--example">
+                    <div className="DocsCodeExamplesOverview--example-title">
                       <Link className="Link" to={example.url}>
                         {example.title}
                       </Link>
                     </div>
 
-                    <div className="DocsWorkersExamples--example-description">
+                    <div className="DocsCodeExamplesOverview--example-description">
                       <p>{example.summary}</p>
                     </div>
 
-                    <Link to={example.url} className="DocsWorkersExamples--example-codeblock-link">
+                    <Link to={example.url} className="DocsCodeExamplesOverview--example-codeblock-link">
                       <CodeBlock lang={example.code.lang} children={example.code.value}/>
                     </Link>
                   </div>
               ))}
             </div>
           </>
         )}
-      </DocsWorkersData>
+      </DocsExamplesData>
     )
   }
 }
 
-export default DocsWorkersExamples
+export default DocsCodeExamplesOverview
diff --git a/...docs/components/docs-workers-examples.css → ...omponents/docs-code-examples-overview.css b/...docs/components/docs-workers-examples.css → ...omponents/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,20 +19,20 @@
   overflow: hidden;
 }
 
-.DocsWorkersExamples--example-title .Link { /* TODO */
+.DocsCodeExamplesOverview--example-title .Link { /* TODO */
   color: inherit;
   --underline-opacity: .75;
   text-decoration: underline;
   text-decoration-color: rgba(var(--orange-rgb), var(--underline-opacity));
   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,55 +65,55 @@
 }
 
 @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%;
   }
 }
 
 @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;
   }