FEAT: New puglin to create slugs without accent (#420)

astro.config.ts

@@ -4,7 +4,6 @@ import { defineConfig } from 'astro/config';
 
 import AutoImport from 'astro-auto-import';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
-import rehypeSlug from 'rehype-slug';
 import remarkSmartypants from 'remark-smartypants';
 import dynamicImport from 'vite-plugin-dynamic-import'
 
@@ -15,6 +14,7 @@ import { astroDocsExpressiveCode } from './integrations/expressive-code';
 
 import { sitemap } from './integrations/sitemap';
 import { autolinkConfig } from './plugins/rehype-autolink-config';
+import rehypeSlug from './plugins/rehype-slug-config'
 import { rehypei18nAutolinkHeadings } from './plugins/rehype-i18n-autolink-headings';
 import { rehypeOptimizeStatic } from './plugins/rehype-optimize-static';
 import { rehypeTasklistEnhancer } from './plugins/rehype-tasklist-enhancer';

package.json

@@ -102,11 +102,11 @@
     "@nanostores/preact": "^0.1.3",
     "algoliasearch": "^4.20.0",
     "canvas-confetti": "^1.6.0",
+    "github-slugger": "^2.0.0",
     "jsdoc-api": "^7.1.1",
     "nanostores": "^0.5.13",
     "react-instantsearch-hooks-web": "^6.45.0",
     "rehype-autolink-headings": "^6.1.1",
-    "rehype-slug": "^5.0.1",
     "remark-gfm": "^3.0.1",
     "remark-smartypants": "^2.0.0",
     "sass": "1.64.0",

plugins/rehype-autolink-config.ts

@@ -26,16 +26,18 @@ const AnchorLinkIcon = h(
 
 const createSROnlyLabel = (text: string) => {
 	const t = useTranslationsForLang('en');
+	const normalizedString = text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+
 	return h(
 		'span',
 		{ 'is:raw': true, class: 'sr-only' },
-		`${t('a11y.sectionLink')} ${escape(text)}`
+		`${t('a11y.sectionLink')} ${escape(normalizedString)}`
 	);
 };
 
 /**
  * Configuration for the `rehype-autolink-headings` plugin.
- * This set-up was informed by https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
+ * This set-up was informed by 	
  */
 export const autolinkConfig: Options = {
 	properties: { class: 'anchor-link' },

plugins/rehype-i18n-autolink-headings.ts

@@ -12,7 +12,7 @@ import { getLanguageCodeFromPathname, mdFilePathToUrl } from './remark-fallback-
  */
 export function rehypei18nAutolinkHeadings() {
 	const pageSourceDir = path.resolve('./src/content/docs');
-	const baseUrl = 'https://docs.astro.build/';
+	const baseUrl = 'https://www.azion.com/';
 
 	const transformer: Transformer<Root> = (tree, file) => {
 		const pageUrl = mdFilePathToUrl(file.path, pageSourceDir, baseUrl);

plugins/rehype-slug-config.js

@@ -0,0 +1,23 @@
+import Slugger from 'github-slugger'
+import {hasProperty} from 'hast-util-has-property'
+import {headingRank} from 'hast-util-heading-rank'
+import {toString} from 'hast-util-to-string'
+import {visit} from 'unist-util-visit'
+
+const slugs = new Slugger()
+
+const removeAccent = (text) => text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+
+export default function rehypeSlug(options = {}) {
+  const prefix = options.prefix || ''
+
+  return (tree) => {
+    slugs.reset()
+
+    visit(tree, 'element', (node) => {
+      if (headingRank(node) && node.properties && !hasProperty(node, 'id')) {
+        node.properties.id = prefix + slugs.slug(removeAccent(toString(node)))
+      }
+    })
+  }
+}