Subdomains

src/components/Chunk.js

@@ -87,7 +87,7 @@ export const Chunk = ({
   const history = useHistory()
 
   const isActive = useMemo(() => {
-    return location.pathname.includes(url)
+    return location.pathname.substr(1) === url
   }, [location.pathname, url])
 
   const handleChunkClick = useCallback(() => {

src/components/UrlPreview.js

@@ -19,6 +19,9 @@ const formattedMessageValues = {
   ProtocolLink: (...chunks) => {
     return <Link to="/protocol">{chunks}</Link>
   },
+  DomainLink: (...chunks) => {
+    return <Link to="/domain">{chunks}</Link>
+  }
 }
 
 const UrlBox = styled.div`
@@ -108,6 +111,29 @@ export const UrlPreview = () => {
       >
         https://
       </Chunk>
+      <Chunk
+        url="subdomain"
+        color="#e4974a"
+        explanation={() => (
+          <div>
+            <Heading>
+              <FormattedMessage id="url.http.subdomain.name" />
+            </Heading>
+            <p>
+              <FormattedMessage
+                id="url.http.subdomain.definition"
+                values={formattedMessageValues}
+              />
+            </p>
+            <FormattedMessage
+              id="url.http.subdomain.description"
+              values={formattedMessageValues}
+            />
+          </div>
+        )}
+      >
+        www.
+      </Chunk>
       <Chunk
         url="domain"
         orientation="top"
@@ -120,7 +146,6 @@ export const UrlPreview = () => {
             <p>
               <FormattedMessage
                 id="url.http.domain.definition"
-                values={formattedMessageValues}
               />
             </p>
             <FormattedMessage

src/locales/en-US.json

@@ -4,6 +4,9 @@
   "url.http.protocol.name": "Protocol",
   "url.http.protocol.definition": "Protocol describes a content and nature of comnunication between a browser and a server.",
   "url.http.protocol.description": "<p>The most common protocols on the web are <strong>HTTPS</strong> and <strong>HTTP</strong>, which are designed for handling hypertext documents (HTML). However, there are many other protocols, like FTP (File Transfer Protocol) for transferring files, or POP (Post Office Protocol) for sending and receiving emails.</p>",
+  "url.http.subdomain.name": "Subdomain",
+  "url.http.subdomain.definition": "Subdomain is a <DomainLink>domain</DomainLink> that is a part of another (main) <DomainLink>domain</DomainLink>.",
+  "url.http.subdomain.description": "<p>Subdomains can be used to separate different versions of the service (e.g. test and production), or for example to host eCommerce store next to a website.</p><p>Subdomains are not required, even though it has been very common to add <em>www.</em> subdomain.</p>",
   "url.http.domain.name": "Domain name",
   "url.http.domain.definition": "Domain is a human-readable address of the server.",
   "url.http.domain.description": "<p>In reality, all servers have IP addresses (i.e. <code>111.22.33.44</code>), but since those are hard to remember and subjected to change, we often use domain names like aliases instead.</p><p>When requested, a domain name is sent to the DNS (Domain Name Servers) that resolves it to the actual IP address of the server.</p>",