create-trellis-docs 1.0.0

package/template/src/components/FlippingCard/FlippingCard.js

@@ -0,0 +1,197 @@
+import React, { useState } from 'react';
+import styles from './styles.module.css';
+
+function ArrowLeftIcon({ className }) {
+  return (
+    <svg
+      className={className}
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="15 18 9 12 15 6" />
+    </svg>
+  );
+}
+
+const FlippingCard = ({ data }) => {
+  const [flippedCardIndex, setFlippedCardIndex] = useState(null);
+
+  const handleCardFlip = (index) => {
+    if (flippedCardIndex === index) {
+      setFlippedCardIndex(null);
+    } else {
+      setFlippedCardIndex(index);
+    }
+  };
+
+  return (
+    <div className={styles.cardGallery}>
+      {data.map((card, index) => (
+        <div className={styles.cardGridItem} key={index}>
+          <CardComponent
+            byline={card.byline}
+            title={card.title}
+            description={card.description}
+            frontContent={card.frontContent}
+            checkYourKnowledge={card.checkYourKnowledge}
+            isFlipped={flippedCardIndex === index}
+            onFlip={() => handleCardFlip(index)}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const CardComponent = ({
+  byline,
+  title,
+  description,
+  frontContent,
+  checkYourKnowledge,
+  isFlipped,
+  onFlip,
+}) => {
+  const [selectedAnswer, setSelectedAnswer] = useState(null);
+  const [showExplanation, setShowExplanation] = useState(false);
+
+  const handleFlip = () => {
+    onFlip();
+    if (!isFlipped) {
+      setSelectedAnswer(null);
+      setShowExplanation(false);
+    }
+  };
+
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      handleFlip();
+    }
+  };
+
+  const handleAnswerSelect = (event) => {
+    setSelectedAnswer(Number(event.target.value));
+  };
+
+  const handleSubmit = (e) => {
+    e.stopPropagation();
+    setShowExplanation(true);
+  };
+
+  const getExplanations = () => {
+    const correctExplanation = checkYourKnowledge.explanations.find(
+      (exp) => exp.isCorrect
+    );
+    const selectedExplanation = checkYourKnowledge.explanations[selectedAnswer];
+    return {
+      correct: correctExplanation ? correctExplanation.text : '',
+      selected: selectedExplanation ? selectedExplanation.text : '',
+    };
+  };
+
+  return (
+    <div
+      className={`${styles.flipCard} ${isFlipped ? styles.flipped : ''}`}
+      onClick={handleFlip}
+      onKeyPress={handleKeyPress}
+      role="button"
+      aria-label={
+        isFlipped ? 'Show front of the card' : 'Show back of the card'
+      }
+      aria-live="polite"
+      tabIndex="0"
+    >
+      <div className={styles.flipCardInner}>
+        <div className={styles.flipCardFront}>
+          <div className={styles.cardContainer}>
+            <div className={styles.cardContent}>
+              <div className={styles.smallByline}>{byline}</div>
+              <h3 className={styles.cardTitle}>{title}</h3>
+              <div className={styles.cardDescription}>
+                <p>{description}</p>
+                {frontContent.map((content, index) => (
+                  <p key={index}>{content}</p>
+                ))}
+              </div>
+            </div>
+            <div className={styles.ctaContainer}>
+              <button className="button button--primary" onClick={handleFlip}>
+                Quiz Yourself
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className={styles.flipCardBack}>
+          <div className={styles.cardContainer}>
+            <div className={styles.cardContent}>
+              <div className={styles.smallBylineBack}>{title}</div>
+              <div
+                className={styles.quizContainer}
+                onClick={(e) => e.stopPropagation()}
+              >
+                {showExplanation ? (
+                  <div className={styles.explanation}>
+                    <h3 className={styles.explanationResult}>
+                      {selectedAnswer === checkYourKnowledge.correctAnswer
+                        ? 'Correct!'
+                        : 'Incorrect.'}
+                    </h3>
+                    <div className={styles.explanationText}>
+                      {selectedAnswer !== checkYourKnowledge.correctAnswer && (
+                        <p className={styles.incorrectExplanation}>
+                          {getExplanations().selected}
+                        </p>
+                      )}
+                      <p className={styles.correctExplanation}>
+                        {getExplanations().correct}
+                      </p>
+                    </div>
+                  </div>
+                ) : (
+                  <>
+                    <h5 className={styles.quizQuestion}>
+                      {checkYourKnowledge.question}
+                    </h5>
+                    <div className={styles.quizForm}>
+                      {checkYourKnowledge.options.map((option, index) => (
+                        <label key={index} className={styles.quizOption}>
+                          <input
+                            type="radio"
+                            name="quizOptions"
+                            value={index}
+                            checked={selectedAnswer === index}
+                            onChange={handleAnswerSelect}
+                            className={styles.quizRadio}
+                          />
+                          <span className={styles.quizLabel}>{option}</span>
+                        </label>
+                      ))}
+                    </div>
+                    <button
+                      className={styles.checkAnswerButton}
+                      onClick={handleSubmit}
+                      disabled={selectedAnswer === null}
+                    >
+                      Check Your Answer
+                    </button>
+                  </>
+                )}
+              </div>
+            </div>
+            <div className={styles.ctaContainer}>
+              <ArrowLeftIcon className={styles.ctaArrow} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FlippingCard;

package/template/src/components/FlippingCard/styles.module.css

@@ -0,0 +1,248 @@
+.flipCard {
+  perspective: 1000px;
+  width: 100%;
+  height: 415px;
+  margin-bottom: 0.25rem;
+  border-radius: 8px;
+}
+
+.flipCard:focus {
+  outline: 2px solid var(--ifm-color-primary);
+  outline-offset: 2px;
+}
+
+.flipCardInner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+}
+
+.flipCard.flipped .flipCardInner {
+  transform: rotateY(180deg);
+}
+
+[data-theme='dark'] .flipCardFront {
+  background-color: var(--ifm-background-color);
+}
+
+.flipCardFront,
+.flipCardBack {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  display: flex;
+  align-items: stretch;
+  justify-content: flex-start;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.flipCardBack {
+  transform: rotateY(180deg);
+  background-color: var(--ifm-color-primary);
+  color: var(--ifm-color-white);
+  overflow-y: auto;
+}
+
+.flipCardFront {
+  border: 0.25px solid var(--ifm-color-primary-lighter);
+}
+
+[data-theme='dark'] .flipCardBack {
+  color: var(--accent-teal-400-value, #2dd4bf);
+}
+
+.cardGallery {
+  padding: 10px 0 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
+  gap: 1.5rem;
+}
+
+.cardGridItem {
+  min-width: 0;
+}
+
+.cardContainer {
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+[data-theme='dark'] .cardContainer {
+  background-color: none;
+}
+
+.cardContent {
+  flex-grow: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.smallByline {
+  font-size: 11px;
+  color: var(--ifm-color-primary-light);
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  margin-bottom: 1.25rem;
+}
+
+.smallBylineBack {
+  font-size: 12px;
+  color: white;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  margin-bottom: 1.25rem;
+}
+
+.cardTitle {
+  font-size: 1.25rem;
+  margin-bottom: 0.75rem;
+}
+
+.cardDescription p {
+  font-size: 0.9rem;
+  line-height: 1.4;
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+}
+
+.cardDescription p:last-child {
+  margin-bottom: 0;
+}
+
+.ctaContainer {
+  cursor: pointer;
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+[data-theme='dark'] .ctaContainer {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.flipCardBack .ctaContainer {
+  border-top-color: rgba(255, 255, 255, 0.1);
+}
+
+.ctaArrow {
+  color: var(--ifm-color-primary);
+}
+
+.flipCardBack .ctaArrow {
+  color: var(--ifm-color-white);
+}
+
+.quizContainer {
+  margin-top: 0.25rem;
+}
+
+.quizQuestion {
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 1rem;
+}
+
+.quizForm {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.quizOption {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  padding: 0.25rem 0;
+}
+
+.quizRadio {
+  accent-color: var(--ifm-color-white);
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.quizLabel {
+  cursor: pointer;
+}
+
+.explanation {
+  margin-top: 1rem;
+  padding: 1rem;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+}
+
+.explanationResult {
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.explanationText {
+  font-size: 14px;
+}
+
+.checkAnswerButton {
+  display: inline-block;
+  margin-top: 1rem;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  font-weight: 500;
+  text-align: center;
+  text-decoration: none;
+  background-color: transparent;
+  color: white;
+  border: 1px solid white;
+  border-radius: 6px;
+  cursor: pointer;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
+}
+
+[data-theme='dark'] .checkAnswerButton {
+  color: var(--accent-teal-400-value, #2dd4bf);
+  border: 1px solid var(--accent-teal-400-value, #2dd4bf);
+}
+
+.checkAnswerButton:hover:not(:disabled) {
+  background-color: white;
+  color: var(--ifm-color-primary);
+}
+
+[data-theme='dark'] .checkAnswerButton:hover:not(:disabled) {
+  background-color: rgba(45, 212, 191, 0.15);
+}
+
+.checkAnswerButton:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+@media (min-width: 768px) {
+  .cardContainer {
+    padding: 1.25rem;
+  }
+
+  .cardTitle {
+    font-size: 1.5rem;
+  }
+
+  .cardDescription {
+    font-size: 1rem;
+  }
+}

package/template/src/components/Glossary.js

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react';
+import glossaryData from '../data/glossary.json';
+
+const Glossary = () => {
+  const [glossary, setGlossary] = useState([]);
+
+  useEffect(() => {
+    // Extract and sort glossary entries
+    const sortedGlossary = Object.entries(glossaryData)
+      .map(([term, definition]) => {
+        if (typeof definition === 'object') {
+          return {
+            term,
+            definition: Object.entries(definition).map(
+              ([subTerm, subDefinition]) => ({
+                term: subTerm,
+                definition: subDefinition,
+              })
+            ),
+          };
+        }
+        return { term, definition };
+      })
+      .sort((a, b) => a.term.localeCompare(b.term));
+
+    setGlossary(sortedGlossary);
+  }, []);
+
+  return (
+    <div>
+      <dl>
+        {glossary.map(({ term, definition }) => (
+          <div key={term}>
+            <dt>
+              <strong>{term}</strong>
+            </dt>
+            {Array.isArray(definition) ? (
+              <dd>
+                <ul>
+                  {definition.map((subItem) => (
+                    <li key={subItem.term}>
+                      <strong>{subItem.term}:</strong> {subItem.definition}
+                    </li>
+                  ))}
+                </ul>
+              </dd>
+            ) : (
+              <dd>{definition}</dd>
+            )}
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+};
+
+export default Glossary;