Each list item uses seperation between design elements. seo improvements

for each dashboard item
dimitardanailov · Jun 14, 2024 · a4d7f97 · a4d7f97
1 parent fd37fe3
commit a4d7f97
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 11 deletions.
diff --git a/apps/website/src/app/demos/Content.tsx b/apps/website/src/app/demos/Content.tsx
@@ -7,16 +7,36 @@ import Link from 'next/link'
 import items from './items'
 import {description} from './seo'
 
-const listStyle = 'list-disc mx-6 mt-0 mb-5'
+import styled from 'styled-components'
+
+const ListItem = styled.li`
+  position: relative;
+
+  list-style: none;
+  margin: 0.5rem 0rem 1rem;
+`
+
+const Title = styled.div`
+  font-weight: bold;
+  font-style: italic;
+  padding-bottom: 0.25rem;
+
+  &:hover {
+    color: #0000ff;
+  }
+`
 
 const ListItems = () => {
   const listItems = items.map((item, i) => (
-    <li key={i}>
-      <Link key={i} title={item.title} href={item.canonical}>
-        <span className="hover:underline">{item.description}</span>
-      </Link>
+    <ListItem key={i}>
+      <Title>
+        <Link key={i} title={item.title} href={item.canonical}>
+          <span className="hover:underline">{item.description}</span>
+        </Link>
+      </Title>
+
       <p>Technologies: {item.stack.join(', ')}</p>
-    </li>
+    </ListItem>
   ))
 
   return listItems
@@ -26,7 +46,7 @@ const Content = () => {
   return (
     <>
       <Slogan>{description}</Slogan>
-      <ul className={listStyle}>
+      <ul>
         <ListItems />
       </ul>
     </>

diff --git a/apps/website/src/app/demos/dashboard-etherium-airdrops/seo.ts b/apps/website/src/app/demos/dashboard-etherium-airdrops/seo.ts
@@ -4,7 +4,7 @@ import {coingeckoIds} from './db'
 const assets = coingeckoIds.join(', ')
 
 const title = 'Coingecko: etherium airdrop price checker (2024 edition)'
-const description = `Demo: Etherium price checker (Edition: 2024). Coingecko API fetches the following crypto assets ${assets}`
+const description = `Etherium price checker (Edition: 2024). Coingecko API fetches the following crypto assets ${assets}`
 const canonical = '/demos/dashboard-etherium-airdrops'
 
 const props: InternalMetadata = {

diff --git a/apps/website/src/app/demos/dashboard-etherium-restake/seo.ts b/apps/website/src/app/demos/dashboard-etherium-restake/seo.ts
@@ -1,7 +1,11 @@
 import {InternalMetadata} from '@/seo/metadata'
 
+import {coingeckoIds} from './db'
+
+const assets = coingeckoIds.join(', ')
+
 const title = 'Coingecko: etherium restake price checker'
-const description = 'Pairs are'
+const description = `Etherium restake price checker. Monitoring assets are ${assets}`
 const canonical = '/demos/dashboard-solana-airdrops'
 
 const props: InternalMetadata = {

diff --git a/apps/website/src/app/demos/dashboard-solana-airdrops/seo.ts b/apps/website/src/app/demos/dashboard-solana-airdrops/seo.ts
@@ -1,7 +1,11 @@
 import {InternalMetadata} from '@/seo/metadata'
 
+import {coingeckoIds} from './db'
+
+const assets = coingeckoIds.join(', ')
+
 const title = 'Coingecko: solana airdrop price checker'
-const description = 'Pairs are'
+const description = `Solana airdrop price checker. Coingecko is used to monitoring the following assets: ${assets}`
 const canonical = '/demos/dashboard-solana-airdrops'
 
 const props: InternalMetadata = {

diff --git a/apps/website/src/app/demos/dashboard-trade/seo.ts b/apps/website/src/app/demos/dashboard-trade/seo.ts
@@ -1,7 +1,11 @@
 import {InternalMetadata} from '@/seo/metadata'
 
+import {coingeckoIds} from './db'
+
+const assets = coingeckoIds.join(', ')
+
 const title = 'Coingecko: crypto monitoring dashboard'
-const description = 'Trading pairs are'
+const description = `Coingecko monitoring tool. Assets ${assets}`
 const canonical = '/demos/dashboard-trade'
 
 const props: InternalMetadata = {