SampleEntry3

サンプルエントリーです。

ファイル１

app.component.spect.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'myapp'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('myapp');
  });

  it('should render title in a h1 tag', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to myapp!');
  });
});

ファイル２

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  title = 'myapp';
}

SampleEntry2

サンプルエントリーです。

適当な長めのコード

code

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('sample1:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

SampleEntry1

Sunlightはレスポンシブ対応のシンプルなベージュのテーマです。

以下のような特徴があります。

コードの閲覧

スマートフォンのようなモバイル端末でのコード閲覧時、デフォルトでははみ出た部分が折り返されて読みにくくなりますが、Sunlightではスクロールになるので読みやすいです。また、デスクトップPCでの閲覧時にウィンドウサイズを1200~や1500~のように大きくした場合、横幅を広くとるのでスクロールさせられることが減って読みやすくなります。

コードのファイル名やパスを表示

Sunlightではコードブロック(pre)の直前の行にpre-filenameクラスのdivを置くことでコードにファイル名やパスを含めて表示できます。はてな記法の場合は>||の直前の行です。Markdownの場合は```の直前の行です。

はてな記法の場合

 <div class="pre-filename">filename.js</div>
 >|javascript|
   //code
 ||<

タイトル下のグローバルメニュー

タイトル下にカテゴリごとのグローバルメニューを設置したい場合は「デザイン＞カスタマイズ＞タイトル下＞ヘッダ」に以下のようなコードを追加します。

<div class="category">
  <a href="examole.com">Example</a>
  <a href="examole.com">Example</a>
  <a href="examole.com">Example</a>
  <a href="examole.com">Example</a>
</div>

SNSシェアボタン

このテーマのSNSシェアボタンを設置したい場合はデフォルトのボタンをOFFにしてから「デザイン＞カスタマイズ＞記事＞記事下」に以下のコードを追加します。

<ul class="share-buttons">
  <li><a href="http://b.hatena.ne.jp/entry/{Permalink}"><i class="blogicon-bookmark"></i></a></li>
  <li><a href="https://twitter.com/share?url={Permalink}&amp;text={Title}"><i class="blogicon-twitter"></i></a></li>
  <li><a href="http://www.facebook.com/share.php?u={Permalink}"><i class="blogicon-facebook"></i></a></li>
  <li><a href="http://getpocket.com/edit?url={Permalink}&amp;title={Title}"><i class="blogicon-chevron-down"></i></a></li>
  <li><a href="http://line.me/R/msg/text/?{Title} - {BlogTitle} {URLEncodedPermalink}"><i class="blogicon-comment"></i></a></li>
</ul>

レスポンシブにする

レスポンシブ対応のテーマをスマホにも適用するには「デザイン＞スマートフォン＞詳細設定」でレスポンシブデザインにチェックを入れてください。