me
/
ethanreece.com
Archived
1
0
Fork 0
Code Pull Requests Actions Activity

Improve link typography layout

main
Ethan Reece 2023-08-19 14:04:23 -05:00
parent d13fbbcf43
commit e7b89420a1
Signed by: me
GPG Key ID: D3993665FF92E1C3
9 changed files with 116 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
astro.config.mjs
View File

@ -1,23 +1,42 @@
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import { astroImageTools } from 'astro-imagetools';
import robotsTxt from 'astro-robots-txt';
import sitemap from '@astrojs/sitemap';
import prefetch from '@astrojs/prefetch';
import partytown from '@astrojs/partytown';
import icon from 'astro-icon';
import mdx from '@astrojs/mdx';
import compress from "astro-compress";
import mdx from '@astrojs/mdx'
import partytown from '@astrojs/partytown'
import prefetch from '@astrojs/prefetch'
import sitemap from '@astrojs/sitemap'
import tailwind from '@astrojs/tailwind'
import { defineConfig } from 'astro/config'
import compress from 'astro-compress'
import icon from 'astro-icon'
import { astroImageTools } from 'astro-imagetools'
import robotsTxt from 'astro-robots-txt'
import rehypeExternalLinks from 'rehype-external-links'
// https://astro.build/config
export default defineConfig({
site: 'https://ethanreece.com',
integrations: [tailwind(), astroImageTools, robotsTxt(), sitemap(), prefetch(), partytown(), mdx(), icon({
include: {
heroicons: ['*'],
'fa-brands': ['*'],
'simple-icons': ['*']
}
}), compress()]
});
site: 'https://ethanreece.com',
integrations: [
tailwind(),
astroImageTools,
robotsTxt(),
sitemap(),
prefetch(),
partytown(),
mdx({
syntaxHighlight: 'shiki',
shikiConfig: { theme: 'dracula' },
rehypePlugins: [
rehypeExternalLinks,
{
target: '_blank',
},
],
}),
icon({
include: {
heroicons: ['*'],
'fa-brands': ['*'],
'simple-icons': ['*'],
},
}),
compress(),
],
})

1
package.json
View File

@ -24,6 +24,7 @@
"astro-navbar": "^2.0.1",
"astro-robots-txt": "^0.5.0",
"astro-seo": "^0.7.4",
"rehype-external-links": "^2.1.0",
"sharp": "^0.32.1",
"tailwind-bootstrap-grid": "^5.0.1",
"tailwindcss-hero-patterns": "^0.1.2"

27
pnpm-lock.yaml
View File

@ -47,6 +47,9 @@ dependencies:
astro-seo:
specifier: ^0.7.4
version: 0.7.4
rehype-external-links:
specifier: ^2.1.0
version: 2.1.0
sharp:
specifier: ^0.32.1
version: 0.32.1
@ -3840,6 +3843,13 @@ packages:
web-namespaces: 2.0.1
dev: false
/hast-util-is-element@2.1.3:
resolution: {integrity: sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==}
dependencies:
'@types/hast': 2.3.4
'@types/unist': 2.0.6
dev: false
/hast-util-parse-selector@3.1.1:
resolution: {integrity: sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==}
dependencies:
@ -4041,6 +4051,11 @@ packages:
side-channel: 1.0.4
dev: true
/is-absolute-url@4.0.1:
resolution: {integrity: sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==}
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
dev: false
/is-alphabetical@2.0.1:
resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
dev: false
@ -6254,6 +6269,18 @@ packages:
functions-have-names: 1.2.3
dev: true
/rehype-external-links@2.1.0:
resolution: {integrity: sha512-2YMJZVM1hxZnwl9IPkbN5Pjn78kXkAX7lq9VEtlaGA29qIls25vZN+ucNIJdbQUe+9NNFck17BiOhGmsD6oLIg==}
dependencies:
'@types/hast': 2.3.4
extend: 3.0.2
hast-util-is-element: 2.1.3
is-absolute-url: 4.0.1
space-separated-tokens: 2.0.2
unified: 10.1.2
unist-util-visit: 4.1.2
dev: false
/rehype-parse@8.0.4:
resolution: {integrity: sha512-MJJKONunHjoTh4kc3dsM1v3C9kGrrxvA3U8PxZlP2SjH8RNUSrb+lF7Y0KVaUDnGH2QZ5vAn7ulkiajM9ifuqg==}
dependencies:

2
src/components/content/index/Section.astro
View File

@ -22,7 +22,7 @@ const anchorDistance = 'mt-[-5rem] pt-[5rem]'
}`}
>
<div class={anchorDistance} id={slug}>
<div class={`mx-auto max-w-page-w space-y-paragraph`}>
<div class={`mx-auto max-w-page-w space-y-paragraph prose`}>
<h2 class={`font-bold ${fontSizeH2}`}>
{title}
</h2>

12
src/components/content/index/Socials.astro
View File

@ -29,19 +29,19 @@ const socials: Social[] = [
{
name: 'GitHub (Personal)',
profile: 'Sudoer777',
url: 'https://github.com/sudoer777',
url: 'https://gh.sudoer.ch/sudoer777',
icon: 'fa-brands:github',
},
{
name: 'GitHub (R-Technics)',
profile: 'ethanreece-rtechnics',
url: 'https://github.com/ethanreece-rtechnics',
url: 'https://gh.sudoer.ch/ethanreece-rtechnics',
icon: 'heroicons:briefcase-solid',
},
{
name: 'GitHub (Scrumfish)',
profile: 'ethanreece-scrumfish',
url: 'https://github.com/ethanreece-scrumfish',
url: 'https://gh.sudoer.ch/ethanreece-scrumfish',
icon: 'heroicons:briefcase-solid',
},
{
@ -52,8 +52,8 @@ const socials: Social[] = [
},
{
name: 'Mastodon (GoToSocial)',
profile: 'me@gts.sudoer.ch',
url: 'https://gts.sudoer.ch/@me',
profile: '@me@gts.sudoer.ch',
url: 'https://elk.sudoer.ch/@me@gts.sudoer.ch',
icon: 'fa-brands:mastodon',
},
{
@ -71,7 +71,7 @@ const socials: Social[] = [
]
---
<div class="flex flex-col">
<div class="not-prose flex flex-col">
{
socials.map((s) => (
<div class="flex">

2
src/components/content/index/Subsection.astro
View File

@ -21,7 +21,7 @@ const background = 'bg-[#00000020]'
rel="noopener noreferrer"
class={`block md:rounded ${
url &&
`hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none`
`hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none not-prose no-underline font-extralight`
} ${fontSize} ${margin} ${background}`}
>
<div class={`mx-auto w-full md:w-auto max-w-page-w space-y-paragraph`}>

6
src/layouts/Article.astro
View File

@ -11,16 +11,16 @@ const { title, description } = Astro.props.frontmatter
---
<Base title={`${title} - Ethan Reece`} description={description}>
<article class="px-screen-x">
<article class="prose mx-auto px-screen-x">
<div class="mx-auto max-w-page-w">
<section>
<header>
<h1 class="pb-[1.5rem] pt-[.75rem] text-[2rem] font-bold">
<h1>
{title}
</h1>
</header>
</section>
<section class="space-y-paragraph">
<section>
<slot />
</section>
</div>

38
src/pages/credits.mdx
View File

@ -3,26 +3,20 @@ layout: '../layouts/Article.astro'
title: 'Site Credits'
---
Framework: Astro with TypeScript and MDX
This site was built using the following tools:
Runtime: Node.js
Version managemnet: asdf
Package management: pnpm
Layout: Tailwind CSS (with Astro extension)
Font: JetBrains Mono (using Fontsource)
Icons: Hero Icons (using Astro Icon)
Circuitboard Pattern: Hero Patterns
IDE: VSCodium
Code formatting: Prettier, ESLint, Astro MDX
Optimization: Astro Prefetch, Astro Sitemap, Astro Imagetools (using Sharp), Astro Robots.txt, Astro SEO, Autoprefixer, CSSNano
Source code: On Forgejo
| | |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| **Framework:** | Astro with TypeScript and MDX |
| **Runtime:** | Node.js |
| **Version management:** | rtx |
| **Package management:** | pnpm |
| **Layout:** | Tailwind CSS (with Astro extension) |
| **Font:** | JetBrains Mono (using Fontsource) |
| **Icons:** | Hero Icons, Font Awesome Brands, Simple Icons (using Astro Icon) |
| **Circuitboard Pattern:** | Hero Patterns |
| **IDE:** | VSCodium |
| **Code formatting:** | Prettier, ESLint, Astro MDX |
| **Optimization:** | Astro Prefetch, Astro Sitemap, Astro Imagetools (using Sharp), Astro Robots.txt, Astro SEO, Astro Compress, Autoprefixer, CSSNano |
| **Contact Frontends** | Elk (Mastodon/GoToSocial), GotHub (GitHub) |
| **Source code:** | [On Forgejo](https://git.sudoer.ch/me/ethanreece.com) |

24
tailwind.config.cjs
View File

@ -4,7 +4,24 @@ const heropatterns = require('tailwindcss-hero-patterns/src/patterns')
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {},
extend: {
typography: {
DEFAULT: {
css: {
color: 'black',
fontWeight: '200',
h1: {
paddingTop: '1rem',
},
'a:hover': {
background: 'black',
color: 'white',
textDecoration: 'none',
},
},
},
},
},
heroPatterns: {
circuitboard: heropatterns.circuitboard,
},
@ -44,5 +61,8 @@ module.exports = {
md: '768px',
},
},
plugins: [require('tailwindcss-hero-patterns')],
plugins: [
require('tailwindcss-hero-patterns'),
require('@tailwindcss/typography'),
],
}