🎨👷🔧 blog: first entry

jamerrq · Jan 21, 2024 · 7890b42 · 7890b42
1 parent 1788890
commit 7890b42
Show file tree

Hide file tree

Showing 30 changed files with 279 additions and 2,431 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,37 +1,23 @@
+/** @type {import("eslint").Linter.Config} */
 module.exports = {
-  plugins: ['@typescript-eslint'],
-  env: {
-    browser: true,
-    es2021: true,
-    node: true
+  extends: ['plugin:astro/recommended', 'preact'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    sourceType: 'module',
+    ecmaVersion: 'latest'
   },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:astro/recommended',
-    'preact'
-  ],
   overrides: [
     {
-      env: {
-        node: true
-      },
-      files: ['.eslintrc.{js,cjs}', '*.astro'],
+      files: ['*.astro'],
+      parser: 'astro-eslint-parser',
       parserOptions: {
-        sourceType: 'script',
         parser: '@typescript-eslint/parser',
         extraFileExtensions: ['.astro']
       },
-      parser: 'astro-eslint-parser'
+      rules: {
+        "react/self-closing-comp": "off",
+      }
     }
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module'
-  },
-  rules: {
-    'no-irregular-whitespace': 'off',
-    '@typescript-eslint/triple-slash-reference': 'off'
-  }
+  ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -18,7 +18,11 @@
     "typescript",
     // "typescriptreact"
   ],
+  "eslint.run": "onSave",
   "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always"
+  },
   "cSpell.words": [
     "altano",
     "astro",

diff --git a/astro.config.mjs b/astro.config.mjs
@@ -4,6 +4,7 @@ import deno from '@astrojs/deno'
 import robotsTxt from "astro-robots-txt"
 import preact from "@astrojs/preact"
 
+// https://astro-critters.nikolahristov.tech/
 import critters from "astro-critters"
 
 // https://astro.build/config

diff --git a/prettier.config.cjs b/prettier.config.cjs
@@ -1,6 +1,5 @@
 /** @type {import("prettier").Config} */
 module.exports = {
-  // i am just using the standard config, change if you need something else
   ...require('prettier-config-standard'),
   plugins: [require.resolve('prettier-plugin-astro')],
   overrides: [

diff --git a/src/components/badges/open-to-work.astro b/src/components/badges/open-to-work.astro
@@ -0,0 +1,21 @@
+---
+interface Props {
+  lang?: string
+}
+const { lang = 'en' }: Props = Astro.props
+---
+
+<span
+  class='bg-emerald-100 text-emerald-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-emerald-800 border border-emerald-400 font-merriweather xl:absolute top-1.5 right-1.5'
+>
+  <svg viewBox='0 0 512 512' class="w-2.5 h-2.5 me-1.5" fill="currentColor"
+    ><title></title><g data-name='1' id='_1'
+      ><path
+        d='M291.48,449.94A15,15,0,0,1,278,441.5L207.5,296.57,62.57,226.08a15,15,0,0,1,1-27.41L435.48,49.08A15,15,0,0,1,455,68.6L305.4,440.54A15,15,0,0,1,292,449.93Zm-185.38-236,119.18,58a15,15,0,0,1,6.93,6.93l58,119.18L414,90Z'
+      ></path><path
+        d='M218.72,300.35a15,15,0,0,1-10.6-25.61L430.47,52.39a15,15,0,1,1,21.21,21.22L229.33,296A15,15,0,0,1,218.72,300.35Z'
+      ></path></g
+    ></svg
+  >
+  {lang === 'en' ? 'Open to work' : 'Abierto a ofertas'}
+</span>
diff --git a/src/components/blog/blog-bento.astro b/src/components/blog/blog-bento.astro
@@ -12,5 +12,5 @@ const { lang = 'en' }: Props = Astro.props
 <Bento>
   <Buttons href={lang === 'en' ? '/es/blog' : '/blog'} />
   <BlogAbout lang={lang} />
-  <LastEntries client:load />
+  <LastEntries lang={lang} client:load />
 </Bento>
diff --git a/src/components/blog/last-entries.tsx b/src/components/blog/last-entries.tsx
@@ -19,31 +19,33 @@ const LAST_ENTRIES_STYLES = [
   'responsive-text-xs',
   'gap-2',
   'text-slate-900',
-  'dark:text-slate-300'
+  'dark:text-slate-300',
+  'py-4',
+  'px-2',
 ].join(' ')
 
 import { entries } from '@data/blog.json'
 
 import { Fragment } from 'preact'
 
-export default function LastEntries() {
+export default function LastEntries({ lang = 'en' }: { lang?: string }) {
   return (
     <article class={LAST_ENTRIES_STYLES}>
-      <h1 class='dark:text-emerald-300 text-emerald-950 text-2xl'>
-        - Last Entries -
+      <h1 class='dark:text-emerald-300 text-emerald-950 text-2xl xl:text-4xl text-center'>
+        - {lang === 'en' ? 'Last Entries' : 'Últimas Entradas'} -
       </h1>
       <ul class='grid grid-cols-[1fr_5fr] gap-3 w-full p-2 responsive-text-sm'>
-        <li class='dark:text-cyan-300 text-cyan-950 text-xl'>Date</li>
-        <li class='dark:text-cyan-300 text-cyan-950 text-xl'>Title / Título</li>
+        <li />
+        <li class='dark:text-cyan-300 text-cyan-950 text-xl' />
         {entries.map((entry, index) => {
           return (
             <Fragment key={index}>
-              <li class='font-merriweather text-sm xl:text-base'>
+              <li class='font-merriweather text-sm xl:text-base text-center'>
                 {entry.date}
               </li>
-              <li class='font-merriweather text-sm xl:text-base dark:bg-emerald-900 bg-emerald-300 py-1 px-2 rounded-sm cursor-pointer hover:scale-105 transition-all duration-200'>
-                <a href={`/blog/${entry.href}`}>
-                  {entry.title} / {entry.título}
+              <li class='font-merriweather text-sm xl:text-base dark:bg-emerald-900 bg-emerald-300 py-1 px-2 rounded-sm cursor-pointer hover:scale-[1.02] transition-all ease-in-out'>
+                <a href={`/blog/${lang === 'en' ? entry.href : entry.hrefEs}`}>
+                  {lang === 'en' ? entry.title : entry.titleEs}
                 </a>
               </li>
             </Fragment>

diff --git a/src/components/featured-and-projects/projects.tsx b/src/components/featured-and-projects/projects.tsx
@@ -99,7 +99,7 @@ export default function Resources({ n = 1, lang = 'en' }: ResourcesProps) {
           <article class={PROJECT_STYLES} key={i}>
             {i === 0 && <DoubleLeftButton _f={goLeft} />}
             <h1 class='xl:text-3xl text-xl'>{project.title}</h1>
-            <p class='font-bold font-merriweather dark:text-slate-200 text-xs xl:text-base'>
+            <p class='font-bold font-merriweather dark:text-slate-200 text-xs xl:text-base max-w-[400px] text-balance'>
               {project.description[lang as 'es' | 'en']}
             </p>
             {/* <span class='responsive-text-xs font-semibold'>Stack</span> */}

diff --git a/src/components/icons/copyright.astro b/src/components/icons/copyright.astro
@@ -0,0 +1,5 @@
+<svg viewBox='0 0 512 512' class="w-4 h-4 fill-slate-50" xmlns='http://www.w3.org/2000/svg'
+  ><path
+    d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464zM255.1 176C255.1 176 255.1 176 255.1 176c21.06 0 40.92 8.312 55.83 23.38c9.375 9.344 24.53 9.5 33.97 .1562c9.406-9.344 9.469-24.53 .1562-33.97c-24-24.22-55.95-37.56-89.95-37.56c0 0 .0313 0 0 0c-33.97 0-65.95 13.34-89.95 37.56c-49.44 49.88-49.44 131 0 180.9c24 24.22 55.98 37.56 89.95 37.56c.0313 0 0 0 0 0c34 0 65.95-13.34 89.95-37.56c9.312-9.438 9.25-24.62-.1562-33.97c-9.438-9.312-24.59-9.219-33.97 .1562c-14.91 15.06-34.77 23.38-55.83 23.38c0 0 .0313 0 0 0c-21.09 0-40.95-8.312-55.89-23.38c-30.94-31.22-30.94-82.03 0-113.3C214.2 184.3 234 176 255.1 176z'
+  ></path></svg
+>
diff --git a/src/components/main/about-me-card.astro b/src/components/main/about-me-card.astro
@@ -1,4 +1,6 @@
 ---
+import OpenToWork from '@components/badges/open-to-work.astro'
+
 interface Props {
   lang: string
 }
@@ -23,14 +25,18 @@ const ABOUT_ME_STYLES = [
   'dark:border-emerald-300',
   'flex-col',
   'text-base',
-  'p-2'
+  'p-2',
+  'relative'
 ].join(' ')
 ---
 
 <article class={ABOUT_ME_STYLES} title='Get to know me'>
-  <h1 class='dark:text-emerald-300 text-emerald-950 text-2xl xl:text-3xl'>
-    {lang === 'en' ? 'Get to know me' : 'Conóceme'}
-  </h1>
+  <header class="flex flex-col xl:flex-row gap-2 items-center">
+    <h1 class='dark:text-emerald-300 text-emerald-950 text-2xl xl:text-3xl'>
+      {lang === 'en' ? 'Get to know me' : 'Conóceme'}
+    </h1>
+    <OpenToWork lang={lang} />
+  </header>
   <div
     class='flex items-center p-3 justify-around w-full font-merriweather xl:text-base text-sm relative'
   >

diff --git a/src/components/main/blog.astro b/src/components/main/blog.astro
@@ -28,7 +28,9 @@ const BLOG_STYLES = [
   'hover:ease-in-out',
   'p-2'
 ].join(' ')
+
 import { siGitbook } from 'simple-icons'
+
 interface Props {
   lang: string
 }

diff --git a/src/components/main/buttons.astro b/src/components/main/buttons.astro
@@ -46,7 +46,7 @@ import Shuffle from '@components/icons/shuffle.astro'
 import GoBack from '@components/icons/go-back.astro'
 
 const BOARD_BUTTON_STYLE =
-  process.env.NODE_ENV !== 'development' ? '' : 'hidden'
+  process.env.NODE_ENV === 'development' ? '' : 'hidden'
 
 // {SVGS_STYLES}
 const SVGS_STYLES = [

diff --git a/src/components/main/container.astro b/src/components/main/container.astro
@@ -18,6 +18,6 @@
     gap: 0.5rem;
   }
 </style>
-<div class='container text-2xl'>
+<div class='container xl:text-2xl'>
   <slot />
 </div>
diff --git a/src/components/main/footer.astro b/src/components/main/footer.astro
@@ -1,5 +1,6 @@
 ---
-import { siAstro, siPreact } from 'simple-icons'
+import Copyright from '@components/icons/copyright.astro'
+import { siAstro, siPreact, siTailwindcss, siMarkdown } from 'simple-icons'
 ---
 
 <style>
@@ -9,31 +10,43 @@ import { siAstro, siPreact } from 'simple-icons'
     left: 0;
     width: 100%;
     height: fit-content;
-    padding: 1rem;
+    padding: 0.2rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
     text-align: center;
     align-items: center;
     display: flex;
     justify-content: center;
-    gap: 0.2rem;
+    gap: 0.5rem;
     font-size: 0.8rem;
     color: #fff;
     background-color: #000;
-    font-family: 'Merriweather', monospace;
   }
 </style>
 
-<a href='/'>
-  <footer>
-    Powered by
-    <svg
-      class='w-6 h-6 inline'
-      set:html={siAstro.svg}
-      fill={`#${siAstro.hex}`}
-    />
-    <svg
-      class='w-6 h-6 inline'
-      set:html={siPreact.svg}
-      fill={`#${siPreact.hex}`}
-    />
-  </footer>
-</a>
+<footer class='font-merriweather'>
+  <span> Powered by</span>
+  <svg class='w-6 h-6 inline' set:html={siAstro.svg} fill={`#${siAstro.hex}`} />
+  <svg
+    class='w-6 h-6 inline'
+    set:html={siPreact.svg}
+    fill={`#${siPreact.hex}`}
+  />
+  <svg
+    class='w-6 h-6 inline'
+    set:html={siTailwindcss.svg}
+    fill={`#${siTailwindcss.hex}`}
+  />
+  <svg class='w-6 h-6 inline' set:html={siMarkdown.svg} fill={`#fff`} />
+  <aside class=''>
+    <a
+      href='https://github.com/jamerrq'
+      target='_blank'
+      rel='noopener noreferrer'
+      class='text-emerald-300 flex gap-1 items-center ml-2'
+    >
+      <Copyright />
+      <span> @jamerrq</span>
+    </a>
+  </aside>
+</footer>