import React from "react";

const About = () => {
  return (
    

      

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quos laborum
        aut voluptates qui vitae incidunt iusto ipsam, nam molestiae
        reprehenderit quisquam cum molestias ut nesciunt? Culpa incidunt nobis
        libero?
      
      
Voluptate natus maiores, alias sapiente nisi possimus?
      

        Ex amet eu labore nisi irure sit magna. Culpa minim dolor consequat
        dolore pariatur deserunt aliquip nisi eu ex dolor pariatur enim. Lorem
        pariatur cillum ullamco minim nulla ex voluptate. Occaecat esse mollit
        ipsum magna consectetur nulla occaecat non sit sint amet. Pariatur quis
        duis ut laboris ipsum velit fugiat do commodo consectetur adipisicing ut
        reprehenderit.
      
    
  );
};

export default About;

import React from "react";
import { allPosts } from "contentlayer/generated";
import { compareDesc } from "date-fns";
import PostCard from "@/components/PostCard";

import "../../app/globals.css";

const Blog = () => {
  const posts = allPosts.sort((a, b) =>
    compareDesc(new Date(a.date), new Date(b.date))
  );
  return (
    

      

        
Developer Blog

        {posts.map((post, idx) => (
          

            

            
          
        ))}
      
    
  );
};

export default Blog;

export type PrimaryLanguage = {
  color: string;
  id: string;
  name: string;
};

export type Repository = {
  description: string;
  forkCount: number;
  id?: number;
  name: string;
  primaryLanguage: PrimaryLanguage;
  stargazerCount: number;
  url: string;
};

type DataProps = {
  viewer: {
    login: string;
    repositories: {
      first: number;
      privacy: string;
      orderBy: { field: string; direction: string };
      nodes: {
        [x: string]: any;
        id: string;
        name: string;
        description: string;
        url: string;
        primaryLanguage: PrimaryLanguage;
        forkCount: number;
        stargazerCount: number;
      };
    };
  };
};

export type ProjectsProps = {
  data: Repository[];
};

export type SvgProps = {
  width: string;
  height: string;
  href?: string;
};

import React from "react";
import { GraphQLClient, gql } from "graphql-request";
import Card from "@/components/Card";
import type { DataProps, Repository } from "@/types";

/**
 *
 * @param
 * @returns displays the list of user's github projects and descriptions
 */

export default async function Projects() {
  const endpoint = "https://api.github.com/graphql";

  if (!process.env.GITHUB_TOKEN) {
    return (
      

        

          

            

              Projects
            
            

              Invalid Github token. Unable to access Github projects.
            
          
        
      
    );
  }
  const graphQLClient = new GraphQLClient(endpoint, {
    headers: {
      authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
    },
  });

  const query = gql`
    {
      viewer {
        login
        repositories(
          first: 20
          privacy: PUBLIC
          orderBy: { field: CREATED_AT, direction: DESC }
        ) {
          nodes {
            id
            name
            description
            url
            primaryLanguage {
              color
              id
              name
            }
            forkCount
            stargazerCount
          }
        }
      }
    }
  `;

  const {
    viewer: {
      repositories: { nodes: data },
    },
  } = await graphQLClient.request(query);

  return (
    <>
      

        

          

            

              Projects
            
            

              List of GitHub projects
            
          
          

            

              {data.map(
                ({
                  id,
                  url,
                  name,
                  description,
                  primaryLanguage,
                  stargazerCount,
                  forkCount,
                }: Repository) => (
                  
                )
              )}
            
          
        
      
    
  );
}

const headerNavLinks = [
{ href: "https://dev.to/blog", title: "Blog" },
{ href: "https://dev.to/projects", title: "Projects" },
{ href: "https://dev.to/about", title: "About" },
];


export default headerNavLinks;

"use client";
import React, { useEffect, useState } from "react";
import Link from "next/link";
import Navbar from "./Navbar";

const Header = () => {
  // useEffect only runs on the client, so now we can safely show the UI
  const [hasMounted, setHasMounted] = useState(false);

  // When mounted on client, now we can show the UI
  // Avoiding hydration mismatch
  // https://www.npmjs.com/package/next-themes#avoid-hydration-mismatch
  useEffect(() => {
    setHasMounted(true);
  }, []);
  if (!hasMounted) {
    return null;
  }

  return (
    

      

        

          
            

              {/* logo */}
              
                

                  
                    Logo
                  
                
              
            
          
        
        
      
    
  );
};

export default Header;

"use client";
import React, { useState } from "react";
import Link from "next/link";
import ThemeChanger from "./ThemeChanger";
import Hamburger from "./Hamburger";
import LetterX from "./LetterX";
import headerNavLinks from "@/data/headerNavLinks";
// names of header links are in
// separate file which allow them to be changed without affecting this component
/**
 *
 * @returns jsx to display the navigation bar
 */
const Navbar = () => {
  const [navShow, setNavShow] = useState(false);

  const onToggleNav = () => {
    setNavShow((status) => {
      if (status) {
        document.body.style.overflow = "auto";
      } else {
        // Prevent scrolling
        document.body.style.overflow = "hidden";
      }
      return !status;
    });
  };

  return (
    

      {/* show horizontal nav link medium or greater width */}
      

        {headerNavLinks.map((link) => (
          
            {link.title}
          
        ))}
      

      

        
          
        
        {/* when mobile menu is open move this div to x = 0
              when mobile menu is closed, move the element to the right by its own width,
              effectively pushing it out of the viewport horizontally.*/}

        

          

            
              {/* X */}
              
            
          
          
        
      
      
    
  );
};

export default Navbar;

"use client";
import React, { useEffect, useState } from "react";
import { useTheme } from "next-themes";
import Moon from "./Moon";
import Sun from "./Sun";

/**
 *
 * @returns jsx to switch based on user touching the moon icon
 */
const ThemeChanger = () => {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => setMounted(true), []);

  if (!mounted) return null;

  return (
    

      {theme === "light" ? (
         setTheme("dark")}
        >
          
        
      ) : (
         setTheme("light")}
        >
          
        
      )}
    
  );
};

export default ThemeChanger;

"use client";

import React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { ThemeProviderProps } from "next-themes/dist/types";

// https://github.com/pacocoursey/next-themes/issues/152#issuecomment-1364280564

export function ThemeProvider(props: ThemeProviderProps) {
  return ;
}

"use client";

import React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { ThemeProviderProps } from "next-themes/dist/types";

// https://github.com/pacocoursey/next-themes/issues/152#issuecomment-1364280564
// needs to be called NextThemesProvider not ThemesProvider
// not sure why
export function Providers(props: ThemeProviderProps) {
  return ;
}

import Header from "@/components/Header";
import { Providers } from "./providers";

{children}. Add the header component before {children}


{children}

const siteMetadata = {
url: "https://yourwebsite.com",
title: "Next.js Coding Starter Blog",
author: "Your name here",
headerTitle: "Developer Blog",
description: "A blog created with Next.js and Tailwind.css",
language: "en-us",
email: "youremail@email.com",
github: "your github link",
linkedin: "your linkedin",
locale: "en-US",
};


module.exports = siteMetadata;

{children}

export const metadata: Metadata = {
title: "Home",
description: "A developer blog using Next JS 13",
};

export const generateMetadata = ({ params }: any) => {
const post = allPosts.find(
(post: any) => post._raw.flattenedPath === params.slug
);
return { title: post?.title, excerpt: post?.excerpt };
};