Rework app examples (#1359)

* Rework app examples

* Drop styling comments

* Fix cspell

* Fix broken anchors

* Improve styling

* Rename article

components/CompactCard/index.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import styles from "./styles.module.css";
+
+const CompactCard = ({ name, description, technology, link, icon }) => (
+  <a
+    href={link}
+    className={styles.compactCard}
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    <div className={styles.compactCardContent}>
+      <div className={styles.compactCardHeader}>
+        {icon && <div className={styles.compactCardIcon}>{icon}</div>}
+        <h3 className={styles.compactCardTitle}>{name}</h3>
+      </div>
+      <p className={styles.compactCardDescription}>{description}</p>
+      <div className={styles.compactCardFooter}>
+        <span className={styles.technologyTag}>{technology}</span>
+      </div>
+    </div>
+  </a>
+);
+
+export default CompactCard;

components/CompactCard/styles.module.css

@@ -0,0 +1,66 @@
+.compactCard {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--gray2);
+  border: 1px solid var(--gray5);
+  border-radius: 8px;
+  width: 260px;
+  text-decoration: none;
+  color: var(--gray12);
+  padding: var(--spacer-2);
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+}
+.compactCard:hover {
+  text-decoration: none;
+  background-color: var(--gray1);
+  border-bottom-width: 1px !important;
+}
+
+.compactCardContent {
+  padding: var(--spacer-2);
+}
+
+.compactCardHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-1);
+  margin-bottom: var(--spacer-1);
+}
+
+.compactCardIcon {
+  width: 28px;
+  height: 28px;
+  fill: var(--gray9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.compactCardTitle {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  color: var(--gray12);
+}
+
+.compactCardDescription {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  margin-bottom: var(--spacer-2);
+  color: var(--gray9);
+}
+
+.compactCardFooter {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.technologyTag {
+  background-color: var(--gray4);
+  color: var(--gray11);
+  padding: var(--spacer-1) var(--spacer-2);
+  border-radius: 8px;
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+}

cspell.json

@@ -10,8 +10,10 @@
     "configurators",
     "givex",
     "graphene",
+    "htmx",
     "idfilter",
     "incentivized",
+    "klarna",
     "klaviyo",
     "magento",
     "metastring",

docs/developer/app-store/apps/avatax/development.mdx

@@ -5,7 +5,7 @@ title: Development
 
 To run the AvaTax App locally:
 
-1. Follow the [_Saleor Apps_ section in the _App Examples_ article](../../../extending/apps/developing-apps/app-examples#saleor-apps).
+1. Follow the [_Running Saleor Apps locally_ article](/developer/extending/apps/developing-apps/running-saleor-apps-locally).
 2. Go to the app directory.
 3. Copy the `.env.example` file to `.env`.The `.env` should contain the following variables:
 

docs/developer/app-store/apps/cms.mdx

@@ -212,7 +212,7 @@ The app will try to update it instead of creating it.
 
 To run the CMS App locally:
 
-1. Follow the [_Saleor Apps_ section in the _App Examples_ article](../../extending/apps/developing-apps/app-examples#saleor-apps).
+1. Follow the [_Running Saleor Apps locally_ article](/developer/extending/apps/developing-apps/running-saleor-apps-locally).
 2. Go to the app directory.
 3. Copy the `.env.example` file to `.env`. The `.env` should contain the following variables:
 

docs/developer/app-store/apps/crm.mdx

@@ -116,7 +116,7 @@ mutation SetMailchimpTags($customerID: ID!) {
 
 To run the CRM App locally:
 
-1. Follow the [_Saleor Apps_ section in the _App Examples_ article](../../extending/apps/developing-apps/app-examples#saleor-apps).
+1. Follow the [_Running Saleor Apps locally_ article](/developer/extending/apps/developing-apps/running-saleor-apps-locally).
 2. Go to the app directory.
 3. Copy the `.env.example` file to `.env`.
 

docs/developer/app-store/apps/emails-and-messages/overview.mdx

@@ -123,7 +123,7 @@ Each provider can be configured to work with specific channels. The configuratio
 
 ## Development
 
-To run the application locally, follow the [documentation](../../../extending/apps/developing-apps/app-examples#saleor-apps).
+To run the application locally, follow the [_Running Saleor Apps locally_ article](/developer/extending/apps/developing-apps/running-saleor-apps-locally).
 
 ## Known limitations and issues
 

docs/developer/app-store/apps/search.mdx

@@ -263,4 +263,4 @@ Examples of building interfaces with faceting can be found in the [Inspiration L
 
 ## Development
 
-To run the application locally, follow the [recordation](../../extending/apps/developing-apps/app-examples#saleor-apps).
+To run the application locally, follow the [_Running Saleor Apps locally_ article](/developer/extending/apps/developing-apps/running-saleor-apps-locally).

docs/developer/app-store/apps/smtp/overview.mdx

@@ -119,7 +119,7 @@ Each configuration can be configured to work with specific channels. The configu
 
 ## Development
 
-To run the application locally, follow the [documentation](../../../extending/apps/developing-apps/app-examples#saleor-apps).
+To run the application locally, follow the [documentation](/developer/extending/apps/developing-apps/running-saleor-apps-locally).
 
 ## Known limitations and issues