Add /contact page, use instead of email (#298)

Author: rfay

src/components/Footer.astro

@@ -10,18 +10,19 @@ import {
   COPYRIGHT_HOLDER,
   MASTODON_URL,
   GITHUB_URL,
-  STORE_URL, 
+  STORE_URL,
   BLUESKY_URL,
+  LINKEDIN_URL,
 } from "../const"
 
 import Icon from "./Icon.astro"
 
 const navigation = {
   support: [
-    { name: "Documentation", href: DOCUMENTATION_URL },
-    { name: "Issues", href: GITHUB_ISSUES_URL },
-    { name: "Discord", href: DISCORD_URL },
-    { name: "Email", href: EMAIL_URL }
+    { name: "Documentation", href: DOCUMENTATION_URL, target: "_blank" },
+    { name: "Issues", href: GITHUB_ISSUES_URL, target: "_blank" },
+    { name: "Discord", href: DISCORD_URL, target: "_blank", me: true },
+    { name: "Contact", href: "/contact", me: true }
   ],
   product: [
     { name: "About", href: "/about" },
@@ -36,17 +37,23 @@ const navigation = {
     {
       name: "Discord",
       href: DISCORD_URL,
+      me: true
     },
     {
       name: "Bluesky",
       href: BLUESKY_URL,
-      me:true
+      me: true
     },
     {
       name: "Mastodon",
       href: MASTODON_URL,
       me: true
     },
+    {
+      name: "LinkedIn",
+      href: LINKEDIN_URL,
+      me: true
+    },
     {
       name: "GitHub",
       href: GITHUB_URL,
@@ -65,14 +72,15 @@ const navigation = {
             <h2 class="text-sm font-mono text-navy-300 tracking-wider">
               Support
             </h2>
-            <ul class="mt-4 space-y-4">
+            <ul class="mt-4 space-y-4 dark:text-white">
               {
                 navigation.support.map((item) => (
                   <li>
                     <a
                       href={item.href}
-                      class="text-base external-link dark:text-white"
-                      target="_blank"
+                      class="text-base"
+                      rel={item.hasOwnProperty('me') && item.me ? 'me' : 'prefetch'}
+                      target={item.target || '_self'}
                     >
                       {item.name}
                     </a>
@@ -88,19 +96,16 @@ const navigation = {
             <ul class="mt-4 space-y-4 dark:text-white">
               {
                 navigation.product.map((item) => (
-                  item.target == "undefined" ?
-                  <li>
-                    <a href={item.href} class="text-base" rel="prefetch">
-                      {item.name}
-                    </a>
-                  </li>
-                  :
                   <li>
-                    <a href={item.href} class="text-base" rel="prefetch" target={item.target}>
+                    <a
+                      href={item.href}
+                      class="text-base"
+                      rel={item.hasOwnProperty('me') && item.me ? 'me' : 'prefetch'}
+                      target={item.target || '_self'}
+                    >
                       {item.name}
                     </a>
                   </li>
-
                 ))
               }
             </ul>
@@ -113,7 +118,12 @@ const navigation = {
               {
                 navigation.social.map((item) => (
                     <li>
-                      <a href={item.href} class="text-base" rel="prefetch" target="_blank">
+                      <a
+                        href={item.href}
+                        class="text-base"
+                        rel={item.hasOwnProperty('me') && item.me ? 'me' : 'prefetch'}
+                        target="_blank"
+                      >
                         {item.name}
                       </a>
                     </li>

src/components/Icon.astro

@@ -52,6 +52,18 @@ const { name } = Astro.props
   )
 }
 
+{
+  name === "LinkedIn" && (
+    <svg
+      fill="currentColor"
+      viewBox="0 0 72 72"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z" />
+    </svg>
+  )
+}
+
 {
   name === "Bluesky" && (
     <svg

src/const.ts

@@ -3,6 +3,7 @@ export const SITE_DESCRIPTION =
   "Docker-based local PHP+Node.js web development environments."
 export const STORE_URL = "https://ddev.threadless.com"
 export const BLUESKY_URL = "https://bsky.app/profile/ddev.bsky.social"
+export const LINKEDIN_URL = "https://www.linkedin.com/company/ddev-foundation"
 export const GITHUB_REPO = "ddev/ddev"
 export const GITHUB_URL = "https://github.com/ddev/ddev"
 export const GITHUB_URL_WEBSITE =
@@ -11,17 +12,18 @@ export const GITHUB_ISSUES_URL = "https://github.com/ddev/ddev/issues"
 export const DOCUMENTATION_URL = "https://ddev.readthedocs.io/"
 export const DISCORD_URL = "/s/discord"
 export const EMAIL_URL = "mailto:support%40ddev.com"
+export const MEETING_URL = "https://cal.com/randyfay/30min"
 export const COPYRIGHT_HOLDER = "DDEV Foundation"
 export const MASTODON_URL = "https://fosstodon.org/@ddev"
 export const ORG_STREET = "848 Montclair Dr"
 export const ORG_CITY = "Palisade"
 export const ORG_STATE = "Colorado"
 export const ORG_STATE_ABBR = "CO"
 export const ORG_POSTAL_CODE = "81526"
-export const ORG_COUNTRY = "US"
+export const ORG_COUNTRY = "USA"
 export const ORG_NAME = "DDEV Foundation"
 export const ORG_EMAIL = "support@localdev.foundation"
-export const ORG_PHONE = "(970) 462-7450"
+export const ORG_PHONE = "+1 970 462-7450"
 export const ORG_FOUNDED = "2021-09-02"
 export const ORG_SAME_AS = [
   "https://github.com/ddev",

src/pages/contact.astro

@@ -0,0 +1,50 @@
+---
+import Layout from "../layouts/Layout.astro"
+import Heading from "../components/Heading.astro"
+import PostBody from "../components/PostBody.astro"
+
+import {
+  ORG_NAME,
+  ORG_STREET,
+  ORG_CITY,
+  ORG_STATE_ABBR,
+  ORG_POSTAL_CODE,
+  ORG_COUNTRY,
+  ORG_PHONE,
+  EMAIL_URL,
+  MEETING_URL,
+} from "../const"
+
+const title = `Contact Us`
+---
+
+<Layout
+  title={title}
+>
+  <main class="max-w-4xl mx-auto mb-24">
+    <Heading title={`Contact DDEV`} />
+    <div class="lg:flex">
+      <div class="px-6 lg:px-0 lg:w-2/3">
+        <PostBody>
+          <h2>Easy Contact Info</h2>
+          <p>
+            We're delighted to talk with you any time!
+          </p>
+          
+          <ul>
+            <li>Email <a href={EMAIL_URL}>support</a></li>
+            <li><a href={MEETING_URL}>Set up a meeting</a></li>
+          </ul>
+            
+          <h2>Snail Mail and Phone:</h2>
+
+            {ORG_NAME}<br />
+            {ORG_STREET}<br />
+            {ORG_CITY}, {ORG_STATE_ABBR}&nbsp;{ORG_POSTAL_CODE}&nbsp; {ORG_COUNTRY}<br />
+            {ORG_PHONE}<br />
+
+        </PostBody>
+      </div>
+    </div>
+  </main>
+</Layout>

src/pages/foundation.astro

@@ -46,8 +46,7 @@ const title = `DDEV Foundation`
 
           {ORG_NAME}<br />
           {ORG_STREET}<br />
-          {ORG_CITY}, {ORG_STATE_ABBR}&nbsp;{ORG_POSTAL_CODE}<br />
-          {ORG_COUNTRY}<br />
+          {ORG_CITY}, {ORG_STATE_ABBR}&nbsp;{ORG_POSTAL_CODE}&nbsp; {ORG_COUNTRY}<br />
           {ORG_PHONE}<br />
 
           <h2>Colorado nonprofit corporation registration</h2>