astro-theme-popular 0.14.0 → 0.14.2

package/index.mjs

@@ -27,8 +27,10 @@ import Slugger from 'github-slugger';
    survive a subpath install (parity with Hugo's render hooks passing paths
    through relURL). Everything the templates write is handled by src/lib/url.ts
    instead; MDX component props (<Photo src="/images/x.png">) are JSX, not HAST,
-   so the components prefix those themselves. And a hover "#" anchor on every
-   h2-h6, so each section has a copyable URL (Hugo's render-heading.html).
+   so the components prefix those themselves. A hover "#" anchor on every
+   h2-h6, so each section has a copyable URL (Hugo's render-heading.html). And
+   a <div class="g-table-scroll"> around every table, so a wide table scrolls
+   sideways on a phone instead of stretching the page (Hugo's render-table.html).
 
    Registered on the active markdown processor rather than through
    `markdown.rehypePlugins`: Astro 7's default processor is Sätteri, which does
@@ -73,6 +75,20 @@ const anchorNode = (id) => ({
   children: [], // the "#" is CSS generated content; see base.css
 });
 
+/* Wide tables: every markdown <table> is wrapped in <div class="g-table-scroll">
+   (base.css: overflow-x: auto) so a table with more columns than a phone is
+   wide scrolls inside the page instead of stretching it. The wrapper scrolls,
+   not the table: `display: block; overflow-x: auto` on the table itself would
+   drop its table semantics for screen readers. Parity with Hugo's
+   render-table.html. A table an earlier hast plugin already wrapped is left
+   alone; a wrapper hand-written around a table in markdown or MDX is raw
+   HTML or JSX rather than a hast div, so it is not detected and the table
+   gets a second, harmless wrapper inside it. */
+const TABLE_WRAPPER = 'g-table-scroll';
+const tableWrapper = () => ({ type: 'element', tagName: 'div', properties: { className: [TABLE_WRAPPER] }, children: [] });
+const isTableWrapper = (node) =>
+  node?.type === 'element' && node.tagName === 'div' && [].concat(node.properties?.className ?? []).includes(TABLE_WRAPPER);
+
 /* Heading text the way Astro's own heading-id plugins read it: text nodes,
    plus MDX `{frontmatter.x}` expressions resolved against the frontmatter
    (mirrors collectHastText in @astrojs/markdown-satteri, which is not a
@@ -125,6 +141,12 @@ function satteriMarkdownHooks(prefix) {
           if (href !== props.href) ctx.setProperty(node, 'href', href);
         },
       },
+      {
+        filter: ['table'],
+        visit(node, ctx) {
+          if (!isTableWrapper(ctx.parent(node))) ctx.wrapNode(node, tableWrapper());
+        },
+      },
       {
         filter: HEADINGS,
         visit(node, ctx) {
@@ -169,6 +191,11 @@ function rehypeMarkdownHooks(prefix) {
           if (node.tagName !== 'h1' && props.id) (node.children ??= []).push(anchorNode(props.id));
         }
       }
+      if (node.children && !isTableWrapper(node)) {
+        node.children = node.children.map((child) =>
+          child.type === 'element' && child.tagName === 'table' ? { ...tableWrapper(), children: [child] } : child,
+        );
+      }
       (node.children || []).forEach(walk);
     };
     walk(tree);
@@ -186,7 +213,7 @@ function registerMarkdownHooks(config, logger) {
   } else {
     logger.warn(
       `markdown.processor "${processor?.name ?? 'unknown'}" takes neither hastPlugins nor rehypePlugins: ` +
-        'markdown images will not get loading="lazy"' +
+        'markdown images will not get loading="lazy", headings no "#" anchor, tables no scroll wrapper' +
         (prefix ? ', and site-absolute links in content will not carry the base' : ''),
     );
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-theme-popular",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "description": "Popular: a warm, community-first Astro theme for meetups, clubs and fan communities. Ships as an Astro integration.",
   "type": "module",
   "license": "MIT",

package/src/lib/ical.ts

@@ -57,10 +57,10 @@ export function buildIcs(
   const L: string[] = [];
   L.push(fold('BEGIN:VCALENDAR'));
   L.push(fold('VERSION:2.0'));
-  L.push(fold(`PRODID:-//${opts.siteTitle}//Popular theme//EN`));
+  L.push(fold(`PRODID:-//${icsEscape(opts.siteTitle)}//Popular theme//EN`));
   L.push(fold('CALSCALE:GREGORIAN'));
   L.push(fold('METHOD:PUBLISH'));
-  L.push(fold(`X-WR-CALNAME:${opts.siteTitle} events`));
+  L.push(fold(`X-WR-CALNAME:${icsEscape(opts.siteTitle)} events`));
   /* Subscription refresh hints (RFC 7986 + the Apple/Outlook legacy twin).
      Google Calendar ignores both and polls on its own schedule. */
   L.push(fold('REFRESH-INTERVAL;VALUE=DURATION:PT12H'));

package/src/styles/base.css

@@ -113,6 +113,25 @@ pre code { font-size: inherit; background: none; padding: 0; border-radius: 0; }
    !important beats the inline background-color that Chroma (Hugo) and
    Shiki (Astro) emit, and unhighlighted languages get the same canvas. */
 .g-prose pre { overflow-x: auto; padding: 1rem 1.2rem; border-radius: var(--radius-lg); background: var(--surface-code-block) !important; color: var(--ink-100); }
+/* Markdown tables. Browser defaults draw no borders and no padding, so a
+   cell holding several sentences runs into the next one. Every cell gets a
+   thin border and the header row a wash. Text aligns start and top unless the
+   column asked for an alignment in markdown (`:---:`): Goldmark and Sätteri
+   emit that as an inline style, which beats this default on its own, and the
+   unified/rehype pipeline as an align attribute, which would lose to it, so
+   the three [align] rules restate it as author CSS (left included: start
+   is right on an RTL site, and `:---` asked for left). Each table is wrapped
+   in .g-table-scroll by the markdown hook (Astro) and render-table.html
+   (Hugo): the wrapper scrolls sideways when a table is wider than a phone,
+   so the table itself keeps its semantics (display: block; overflow-x: auto
+   on the <table> would drop them for screen readers). */
+.g-table-scroll { overflow-x: auto; }
+.g-prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--leading-normal); }
+.g-prose th, .g-prose td { border: var(--border-width) solid var(--border-default); padding: 0.55rem 0.75rem; text-align: start; vertical-align: top; }
+.g-prose th { background: var(--surface-wash-soft); color: var(--text-strong); font-weight: var(--weight-semibold); }
+.g-prose :is(th, td)[align="left"] { text-align: left; }
+.g-prose :is(th, td)[align="center"] { text-align: center; }
+.g-prose :is(th, td)[align="right"] { text-align: right; }
 
 /* Skip link for a11y */
 .g-skip { position: absolute; left: -999px; top: 0; background: var(--color-primary); color: #fff; padding: 0.6rem 1rem; border-radius: var(--radius-md); z-index: 100; }