create-trellis-docs 1.0.0

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

@@ -0,0 +1,167 @@
+.faqToc {
+  margin: 1.5rem 0 2rem;
+}
+
+.title {
+  margin-bottom: 1rem;
+}
+
+/* ── Search ── */
+
+.searchContainer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.searchIcon {
+  position: absolute;
+  left: 0.75rem;
+  color: var(--ifm-color-emphasis-500);
+  pointer-events: none;
+}
+
+.searchInput {
+  width: 100%;
+  padding: 0.625rem 2.25rem 0.625rem 2.5rem;
+  font-size: 0.9375rem;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius, 0.375rem);
+  background: var(--ifm-background-surface-color, var(--ifm-background-color));
+  color: var(--ifm-font-color-base);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.searchInput::placeholder {
+  color: var(--ifm-color-emphasis-500);
+}
+
+.searchInput:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 0 0 2px var(--ifm-color-primary-lightest, rgba(37, 194, 160, 0.15));
+}
+
+.clearButton {
+  position: absolute;
+  right: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--ifm-color-emphasis-200);
+  color: var(--ifm-color-emphasis-700);
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.clearButton:hover {
+  background: var(--ifm-color-emphasis-300);
+}
+
+/* ── Results ── */
+
+.resultCount {
+  margin: 0 0 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--ifm-color-emphasis-600);
+}
+
+.noResults {
+  padding: 1rem;
+  text-align: center;
+  color: var(--ifm-color-emphasis-600);
+  border: 1px dashed var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius, 0.375rem);
+}
+
+.emptyState {
+  padding: 1.5rem;
+  text-align: center;
+  color: var(--ifm-color-emphasis-600);
+  background: var(--ifm-color-emphasis-100);
+  border-radius: var(--ifm-global-radius, 0.375rem);
+}
+
+/* ── Topic groups ── */
+
+.topicGroup {
+  margin-bottom: 1.5rem;
+}
+
+.topicHeading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 0 0.25rem;
+  padding: 0.875rem 0 0.375rem 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.topicLink {
+  color: var(--ifm-font-color-base);
+  text-decoration: none;
+}
+
+.topicLink:hover {
+  color: var(--ifm-color-primary);
+  text-decoration: underline;
+}
+
+.questionCount {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.375rem;
+  height: 1.375rem;
+  padding: 0 0.375rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--ifm-color-emphasis-700);
+  background: var(--ifm-color-emphasis-200);
+  border-radius: 999px;
+}
+
+.topicDescription {
+  margin: 0 0 0.375rem;
+  font-size: 0.7125rem;
+  color: var(--ifm-color-emphasis-600);
+  line-height: 1.4;
+}
+
+/* ── Question list ── */
+
+.questionList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+}
+
+.questionItem {
+  margin: 0;
+}
+
+.questionLink {
+  display: block;
+  padding: 0 0 0 1rem;
+  font-size: 1rem;
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+  border-left: 2px solid transparent;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.questionLink:hover {
+  text-decoration: underline;
+  border-left-color: var(--ifm-color-primary);
+}

package/template/src/components/Feedback/Feedback.js

@@ -0,0 +1,310 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Modal,
+  IconButton,
+  FormControl,
+  FormGroup,
+  FormControlLabel,
+  Checkbox,
+  Button,
+  Typography,
+  Box,
+  TextField,
+  useMediaQuery,
+} from '@mui/material';
+import ThumbUpIcon from '@mui/icons-material/ThumbUp';
+import ThumbDownIcon from '@mui/icons-material/ThumbDown';
+import { createTheme } from '@mui/material/styles';
+import { DislikeOptions, LikeOptions, submitFeedback } from './api';
+import { FeedbackType } from './api';
+import { useDoc } from '@docusaurus/theme-common/internal';
+import CloseIcon from '@mui/icons-material/Close';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import Translate from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#7c3aed',
+    },
+    secondary: {
+      main: '#2dd4bf',
+      light: '#5eead4',
+      contrastText: '#f8fafc',
+    },
+  },
+});
+
+// Component for the "Report the Issue" link
+const ReportIssueUrl = ({ onClose }) => {
+  const { siteConfig } = useDocusaurusContext();
+  const repoUrl = siteConfig?.customFields?.repoUrl || '#';
+  const reportIssueUrl = `${repoUrl}/issues/new?title=Issue submitting feedback`;
+  return (
+    <a
+      href={reportIssueUrl}
+      target="_blank"
+      rel="noreferrer noopener"
+      className={ThemeClassNames.common.editThisPage}
+      onClick={onClose}
+    >
+      <Translate
+        id="theme.common.openDocIssue"
+        description="The link label to report an issue with submitting feedback"
+      >
+        Report the issue
+      </Translate>
+    </a>
+  );
+};
+
+// Modal to thank users for feedback
+const ThankYouModal = ({ open, onClose }) => (
+  <Modal open={open} onClose={onClose} aria-labelledby="thank-you-modal-title">
+    <Box
+      sx={{
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '300px',
+        bgcolor: 'background.paper',
+        color: 'text.primary',
+        boxShadow: 24,
+        p: 4,
+        textAlign: 'center',
+      }}
+    >
+      <IconButton
+        sx={{ position: 'absolute', top: 8, right: 8 }}
+        onClick={onClose}
+      >
+        <CloseIcon />
+      </IconButton>
+      <Typography
+        id="thank-you-modal-title"
+        variant="h4"
+        component="h2"
+        sx={{ marginBottom: '0.5em' }}
+      >
+        Thank you for your feedback!
+      </Typography>
+      <Typography variant="body1" sx={{ marginBottom: '1em' }}>
+        It helps us improve our technical content and user experience.
+      </Typography>
+    </Box>
+  </Modal>
+);
+
+// Modal to show an error message for feedback submission
+const OopsModal = ({ open, onClose }) => (
+  <Modal open={open} onClose={onClose} aria-labelledby="oops-modal-title">
+    <Box
+      sx={{
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '300px',
+        bgcolor: 'background.paper',
+        boxShadow: 24,
+        p: 4,
+        textAlign: 'center',
+        color: 'text.primary',
+      }}
+    >
+      <IconButton
+        sx={{ position: 'absolute', top: 8, right: 8 }}
+        onClick={onClose}
+      >
+        <CloseIcon />
+      </IconButton>
+      <Typography
+        id="oops-modal-title"
+        variant="h4"
+        component="h2"
+        sx={{ marginBottom: '0.5em' }}
+      >
+        Oops!
+      </Typography>
+      <Typography variant="body1" sx={{ marginBottom: '1em' }}>
+        It seems there was an issue with submitting your feedback.
+      </Typography>
+      <Typography variant="body1" sx={{ marginBottom: '1em' }}>
+        Try again or <ReportIssueUrl onClose={onClose} />.
+      </Typography>
+    </Box>
+  </Modal>
+);
+
+const Feedback = () => {
+  const [feedbackType, setFeedbackType] = useState(null);
+  const [feedbackOptions, setFeedbackOptions] = useState([]);
+  const [textData, setTextData] = useState('');
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const [thankYouModalOpen, setThankYouModalOpen] = useState(false);
+  const [oopsModalOpen, setOopsModalOpen] = useState(false);
+  const { metadata } = useDoc();
+
+  const handleFeedbackChange = (feedback, checked) => {
+    if (checked) {
+      setFeedbackOptions((prev) => [...prev, feedback]);
+    } else {
+      setFeedbackOptions((prev) => prev.filter((e) => e !== feedback));
+    }
+  };
+
+  const submitModal = async () => {
+    try {
+      await submitFeedback({
+        page: metadata.slug,
+        type: feedbackType,
+        options: feedbackOptions,
+        comment: textData.trim(),
+      });
+      setFeedbackType(null);
+      setFeedbackOptions([]);
+      setTextData('');
+      setThankYouModalOpen(true);
+    } catch (error) {
+      setFeedbackType(null);
+      setOopsModalOpen(true);
+      console.error('Error submitting feedback:', error?.toString?.() || error);
+    }
+  };
+
+  const options = useMemo(() => {
+    if (feedbackType === FeedbackType.LIKE) return LikeOptions;
+    if (feedbackType === FeedbackType.DISLIKE) return DislikeOptions;
+    return {};
+  }, [feedbackType]);
+
+  return (
+    <div className="container">
+      <div className="row">
+        <div className="col">
+          <div className="col-demo">
+            <h4>Was this page helpful?</h4>
+            <IconButton
+              aria-label="yes"
+              onClick={() => setFeedbackType(FeedbackType.LIKE)}
+            >
+              <ThumbUpIcon color="success" />
+            </IconButton>
+            <IconButton
+              aria-label="no"
+              onClick={() => setFeedbackType(FeedbackType.DISLIKE)}
+            >
+              <ThumbDownIcon color="error" />
+            </IconButton>
+          </div>
+        </div>
+      </div>
+      <Modal
+        open={!!feedbackType}
+        onClose={() => setFeedbackType(null)}
+        aria-labelledby="modal-title"
+      >
+        <Box
+          sx={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: isSmallScreen ? '90%' : 'auto',
+            bgcolor: 'background.paper',
+            boxShadow: 24,
+            p: 4,
+            maxHeight: '90vh',
+            overflowY: 'auto',
+          }}
+        >
+          <Typography
+            id="modal-title"
+            variant="h6"
+            component="h2"
+            sx={{
+              color: 'text.primary',
+              fontWeight: 700,
+              marginBottom: '0.5em',
+              textAlign: 'center',
+            }}
+          >
+            {feedbackType === FeedbackType.LIKE
+              ? `What did you like?`
+              : `What went wrong?`}
+          </Typography>
+          <FormControl
+            component="fieldset"
+            variant="standard"
+            sx={{ width: '100%' }}
+          >
+            <FormGroup>
+              {Object.entries(options).map(([value, label]) => (
+                <FormControlLabel
+                  key={value}
+                  control={
+                    <Checkbox
+                      checked={feedbackOptions.includes(value)}
+                      onChange={(e) =>
+                        handleFeedbackChange(value, e.target.checked)
+                      }
+                      theme={theme}
+                      color="primary"
+                    />
+                  }
+                  label={
+                    <Typography sx={{ fontSize: '14px', color: 'text.primary' }}>
+                      {label}
+                    </Typography>
+                  }
+                  sx={{ alignItems: 'center' }}
+                />
+              ))}
+              {feedbackOptions.find((o) => o.endsWith('ANOTHER_REASON')) && (
+                <TextField
+                  sx={{ fontSize: '12px', marginTop: '1em' }}
+                  fullWidth
+                  id="standard-multiline-static"
+                  size="small"
+                  multiline
+                  rows={5}
+                  variant="filled"
+                  value={textData}
+                  onChange={(e) => setTextData(e.target.value)}
+                  placeholder="Please provide details"
+                />
+              )}
+            </FormGroup>
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                marginTop: '2em',
+              }}
+            >
+              <Button
+                theme={theme}
+                color="primary"
+                size="small"
+                variant="contained"
+                onClick={submitModal}
+                sx={{ borderRadius: '12px' }}
+              >
+                Submit
+              </Button>
+            </Box>
+          </FormControl>
+        </Box>
+      </Modal>
+      <ThankYouModal
+        open={thankYouModalOpen}
+        onClose={() => setThankYouModalOpen(false)}
+      />
+      <OopsModal open={oopsModalOpen} onClose={() => setOopsModalOpen(false)} />
+    </div>
+  );
+};
+
+export default Feedback;

package/template/src/components/Feedback/api.js

@@ -0,0 +1,77 @@
+// src/components/Feedback/api.js
+
+const getBaseUrl = () => {
+  // Only use window.location when in browser context
+  if (typeof window === 'undefined') {
+    return '/api/feedback';
+  }
+
+  const hostname = window.location.hostname;
+
+  // Local development - Docusaurus on 3000, feedback server on 3002
+  if (hostname === 'localhost' || hostname === '127.0.0.1') {
+    return 'http://localhost:3002/api/feedback';
+  }
+
+  // Production - both services behind same domain
+  return '/api/feedback';
+}
+
+export const FeedbackType = {
+  LIKE: 'like',
+  DISLIKE: 'dislike'
+}
+
+export const LikeOptions = {
+  ACCURATE: 'Accurately describes the platform',
+  RESOLVE_ISSUE: 'Helped me resolve an issue',
+  EASY_TO_FOLLOW: 'Easy to follow and comprehend',
+  CLEAR_CODE_SAMPLES: 'Code samples were clear',
+  ADOPT_PLATFORM: 'Convinced me to adopt the platform',
+  POSITIVE_ANOTHER_REASON: 'Provide details'
+};
+
+export const DislikeOptions = {
+  INACCURATE: 'Doesn\'t accurately describe the platform',
+  NOT_FOUND: 'Couldn\'t find what I was looking for',
+  MISSING_INFO: 'Missing important information',
+  HARD_TO_UNDERSTAND: 'Hard to understand',
+  COMPLICATED: 'Too complicated or unclear',
+  CODE_ERRORS: 'Code sample errors',
+  NEGATIVE_ANOTHER_REASON: 'Provide details'
+};
+
+export const submitFeedback = async (payload) => {
+  const url = `${getBaseUrl()}/submit`;
+  console.log('Submitting feedback to:', url);
+  console.log('Payload:', payload);
+
+  try {
+      const response = await fetch(url, {
+          method: 'POST',
+          body: JSON.stringify(payload),
+          headers: {
+              'Content-Type': 'application/json'
+          }
+      });
+
+      if (!response.ok) {
+          const errorText = await response.text();
+          console.error('Server error:', errorText);
+          throw new Error(`Server responded with ${response.status}`);
+      }
+
+      const result = await response.json();
+      console.log('Submit success:', result);
+      return result;
+  } catch (error) {
+      console.error('Submit error:', error);
+      throw error;
+  }
+}
+
+export const getFeedbackData = async () => {
+  const response = await fetch(getBaseUrl());
+  if (!response.ok) throw response;
+  return response.json();
+}