cllk v2.1.67
Este repo necesita las siguientes configuraciones
Se requiere usar nextjs para esto
En el _document.tsx se agregara lo suguiente
import { Html, Head, Main, NextScript } from "next/document";
import { HEAD } from "cllk";
import { BODY } from "cllk";
export default function Document() {
return (
<Html lang="en">
<Head>
<HEAD dark="rgb(24,24,17)" light="rgb(244,244,245)" />
</Head>
<BODY>
<Main />
<NextScript />
</BODY>
</Html>
);
}
- Para la Head recibe 2 parametros dark y light que son colores para que la pwa funcione, tambien cuenta con los siguientes
En el _app.tsx se agregara los siguiente
import type { AppProps } from "next/app";
import "react-toastify/dist/ReactToastify.css";
import { Provider } from "cllk";
export default function App({ Component, pageProps }: AppProps) {
return (
<Provider>
<Component {...pageProps} />
</Provider>
);
}
Provider viene con los siguiente
- Solved Para evitar errores de hidratacion en el codigo y habilita el botton de InstallApp
- CacheProvider, para administrar el estado con cache y refrescado en caso de ser necesario
- LocaleProvider que administra el idoma con localsotrage
- StyleProvider Administra la funcion de cambiar los temas
- MessageProvider administra los mensajes de ui para informacion
- GoogleProvider administra el outh google
- UserProvider que administra el usuario y sesion activa
Variables de entorno
Para este caso se necesitara las siguientes varibles con el fin del correcto funcionamiento de la pagina web
Las varaibles son las siguientes
//variables nomales
NEXT_PUBLIC_NAME="LLampukaq Tecnology"
NEXT_PUBLIC_ENVIROMENT=DEVELOPMENT
NEXT_PUBLIC_REALM=example
NODE_VERSION=16.16.0
NEXT_PUBLIC_PAYPAL=test
NEXT_PUBLIC_GOOGLE=example
NEXT_PUBLIC_DOMAIN=http://localhost:3000/
NEXT_PUBLIC_IMAGE_OPTIMIZATION=http://localhost:3002
//variables de cloudinary en caso de false, las demas no son necesarias
NEXT_PUBLIC_CLOUDINARY_KEY=""
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=""
NEXT_PUBLIC_CLOUD_NAME=""
Pwa Config
Se necesita las carpeta icons con los siguietens iconos
- logo192.png
- logo184.png
- logo512.png
Y una caperta de sreenshot con formato jpg, solamente este formato es valido y la relacion de aspecto acorde a cada dispositivo
- desktop1.jpg
- desktop2.jpg
- desktop3.jpg
- desktop4.jpg
- mobile1.jpg
- mobile2.jpg
- mobile3.jpg
- mobile4.jpg
En el componente home index.tsx en la raiz de pages se necesatia agregar el siguiente codigo
import path from "path";
import fs from "fs/promises";
export default function Home() {
return <h1>Home<>;
}
export async function getStaticProps() {
await fs.writeFile(
path.join(__dirname, "../../../public/manifest.json"),
JSON.stringify(pwa)
);
return {
props: {},
};
}
- Nota: el archivo de manifest.json no es necesario que este creado, automaticamente lo creara por ti
<NavbarPrimary.Container
title={<H1 className="-skew-x-12">{"title"}</H1>}
button={<Button center>Hola</Button>}
>
<NavbarPrimary.MenuItem title="Products">
<NavbarPrimary.SubItem
href="/app"
title="Application"
subTitle="Know Apps"
/>
<NavbarPrimary.SubItem
href="/#prices"
subTitle="Know our plans"
title="Suscription"
/>
</NavbarPrimary.MenuItem>
<NavbarPrimary.MenuItem title="Development">
<NavbarPrimary.SubItem
href="/editor"
subTitle="Use editor and export html,css"
title="Editor"
/>
<NavbarPrimary.SubItem
href="/development"
subTitle="Use our Api to connect App"
title="Api Developement"
/>
</NavbarPrimary.MenuItem>
<NavbarPrimary.MenuItem title="About Us">
<NavbarPrimary.SubItem
href="/teem"
subTitle="Get to know us better"
title="The Team"
/>
<NavbarPrimary.SubItem
href="/company"
subTitle="Since 2021"
title="The Company"
/>
<NavbarPrimary.SubItem
href="/mission"
subTitle="Improve small businesses"
title="Out Mission"
/>
<NavbarPrimary.SubItem
href="/asked"
subTitle="See the most frequently asked questions"
title="Frequently asked questions"
/>
</NavbarPrimary.MenuItem>
</NavbarPrimary.Container>
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago