Long-term plan is to move from current workflow of Grunt (with RequireJS) to Webpack (with Babel to enforce ES6-ish code climate).

The Textpattern official website(s) still support IE11, however some good performance gains and easier future dev can be made by removing support, i.e.:

• CSS custom properties
• ES2015+
• Remove Flexbox fallbacks for our CSS Grid layout
• <picture> tag to serve modern image formats such as WebP, AVIF, and eventually JPEG XL.

Suggesting we remove support around Spring 2021 (April-May). Please place any objections below, along with a valid reason - otherwise I will proceed.

Needs to be a contrasting colour - currently yellow focus ring on yellow button.

grunt compass:dev throws this error:

Sass::SyntaxError on line ["7"] of C: Invalid Windows-1252 character "\xC3"

This is caused by an open issue with Singularity 1.6.2.

We should add a Referrer Policy to the .htaccess file. However, due to ad referral tracking this can only be done when the <a> attribute referrerpolicy gains better browser support, this we can exempt certain links from the global (header) rule.

In .htaccess:

# Referrer Policy.

    Header always set Referrer-Policy "no-referrer-when-downgrade"

An exempt link example:

<a rel="external" href="example.com" referrerpolicy="origin">An ad link</a>

Current browser support (as at 28/09/17):

• Chrome (>= 51)
• Opera (>= 38)
• Firefox (>= 50)
• Safari Safari >= 12.1 desktop now has full support, iOS Safari support still missing
• Edge

IE11 won't ever support it. Keep an eye on browser usage stats for this one.

The recommended web hosts/affiliates page is out of date and of questionable worth. We should remove it from the site now.

Test and fix issues reported by Google's Structured Data Testing Tool

• BreadcrumbList endpoint @id entity
• blogPost expected attributes missing
• Image width/height attributes error

I have no assigning rights in this repo, but this is directed @philwareham.

I'm requesting a few, relatively simple, styles additions to the brand's CSS for use in user docs (and wherever other platform might find useful). I recommend you have a look at the associated sections in the new user docs guidelines, beginning at Markup and styling, as it will explain in what context these are needed.

The code below is a humble start at getting it done, but by all means tweak as needed. If you change the selectors names, however, let me know, because that impacts user docs, as well docs guidelines. I can then edit accordingly.

First, here are two that quietly do their good thing after inclusion, with no further ado from anyone....

Reference-mark notes in Tables DONE

See Notes in tables and Tables.

tfoot ol {
	list-style-type:none;
	text-indent:-.75em;
	padding-left:.75em;	
}

tfoot li {margin:.15em 0;}

ol.refmarks {
	list-style-type:none;
	text-indent:-.75em;
	padding-left:.75em;	
}

.refmarks li::before {margin-right:.4em;}

.refmarks li:first-child:before {content:'\002a';} /* asterisk */
.refmarks li:nth-of-type(2):before {content:'\2020';} /* dagger */
.refmarks li:nth-of-type(3):before {content:'\2021';} /* double dagger */
.refmarks li:nth-of-type(4):before {content:'\00a7';} /* section */
.refmarks li:nth-of-type(5):before {content:'\00b6';} /* pilcrow */
.refmarks li:nth-of-type(6):before {content:'\2016';} /* parallel bars */

/*Should we want to provide for another six notes (notes 7 through 12), 
they would continue like this, as double entities...
.refmarks li:nth-of-type(7):before {content:'\002a\002a';}
*/

Faux header in endnotes container DONE

See last para in Notes in main text. But, basically, since we can't add a header element in the Kramdown generating the endnotes, we can fake it with ::before pseudo element. This would then eliminate having to provide a confusing 'Endnotes' header in the new docs page template. Instead, the faux header appears automatically, but only if any Kramdown notes exist. A win-win. And yes, back matter of published material should be headed, even web documents, because it's not footnotes!

Easy-peasy. Again, tweak to need, but I was just going by what I already saw in the styles...

.footnotes::before {
    content: 'Endnotes'; /*DO NOT USE 'Footnotes', for Crom's sake!*/
    display: block;
    font-family: 'pt serif',georgia,serif;
    margin-bottom: 1em;
    font-size: 1.375rem; /*h3 size looks nice*/
}

If you're wondering about the comment there, see the the lengthy endnote on the guidelines page ranting about the misnomer that is 'footnotes'. Likely to be removed in the soon-ish future; immediately, if you add this item. ;)

And here are four selector requests for styling specific types of block-level content...

Example blocks for none regular text DONE

Long story short, block quotes are not appropriate for offsetting examples from regular text, but we don’t have any options. Thus, these two example blocks selectors will go a long way, I suspect; especially the first one. At least they will for brand-oriented docs (procedures, guidelines, etc) where text examples are needed a lot.

• .example-text, See Example text
• .example-list, See Example list

The selector rules are combined in here:

.example-text,
.example-list {
	margin-left:3%;
	border-left:3px dotted #c3edfa;
	padding-left:.5em;
}

.example-list {
	list-style-position:inside;
	list-style-type:'- ';
}

File tree and directory lists DONE

This addresses a problem where people are using regular code to mark up lists that represent file trees, or components of them. That's missing a beat. So these two selectors give better visual distinction and semantic relevance. The ‘list-style-type’ for ‘.list-tree’ mimics parent child relations. That’s the idea, anyway.

• .list-tree, See Full tree scope
• .list-directory, See Single directory contents scope

The two are combined here:

.list-tree {list-style-type:'☐ ';}
.list-tree ul, .list-tree ol {list-style-type:'└ ';}
.list-directory {list-style-type:'- ';}

.list-tree, .list-tree ul, .list-tree ol,
.list-directory {list-style-position:outside;}

.list-tree, .list-tree ul, .list-tree ol,
.list-directory {
	font-family:monospace; /*to make the code-happy people happy*/
	font-size:.7rem;
	line-height:1.1;
}

.list-tree li,
.list-directory li {
	margin-top:4px;
	margin-bottom:4px;
	margin-left:1.5em;
	margin-right:0;
}

That's all for now. Editor out. ;)

Investigate any recent changes to GitHub API that might have broken this.

I think we can safely move to CSS Grid now, we polyfill the older syntax to IE11 in our build script anyway (and IE11 usage is fairly low now).

Many thanks for expanding the scope of HTTP and SQL servers for Textpattern. Could we take away also the disgraceful dependence from Apache and other proprietary directives from our System requirements — the main webpage for new visitors to Textpattern.com?

Textpattern works on any web server that supports Apache, PHP and MySQL.

Textpattern works on any open standards compliant HTTP server (Apache, Caddy, Cherokee, G-Wan, Hiawatha, Lighttpd, NginX, OpenLiteSpeed) with PHP and MariaDB (MySQL) support.

There is a placeholder in the languages page under the 'Become a translator' section. Need to fill this out with current translator process.

Could we store the checksum in the File Description field and then pull that out automatically when building the links to the downloads on the release blog posts and get started pages? Seems like that would avoid some unnecessary steps during the release process and means we don't have to manually keep everything in sync on the site.

Any downsides?

https://forum.textpattern.io/viewtopic.php?id=48670

https://textpattern.com/latest.zip
https://textpattern.com/latest.tar.gz

Changes in Textpattern 4.8 allow us to achieve complex pagination patterns without the need for a dedicated plugin. When Textpattern 4.8 releases, and we update the version running Textpattern.com, we can do this.

CC @bloatware who I may need some help from, in achieving this. Example current code, using plugin:

<txp:evaluate test>
    <nav class="paginator" aria-label="Blog navigation">
        Pages:
        <txp:etc_pagination range="3"
            prev='<a rel="prev" href="{href}" title="Go to previous page" aria-label="Go to previous page">Previous</a>'
            next='<a rel="next" href="{href}" title="Go to next page" aria-label="Go to next page">Next</a>'
            link='<li><a href="{href}" title="Go to page {*}" aria-label="Go to page {*}">{*}</a></li>,<li class="current"><b title="Current page" aria-label="Current page">{*}</b></li>'
            gap='<li role="separator" title="More pages" aria-label="More pages">…</li>'
            mask='{prev}<ul class="pagination">{first}{<+}{links}{+>}{last}</ul>{next}' />
    </nav>
</txp:evaluate>

your HTTPS is broken.

An error occurred during a connection to textpattern.com. SSL received a record that exceeded the maximum permissible length. Error code: SSL_ERROR_RX_RECORD_TOO_LONG

https://stackoverflow.com/a/4762977

Since our header takes up very little room on (portrait) mobile - there’s probably a good argument to make it fixed in place on this view.

Saves using JavaScript for this task.

Reference:

https://codepen.io/eduardoboucas/pen/BNyKwO

https://codepen.io/belipe/pen/vePpzv

Implement in CSS and JavaScript where appropriate when production browser support available: https://polypane.app/blog/creating-websites-with-prefers-reduced-data/

Off the top of my head, some use cases

1. Remove canvas element on homepage.
2. Non-essential images.

Browser support

As discussed.

Potentially Chrome 75 will provide native lazy loading of images, using the flowing syntax:

<img src="example.jpg" loading="lazy">

This could be used on the Textpattern homepage device screens image and blog teaser header image. Need to investigate further if/when this feature rolls out.

https://addyosmani.com/blog/lazy-loading/

Phil.

I think you could add the AMP version of each related articles into the "Latest blog articles" links :

From your article_amp form: https://github.com/textpattern/textpattern-com-website/blob/master/src/templates/forms/article/amp.txp#L83

Change:

<a href="<txp:permlink />"><txp:title /></a>

To:

<a href="<txp:permlink />"><txp:title /><txp:if_variable name="pat_amp" value="1">/amp</txp:if_variable></a>

phi13 introduced me to this Firefox extension, dark mode switcher, to help me test my prefers-color-scheme rules in local dev, because it's the only way I could see the changes with my late 2011 mbp that can't run more than Sierra.

Anyway, when I added the extension, I could then see what the Forum looked like in dark mode on my laptop for the first time, and any other site that usesprefers-color-scheme. Then I looked at user docs. :{

Any chance?

I find my aging eyes do a lot better in dark modes anymore. Just looking at this blaring, glaring white github box with small font is a strain.

I suppose I could try the popular Midnight Lizard extension, which makes everything dark mode whether a site uses prefers-color-scheme or not, but I think I prefer dark mode when it comes from a site intentionally supporting the rules.

Currently we can't add a Content Security Policy header because there is no satisfactory way of whitelisting the Google AdSense network. Hopefully one day they will find a solution. Until then this issue tracks it.

Sitewide, when you click the 'download' button in the sidebar (or the button on homepage), not takes you to the Getting Started page where you can select the download you want. This is fine.

However, the 'download' button from sidebar still appears on this page, which can cause confusion (click it again just takes you to this page once more) and maybe people think the download is broken.

Solution: when on the Getting Start page, omit this button from the sidebar for UX clarity.

Describe the bug
Some janky corners on the three-up site showcase in dark mode.

To reproduce
Steps to reproduce the behaviour:

1. Go to https://textpattern.com/ in dark mode
2. Scroll down to 'Site Showcase'
3. Note some of the 'browser' corners have a different shade of background grey to the parent div.

Expected behaviour
One shade of grey.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS 10.14.6
• Browser: Safari
• Version: 14.0.1

Additional context
Add any other context about the problem here.

From:
https://plugins.textpattern.com

Click Themes in the navigation menu appear to load wrong url link:
https://themes.textpattern.com

• Gets rid of hard dependencies from the repository without having to compile the Flash.
• Both alternatives are more popular and widely used.

Investigate where we can use the new image-set CSS feature to provide more optimised background images. Example:

background-image: url("fallback.jpg");
background-image:
  image-set( "photo-small.jpg" 1x,
    "photo-large.jpg" 2x,
    "photo-print.jpg" 600dpi);

Supported browsers: Caniuse

Note, we already do this using media queries, but the above method is more succinct.

Current website is throwing an error on remote (textpattern.io) WOFFs:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://textpattern.io/assets/fonts/pt-serif-v9-latin-ext-700.woff2. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

downloadable font: download failed (font-family: "PT Serif" style:normal weight:bold stretch:normal src index:0): bad URI or cross-site access not allowed source: https://textpattern.io/assets/fonts/pt-serif-v9-latin-ext-700.woff2

This might be restricted to Tor browser as I use that a cache-busting tool. New site build-in-progress has allowances for remote fonts (see https://github.com/textpattern/server-config/blob/master/tractor.textpattern.com/etc/nginx/sites-available/www-dev.textpattern.com.conf#L179 for current incarnation), and yet it throws the same error.

Edit: most straightforward solution would be to live with this until www.textpattern.com testing on new server has concluded, and move the files into the www.textpattern.com directory tree rather than www.textpattern.io

Reported by users:

Hello Phil,

tried textpattern.com with a new phone (Moto X4, 1920x1080, Android 8.0) and the background picture is not in the right size, means wider than the screen size. Tested it with
Chrome, Opera and Lightning.
If you need it, I can provide you with a screen shot.

While testing on my phone I saw that in Opera Mobile the waving sunflower graphic isn’t scaled down (rather a hint for Phil). The effect is an essentially white page with only the logo, search field, and the hamburger icon at the top. The only browser I saw it like that, BTW.

Reference screenshots:

No longer needed, given new server and appropriate performance / headroom.

We've ascertained that fetching the HTML for the web informer widget causes around 300ms of lag on the initial server response - pushing us into a non-pass on Core Web Vitals. I'd like to reduce that lag if possible but we can't cache the HTML, for reasons.

Currently the code to fetch this HTML is:

if (!gps('txpreview')) {
    $opts = array('http' => array('timeout' => 1.6));
    $url = 'https://website.informer.com/widget/textpattern.com-2';
    $context = stream_context_create($opts);
    $widget = file_get_contents($url, false, $context);

    if ($widget) {
        echo $widget;
    }
}

I'm wondering if there is any performance gain from using stream_copy_to_stream instead of file_get_contents?

@Bloke what do you think, and if so can you give me a pointer on the code needed?

The GitHub API v4 (GraphQL) is much more efficient than the API v3 (RESTful), as it just returns the specific data rather than a large file with all repo data.

Moving to that would require (safe) storage of the OAuth authentication key as you cannot do anonymous calls to API v4 (unlike v3).

AMP is a Google proprietary technology that is generally accepted as bad for the future health of the web and publishers. We should consider removing it from our blog posts, even if it causes a drop in search traffic (debatable).

Please list any objections or agreement. If I don't hear anything that sways me in the next 2 weeks I will remove the code.

New code has been created for this widget, which means we don't need to filter/parser the original HTML for our required structure. New link is:

https://website.informer.com/widget/textpattern.com-2

NTS: I need to strip out old widget and remove the need for htmlpurifier.

I'm fairly sure we can replicate functionality of the following plugins...

• rah_sitemap (used to generate sitemap.xml file)
• rah_external_output (used to serve the version.json file that declared current Textpattern releases and betas)

...via the core tags instead.

Reference to investigate:

Sitemap: https://forum.textpattern.io/viewtopic.php?pid=313909#p313909

External JSON: textpattern/textpattern#839 (comment)

NTS: Refresh the showcases section and add new/update existing/remove obsolete sites.

To remove:

• nwlatournament
• designbyaltitude
• artandculturecenter
• hicksdesign (https://twitter.com/Hicksdesign/status/1305945104285401088)

To add:

• proximowebdesign
• TBC
• TBC

To refresh:

• hicksdesign

Now our new server is TLSv1.2+ compliant, we can Curl request the GitHub API in PHP again (as I used to do before GitHub shut off access lower than TLSv1.2).

See discussion: https://forum.textpattern.io/viewtopic.php?id=48166

Describe the bug
The sections "Get started", "Blog" and "About" have some links under the header "Featured at". If you follow these links, you will find that none of them contain any useful information about Textpattern, and some links are dead.

To reproduce
Steps to reproduce the behaviour:

1. Go to https://textpattern.com/start/
2. Follow the links listed under "Featured at"
3. Any information about Textpattern, no?

Expected behaviour
Links to more informative websites or nothing.

What

A proposal for custom numbered headings in docs that reflect in contents lists at tops of doc pages.

This info design strategy is used a lot in lengthier technical documentation (and grey literature, etc), which is what Txp docs are somewhat heading toward with their new holistic goal-oriented development (e.g. the themes doc).

Such numbering on headings, synced with contents lists, provide clear visual indication of the conceptual order document topics are structured, as well helps to keep readers oriented as they get deeper into longer doc pages.

Example

You can see an example of what I'm talking about on my policies page, https://wion.com/policies, and look at the CSS. I think it's nice to add the leading zero on single-digit numbers so they are all aligned as double-digits in the contents lists.

From my CSS:

/* Contents list 'item' ordering, two levels */
.toc1, .toc2 {list-style: none;}
.toc1 {counter-reset: item -1; padding-left: 0;}
.toc1 li {counter-increment: item;}
.toc1 li::before {content: counter(item, decimal-leading-zero) ' ';}
.toc2 {counter-reset: item;}
.toc2 li::before {content: counters(item, '.') ' ';}

/* Page 'section' (h2) and 'subsection' (h3) ordering in sync with contents list */
.a3 {counter-reset: section -1;}
.a3 h2 {counter-reset: subsection;}
.a3 h2::before {counter-increment: section; content: counter(section, decimal-leading-zero) ' ';}
.a3 h3::before {counter-increment: subsection; content: counter(section) "." counter(subsection) ' ';}

My numbering in the policies page only goes to second-level headings: We would need to go to h5 headings, at least, in docs. The docs guidelines doc is one example of headings going to h4, at least, and maybe themes doc too.

Though we do have a guideline to try and keep docs no deeper than h4, that's not always possible, so we might want to play it safe and allow for h5, too, if not all the way through h6. Numbering also makes deeper headings like this (which tend to be smaller font sizes vs. higher levels) easier to recognize as actual headings versus just bold text.

I'm not sure why I used a class called 'a3' but, you know, use what you like. ;)

Whether or not you wanted these on tag pages, I can't guess, though it wouldn't hurt anything, but you could probably exempt that directory somehow so the numbering didn't show on those pages.

Similar to here: https://getbootstrap.com/docs/4.3/components/card/

Note to self: remake the error.png image so we don't need to supply an alternative version to dark mode users.

Currently there is content layout shift at page load on mobile, where the nav menu is visibly open until JS has fired. Prevent this.

Background: textpattern/textpattern.github.io#97

Currently, we send readers to a third-party site for instructions on how to enable/disable viewing of hidden files on macOS via https://textpattern.com/hidden-files-osx.

I've written a basic how-to at https://github.com/textpattern/textpattern.github.io/blob/master/installation/view-hidden-files-on-macos.md and, subject to a review, I propose we redirect the URL alias above to point to that instead, please and thanks.

I realise this isn't a code issue as such, but it's here for tracking progress.

Note to self - need to fix the second ad slot on the homepage.

Swap out Node Sass for Dart Sass when stable release v1.0 available.

https://textpattern.com/about/119/system-requirements

Zlib should be zlib. Link is correct.

IMO we should turn off the commenting features and remove the comment templates and specific CSS from our theme (leaving the old comments in the backend but remove the code from templates that actually displays them on live site).

Many existing comments are obsolete, link to dead URLs, or have little value in a modern website. Better that we encourage discussions on the forum or social media where proper back-and-forth dialogue can happen.

@petecooper @Bloke thoughts?