add structure

initial commit, add base components, json database file

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.0",
+    "bootstrap": "^4.6.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.3",

src/App.js

@@ -1,25 +1,51 @@
-import logo from './logo.svg';
-import './App.css';
+import React from 'react'
+import './App.css'
+import jsonData from './websiteData.json'
+import Rows from './components/Rows/Rows'
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+    <React.Fragment>
+      <header>
+        <h1>{jsonData.name}</h1>
       </header>
-    </div>
-  );
+      <main>
+        <Rows rows={jsonData.methods} />
+      </main>
+      <footer>
+        <ul>
+          <li>
+            <a
+              href="https://spb.hh.ru/resume/ff5930bbff033a8c5e0039ed1f47376b7a4d51"
+              rel="nofollow noopener"
+              lang="ru"
+              title="Резюме на hh.ru"
+            >
+              hh.ru
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://www.linkedin.com/in/2plus2is4/"
+              rel="nofollow noopener"
+              title="Hire in LinkedIn"
+            >
+              LinkedIn
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://www.linkedin.com/in/2plus2is4/"
+              rel="nofollow noopener"
+              title="Hire in LinkedIn"
+            >
+              LinkedIn
+            </a>
+          </li>
+        </ul>
+      </footer>
+    </React.Fragment>
+  )
 }
 
-export default App;
+export default App

src/components/Code/Code.jsx

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react'
+
+function Code(props) {
+  const codeElement = useRef(null)
+  useEffect(() => {
+    const script = document.createElement('script')
+    script.src = props.link
+    script.async = true
+    codeElement.current.appendChild(script)
+  })
+  return <code ref={codeElement} />
+}
+
+export default Code

src/components/Rows/Row.jsx

@@ -0,0 +1,56 @@
+import Code from '../Code/Code'
+
+function Row(props) {
+  return (
+    <>
+      <dt className={props.row.name}>{props.row.title}</dt>
+      <dd>
+        <section>
+          <ul className="row">
+            <li className="col">
+              <Code link={props.row['old-code-url']} />
+            </li>
+            <li className="col">
+              <Code link={props.row['new-code-url']} />
+            </li>
+          </ul>
+        </section>
+        <section>
+          <nav>
+            {props.row.links.map((linkSection) => {
+              return (
+                <>
+                  {linkSection.title ? <h4>{linkSection.title}</h4> : ''}
+                  <ol>
+                    {linkSection.links.map((link) => (
+                      <li>
+                        <a href={link.href} title={link?.title}>
+                          {link.text}
+                        </a>
+                      </li>
+                    ))}
+                  </ol>
+                </>
+              )
+            })}
+          </nav>
+        </section>
+        <section>
+          <nav>
+            <ol>
+              {props.row['can-i-use-it'].map((link) => (
+                <li>
+                  <a href={link.href} title={link?.title}>
+                    {link.text}
+                  </a>
+                </li>
+              ))}
+            </ol>
+          </nav>
+        </section>
+      </dd>
+    </>
+  )
+}
+
+export default Row

src/components/Rows/Rows.jsx

@@ -0,0 +1,13 @@
+import Row from './Row'
+
+function Rows(props) {
+  return (
+    <dl>
+      {props.rows.map((row) => (
+        <Row row={row} />
+      ))}
+    </dl>
+  )
+}
+
+export default Rows

src/index.js

@@ -1,17 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import reportWebVitals from './reportWebVitals'
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
-);
+)
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals()

src/websiteData.json

@@ -0,0 +1,38 @@
+{
+  "name": "You might not need old Web Methods - Accessible Code Examples",
+  "description": "Best accessability practices and cutting-edge CSS HTML technologies",
+  "methods": [
+    {
+      "name": "links",
+      "title": "Links",
+      "old-code-url": "//jsfiddle.net/meisloafer/v9rqf2ey/24/embed/html,css,result/",
+      "new-code-url": "//jsfiddle.net/meisloafer/v9rqf2ey/24/embed/html,css,result/dark/",
+      "links": [
+        {
+          "links": [
+            {
+              "href": "https://jsfiddle.net/meisloafer/v9rqf2ey/24/",
+              "text": "Open this code example at jsfiddle.net"
+            }
+          ]
+        },
+        {
+          "title": "Link Styling",
+          "links": [
+            {
+              "href": "https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/",
+              "text": "Designing Focus Indicators",
+              "title": "Caitlin Geier is a UX designer at deque.com"
+            }
+          ]
+        }
+      ],
+      "can-i-use-it": [
+        {
+          "href": "https://caniuse.com/#feat=text-decoration",
+          "text": "text-decoration styling"
+        }
+      ]
+    }
+  ]
+}