satori og image, template almost done

nemanjam · Jul 12, 2024 · 0d7aaf7 · 0d7aaf7
1 parent e4b444d
commit 0d7aaf7
Show file tree

Hide file tree

Showing 17 changed files with 755 additions and 76 deletions.
diff --git a/astro.config.ts b/astro.config.ts
@@ -49,6 +49,7 @@ export default defineConfig({
     remarkPlugins,
   },
   vite: {
+    // optimizeDeps: { exclude: ['sharp'] },
     build: {
       sourcemap: false,
     },

diff --git a/docs/working-notes/data/astro-og-image-pages.ts b/docs/working-notes/data/astro-og-image-pages.ts
@@ -0,0 +1,222 @@
+const pages = {
+  'blog/2024-01-20-example-article-4': {
+    publishDate: 2024-01-20T00:00:00.000Z,
+    updatedDate: 2024-05-23T00:00:00.000Z,
+    title: 'Example article 4 commodo ea ipsum tempor nisi aliqua',
+    description: 'Dolor velit excepteur cupidatat: Aute in fugiat id reprehenderit ipsum qui tempor fugiat. Excepteur tempor culpa velit duis quis enim aliquip.\n',
+    noHero: false,
+    heroImage: {
+      src: '/@fs/home/username/Desktop/nemanjam.github.io/src/content/post/_images/2024-01-20-example-article-4/river1.jpg?origWidth=4608&origHeight=2592&origFormat=jpg',
+      width: 4608,
+      height: 2592,
+      format: 'jpg',
+      fsPath: '/home/username/Desktop/nemanjam.github.io/src/content/post/_images/2024-01-20-example-article-4/river1.jpg'
+    },
+    heroAlt: 'sunt aute reprehenderit exercitation cillum culpa dolor dolor commodo ea ipsum tempor nisi aliqua.',
+    toc: true,
+    draft: false,
+    category: 'tools',
+    tags: [ 'devops', 'css', 'react', 'astro' ]
+  },
+  'blog/2024-01-21-example-article-5': {
+    publishDate: 2024-01-21T00:00:00.000Z,
+    title: 'Example article 5 commodo ea ipsum tempor nisi aliqua',
+    description: 'Dolor velit excepteur cupidatat: Aute in fugiat id reprehenderit ipsum qui tempor fugiat. Excepteur tempor culpa velit duis quis enim aliquip. Nostrud irure nulla enim in commodo duis anim veniam irure fugiat cillum.\n',
+    noHero: false,
+    heroImage: {
+      src: '/@fs/home/username/Desktop/nemanjam.github.io/src/content/post/_images/2024-01-21-example-article-5/morning1.jpg?origWidth=4608&origHeight=2592&origFormat=jpg',
+      width: 4608,
+      height: 2592,
+      format: 'jpg',
+      fsPath: '/home/username/Desktop/nemanjam.github.io/src/content/post/_images/2024-01-21-example-article-5/morning1.jpg'
+    },
+    heroAlt: 'sunt aute reprehenderit exercitation cillum culpa dolor dolor commodo ea ipsum tempor nisi aliqua.',
+    toc: true,
+    draft: true,
+    category: 'video',
+    tags: [ 'node.js', 'next.js', 'react' ]
+  },
+  'blog/2023-01-19-example-article-3': {
+    publishDate: 2023-01-19T00:00:00.000Z,
+    title: 'Example article 3 reprehenderit ipsum qui tempor',
+    description: 'Dolor velit excepteur cupidatat: Aute in fugiat id reprehenderit ipsum qui tempor fugiat. Excepteur tempor culpa velit duis quis enim aliquip.\n',
+    noHero: false,
+    heroImage: {
+      src: '/@fs/home/username/Desktop/nemanjam.github.io/src/content/post/_images/2023-01-19-example-article-3/lure1.jpg?origWidth=4608&origHeight=2592&origFormat=jpg',
+      width: 4608,
+      height: 2592,
+      format: 'jpg',
+      fsPath: '/home/username/Desktop/nemanjam.github.io/src/content/post/_images/2023-01-19-example-article-3/lure1.jpg'
+    },
+    heroAlt: 'sunt aute reprehenderit exercitation cillum culpa dolor dolor commodo ea ipsum tempor nisi aliqua.',
+    toc: true,
+    draft: false,
+    category: 'news',
+    tags: [ 'devops', 'javascript', 'react', 'css', 'python' ]
+  },
+  'blog/2022-03-17-example-article-2': {
+    publishDate: 2022-03-17T00:00:00.000Z,
+    title: 'Example article 2 dolor commodo ea ipsum tempor nisi aliqua',
+    description: 'Dolor velit excepteur cupidatat: Aute in fugiat id reprehenderit ipsum qui tempor fugiat. Excepteur tempor culpa velit duis quis enim aliquip.\n',
+    noHero: false,
+    heroImage: {
+      src: '/@fs/home/username/Desktop/nemanjam.github.io/src/content/post/_images/2022-03-17-example-article-2/riverside1.jpg?origWidth=4608&origHeight=2592&origFormat=jpg',
+      width: 4608,
+      height: 2592,
+      format: 'jpg',
+      fsPath: '/home/username/Desktop/nemanjam.github.io/src/content/post/_images/2022-03-17-example-article-2/riverside1.jpg'
+    },
+    heroAlt: 'sunt aute reprehenderit exercitation cillum culpa dolor dolor commodo ea ipsum tempor nisi aliqua.',
+    toc: true,
+    draft: false,
+    category: 'video',
+    tags: [ 'css', 'python', 'node.js', 'astro' ]
+  },
+  'blog/2022-02-16-example-article-1': {
+    publishDate: 2022-02-16T00:00:00.000Z,
+    title: 'Example article 1',
+    description: 'Et dolor tempor velit: Aute ad tempor incididunt labore dolore incididunt in quis officia quis est. Ullamco aute et ex velit proident non.\n',
+    noHero: false,
+    heroImage: {
+      src: '/@fs/home/username/Desktop/nemanjam.github.io/src/content/post/_images/2022-02-16-example-article-1/focus1.jpg?origWidth=4608&origHeight=2592&origFormat=jpg',
+      width: 4608,
+      height: 2592,
+      format: 'jpg',
+      fsPath: '/home/username/Desktop/nemanjam.github.io/src/content/post/_images/2022-02-16-example-article-1/focus1.jpg'
+    },
+    heroAlt: 'sunt aute reprehenderit exercitation cillum culpa dolor dolor commodo ea ipsum tempor nisi aliqua.',
+    toc: true,
+    draft: false,
+    category: 'tutorials',
+    tags: [ 'astro', 'next.js', 'css', 'python' ]
+  },
+  'projects/2024-05-16-example-project-3': {
+    title: 'This is the third project',
+    description: 'Description of the third project',
+    publishDate: 2024-05-16T00:00:00.000Z,
+    heroImage: {
+      src: '/@fs/home/username/Desktop/nemanjam.github.io/src/content/project/_images/2024-05-16-example-project-3/morning1.jpg?origWidth=4608&origHeight=2592&origFormat=jpg',
+      width: 4608,
+      height: 2592,
+      format: 'jpg',
+      fsPath: '/home/username/Desktop/nemanjam.github.io/src/content/project/_images/2024-05-16-example-project-3/morning1.jpg'
+    },
+    heroAlt: 'Hero image',
+    draft: false
+  },
+  'projects/2024-03-15-example-project-2': {
+    title: 'This is the second project',
+    description: 'Description of the second project',
+    publishDate: 2024-03-15T00:00:00.000Z,
+    updatedDate: 2024-04-21T00:00:00.000Z,
+    heroImage: {
+      src: '/@fs/home/username/Desktop/nemanjam.github.io/src/content/project/_images/2024-03-15-example-project-2/cyco5.jpg?origWidth=4608&origHeight=2592&origFormat=jpg',
+      width: 4608,
+      height: 2592,
+      format: 'jpg',
+      fsPath: '/home/username/Desktop/nemanjam.github.io/src/content/project/_images/2024-03-15-example-project-2/cyco5.jpg'
+    },
+    heroAlt: 'This is bicycle',
+    draft: false
+  },
+  'projects/2024-02-13-example-project-1': {
+    title: 'This is the first project',
+    description: 'Description of the first project',
+    publishDate: 2024-02-13T00:00:00.000Z,
+    heroImage: {
+      src: '/@fs/home/username/Desktop/nemanjam.github.io/src/content/project/_images/2024-02-13-example-project-1/flowers-store.jpg?origWidth=4608&origHeight=2592&origFormat=jpg',
+      width: 4608,
+      height: 2592,
+      format: 'jpg',
+      fsPath: '/home/username/Desktop/nemanjam.github.io/src/content/project/_images/2024-02-13-example-project-1/flowers-store.jpg'
+    },
+    heroAlt: 'Flowers store',
+    draft: false
+  },
+  'pages/404': {
+    layout: '../layouts/Page.astro',
+    title: 'Page not found',
+    description: 'That page doesn’t exist.',
+    readingTime: 0.2
+  },
+  'pages/about': {
+    layout: '../layouts/Page.astro',
+    title: 'About Me',
+    description: 'Lorem ipsum dolor sit amet',
+    readingTime: 0.02
+  },
+  'pages/design/buttons': {
+    layout: '../../layouts/Page.astro',
+    title: 'Buttons, Links, Tags',
+    readingTime: 1.18
+  },
+  'pages/design/cards': {
+    layout: '../../layouts/Page.astro',
+    title: 'Cards',
+    readingTime: 0.46
+  },
+  'pages/design/colors': {
+    layout: '../../layouts/Page.astro',
+    title: 'Colors',
+    readingTime: 0.9
+  },
+  'pages/design/embeds': {
+    layout: '../../layouts/Page.astro',
+    title: 'Embeds',
+    readingTime: 0.16
+  },
+  'pages/design/images': {
+    layout: '../../layouts/Page.astro',
+    title: 'Images, YouTube',
+    readingTime: 0.93
+  },
+  'pages/design/index': {
+    layout: '../../layouts/Page.astro',
+    title: 'Design system',
+    readingTime: 0.01
+  },
+  'pages/design/styleguide-old': {
+    layout: '../../layouts/Page.astro',
+    title: 'Styleguide',
+    readingTime: 1.885
+  },
+  'pages/design/styleguide': {
+    layout: '../../layouts/Page.astro',
+    title: 'Styleguide',
+    readingTime: 1.885
+  },
+  'pages/design/typography': {
+    layout: '../../layouts/Page.astro',
+    title: 'Typography',
+    readingTime: 0.02
+  },
+  'pages/index': {
+    layout: '../layouts/Page.astro',
+    title: 'Home',
+    description: 'Lorem ipsum dolor sit amet',
+    readingTime: 0.27
+  },
+  'pages/resume': {
+    layout: '../layouts/Page.astro',
+    title: 'Resume',
+    description: 'This is page for Resume/CV',
+    readingTime: 0.345
+  },
+  'lists/blog': {
+    title: 'Blog',
+    description: 'Est aliquip reprehenderit eu esse duis laboris cillum adipisicing reprehenderitvoluptate ex aute voluptate.'
+  },
+  'lists/blog/tags': { title: 'Tags', description: 'I am Nemanja, full stack developer' },
+  'lists/blog/explore': {
+    title: 'Explore',
+    description: 'I am Nemanja, full stack developer'
+  },
+  'lists/blog/categories': {
+    title: 'Categories',
+    description: 'I am Nemanja, full stack developer'
+  },
+  'lists/projects': {
+    title: 'Projects',
+    description: 'A showcase of experiments and projects.'
+  }
+}
diff --git a/docs/working-notes/data/template-playground-1.tsx b/docs/working-notes/data/template-playground-1.tsx
@@ -0,0 +1,90 @@
+
+
+
+<div
+style={{
+  display: 'flex',
+  padding: '48',
+  height: '100%',
+  backgroundColor: '#2e3440',
+}}
+>
+<div
+  style={{
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    flexDirection: 'column',
+    // backgroundColor: 'white',
+    color: '#cbd5e0',
+    // padding: 48,
+    // borderRadius: 12,
+  }}
+>
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'row',
+      gap: 24,
+      flexGrow: 1,
+      justifyContent: 'space-between',
+    }}
+  >
+    <div
+      style={{
+        display: 'flex',
+        gap: 16,
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          fontSize: 52,
+          width: 400,
+          fontWeight: 600,
+        }}
+      >
+        {'this is my long title'}
+      </div>
+      <div
+        style={{
+          fontSize: 36,
+          fontWeight: 400,
+          display: 'flex',
+          alignItems: 'center',
+          // color: '#76c2af',
+        }}
+      >
+        <img
+          src="https://avatars.githubusercontent.com/u/9990165?v=4"
+          alt="TkDodo"
+          width={120}
+          height={120}
+          style={{ borderRadius: '50%', marginRight: 16 }}
+        />
+        Nemanja Mitic
+      </div>
+    </div>
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <img
+        src="https://picsum.photos/seed/picsum/1920/1080"
+        width="550"
+        height="500"
+        style={{
+          borderRadius: '8px',
+        }}
+      />
+    </div>
+  </div>
+</div>
+</div>
+
+
diff --git a/src/libs/api/open-graph-image.ts → ...y-old-code/open-graph/open-graph-image.ts b/src/libs/api/open-graph-image.ts → ...y-old-code/open-graph/open-graph-image.ts