LINE Developers Site: The Tech Behind the Docs Mark Serrano
 Technical Consulting Team
- Goals for the Redesign - Moving from Wordpress to a Static Site - Implementing the New Document Site in Middleman Agenda
Goals for the Design
Improve Developer Experience Goals for the Redesign Do this by improving the authoring process so that we can focus on writing higher quality documentation
Lower barriers for writing docs Improvements to the Authoring Process Transparent Documentation Encourage collaboration
Plain Text Format Version Control Built like source code Docs as Code
Documents are written in Markdown Docs as Code at LINE All documents are managed on GitHub Documents are built using an automated process
Moving from Wordpress to a Static Site
Not as flexible as we needed Wordpress Pains Maintenance and security patches required Collaboration and reviews were difficult Version control system is not ideal
What is a Static Site Generator? Templates Content Data Static Site Generator HTML Pages HTML Pages Static HTML Pages
Flexibility Advantages of going Static GitHub Workflow Low maintenance Load speed
Static site generator built in Ruby High level of customization Markdown renderer support ERB Templates Enter the Middleman
Implementing the Site in Middleman
Created ERB templates from static page designs Implementing the Site Custom middleman extension used to apply style Content written in Markdown, menus in YAML files Document authors only edit markdown and YAML files
Custom Middleman Plugin Custom Middleman Extension Style Converter Custom
 Markdown Helper Methods Markdown Content
--- title: "Social API overview" source_language: "en" --- The Social API is an HTTP-based API that provides access to data on the LINE Platform such as LINE user IDs, display names, profile images, and status messages. ## Getting a user token Sending Social API requests requires the use of an access token to access data on a user's behalf. To get an access token, integrate [LINE Login][line-login] into your app. For more information on using LINE Login with different types of apps, see the following articles. - [Integrate LINE Login for iOS][integrate-login-ios] - [Integrate LINE Login for Android][integrate-login- android] - [Integrate LINE Login for web][integrate-login-web] ## Guides See the following pages for more information on using the Social API. - [Getting user profiles][get-profile-social] - [Logging out users][logout-social] - [Managing access tokens][tokens-social] Document Content in Markdown
sidebar_title: "Social API" menu_items: - title: "Guides" url: subpages: - title: "Overview" url: "/docs/social-api/overview" subpages: [] - title: "Getting user profiles" url: "/docs/social-api/getting-user- profiles" subpages: [] - title: "Logging out users" url: "/docs/social-api/logging-out- users" subpages: [] - title: "Managing access tokens" url: "/docs/social-api/managing- access-tokens" subpages: [] - title: "Reference" url: subpages: - title: "Social API Reference" url: "/docs/social-api/reference" subpages: [] Menus in YAML
Inherited from Redcarpet markdown renderer Custom Markdown Used to render elements that standard markdown cannot
Normal Markdown Table #### Request headers Request header | Description -------------- | --- Content-Type | application/json Authorization | Bearer `{Channel Access Token}`
Headerless Table |>| || **Superclass** | `NSObject` | || **Declared in** | LineSDKAPI.h | |>|
Helper Method: Glossary Entry ## Friends <%= display_glossary_definition "beacon-banner" %> ## Friends 2 <%= display_glossary_definition "add-friend-button" %>
Document Build Process Doc Author Pull Request Master Branch Middleman
 Build Deploy Automated
 Testing
We focused on improving the authoring process in our developer site redesign In Conclusion We moved from Wordpress to a static site generator called Middleman We created a custom middleman extension that helps our document writers focus on writing content A better authoring process allows our writers to focus on writing higher quality docs for you
Thank you

LINE developers site the tech behind the docs

  • 2.
    LINE Developers Site: TheTech Behind the Docs Mark Serrano
 Technical Consulting Team
  • 3.
    - Goals forthe Redesign - Moving from Wordpress to a Static Site - Implementing the New Document Site in Middleman Agenda
  • 4.
  • 5.
    Improve Developer Experience Goalsfor the Redesign Do this by improving the authoring process so that we can focus on writing higher quality documentation
  • 6.
    Lower barriers forwriting docs Improvements to the Authoring Process Transparent Documentation Encourage collaboration
  • 7.
    Plain Text FormatVersion Control Built like source code Docs as Code
  • 8.
    Documents are writtenin Markdown Docs as Code at LINE All documents are managed on GitHub Documents are built using an automated process
  • 9.
    Moving from Wordpressto a Static Site
  • 10.
    Not as flexibleas we needed Wordpress Pains Maintenance and security patches required Collaboration and reviews were difficult Version control system is not ideal
  • 11.
    What is aStatic Site Generator? Templates Content Data Static Site Generator HTML Pages HTML Pages Static HTML Pages
  • 12.
    Flexibility Advantages of goingStatic GitHub Workflow Low maintenance Load speed
  • 13.
    Static site generatorbuilt in Ruby High level of customization Markdown renderer support ERB Templates Enter the Middleman
  • 14.
  • 15.
    Created ERB templatesfrom static page designs Implementing the Site Custom middleman extension used to apply style Content written in Markdown, menus in YAML files Document authors only edit markdown and YAML files
  • 16.
    Custom Middleman Plugin CustomMiddleman Extension Style Converter Custom
 Markdown Helper Methods Markdown Content
  • 17.
    --- title: "Social APIoverview" source_language: "en" --- The Social API is an HTTP-based API that provides access to data on the LINE Platform such as LINE user IDs, display names, profile images, and status messages. ## Getting a user token Sending Social API requests requires the use of an access token to access data on a user's behalf. To get an access token, integrate [LINE Login][line-login] into your app. For more information on using LINE Login with different types of apps, see the following articles. - [Integrate LINE Login for iOS][integrate-login-ios] - [Integrate LINE Login for Android][integrate-login- android] - [Integrate LINE Login for web][integrate-login-web] ## Guides See the following pages for more information on using the Social API. - [Getting user profiles][get-profile-social] - [Logging out users][logout-social] - [Managing access tokens][tokens-social] Document Content in Markdown
  • 18.
    sidebar_title: "Social API" menu_items: -title: "Guides" url: subpages: - title: "Overview" url: "/docs/social-api/overview" subpages: [] - title: "Getting user profiles" url: "/docs/social-api/getting-user- profiles" subpages: [] - title: "Logging out users" url: "/docs/social-api/logging-out- users" subpages: [] - title: "Managing access tokens" url: "/docs/social-api/managing- access-tokens" subpages: [] - title: "Reference" url: subpages: - title: "Social API Reference" url: "/docs/social-api/reference" subpages: [] Menus in YAML
  • 19.
    Inherited from Redcarpetmarkdown renderer Custom Markdown Used to render elements that standard markdown cannot
  • 20.
    Normal Markdown Table ####Request headers Request header | Description -------------- | --- Content-Type | application/json Authorization | Bearer `{Channel Access Token}`
  • 21.
    Headerless Table |>| || **Superclass**| `NSObject` | || **Declared in** | LineSDKAPI.h | |>|
  • 22.
    Helper Method: GlossaryEntry ## Friends <%= display_glossary_definition "beacon-banner" %> ## Friends 2 <%= display_glossary_definition "add-friend-button" %>
  • 23.
    Document Build Process DocAuthor Pull Request Master Branch Middleman
 Build Deploy Automated
 Testing
  • 24.
    We focused onimproving the authoring process in our developer site redesign In Conclusion We moved from Wordpress to a static site generator called Middleman We created a custom middleman extension that helps our document writers focus on writing content A better authoring process allows our writers to focus on writing higher quality docs for you
  • 25.