Frontend and updated readme (#222)

* Update Logo

* Add frontend next.js app

* Eslint silence for Vercel Build

* Update description

* Update Readme with Screenshot

* Update gitignore

* Update README.md

* Delete .DS_Store

* Revert "Delete .DS_Store"

This reverts commit 285370a.

* Update .gitignore

* Clean out defunct links in README.md

* Delete .DS_Store

* Update .gitignore

---------

Co-authored-by: Daniel <[email protected]>
Co-authored-by: Phil Sturgeon <[email protected]>

.gitignore

@@ -1,3 +1,6 @@
 node_modules/
 package-lock.json
 
+.vercel
+
+.DS_Store

checkReadme.js

@@ -0,0 +1,64 @@
+// Checks and rewrites the README.md for non working links
+const fs = require('fs')
+const axios = require('axios')
+
+// Read the README.md file
+fs.readFile('README.md', 'utf8', async (err, data) => {
+  if (err) {
+    console.error('Error reading README.md:', err)
+    return
+  }
+
+  // Regular expression to match links in the specified format
+  const linkRegex = /- \[(.*?)\]\((https?:\/\/.*?)\)(.*)/g
+
+  let content = data
+  let match
+  const removedLinks = []
+
+  while ((match = linkRegex.exec(data)) !== null) {
+    const [fullMatch, linkText, linkUrl, description] = match
+
+    try {
+      // Check the link validity with a maximum of 3 retries
+      await checkLinkValidity(linkUrl, 3)
+    } catch (error) {
+      console.error(`Removing invalid link: ${linkUrl}`)
+      content = content.replace(fullMatch, '')
+      removedLinks.push(linkUrl)
+    }
+  }
+
+  // Remove extra newline characters
+  content = content.replace(/\n{2,}/g, '\n\n')
+
+  // Write the updated content back to README.md
+  fs.writeFile('README.md', content, 'utf8', (err) => {
+    if (err) {
+      console.error('Error writing README.md:', err)
+      return
+    }
+    console.log('Link validation completed. README.md updated.')
+
+    if (removedLinks.length > 0) {
+      console.log('Removed links:')
+      removedLinks.forEach((link) => {
+        console.log(link)
+      })
+    }
+  })
+})
+
+async function checkLinkValidity(url, retries) {
+  try {
+    await axios.get(url)
+  } catch (error) {
+    if (retries > 0) {
+      console.log(`Retrying link: ${url} (${retries} retries left)`)
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      await checkLinkValidity(url, retries - 1)
+    } else {
+      throw error
+    }
+  }
+}

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

frontend/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/README.md

@@ -0,0 +1,23 @@
+A front end for the Awesome Earth project.
+
+Deployed at https://awesome-earth.org
+
+![awesome-earth.org](/frontend/awesome-earth-org.png?raw=true)
+
+## Development
+
+First, run the development server:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser.
+
+## Production
+
+```bash
+npm run build
+```
+
+The README.md file in the root folder is automatically converted to /frontend/app/data/links.js at build time.

frontend/app/components/Footer.tsx

@@ -0,0 +1,17 @@
+// app/components/Footer.tsx
+import { GlobeIcon } from './icons'
+
+export default function Footer() {
+  return (
+    <footer className='bg-[#1E824C] text-white py-6 px-6 relative'>
+      <div className='container mx-auto flex items-center justify-center'>
+        <div className='flex items-center gap-2 z-10'>
+          <GlobeIcon className='h-6 w-6' />
+          <span>Awesome Earth</span>
+        </div>
+      </div>
+      <div className='absolute bottom-0 right-0 w-[200px] h-[200px] rounded-full bg-gradient-to-r from-[#1E824C] to-[#3CB371] opacity-20 -z-10' />
+      <div className='absolute bottom-0 left-0 w-[150px] h-[150px] rounded-full bg-gradient-to-r from-[#3CB371] to-[#00FA9A] opacity-20 -z-10' />
+    </footer>
+  )
+}

frontend/app/components/Header.tsx

@@ -0,0 +1,40 @@
+// app/components/Header.tsx
+'use client'
+import { useState } from 'react'
+import { GlobeIcon, SearchIcon } from './icons'
+
+interface HeaderProps {
+  onSearchQueryChange: (query: string) => void
+}
+
+export default function Header({ onSearchQueryChange }: HeaderProps) {
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const query = e.target.value
+    setSearchQuery(query)
+    onSearchQueryChange(query)
+  }
+
+  return (
+    <header className='bg-[#1E824C] text-white py-4 px-6 flex flex-wrap justify-center sm:items-center sm:justify-between relative'>
+      <div className='flex items-center gap-2 z-10'>
+        <GlobeIcon className='h-8 w-8' />
+        <h1 className='text-2xl font-bold'>Awesome Earth</h1>
+      </div>
+      <div className='relative z-10'>
+        <input
+          className='bg-white text-gray-900 rounded-md px-4 py-2 pr-10 w-[350px] mt-5 sm:mt-0'
+          placeholder='Search for climate solutions...'
+          type='text'
+          value={searchQuery}
+          onChange={handleSearch}
+        />
+        <SearchIcon className='absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-500 mt-[10px] sm:mt-0' />
+      </div>
+      <div className='absolute top-0 right-0 w-[300px] h-[300px] rounded-full bg-gradient-to-r from-[#1E824C] to-[#3CB371] opacity-20 -z-10' />
+      <div className='absolute top-0 left-0 w-[250px] h-[250px] rounded-full bg-gradient-to-r from-[#3CB371] to-[#00FA9A] opacity-20 -z-10' />
+      <div className='absolute top-0 right-[500px] w-[200px] h-[200px] rounded-full bg-gradient-to-r from-[#00FA9A] to-[#1E824C] opacity-20 -z-10' />
+    </header>
+  )
+}