Changeset 5763

Timestamp:

08/07/2017 07:44:24 PM (7 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;