From 7c92da1b9b9352662f2feb9d4f91355b07abb62d Mon Sep 17 00:00:00 2001 From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com> Date: Thu, 2 Jan 2025 19:51:55 +0400 Subject: [PATCH] feat: refactor styles and fix errors --- src/assets/styles/starlight.css | 5 + src/pages/fr/blog/[id].astro | 163 +++++++++++++ src/pages/fr/insights/[id].astro | 266 +++++++++++++++++++++ src/pages/fr/products/[id].astro | 391 +++++++++++++++++++++++++++++++ 4 files changed, 825 insertions(+) create mode 100644 src/pages/fr/blog/[id].astro create mode 100644 src/pages/fr/insights/[id].astro create mode 100644 src/pages/fr/products/[id].astro diff --git a/src/assets/styles/starlight.css b/src/assets/styles/starlight.css index 9eaa944..5c4145f 100644 --- a/src/assets/styles/starlight.css +++ b/src/assets/styles/starlight.css @@ -100,6 +100,11 @@ article.card { border-radius: 0.5rem; } +.pagination-links a:hover, +.sl-link-card:hover { + border-color: var(--sl-color-accent); +} + .starlight-aside--tip { background: linear-gradient(45deg, #ff512f, #f09819); border: none; diff --git a/src/pages/fr/blog/[id].astro b/src/pages/fr/blog/[id].astro new file mode 100644 index 0000000..4a73cc9 --- /dev/null +++ b/src/pages/fr/blog/[id].astro @@ -0,0 +1,163 @@ +--- +// Import necessary components and utilities +import MainLayout from "@/layouts/MainLayout.astro"; +import AvatarBlogLarge from "@components/ui/avatars/AvatarBlogLarge.astro"; +import CardRelated from "@components/ui/cards/CardRelated.astro"; +import Bookmark from "@components/ui/buttons/Bookmark.astro"; +import SocialShare from "@components/ui/buttons/SocialShare.astro"; +import PostFeedback from "@components/ui/feedback/PostFeedback.astro"; +import { Image } from "astro:assets"; +import { capitalize, formatDate } from "@utils/utils"; +import { getCollection } from "astro:content"; +import type { CollectionEntry } from "astro:content"; +import { SITE } from "@data/constants"; + +// Update getStaticPaths for French posts +export async function getStaticPaths() { + const blogPosts = await getCollection("blog", ({ id }) => + id.startsWith("fr/") + ); + return blogPosts.map((post) => { + const idWithoutLang = post.id.replace(/^fr\//, ""); // Remove the "fr/" prefix + return { + params: { lang: "fr", id: idWithoutLang }, + props: { post }, + }; + }); +} + +const { post } = Astro.props; + +// Fetch related posts +const blogPosts: CollectionEntry<"blog">[] = await getCollection( + "blog", + ({ id }) => id.startsWith("fr/") +); +const relatedPosts: CollectionEntry<"blog">[] = blogPosts.filter( + (blogEntry) => blogEntry.id !== post.id +); + +const pageTitle: string = `${post.data.title} | ${SITE.title}`; +--- + + +
+
+
+
+ +
+
+
+
+ + + {post.data.author} + +
+
    +
  • + {formatDate(post.data.pubDate)} +
    • +
  • + {post.data.readTime} min read +
    • +
+
+
+
+
+
+ +

+ {post.data.title} +

+ +
+ { + post.data.contents.map((content: string, index: any) => + index === 1 ? ( + <> +

+ {content} +

+ {post.data.cardImageAlt} + + ) : ( +

+ {content} +

+ ) + ) + } +
+
+ +
+ { + post.data.tags?.map((tag: string, index) => ( + + {capitalize(tag)} + + )) + } +
+ +
+ +
+
+
+ +
+
+
+
+ +
+ + +
+
+

+ Articles connexes +

+
+ +
+ { + relatedPosts.map((entry) => ( + + )) + } +
+
+ diff --git a/src/pages/fr/insights/[id].astro b/src/pages/fr/insights/[id].astro new file mode 100644 index 0000000..26362e4 --- /dev/null +++ b/src/pages/fr/insights/[id].astro @@ -0,0 +1,266 @@ +--- +// Import section components +import { SITE } from "@data/constants"; +import MainLayout from "@/layouts/MainLayout.astro"; +import { Image } from "astro:assets"; +import { getCollection, render } from "astro:content"; + +// Use `getStaticPaths` to generate static routes for generated pages on build +export async function getStaticPaths() { + const insightPosts = await getCollection("insights", ({ id }) => id.startsWith("fr/")); + return insightPosts.map((post) => { + const idWithoutLang = post.id.replace(/^fr\//, ''); // Remove the "fr/" prefix + return { + params: { lang: 'fr', id: idWithoutLang }, + props: { post }, + }; + }); +} + +// Get the props for this page that define a specific insight post +const { post } = Astro.props; + +const { Content } = await render(post); + +const pageTitle: string = `${post.data.title} | ${SITE.title}`; +--- + + +
+
+
+
+
+ {post.data.cardImageAlt} +
+
+
+ +
+ +
+

+ {post.data.title} +

+ +
+ +
+
+
+
+
+ + + + + + diff --git a/src/pages/fr/products/[id].astro b/src/pages/fr/products/[id].astro new file mode 100644 index 0000000..461113d --- /dev/null +++ b/src/pages/fr/products/[id].astro @@ -0,0 +1,391 @@ +--- +// Import section components +import MainLayout from "@/layouts/MainLayout.astro"; +import ProductTabBtn from "@components/ui/buttons/ProductTabBtn.astro"; +import PrimaryCTA from "@components/ui/buttons/PrimaryCTA.astro"; +import { Image } from "astro:assets"; +import { getCollection } from "astro:content"; +import { SITE } from "@data/constants"; + +// Global declaration for gsap animation library +declare global { + interface Window { + gsap: any; + } +} +// This gets the static paths for all the unique products + +export async function getStaticPaths() { + const productEntries = await getCollection("products", ({ id }) => + id.startsWith("fr/") + ); + return productEntries.map((product) => { + const idWithoutLang = product.id.replace(/^fr\//, ""); // Remove the "fr/" prefix + return { + params: { lang: "fr", id: idWithoutLang }, + props: { product }, + }; + }); +} + +const { product } = Astro.props; + +const pageTitle: string = `${product.data.title} | ${SITE.title}`; +--- + + +
+
+ +
+
+

+ {product.data.main.content} +

+
+
+
+

+ {product.data.title} +

+

+ {product.data.description} +

+
+
+ {product.data.main.imgAlt} +
+
+
+ +
+ + +
+
+
+
+
+

+ {product.data.longDescription.title} +

+

+ {product.data.longDescription.subTitle} +

+

+ +

+
+ +
+ { + product.data.descriptionList.map((list) => ( +
+
+

+ {list.title} +

+

+ {list.subTitle} +

+
+
+ )) + } +
+
+
+
+ + +
+
+ + + + + +