Skip to content

Commit

Permalink
feat: new blog entry (linux terminal tools)
Browse files Browse the repository at this point in the history
  • Loading branch information
jamerrq committed May 13, 2024
1 parent b081b10 commit 123a929
Show file tree
Hide file tree
Showing 39 changed files with 670 additions and 165 deletions.
12 changes: 7 additions & 5 deletions astro.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,13 @@ export default defineConfig({
globDirectory: 'dist/client',
globPatterns: [
// '**/*.{woff2}',
'_astro/*.module.*.js',
// '_astro/*.module.*.js',
// '_astro/client.*.js',
'_astro/hoisted.*.js',
// '_astro/hoisted.*.js',
// '_astro/*icons.*.js',
'_astro/preload-helper.*.js',
'_astro/workbox-*.js'
// '_astro/preload-helper.*.js',
// '_astro/workbox-*.js'
'**/*'
],
// Don't fallback on document based (e.g. `/some-page`) requests
// This removes an errant console.log message from showing up.
Expand Down Expand Up @@ -99,6 +100,7 @@ export default defineConfig({
},
redirects: {
'/oss': '/oss/0',
'/opensource': '/oss/0'
'/opensource': '/oss/0',
'/linux-terminal': '/blog/linux-tools-improve-workflow'
}
})
Binary file modified public/docs/cv_Jamer_Rebolledo_en.pdf
Binary file not shown.
Binary file modified public/docs/cv_Jamer_Rebolledo_es.pdf
Binary file not shown.
Binary file added public/img/blog/bat-demo.webp
Binary file not shown.
Binary file added public/img/blog/exa.webp
Binary file not shown.
Binary file added public/img/blog/fzf-preview.webp
Binary file not shown.
Binary file added public/img/blog/fzf.webp
Binary file not shown.
Binary file added public/img/blog/gnu-linux.webp
Binary file not shown.
Binary file added public/img/blog/ripgrep.webp
Binary file not shown.
Binary file added public/img/blog/zoxide.webp
Binary file not shown.
Binary file added public/mandelbrot.webp
Binary file not shown.
2 changes: 1 addition & 1 deletion src/components/badges/badge.astro
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import './badge.css'
---

<div class=`animate-slide-in-top rounded ${props.class}`>
<span class='relative flex overflow-hidden rounded shadow shadow-black'>
<span class='relative flex overflow-hidden rounded shadow'>
<div
class='flex items-center h-full w-full cursor-pointer justify-center rounded px-3 py-1 text-sm font-bold text-slate-900 dark:text-emerald-100 backdrop-blur-3xl shadow shadow-black dark:shadow-gray-300 badge'
>
Expand Down
6 changes: 2 additions & 4 deletions src/components/badges/noAnimationBadge.astro
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@ const { props } = Astro
---

<div class=`animate-slide-in-top rounded ${props.class}`>
<span
class='relative flex overflow-hidden rounded shadow shadow-black border-2'
>
<span class='relative flex overflow-hidden rounded shadow border-2'>
<div
class='flex items-center h-full w-full cursor-pointer justify-center rounded px-3 py-1 text-sm font-bold text-slate-900 dark:text-emerald-300 shadow shadow-black dark:shadow-gray-300'
class='flex items-center h-full w-full cursor-pointer justify-center px-3 py-1 text-sm font-bold text-slate-900 dark:text-emerald-300 shadow shadow-black dark:shadow-gray-300'
>
<slot />
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/blog/blog-about.astro
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
const ABOUT_STYLES = [
'col-span-4',
'row-span-1',
'bg-slate-300/70',
'bg-slate-300/90',
'dark:bg-slate-900/90',
'dark:text-slate-300',
'rounded-[10px]',
Expand Down
17 changes: 9 additions & 8 deletions src/components/blog/last-entries.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const LAST_ENTRIES_STYLES = [
'col-span-6',
'row-span-5',
'bg-slate-300/80',
'bg-slate-300/90',
'dark:bg-slate-900/90',
'dark:text-slate-300',
'rounded-[10px]',
Expand All @@ -20,7 +20,8 @@ const LAST_ENTRIES_STYLES = [
'dark:text-slate-300',
'py-4',
'px-2',
'min-h-[25rem]'
'min-h-[25rem]',
'overflow-y-auto'
].join(' ')

import { entries } from '@data/blog.json'
Expand Down Expand Up @@ -89,12 +90,12 @@ export default function LastEntries({ lang = 'en' }: { lang?: string }) {
if (isNaN(dateA)) return 1
const dateB = new Date(b.date).getTime()
if (isNaN(dateB)) return -1
return -dateB + dateA
return -dateA + dateB
})
.map((entry, index) => {
return (
<Fragment key={index}>
<li class='font-secondary uppercase text-sm xl:text-base py-4 px-4 rounded-[10px] cursor-pointer hover:border-slate-400 dark:hover:border-slate-600/70 border-emerald-200 transition-all ease-in-out flex flex-col gap-2 shadow border-2'>
<li class='font-secondary uppercase text-sm xl:text-base py-4 px-4 rounded-[10px] cursor-pointer hover:border-slate-400 dark:hover:border-slate-600/70 dark:border-emerald-200 transition-all ease-in-out flex flex-col gap-2 shadow border-2 relative'>
<a
href={`${lang === 'en' ? entry.href : entry.hrefEs}`}
class='h-full'
Expand All @@ -103,18 +104,18 @@ export default function LastEntries({ lang = 'en' }: { lang?: string }) {
<span class='font-bold'>
{lang === 'en' ? entry.title : entry.titleEs}
</span>
<div class='xl:ml-auto'>
<div class='xl:ml-auto flex flex-col gap-1'>
<ReadTimeBadge
readTime={entry.readTimeMins}
lang={lang}
/>
<span class='px-1 py-0.5 dark:bg-emerald-300/60 bg-emerald-800/60 rounded text-emerald-100 dark:text-emerald-950 text-xs text-center'>
{entry.date}
</span>
</div>
</div>
<Badges badges={entry.tags} />
</a>
<span class='grow dark:bg-emerald-300/60 bg-emerald-800/60 p-2 rounded text-emerald-100 dark:text-emerald-950'>
{entry.date}
</span>
</li>
</Fragment>
)
Expand Down
2 changes: 1 addition & 1 deletion src/components/boxes/box.astro
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const { props }: { props: Props } = Astro

<article
data-animated={props.animated}
class=`bg-slate-300/80 dark:bg-slate-900/95 rounded-[10px] flex items-center justify-center font-bold dark:text-slate-300 font-primary w-full h-full flex-col text-base py-3 px-2 relative data-[animated]:animate-blurred-fade-in data-[animated]:animate-delay-${(props.delay ?? 0) * 100} ${props?.otherStyles}`
class=`bg-slate-300/90 dark:bg-slate-900/95 rounded-[10px] flex items-center justify-center font-bold dark:text-slate-300 font-primary w-full h-full flex-col text-base py-3 px-2 relative data-[animated]:animate-blurred-fade-in data-[animated]:animate-delay-${(props.delay ?? 0) * 100} ${props?.otherStyles}`
>
<slot />
</article>
2 changes: 1 addition & 1 deletion src/components/boxes/hbox.astro
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const { href, title } = props
href={href}
title={title}
data-animated={props.animated}
class=`card bg-slate-300/80 dark:bg-slate-900/95 rounded-[10px] flex items-center justify-center font-bold dark:text-slate-300 font-primary w-full h-full shadow-sm shadow-amber-400 text-base py-3 px-2 relative hover:border-2 hover:border-amber-500/60 [&_p]:text-amber-950 [&_p]:dark:text-amber-300 data-[animated]:animate-blurred-fade-in ${props?.otherStyles}`
class=`card bg-slate-300/90 dark:bg-slate-900/95 rounded-[10px] flex items-center justify-center font-bold dark:text-slate-300 font-primary w-full h-full shadow-sm shadow-amber-950 dark:shadow-amber-400 text-base py-3 px-2 relative hover:border-2 hover:border-amber-950 hover:dark:border-amber-500/60 [&_p]:text-amber-950 [&_p]:dark:text-amber-300 data-[animated]:animate-blurred-fade-in ${props?.otherStyles}`
>
<slot />
</a>
4 changes: 2 additions & 2 deletions src/components/featured-and-projects/icons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ export function DoubleUp() {
return (
<svg
viewBox='0 0 384 512'
class='w-4 h-4 xl:w-6 xl:h-6 fill-emerald-300 dark:fill-emerald-900'
class='w-4 h-4 xl:w-6 xl:h-6 fill-emerald-300 '
xmlns='http://www.w3.org/2000/svg'
>
<path d='M54.63 246.6L192 109.3l137.4 137.4C335.6 252.9 343.8 256 352 256s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25l-160-160c-12.5-12.5-32.75-12.5-45.25 0l-160 160c-12.5 12.5-12.5 32.75 0 45.25S42.13 259.1 54.63 246.6zM214.6 233.4c-12.5-12.5-32.75-12.5-45.25 0l-160 160c-12.5 12.5-12.5 32.75 0 45.25s32.75 12.5 45.25 0L192 301.3l137.4 137.4C335.6 444.9 343.8 448 352 448s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25L214.6 233.4z' />
Expand All @@ -133,7 +133,7 @@ export function DoubleDown() {
return (
<svg
viewBox='0 0 384 512'
class='w-4 h-4 xl:w-6 xl:h-6 fill-emerald-300 dark:fill-emerald-900'
class='w-4 h-4 xl:w-6 xl:h-6 fill-emerald-300'
xmlns='http://www.w3.org/2000/svg'
>
<path d='M169.4 278.6C175.6 284.9 183.8 288 192 288s16.38-3.125 22.62-9.375l160-160c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0L192 210.8L54.63 73.38c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L169.4 278.6zM329.4 265.4L192 402.8L54.63 265.4c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25l160 160C175.6 476.9 183.8 480 192 480s16.38-3.125 22.62-9.375l160-160c12.5-12.5 12.5-32.75 0-45.25S341.9 252.9 329.4 265.4z' />
Expand Down
6 changes: 4 additions & 2 deletions src/components/featured-and-projects/indexPicker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,10 @@ export default function IndexPicker({
key={i}
onClick={() => goToIndex(i)}
aria-label={`subpage ${i}`}
className={`w-3 h-3 rounded-full mx-1 ${
i === reference.value ? 'bg-cyan-300' : 'bg-cyan-950'
className={`w-4 h-3 rounded-full mx-1 ${
i === reference.value
? 'dark:bg-cyan-300 bg-cyan-900'
: 'dark:bg-cyan-950 bg-cyan-500'
}`}
/>
))}
Expand Down
2 changes: 1 addition & 1 deletion src/components/main/about-me-card.astro
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const { lang = 'en' }: Props = Astro.props
</p>
</li>
<li>
<p class='phrase dark:text-amber-300'>
<p class='phrase dark:text-amber-300 text-amber-950'>
{
lang === 'en'
? 'The best (and only) way to achieve something is by starting it'
Expand Down
2 changes: 1 addition & 1 deletion src/components/main/background.astro
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const isInBlog = Astro.url.pathname.includes('/blog/')
</style>
<div
data-blog={isInBlog}
class='fixed top-0 -z-50 h-[100dvh] w-[100dvw] data-[blog]:bg-cover data-[blog]:bg-center bg-[#222831] data-[blog]:bg-[url("/pizarra.webp")] data-[blog]:bg-opacity-5'
class='fixed top-0 -z-50 h-[100dvh] w-[100dvw] data-[blog]:bg-cover data-[blog]:bg-center bg-[#222831] data-[blog]:bg-[url("/mandelbrot.webp")] data-[blog]:bg-opacity-5'
>
<div class='noise'></div>
</div>
66 changes: 66 additions & 0 deletions src/components/main/blog-image.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
---
import { Image } from 'astro:assets'
interface Props {
src: string
}
const { src } = Astro.props
---

<style>
img {
--b: 8px; /* border thickness*/
--s: 60px; /* size of the corner*/
--g: 14px; /* the gap*/
--c: #edc951;

padding: calc(var(--b) + var(--g));
background-image: conic-gradient(
from 90deg at top var(--b) left var(--b),
#0000 25%,
var(--c) 0
),
conic-gradient(
from -90deg at bottom var(--b) right var(--b),
#0000 25%,
var(--c) 0
);
background-position:
var(--_p, 0%) var(--_p, 0%),
calc(100% - var(--_p, 0%)) calc(100% - var(--_p, 0%));
background-size: var(--s) var(--s);
background-repeat: no-repeat;
cursor: pointer;
transition:
background-position 0.3s var(--_i, 0.3s),
background-size 0.3s calc(0.3s - var(--_i, 0.3s));
}
img.alt {
background-image: conic-gradient(
from 180deg at top var(--b) right var(--b),
#0000 25%,
var(--c) 0
),
conic-gradient(
from 0deg at bottom var(--b) left var(--b),
#0000 25%,
var(--c) 0
);
background-position:
calc(100% - var(--_p, 0%)) var(--_p, 0%),
var(--_p, 0%) calc(100% - var(--_p, 0%));
}
img:hover {
background-size: calc(100% - var(--g)) calc(100% - var(--g));
--_p: calc(var(--g) / 2);
--_i: 0s;
}
</style>
<Image
src={src}
alt='blog image with rounded border'
width='250'
height='250'
class='rounded'
/>
10 changes: 6 additions & 4 deletions src/components/main/buttons.astro
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@
interface Props {
href?: string
rounded?: boolean
border?: boolean
}
const { href, rounded = true }: Props = Astro.props
const { href, rounded = true, border = false }: Props = Astro.props
const BUTTONS_STYLES = [
'col-span-1 xl:col-span-2',
Expand All @@ -21,11 +22,12 @@ const BUTTONS_STYLES = [
'xl:h-full',
'transition-all',
'duration-200',
'dark:bg-slate-900/95',
'dark:bg-slate-900',
'dark:text-slate-100',
'bg-slate-300/80',
'bg-slate-300',
'p-2',
'font-bold'
'font-bold',
border && 'border-2 border-slate-50'
// 'card'
].join(' ')
Expand Down
4 changes: 2 additions & 2 deletions src/components/main/container.astro
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
justify-items: center;
color: white;
border-radius: 0.5rem;
background-color: #1b383ccc;
font-family: 'Rubik Doodle Subset', sans-serif;
background-color: #1b383c;
font-family: 'Fira Sans', sans-serif;
text-align: center;
padding: 1rem;
/* box-shadow: 0 0.05rem 0 0.1rem #000; */
Expand Down
4 changes: 2 additions & 2 deletions src/components/main/footer.astro
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ import {
@media (min-width: 640px) {
footer {
height: 36px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
/* padding-top: 0.5rem; */
/* padding-bottom: 0.5rem; */
}
}
</style>
Expand Down
2 changes: 1 addition & 1 deletion src/components/main/working-on.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function ProjectCard({ lang = 'en', project }: ProjectCardProps) {
const days = Math.floor((Date.now() - date.getTime()) / (1000 * 60 * 60 * 24))
return (
<li class='grid justify-items-center items-center gap-1 [&>*]:text-center relative [&>span]:text-sm [&>span]:xl:text-base w-full'>
<div class='absolute bottom-0 right-2 font-secondary font-bold text-xs dark:bg-emerald-700 bg-emerald-500 dark:text-emerald-200 text-emerald-950 px-1 shadow shadow-black/90 py-0.5 rounded'>
<div class='absolute bottom-0 right-2 font-secondary font-bold text-xs dark:bg-emerald-700 bg-emerald-500 dark:text-emerald-50 text-emerald-950 px-1 shadow shadow-black/90 py-0.5 rounded'>
{days}+ {lang === 'en' ? 'days' : 'días'}
</div>
<h1 class='text-sm font-primary dark:text-emerald-100 text-emerald-950 bg-emerald-500 dark:bg-emerald-900 px-2 py-1 shadow shadow-black/90 rounded'>
Expand Down
14 changes: 14 additions & 0 deletions src/data/blog.json
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,20 @@
"pwa",
"webdev"
]
},
{
"title": "Linux Terminal Tools that will improve your workflow and boost productivity",
"date": "2024-May-13",
"titleEs": "Herramientas de terminal en Linux que mejorarán tu flujo de trabajo y productividad",
"href": "blog/linux-tools-improve-workflow",
"hrefEs": "blog/herramientas-linux-mejorar-flujo-trabajo",
"readTimeMins": "10",
"tags": [
"linux",
"tools",
"workflow",
"terminal"
]
}
]
}
20 changes: 17 additions & 3 deletions src/layouts/blog-layout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,25 @@ import '@fontsource/fira-mono'
scroll-behavior: smooth;
scrollbar-width: thin;
}

/* Tables */
#mdx-content table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin: 1em 0;
font-size: 0.9em;
display: block;
overflow-x: auto;
border-radius: 0.5em;
border: 1px solid #fff;
}
</style>
<div
class='dark:bg-[#1b383c] py-8 bg-[#75A47F] xl:h-[100dvh] h-[95dvh] lg:w-[80dvw] md:w-[95dvw] w-[65dvw] xs:w-[95dvw] mx-auto px-4 dark:text-emerald-50 [&>*]:text-balance overflow-y-auto max-h-[100dvh] [scrollbar-color:#1b383c_#9DBC98] [scrollbar-width:thin] relative'
class='dark:bg-gray-900/95 py-8 bg-[#76ABAE] xl:h-[100dvh] h-[95dvh] lg:w-[80dvw] md:w-[95dvw] w-[65dvw] xs:w-[95dvw] mx-auto px-4 dark:text-emerald-50 [&>*]:text-balance overflow-y-auto max-h-[100dvh] [scrollbar-width:thin] relative'
>
<aside class='sticky -top-5'>
<Buttons href={frontmatter.hrefLang} />
<Buttons href={frontmatter.hrefLang} border />
</aside>
<br />
<header
Expand All @@ -41,7 +54,8 @@ import '@fontsource/fira-mono'
</header>
<br />
<div
class='[&>h1]:font-bold font-secondary font-semibold text-sm [&_h1]:text-emerald-900 [&_h1]:dark:text-emerald-300 [&_h2]:text-emerald-900 [&_h2]:dark:text-emerald-300 [&_h3]:text-emerald-900 [&_h3]:dark:text-emerald-300 [&_h1]:text-xl [&_h1]:xl:text-3xl [&_h1]:font-bold [&_h2]:font-semibold [&_h2]:text-lg [&_h2]:xl:text-2xl [&_h3]:text-base [&_h3]:xl:text-xl [&_h3]:font-semibold [&_p]:text-pretty [&_ul]:m-4 [&_ul]:list-disc max-w-[800px] [&_a]:font-semibold [&_a]:text-[#153448] [&_a]:dark:text-cyan-300 flex flex-col gap-2 mb-8 [&_blockquote]:[font-secondary] [&_code]:[font-firaMono] [&_a]:underline [&_a]:[target=_blank] [&_pre]:p-2 [&_pre]:overflow-x-hidden'
class='[&>h1]:font-bold font-secondary font-semibold text-sm [&_h1]:text-emerald-950 [&_h1]:dark:text-emerald-300 [&_h2]:text-emerald-950 [&_h2]:dark:text-emerald-300 [&_h3]:text-emerald-900 [&_h3]:dark:text-emerald-300 [&_h1]:text-xl [&_h1]:xl:text-3xl [&_h1]:font-bold [&_h2]:font-semibold [&_h2]:text-lg [&_h2]:xl:text-2xl [&_h3]:text-base [&_h3]:xl:text-xl [&_h3]:font-semibold [&_p]:text-pretty [&_ul]:m-4 [&_ul]:list-disc max-w-[800px] [&_a]:font-semibold [&_a]:text-[#153448] [&_a]:dark:text-cyan-300 flex flex-col gap-5 mb-8 [&_blockquote]:[font-secondary] [&_code]:[font-firaMono] [&_a]:underline [&_a]:[target=_blank] [&_pre]:p-2 [&_pre]:overflow-x-hidden px-2 [&_table]:border [&_table]:rounded [&_table]:text-center [&_thead]:border [&_table]:p-2'
id='mdx-content'
>
<slot />
</div>
Expand Down
5 changes: 4 additions & 1 deletion src/layouts/layout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,10 @@ import ReloadPrompt from '@components/main/ReloadPrompt.astro'
<title>{title}</title>
<ViewTransitions />
</head>
<body data-dev={import.meta.env.DEV} class='data-[dev]:debug-screens'>
<body
data-dev={false && import.meta.env.DEV}
class='data-[dev]:debug-screens'
>
<wc-toast class='font-secondary'></wc-toast>
<Background />
<main class='min-h-[100dvh] grid place-content-center'>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/blog/convert-astro-app-to-pwa.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ hrefLang: ../es/blog/convertir-astro-app-en-pwa
import { Image } from 'astro:assets'
import Code from '@components/main/code.astro'
import { pwaSeoConfig } from '@data/codes.ts'
import BlogImage from '@components/main/blog-image.astro'

<div align="center">
<Image src='/img/blog/computer.webp' alt='blog image for pwa article'
width="250" height="250" />
<BlogImage src="/img/blog/computer.webp" />
</div>

## Disclaimer
Expand Down
Loading

0 comments on commit 123a929

Please sign in to comment.