Merge pull request #2 from umka-co/dev

Release 0.3.5

.eslintrc.json

@@ -1,3 +1,6 @@
 {
- "extends": "next/core-web-vitals"
+ "extends": "next/core-web-vitals",
+ "rules": {
+ "import/no-cycle": "error"
+ }
 }

package.json

@@ -1,7 +1,7 @@
 {
  "name": "nextjs-website-starter",
- "version": "0.1.1",
- "description": "Some public website using NextJS",
+ "version": "0.3.5",
+ "description": "TODO: Some public website using NextJS",
  "private": true,
  "author": {
  "name": "Anton Karpenko",

src/app/(main)/contact/BlockContactForm.tsx

@@ -7,8 +7,8 @@ const BlockContactForm = () => {
  <>
  <Typo variant="header2">Contact form</Typo>
  <Typo variant="paragraph">
- If you have any inquiries or feedback concerning the <strong>{APP_NAME}</strong> software, please don&apos;t
- hesitate to reach out to us. Simply complete the form below, and we&apos;ll get back to you promptly.
+ If you have any inquiries or feedback concerning the <strong>{APP_NAME}</strong>, please don&apos;t hesitate to
+ reach out to us. Simply complete the form below, and we&apos;ll get back to you promptly.
  </Typo>
  <ContactForm />
  </>

src/app/(main)/dev/page.tsx

@@ -1,8 +1,14 @@
+'use client';
 import { useMemo } from 'react';
 import { redirect } from 'next/navigation';
 import { Typo, Wrapper } from '@/components';
 import { IS_DEBUG } from '@/config';
 
+/**
+ * Renders a "DevTools" page that is only available in development mode (IS_DEBUG == true)
+ * You can use this page to test and debug various components and styles
+ * @page DevTools
+ */
 const DevToolsPage = () => {
  const filler = useMemo(() => <Typo style={{ opacity: 0.3 }}>{'Some text check margins. '.repeat(12)}</Typo>, []);
 

src/app/(main)/download/BlockDownloadButtons.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { useOnMobile } from '@/hooks';
+import { useIsMobile } from '@/hooks';
 import { Stack } from '@/components';
 import DownloadButton from '@/components/DownloadButton';
 
@@ -8,8 +8,8 @@ import DownloadButton from '@/components/DownloadButton';
  * @component BlockDownloadButtons
  */
 const BlockDownloadButtons = () => {
- const onMobile = useOnMobile();
- const direction = onMobile ? 'column' : 'row';
+ const isMobile = useIsMobile();
+ const direction = isMobile ? 'column' : 'row';
  return (
  <Stack direction={direction} padding="1rem" gap="1rem">
  <DownloadButton file="exe">Download EXE</DownloadButton>

src/app/(main)/home/page.tsx

@@ -1,21 +1,21 @@
 import { APP_NAME, PUBLIC_URL } from '@/config';
 import { Button, Icon, SocialMedia, Stack, Typo, Wrapper } from '@/components';
+import { ICONS, IconName } from '@/components/Icon';
 import DownloadButton from '@/components/DownloadButton';
 import Video from '@/components/Video';
 import Picture from '@/components/Picture';
-import { ICONS } from '../../../components/Icon/icons';
 
 /**
  * Home page content
  * @page Home
  */
 const HomePage = () => {
- const appName = <strong>{APP_NAME}</strong>;
-
  return (
  <Wrapper tag="article">
- <Typo variant="header1">Header 1 Style</Typo>
- <Typo variant="paragraph">{'Paragraph of text'.repeat(10)}</Typo>
+ <Typo variant="header1">{APP_NAME}</Typo>
+ <Typo variant="paragraph">
+ <strong>{APP_NAME}</strong> {'Paragraph of text. '.repeat(10)}
+ </Typo>
  <Typo variant="header3">Header 2 Style</Typo>
  <Typo variant="list">
  <li>
@@ -29,35 +29,54 @@ const HomePage = () => {
  </li>
  </Typo>
  <Typo variant="header3">Header 3 Style</Typo>
- <Typo variant="paragraph">{'Paragraph of text again'.repeat(10)}</Typo>
+ <Typo variant="paragraph">{'Paragraph of text again. '.repeat(10)}</Typo>
 
  <Typo variant="header1">Button</Typo>
  <Stack alignItems="center">
- <Button variant="contained">Variant Contained</Button>
- <Button variant="outlined">Variant Outlined</Button>
- <Button variant="text">Variant Text</Button>
+ <Stack direction="row">
+ <Button variant="contained">Variant Contained</Button>
+ <Button disabled variant="contained">
+ Contained Disabled
+ </Button>
+ </Stack>
+ <Stack direction="row">
+ <Button variant="outlined">Variant Outlined</Button>
+ <Button disabled variant="outlined">
+ Outlined Disabled
+ </Button>
+ </Stack>
+ <Stack direction="row">
+ <Button variant="text">Variant Text</Button>
+ <Button disabled variant="text">
+ Text Disabled
+ </Button>
+ </Stack>
  <Stack direction="row" alignItems="center">
  <Typo>Variant Icon:</Typo>
  <Button variant="icon" icon="menu" />
  <Button variant="icon" icon="close" />
- <Button variant="icon" icon="SOME_INVALID_NAME" />
+ {/* <Button variant="icon" icon="SOME_INVALID_NAME" /> */}
+ <Button disabled variant="icon" icon="close" />
  </Stack>
+
  <DownloadButton>Download Button</DownloadButton>
  </Stack>
 
  <Typo variant="header1">Icon</Typo>
  <Stack direction="row" alignItems="center">
  {Object.keys(ICONS).map((icon) => (
- <Icon key={icon} icon={icon} size="2rem" />
+ <Icon key={icon} icon={icon as IconName} size="2rem" />
  ))}
  </Stack>
 
  <Typo variant="header2">Picture</Typo>
  <Stack alignItems="center" padding="1rem 0">
+ <Picture variant="first" width={600} height={315} />
  <Picture src="/img/favicon/256x256.png" width={256} height={256} />
+ <Picture variant="second" />
  </Stack>
 
- <Typo variant="paragraph">{'Another paragraph of text'.repeat(10)}</Typo>
+ <Typo variant="paragraph">{'Another paragraph of text. '.repeat(10)}</Typo>
 
  <Typo variant="header1">Video</Typo>
  <Stack alignItems="center" padding="1rem 0">
@@ -74,7 +93,7 @@ const HomePage = () => {
  * MetaData for the page
  */
 export const metadata = {
- title: `Free Caps Lock, Num Lock, Scroll Lock Software Indicator - ${APP_NAME}`,
+ title: `TODO: Something cool here - ${APP_NAME}`,
  alternates: {
  canonical: PUBLIC_URL,
  },

src/app/(main)/layout.tsx

@@ -1,9 +1,14 @@
-import { APP_NAME, PUBLIC_URL } from '@/config';
 import { FunctionComponent, PropsWithChildren } from 'react';
 import type { Metadata, Viewport } from 'next';
+import { APP_NAME, PUBLIC_URL } from '@/config';
 import { OPEN_GRAPH_DEFAULT } from '@/app/config';
-import { FONTS } from '@/layout/fonts';
-import { Advertising, Analytics, Footer, Header, MobileOrDesktop } from '@/layout/components';
+import { FONTS } from '@/style';
+import Analytics from '@/components/Analytics';
+import Advertising from '@/components/Advertising';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import MobileOrDesktop from '@/components/MobileOrDesktop';
+import StylesInjector from '@/components/StylesInjector';
 import './main.css';
 
 export const metadata: Metadata = {
@@ -21,13 +26,15 @@ export const viewport: Viewport = {
 };
 
 /**
- * Layout for `(main)` styled pages, renders head and body tags
+ * Layout for `(main)` styled pages, renders head and body tags.
+ * Applies colors and font(s) to the global CSS variables.
  * @layout Main
  */
-const StyledLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
+const MainLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
  return (
  <>
  <head>
+ <StylesInjector />
  <Analytics />
  <Advertising />
  </head>
@@ -38,11 +45,11 @@ const StyledLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
  <Footer />
 
  <MobileOrDesktop
- // Remove this injector if you don't use selectors .onMobile and .onDesktop in CSS styles
+ // TODO: Remove this injector if you don't use .isMobile and .isDesktop classes in your CSS styles
  />
  </body>
  </>
  );
 };
 
-export default StyledLayout;
+export default MainLayout;

src/app/(main)/legal/privacy-policy/page.tsx

@@ -1,7 +1,7 @@
 import { APP_NAME, PUBLIC_URL } from '@/config';
 import { Link, Typo, Wrapper } from '@/components';
 
-const PRIVACY_POLICY_DATE = '2024-01-05'; // TODO: put your date here or use today's date
+const PRIVACY_POLICY_DATE = 'TODO: 2024-01-05'; // TODO: put your date here or use today's date
 
 /**
  * Content of "Privacy Policy" page

src/app/(main)/main.css

@@ -1,6 +1,28 @@
+/*******************************************************************************
+
+ Styles used by the Main layout. Applied to `/src/app/(main)/...` pages. 
+
+*******************************************************************************/
+
+:root {
+ /* We will sync --color-xxx and --font-xxx values with COLORS and FONTS during the Main layout loading */
+ /* Note --font-xxx values are set by Next.js fonts, see `/src/style/fonts.ts` file for details */
+ /* TODO: Better set values matching JS configs here, otherwise server side components may have wrong styles */
+
+ --color-text: #222222;
+ --color-background: #ffffff;
+ --color-headerAndFooter: #fff5ed;
+
+ --color-primary: #bf2a1d;
+ --color-secondary: #404040;
+ --color-success: #008000;
+ --color-warning: #bbbb00;
+ --color-error: #ff0000;
+}
+
 body {
- margin: unset;
- max-width: unset;
+ /* margin: 0 auto;
+ max-width: 1920px; */
 }
 
 a {

src/app/(unstyled)/layout.tsx

@@ -1,6 +1,7 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
-import { Analytics } from '@/layout/components';
+import Analytics from '@/components/Analytics';
 import './unstyled.css';
+import StylesInjector from '../../components/StylesInjector';
 
 /**
  * Layout for (unstyled) pages, renders head and body tags
@@ -10,6 +11,7 @@ const UnstyledLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
  return (
  <>
  <head>
+ <StylesInjector />
  <Analytics />
  </head>
  <body>

src/app/(unstyled)/unstyled.css

@@ -1,6 +1,12 @@
+/*******************************************************************************
+
+ Styles used by the Unstyled layout. Applied to `/src/app/(unstyled)/...` pages. 
+
+*******************************************************************************/
+
 body {
- margin: 0 auto;
- max-width: 800px;
+ /* margin: 0 auto;
+ max-width: 800px; */
 }
 
 a {

src/app/config.ts

@@ -1,15 +1,21 @@
+import type { Metadata } from 'next';
 import { APP_NAME, PUBLIC_URL } from '@/config';
 
-export const OPEN_GRAPH_DEFAULT = {
+export const OPEN_GRAPH_DEFAULT: Metadata['openGraph'] = {
  url: PUBLIC_URL,
 
  // TODO: Put your texts here
  siteName: `${APP_NAME} Website`,
  title: APP_NAME,
- description: `Opengraph description for ${APP_NAME}, put nice Promo here`,
+ description: `TODO: OpenGraph description for ${APP_NAME}, put nice Promo here`,
 
  // TODO: Replace with your own images and dimensions
  images: [
+ {
+ url: `${PUBLIC_URL}/img/social/umka-1200-630.png`,
+ width: 1200,
+ height: 630,
+ },
  {
  url: `${PUBLIC_URL}/img/social/icon-256x256.png`,
  width: 256,

src/app/default.css

@@ -0,0 +1,25 @@
+/*******************************************************************************
+
+ Basic styles, shared by (main) and (unstyled) layouts 
+
+*******************************************************************************/
+* {
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+ html {
+ color-scheme: dark;
+ }
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}