Adding a ton of stuff

2026-07-17 04:39:18 -07:00
parent 8d9fe8e75d
commit de28a67417
63 changed files with 2027 additions and 613 deletions
@@ -11,7 +11,7 @@
      crossorigin
    />
    <link
-      href="https://fonts.googleapis.com/css2?family=Audiowide&family=Overpass:ital,wght@0,100..900;1,100..900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Audiowide&family=Overpass:ital,wght@0,100..900;1,100..900&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap"
      rel="stylesheet"
    />

@@ -0,0 +1,67 @@
+import http from "@/api/http-client"
+import { type FiltersOptions, type ModelOrder, type WhereOptions } from "@/api/base-api"
+
+export type BlogPost = {
+  id: number
+  creatorId: number
+  title: string
+  slug: string
+  content: string
+  tags: string[]
+  publishedAt: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+export type BlogPostIndexView = Omit<BlogPost, "content">
+
+export type BlogPostWhereOptions = WhereOptions<BlogPost, "creatorId">
+
+export type BlogPostFiltersOptions = FiltersOptions<{
+  search: string | string[]
+}>
+
+export type BlogPostQueryOptions = {
+  where?: BlogPostWhereOptions
+  filters?: BlogPostFiltersOptions
+  order?: ModelOrder[]
+  page?: number
+  perPage?: number
+}
+
+export const blogPostsApi = {
+  async list(params: BlogPostQueryOptions = {}): Promise<{
+    blogPosts: BlogPostIndexView[]
+    totalCount: number
+  }> {
+    const { data } = await http.get("/api/blog-posts", { params })
+    return data
+  },
+  async get(blogPostIdOrSlug: number | string): Promise<{
+    blogPost: BlogPost
+  }> {
+    const { data } = await http.get(`/api/blog-posts/${blogPostIdOrSlug}`)
+    return data
+  },
+  async create(attributes: Partial<BlogPost>): Promise<{
+    blogPost: BlogPost
+  }> {
+    const { data } = await http.post("/api/blog-posts", attributes)
+    return data
+  },
+  async update(
+    blogPostIdOrSlug: number | string,
+    attributes: Partial<BlogPost>
+  ): Promise<{
+    blogPost: BlogPost
+  }> {
+    const { data } = await http.patch(`/api/blog-posts/${blogPostIdOrSlug}`, attributes)
+    return data
+  },
+  async delete(blogPostIdOrSlug: number | string): Promise<void> {
+    const { data } = await http.delete(`/api/blog-posts/${blogPostIdOrSlug}`)
+    return data
+  },
+}
+
+export default blogPostsApi
@@ -2,13 +2,16 @@ import http from "@/api/http-client"

 import { type Policy } from "@/api/base-api"
 import { UserRoles, type User } from "@/api/users-api"
+import { PreferenceAsShow } from "@/api/users/preferences-api"

 export { UserRoles }

 export type UserAsShow = Pick<
  User,
  "id" | "email" | "firstName" | "lastName" | "displayName" | "roles" | "createdAt" | "updatedAt"
->
+> & {
+  preferences?: PreferenceAsShow[]
+}

 export const currentUserApi = {
  async get(): Promise<{
@@ -21,8 +21,10 @@ export const httpClient = axios.create({
 })

 httpClient.interceptors.request.use(async (config) => {
-  // Only add the Authorization header to requests that start with "/api"
-  if (config.url?.startsWith("/api")) {
+  // Only add the Authorization header to authenticated "/api" requests.
+  // "/api/public" routes are mounted ahead of the auth middleware and must
+  // stay reachable for anonymous visitors, so skip attaching a token there.
+  if (config.url?.startsWith("/api") && !config.url?.startsWith("/api/public")) {
    const accessToken = await auth0.getAccessTokenSilently()
    config.headers["Authorization"] = `Bearer ${accessToken}`
  }
@@ -0,0 +1,48 @@
+import http from "@/api/http-client"
+import { type FiltersOptions, type ModelOrder, type WhereOptions } from "@/api/base-api"
+
+export type PublicBlogPost = {
+  id: number
+  creatorId: number
+  title: string
+  slug: string
+  content: string
+  tags: string[]
+  publishedAt: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+export type PublicBlogPostIndexView = Omit<PublicBlogPost, "content">
+
+export type PublicBlogPostWhereOptions = WhereOptions<PublicBlogPost, "creatorId">
+
+export type PublicBlogPostFiltersOptions = FiltersOptions<{
+  search: string | string[]
+}>
+
+export type PublicBlogPostQueryOptions = {
+  where?: PublicBlogPostWhereOptions
+  filters?: PublicBlogPostFiltersOptions
+  order?: ModelOrder[]
+  page?: number
+  perPage?: number
+}
+
+export const publicBlogPostsApi = {
+  async list(params: PublicBlogPostQueryOptions = {}): Promise<{
+    blogPosts: PublicBlogPostIndexView[]
+    totalCount: number
+  }> {
+    const { data } = await http.get("/api/public/blog-posts", { params })
+    return data
+  },
+  async get(blogPostIdOrSlug: number | string): Promise<{
+    blogPost: PublicBlogPost
+  }> {
+    const { data } = await http.get(`/api/public/blog-posts/${blogPostIdOrSlug}`)
+    return data
+  },
+}
+
+export default publicBlogPostsApi
@@ -0,0 +1 @@
+export { publicBlogPostsApi } from "./blog-posts-api"
@@ -0,0 +1 @@
+export { preferencesApi } from "./preferences-api"
@@ -0,0 +1,32 @@
+import http from "@/api/http-client"
+
+/** Keep in sync with api/src/models/user-preference.ts */
+export enum PreferenceKeys {
+  FLASHCARDS_DAY_STREAK = "flashcards.day_streak",
+}
+
+export type PreferenceValueMap = {
+  [PreferenceKeys.FLASHCARDS_DAY_STREAK]: number
+}
+
+export type Preference = {
+  key: PreferenceKeys
+  value: unknown | null
+}
+
+export type PreferenceAsShow = Preference
+
+export const preferencesApi = {
+  async upsert<K extends PreferenceKeys>(
+    userId: number,
+    key: K,
+    value: PreferenceValueMap[K] | null
+  ): Promise<{ message: string }> {
+    const { data } = await http.patch(`/api/users/${userId}/preferences/${key}`, {
+      value,
+    })
+    return data
+  },
+}
+
+export default preferencesApi
@@ -0,0 +1,134 @@
+<template>
+  <v-card
+    flat
+    color="transparent"
+    class="post-card"
+  >
+    <v-card-text class="post">
+      <div class="post-date">
+        <span class="post-date-day font-weight-bold">{{
+          formatDate(blogPost.publishedAt, "dd")
+        }}</span>
+        <span>{{ formatDate(blogPost.publishedAt, "MMM yyyy") }}</span>
+      </div>
+      <div class="post-content">
+        <div class="post-main">
+          <h3 class="font-serif post-title">
+            {{ blogPost.title }}
+          </h3>
+          <p class="font-serif post-excerpt">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio praesent
+            libero sed cursus ante dapibus diam.
+          </p>
+        </div>
+        <div class="post-footer">
+          <span class="post-read-time">5 min read</span>
+          <div
+            v-if="blogPost.tags.length"
+            class="post-tags ml-2"
+          >
+            <v-chip
+              v-for="tag in blogPost.tags"
+              :key="tag"
+              size="small"
+              variant="tonal"
+              class="post-tag ml-2"
+            >
+              {{ tag }}
+            </v-chip>
+          </div>
+        </div>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from "vue"
+
+import { BlogPostIndexView } from "@/api/blog-posts-api"
+import { formatDate } from "@/utils/formatters"
+
+const props = defineProps<{
+  blogPost: BlogPostIndexView
+}>()
+
+const { blogPost } = toRefs(props)
+</script>
+
+<style scoped>
+.post {
+  display: grid;
+  grid-template-columns: 76px 1fr;
+  gap: 32px;
+  padding: 18px 0;
+  min-height: 180px;
+  height: 100%;
+  border-bottom: 1px solid rgb(var(--v-theme-borderColor));
+}
+
+.post:first-child {
+  padding-top: 0;
+}
+
+.post:last-child {
+  border-bottom: none;
+}
+
+.post-date {
+  display: flex;
+  flex-direction: column;
+  font-family: ui-monospace, Menlo, Monaco, Consolas, "Ubuntu Mono", monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  color: rgb(var(--v-theme-textSecondary) / 70%);
+}
+
+.post-date-day {
+  display: block;
+  font-size: 20px;
+  line-height: 1.5;
+  font-weight: 500;
+}
+
+.post-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  gap: 12px;
+}
+
+.post-main {
+  flex: 0 0 auto;
+}
+
+.post-title {
+  margin: 0;
+  font-size: 1.35rem;
+  line-height: 1.5;
+}
+
+.post-excerpt {
+  margin: 6px 0 0;
+  font-size: 0.9rem;
+  color: rgb(var(--v-theme-textSecondary) / 65%);
+}
+
+.post-footer {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  margin-top: auto;
+}
+
+.post-tags {
+  display: flex;
+  align-items: center;
+}
+
+.post-tag {
+  font-family: ui-monospace, Menlo, Monaco, Consolas, "Ubuntu Mono", monospace;
+  font-size: 11px;
+}
+</style>
@@ -0,0 +1,67 @@
+<template>
+  <v-skeleton-loader
+    v-if="isEmpty(publicBlogPosts) && isLoading"
+    type="list-item-three-line"
+  />
+  <v-empty-state
+    v-else-if="isEmpty(publicBlogPosts) && !isLoading"
+    text="No blog posts found."
+  />
+  <template v-else>
+    <BlogPostListItemCard
+      v-for="blogPost in publicBlogPosts"
+      :key="blogPost.id"
+      :blog-post="blogPost"
+    />
+  </template>
+  <EnhancedPagination
+    v-model="page"
+    v-model:per-page="perPage"
+    :total-count="totalCount"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { isEmpty } from "lodash"
+
+import useRouteQueryPagination from "@/use/utils/use-route-query-pagination"
+import usePublicBlogPosts, {
+  type PublicBlogPostFiltersOptions,
+  type PublicBlogPostQueryOptions,
+  type PublicBlogPostWhereOptions,
+} from "@/use/use-public-blog-posts"
+
+import EnhancedPagination from "@/components/common/EnhancedPagination.vue"
+import BlogPostListItemCard from "@/components/blog-posts/BlogPostListItemCard.vue"
+
+const props = withDefaults(
+  defineProps<{
+    filters?: PublicBlogPostFiltersOptions
+    where?: PublicBlogPostWhereOptions
+    routeQuerySuffix?: string
+    waiting?: boolean
+  }>(),
+  {
+    filters: () => ({}),
+    where: () => ({}),
+    routeQuerySuffix: "BlogPosts",
+    waiting: false,
+  }
+)
+
+const { page, perPage } = useRouteQueryPagination({ routeQuerySuffix: props.routeQuerySuffix })
+const blogPostQueryOptions = computed<PublicBlogPostQueryOptions>(() => ({
+  where: props.where,
+  filters: props.filters,
+  page: page.value,
+  perPage: perPage.value,
+}))
+
+const { publicBlogPosts, totalCount, isLoading, refresh } = usePublicBlogPosts(
+  blogPostQueryOptions,
+  { skipWatchIf: () => props.waiting }
+)
+
+defineExpose({ refresh })
+</script>
@@ -0,0 +1,55 @@
+<template>
+  <v-card
+    elevation="8"
+    hover
+  >
+    <v-card-item>
+      <div class="d-flex align-center">
+        <v-avatar
+          :color="color"
+          size="56"
+          class="mr-4"
+        >
+          <slot name="icon"></slot>
+        </v-avatar>
+        <div>
+          <v-card-title class="text-h5">{{ title }}</v-card-title>
+          <v-card-subtitle>{{ subtitle }}</v-card-subtitle>
+        </div>
+      </div>
+    </v-card-item>
+
+    <v-divider />
+
+    <v-card-text>
+      <div class="d-flex align-center justify-space-between">
+        <span class="text-h3 font-weight-bold">{{ count ?? "&nbsp;" }}</span>
+        <v-icon
+          size="large"
+          :color="color"
+        >
+          mdi-chevron-right
+        </v-icon>
+      </div>
+      <div class="text-caption text-medium-emphasis mt-1">{{ countLabel ?? "&nbsp;" }}</div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    title: string
+    subtitle?: string
+    count?: number | null
+    countLabel?: string | null
+    color?: string
+  }>(),
+  {
+    subtitle: "",
+    count: null,
+    countLabel: null,
+    color: "primary",
+  }
+)
+</script>
@@ -8,86 +8,20 @@
        <span class="term-green">caleb</span>
        <span class="term-cyan">@</span>
        <span class="term-green mr-2">burke</span>
-        <span class="term-white">~</span>
-        <span class="term-cyan mr-2">$</span>
-        <span class="term-white">{{ typedText }}</span>
-        <span
-          v-if="animated"
-          class="term-cursor"
-        >
-          &#9608;
-        </span>
      </div>
    </RouterLink>
  </div>
 </template>

 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue"
-
-const props = withDefaults(
+withDefaults(
  defineProps<{
    to?: string
-    animated?: boolean
  }>(),
  {
    to: "/dashboard",
-    animated: false,
  }
 )
-
-const TYPED_PHRASES = [
-  " Hello!",
-  " Cheers!",
-  " привет",
-  " クリア",
-  " Εβίβα!",
-  " 干杯",
-  " Будьмо!",
-  " Na zdraví!",
-  " 乾杯!",
-]
-const TYPE_DELAY_MS = 150
-const DELETE_DELAY_MS = 100
-const PAUSE_AFTER_TYPED_MS = 1500
-const INITIAL_DELAY_MS = 800
-
-const typedText = ref("")
-let currentPhrase = ""
-let typingTimeoutId: ReturnType<typeof setTimeout>
-
-function pickRandomPhrase() {
-  return TYPED_PHRASES[Math.floor(Math.random() * TYPED_PHRASES.length)]
-}
-
-function typeCharacter(index: number) {
-  typedText.value = currentPhrase.slice(0, index)
-
-  if (index < currentPhrase.length) {
-    typingTimeoutId = setTimeout(() => typeCharacter(index + 1), TYPE_DELAY_MS)
-  } else {
-    typingTimeoutId = setTimeout(() => deleteCharacter(index), PAUSE_AFTER_TYPED_MS)
-  }
-}
-
-function deleteCharacter(index: number) {
-  typedText.value = currentPhrase.slice(0, index)
-
-  if (index > 0) {
-    typingTimeoutId = setTimeout(() => deleteCharacter(index - 1), DELETE_DELAY_MS)
-  }
-}
-
-onMounted(() => {
-  if (!props.animated) return
-
-  currentPhrase = pickRandomPhrase()
-  typingTimeoutId = setTimeout(() => typeCharacter(0), INITIAL_DELAY_MS)
-})
-
-onUnmounted(() => {
-  clearTimeout(typingTimeoutId)
-})
 </script>

 <style>
@@ -18,22 +18,6 @@
      <v-spacer />

      <ProfileMenu />
-
-      <template #extension>
-        <v-tabs
-          class="ml-2"
-          color="primary"
-        >
-          <v-tab
-            :to="{ name: 'DashboardPage' }"
-            text="Dashboard"
-          />
-          <v-tab
-            :to="{ name: 'FlashcardsPage' }"
-            text="Flashcards"
-          />
-        </v-tabs>
-      </template>
    </v-app-bar>
  </div>
  <div v-else>
@@ -51,19 +35,14 @@
        />
      </div>

-      <v-tabs
-        class="ml-2"
-        color="primary"
-      >
-        <v-tab
-          :to="{ name: 'DashboardPage' }"
-          text="Dashboard"
+      <div class="d-flex align-center">
+        <v-divider vertical />
+        <ExactingBreadcrumbs
+          class="appbar-title"
+          density="compact"
+          :items="breadcrumbs"
        />
-        <v-tab
-          :to="{ name: 'FlashcardsPage' }"
-          text="Flashcards"
-        />
-      </v-tabs>
+      </div>

      <v-spacer />

@@ -92,8 +71,30 @@
 <script setup lang="ts">
 import { useDisplay } from "vuetify"

+import useBreadcrumbs from "@/use/use-breadcrumbs"
+
 import PublicAppLogo from "@/components/common/PublicAppLogo.vue"
 import ProfileMenu from "@/components/layout/ProfileMenu.vue"
+import ExactingBreadcrumbs from "@/components/layout/ExactingBreadcrumbs.vue"

 const { mobile } = useDisplay()
+const { breadcrumbs } = useBreadcrumbs(undefined, undefined, {
+  baseCrumb: {
+    title: "Dashboard",
+    to: {
+      name: "DashboardPage",
+    },
+  },
+})
 </script>
+
+<style scoped>
+.appbar-title {
+  margin-left: 12px;
+  padding: 0 0 0 12px;
+  color: #fff;
+  font-size: 1.1rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+</style>
@@ -30,10 +30,7 @@
      class="main-head pl-2"
    >
      <div class="mr-3">
-        <PublicAppLogo
-          to="/"
-          :animated="isHomePage"
-        />
+        <PublicAppLogo to="/" />
      </div>

      <v-spacer />
@@ -51,17 +48,12 @@
 </template>

 <script setup lang="ts">
-import { computed } from "vue"
-import { useRoute } from "vue-router"
 import { useDisplay } from "vuetify"
 import { useAuth0 } from "@auth0/auth0-vue"

 import ProfileMenu from "@/components/layout/ProfileMenu.vue"
 import PublicAppLogo from "@/components/common/PublicAppLogo.vue"

-const route = useRoute()
-const isHomePage = computed(() => route.name === "HomePage")
-
 const { mobile } = useDisplay()
 const { isAuthenticated } = useAuth0()
 </script>
@@ -1,22 +1,232 @@
 <template>
  <v-app>
-    <PublicAppBar />
+    <PublicAppBar class="mb-2" />

    <v-main>
      <v-container
        fluid
        :class="mobile ? 'pa-2' : 'pa-4'"
      >
-        <router-view />
+        <div class="public-content mt-4">
+          <v-row class="public-row">
+            <v-col
+              cols="12"
+              md="3"
+              class="sidebar-col"
+            >
+              <aside class="sidebar">
+                <nav
+                  class="sidebar-nav mb-6"
+                  aria-label="Primary"
+                >
+                  <RouterLink
+                    :to="{ name: 'HomePage' }"
+                    class="sidebar-nav-link"
+                  >
+                    <span>Home</span
+                    ><span :class="{ 'text-warning': route.name === 'HomePage' }">~/</span>
+                  </RouterLink>
+                  <RouterLink
+                    :to="{ name: 'BlogPage' }"
+                    class="sidebar-nav-link"
+                  >
+                    <span>Blog</span
+                    ><span :class="{ 'text-warning': route.name === 'BlogPage' }">~/blog</span>
+                  </RouterLink>
+                </nav>
+              </aside>
+            </v-col>
+
+            <v-col
+              cols="12"
+              md="9"
+            >
+              <router-view />
+            </v-col>
+          </v-row>
+        </div>
      </v-container>
    </v-main>
+
+    <footer class="public-footer">
+      <span>&copy; {{ currentYear }} Caleb Burke</span>
+
+      <div class="social-links">
+        <a
+          href="https://github.com/burkkyy"
+          class="social-link"
+          title="GitHub"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <v-icon size="24">mdi-github</v-icon>
+        </a>
+        <a
+          href="https://gitea.burke.host/burkkyy"
+          class="social-link"
+          title="Gitea"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <svg
+            class="social-svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>Gitea</title>
+            <path
+              d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z"
+            />
+          </svg>
+        </a>
+        <a
+          href="https://discord.com/users/burkkyy"
+          class="social-link"
+          title="Discord"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <svg
+            class="social-svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>Discord</title>
+            <path
+              d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"
+            />
+          </svg>
+        </a>
+        <a
+          href="https://www.linkedin.com/in/calebburke91/"
+          class="social-link"
+          title="LinkedIn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <v-icon size="24">mdi-linkedin</v-icon>
+        </a>
+        <a
+          href="mailto:calebburke91@gmail.com"
+          class="social-link"
+          title="Gmail"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <v-icon size="24">mdi-gmail</v-icon>
+        </a>
+      </div>
+    </footer>
  </v-app>
 </template>

 <script setup lang="ts">
 import { useDisplay } from "vuetify"
+import { useRoute } from "vue-router"
+import { DateTime } from "luxon"

 import PublicAppBar from "@/components/layout/PublicAppBar.vue"

 const { mobile } = useDisplay()
+const route = useRoute()
+const currentYear = DateTime.local().year
 </script>
+
+<style scoped>
+.public-content {
+  max-width: 1300px;
+  margin: 0 auto;
+}
+
+.public-row {
+  margin: -20px;
+}
+
+.public-row > :deep(.v-col) {
+  padding: 20px;
+}
+
+.sidebar {
+  position: sticky;
+  top: 24px;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sidebar-nav-link {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 10px;
+  margin: 0 -10px;
+  border-radius: 6px;
+  font-family: ui-monospace, Menlo, Monaco, Consolas, "Ubuntu Mono", monospace;
+  font-size: 14px;
+  color: rgb(var(--v-theme-textSecondary));
+  text-decoration: none;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.sidebar-nav-link:hover,
+.sidebar-nav-link.router-link-active {
+  background-color: rgb(var(--v-theme-hoverColor));
+  color: rgb(var(--v-theme-textPrimary));
+}
+
+.social-links {
+  display: flex;
+  gap: 16px;
+}
+
+.social-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: rgb(var(--v-theme-textSecondary));
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.social-link:hover {
+  color: rgb(var(--v-theme-primary));
+}
+
+.social-svg {
+  width: 24px;
+  height: 24px;
+}
+
+.public-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 24px;
+  border-top: 1px solid rgb(var(--v-theme-borderColor));
+  font-family: ui-monospace, Menlo, Monaco, Consolas, "Ubuntu Mono", monospace;
+  font-size: 12px;
+  color: rgb(var(--v-theme-textSecondary));
+}
+
+@media (max-width: 960px) {
+  .sidebar {
+    position: static;
+  }
+
+  .public-footer {
+    justify-content: center;
+    text-align: center;
+  }
+}
+</style>
@@ -0,0 +1,36 @@
+<template>
+  <v-row class="home-row ml-5">
+    <v-col
+      cols="12"
+      md="8"
+    >
+      <main>
+        <section class="posts-section">
+          <PublicBlogPostsList />
+        </section>
+      </main>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import useBreadcrumbs from "@/use/use-breadcrumbs"
+
+import PublicBlogPostsList from "@/components/blog-posts/PublicBlogPostsList.vue"
+
+useBreadcrumbs("Blog", [
+  {
+    title: "Blog",
+    to: {
+      name: "BlogPage",
+    },
+  },
+])
+</script>
+
+<style scoped>
+.section-eyebrow {
+  display: block;
+  font-size: 14px;
+}
+</style>
@@ -4,15 +4,70 @@
      You are a system admin
    </AppCard>
  </div>
+
+  <v-row class="mt-1">
+    <v-col
+      cols="12"
+      md="6"
+      lg="4"
+    >
+      <DashboardCard
+        :to="{ name: 'FlashcardsPage' }"
+        title="Flashcards"
+        subtitle="Study and manage your flashcard decks"
+        :count="flashcardDecksCount"
+        count-label="Total Decks"
+        color="success"
+      >
+        <template #icon>
+          <v-icon
+            size="32"
+            color="white"
+          >
+            mdi-cards-outline
+          </v-icon>
+        </template>
+      </DashboardCard>
+    </v-col>
+    <v-col
+      cols="12"
+      md="6"
+      lg="4"
+    >
+      <DashboardCard
+        :to="{ name: 'BlogPage' }"
+        title="Blog Posts"
+        subtitle="Read and manage blog posts"
+        :count="blogPostsCount"
+        count-label="Total Posts"
+        color="info"
+      >
+        <template #icon>
+          <v-icon
+            size="32"
+            color="white"
+          >
+            mdi-post-outline
+          </v-icon>
+        </template>
+      </DashboardCard>
+    </v-col>
+  </v-row>
 </template>

 <script lang="ts" setup>
 import useBreadcrumbs from "@/use/use-breadcrumbs"
 import useCurrentUser from "@/use/use-current-user"
+import useFlashcardDecks from "@/use/use-flashcard-decks"
+import useBlogPosts from "@/use/use-blog-posts"

 import AppCard from "@/components/common/AppCard.vue"
+import DashboardCard from "@/components/common/DashboardCard.vue"

 const { isSystemAdmin } = useCurrentUser<true>()

-useBreadcrumbs()
+const { totalCount: flashcardDecksCount } = useFlashcardDecks()
+const { totalCount: blogPostsCount } = useBlogPosts()
+
+useBreadcrumbs("Dashboard", [])
 </script>
@@ -154,5 +154,12 @@ function openFlashcardCreateDialog() {
  flashcardCreateDialog.value?.show()
 }

-useBreadcrumbs("Study")
+useBreadcrumbs("Flashcards", [
+  {
+    title: "Flashcards",
+    to: {
+      name: "FlashcardsPage",
+    },
+  },
+])
 </script>
@@ -1,260 +1,179 @@
 <template>
-  <div class="home-page">
-    <v-row>
-      <v-col
-        cols="12"
-        md="3"
-        class="sidebar-col"
-      >
-        <aside class="sidebar">
-          <nav
-            class="sidebar-nav mb-6 mt-8"
-            aria-label="Primary"
-          >
+  <v-row class="home-row">
+    <v-col
+      cols="12"
+      md="8"
+    >
+      <main>
+        <div class="terminal mb-10">
+          <div class="terminal-bar">
+            <span class="terminal-dot terminal-dot-red"></span>
+            <span class="terminal-dot terminal-dot-yellow"></span>
+            <span class="terminal-dot terminal-dot-green"></span>
+            <span class="terminal-title">calebburke.dev</span>
+          </div>
+          <div class="terminal-prompt">
+            <span class="term-green">caleb</span>
+            <span class="term-cyan">@</span><span class="term-green">burke</span>
+            <span class="term-white"> ~</span>
+            <span class="term-cyan">$</span>
+            <span class="terminal-cmd"> cat about.txt</span>
+            <span class="terminal-out"> Full Stack Developer </span>
+
+            <span class="term-green">caleb</span>
+            <span class="term-cyan">@</span>
+            <span class="term-green">burke</span>
+            <span class="term-white"> ~</span>
+            <span class="term-cyan">$ </span>
+            <span class="terminal-cmd">{{ typedText }}</span>
+            <span class="term-cursor">&#9608;</span>
+            <!-- <span class="term-green">caleb</span><span class="term-cyan">@</span
+            ><span class="term-green">burke</span><span class="term-white">:~$</span>
+            <span class="terminal-cmd"> ls ~/posts | head -3</span>
+            <span
+              v-if="isLoading"
+              class="terminal-out terminal-out-dim"
+              >loading&hellip;</span
+            >
+            <span
+              v-else-if="recentBlogPosts.length === 0"
+              class="terminal-out terminal-out-dim"
+              >(no posts published yet)</span
+            >
+            <span
+              v-else
+              class="terminal-out terminal-out-dim"
+              >{{ recentBlogPosts.map((blogPost) => blogPost.slug).join(" ") }}</span
+            > -->
+          </div>
+        </div>
+
+        <section class="posts-section">
+          <div class="section-head">
+            <div>
+              <span class="section-eyebrow font-mono mb-4 text-warning">~/blog</span>
+              <h2 class="text-h3 font-serif">Recent posts</h2>
+            </div>
            <RouterLink
              :to="{ name: 'BlogPage' }"
-              class="sidebar-nav-link"
+              class="section-view-all"
            >
-              <span>Blog</span><span class="sidebar-nav-path">~/blog</span>
+              view all
            </RouterLink>
-          </nav>
-        </aside>
-
-        <v-divider class="my-4" />
-
-        <div class="social-links">
-          <a
-            href="#"
-            class="social-link"
-            title="GitHub"
-          >
-            <v-icon>mdi-github</v-icon>
-          </a>
-          <a
-            href="#"
-            class="social-link"
-            title="Gitea"
-          >
-            <v-icon>mdi-git</v-icon>
-          </a>
-          <a
-            href="#"
-            class="social-link"
-            title="LinkedIn"
-          >
-            <v-icon>mdi-linkedin</v-icon>
-          </a>
-          <a
-            href="#"
-            class="social-link"
-            title="Instagram"
-          >
-            <v-icon>mdi-instagram</v-icon>
-          </a>
-          <a
-            href="#"
-            class="social-link"
-            title="Gmail"
-          >
-            <v-icon>mdi-gmail</v-icon>
-          </a>
-        </div>
-      </v-col>
-
-      <v-col
-        cols="12"
-        md="6"
-      >
-        <main>
-          <div class="terminal mb-10">
-            <div class="terminal-bar">
-              <span class="terminal-dot terminal-dot-red"></span>
-              <span class="terminal-dot terminal-dot-yellow"></span>
-              <span class="terminal-dot terminal-dot-green"></span>
-              <span class="terminal-title">calebburke.dev</span>
-            </div>
-            <div class="terminal-prompt">
-              <span class="term-green">caleb</span>
-              <span class="term-cyan">@</span><span class="term-green">burke</span>
-              <span class="term-white"> ~</span>
-              <span class="term-cyan">$</span>
-              <span class="terminal-cmd"> cat about.txt</span>
-              <span class="terminal-out"> Full Stack Developer </span>
-
-              <span class="term-green">caleb</span>
-              <span class="term-cyan">@</span>
-              <span class="term-green">burke</span>
-              <span class="term-white"> ~</span>
-              <span class="term-cyan">$ </span>
-              <span class="terminal-cmd">{{ typedText }}</span>
-              <span class="term-cursor">&#9608;</span>
-              <!-- <span class="term-green">caleb</span><span class="term-cyan">@</span
-              ><span class="term-green">burke</span><span class="term-white">:~$</span>
-              <span class="terminal-cmd"> ls ~/posts | head -3</span>
-              <span
-                v-if="isLoading"
-                class="terminal-out terminal-out-dim"
-                >loading&hellip;</span
-              >
-              <span
-                v-else-if="recentBlogPosts.length === 0"
-                class="terminal-out terminal-out-dim"
-                >(no posts published yet)</span
-              >
-              <span
-                v-else
-                class="terminal-out terminal-out-dim"
-                >{{ recentBlogPosts.map((blogPost) => blogPost.slug).join(" ") }}</span
-              > -->
-            </div>
          </div>

-          <section class="posts-section">
-            <div class="section-head">
-              <div>
-                <span class="section-eyebrow">~/posts</span>
-                <h2 class="text-h6 font-weight-bold">Recent posts</h2>
-              </div>
-              <RouterLink
-                :to="{ name: 'BlogPage' }"
-                class="section-view-all"
-                >view all &rarr;</RouterLink
-              >
-            </div>
-
-            <div v-if="isLoading">
-              <v-skeleton-loader
-                v-for="index in 3"
-                :key="index"
-                type="list-item-two-line"
-                class="mb-2"
-              />
-            </div>
-
-            <p
-              v-else-if="recentBlogPosts.length === 0"
-              class="text-medium-emphasis"
-            >
-              Nothing published yet &mdash; check back soon.
-            </p>
-
-            <div
-              v-else
-              class="posts"
-            >
-              <article
-                v-for="blogPost in recentBlogPosts"
-                :key="blogPost.id"
-                class="post"
-              >
-                <div class="post-date">
-                  <span class="post-date-day">{{ formatPostDay(blogPost.publishedAt) }}</span>
-                  {{ formatPostMonth(blogPost.publishedAt) }}
-                </div>
-                <div>
-                  <h3 class="text-subtitle-1 font-weight-bold mb-1">{{ blogPost.title }}</h3>
-                  <div
-                    v-if="blogPost.tags.length"
-                    class="post-tags"
-                  >
-                    <span
-                      v-for="tag in blogPost.tags"
-                      :key="tag"
-                      class="tag-chip"
-                      >{{ tag }}</span
-                    >
-                  </div>
-                </div>
-              </article>
-            </div>
-          </section>
-        </main>
-      </v-col>
-
-      <v-col
-        cols="12"
-        md="3"
-        class="rail-col"
-      >
-        <aside class="rail">
+          <div v-if="isLoading">
+            <v-skeleton-loader
+              v-for="index in 3"
+              :key="index"
+              type="list-item-two-line"
+              class="mb-2"
+            />
+          </div>
+          <p
+            v-else-if="totalCount === 0"
+            class="text-medium-emphasis"
+          >
+            Nothing published yet &mdash; check back soon.
+          </p>
          <div
-            v-if="allTags.length"
-            class="rail-block"
+            v-for="(blogPost, index) of recentBlogPosts"
+            v-else
+            :key="index"
          >
-            <span class="rail-eyebrow">Tags</span>
-            <div class="tag-cloud">
-              <span
-                v-for="tag in allTags"
-                :key="tag"
-                class="tag-chip"
-                >{{ tag }}</span
-              >
-            </div>
+            <BlogPostListItemCard
+              :blog-post="blogPost"
+              class="mb-2"
+            />
          </div>
+        </section>
+      </main>
+    </v-col>

-          <div class="rail-block">
-            <div class="now-box">
-              <div class="now-row">
-                <span class="now-key">release</span
-                ><span class="now-value">{{ status.releaseTag || "dev" }}</span>
-              </div>
-              <div class="now-row">
-                <span class="now-key">commit</span
-                ><span class="now-value">{{ shortCommitHash }}</span>
-              </div>
-              <RouterLink
-                :to="{ name: 'StatusPage' }"
-                class="now-link"
-              >
-                view status
-              </RouterLink>
-            </div>
+    <v-col
+      cols="12"
+      md="4"
+    >
+      <aside class="rail">
+        <!-- <div
+          v-if="allTags.length"
+          class="rail-block"
+        >
+          <span class="rail-eyebrow">Tags</span>
+          <div class="tag-cloud">
+            <span
+              v-for="tag in allTags"
+              :key="tag"
+              class="tag-chip"
+              >{{ tag }}</span
+            >
          </div>
+        </div> -->

-          <div class="rail-block">
-            <div class="cta-card">
-              <p v-if="isAuthenticated">Welcome back &mdash; jump into your dashboard.</p>
-              <p v-else>Sign in to manage posts and track flashcard progress.</p>
-              <v-btn
-                :to="isAuthenticated ? { name: 'DashboardPage' } : { name: 'SignInPage' }"
-                color="primary"
-                variant="tonal"
-                size="small"
-              >
-                {{ isAuthenticated ? "Go to dashboard" : "Log in" }}
-              </v-btn>
+        <div class="rail-block">
+          <v-card
+            variant="outlined"
+            class="now-box pa-4 mb-4"
+          >
+            <div class="d-flex justify-space-between ga-2">
+              <span class="text-medium-emphasis">release</span>
+              <span>{{ status.releaseTag || "dev" }}</span>
            </div>
-          </div>
-        </aside>
-      </v-col>
-    </v-row>
-  </div>
+            <div class="d-flex justify-space-between ga-2 my-2">
+              <span class="text-medium-emphasis">commit</span>
+              <span>{{ shortCommitHash }}</span>
+            </div>
+            <RouterLink
+              :to="{ name: 'StatusPage' }"
+              class="text-primary text-decoration-none mt-2 d-block"
+            >
+              view status
+            </RouterLink>
+          </v-card>
+        </div>
+
+        <div
+          v-if="isAuthenticated"
+          class="rail-block"
+        >
+          <v-card
+            variant="tonal"
+            color="primary"
+            class="pa-4"
+          >
+            <p class="text-body-2 mb-3">Welcome back &mdash; jump into your dashboard.</p>
+            <v-btn
+              :to="isAuthenticated ? { name: 'DashboardPage' } : { name: 'SignInPage' }"
+              color="primary"
+              variant="tonal"
+              size="small"
+              text="Go to dashboard"
+            />
+          </v-card>
+        </div>
+      </aside>
+    </v-col>
+  </v-row>
 </template>

 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, reactive, ref } from "vue"
-import { DateTime } from "luxon"
 import { useAuth0 } from "@auth0/auth0-vue"

 import http from "@/api/http-client"
+
 import usePublicBlogPosts from "@/use/use-public-blog-posts"

+import BlogPostListItemCard from "@/components/blog-posts/BlogPostListItemCard.vue"
+
 const { isAuthenticated } = useAuth0()

-const { blogPosts, isLoading, fetch: fetchBlogPosts } = usePublicBlogPosts()
+const { publicBlogPosts, totalCount, isLoading } = usePublicBlogPosts()

-const recentBlogPosts = computed(() => blogPosts.value.slice(0, 4))
-const allTags = computed(() => [...new Set(blogPosts.value.flatMap((blogPost) => blogPost.tags))])
-
-function formatPostDay(publishedAt: string | null): string {
-  if (!publishedAt) return ""
-  return DateTime.fromISO(publishedAt).toLocal().toFormat("dd")
-}
-
-function formatPostMonth(publishedAt: string | null): string {
-  if (!publishedAt) return ""
-  return DateTime.fromISO(publishedAt).toLocal().toFormat("MMM yyyy")
-}
+const recentBlogPosts = computed(() => publicBlogPosts.value.slice(0, 4))
+// const allTags = computed(() => [
+//   ...new Set(publicBlogPosts.value.flatMap((blogPost) => blogPost.tags)),
+// ])

 const status = reactive({
  releaseTag: "",
@@ -314,8 +233,6 @@ function deleteCharacter(index: number) {
 }

 onMounted(async () => {
-  await fetchBlogPosts()
-
  currentPhrase = pickRandomPhrase()
  typingTimeoutId = setTimeout(() => typeCharacter(0), INITIAL_DELAY_MS)

@@ -334,63 +251,11 @@ onUnmounted(() => {
 </script>

 <style scoped>
-.home-page {
-  max-width: 1300px;
-  margin: 0 auto;
-}
-
-.sidebar,
 .rail {
  position: sticky;
  top: 24px;
 }

-.sidebar-nav {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.sidebar-nav-link {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 7px 10px;
-  margin: 0 -10px;
-  border-radius: 6px;
-  font-family: ui-monospace, Menlo, Monaco, Consolas, "Ubuntu Mono", monospace;
-  font-size: 14px;
-  color: rgb(var(--v-theme-textSecondary));
-  text-decoration: none;
-  transition:
-    background-color 0.15s ease,
-    color 0.15s ease;
-}
-
-.sidebar-nav-link:hover,
-.sidebar-nav-link.router-link-active {
-  background-color: rgb(var(--v-theme-hoverColor));
-  color: rgb(var(--v-theme-textPrimary));
-}
-
-.sidebar-nav-path {
-  color: rgb(var(--v-theme-textSecondary) / 70%);
-}
-
-.social-links {
-  display: flex;
-  gap: 16px;
-}
-
-.social-link {
-  color: rgb(var(--v-theme-textSecondary));
-  transition: color 0.15s ease;
-}
-
-.social-link:hover {
-  color: rgb(var(--v-theme-primary));
-}
-
 /* Terminal hero */
 .terminal {
  background-color: rgb(var(--v-theme-surface));
@@ -472,10 +337,7 @@ onUnmounted(() => {

 .section-eyebrow {
  display: block;
-  margin-bottom: 4px;
-  font-family: ui-monospace, Menlo, Monaco, Consolas, "Ubuntu Mono", monospace;
-  font-size: 12px;
-  color: rgb(var(--v-theme-primary));
+  font-size: 14px;
 }

 .section-view-all {
@@ -490,44 +352,6 @@ onUnmounted(() => {
  color: rgb(var(--v-theme-primary));
 }

-/* Posts */
-.post {
-  display: grid;
-  grid-template-columns: 76px 1fr;
-  gap: 18px;
-  padding: 18px 0;
-  border-bottom: 1px solid rgb(var(--v-theme-borderColor));
-}
-
-.post:first-child {
-  padding-top: 0;
-}
-
-.post:last-child {
-  border-bottom: none;
-}
-
-.post-date {
-  font-family: ui-monospace, Menlo, Monaco, Consolas, "Ubuntu Mono", monospace;
-  font-size: 12px;
-  line-height: 1.5;
-  color: rgb(var(--v-theme-textSecondary) / 70%);
-  padding-top: 3px;
-}
-
-.post-date-day {
-  display: block;
-  font-size: 20px;
-  font-weight: 500;
-  color: rgb(var(--v-theme-textSecondary));
-}
-
-.post-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
 .tag-chip {
  font-family: ui-monospace, Menlo, Monaco, Consolas, "Ubuntu Mono", monospace;
  font-size: 11px;
@@ -545,12 +369,6 @@ onUnmounted(() => {
 }

 /* Right rail */
-.rail {
-  display: flex;
-  flex-direction: column;
-  gap: 28px;
-}
-
 .rail-eyebrow {
  display: block;
  margin-bottom: 12px;
@@ -562,52 +380,11 @@ onUnmounted(() => {
 }

 .now-box {
-  padding: 14px 16px;
-  background-color: rgb(var(--v-theme-surface));
-  border: 1px solid rgb(var(--v-theme-borderColor));
-  border-radius: 6px;
  font-family: ui-monospace, Menlo, Monaco, Consolas, "Ubuntu Mono", monospace;
  font-size: 12px;
 }

-.now-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 8px;
-  line-height: 1.9;
-}
-
-.now-key {
-  color: rgb(var(--v-theme-textSecondary) / 70%);
-}
-
-.now-value {
-  color: rgb(var(--v-theme-textPrimary));
-}
-
-.now-link {
-  display: inline-block;
-  margin-top: 10px;
-  color: rgb(var(--v-theme-primary));
-  text-decoration: none;
-}
-
-.cta-card {
-  padding: 16px;
-  background-color: rgb(var(--v-theme-lightprimary));
-  border: 1px solid rgb(var(--v-theme-primary) / 25%);
-  border-radius: 6px;
-}
-
-.cta-card p {
-  margin: 0 0 12px;
-  font-size: 13px;
-  color: rgb(var(--v-theme-textSecondary));
-  line-height: 1.6;
-}
-
@media (max-width: 960px) {
-  .sidebar,
  .rail {
    position: static;
  }
@@ -1,105 +1,53 @@
 <template>
  <div>
    <v-row>
-      <!-- Users Card -->
      <v-col
        v-if="isSystemAdmin"
        cols="12"
        md="6"
        lg="4"
      >
-        <v-card
-          elevation="10"
+        <DashboardCard
          :to="{ name: 'administration/UsersPage' }"
-          hover
+          title="Users"
+          subtitle="Manage users and permissions"
+          :count="usersCount"
+          count-label="Total Users"
+          color="success"
        >
-          <v-card-item>
-            <div class="d-flex align-center">
-              <v-avatar
-                color="success"
-                size="56"
-                class="mr-4"
-              >
-                <v-icon
-                  size="32"
-                  color="white"
-                >
-                  mdi-account-group
-                </v-icon>
-              </v-avatar>
-              <div>
-                <v-card-title class="text-h5">Users</v-card-title>
-                <v-card-subtitle>Manage users and permissions</v-card-subtitle>
-              </div>
-            </div>
-          </v-card-item>
-
-          <v-divider />
-
-          <v-card-text>
-            <div class="d-flex align-center justify-space-between">
-              <span class="text-h3 font-weight-bold">{{ usersCount }}</span>
-              <v-icon
-                size="large"
-                color="success"
-              >
-                mdi-chevron-right
-              </v-icon>
-            </div>
-            <div class="text-caption text-medium-emphasis mt-1">Total Users</div>
-          </v-card-text>
-        </v-card>
+          <template #icon>
+            <v-icon
+              size="32"
+              color="white"
+            >
+              mdi-account-group
+            </v-icon>
+          </template>
+        </DashboardCard>
      </v-col>

-      <!-- Settings Card -->
      <v-col
        v-if="isSystemAdmin"
        cols="12"
        md="6"
        lg="4"
      >
-        <v-card
-          elevation="10"
+        <DashboardCard
          :to="{ name: 'administration/SettingsPage' }"
-          hover
+          title="Settings"
+          subtitle="System configuration"
+          count-label="Configure System"
+          color="info"
        >
-          <v-card-item>
-            <div class="d-flex align-center">
-              <v-avatar
-                color="info"
-                size="56"
-                class="mr-4"
-              >
-                <v-icon
-                  size="32"
-                  color="white"
-                >
-                  mdi-cog
-                </v-icon>
-              </v-avatar>
-              <div>
-                <v-card-title class="text-h5">Settings</v-card-title>
-                <v-card-subtitle>System configuration</v-card-subtitle>
-              </div>
-            </div>
-          </v-card-item>
-
-          <v-divider />
-
-          <v-card-text>
-            <div class="d-flex align-center justify-space-between">
-              <span class="text-h3 font-weight-bold">&nbsp;</span>
-
-              <v-icon
-                size="large"
-                color="info"
-              >
-                mdi-chevron-right
-              </v-icon>
-            </div>
-            <div class="text-caption text-medium-emphasis mt-1">Configure System</div>
-          </v-card-text>
-        </v-card>
+          <template #icon>
+            <v-icon
+              size="32"
+              color="white"
+            >
+              mdi-cog
+            </v-icon>
+          </template>
+        </DashboardCard>
      </v-col>
    </v-row>
  </div>
@@ -110,6 +58,8 @@ import useBreadcrumbs from "@/use/use-breadcrumbs"
 import useUsers from "@/use/use-users"
 import useCurrentUser from "@/use/use-current-user"

+import DashboardCard from "@/components/common/DashboardCard.vue"
+
 const { isSystemAdmin } = useCurrentUser()

 const { totalCount: usersCount } = useUsers()
@@ -4,7 +4,6 @@ import { authGuard } from "@auth0/auth0-vue"
 import { APPLICATION_NAME } from "@/config"
 import administrationRoutes from "@/routes/administration-routes"
 import { authorizationGuard } from "@/utils/authorization-guards"
-import publicRoutes from "@/routes/public-routes"

 const routes: RouteRecordRaw[] = [
  {
@@ -14,9 +13,21 @@ const routes: RouteRecordRaw[] = [
    children: [
      {
        path: "",
+        redirect: { name: "HomePage" },
+      },
+      {
+        path: "home",
        name: "HomePage",
        component: () => import("@/pages/HomePage.vue"),
      },
+      {
+        name: "BlogPage",
+        path: "blog",
+        component: () => import("@/pages/BlogPage.vue"),
+        meta: {
+          title: "Blog",
+        },
+      },
    ],
  },
  {
@@ -37,7 +48,7 @@ const routes: RouteRecordRaw[] = [
    children: [
      {
        path: "",
-        redirect: "sign-in",
+        redirect: { name: "DashboardPage" },
      },
      {
        name: "DashboardPage",
@@ -95,7 +106,6 @@ const routes: RouteRecordRaw[] = [
      },
    ],
  },
-  ...publicRoutes,
  ...administrationRoutes,
  {
    name: "StatusPage",
@@ -1,12 +0,0 @@
-import { RouteRecordRaw } from "vue-router"
-
-export const publicRoutes: Readonly<RouteRecordRaw[]> = [
-  {
-    path: "/public",
-    component: () => import("@/layouts/PublicLayout.vue"),
-    meta: { requiresAuth: false },
-    children: [],
-  },
-]
-
-export default publicRoutes
@@ -476,6 +476,14 @@
  text-align: start;
 }

+.font-serif {
+  font-family: "Source Serif 4", Georgia, serif;
+}
+
+.font-mono {
+  font-family: ui-monospace, Menlo, Monaco, Consolas, "Ubuntu Mono", monospace;
+}
+
@media screen and (max-width: 1199px) {
  .ps-96 {
    padding-inline-start: 60px !important;
@@ -0,0 +1,83 @@
+import { type Ref, reactive, toRefs, unref, watch } from "vue"
+import { isNil } from "lodash"
+
+import blogPostsApi, { type BlogPost } from "@/api/blog-posts-api"
+
+export { type BlogPost }
+
+export function useBlogPost(idOrSlug: Ref<number | string | null | undefined>) {
+  const state = reactive<{
+    blogPost: BlogPost | null
+    isLoading: boolean
+    isErrored: boolean
+  }>({
+    blogPost: null,
+    isLoading: false,
+    isErrored: false,
+  })
+
+  async function fetch(): Promise<BlogPost> {
+    const staticIdOrSlug = unref(idOrSlug)
+    if (isNil(staticIdOrSlug)) {
+      throw new Error("idOrSlug is required")
+    }
+
+    state.isLoading = true
+    try {
+      const { blogPost } = await blogPostsApi.get(staticIdOrSlug)
+      state.isErrored = false
+      state.blogPost = blogPost
+      return blogPost
+    } catch (error) {
+      console.error("Failed to fetch blog post:", error)
+      state.isErrored = true
+      throw error
+    } finally {
+      state.isLoading = false
+    }
+  }
+
+  async function save(): Promise<BlogPost> {
+    const staticIdOrSlug = unref(idOrSlug)
+    if (isNil(staticIdOrSlug)) {
+      throw new Error("idOrSlug is required")
+    }
+
+    if (isNil(state.blogPost)) {
+      throw new Error("No blog post to save")
+    }
+
+    state.isLoading = true
+    try {
+      const { blogPost } = await blogPostsApi.update(staticIdOrSlug, state.blogPost)
+      state.isErrored = false
+      state.blogPost = blogPost
+      return blogPost
+    } catch (error) {
+      console.error("Failed to save blog post:", error)
+      state.isErrored = true
+      throw error
+    } finally {
+      state.isLoading = false
+    }
+  }
+
+  watch(
+    () => unref(idOrSlug),
+    async (newIdOrSlug) => {
+      if (isNil(newIdOrSlug)) return
+
+      await fetch()
+    },
+    { immediate: true }
+  )
+
+  return {
+    ...toRefs(state),
+    fetch,
+    refresh: fetch,
+    save,
+  }
+}
+
+export default useBlogPost
@@ -0,0 +1,67 @@
+import { type Ref, reactive, toRefs, ref, unref, watch } from "vue"
+
+import blogPostsApi, {
+  type BlogPostIndexView,
+  type BlogPostWhereOptions,
+  type BlogPostFiltersOptions,
+  type BlogPostQueryOptions,
+} from "@/api/blog-posts-api"
+
+export {
+  type BlogPostIndexView,
+  type BlogPostWhereOptions,
+  type BlogPostFiltersOptions,
+  type BlogPostQueryOptions,
+}
+
+export function useBlogPosts(
+  queryOptions: Ref<BlogPostQueryOptions> = ref({}),
+  { skipWatchIf = () => false }: { skipWatchIf?: () => boolean } = {}
+) {
+  const state = reactive<{
+    blogPosts: BlogPostIndexView[]
+    totalCount: number
+    isLoading: boolean
+    isErrored: boolean
+  }>({
+    blogPosts: [],
+    totalCount: 0,
+    isLoading: false,
+    isErrored: false,
+  })
+
+  async function fetch(): Promise<BlogPostIndexView[]> {
+    state.isLoading = true
+    try {
+      const { blogPosts, totalCount } = await blogPostsApi.list(unref(queryOptions))
+      state.isErrored = false
+      state.blogPosts = blogPosts
+      state.totalCount = totalCount
+      return blogPosts
+    } catch (error) {
+      console.error("Failed to fetch blog posts:", error)
+      state.isErrored = true
+      throw error
+    } finally {
+      state.isLoading = false
+    }
+  }
+
+  watch(
+    () => [skipWatchIf(), unref(queryOptions)],
+    async ([skip]) => {
+      if (skip) return
+
+      await fetch()
+    },
+    { deep: true, immediate: true }
+  )
+
+  return {
+    ...toRefs(state),
+    fetch,
+    refresh: fetch,
+  }
+}
+
+export default useBlogPosts
@@ -1,7 +1,9 @@
 import { computed, reactive, toRefs } from "vue"
 import { DateTime } from "luxon"
+import { isNil, isNull, isUndefined } from "lodash"

 import currentUserApi, { UserRoles, type UserAsShow } from "@/api/current-user-api"
+import { PreferenceKeys, PreferenceValueMap } from "@/api/users/preferences-api"

 export { UserRoles, type UserAsShow }

@@ -35,6 +37,18 @@ export function useCurrentUser<IsLoaded extends boolean = false>() {
    return state.currentUser?.roles.includes(UserRoles.SYSTEM_ADMIN)
  })

+  function getPreference<K extends PreferenceKeys>(key: K): PreferenceValueMap[K] | null {
+    if (isNull(state.currentUser)) return null
+
+    const { preferences } = state.currentUser
+    if (isUndefined(preferences)) return null
+
+    const preference = preferences.find((p) => p.key === key)
+    if (isNil(preference)) return null
+
+    return preference.value as PreferenceValueMap[K]
+  }
+
  async function fetch(): Promise<UserAsShow> {
    state.isLoading = true
    try {
@@ -68,6 +82,7 @@ export function useCurrentUser<IsLoaded extends boolean = false>() {
    reset,
    // helpers
    isSystemAdmin,
+    getPreference,
  }
 }

@@ -0,0 +1,67 @@
+import { type Ref, reactive, toRefs, ref, unref, watch } from "vue"
+
+import publicBlogPostsApi, {
+  type PublicBlogPostIndexView,
+  type PublicBlogPostWhereOptions,
+  type PublicBlogPostFiltersOptions,
+  type PublicBlogPostQueryOptions,
+} from "@/api/public/blog-posts-api"
+
+export {
+  type PublicBlogPostIndexView,
+  type PublicBlogPostWhereOptions,
+  type PublicBlogPostFiltersOptions,
+  type PublicBlogPostQueryOptions,
+}
+
+export function usePublicBlogPosts(
+  queryOptions: Ref<PublicBlogPostQueryOptions> = ref({}),
+  { skipWatchIf = () => false }: { skipWatchIf?: () => boolean } = {}
+) {
+  const state = reactive<{
+    publicBlogPosts: PublicBlogPostIndexView[]
+    totalCount: number
+    isLoading: boolean
+    isErrored: boolean
+  }>({
+    publicBlogPosts: [],
+    totalCount: 0,
+    isLoading: false,
+    isErrored: false,
+  })
+
+  async function fetch(): Promise<PublicBlogPostIndexView[]> {
+    state.isLoading = true
+    try {
+      const { blogPosts, totalCount } = await publicBlogPostsApi.list(unref(queryOptions))
+      state.isErrored = false
+      state.publicBlogPosts = blogPosts
+      state.totalCount = totalCount
+      return blogPosts
+    } catch (error) {
+      console.error("Failed to fetch blog posts:", error)
+      state.isErrored = true
+      throw error
+    } finally {
+      state.isLoading = false
+    }
+  }
+
+  watch(
+    () => [skipWatchIf(), unref(queryOptions)],
+    async ([skip]) => {
+      if (skip) return
+
+      await fetch()
+    },
+    { deep: true, immediate: true }
+  )
+
+  return {
+    ...toRefs(state),
+    fetch,
+    refresh: fetch,
+  }
+}
+
+export default usePublicBlogPosts
@@ -1,15 +1,18 @@
 import { isNil, isEmpty } from "lodash"
 import { DateTime } from "luxon"

-export function formatDate(input: string | Date | undefined): string {
+export function formatDate(
+  input: string | Date | undefined | null,
+  formatOption: string = "yyyy-MM-dd"
+): string {
  if (isNil(input) || isEmpty(input)) {
    return ""
  } else if (typeof input == "string") {
    const parsed = DateTime.fromISO(input, { zone: "utc" })
    const isMidnight = parsed.hour === 0 && parsed.minute === 0 && parsed.second === 0
-    return isMidnight ? parsed.toFormat("yyyy-MM-dd") : parsed.toLocal().toFormat("yyyy-MM-dd")
+    return isMidnight ? parsed.toFormat(formatOption) : parsed.toLocal().toFormat(formatOption)
  } else if (input instanceof Date) {
-    return DateTime.fromJSDate(input).toLocal().toFormat("yyyy-MM-dd")
+    return DateTime.fromJSDate(input).toLocal().toFormat(formatOption)
  } else {
    return ""
  }
				`@@ -0,0 +1 @@`
				`export { publicBlogPostsApi } from "./blog-posts-api"`
				`@@ -0,0 +1 @@`
				`export { preferencesApi } from "./preferences-api"`