Foundation-emails: Directory Listing Feature

Created on 25 Jul 2016 · 10Comments · Source: foundation/foundation-emails

I have a ton of emails in my project and find it cumbersome to constantly have to recall the name of the email and type it in the address bar.

Any thoughts on some sort of slideout that would list everything in the directory? Or even a special url (ex: /directory.html) that provides a simple directory listing to make this easier?

feature

Source

jamesdixon

Most helpful comment

browsersync actually has a 'directory' option, which worked for me.

function server(done) {
  browser.init({
    server: {
        baseDir: 'dist',
        directory: true
    }
  });
  done();
}

CurtisWist on 6 Oct 2016

👍2

All 10 comments

I am dynamically generating an index.html in the dist folder which is opened by default when running the default gulp task. This index.html is listing all html files in the dist folder so I can easily click on the template I want.

I am doing this the following way:

1) Have an index.html in the pages directory like this (the $TEMPLATE_ELEMENTS$ placeholder is getting replaced in a gulp task):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body style="font-family: sans-serif;">
<ul style="text-align: left; list-style: decimal-leading-zero;">
    $TEMPLATE_ELEMENTS$
</ul>
</body>
</html>

2) Then in my gulpfile, I am calling an index function as follows:

/* *************
 GENERATE INDEX.HTML
 ************* */

function index(done) {
    log('Generating index.html listing each html template in dist directory');

    var htmlSrc = gulp.src(['dist/**/*.html', '!dist/**/index.html'])
        .pipe($.filenames('files'))
        .pipe(gulp.dest('dist'))
        .on('end', function() {
            var templatesArray = $.filenames.get('files');
            log('No of files: ' + templatesArray.length);
            var liElements = '';

            for (var i = 0; i < templatesArray.length; i++) {
                log(templatesArray[i]);
                var templateName = templatesArray[i];
                var templateNameShort = templateName.substr(0, templateName.length - 5);

                if (templateNameShort === 'index') {
                    continue;
                }

                liElements = liElements +
                    '<li><a style="margin-left: 10px; color: #428bca;" href="http://localhost:3000/'
                    + templateName
                    + '">'
                    + templateName
                    + '</a></li>';
            }

            gulp.src('src/pages/index.html')
                //replace regexp
                .pipe($.replace('$TEMPLATE_ELEMENTS$', liElements))
                .pipe(gulp.dest('dist/'));
        });
    done();
}

This function requires additional packages to be npm installed, such as gulp-filenames and gulp-replace.

3) My build gulp task calls the index function at last:

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
    gulp.series(clean, pages, sass, images, inline, index));

4) I am excluding the index.html source file from almost all other functions, e.g. the pages() function:

return gulp.src(['src/pages/**/*.html', '!src/pages/**/index.html'])

There you go!

SebastianSchirmer on 10 Sep 2016

👍1

Great question @jamesdixon, and really awesome solution @leschirmeur! At ZURB, we use the index.html approach so we have the ability to organize all of our emails as soon as the localhost is spun up. Really interested in checking out @leschirmeur's code, any chance you could throw it into a Pull Request?

tdhartwick on 15 Sep 2016

@tdhartwick I'm not sure if a PR would be the best thing, however, if you like, I could post a complete code snippet of what we are using so you could check it all out. After that, we could decide if a PR really makes sense. What do you think?

SebastianSchirmer on 20 Sep 2016

browsersync actually has a 'directory' option, which worked for me.

function server(done) {
  browser.init({
    server: {
        baseDir: 'dist',
        directory: true
    }
  });
  done();
}

CurtisWist on 6 Oct 2016

👍2

@CurtisWist this works perfectly! Haven't tried @leschirmeur's solution, but looks great as well. Thanks!

jamesdixon on 9 Oct 2016

👍1

@CurtisWist Wasn't aware of this option, tried it and my previously mentioned solution is obsolete. Thanks for the hint!

SebastianSchirmer on 9 Oct 2016

👍1

@jamesdixon Do you mind closing the issue if the 'directory' options solves it for you?

SebastianSchirmer on 9 Oct 2016

@leschirmeur will do!

jamesdixon on 9 Oct 2016

@CurtisWist This is great, one thing I found was that there was an extra "}" after directory: true, which outputs errors. I updated in case anyone else decided to use

function server(done) { browser.init({ server: 'dist', directory: true }); done(); }

diomededavid on 9 Oct 2016

@CurtisWist We've been (admittedly casually) looking for a simple way to do this for a while. Thank you so much for pointing out that the functionality's already there! Saved us quite a lot of work.