+
+ );
+};
+
+export default ScrollDown;
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..198fa8d
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/utils/utils";
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-10 px-4 py-2",
+ sm: "h-9 rounded-md px-3",
+ lg: "h-11 rounded-md px-8",
+ icon: "h-10 w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+);
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributesScroll Down!
+
+
+));
+NavigationMenuViewport.displayName =
+ NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = React.forwardRef<
+ React.ElementRef
+ {parser(page.content.rendered, { trim: true })}
+
+
+
+
+ + {post.title.rendered} +
+
+ 
+
+
+
+
+
+
+ Frank Delaguila
+Software Engineer / UX UI Designer
+
+
+ Post Uploaded on: {dateUploaded}
+Modified: {modified}
+
+ {parser(post.content.rendered, { trim: true })}
+
+
+
+
+ {posts.map((post: any) => {
+ return (
+
+ {post.featured_media ? (
+
+ + {post.title.rendered} +
+ + ); + })} +
-
+
+ );
}
diff --git a/src/services/pages.ts b/src/services/pages.ts
new file mode 100644
index 0000000..468bd5c
--- /dev/null
+++ b/src/services/pages.ts
@@ -0,0 +1,25 @@
+import { WORDPRESS_BASE_API, WORDPRESS_POSTS_FIELD_FILTERS, WORDPRESS_POST_FIELD_FILTERS } from '@/utils/common-utils';
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { HYDRATE } from 'next-redux-wrapper';
+
+export const pagesApi: any = createApi({
+ reducerPath: 'pages',
+ baseQuery: fetchBaseQuery({ baseUrl: WORDPRESS_BASE_API }),
+ extractRehydrationInfo(action, { reducerPath }) {
+ if(action.type === HYDRATE) {
+ return action.payload[reducerPath]
+ }
+ },
+ endpoints: (builder) => ({
+ getPages: builder.query({
+ query: () => `/pages${WORDPRESS_POSTS_FIELD_FILTERS}`
+ }),
+ getPage: builder.query({
+ query: (slug) => `/pages${WORDPRESS_POST_FIELD_FILTERS}&slug=${slug}`
+ })
+ })
+});
+
+export const { useGetPagesQuery, useGetPageQuery, util: { getRunningQueriesThunk } } = pagesApi;
+
+export const { getPages, getPage } = pagesApi.endpoints;
\ No newline at end of file
diff --git a/src/services/posts.ts b/src/services/posts.ts
new file mode 100644
index 0000000..28cfa32
--- /dev/null
+++ b/src/services/posts.ts
@@ -0,0 +1,28 @@
+import { WORDPRESS_BASE_API, WORDPRESS_POSTS_FIELD_FILTERS, WORDPRESS_POST_FIELD_FILTERS } from '@/utils/common-utils';
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { HYDRATE } from 'next-redux-wrapper';
+
+export const postsApi: any = createApi({
+ reducerPath: 'posts',
+ baseQuery: fetchBaseQuery({ baseUrl: WORDPRESS_BASE_API }),
+ extractRehydrationInfo(action, { reducerPath }) {
+ if(action.type === HYDRATE) {
+ return action.payload[reducerPath]
+ }
+ },
+ endpoints: (builder) => ({
+ getPostImage: builder.query({
+ query: (imageID) => `/media/${imageID}`
+ }),
+ getPosts: builder.query({
+ query: () => `/posts${WORDPRESS_POSTS_FIELD_FILTERS}`
+ }),
+ getPost: builder.query({
+ query: (slug) => `/posts${WORDPRESS_POST_FIELD_FILTERS}&slug=${slug}`
+ })
+ })
+});
+
+export const { useGetPostsQuery, useGetPostQuery, useGetPostImageQuery, util: { getRunningQueriesThunk } } = postsApi;
+
+export const { getPosts, getPost, getPostImage } = postsApi.endpoints;
\ No newline at end of file
diff --git a/src/styles/globals.css b/src/styles/globals.css
index fd81e88..25ba4b3 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,27 +1,76 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
-
-:root {
- --foreground-rgb: 0, 0, 0;
- --background-start-rgb: 214, 219, 220;
- --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
+
+@layer base {
:root {
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
+ --background: 0 0% 100%;
+ --foreground: 240 10% 3.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 240 10% 3.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 240 10% 3.9%;
+ --primary: 346.8 77.2% 49.8%;
+ --primary-foreground: 355.7 100% 97.3%;
+ --secondary: 240 4.8% 95.9%;
+ --secondary-foreground: 240 5.9% 10%;
+ --muted: 240 4.8% 95.9%;
+ --muted-foreground: 240 3.8% 46.1%;
+ --accent: 240 4.8% 95.9%;
+ --accent-foreground: 240 5.9% 10%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 240 5.9% 90%;
+ --input: 240 5.9% 90%;
+ --ring: 346.8 77.2% 49.8%;
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: 0 0% 8%;
+ --foreground: 0 0% 95%;
+ --card: 24 9.8% 10%;
+ --card-foreground: 0 0% 95%;
+ --popover: 0 0% 9%;
+ --popover-foreground: 0 0% 95%;
+ --primary: 346.8 77.2% 49.8%;
+ --primary-foreground: 355.7 100% 97.3%;
+ --secondary: 240 3.7% 15.9%;
+ --secondary-foreground: 0 0% 98%;
+ --muted: 0 0% 15%;
+ --muted-foreground: 240 5% 64.9%;
+ --accent: 12 6.5% 15.1%;
+ --accent-foreground: 0 0% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 0 85.7% 97.3%;
+ --border: 240 3.7% 15.9%;
+ --input: 240 3.7% 15.9%;
+ --ring: 346.8 77.2% 49.8%;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ font-family: 'Roboto', 'Arial', sans-serif;
+ }
+ body {
+ @apply bg-background text-foreground;
}
}
-body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(
- to bottom,
- transparent,
- rgb(var(--background-end-rgb))
- )
- rgb(var(--background-start-rgb));
-}
+@layer utilities {
+ .post-content h2.wp-block-heading {
+ @apply text-4xl font-bold mb-4 text-primary;
+ }
+ .post-content h3.wp-block-heading {
+ @apply text-2xl font-bold mb-4;
+ }
+ .post-content img, video {
+ @apply block w-full mb-10;
+ }
+
+ .post-content p {
+ @apply mb-4 text-lg text-foreground leading-8;
+ }
+}
\ No newline at end of file
diff --git a/src/utils/common-utils.ts b/src/utils/common-utils.ts
new file mode 100644
index 0000000..297de66
--- /dev/null
+++ b/src/utils/common-utils.ts
@@ -0,0 +1,3 @@
+export const WORDPRESS_BASE_API = 'https://www.frankdelaguila.com/wp-json/wp/v2';
+export const WORDPRESS_POSTS_FIELD_FILTERS = '?_fields=id,slug,title,_links,featured_media';
+export const WORDPRESS_POST_FIELD_FILTERS = '?_fields=id,slug,title,content,date,modified';
\ No newline at end of file
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
new file mode 100644
index 0000000..ec79801
--- /dev/null
+++ b/src/utils/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1af3b8f..c397cd8 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,20 +1,80 @@
-import type { Config } from 'tailwindcss'
-
-const config: Config = {
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ darkMode: ["class"],
content: [
- './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
- './src/components/**/*.{js,ts,jsx,tsx,mdx}',
- './src/app/**/*.{js,ts,jsx,tsx,mdx}',
- ],
+ './pages/**/*.{ts,tsx}',
+ './components/**/*.{ts,tsx}',
+ './app/**/*.{ts,tsx}',
+ './src/**/*.{ts,tsx}',
+ ],
theme: {
+ fontFamily: {
+ 'roboto': ['Roboto', 'Arial', 'ui-sans-serif', 'system,ui', 'sans-serif'],
+ 'sans': ['Ubuntu', 'ui-sans-serif', 'system,ui', 'sans-serif']
+ },
+ container: {
+ center: true,
+ padding: "2rem",
+ screens: {
+ "2xl": "1400px",
+ },
+ },
extend: {
- backgroundImage: {
- 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
- 'gradient-conic':
- 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+ colors: {
+ border: "hsl(var(--border))",
+ input: "hsl(var(--input))",
+ ring: "hsl(var(--ring))",
+ background: "hsl(var(--background))",
+ foreground: "hsl(var(--foreground))",
+ primary: {
+ DEFAULT: "hsl(var(--primary))",
+ foreground: "hsl(var(--primary-foreground))",
+ },
+ secondary: {
+ DEFAULT: "hsl(var(--secondary))",
+ foreground: "hsl(var(--secondary-foreground))",
+ },
+ destructive: {
+ DEFAULT: "hsl(var(--destructive))",
+ foreground: "hsl(var(--destructive-foreground))",
+ },
+ muted: {
+ DEFAULT: "hsl(var(--muted))",
+ foreground: "hsl(var(--muted-foreground))",
+ },
+ accent: {
+ DEFAULT: "hsl(var(--accent))",
+ foreground: "hsl(var(--accent-foreground))",
+ },
+ popover: {
+ DEFAULT: "hsl(var(--popover))",
+ foreground: "hsl(var(--popover-foreground))",
+ },
+ card: {
+ DEFAULT: "hsl(var(--card))",
+ foreground: "hsl(var(--card-foreground))",
+ },
+ },
+ borderRadius: {
+ lg: "var(--radius)",
+ md: "calc(var(--radius) - 2px)",
+ sm: "calc(var(--radius) - 4px)",
+ },
+ keyframes: {
+ "accordion-down": {
+ from: { height: 0 },
+ to: { height: "var(--radix-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--radix-accordion-content-height)" },
+ to: { height: 0 },
+ },
+ },
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
},
},
},
- plugins: [],
-}
-export default config
+ plugins: [require("tailwindcss-animate")],
+}
\ No newline at end of file
- Get started by editing
- src/pages/index.tsx
-
-
- By{' '}
-
+
+
-
-
-
-
-
-
-
-
- )
+ - Docs{' '} - - -> - -
-- Find in-depth information about Next.js features and API. -
- - - -- Learn{' '} - - -> - -
-- Learn about Next.js in an interactive course with quizzes! -
- - - -- Templates{' '} - - -> - -
-- Discover and deploy boilerplate example Next.js projects. -
- - - -- Deploy{' '} - - -> - -
-- Instantly deploy your Next.js site to a shareable URL with Vercel. -
- -