Changeset 5763

Timestamp:

08/07/2017 07:44:24 PM (9 years ago)

Author:

danielbachhuber

Message:

devhub/cli: First pass at retooling iA of command page

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer

Files:

• content-command.php (modified) (1 diff)
• inc/cli.php (modified) (1 diff)
• scss/main.scss (modified) (1 diff)
• stylesheets/main.css (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/content-command.php

@@ -10 +10 @@
 
         <div class="entry-content">
-                <?php the_excerpt();
-                $cmd_slug = str_replace( 'wp ', '', get_the_title() );
-                $github_issues = 'https://github.com/issues?q=label%3A' . urlencode( 'command:' . str_replace( ' ', '-', $cmd_slug ) ) . '+sort%3Aupdated-desc+org%3Awp-cli';
-                ?>
-                <p><a class="button" href="<?php echo esc_url( $github_issues ); ?>"><?php esc_html_e( 'GitHub Issues', 'wporg' ); ?></a></p>
                 <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'wporg' ) ); ?>
                 <?php

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/cli.php

@@ -266 +266 @@
                 // Transform emdash back to triple-dashes
                 $content = str_replace( '-–', '---', $content );
+
+                // Include the excerpt in the main content well
+                $excerpt = get_the_excerpt();
+                if ( $excerpt ) {
+                        $content = wpautop( $excerpt ) . PHP_EOL . $content;
+                }
+
+                // Add 'Quick Links' across the top
+                $items = self::get_tags( 'h([1-4])', $content );
+                if ( count( $items ) > 1 ) {
+                        for ( $i = 1; $i <= 4; $i++ ) {
+                                $content = self::add_ids_and_jumpto_links( "h$i", $content );
+                        }
+                        $quick_links = '<p class="quick-links"><small>Quick Links: ';
+                        foreach( $items as $item ) {
+                                $quick_links .= '<a href="#' . sanitize_title_with_dashes( $item[3] )  . '">' . ucwords( strtolower( $item[3] ) ) . '</a> | ';
+                        }
+                        $quick_links = rtrim( $quick_links, ' |' ) . '</small></p>';
+                        $content = $quick_links . PHP_EOL . PHP_EOL . $content;
+                }
+
                 return $content;
         }
 
+        protected static function add_ids_and_jumpto_links( $tag, $content ) {
+                $items = self::get_tags( $tag, $content );
+                $first = true;
+                $matches = array();
+                $replacements = array();
+
+                foreach ( $items as $item ) {
+                        $replacement = '';
+                        $matches[] = $item[0];
+                        $id = sanitize_title_with_dashes($item[2]);
+
+                        if ( ! $first ) {
+                                $replacement .= '<p class="toc-jump"><a href="#top">' . __( 'Top &uarr;', 'wporg' ) . '</a></p>';
+                        } else {
+                                $first = false;
+                        }
+                        $a11y_text      = sprintf( '<span class="screen-reader-text">%s</span>', $item[2] );
+                        $anchor         = sprintf( '<a href="#%1$s" class="anchor"><span aria-hidden="true">#</span>%2$s</a>', $id, $a11y_text );
+                        $replacement   .= sprintf( '<%1$s class="toc-heading" id="%2$s" tabindex="-1">%3$s %4$s</%1$s>', $tag, $id, $item[2], $anchor );
+                        $replacements[] = $replacement;
+                }
+
+                if ( $replacements ) {
+                        $content = str_replace( $matches, $replacements, $content );
+                }
+
+                return $content;
+        }
+
+        private static function get_tags( $tag, $content ) {
+                preg_match_all( "/(<{$tag}>)(.*)(<\/{$tag}>)/", $content, $matches, PREG_SET_ORDER );
+                return $matches;
+        }
+
 }
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

@@ -1879 +1879 @@
 
 .single-command #content {
+
+        h2, h3 {
+                margin-top: 3rem;
+                margin-bottom: 2.5rem;
+                font-size: 2.5rem;
+        }
+
+        h2.entry-title {
+                padding: 0;
+                font-size: 3.5rem;
+                margin-top: 3rem;
+                margin-bottom: 1rem;
+                font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
+                a {
+                        color: #000;
+                }
+        }
+
+        .quick-links {
+                margin-bottom: 2.5rem;
+        }
+
+        .toc-jump {
+                float: right;
+                font-size: 75%;
+        }
+
         table {
                 border-collapse:collapse;

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css

@@ -2194 +2194 @@
 }
 
+.single-command #content h2, .single-command #content h3 {
+  margin-top: 3rem;
+  margin-bottom: 2.5rem;
+  font-size: 2.5rem;
+}
+
+.single-command #content h2.entry-title {
+  padding: 0;
+  font-size: 3.5rem;
+  margin-top: 3rem;
+  margin-bottom: 1rem;
+  font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
+}
+
+.single-command #content h2.entry-title a {
+  color: #000;
+}
+
+.single-command #content .quick-links {
+  margin-bottom: 2.5rem;
+}
+
+.single-command #content .toc-jump {
+  float: right;
+  font-size: 75%;
+}
+
 .single-command #content table {
   border-collapse: collapse;