+
+ {router.isFallback ? (
+ Loading…
+ ) : (
+ <>
+
+
+
+ 
+
+ );
+};
+
+export default Author;
diff --git a/components/blog/PostPreview/PostPreview.styled.jsx b/components/blog/PostPreview/PostPreview.styled.jsx
index 8bb357f..db33316 100644
--- a/components/blog/PostPreview/PostPreview.styled.jsx
+++ b/components/blog/PostPreview/PostPreview.styled.jsx
@@ -2,22 +2,22 @@ import styled from "styled-components";
import { motion } from "framer-motion";
export const PostPreviewStyled = styled(motion.div)`
- .post-card {
- display : flex;
- flex-direction : column;
- justify-content : space-between;
- background : linear-gradient(0.42turn, #bffa4a, #66bd43);
+ .post-card {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ background: linear-gradient(0.42turn, #bffa4a, #66bd43);
- &:hover {
- cursor : pointer;
- }
+ &:hover {
+ cursor: pointer;
}
+ }
- .post-excerpt {
- -webkit-line-clamp : 4;
- -webkit-box-orient : vertical;
- overflow : hidden;
- text-overflow : ellipsis;
- white-space : nowrap;
- }
+ .post-excerpt {
+ -webkit-line-clamp: 4;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
`;
diff --git a/components/blog/PostPreview/PostPreview.tsx b/components/blog/PostPreview/PostPreview.tsx
index 5de8329..a94ef97 100644
--- a/components/blog/PostPreview/PostPreview.tsx
+++ b/components/blog/PostPreview/PostPreview.tsx
@@ -1,57 +1,73 @@
import Image from "next/image";
import Link from "next/link";
-import { Card, Element, Heading, Portion, Row, Text } from "fictoan-react";
+import styled from "styled-components";
-import { PostPreviewStyled } from "@/components/blog/PostPreview/PostPreview.styled";
import DateFormatter from "@/utils/date-formatter";
import type Author from "@/interfaces/author";
+import { theme } from "@/styles/theme";
+
+const PostPreviewStyled = styled.a`
+ /* Add your custom styles here */
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ text-decoration: none;
+ color: inherit;
+ cursor: pointer;
+`;
+
+const AuthorDetails = styled.a`
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+`;
+
+const PostHeading = styled.h2`
+ /* Add your custom styles here */
+ color: ${theme.headingColored};
+`;
+
+const Details = styled.p`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ width: 100%;
+ & > p {
+ margin: 0;
+ }
+ time {
+ color: ${theme.fadeText};
+ }
+`;
type Props = {
- title: string;
- coverImage: string;
- date: string;
- excerpt: string;
- author: Author;
- slug: string;
+ title: string;
+ coverImage: string;
+ date: string;
+ excerpt: string;
+ author: Author;
+ slug: string;
};
-const PostPreview = ({
- title,
- date,
- excerpt,
- slug,
- author,
-}: Props) => {
- return (
-
+
+ {author.name}
+
+
+
+
+
+
+
+ {Array.from({ length: count })
+ .map((_, i) => {
+ console.log({ i });
+ return i;
+ })
+ .map((i) => (
+
+ );
+};
diff --git a/components/decoration/wavesIcon.tsx b/components/decoration/wavesIcon.tsx
new file mode 100644
index 0000000..b57fa75
--- /dev/null
+++ b/components/decoration/wavesIcon.tsx
@@ -0,0 +1,44 @@
+import styled from "styled-components";
+import { Waves } from "./waves";
+import { Icon } from "@iconify/react";
+import { theme } from "@/styles/theme";
+import { icons } from "content/icons";
+
+type Icon = "arrow-right" | "pen";
+
+const WaveIcon = styled.div<{ i: number }>`
+ position: absolute;
+ color: ${theme.card};
+ svg {
+ filter: drop-shadow(3px 3px 0px ${theme.primary});
+ }
+ font-size: 10rem;
+ bottom: 0;
+ right: 0;
+ height: 11rem;
+ width: 11rem;
+`;
+
+const Wrapper = styled.div`
+ position: relative;
+ width: 20rem;
+ height: 20rem;
+`;
+
+export const WavesIcon = ({ count = 1, icon = icons.blog }) => {
+ return (
+
+
+
+ Download for {osLabel[os]}
+
+
- {latestRelease &&
-
-
-
- Other
-
-
-
- }
-
- ) : latestRelease && (
-
-
-
- )
-}
+ {latestRelease && (
+
+
+ Other
+
+
+ )}
+
+ ) : (
+ latestRelease && (
+
+ An AI-powered mod of VSCode*/} - {/**/} - - {/*
An AI-powered mod of VSCode*/} + {/**/} + + {/*
{title}
+{description}
+{heading.children}
; + + const children = node.children[0]; + const text = children; + console.log({ node, children, text }); + if (!text) return{heading.children}
; + const slug = text + .toLowerCase() + .replace(/\s/g, "-") + .replace(/[^\w-]/g, ""); + const link = `#${slug}`; + + const Heading = `h${heading.level ?? 2}` as keyof JSX.IntrinsicElements; + + return ( +
+
+ );
+ }
+
+ return
+ {caption}
+
+ ) : null}
+ {paragraph.children}
; + }, - if (node.children[0].tagName === "img") { - const image = node.children[0] - const blurSupported = image.properties.src.split(".").pop() in ["jpg", "png", "webp", "avif"] - const metastring = image.properties.alt - const alt = metastring?.replace(/ *\{[^)]*\} */g, "") - const isPriority = metastring?.toLowerCase().match('{priority}') - const hasCaption = metastring?.toLowerCase().includes('{caption:') - const caption = metastring?.match(/{caption: (.*?)}/)?.pop() + code({ node, inline, className, children, ...props }) { + const match = /language-(\w+)/.exec(className || ""); - return ( -
-
- )
- }
- return {caption}
: null}
- {paragraph.children}
- }, - code({ node, inline, className, children, ...props }) { - const match = /language-(\w+)/.exec(className || '') - return !inline && match ? ( -
- {children}
-
- )
- }
-}
+ return !inline && match ? (
+
+ {children}
+
+ );
+ },
+};
type MarkdownProps = {
- content: string;
-}
+ content: string;
+};
export const Markdown = ({ content }: MarkdownProps) => {
- return (
- <>
- {intro.para}
+ +{aboutUs.subtitle}
+ +
+
+ {post.author.name}
+ {(post.author.twitter || post.author.github || post.author.linkedin) && (
+
)}
+ {post.excerpt}
- -
+
+ );
+}
+export default Components;
diff --git a/pages/index.page.tsx b/pages/index.page.tsx
index ddc5a07..bb8e3ab 100644
--- a/pages/index.page.tsx
+++ b/pages/index.page.tsx
@@ -1,154 +1,92 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
import Head from "next/head";
import { NextSeo } from "next-seo";
import { UAParser } from "ua-parser-js";
-import { Row, Portion, Heading } from "fictoan-react";
import { HomeStyled } from "../styles/Home.styled";
-import FeaturesGrid from "../components/features-grid/FeaturesGrid";
-import Footer from "../components/footer/Footer";
-import AnimatedBackground from "../components/animated-background/AnimatedBackground";
-import { DownloadButtons } from "../components/download/download";
-
-const Home = ({ os, architecture }: { os?: string, architecture?: string }) => {
- const [latestRelease, setLatestRelease] = useState