Added changes

package.json

@@ -13,7 +13,10 @@
     "@astrojs/sitemap": "^1.0.0",
     "@astrojs/svelte": "^1.0.0",
     "@astrojs/tailwind": "^1.0.0",
+    "@notionhq/client": "^2.2.0",
     "astro": "^1.0.3",
+    "marked": "^4.1.0",
+    "notion-to-md": "^2.5.5",
     "svelte": "^3.49.0"
   }
 }

pnpm-lock.yaml

@@ -5,7 +5,10 @@ specifiers:
   '@astrojs/sitemap': ^1.0.0
   '@astrojs/svelte': ^1.0.0
   '@astrojs/tailwind': ^1.0.0
+  '@notionhq/client': ^2.2.0
   astro: ^1.0.3
+  marked: ^4.1.0
+  notion-to-md: ^2.5.5
   svelte: ^3.49.0
 
 devDependencies:
@@ -13,7 +16,10 @@ devDependencies:
   '@astrojs/sitemap': 1.0.0
   '@astrojs/svelte': 1.0.0_svelte@3.49.0
   '@astrojs/tailwind': 1.0.0
+  '@notionhq/client': 2.2.0
   astro: 1.0.3
+  marked: 4.1.0
+  notion-to-md: 2.5.5
   svelte: 3.49.0
 
 packages:
@@ -540,6 +546,16 @@ packages:
       fastq: 1.13.0
     dev: true
 
+  /@notionhq/client/2.2.0:
+    resolution: {integrity: sha512-wJwGajJjdy3GDI5HpomulhYuxo5j8t1Conm9HkpHqkHnj4qrc+6N//qRXrogsUU2sn60kSHpRcPB4P6L0799tg==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@types/node-fetch': 2.6.2
+      node-fetch: 2.6.7
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
   /@polka/url/1.0.0-next.21:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
@@ -653,6 +669,13 @@ packages:
       '@types/unist': 2.0.6
     dev: true
 
+  /@types/node-fetch/2.6.2:
+    resolution: {integrity: sha512-DHqhlq5jeESLy19TYhLakJ07kNumXWjcDdxXsLUMJZ6ue8VZJj4kLPQVE/2mdHh3xZziNF1xppu5lwmS53HR+A==}
+    dependencies:
+      '@types/node': 18.7.2
+      form-data: 3.0.1
+    dev: true
+
   /@types/node/17.0.45:
     resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
     dev: true
@@ -897,6 +920,10 @@ packages:
       - ts-node
     dev: true
 
+  /asynckit/0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    dev: true
+
   /autoprefixer/10.4.8_postcss@8.4.16:
     resolution: {integrity: sha512-75Jr6Q/XpTqEf6D2ltS5uMewJIx5irCU1oBYJrWjFenq/m12WRRrz6g15L1EIoYvPLXTbEry7rDOwrcYNj77xw==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1106,6 +1133,13 @@ packages:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
     dev: true
 
+  /combined-stream/1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      delayed-stream: 1.0.0
+    dev: true
+
   /comma-separated-tokens/2.0.2:
     resolution: {integrity: sha512-G5yTt3KQN4Yn7Yk4ed73hlZ1evrFKXeUW3086p3PRFNp7m2vIjI6Pg+Kgb+oyzhd9F2qdcoj67+y3SdxL5XWsg==}
     dev: true
@@ -1181,6 +1215,11 @@ packages:
     resolution: {integrity: sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==}
     dev: true
 
+  /delayed-stream/1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+    dev: true
+
   /dequal/2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -1609,6 +1648,15 @@ packages:
       pkg-dir: 4.2.0
     dev: true
 
+  /form-data/3.0.1:
+    resolution: {integrity: sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==}
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+    dev: true
+
   /format/0.2.2:
     resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
     engines: {node: '>=0.4.x'}
@@ -2111,10 +2159,22 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /markdown-table/2.0.0:
+    resolution: {integrity: sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==}
+    dependencies:
+      repeat-string: 1.6.1
+    dev: true
+
   /markdown-table/3.0.2:
     resolution: {integrity: sha512-y8j3a5/DkJCmS5x4dMCQL+OR0+2EAq3DOtio1COSHsmW2BGXnNCK3v12hJt1LrUz5iZH5g0LmuYOjDdI+czghA==}
     dev: true
 
+  /marked/4.1.0:
+    resolution: {integrity: sha512-+Z6KDjSPa6/723PQYyc1axYZpYYpDnECDaU6hkaf5gqBieBkMKYReL5hteF2QizhlMbgbo8umXl/clZ67+GlsA==}
+    engines: {node: '>= 12'}
+    hasBin: true
+    dev: true
+
   /mdast-util-definitions/5.1.1:
     resolution: {integrity: sha512-rQ+Gv7mHttxHOBx2dkF4HWTg+EE+UR78ptQWDylzPKaQuVGdG4HIoY3SrS/pCp80nZ04greFvXbVFHT+uf0JVQ==}
     dependencies:
@@ -2666,6 +2726,18 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /mime-db/1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /mime-types/2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.52.0
+    dev: true
+
   /mime/3.0.0:
     resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
     engines: {node: '>=10.0.0'}
@@ -2746,6 +2818,18 @@ packages:
     engines: {node: '>=10.5.0'}
     dev: true
 
+  /node-fetch/2.6.7:
+    resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: true
+
   /node-fetch/3.2.10:
     resolution: {integrity: sha512-MhuzNwdURnZ1Cp4XTazr69K0BTizsBroX7Zx3UgDSVcZYKF/6p0CBe4EUb/hLqmzVhl0UpYfgRljQ4yxE+iCxA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -2769,6 +2853,13 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /notion-to-md/2.5.5:
+    resolution: {integrity: sha512-EdzuNZpJyc+287ItRALOld90RkshWBDiSA0WThf75z98Y8cyynhu6Hg+h377eD5K4UOSQHy5K0SUV4vGdCxCiA==}
+    engines: {node: '>=12'}
+    dependencies:
+      markdown-table: 2.0.0
+    dev: true
+
   /npm-run-path/5.1.0:
     resolution: {integrity: sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -3211,6 +3302,11 @@ packages:
       unist-util-visit: 4.1.0
     dev: true
 
+  /repeat-string/1.6.1:
+    resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==}
+    engines: {node: '>=0.10'}
+    dev: true
+
   /resolve/1.22.1:
     resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
     hasBin: true
@@ -3666,6 +3762,10 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /tr46/0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+    dev: true
+
   /trim-lines/3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
     dev: true
@@ -4005,6 +4105,17 @@ packages:
     engines: {node: '>= 8'}
     dev: true
 
+  /webidl-conversions/3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+    dev: true
+
+  /whatwg-url/5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+    dev: true
+
   /which-pm-runs/1.1.0:
     resolution: {integrity: sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==}
     engines: {node: '>=4'}

src/layouts/main.astro

@@ -8,7 +8,9 @@ const {
   frontmatter,
   title: titleProp,
   description: descriptionProp,
+  image: imageProp,
   blog,
+  hasMainTitle,
 } = Astro.props;
 ---
 
@@ -19,15 +21,30 @@ const {
     <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
     <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
     <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
-		<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"
+    <link
+      rel="apple-touch-icon"
+      sizes="114x114"
+      href="/apple-icon-114x114.png"
     />
-		<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"
+    <link
+      rel="apple-touch-icon"
+      sizes="120x120"
+      href="/apple-icon-120x120.png"
     />
-		<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"
+    <link
+      rel="apple-touch-icon"
+      sizes="144x144"
+      href="/apple-icon-144x144.png"
     />
-		<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"
+    <link
+      rel="apple-touch-icon"
+      sizes="152x152"
+      href="/apple-icon-152x152.png"
     />
-		<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/apple-icon-180x180.png"
     />
     <link
       rel="icon"
@@ -82,6 +99,8 @@ const {
       property="og:image"
       content={frontmatter?.image
         ? frontmatter?.image
+        : imageProp
+        ? imageProp
         : "https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1200,w_1200/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf"}
     />
     <meta property="og:url" content={Astro.url} />
@@ -116,7 +135,7 @@ const {
     ></script>
 
     {
-			frontmatter && (
+      (frontmatter || imageProp) && (
         <script
           type="application/ld+json"
           set:html={`
@@ -127,12 +146,12 @@ const {
 								"@type": "WebPage",
 								"@id": "${Astro.url}"
 							},
-							"headline": "${frontmatter.title}",
+							"headline": "${frontmatter?.title || titleProp}",
 							"image": [
-								"${frontmatter.image}"
+								"${frontmatter?.image || imageProp}"
 							],
-							"datePublished": "${frontmatter.date}",
+							"datePublished": "${frontmatter?.date || ""}",
-							"dateModified": "${frontmatter.date}",
+							"dateModified": "${frontmatter?.date || ""}",
 							"author": {
 								"@type": "Person",
 								"name": "Rafael González Vázquez",
@@ -147,18 +166,16 @@ const {
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-45FLVCCPTZ"
     ></script>
-		<script>
+    <script
-			// @ts-ignore
+      set:html={`
 				window.dataLayer = window.dataLayer || [];
 				function gtag() {
-				// @ts-ignore
 					dataLayer.push(arguments);
 				}
-			// @ts-ignore
 				gtag("js", new Date());
-			// @ts-ignore
 				gtag("config", "G-45FLVCCPTZ");
-		</script>
+			`}
+    ></script>
   </head>
 
   <body class={`bg-white dark:bg-gray-900`}>
@@ -178,11 +195,22 @@ const {
 								https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1500,w_1500/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 1500w"
         alt="Rafael González"
       />
-			<h1
+
-				class="font-mono text-center font-bold underline underline-offset-8 uppercase text-4xl my-4 tracking-wide dark:text-white"
+      {
-			>
+        hasMainTitle || frontmatter?.title ? (
+          <a href="/">
+            <h2 class="font-mono text-center font-bold underline underline-offset-8 uppercase text-4xl my-4 tracking-wide dark:text-white">
+              {profileName}
+            </h2>
+          </a>
+        ) : (
+          <a href="/">
+            <h1 class="font-mono text-center font-bold underline underline-offset-8 uppercase text-4xl my-4 tracking-wide dark:text-white">
               {profileName}
             </h1>
+          </a>
+        )
+      }
       <p
         class="font-mono text-center text-l my-4 sm:mt-4 sm:mb-0 mx-auto w-11/12 max-w-5xl tracking-wide dark:text-white"
       >
@@ -197,7 +225,7 @@ const {
     </header>
     <main
       class={`font-mono text-l my-16 sm:mb-8 mx-auto w-11/12 max-w-5xl tracking-wide dark:text-white ${
-				blog || frontmatter ? "blog" : ""
+        blog || frontmatter || imageProp ? "blog" : ""
       }`}
     >
       <slot />

src/pages/blog/shopify-developer-setup.mdx

@@ -0,0 +1,12 @@
+---
+layout: ../../layouts/main.astro
+date: 2022-08-18
+title: Optimizing performance of an old Shopify Theme (Part 1)
+description:
+  Some tips and recommendations for optimizing and boosting performance of an
+  old Shopify theme.
+exerpt:
+  Some tips and recommendations for optimizing and boosting performance of an
+  old Shopify theme.
+image: https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=350&ar=16:9&fit=crop
+---

src/pages/church/[id].astro

@@ -0,0 +1,81 @@
+---
+import MainLayout from "../../layouts/main.astro";
+import { Client } from "@notionhq/client";
+import { NotionToMarkdown } from "notion-to-md";
+import {marked} from "marked";
+
+const notion = new Client({
+  auth: "secret_AXxqx7iaGrcuAcG5ib9l6smC0jqaEeLDb6G1jtUwI5i",
+});
+
+export async function getStaticPaths() {
+  const pageId = "87ff5ccc453349de8aa5ae32833817e3";
+
+  const notionPagesContent = await (
+    await fetch(
+      `https://api.notion.com/v1/blocks/${pageId}/children?page_size=100`,
+      {
+        headers: {
+          Authorization: `Bearer secret_AXxqx7iaGrcuAcG5ib9l6smC0jqaEeLDb6G1jtUwI5i`,
+          "Notion-Version": "2022-02-22",
+        },
+      }
+    )
+  ).json();
+
+  const pages = notionPagesContent.results.filter(
+    (page) => page.type === "child_page"
+  );
+
+  return pages.map((page) => ({
+    params: {
+      id: page.id,
+    },
+  }));
+}
+
+const { id } = Astro.params;
+
+const pageData = await (
+  await fetch(`https://api.notion.com/v1/pages/${id}`, {
+    headers: {
+      Authorization: `Bearer secret_AXxqx7iaGrcuAcG5ib9l6smC0jqaEeLDb6G1jtUwI5i`,
+      "Notion-Version": "2022-02-22",
+    },
+  })
+).json();
+
+const n2m = new NotionToMarkdown({ notionClient: notion });
+
+// @ts-ignore
+const mdblocks = await n2m.pageToMarkdown(id);
+const mdString = n2m.toMarkdownString(mdblocks);
+const mdArray = mdString.split("\n");
+
+for (let i = 0; i < mdArray.length; i++) {
+  if (mdArray[i].includes("https://www.youtube.com")) {
+    const videoId = mdArray[i].split("watch?v=")[1].split("&")[0];
+    mdArray[i] = '<iframe id="' + videoId + '" type="text/html" width="720" height="405" src="https://www.youtube.com/embed/' + videoId + '" frameborder="0" allowfullscreen></iframe>';
+  }
+}
+
+const mdGood = mdArray.join("\n");
+
+const htmlData = marked.parse(mdGood);
+
+const title = mdString
+  .split("\n")
+  .find((line) => line.startsWith("# "))
+  .replace("# ", "");
+const image = pageData.cover.external.url;
+---
+
+<MainLayout
+  title={title}
+  description="Aquí pordrás encontrar una lista de todas las notas de clases que he dado y sermones que he escuchado."
+  image={image}
+  blog={false}
+  hasMainTitle={true}
+>
+  <div set:html={htmlData}></div>
+</MainLayout>

src/pages/church/index.astro

@@ -0,0 +1,57 @@
+---
+import MainLayout from "../../layouts/main.astro";
+
+const pageId = "87ff5ccc453349de8aa5ae32833817e3";
+
+const notionPageData = await (
+  await fetch(`https://api.notion.com/v1/pages/${pageId}`, {
+    headers: {
+      Authorization: `Bearer secret_AXxqx7iaGrcuAcG5ib9l6smC0jqaEeLDb6G1jtUwI5i`,
+      "Notion-Version": "2022-02-22",
+    },
+  })
+).json();
+
+const notionPageContent = await (
+  await fetch(
+    `https://api.notion.com/v1/blocks/${pageId}/children?page_size=100`,
+    {
+      headers: {
+        Authorization: `Bearer secret_AXxqx7iaGrcuAcG5ib9l6smC0jqaEeLDb6G1jtUwI5i`,
+        "Notion-Version": "2022-02-22",
+      },
+    }
+  )
+).json();
+
+const title = notionPageData.properties.title.title[0].plain_text;
+
+const pages = notionPageContent.results.filter(
+  (page) => page.type === "child_page"
+);
+---
+
+<MainLayout
+  title={title}
+  description="Aquí pordrás encontrar una lista de todas las notas de clases que he dado y sermones que he escuchado."
+  blog={false}
+>
+  <h1 class="text-4xl text-center uppercase font-bold mb-8">
+    Nots de Clases y Sermones de Rafa
+  </h1>
+  <h2 class="text-3xl font-bold mb-4">{title}</h2>
+  <section class="grid grid-cols-2 md:grid-cols-4 gap-4">
+    {
+      pages.map((page) => (
+        <div>
+          <a href={`/church/${page.id}`}>
+           
+            <h3 class="text-xl">
+              {page.child_page.title}
+            </h3>
+          </a>
+        </div>
+      ))
+    }
+  </section>
+</MainLayout>

src/styles/base.css

@@ -90,4 +90,8 @@
   main.blog pre .language-id {
     @apply w-full;
   }
+
+  main.blog iframe {
+    @apply w-full mb-8;
+  }
 }