From 509e971a9dccc0aaf76b4d2bc4f1cda6b6ad49f5 Mon Sep 17 00:00:00 2001 From: Sviatoslav Makhynko Date: Sat, 30 Nov 2024 19:25:16 +0100 Subject: [PATCH 1/5] fix: file path for inlineSvg plugin --- tailwind.config.cjs | 111 +++++++++++++++++++++++--------------------- 1 file changed, 58 insertions(+), 53 deletions(-) diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 7548ca82f8..91ab1d498d 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -1,17 +1,18 @@ const { addDynamicIconSelectors } = require('@iconify/tailwind'); -const plugin = require('tailwindcss/plugin') +const plugin = require('tailwindcss/plugin'); const fs = require('node:fs'); +const path = require('node:path'); const parser = require('node-html-parser'); const svgo = require('svgo'); -const colors = require('tailwindcss/colors') +const colors = require('tailwindcss/colors'); -const defaultTheme = require("tailwindcss/defaultTheme"); +const defaultTheme = require('tailwindcss/defaultTheme'); const inlineSvgs = { - 'hero': './src/assets/image/hero-bg.svg', + hero: './src/assets/image/hero-bg.svg', 'landing-search-top': './src/assets/image/divider/landing_search_top.svg', 'header-nixdarkblue': './src/assets/image/divider/header_nixdarkblue.svg', -} +}; const shadow = { md: '0 8px 2px rgba(0,0,0,0.2)', @@ -21,13 +22,15 @@ const shadow = { }; function inlineSvg({ svg }) { - const file = fs.readFileSync(svg, "utf8"); + const filePath = path.resolve(__dirname, svg); + const file = fs.readFileSync(filePath, 'utf8'); const stringified = parser.parse(file).toString(); + const optimized = svgo.optimize(stringified, { multipass: true, plugins: [ { - name: "preset-default", + name: 'preset-default', params: { overrides: { removeViewBox: false, @@ -37,76 +40,78 @@ function inlineSvg({ svg }) { }, ], }); + const base64 = Buffer.from(optimized.data).toString('base64'); - return "data:image/svg+xml;base64," + base64; + + return 'data:image/svg+xml;base64,' + base64; } /** @type {import('tailwindcss').Config} */ module.exports = { content: [ - "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}", - "./node_modules/asciinema-player/**/*.js" + './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}', + './node_modules/asciinema-player/**/*.js', ], theme: { fontFamily: { - sans: ["Roboto Flex Variable", ...defaultTheme.fontFamily.sans], - serif: ["Overpass Variable", ...defaultTheme.fontFamily.serif], - heading: ["Overpass Variable", ...defaultTheme.fontFamily.sans], - mono: ["Fira Code Variable", ...defaultTheme.fontFamily.mono], + sans: ['Roboto Flex Variable', ...defaultTheme.fontFamily.sans], + serif: ['Overpass Variable', ...defaultTheme.fontFamily.serif], + heading: ['Overpass Variable', ...defaultTheme.fontFamily.sans], + mono: ['Fira Code Variable', ...defaultTheme.fontFamily.mono], }, colors: { - "nix-blue": { - "extralight": "#f2f8fd", // nixlighterblue - "lighter": "#e6ecf5", // nixlighterblue-dimmed - "light": "#7ebae4", // nixlightblue - DEFAULT: "#5277c3", // nixdarkblue - "dark": "#405D99", // nixsemidarkblue - "darker": "#27385d", // nixdarkerblue + 'nix-blue': { + extralight: '#f2f8fd', // nixlighterblue + lighter: '#e6ecf5', // nixlighterblue-dimmed + light: '#7ebae4', // nixlightblue + DEFAULT: '#5277c3', // nixdarkblue + dark: '#405D99', // nixsemidarkblue + darker: '#27385d', // nixdarkerblue }, - "nix-orange": { - "lighter": "#fff5e1", // nixlightorange - DEFAULT: "#ffab0d", // nixorange - "dark": "#ff8657", // nixdarkorange - "darker": "#cc3900", // nixdarkerorange + 'nix-orange': { + lighter: '#fff5e1', // nixlightorange + DEFAULT: '#ffab0d', // nixorange + dark: '#ff8657', // nixdarkorange + darker: '#cc3900', // nixdarkerorange }, - "nix-green": { - DEFAULT: "#6ad541", // nixgreen - "dark": "#51ba29", // nixdarkgreen + 'nix-green': { + DEFAULT: '#6ad541', // nixgreen + dark: '#51ba29', // nixdarkgreen }, - "gray": colors.gray, - "white": colors.white, - "black": colors.black, - "transparent": colors.transparent, + gray: colors.gray, + white: colors.white, + black: colors.black, + transparent: colors.transparent, }, boxShadow: shadow, dropShadow: shadow, extend: { borderWidth: { - '0.5': '0.5px', - '1': '1px' + 0.5: '0.5px', + 1: '1px', }, listStyleType: { - "circle": "circle", + circle: 'circle', }, textDecorationThickness: { - '0.5': '0.5px' + 0.5: '0.5px', }, backgroundSize: { - 'divider': 'auto 100%', + divider: 'auto 100%', }, }, screens: { - 'sm': '480px', - 'md': '768px', - 'lg': '992px', - 'xl': '1200px', + sm: '480px', + md: '768px', + lg: '992px', + xl: '1200px', }, fontSize: { - 'xs': '0.75rem', - 'sm': '0.875rem', - 'base': '1rem', - 'lg': '1.2rem', - 'xl': '1.4rem', + xs: '0.75rem', + sm: '0.875rem', + base: '1rem', + lg: '1.2rem', + xl: '1.4rem', '2xl': '1.625rem', '3xl': '1.953rem', '4xl': '2.441rem', @@ -118,16 +123,16 @@ module.exports = { }, plugins: [ addDynamicIconSelectors(), - plugin(function({ addUtilities }) { - res = {} + plugin(function ({ addUtilities }) { + res = {}; for (const [key, value] of Object.entries(inlineSvgs)) { res[`.inline-svg-${key}`] = { 'background-image': `url(${inlineSvg({ svg: value })})`, - } + }; } - addUtilities(res) - }) + addUtilities(res); + }), ], -} +}; From 8e8c4e4e76b0c59410661fd5552cce6ee11bd555 Mon Sep 17 00:00:00 2001 From: Sviatoslav Makhynko Date: Sat, 30 Nov 2024 19:25:31 +0100 Subject: [PATCH 2/5] add: Link component --- src/components/util/Link.astro | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/components/util/Link.astro diff --git a/src/components/util/Link.astro b/src/components/util/Link.astro new file mode 100644 index 0000000000..e05c3fd148 --- /dev/null +++ b/src/components/util/Link.astro @@ -0,0 +1,17 @@ +--- +import type { HTMLAttributes } from 'astro/types'; + +interface Props extends HTMLAttributes<'a'> {} + +const { href, ...props } = Astro.props; + +let linkProps = { href, ...props }; + +if (!!href && href.toString().startsWith('http')) { + linkProps = { ...linkProps, target: '_blank', rel: 'noopener noreferrer' }; +} +--- + + + + From f2eec340c48faeac18a5c4d076dfe4376f4b54c6 Mon Sep 17 00:00:00 2001 From: Sviatoslav Makhynko Date: Sat, 30 Nov 2024 19:46:44 +0100 Subject: [PATCH 3/5] update: twitter to X --- src/content/menus/footer.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/menus/footer.yaml b/src/content/menus/footer.yaml index 22845e10f7..9af45cdb52 100644 --- a/src/content/menus/footer.yaml +++ b/src/content/menus/footer.yaml @@ -36,8 +36,8 @@ sections: social: - name: Mastodon link: https://chaos.social/@nixos_org - - name: Twitter - link: https://twitter.com/nixos_org + - name: X + link: https://x.com/nixos_org - name: Youtube link: https://www.youtube.com/channel/UC3vIimi9q4AT8EgxYp_dWIw - name: GitHub From aeef45a306af04c3be9be883706b75b2f7624250 Mon Sep 17 00:00:00 2001 From: Sviatoslav Makhynko Date: Sat, 30 Nov 2024 19:48:56 +0100 Subject: [PATCH 4/5] update: move header & footer to components, small improvements & fixes --- src/{layouts => components}/Footer.astro | 36 ++++++++++++++---------- src/{layouts => components}/Header.astro | 29 +++++++++---------- src/layouts/Layout.astro | 12 ++++---- src/layouts/MDXLayout.astro | 6 ++-- 4 files changed, 43 insertions(+), 40 deletions(-) rename src/{layouts => components}/Footer.astro (73%) rename src/{layouts => components}/Header.astro (87%) diff --git a/src/layouts/Footer.astro b/src/components/Footer.astro similarity index 73% rename from src/layouts/Footer.astro rename to src/components/Footer.astro index 41988e07c8..8fab00ef6e 100644 --- a/src/layouts/Footer.astro +++ b/src/components/Footer.astro @@ -1,15 +1,18 @@ --- import { Icon } from 'astro-icon/components'; import { getEntry } from 'astro:content'; -import Container from '../components/layout/Container.astro'; -import InlineSVG from '../components/util/InlineSVG.astro'; + +import Container from '@/components/layout/Container.astro'; +import InlineSVG from '@/components/util/InlineSVG.astro'; +import Link from '@/components/util/Link.astro'; + const footerMenu = await getEntry('menus', 'footer'); ---