Fix home blink

AfipSDK · Oct 27, 2024 · 3497c4a · 3497c4a
1 parent c0584fa
commit 3497c4a
Show file tree

Hide file tree

Showing 11 changed files with 1,072 additions and 141 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "framer-motion": "^11.0.14",
     "lucide-react": "^0.358.0",
     "next-themes": "^0.3.0",
+    "prism-react-renderer": "^2.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.0",

diff --git a/src/components/code-sample.scss b/src/components/code-sample.scss
@@ -54,11 +54,6 @@
 	margin: 0;
 	border-top-left-radius: 0;
 	border-top-right-radius: 0;
-	display: none;
-}
-
-.code-tabs pre[class*="language-"].active {
-	display: block;
 }
 
 .code-tabs pre[class*="language-"].line-numbers {

diff --git a/src/components/code-sample.tsx b/src/components/code-sample.tsx
@@ -1,14 +1,104 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
+import { PrismCode } from "./ui/prism-code";
 
-import './prism';
+const codeBlock = 
+`const Afip = require('@afipsdk/afip.js');
+
+const afip = new Afip({ CUIT: 20409378472 });
+
+const data = {
+	'PtoVta' 	: 1,  // Punto de venta
+	'CbteTipo' 	: 6,  // Tipo de comprobante
+	'ImpTotal' 	: 121, // Importe total
+	// ... etc.
+};
+
+const res = await afip.ElectronicBilling.createVoucher(data);
+
+console.log({ 
+	'cae' : res['CAE'], 
+	'vencimiento' : res['CAEFchVto'] 
+});`
+
+const codePHP = 
+`use Afip;
+
+$afip = new Afip(array('CUIT' => 20409378472));
+
+$data = array(
+	'PtoVta' 	=> 1, // Punto de venta
+	'CbteTipo' 	=> 6, // Tipo de comprobante
+	'ImpTotal' 	=> 121, // Importe total
+	// ... etc.
+);
+
+$res = $afip->ElectronicBilling->CreateVoucher($data);
+
+var_dump(array(
+	'cae' => $res['CAE'], 
+	'vencimiento' => $res['CAEFchVto']
+));`
+
+const codeRuby = 
+`require "afip"
+
+afip = Afip.new({ "CUIT": 20409378472 })
+
+data = {
+	"PtoVta": 1, # Punto de venta
+	"CbteTipo": 6, # Tipo de comprobante
+	"ImpTotal": 121, # Importe total
+	# ... etc.
+}
+
+res = afip.ElectronicBilling.createVoucher(data)
+
+puts {
+	"cae": res["CAE"], 
+	"vencimiento": res["CAEFchVto"]
+}`
+
+const codePython = 
+`from afip import Afip
+
+afip = Afip({ "CUIT": 20409378472 })
+
+data = {
+	"PtoVta": 1, # Punto de venta
+	"CbteTipo": 6, # Tipo de comprobante
+	"ImpTotal": 121, # Importe total
+	# ... etc.
+}
+
+res = afip.ElectronicBilling.createVoucher(data)
+
+print({
+	"cae": res["CAE"], 
+	"vencimiento": res["CAEFchVto"]
+})`
+
+const codeAPI = 
+`curl --location 'https://app.afipsdk.com/api/v1/afip/requests' \\
+--data '{
+	"environment": "dev",
+	"method": "FECAESolicitar",
+	"wsid": "wsfe",
+	"params": {
+		"FeCAEReq" : {
+			"FeDetReq" : { 
+				"FECAEDetRequest" : {
+					"CbteFch" : 20240313,
+					"ImpTotal" : 121,
+					...
+				}
+			}
+		}
+	}
+}'`
 
 export default function CodeSample() {
 	const [activeLang, setActiveLang] = useState<'js'|'php'|'ruby'|'python'|'api'>('js');
 
-	useEffect(() => {
-		(window as any).Prism.highlightAll();
-	}, []);
-
 	return (
 		<div className="hero-figure anime-element">
 			<svg
@@ -69,125 +159,12 @@ export default function CodeSample() {
 						<img className="max-w-[20px]" src="/images/icons/api.svg" alt="api" /><span className="file">Factura</span>
 						</div>
 					</div>
-					<pre className={`line-numbers language-js ${activeLang === 'js' && 'active'}`} style={{whiteSpace: 'pre-wrap'}}>
-						<code>
-						{`
-						const Afip = require('@afipsdk/afip.js');
-
-						const afip = new Afip({ CUIT: 20409378472 });
-
-						const data = {
-							'PtoVta' 	: 1,  // Punto de venta
-							'CbteTipo' 	: 6,  // Tipo de comprobante
-							'ImpTotal' 	: 121, // Importe total
-							// ... etc.
-						};
-
-						const res = await afip.ElectronicBilling.createVoucher(data);
-
-						console.log({ 
-							'cae' : res['CAE'], 
-							'vencimiento' : res['CAEFchVto'] 
-						});
-						`}
-
-						</code>
-					</pre>
-					<pre className={`line-numbers language-php ${activeLang === 'php' && 'active'}`} style={{whiteSpace: 'pre-wrap'}}>
-						<code>
-						{`
-						use Afip;
-
-						$afip = new Afip(array('CUIT' => 20409378472));
-
-						$data = array(
-							'PtoVta' 	=> 1, // Punto de venta
-							'CbteTipo' 	=> 6, // Tipo de comprobante
-							'ImpTotal' 	=> 121, // Importe total
-							// ... etc.
-						);
-
-						$res = $afip->ElectronicBilling->CreateVoucher($data);
-
-						var_dump(array(
-							'cae' => $res['CAE'], 
-							'vencimiento' => $res['CAEFchVto']
-						));
-						`}
-
-						</code>
-					</pre>
-					<pre className={`line-numbers language-ruby ${activeLang === 'ruby' && 'active'}`} style={{whiteSpace: 'pre-wrap'}}>
-						<code>
-						{`
-						require "afip"
-
-						afip = Afip.new({ "CUIT": 20409378472 })
-
-						data = {
-							"PtoVta": 1, # Punto de venta
-							"CbteTipo": 6, # Tipo de comprobante
-							"ImpTotal": 121, # Importe total
-							# ... etc.
-						}
-
-						res = afip.ElectronicBilling.createVoucher(data)
-
-						puts {
-							"cae": res["CAE"], 
-							"vencimiento": res["CAEFchVto"]
-						}
-						`}
-
-						</code>
-					</pre>
-					<pre className={`line-numbers language-python ${activeLang === 'python' && 'active'}`} style={{whiteSpace: 'pre-wrap'}}>
-						<code>
-						{`
-						from afip import Afip
-
-						afip = Afip({ "CUIT": 20409378472 })
-
-						data = {
-							"PtoVta": 1, # Punto de venta
-							"CbteTipo": 6, # Tipo de comprobante
-							"ImpTotal": 121, # Importe total
-							# ... etc.
-						}
-
-						res = afip.ElectronicBilling.createVoucher(data)
-
-						print({
-							"cae": res["CAE"], 
-							"vencimiento": res["CAEFchVto"]
-						})
-						`}
-
-						</code>
-					</pre>
-					<pre className={`line-numbers language-shell ${activeLang === 'api' && 'active'}`} style={{whiteSpace: 'pre-wrap'}}>
-						<code>
-						{`
-						curl --location 'https://app.afipsdk.com/api/v1/afip/requests' \\
-						--data '{
-							"environment": "dev",
-							"method": "FECAESolicitar",
-							"wsid": "wsfe",
-							"params": {
-								"FeCAEReq" : {
-									"FeDetReq" : { 
-										"FECAEDetRequest" : {
-											"CbteFch" : 20240313,
-											"ImpTotal" : 121,
-											...
-										}
-									}
-								}
-							}
-						}'
-						`}
-						</code>
-					</pre>
+
+					{ activeLang === 'js' && <PrismCode codeBlock={codeBlock} lang="js" /> }
+					{ activeLang === 'php' && <PrismCode codeBlock={codePHP} lang="php" /> }
+					{ activeLang === 'ruby' && <PrismCode codeBlock={codeRuby} lang="ruby" /> }
+					{ activeLang === 'python' && <PrismCode codeBlock={codePython} lang="python" /> }
+					{ activeLang === 'api' && <PrismCode codeBlock={codeAPI} lang="shell" /> }
 				</div>
 			</div>
 		</div>

diff --git a/src/components/home-hero.tsx b/src/components/home-hero.tsx
@@ -3,10 +3,11 @@ import { siteConfig } from "@/config/site";
 import { cn } from "@/lib/utils";
 import { useEffect } from "react";
 
-import './typewriter'
-
 export default function HomeHero() {
-	useEffect(() => {
+
+	useEffect(() => {(async () => {
+		await import('./typewriter')
+
 		var app = document.getElementById('typewriter');
 
 		var typewriter: any = new (window as any).Typewriter(app, {
@@ -40,7 +41,7 @@ export default function HomeHero() {
 			.typeString('con Ruby')
 			.pauseFor(2500)
 			.start();
-	}, []);
+	})().catch(() => {})}, []);
 
 	return (
 		<>