init

app/pages/materials/[id].vue

@@ -0,0 +1,128 @@
+<script lang="ts" setup="">
+import {useMaterialsStore} from "~/stores/materials/useMaterialsStore";
+import {Button} from "~/components/ui/Buttons";
+import dayjs from "dayjs";
+import type {Material} from "~/stores/materials/types.materials";
+import sanitizeHtml from "sanitize-html";
+import IconCalendar from "~/components/icons/iconCalendar.vue";
+import ru from 'dayjs/locale/ru'
+
+dayjs.locale(ru);
+
+const route = useRoute()
+const materialsStore = useMaterialsStore()
+
+const currentItem = computed<Material | undefined>(() => materialsStore.getById(route.params.id))
+const date = computed(() => dayjs(currentItem.value?.datetime).format('D MMMM'))
+const safeHTML = computed(() => {
+  if (!currentItem.value) return ''
+  return sanitizeHtml(currentItem.value.description_html)
+})
+
+
+await useAsyncData(async () => {
+  await materialsStore.fetchMaterials()
+  return true
+})
+</script>
+
+<template>
+  <div class="material-container">
+    <Button.ButtonBack/>
+
+    <div class="material-content">
+      <div class="date-container">
+        <IconCalendar class="icon" />
+        <span class="date">{{date}}</span>
+      </div>
+
+      <div class="content" v-html="safeHTML" />
+    </div>
+
+  </div>
+</template>
+
+<style scoped lang="scss">
+.material-container {
+  max-width: 1014px;
+  margin: 0 auto;
+}
+
+.material-content {
+  margin-top: 48px;
+  padding: 64px;
+  border-radius: 32px;
+  background-color: #fff;
+}
+
+.content {
+  :deep(h1), :deep(h2), :deep(h3), :deep(p), :deep(blockquote) {
+    margin: 0;
+    padding-top: 24px;
+  }
+
+  :deep(h1) {
+    font-family: SourceSans3, monospace;
+    font-weight: 600;
+    font-size: 36px;
+    line-height: 120%;
+    color: var(--text-black);
+  }
+  :deep(p:first-of-type) {
+    font-family: FuturaPT, monospace;
+    font-weight: 500;
+    font-size: 22px;
+    line-height: 120%;
+    color: var(--text-black);
+  }
+  :deep(p:not(:first-of-type)) {
+    font-family: FuturaPT, monospace;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 120%;
+    color: var(--text-black);
+  }
+}
+.date-container {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--text-light-gray);
+}
+.icon {
+  @include mixins.square(20px);
+}
+
+.date {
+  font-family: FuturaPT;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 100%;
+}
+
+@media screen and (max-width: 768px) {
+  .material-container {
+    padding-inline: 0;
+  }
+  .material-content {
+    margin-top: 32px;
+    padding: 24px 16px;
+    border-radius: 24px;
+    position: relative;
+    left: -16px;
+    width: calc(100dvw - (16px * 2));
+  }
+
+  .content {
+    :deep(h1) {
+      font-size: 24px;
+    }
+    :deep(p:first-of-type) {
+      font-size: 18px;
+    }
+    :deep(p:not(:first-of-type)) {
+      font-size: 16px;
+    }
+  }
+}
+</style>

app/pages/materials/create.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup="">
+import {Button} from "~/components/ui/Buttons";
+import {useWindowSize} from "@vueuse/core";
+
+const {width} = useWindowSize()
+const router = useRouter()
+</script>
+
+<template>
+  <div class="create-container">
+    <Button.ButtonBack v-if="width > 768"/>
+    <h1 class="h1">Создание материала</h1>
+    <TiptapEditor class="editor" />
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+.create-container {
+  max-width: 1014px;
+  margin: 0 auto;
+}
+.h1 {
+  font-family: SourceSans3, sans-serif;
+  font-weight: 600;
+  font-size: 36px;
+  line-height: 120%;
+  padding-top: 32px;
+}
+
+.editor {
+  padding-top: 48px;
+}
+
+@media screen and (max-width: 768px) {
+  .h1 {
+    padding-top: 0;
+    font-size: 24px;
+  }
+
+  .editor {
+    padding-top: 32px;
+  }
+}
+</style>

app/pages/materials/index.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup="">
+import MaterialsItem from "~/components/MaterialsItem.vue";
+import {useMaterialsStore} from "~/stores/materials/useMaterialsStore";
+
+const materialsStore = useMaterialsStore()
+await useAsyncData(async () => {
+  await materialsStore.fetchMaterials()
+  return true
+})
+</script>
+
+<template>
+  <div>
+    <h1 class="h1">Материалы</h1>
+
+    <div v-if="materialsStore.errorMaterials" class="error">Упс... Данные не загрузились :(</div>
+    <div v-else class="materials">
+      <template
+          v-for="item of materialsStore.getMaterialsSorted" :key="item.id"
+      >
+
+        <NuxtLink
+          :to="{
+            name: 'materials-id', params: {id: item.id }
+          }"
+          target="_blank"
+          class="link"
+        >
+          <MaterialsItem :item />
+        </NuxtLink>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.h1 {
+  font-family: SourceSans3, sans-serif;
+  font-weight: 600;
+  font-size: 36px;
+  line-height: 120%;
+}
+
+.materials {
+  padding-top: 48px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+}
+.link {
+  text-decoration: none;
+  color: var(--text-black);
+}
+
+@media screen and (max-width: 768px) {
+  .materials {
+    flex-direction: column;
+  }
+}
+</style>