@stacksjs/defaults 0.70.207 → 0.70.208

package/views/forum/index.stx

@@ -0,0 +1,209 @@
+<script server>
+const filter = ''
+</script>
+<ForumLayout :route="currentRoute">
+  <div class="grid gap-8 grid-cols-1 lg:grid-cols-3">
+    <div class="lg:col-span-2">
+      <ForumBreadcrumb :items="breadcrumbItems" />
+
+      @if (!filter)
+        <div>
+          <ForumCategory title="Announcements">
+            <ForumCategoryItem
+              title="Welcome to the Stacks Community Forum"
+              description="Important information about the forum rules and guidelines. Please read before posting."
+              link="/forum/category/announcements/welcome"
+              :topicCount="5"
+              :postCount="42"
+              icon="i-hugeicons-megaphone"
+              :latestTopic="{
+                title: 'Forum Rules and Guidelines',
+                link: '/forum/topic/4',
+                timeAgo: '1 week ago',
+                author: 'Admin',
+                authorLink: '/forum/profile/admin'
+              }"
+            />
+            <ForumCategoryItem
+              title="Stacks.js v2.0 Release Notes"
+              description="Learn about the latest features and improvements in Stacks.js v2.0"
+              link="/forum/category/announcements/release-notes"
+              :topicCount="12"
+              :postCount="87"
+              icon="i-hugeicons-newspaper"
+              :latestTopic="{
+                title: 'Stacks.js v2.0 Released!',
+                link: '/forum/topic/6',
+                timeAgo: '3 days ago',
+                author: 'StacksMaster',
+                authorLink: '/forum/profile/stacksmaster'
+              }"
+            />
+          </ForumCategory>
+
+          <ForumCategory title="General Discussion">
+            <ForumCategoryItem
+              title="General Chat"
+              description="A place to discuss anything related to Stacks.js and our community."
+              link="/forum/category/general/chat"
+              :topicCount="128"
+              :postCount="1243"
+              :latestTopic="{
+                title: 'Best practices for database migrations in Stacks.js',
+                link: '/forum/topic/3',
+                timeAgo: '1 day ago',
+                author: 'DatabaseGuru',
+                authorLink: '/forum/profile/databaseguru'
+              }"
+            />
+            <ForumCategoryItem
+              title="Introductions"
+              description="New to the forum? Introduce yourself here and meet other community members!"
+              link="/forum/category/general/introductions"
+              :topicCount="75"
+              :postCount="312"
+              icon="i-hugeicons-user-plus"
+              :latestTopic="{
+                title: 'Introducing myself to the community!',
+                link: '/forum/topic/2',
+                timeAgo: '5 hours ago',
+                author: 'NewUser123',
+                authorLink: '/forum/profile/newuser123'
+              }"
+            />
+            <ForumCategoryItem
+              title="Feedback & Suggestions"
+              description="Share your ideas and suggestions for improving Stacks.js and the forum."
+              link="/forum/category/general/feedback"
+              :topicCount="34"
+              :postCount="156"
+              icon="i-hugeicons-lightbulb"
+              :latestTopic="{
+                title: 'Suggestion: Add dark mode to the forum',
+                link: '/forum/topic/7',
+                timeAgo: '2 days ago',
+                author: 'DarkModeEnthusiast',
+                authorLink: '/forum/profile/darkmode'
+              }"
+            />
+          </ForumCategory>
+
+          <ForumCategory title="Technical Support">
+            <ForumCategoryItem
+              title="Installation & Setup"
+              description="Need help with installing or setting up Stacks.js? Ask here."
+              link="/forum/category/support/installation"
+              :topicCount="87"
+              :postCount="423"
+              icon="i-hugeicons-wrench"
+              :latestTopic="{
+                title: 'How to implement authentication in a new Stacks.js project?',
+                link: '/forum/topic/1',
+                timeAgo: '2 hours ago',
+                author: 'JohnDoe',
+                authorLink: '/forum/profile/johndoe'
+              }"
+            />
+            <ForumCategoryItem
+              title="Troubleshooting"
+              description="Having issues with your Stacks.js project? Get help from the community."
+              link="/forum/category/support/troubleshooting"
+              :topicCount="142"
+              :postCount="768"
+              icon="i-hugeicons-bug"
+              :latestTopic="{
+                title: 'TypeError when using the new API client',
+                link: '/forum/topic/8',
+                timeAgo: '6 hours ago',
+                author: 'BugHunter',
+                authorLink: '/forum/profile/bughunter'
+              }"
+            />
+            <ForumCategoryItem
+              title="Feature Requests"
+              description="Request new features or enhancements for Stacks.js."
+              link="/forum/category/support/feature-requests"
+              :topicCount="56"
+              :postCount="289"
+              icon="i-hugeicons-star"
+              :latestTopic="{
+                title: 'Request: Add built-in support for WebSockets',
+                link: '/forum/topic/9',
+                timeAgo: '4 days ago',
+                author: 'RealtimeDev',
+                authorLink: '/forum/profile/realtimedev'
+              }"
+            />
+          </ForumCategory>
+        </div>
+      @endif
+
+      <ForumTopicList :title="listTitle">
+        @foreach (topic in topics)
+          <ForumTopicItem
+            :key="topic.id"
+            :title="topic.title"
+            :link="topic.link"
+            :authorName="topic.authorName"
+            :authorAvatar="topic.authorAvatar"
+            :createdAt="topic.createdAt"
+            :viewCount="topic.viewCount"
+            :replyCount="topic.replyCount"
+            :likeCount="topic.likeCount"
+            :category="topic.category"
+            :categoryLink="topic.categoryLink"
+            :excerpt="topic.excerpt || ''"
+            :isPinned="!!topic.isPinned"
+            :isSolved="!!topic.isSolved"
+            :lastReplyAuthorName="topic.lastReplyAuthorName || ''"
+            :lastReplyAuthorAvatar="topic.lastReplyAuthorAvatar || ''"
+            :lastReplyAt="topic.lastReplyAt || ''"
+          />
+        @endforeach
+      </ForumTopicList>
+
+      <ForumPagination :currentPage="1" :totalPages="5" />
+    </div>
+
+    <div class="lg:col-span-1">
+      <ForumSidebar
+        :stats="{
+          topics: 540,
+          posts: 3287,
+          members: 1245,
+          newestMember: 'NewUser123'
+        }"
+        :popularTopics="[
+          {
+            id: 1,
+            title: 'How to implement authentication in a new Stacks.js project?',
+            link: '/forum/topic/1',
+            replyCount: 3,
+            viewCount: 45
+          },
+          {
+            id: 2,
+            title: 'Best practices for database migrations in Stacks.js',
+            link: '/forum/topic/3',
+            replyCount: 15,
+            viewCount: 128
+          },
+          {
+            id: 3,
+            title: 'Introducing myself to the community!',
+            link: '/forum/topic/2',
+            replyCount: 8,
+            viewCount: 32
+          }
+        ]"
+        :onlineUsers="[
+          { id: 1, name: 'JohnDoe', avatar: '/images/avatars/default.png' },
+          { id: 2, name: 'DatabaseGuru', avatar: '/images/avatars/default.png' },
+          { id: 3, name: 'NewUser123', avatar: '/images/avatars/default.png' },
+          { id: 4, name: 'ExpertUser', avatar: '/images/avatars/default.png' },
+          { id: 5, name: 'StacksMaster', avatar: '/images/avatars/default.png' }
+        ]"
+      />
+    </div>
+  </div>
+</ForumLayout>

package/views/forum/new-topic.stx

@@ -0,0 +1,113 @@
+<script>
+</script>
+
+<ForumLayout route="forum-new-topic">
+  <div class="mx-auto max-w-3xl">
+    <ForumBreadcrumb :items="[
+      { label: 'Forum', link: '/forum' },
+      { label: 'New Topic', link: '/forum/new-topic' }
+    ]" />
+
+    <div class="mb-6 border rounded-md">
+      <div class="flex items-center px-4 py-3 bg-gray-50 rounded-t-md">
+        <h1 class="font-medium text-lg">Create New Topic</h1>
+      </div>
+
+      <div class="p-4">
+        <div class="space-y-4">
+          <div>
+            <label class="block mb-1 font-medium">Title</label>
+            <input
+              type="text"
+              placeholder="Enter a descriptive title for your topic"
+              class="px-3 py-2 w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+            >
+            <div class="mt-1 text-gray-500 text-xs">
+              Be specific and imagine you're asking a question to another person
+            </div>
+          </div>
+
+          <div>
+            <label class="block mb-1 font-medium">Category</label>
+            <select class="px-3 py-2 w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
+              <option value="">Select a category</option>
+              <optgroup label="General Discussion">
+                <option value="general-chat">General Chat</option>
+                <option value="introductions">Introductions</option>
+                <option value="feedback">Feedback & Suggestions</option>
+              </optgroup>
+              <optgroup label="Technical Support">
+                <option value="installation">Installation & Setup</option>
+                <option value="troubleshooting">Troubleshooting</option>
+                <option value="feature-requests">Feature Requests</option>
+              </optgroup>
+            </select>
+          </div>
+
+          <div>
+            <label class="block mb-1 font-medium">Content</label>
+            <div class="mb-2">
+              <div class="flex gap-2 mb-2">
+                <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded">B</button>
+                <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded">I</button>
+                <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded">
+                  <span class="i-hugeicons-link"></span>
+                </button>
+                <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded">
+                  <span class="i-hugeicons-code"></span>
+                </button>
+                <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded">
+                  <span class="i-hugeicons-image"></span>
+                </button>
+              </div>
+              <textarea
+                class="p-3 min-h-40 w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                placeholder="Describe your topic in detail. Include any relevant code, error messages, or screenshots."
+              ></textarea>
+            </div>
+          </div>
+
+          <div>
+            <label class="block mb-1 font-medium">Tags</label>
+            <input
+              type="text"
+              placeholder="Add tags separated by commas (e.g. javascript, stx, api)"
+              class="px-3 py-2 w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+            >
+            <div class="mt-1 text-gray-500 text-xs">
+              Add up to 5 tags to help categorize your topic and make it more discoverable
+            </div>
+          </div>
+
+          <div class="flex items-center">
+            <input type="checkbox" id="notify" class="mr-2" checked>
+            <label for="notify" class="text-gray-600 text-sm">
+              Notify me when someone replies to this topic
+            </label>
+          </div>
+
+          <div class="flex gap-2 justify-end">
+            <a href="/forum" class="px-4 py-2 hover:bg-gray-100 border rounded-md">
+              Cancel
+            </a>
+            <button class="px-4 py-2 text-white bg-primary rounded-md hover:opacity-90">
+              Create Topic
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="p-4 bg-gray-50 border rounded-md">
+      <h3 class="mb-2 font-medium">Forum Guidelines</h3>
+      <ul class="space-y-1 list-disc list-inside text-gray-600 text-sm">
+        <li>Be respectful and courteous to other community members</li>
+        <li>Search before posting to avoid duplicate topics</li>
+        <li>Use descriptive titles that summarize your question or discussion</li>
+        <li>Format code using the code formatting button for better readability</li>
+        <li>Tag your topic appropriately to help others find it</li>
+        <li>If you're asking for help, include relevant details like version numbers and error messages</li>
+      </ul>
+    </div>
+  </div>
+</ForumLayout>

package/views/forum/profile.stx

@@ -0,0 +1 @@
+<!-- Forum profile view -->

package/views/forum/topic.stx

@@ -0,0 +1,143 @@
+<script server>
+const topicId = 0
+</script>
+<ForumLayout route="forum-topic">
+  <div class="grid gap-8 grid-cols-1 lg:grid-cols-3">
+    <div class="lg:col-span-2">
+      <ForumBreadcrumb :items="[
+        { label: 'Forum', link: '/forum' },
+        { label: 'Technical Support', link: '/forum/category/support/installation' },
+        { label: 'How to implement authentication in a new Stacks.js project?', link: '/forum/topic/1' }
+      ]" />
+
+      <ForumPost
+        id="1"
+        authorName="JohnDoe"
+        authorAvatar="/images/avatars/default.png"
+        createdAt="2 hours ago"
+        :likeCount="7"
+        isOriginalPost
+        title="How to implement authentication in a new Stacks.js project?"
+      >
+        <p>Hello everyone,</p>
+        <p>I'm trying to implement authentication in my new Stacks.js project but I'm having some issues with the middleware. Here's what I've tried so far:</p>
+
+        <pre class="my-4 p-4 bg-gray-100 rounded-md"><code>
+// My authentication middleware
+function authMiddleware(req, res, next) {
+  if (!req.session.user) {
+    return res.redirect('/login');
+  }
+  next();
+}
+        </code></pre>
+
+        <p>But when I try to use this middleware, I get the following error:</p>
+
+        <blockquote class="my-4 pl-4 italic border-gray-300 border-l-4">
+          Error: req.session is undefined
+        </blockquote>
+
+        <p>Any help would be greatly appreciated! I'm using Stacks.js v1.8.2 with Express 4.18.0.</p>
+      </ForumPost>
+
+      <ForumPost
+        id="2"
+        authorName="ExpertUser"
+        authorAvatar="/images/avatars/default.png"
+        createdAt="1 hour ago"
+        :likeCount="3"
+      >
+        <p>Hi <a href="/forum/profile/johndoe" class="text-primary hover:underline">@JohnDoe</a>,</p>
+        <p>It looks like you haven't set up the session middleware correctly. You need to add it before your authentication middleware:</p>
+
+        <pre class="my-4 p-4 bg-gray-100 rounded-md"><code>
+const session = require('express-session');
+
+app.use(session({
+  secret: 'your-secret-key',
+  resave: false,
+  saveUninitialized: true,
+  cookie: { secure: process.env.NODE_ENV === 'production' }
+}));
+
+// Now your auth middleware will work
+app.use(authMiddleware);
+        </code></pre>
+
+        <p>Also, make sure you've installed the express-session package:</p>
+
+        <pre class="my-4 p-4 bg-gray-100 rounded-md"><code>
+npm install express-session
+# or with bun
+bun add express-session
+        </code></pre>
+
+        <p>Hope this helps!</p>
+      </ForumPost>
+
+      <ForumPost
+        id="3"
+        authorName="JohnDoe"
+        authorAvatar="/images/avatars/default.png"
+        createdAt="30 minutes ago"
+        :likeCount="2"
+      >
+        <p>Thank you so much, <a href="/forum/profile/expertuser" class="text-primary hover:underline">@ExpertUser</a>! That fixed my issue.</p>
+        <p>I completely forgot to set up the session middleware. Your solution works perfectly!</p>
+        <p>For anyone else who might run into this issue, I also had to install the express-session types for TypeScript:</p>
+
+        <pre class="my-4 p-4 bg-gray-100 rounded-md"><code>
+npm install --save-dev @types/express-session
+# or with bun
+bun add -d @types/express-session
+        </code></pre>
+      </ForumPost>
+
+      <ForumReplyForm />
+
+      <ForumPagination :currentPage="1" :totalPages="1" />
+    </div>
+
+    <div class="lg:col-span-1">
+      <ForumSidebar
+        :stats="{
+          topics: 540,
+          posts: 3287,
+          members: 1245,
+          newestMember: 'NewUser123'
+        }"
+        :popularTopics="[
+          {
+            id: 1,
+            title: 'How to implement authentication in a new Stacks.js project?',
+            link: '/forum/topic/1',
+            replyCount: 3,
+            viewCount: 45
+          },
+          {
+            id: 2,
+            title: 'Best practices for database migrations in Stacks.js',
+            link: '/forum/topic/3',
+            replyCount: 15,
+            viewCount: 128
+          },
+          {
+            id: 3,
+            title: 'Introducing myself to the community!',
+            link: '/forum/topic/2',
+            replyCount: 8,
+            viewCount: 32
+          }
+        ]"
+        :onlineUsers="[
+          { id: 1, name: 'JohnDoe', avatar: '/images/avatars/default.png' },
+          { id: 2, name: 'DatabaseGuru', avatar: '/images/avatars/default.png' },
+          { id: 3, name: 'NewUser123', avatar: '/images/avatars/default.png' },
+          { id: 4, name: 'ExpertUser', avatar: '/images/avatars/default.png' },
+          { id: 5, name: 'StacksMaster', avatar: '/images/avatars/default.png' }
+        ]"
+      />
+    </div>
+  </div>
+</ForumLayout>

package/views/hello-world/[name].stx

@@ -0,0 +1,47 @@
+<script>
+const router = useRouter()
+const route = useRoute('/hello-world/[name]')
+const user = useUserStore()
+const { t } = useI18n()
+
+watchEffect(() => {
+  user.setNewName(route.params.name)
+})
+</script>
+
+<div>
+  <div text-4xl>
+    <div i-carbon-pedestrian inline-block />
+  </div>
+  <p>
+    {{ t('intro.hi', { name: user.savedName }) }}
+  </p>
+
+  <p text-sm opacity-75>
+    <em>{{ t('intro.dynamic-route') }}</em>
+  </p>
+
+  @if(user.otherNames.length)
+    <p mt-4 text-sm>
+      <span opacity-75>{{ t('intro.aka') }}:</span>
+      <ul>
+        @foreach(otherName in user.otherNames)
+          <li :key="otherName">
+            <RouterLink :to="`/hello-world/${otherName}`" replace>
+              {{ otherName }}
+            </RouterLink>
+          </li>
+        @endforeach
+      </ul>
+    </p>
+  @endif
+
+  <div>
+    <button
+      m="3 t6" text-sm btn
+      @click="router.back()"
+    >
+      {{ t('button.back') }}
+    </button>
+  </div>
+</div>

package/views/index.stx

@@ -0,0 +1,21 @@
+<script>
+defineOptions({
+  name: 'HomePage',
+}
+</script>
+
+<!-- <Header /> -->
+
+<main>
+  <ComingSoon />
+  <!-- <Hero /> -->
+  <!-- <PrimaryFeatures /> -->
+  <!-- <PrimaryFeatures2 />
+  <SecondaryFeatures />
+  <CallToAction />
+  <Testimonials />
+  <Pricing />
+  <Faqs /> -->
+</main>
+
+<Footer />