) => {
+ return (
+ {props.slug}
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore eos
+ earum doloribus, quibusdam magni accusamus vitae! Nisi, sunt! Aliquam
+ iste expedita cupiditate a quidem culpa eligendi, aperiam saepe dolores
+ ipsum!
+
+
+ );
+};
+
+export default Blog;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
new file mode 100644
index 0000000..83a12da
--- /dev/null
+++ b/src/pages/index.tsx
@@ -0,0 +1,186 @@
+import { useRouter } from 'next/router';
+
+import { Meta } from '@/layouts/Meta';
+import { Main } from '@/templates/Main';
+
+const Index = () => {
+ const router = useRouter();
+
+ return (
+
+
+
+ Boilerplate code for your Nextjs project with Tailwind CSS
+
+
+
+ π
+ {' '}
+ Next.js Boilerplate is a starter code for your Next js project by
+ putting developer experience first .{' '}
+
+ β‘οΈ
+ {' '}
+ Made with Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged,
+ VSCode, Netlify, PostCSS, Tailwind CSS.
+
+ Next js Boilerplate Features
+ Developer experience first:
+
+
+
+ π₯
+ {' '}
+
+ Next.js
+ {' '}
+ for Static Site Generator
+
+
+
+ π¨
+ {' '}
+ Integrate with{' '}
+
+ Tailwind CSS
+
+
+
+
+ π
+ {' '}
+ PostCSS for processing Tailwind CSS
+
+
+
+ π
+ {' '}
+ Type checking Typescript
+
+
+
+ βοΈ
+ {' '}
+ Linter with{' '}
+
+ ESLint
+
+
+
+
+ π
+ {' '}
+ Code Formatter with{' '}
+
+ Prettier
+
+
+
+
+ π¦
+ {' '}
+ Husky for Git Hooks
+
+
+
+ π«
+ {' '}
+ Lint-staged for running linters on Git staged files
+
+
+
+ π
+ {' '}
+ VSCode configuration: Debug, Settings, Tasks and extension for
+ PostCSS, ESLint, Prettier, TypeScript
+
+
+
+ π€
+ {' '}
+ SEO metadata, JSON-LD and Open Graph tags with Next SEO
+
+
+
+ βοΈ
+ {' '}
+
+ Bundler Analyzer
+
+
+
+
+ π
+ {' '}
+ Include a FREE minimalist theme
+
+
+
+ π―
+ {' '}
+ Maximize lighthouse score
+
+
+ Built-in feature from Next.js:
+
+
+
+ β
+ {' '}
+ Minify HTML & CSS
+
+
+
+ π¨
+ {' '}
+ Live reload
+
+
+
+ β
+ {' '}
+ Cache busting
+
+
+ Our Stater code Philosophy
+
+ Minimal code
+ SEO-friendly
+
+
+ π
+ {' '}
+ Production-ready
+
+
+
+ Check our GitHub project for more information about{' '}
+
+ Nextjs Boilerplate
+
+ . You can also browse our{' '}
+
+ Premium NextJS Templates
+ {' '}
+ on our website to support this project.
+
+
+ );
+};
+
+export default Index;
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5..0000000
--- a/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-///
- <>Error 404} />
-
- )
-}
-
-export default Routes
diff --git a/src/serviceWorker.ts b/src/serviceWorker.ts
deleted file mode 100644
index b5e5fda..0000000
--- a/src/serviceWorker.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
-
-const isLocalhost = Boolean(
- window.location.hostname === 'localhost' ||
- // [::1] is the IPv6 localhost address.
- window.location.hostname === '[::1]' ||
- // 127.0.0.0/8 are considered localhost for IPv4.
- window.location.hostname.match(
- /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
- ),
-)
-
-type Config = {
- onSuccess?: (registration: ServiceWorkerRegistration) => void
- onUpdate?: (registration: ServiceWorkerRegistration) => void
-}
-
-export function register(config?: Config) {
- if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
- // The URL constructor is available in all browsers that support SW.
- const publicUrl = new URL(
- process.env.PUBLIC_URL as string,
- window.location.href,
- )
- if (publicUrl.origin !== window.location.origin) {
- // Our service worker won't work if PUBLIC_URL is on a different origin
- // from what our page is served on. This might happen if a CDN is used to
- // serve assets; see https://github.com/facebook/create-react-app/issues/2374
- return
- }
-
- window.addEventListener('load', () => {
- const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
-
- if (isLocalhost) {
- // This is running on localhost. Let's check if a service worker still exists or not.
- checkValidServiceWorker(swUrl, config)
-
- // Add some additional logging to localhost, pointing developers to the
- // service worker/PWA documentation.
- navigator.serviceWorker.ready.then(() => {
- console.log(
- 'This web app is being served cache-first by a service ' +
- 'worker. To learn more, visit https://bit.ly/CRA-PWA',
- )
- })
- } else {
- // Is not localhost. Just register service worker
- registerValidSW(swUrl, config)
- }
- })
- }
-}
-
-function registerValidSW(swUrl: string, config?: Config) {
- navigator.serviceWorker
- .register(swUrl)
- .then(registration => {
- registration.onupdatefound = () => {
- const installingWorker = registration.installing
- if (installingWorker == null) {
- return
- }
- installingWorker.onstatechange = () => {
- if (installingWorker.state === 'installed') {
- if (navigator.serviceWorker.controller) {
- // At this point, the updated precached content has been fetched,
- // but the previous service worker will still serve the older
- // content until all client tabs are closed.
- console.log(
- 'New content is available and will be used when all ' +
- 'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
- )
-
- // Execute callback
- if (config && config.onUpdate) {
- config.onUpdate(registration)
- }
- } else {
- // At this point, everything has been precached.
- // It's the perfect time to display a
- // "Content is cached for offline use." message.
- console.log('Content is cached for offline use.')
-
- // Execute callback
- if (config && config.onSuccess) {
- config.onSuccess(registration)
- }
- }
- }
- }
- }
- })
- .catch(error => {
- console.error('Error during service worker registration:', error)
- })
-}
-
-function checkValidServiceWorker(swUrl: string, config?: Config) {
- // Check if the service worker can be found. If it can't reload the page.
- fetch(swUrl, {
- headers: { 'Service-Worker': 'script' },
- })
- .then(response => {
- // Ensure service worker exists, and that we really are getting a JS file.
- const contentType = response.headers.get('content-type')
- if (
- response.status === 404 ||
- (contentType != null && contentType.indexOf('javascript') === -1)
- ) {
- // No service worker found. Probably a different app. Reload the page.
- navigator.serviceWorker.ready.then(registration => {
- registration.unregister().then(() => {
- window.location.reload()
- })
- })
- } else {
- // Service worker found. Proceed as normal.
- registerValidSW(swUrl, config)
- }
- })
- .catch(() => {
- console.log(
- 'No internet connection found. App is running in offline mode.',
- )
- })
-}
-
-export function unregister() {
- if ('serviceWorker' in navigator) {
- navigator.serviceWorker.ready
- .then(registration => {
- registration.unregister()
- })
- .catch(error => {
- console.error(error.message)
- })
- }
-}
diff --git a/src/setupTests.ts b/src/setupTests.ts
deleted file mode 100644
index 264828a..0000000
--- a/src/setupTests.ts
+++ /dev/null
@@ -1 +0,0 @@
-import '@testing-library/jest-dom/extend-expect'
diff --git a/src/style/assets/fonts/Agustina.woff b/src/style/assets/fonts/Agustina.woff
deleted file mode 100644
index 597311b..0000000
Binary files a/src/style/assets/fonts/Agustina.woff and /dev/null differ
diff --git a/src/style/color.ts b/src/style/color.ts
deleted file mode 100644
index e702ca2..0000000
--- a/src/style/color.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const danger = '#c20000'
-export const success = '#1f9100'
-export const text = '#989898'
diff --git a/src/style/global.ts b/src/style/global.ts
deleted file mode 100644
index 56ba967..0000000
--- a/src/style/global.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import styled from 'styled-components'
-
-export const Container = styled.div`
- display: flex;
- width: 100%;
- height: 100%;
- background: ${({ theme }) => theme.primary};
-`
diff --git a/src/style/index.less b/src/style/index.less
deleted file mode 100644
index 8daba7c..0000000
--- a/src/style/index.less
+++ /dev/null
@@ -1,11 +0,0 @@
-@import "~antd/dist/antd.less";
-
-
-@font-face {
- font-family: "Agustina Regular";
- font-style: normal;
- font-weight: normal;
- src: local("Agustina Regular"),
- url("./assets/fonts/Agustina.woff") format("woff");
- font-display: swap;
-}
\ No newline at end of file
diff --git a/src/style/styled.d.ts b/src/style/styled.d.ts
deleted file mode 100644
index afd41ea..0000000
--- a/src/style/styled.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import 'styled-components'
-
-declare module 'styled-components' {
- export interface DefaultTheme {
- primary: string
- secondary: string
- background: string
- }
-}
diff --git a/src/style/theme.ts b/src/style/theme.ts
deleted file mode 100644
index da77812..0000000
--- a/src/style/theme.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export default {
- light: {
- primary: '#fff',
- secondary: '#556',
- background: '#dddddd',
- },
- dark: {
- primary: '#444',
- secondary: '#fff',
- background: '#333',
- },
-}
diff --git a/src/style/themes/dark/index.less b/src/style/themes/dark/index.less
deleted file mode 100644
index b1775e0..0000000
--- a/src/style/themes/dark/index.less
+++ /dev/null
@@ -1 +0,0 @@
-@import "~antd/dist/antd.dark.css";
\ No newline at end of file
diff --git a/src/style/themes/dark/index.tsx b/src/style/themes/dark/index.tsx
deleted file mode 100644
index fa7f569..0000000
--- a/src/style/themes/dark/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import "./index.less";
-import React from "react"
-
-const DarkTheme = () => <>;
-export default DarkTheme;
\ No newline at end of file
diff --git a/src/style/themes/light/index.less b/src/style/themes/light/index.less
deleted file mode 100644
index bc8c818..0000000
--- a/src/style/themes/light/index.less
+++ /dev/null
@@ -1 +0,0 @@
-@import "~antd/dist/antd.css";
\ No newline at end of file
diff --git a/src/style/themes/light/index.tsx b/src/style/themes/light/index.tsx
deleted file mode 100644
index a98cf82..0000000
--- a/src/style/themes/light/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import "./index.less";
-import React from "react"
-
-const LightTheme = () => <>;
-export default LightTheme;
\ No newline at end of file
diff --git a/src/style/themes/theme-provider.tsx b/src/style/themes/theme-provider.tsx
deleted file mode 100644
index b068765..0000000
--- a/src/style/themes/theme-provider.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { lazy, Suspense } from "react";
-import { useTheme } from "./use-theme";
-
-const DarkTheme = lazy(() => import("./dark"));
-const LightTheme = lazy(() => import("./light"));
-
-export const ThemeProvider: React.FC<{ children?: any }> = ({ children }) => {
- const [darkMode] = useTheme();
-
- return (
- <>
- (getDarkMode);
-
- useEffect(() => {
- const initialValue = getDarkMode();
- if (initialValue !== darkMode) {
- localStorage.setItem(DARK_MODE, JSON.stringify(darkMode) );
- window.location.reload();
- }
- }, [darkMode]);
-
- return ([darkMode, setDarkMode] )as any;
-
-};
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..6293564
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,21 @@
+@tailwind base;
+
+a {
+ @apply text-blue-700;
+}
+
+a:hover {
+ @apply border-b-2 border-blue-700;
+}
+
+@tailwind components;
+
+@tailwind utilities;
+
+.content p {
+ @apply my-6;
+}
+
+.content ul {
+ @apply my-6;
+}
diff --git a/src/templates/Main.stories.tsx b/src/templates/Main.stories.tsx
new file mode 100644
index 0000000..c44bd19
--- /dev/null
+++ b/src/templates/Main.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { Main } from './Main';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta = {
+ title: 'Example/Main',
+ component: Main,
+ tags: ['autodocs'],
+ parameters: {
+ // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+ layout: 'fullscreen',
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const MainWithReactComponent: Story = {
+ args: {
+ children: Children node
,
+ },
+};
+
+export const MainWithString: Story = {
+ args: {
+ children: 'String',
+ },
+};
+
+// More on interaction testing: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing
+export const MainWithHomeLink: Story = {
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const loginButton = await canvas.getByRole('link', {
+ name: /Home/i,
+ });
+
+ await userEvent.click(loginButton);
+ },
+};
diff --git a/src/templates/Main.test.tsx b/src/templates/Main.test.tsx
new file mode 100644
index 0000000..6f18940
--- /dev/null
+++ b/src/templates/Main.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen, within } from '@testing-library/react';
+
+import { Main } from './Main';
+
+describe('Main template', () => {
+ describe('Render method', () => {
+ it('should have 3 menu items', () => {
+ render({null} );
+
+ const menuItemList = screen.getAllByRole('listitem');
+
+ expect(menuItemList).toHaveLength(4);
+ });
+
+ it('should have a link to support creativedesignsguru.com', () => {
+ render({null} );
+
+ const copyrightSection = screen.getByText(/Β© Copyright/);
+ const copyrightLink = within(copyrightSection).getByRole('link');
+
+ /*
+ * PLEASE READ THIS SECTION
+ * We'll really appreciate if you could have a link to our website
+ * The link doesn't need to appear on every pages, one link on one page is enough.
+ * Thank you for your support it'll mean a lot for us.
+ */
+ expect(copyrightLink).toHaveAttribute(
+ 'href',
+ 'https://creativedesignsguru.com'
+ );
+ });
+ });
+});
diff --git a/src/templates/Main.tsx b/src/templates/Main.tsx
new file mode 100644
index 0000000..26a01d3
--- /dev/null
+++ b/src/templates/Main.tsx
@@ -0,0 +1,77 @@
+import Link from 'next/link';
+import type { ReactNode } from 'react';
+
+import { AppConfig } from '@/utils/AppConfig';
+
+type IMainProps = {
+ meta: ReactNode;
+ children: ReactNode;
+};
+
+const Main = (props: IMainProps) => (
+
+ {props.meta}
+
+
+
+
+
{props.children}
+
+
+ Β© Copyright {new Date().getFullYear()} {AppConfig.title}. Made with{' '}
+ CreativeDesignsGuru .
+ {/*
+ * PLEASE READ THIS SECTION
+ * I'm an indie maker with limited resources and funds, I'll really appreciate if you could have a link to my website.
+ * The link doesn't need to appear on every pages, one link on one page is enough.
+ * For example, in the `About` page. Thank you for your support, it'll mean a lot to me.
+ */}
+
+
+
+
+
+