Dev

.github/workflows/e2e.yaml

@@ -1,4 +1,4 @@
-name: playright
+name: playwright
 on:
   push:
     branches: [main, prod-preview]

public/blogs/simple.mdx

@@ -21,4 +21,67 @@ tags:
 
 To test that you've removed this entirely you can use curl:
 </C>
+<C>
+ If youd like to preserve the default values for a theme option but
+          also add new values, add your extensions under the theme.extend key in
+          your configuration file. Values under this key are merged with
+          existing theme values and automatically become available as new
+          classes that you can use. As an example, here we extend the fontFamily
+          property to add the font-display class that can change the font used
+          on an element: If youd like to preserve the default values for a theme
+          option but also add new values, add your extensions under the
+          theme.extend key in your configuration file. Values under this key are
+          merged with existing theme values and automatically become available
+          as new classes that you can use. As an example, here we extend the
+          fontFamily property to add the font-display class that can change the
+          font used on an element: If youd like to preserve the default values
+          for a theme option but also add new values, add your extensions under
+          the theme.extend key in your configuration file. 
+                    <S2/>
+          Values under this key
+          are merged with existing theme values and automatically become
+          available as new classes that you can use. As an example, here we
+          extend the fontFamily property to add the font-display class that can
+          change the font used on an element: If youd like to preserve the
+          default values for a theme option but also add new values, add your
+          extensions under the theme.extend key in your configuration file.
+          Values under this key are merged with existing theme values and
+          automatically become available as new classes that you can use. As an
+          example, here we extend the fontFamily property to add the
+          font-display class that can change the font used on an element: If
+          youd like to preserve the default values for a theme option but also
+          add new values, add your extensions under the theme.extend key in your
+          configuration file. Values under this key are merged with existing
+          theme values and automatically become available as new classes that
+          you can use. As an example, here we extend the fontFamily property to
+          add the font-display class that can change the font used on an
+          element: If youd like to preserve the default values for a theme
+          option but also add new values, add your extensions under the
+          theme.extend key in your configuration file. Values under this key are
+          merged with existing theme values and automatically become available
+          as new classes that you can use. As an example, here we extend the
+          fontFamily property to add the font-display class that can change the
+          font used on an element: If youd like to preserve the default values
+          for a theme option but also add new values, add your extensions under
+          the theme.extend key in your configuration file. 
+          <S2/>
+
+          Values under this key
+          are merged with existing theme values and automatically become
+          available as new classes that you can use. As an example, here we
+          extend the fontFamily property to add the font-display class that can
+          change the font used on an element: If youd like to preserve the
+          default values for a theme option but also add new values, add your
+          extensions under the theme.extend key in your configuration file.
+          Values under this key are merged with existing theme values and
+          automatically become available as new classes that you can use. As an
+          example, here we extend the fontFamily property to add the
+          font-display class that can change the font used on an element: If
+          youd like to preserve the default values for a theme option but also
+          add new values, add your extensions under the theme.extend key in your
+          configuration file. Values under this key are merged with existing
+          theme values and automatically become available as new classes that
+          you can use. As an example, here we extend the fontFamily property to
+          add the font-display class that can change the font used on an
+</C>
 

public/blogs/tester.mdx

@@ -80,7 +80,7 @@ language="python"
 showLineNumbers={true}
 
 > </Code>
-<br />
+
 <Code language="bash" showLineNumbers={true} code={`
 declare -A dotfiles=(
   [".zshrc"]="$REPO/.zshrc"
@@ -152,7 +152,7 @@ async function VideoComponent({ fileName }) {
 }`}
 language="typescript"
 showLineNumbers={true}
-
+copy={false}
 > </Code>
             <C>
                 All data is encrypted via SSL/TLS when transmitted from our servers to your browser.

src/app/(pages)/blog/[slug]/page.tsx

@@ -1,5 +1,7 @@
-import StyledMDX, { Heading as H1 } from '@/app/components/mdx/styled-mdx';
+import StyledMDX from '@/app/components/mdx/styled-mdx';
+import { Heading1 as H1 } from '@/app/components/reusables/headers';
 import { formatDate, isSameMonthAndYear } from '@/lib/funcs/dates';
+import { MediumSection } from '@/app/components/reusables/sections';
 import type { Metadata, ResolvingMetadata } from 'next';
 
 import { notFound } from 'next/navigation';
@@ -12,7 +14,7 @@ export default function Blog({ params }: { params: { slug: string } }) {
   if (!post) {
     notFound();
   }
-  // TODO: use NEXT-SEO
+  // TODO: configure metadata
 
   return (
     <main>
@@ -35,15 +37,18 @@ export default function Blog({ params }: { params: { slug: string } }) {
           }),
         }}
       />
-      <section className="dimmed-5 mx-auto container sm:max-w-xl md:max-w-2xl lg:max-w-3xl xl:max-w-4xl">
+      <MediumSection>
         <H1>{post.parsedContent.attributes.title}</H1>
         <div className="flex justify-between items-center mb-8 text-sm sm:max-w-[450px]  md:max-w-[550px]  lg:max-w-[650px] xl:max-w-[750px] ">
           <p className="text-sm dimmed-0">
             {formatDate(post.parsedContent.attributes.firstModDate)}
           </p>
           <div>
             {isSameMonthAndYear(post.parsedContent.attributes.firstModDate) ? (
-              <Badge variant={'outlineSuccess'}>New</Badge>
+              // TODO: replace with views
+              <Badge variant={'outlineSuccess'} className="opacity-0">
+                New
+              </Badge>
             ) : (
               <Badge variant={'outlineSuccess'} className="opacity-0">
                 New
@@ -54,7 +59,7 @@ export default function Blog({ params }: { params: { slug: string } }) {
         <article className="text-wrap">
           <StyledMDX source={post.parsedContent.body}></StyledMDX>
         </article>
-      </section>
+      </MediumSection>
     </main>
   );
 }

src/app/(pages)/blog/layout.tsx

@@ -1,13 +1,13 @@
 import { Navbar } from '@/app/components/reusables/nav';
-
+import Nav from '@/app/components/nav/nav';
 export default async function BlogsLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
     <>
-      <Navbar></Navbar>
+      <Nav></Nav>
       <main>{children}</main>
     </>
   );

src/app/(pages)/blog/page.tsx

@@ -11,7 +11,7 @@ export default function BlogPage() {
   let allBlogs = getBlogPosts();
   return (
     <section className="mx-auto container sm:max-w-xl md:max-w-3xl lg:max-w-3xl xl:max-w-3xl">
-      <h1 className="font-medium text-2xl mb-8 tracking-tighter">
+      <h1 className="font-medium text-2xl mb-8 tracking-tighter hidden">
         Unclassified, raw
       </h1>
       {allBlogs

src/app/(pages)/x/page.tsx

@@ -0,0 +1,10 @@
+import LoadingScreen from '@/app/loading';
+import Nav from '@/app/components/nav/nav';
+export default function Fun() {
+  return (
+    <>
+      <Nav></Nav>
+      <LoadingScreen></LoadingScreen>
+    </>
+  );
+}

src/app/components/mdx/styled-mdx.tsx

@@ -1,47 +1,51 @@
-import { ArrowUpRightSquare } from 'lucide-react';
 import { MDXRemote, MDXRemoteProps } from 'next-mdx-remote/rsc';
-import { Image as _Image, Skeleton } from '@nextui-org/react';
-import { Navbar } from '@/app/components/reusables/nav';
+import { Link } from '@/app/components/reusables/link';
+import { Image, Skeleton } from '@nextui-org/react';
 import { cn } from '@/lib/utils';
-import NextLink from 'next/link';
 import NextImage from 'next/image';
 import CodeBlock from '@/app/components/reusables/code-block';
-import React from 'react';
+import {
+  Heading2,
+  Heading3,
+  Heading1,
+} from '@/app/components/reusables/headers';
+import { Spacer1, Spacer2, Spacer3 } from '@/app/components/reusables/spacers';
+import { TextContent } from '@/app/components/reusables/content';
 
 export default function StyledMDX({ source }: { source: string }) {
   return (
     <_StyledMDX
       source={source}
       components={{
         Code: CodeBlock,
-        Nav: Navbar,
-        Image: BlogImage,
-        H: Heading,
+        Image: MDXImage,
+        H: Heading1,
         H2: Heading2,
         H3: Heading3,
-        S: Spacer,
+        S: Spacer1,
         S2: Spacer2,
         S3: Spacer3,
-        C: Content,
+        C: TextContent,
         L: Link,
       }}
     ></_StyledMDX>
   );
 }
+function _StyledMDX({ components, ...props }: MDXRemoteProps) {
+  return <MDXRemote {...props} components={{ ...components }} />;
+}
 
-type BlogImageProps = {
+type MDXImageProps = {
   alt: string;
   width: string;
   height: string;
   src: string;
   className?: string;
 };
-export function BlogImage(props: BlogImageProps) {
+export function MDXImage(props: MDXImageProps) {
   return (
     <Skeleton className="flex items-center justify-center">
-      <_Image
-        isLoading
-        isBlurred
+      <Image
         as={NextImage}
         className={cn('rounded-lg', props.className || '')}
         src={props.src}
@@ -52,87 +56,3 @@ export function BlogImage(props: BlogImageProps) {
     </Skeleton>
   );
 }
-
-export function Link({
-  href,
-  ...props
-}: {
-  href: string;
-  children: React.ReactNode;
-}) {
-  if (href.startsWith('#') || href.startsWith('/')) {
-    return (
-      <NextLink
-        href={href}
-        className="average-transition  font-bold text-fuchsia-400 hover:text-fuchsia-700"
-        {...props}
-      >
-        {props.children}
-      </NextLink>
-    );
-  }
-
-  return (
-    <NextLink
-      href={href}
-      className="average-transition font-bold text-pink-700 hover:text-pink-800 "
-      target="_blank"
-      rel="noopener noreferrer"
-      {...props}
-    >
-      {props.children}
-      <ArrowUpRightSquare
-        strokeWidth={'1.5px'}
-        size={'20px'}
-        style={{
-          display: 'inline-block',
-          marginLeft: '2px',
-          marginBottom: '3px',
-        }}
-      />
-    </NextLink>
-  );
-}
-
-type HeaderProps = {
-  children: React.ReactNode;
-  id?: string;
-};
-export function Heading({ children, id }: HeaderProps) {
-  return (
-    <h1 id={id} className="font-bold my-2 text-[3.0rem]">
-      {children}
-    </h1>
-  );
-}
-export function Heading2({ children, id }: HeaderProps) {
-  return (
-    <h2 id={id} className="text-3xl font-extrabold dimmed-5">
-      {children}
-    </h2>
-  );
-}
-export function Heading3({ children, id }: HeaderProps) {
-  return (
-    <h3 id={id} className="text-2xl font-extrabold dimmed-4">
-      {children}
-    </h3>
-  );
-}
-
-export function Content({ children }: { children: React.ReactNode }) {
-  return <p className="p-2 mx-2 font-normal dimmed-3">{children}</p>;
-}
-export function Spacer({ children }: { children: React.ReactNode }) {
-  return <div className="my-1">{children}</div>;
-}
-export function Spacer2({ children }: { children: React.ReactNode }) {
-  return <div className="my-2">{children}</div>;
-}
-export function Spacer3({ children }: { children: React.ReactNode }) {
-  return <div className="my-4">{children}</div>;
-}
-
-function _StyledMDX({ components, ...props }: MDXRemoteProps) {
-  return <MDXRemote {...props} components={{ ...components }} />;
-}

src/app/components/nav/buttons.tsx

@@ -0,0 +1,34 @@
+import { GitBranch } from 'lucide-react';
+import { Image as _Image } from '@nextui-org/react';
+import NextLink from 'next/link';
+import { Button } from '../ui/button';
+
+export function OutLineButton({
+  href,
+  ...props
+}: {
+  href: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Button variant={'outline'}>
+      <NextLink
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        {...props}
+      >
+        {props.children}
+        <GitBranch
+          strokeWidth={'1.5px'}
+          size={'20px'}
+          style={{
+            display: 'inline-block',
+            marginLeft: '5px',
+            marginBottom: '3px',
+          }}
+        />
+      </NextLink>{' '}
+    </Button>
+  );
+}