From c77c58e18143233be042c4980a6ed08ae9beac52 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 16 May 2022 19:40:23 +0200 Subject: chore: adjust and complete missing styles * add logo to topics pages and links * add Prism styles to articles * and a few other adjustements --- src/styles/pages/partials/_article-prism.scss | 301 ++++++++++++++++++++++++++ 1 file changed, 301 insertions(+) create mode 100644 src/styles/pages/partials/_article-prism.scss (limited to 'src/styles/pages/partials/_article-prism.scss') diff --git a/src/styles/pages/partials/_article-prism.scss b/src/styles/pages/partials/_article-prism.scss new file mode 100644 index 0000000..025e0c0 --- /dev/null +++ b/src/styles/pages/partials/_article-prism.scss @@ -0,0 +1,301 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; + +@mixin styles { + .code-toolbar { + --gutter-size: clamp(#{fun.convert-px(75)}, 20vw, #{fun.convert-px(90)}); + --toolbar-height: #{fun.convert-px(90)}; + + position: relative; + margin-top: calc(var(--toolbar-height) + var(--spacing-md)); + + @include mix.media("screen") { + @include mix.dimensions("2xs") { + --toolbar-height: #{fun.convert-px(60)}; + } + } + + .toolbar { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + justify-items: end; + width: 100%; + height: var(--toolbar-height); + position: absolute; + top: calc(var(--toolbar-height) * -1); + left: 0; + right: 0; + background: var(--color-bg-tertiary); + border: fun.convert-px(1) solid var(--color-border); + + @include mix.media("screen") { + @include mix.dimensions("2xs") { + display: flex; + flex-flow: row wrap; + } + } + } + + .toolbar-item { + display: flex; + align-items: center; + } + + .toolbar-item:nth-child(1) { + grid-column: 1; + grid-row: 1 / 3; + margin-right: auto; + padding: 0 var(--spacing-sm); + background: var(--color-bg-code); + border-right: fun.convert-px(1) solid var(--color-border); + color: var(--color-primary-darker); + font-size: var(--font-size-sm); + font-weight: 600; + } + + .toolbar-item:nth-child(2) { + grid-column: 2; + grid-row: 1; + margin: 0 var(--spacing-2xs); + } + + .toolbar-item:nth-child(3) { + grid-column: 2; + grid-row: 2; + margin: 0 var(--spacing-2xs); + } + } + + pre[class*="language-"] { + max-height: max(30vw, fun.convert-px(300)); + margin: var(--spacing-md) 0; + padding: 0; + position: relative; + background: var(--color-bg-secondary); + color: var(--color-fg); + border: fun.convert-px(1) solid var(--color-border); + + > code { + display: block; + padding: var(--spacing-xs) 0 var(--spacing-xs) + calc(var(--gutter-size) + var(--spacing-xs)); + } + + .line-numbers-rows, + .command-line-prompt { + width: var(--gutter-size); + min-height: 100%; + padding: var(--spacing-xs) var(--spacing-2xs); + position: absolute; + top: 0; + left: 0; + pointer-events: none; + user-select: none; + background: var(--color-bg); + border-right: fun.convert-px(1) solid var(--color-border); + } + + .token { + &.comment, + &.doc-comment { + color: var(--color-fg-light); + } + + &.punctuation { + color: var(--color-fg); + } + + &.attr-name, + &.hexcode, + &.inserted, + &.string { + color: var(--color-token-green); + } + + &.class, + &.coord, + &.id, + &.function { + color: var(--color-token-purple); + } + + &.builtin, + &.builtin.class-name, + &.property-access, + &.regex, + &.scope { + color: var(--color-token-magenta); + } + + &.class-name, + &.constant, + &.global, + &.interpolation, + &.key, + &.package, + &.this, + &.title, + &.variable { + color: var(--color-token-blue); + } + + &.combinator, + &.keyword, + &.operator, + &.pseudo-class, + &.pseudo-element, + &.rule, + &.selector, + &.unit { + color: var(--color-token-orange); + } + + &.attr-value, + &.boolean, + &.number { + color: var(--color-token-yellow); + } + + &.delimiter, + &.doctype, + &.parameter, + &.parent, + &.property, + &.shebang, + &.tag { + color: var(--color-token-cyan); + } + + &.deleted { + color: var(--color-token-red); + } + + &.punctuation.brace-hover, + &.punctuation.brace-selected { + background: var(--color-bg); + outline: solid fun.convert-px(1) var(--color-primary-light); + } + } + + span.inline-color-wrapper { + background: url(fun.encode-svg( + '' + )); + + /* Prevent glitches where 1px from the repeating pattern could be seen. */ + background-position: center; + background-size: 110%; + + display: inline-block; + height: 1.1ch; + width: 1.1ch; + margin: 0 0.5ch 0 0; + border: fun.convert-px(1) solid var(--color-bg); + outline: fun.convert-px(1) solid var(--color-border-dark); + overflow: hidden; + } + + span.inline-color { + display: block; + + /* To prevent visual glitches again */ + height: 120%; + width: 120%; + } + } + + pre.line-numbers { + counter-reset: lineNumber; + + .line-numbers-rows { + > span { + counter-increment: lineNumber; + + &::before { + display: block; + padding: 0 var(--spacing-xs); + content: counter(lineNumber); + color: var(--color-primary-darker); + text-align: right; + line-height: var(--line-height); + } + } + } + } + + pre.command-line { + --gutter-size: clamp(#{fun.convert-px(195)}, 48vw, #{fun.convert-px(235)}); + + ~ .toolbar { + --gutter-size: clamp( + #{fun.convert-px(195)}, + 48vw, + #{fun.convert-px(235)} + ); + } + + .command-line-prompt { + > span { + &::before { + display: block; + content: ""; + } + + &[data-user]::before { + content: "[" attr(data-user) "@" attr(data-host) "] $"; + } + + &[data-user="root"]::before { + content: "[" attr(data-user) "@" attr(data-host) "] #"; + } + + &[data-prompt]::before { + content: attr(data-prompt); + } + } + } + } + + .copy-to-clipboard-button, + .prism-color-scheme-button { + display: block; + padding: fun.convert-px(3) var(--spacing-xs); + background: var(--color-bg); + border: 0.4ex solid var(--color-primary); + border-radius: fun.convert-px(30); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow), + fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) + var(--color-shadow), + fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) + var(--color-shadow); + color: var(--color-primary); + font-size: var(--font-size-sm); + font-weight: 600; + transition: all 0.35s ease-in-out 0s; + + &:hover, + &:focus { + transform: translateX(#{fun.convert-px(-2)}) + translateY(#{fun.convert-px(-2)}); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow-light), + fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) + var(--color-shadow-light), + fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) + var(--color-shadow-light), + fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) fun.convert-px(-3) + var(--color-shadow-light); + } + + &:focus { + text-decoration: underline var(--color-primary) fun.convert-px(3); + } + + &:active { + text-decoration: none; + transform: translateY(#{fun.convert-px(2)}); + box-shadow: 0 0 0 0 var(--color-shadow); + } + } +} -- cgit v1.2.3 From bbd63400f94b43fde04449e0c71d14763d893e6a Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 19 May 2022 19:46:24 +0200 Subject: refactor: rewrite Prism hooks and providers It avoid some hydratation errors on project pages (not in article however) and the hooks are now reusable. --- src/components/molecules/forms/motion-toggle.tsx | 3 +- src/components/molecules/layout/code.tsx | 25 +--- src/components/templates/page/page-layout.tsx | 5 +- src/pages/article/[slug].tsx | 54 +++++-- src/styles/pages/partials/_article-prism.scss | 2 +- src/utils/helpers/strings.ts | 10 ++ src/utils/hooks/use-add-classname.tsx | 34 +++++ src/utils/hooks/use-add-prism-class-attr.tsx | 60 -------- src/utils/hooks/use-attributes.tsx | 35 ++++- src/utils/hooks/use-code-blocks-theme.tsx | 22 --- src/utils/hooks/use-prism-plugins.tsx | 115 -------------- src/utils/hooks/use-prism.tsx | 182 +++++++++++++++++++++++ src/utils/hooks/use-query-selector-all.tsx | 12 +- src/utils/providers/prism-theme.tsx | 78 ++++------ 14 files changed, 346 insertions(+), 291 deletions(-) create mode 100644 src/utils/hooks/use-add-classname.tsx delete mode 100644 src/utils/hooks/use-add-prism-class-attr.tsx delete mode 100644 src/utils/hooks/use-code-blocks-theme.tsx delete mode 100644 src/utils/hooks/use-prism-plugins.tsx create mode 100644 src/utils/hooks/use-prism.tsx (limited to 'src/styles/pages/partials/_article-prism.scss') diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx index e3bb11a..cbe38fe 100644 --- a/src/components/molecules/forms/motion-toggle.tsx +++ b/src/components/molecules/forms/motion-toggle.tsx @@ -33,7 +33,8 @@ const MotionToggle: FC = ({ value ); useAttributes({ - attribute: 'reducedMotion', + element: document.documentElement || undefined, + attribute: 'reduced-motion', value: `${isReduced}`, }); diff --git a/src/components/molecules/layout/code.tsx b/src/components/molecules/layout/code.tsx index 2959ae5..f5b60b9 100644 --- a/src/components/molecules/layout/code.tsx +++ b/src/components/molecules/layout/code.tsx @@ -1,7 +1,5 @@ -import usePrismPlugins, { - type PrismPlugin, -} from '@utils/hooks/use-prism-plugins'; -import { FC } from 'react'; +import usePrism, { OptionalPrismPlugin } from '@utils/hooks/use-prism'; +import { FC, useRef } from 'react'; import styles from './code.module.scss'; export type PrismLanguage = @@ -35,15 +33,6 @@ export type PrismLanguage = | 'twig' | 'yaml'; -export type OptionalPrismPlugin = Extract< - PrismPlugin, - | 'command-line' - | 'diff-highlight' - | 'inline-color' - | 'line-highlight' - | 'line-numbers' ->; - export type CodeProps = { /** * The code to highlight. @@ -79,17 +68,19 @@ const Code: FC = ({ plugins = [], outputPattern = '#output#', }) => { - const { pluginsAttribute, pluginsClassName } = usePrismPlugins(plugins); + const wrapperRef = useRef(null); + const { attributes, className } = usePrism({ language, plugins }); const outputAttribute = filterOutput ? { 'data-filter-output': outputPattern } : {}; return ( -
+ 
         {children}
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
index 54b8d6e..8ff44d5 100644
--- a/src/components/templates/page/page-layout.tsx
+++ b/src/components/templates/page/page-layout.tsx
@@ -20,7 +20,6 @@ import CommentsList, {
 import TableOfContents from '@components/organisms/widgets/table-of-contents';
 import { type SendCommentVars } from '@services/graphql/api';
 import { sendComment } from '@services/graphql/comments';
-import useCodeBlocksTheme from '@utils/hooks/use-code-blocks-theme';
 import useIsMounted from '@utils/hooks/use-is-mounted';
 import Script from 'next/script';
 import { FC, HTMLAttributes, ReactNode, useRef, useState } from 'react';
@@ -181,11 +180,9 @@ const PageLayout: FC = ({
    * @param {MetaData} meta - The metadata.
    */
   const hasMeta = (meta: MetaData) => {
-    return Object.values(meta).every((value) => value === null);
+    return Object.values(meta).every((value) => value);
   };
 
-  useCodeBlocksTheme(bodyRef);
-
   return (
     <>