`
11 | - Paste the HTML content
12 | - Host the asset files (scripts and styles)
13 | - Navigate to the Tumblr
14 |
15 | ## External site
16 |
17 | All requests use the Tumblr API, so the app can works outside the Tumblr ecosystem and be host on any external site with the usual processes.
18 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # TumblrBuilder
2 |
3 | 
4 |
5 | ## Installation
6 |
7 | First, install the library from [npm](https://www.npmjs.com/package/tumblr-builder).
8 |
9 | ```bash
10 | npm install tumblr-builder --save-dev
11 | ```
12 |
13 | ## Documentation
14 |
15 | Check out the docs at [yoriiis.github.io/tumblr-builder](https://yoriiis.github.io/tumblr-builder).
16 |
17 | ## License
18 |
19 | TumblrBuilder and his documentation are under the [MIT License](http://opensource.org/licenses/MIT).
20 |
21 | Created with ♥ by [@yoriiis](http://github.com/yoriiis).
22 |
--------------------------------------------------------------------------------
/src/styles/base.css:
--------------------------------------------------------------------------------
1 | @import "@commonVars";
2 |
3 | body {
4 | font-family: "Helvetica Neue", Arial, sans-serif;
5 | }
6 |
7 | .container {
8 | max-width: 500px;
9 | margin: 0 auto;
10 | padding: 10px 10px 0;
11 | }
12 |
13 | .nav {
14 | margin: 20px 0;
15 | }
16 |
17 | .subnav {
18 | margin-bottom: 20px;
19 | }
20 |
21 | .relatedPosts {
22 | &-title {
23 | margin-bottom: 24px;
24 | padding-top: 20px;
25 | }
26 | }
27 |
28 | .posts {
29 | margin-bottom: 20px;
30 | }
31 |
32 | a {
33 | text-decoration: none;
34 | color: #000;
35 |
36 | &:hover {
37 | text-decoration: underline;
38 | }
39 | }
40 |
41 | strong {
42 | font-weight: 500;
43 | }
44 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "🚀 Feature request"
3 | about: Suggest an idea for this project
4 | labels: enhancement
5 | ---
6 |
7 | ## 🚀 Feature Proposal
8 |
9 | **Is your feature request related to a problem? Please describe.**
10 |
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 |
13 | **Describe the solution you'd like**
14 |
15 | A clear and concise description of what you want to happen.
16 |
17 | **Describe alternatives you've considered**
18 |
19 | A clear and concise description of any alternative solutions or features you've considered.
20 |
21 | **Additional context**
22 |
23 | Add any other context or screenshots about the feature request here.
24 |
--------------------------------------------------------------------------------
/src/styles/types/photo.css:
--------------------------------------------------------------------------------
1 | @import "@commonVars";
2 |
3 | .card-photo {
4 | .card-photos {
5 | margin-bottom: 20px;
6 | }
7 |
8 | &.photoset {
9 | .card-photos {
10 | display: grid;
11 | grid-template-columns: repeat(2, 1fr);
12 | grid-row-gap: 20px;
13 | grid-column-gap: 20px;
14 | align-items: center;
15 |
16 | li {
17 | display: none;
18 | }
19 |
20 | li:nth-child(3n + 1) {
21 | grid-column: 1/3;
22 | }
23 |
24 | li:nth-child(-n + 3) {
25 | display: block;
26 | }
27 | }
28 | }
29 |
30 | .card-picture {
31 | display: block;
32 | width: 100%;
33 | height: auto;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 |
3 | module.exports = {
4 | plugins: [
5 | require('postcss-import')({
6 | resolve (id) {
7 | let aliasFound = false
8 | const listAlias = [
9 | {
10 | alias: '@commonVars',
11 | path: './src/styles/vars.css'
12 | }
13 | ]
14 |
15 | listAlias.forEach(item => {
16 | if (id.match(new RegExp(item.alias, 'g'))) {
17 | aliasFound = path.resolve(__dirname, item.path, id.slice(16))
18 | }
19 | })
20 |
21 | return aliasFound || id
22 | }
23 | }),
24 | require('postcss-preset-env')({
25 | stage: 2,
26 | features: {
27 | 'custom-properties': {
28 | warnings: true,
29 | preserve: false
30 | }
31 | }
32 | }),
33 | require('postcss-nested')(),
34 | require('postcss-custom-media')()
35 | ]
36 | }
37 |
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | home: true
3 | heroText: TumblrBuilder
4 | tagline: Javascript library to build custom Tumblr from API
5 | actionText: Get Started →
6 | actionLink: /guide/
7 | features:
8 | - title: Default and custom theme
9 | details: All pages and article types have minimalist theme with the main fields and can individually be overrides
10 | - title: Extra features
11 | details: Infinite scroll on articles list, display all hashtags of articles, get related posts and increase load performance with browser storage
12 | - title: Out of the box
13 | details: TumblrBuilder can works inside a Tumblr blog and outside in your personal website, thanks to the API
14 | footer: MIT Licensed | Copyright © 2013-2020 Yoriiis
15 | ---
16 |
17 | # Easy install
18 |
19 | ```bash
20 | npm install tumblr-builder --save-dev
21 | ```
22 |
--------------------------------------------------------------------------------
/docs/guide/getting-started.md:
--------------------------------------------------------------------------------
1 | # Getting started
2 |
3 | ## Installation
4 |
5 | First, install the library from [npm](https://www.npmjs.com/package/tumblr-builder).
6 |
7 | ::: tip Package manager
8 | In the following example we will use `npm` but `yarn` also work :heart:
9 | :::
10 |
11 | ```bash
12 | npm install tumblr-builder --save-dev
13 | ```
14 |
15 | ## Get an API Key
13 |
14 |
${datas.title}
15 | ${datas.body}
16 |
23 |
24 |
16 |
21 |
22 |
23 | Tagged: ${tag}
24 |
25 | ${posts.map(post => templates[post.type](post)).join('')}
26 |
27 | `
28 | }
29 |
--------------------------------------------------------------------------------
/src/scripts/templates/posts/audio.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Template for audio Tumblr post type
3 | *
4 | * @param {Object} datas Datas for the post
5 | *
6 | * @returns {String} HTML string for the template
7 | */
8 |
9 | export default function TemplateAudio (datas) {
10 | /* prettier-ignore */
11 | return `
12 |
13 |
14 | ${datas.player}
15 |
16 |
26 |
13 |
14 |
15 | ${datas.text}
16 |
17 |
18 |
25 |
26 |
13 |
14 | ${datas.player[2].embed_code}
15 |
16 |
26 |
16 |
21 |
22 |
23 |
24 | ${posts.map(post => templates[post.type](post)).join('')}
25 |
26 | ${relatedPosts.length ? `
27 |
28 |
Related posts
29 | ${relatedPosts.map(post => templates[post.type](post)).join('')}
30 |
31 | ` : ''}
32 | `
33 | }
34 |
--------------------------------------------------------------------------------
/src/scripts/utils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Get current scroll position
3 | *
4 | * @returns {Integer} Scroll position
5 | */
6 | export function getScrollTop () {
7 | return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
8 | }
9 |
10 | /**
11 | * Get a unique random number between min/max
12 | *
13 | * @param {*} numPicks Number of items to returns
14 | * @param {*} min Minimal value to start the random
15 | * @param {*} max Maximal value to end the random
16 | *
17 | * @returns {Array} Array of random numbers
18 | */
19 | export function getRandoms (numPicks, min, max) {
20 | var len = max - min + 1
21 | var nums = new Array(len)
22 | var selections = []
23 | var i = 0
24 | var j = 0
25 |
26 | if (min === 0) {
27 | if (numPicks > max + 1) numPicks = max
28 | } else {
29 | if (numPicks > max - min + 1) numPicks = max
30 | }
31 |
32 | // Initialize the array
33 | for (i = 0; i < len; i++) {
34 | nums[i] = i + min
35 | }
36 |
37 | // Randomly pick one from the array
38 | for (j = 0; j < numPicks; j++) {
39 | var index = Math.floor(Math.random() * nums.length)
40 | selections.push(nums[index])
41 | nums.splice(index, 1)
42 | }
43 |
44 | return selections
45 | }
46 |
--------------------------------------------------------------------------------
/src/scripts/templates/posts/chat.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Template for chat Tumblr post type
3 | *
4 | * @param {Object} datas Datas for the post
5 | *
6 | * @returns {String} HTML string for the template
7 | */
8 |
9 | export default function TemplateChat (datas) {
10 | /* prettier-ignore */
11 | return `
12 |
13 |
14 |
${datas.title}
15 |
16 | ${datas.dialogue.map(line => `
17 |
18 | ${line.label}
19 | ${line.phrase}
20 |
21 | `).join('')}
22 |
23 |
30 |
31 |
16 |
21 |
22 |
23 |
33 |
34 | ${posts.map(post => templates[post.type](post)).join('')}
35 |
36 | `
37 | }
38 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
13 |
14 | ## What type of PR is this? (check all applicable)
15 |
16 | - [ ] Refactor
17 | - [ ] Feature
18 | - [ ] Bug Fix
19 | - [ ] Optimization
20 | - [ ] Documentation Update
21 |
22 | ## Description
23 |
24 | Please describe the change as necessary.
25 | If it's a feature or enhancement please be as detailed as possible.
26 | If it's a bug fix, please link the issue that it fixes or describe the bug in as much detail.
27 |
28 | ## Related Tickets & Documents
29 |
30 | ## Mobile & Desktop Screenshots/Recordings (if there are UI changes)
31 |
32 | ## Added tests?
33 |
34 | - [ ] Yes
35 | - [ ] No, because they aren't needed
36 | - [ ] No, because I need help
37 |
38 | ## Added to documentation?
39 |
40 | - [ ] VuePress docs
41 | - [ ] Readme
42 | - [ ] No documentation needed
43 |
44 | ## [optional] Are there any post deployment tasks we need to perform?
45 |
--------------------------------------------------------------------------------
/src/scripts/templates/posts/photo.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Template for photo/photoset Tumblr post type
3 | *
4 | * @param {Object} datas Datas for the post
5 | *
6 | * @returns {String} HTML string for the template
7 | */
8 |
9 | export default function TemplatePhoto (datas) {
10 | const isPhotoset = datas.photos.length > 1
11 | /* prettier-ignore */
12 | return `
13 |
14 |
15 |
16 | ${datas.photos.map(photo => `
17 |
18 |
20 | `).join('')}
21 |
22 | ${datas.summary
23 | ? `
${datas.summary} `
24 | : ''}
25 |
32 |
33 |
TumblrBuilder
5 |
16 |
21 |
22 |
23 |
33 |
34 | ${posts.map(post => templates[post.type](post)).join('')}
35 |
36 | `
37 | },
38 | tagged: ({ templates, tag, posts }) => {
39 | /* prettier-ignore */
40 | return `
41 | Custom tagged page
42 |
43 |
48 |
49 |
50 | Tagged: ${tag}
51 |
52 | ${posts.map(post => templates[post.type](post)).join('')}
53 |
54 | `
55 | },
56 | post: ({ templates, posts, relatedPosts }) => {
57 | /* prettier-ignore */
58 | return `
59 | Custom post pages
60 |
61 |
66 |
67 |
68 |
69 | ${posts.map(post => templates[post.type](post)).join('')}
70 |
71 | ${relatedPosts.length ? `
72 |
73 |
My related posts
74 | ${relatedPosts.map(post => templates[post.type](post)).join('')}
75 |
76 | ` : ''}
77 | `
78 | }
79 | }
80 | })
81 |
82 | // Initialize the Tumblr from the instance
83 | tumblr.init().then(response => {
84 | console.log(response)
85 | })
86 |
--------------------------------------------------------------------------------
/netlify/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const webpack = require('webpack')
3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
4 | const ProgressBarPlugin = require('progress-bar-webpack-plugin')
5 | const TerserPlugin = require('terser-webpack-plugin')
6 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
7 |
8 | module.exports = (env, argv) => {
9 | const isProduction = argv.mode === 'production'
10 |
11 | return {
12 | watch: !isProduction,
13 | entry: {
14 | netlify: `${path.resolve(__dirname, './netlify.js')}`
15 | },
16 | watchOptions: {
17 | ignored: /node_modules/
18 | },
19 | devtool: !isProduction ? 'source-map' : 'none',
20 | output: {
21 | path: path.resolve(__dirname, './dist'),
22 | filename: '[name].js',
23 | sourceMapFilename: '[file].map'
24 | },
25 | module: {
26 | rules: [
27 | {
28 | test: /\.js$/,
29 | include: [path.resolve(__dirname, './')],
30 | use: [
31 | {
32 | loader: 'babel-loader'
33 | }
34 | ]
35 | },
36 | {
37 | test: /\.css$/,
38 | include: [path.resolve(__dirname, './'), path.resolve(__dirname, '../dist')],
39 | use: [
40 | MiniCssExtractPlugin.loader,
41 | {
42 | loader: 'css-loader'
43 | },
44 | {
45 | loader: 'postcss-loader',
46 | options: {
47 | config: {
48 | path: path.resolve(__dirname, './')
49 | }
50 | }
51 | }
52 | ]
53 | }
54 | ]
55 | },
56 | plugins: [
57 | new ProgressBarPlugin(),
58 | new MiniCssExtractPlugin({
59 | filename: '[name].css',
60 | chunkFilename: '[name].css'
61 | }),
62 | new webpack.optimize.ModuleConcatenationPlugin()
63 | ],
64 | stats: {
65 | assets: true,
66 | colors: true,
67 | hash: false,
68 | timings: true,
69 | chunks: false,
70 | chunkModules: false,
71 | modules: false,
72 | children: false,
73 | entrypoints: false,
74 | excludeAssets: /.map$/,
75 | assetsSort: '!size'
76 | },
77 | optimization: {
78 | minimizer: [
79 | new TerserPlugin({
80 | extractComments: false,
81 | cache: true,
82 | parallel: true,
83 | sourceMap: false,
84 | terserOptions: {
85 | extractComments: 'all',
86 | compress: {
87 | drop_console: false
88 | },
89 | mangle: true
90 | }
91 | }),
92 | new OptimizeCSSAssetsPlugin({})
93 | ],
94 | namedModules: true,
95 | removeAvailableModules: true,
96 | removeEmptyChunks: true,
97 | mergeDuplicateChunks: true,
98 | occurrenceOrder: true,
99 | providedExports: false,
100 | splitChunks: false
101 | }
102 | }
103 | }
104 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const webpack = require('webpack')
3 | const ProgressBarPlugin = require('progress-bar-webpack-plugin')
4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
5 |
6 | const TerserPlugin = require('terser-webpack-plugin')
7 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
8 |
9 | module.exports = (env, argv) => {
10 | const isProduction = argv.mode === 'production'
11 |
12 | return {
13 | watch: !isProduction,
14 | entry: {
15 | 'tumblr-builder': './src/scripts/tumblr-builder.js'
16 | },
17 | watchOptions: {
18 | ignored: /node_modules/
19 | },
20 | devtool: !isProduction ? 'source-map' : 'none',
21 | output: {
22 | path: path.resolve(__dirname, './dist'),
23 | publicPath: '/dist/',
24 | filename: '[name].js',
25 | sourceMapFilename: '[file].map',
26 | libraryTarget: 'umd',
27 | libraryExport: 'default',
28 | library: 'TumblrBuilder'
29 | },
30 | module: {
31 | rules: [
32 | {
33 | test: /\.js$/,
34 | include: path.resolve(__dirname, './src'),
35 | use: [
36 | {
37 | loader: 'babel-loader'
38 | }
39 | ]
40 | },
41 | {
42 | test: /\.css$/,
43 | include: [path.resolve(__dirname, './src')],
44 | use: [
45 | MiniCssExtractPlugin.loader,
46 | { loader: 'css-loader' },
47 | {
48 | loader: 'postcss-loader',
49 | options: {
50 | config: {
51 | path: path.resolve(__dirname, './')
52 | }
53 | }
54 | }
55 | ]
56 | }
57 | ]
58 | },
59 | plugins: [
60 | new ProgressBarPlugin(),
61 | new webpack.optimize.ModuleConcatenationPlugin(),
62 | new MiniCssExtractPlugin({
63 | filename: '[name].css',
64 | chunkFilename: '[name].css'
65 | })
66 | ],
67 | stats: {
68 | assets: true,
69 | colors: true,
70 | hash: false,
71 | timings: true,
72 | chunks: false,
73 | chunkModules: false,
74 | modules: false,
75 | children: false,
76 | entrypoints: false,
77 | excludeAssets: /.map$/,
78 | assetsSort: '!size'
79 | },
80 | optimization: {
81 | minimizer: [
82 | new TerserPlugin({
83 | extractComments: false,
84 | cache: true,
85 | parallel: true,
86 | sourceMap: false,
87 | terserOptions: {
88 | extractComments: 'all',
89 | compress: {
90 | drop_console: false
91 | },
92 | mangle: true
93 | }
94 | }),
95 | new OptimizeCSSAssetsPlugin({})
96 | ],
97 | namedModules: true,
98 | removeAvailableModules: true,
99 | removeEmptyChunks: true,
100 | mergeDuplicateChunks: true,
101 | occurrenceOrder: true,
102 | providedExports: false,
103 | splitChunks: false
104 | }
105 | }
106 | }
107 |
--------------------------------------------------------------------------------
/examples/dist/custom-pages.js:
--------------------------------------------------------------------------------
1 | !function(t){var e={};function n(a){if(e[a])return e[a].exports;var s=e[a]={i:a,l:!1,exports:{}};return t[a].call(s.exports,s,s.exports,n),s.l=!0,s.exports}n.m=t,n.c=e,n.d=function(t,e,a){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:a})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)n.d(a,s,function(e){return t[e]}.bind(null,s));return a},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="./examples/custom-pages/custom-pages.js")}({"./examples/custom-pages/custom-pages.js":function(t,e){new window.TumblrBuilder({element:document.querySelector("#tumblr-app"),host:"tmblr-builder.tumblr.com",apiKey:"X3Hk9uvqCx5OJJVKm9AZX8uh6wf1OhLPtKK5vCJcmQUyngWabO",limitData:250,cache:!0,cacheMethod:"sessionStorage",nearBottom:350,elementsPerPage:2,templatesPages:{home:({templates:t,tags:e,posts:n})=>`\n\t\t\t\tCustom home page\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tHome \n\t\t\t\t\t\t\t \n\t\t\t\t\t\t \n\t\t\t\t\t\n\t\t\t\t \n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t${n.map(e=>t[e.type](e)).join("")}\n\t\t\t\t
\n\t\t\t`,tagged:({templates:t,tag:e,posts:n})=>`\n\t\t\t\tCustom tagged page\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tHome \n\t\t\t\t\t\t\t \n\t\t\t\t\t\t \n\t\t\t\t\t\n\t\t\t\t \n\t\t\t\tTagged: ${e} \n\t\t\t\t\n\t\t\t\t\t${n.map(e=>t[e.type](e)).join("")}\n\t\t\t\t
\n\t\t\t`,post:({templates:t,posts:e,relatedPosts:n})=>`\n\t\t\t\tCustom post pages\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tHome \n\t\t\t\t\t\t\t \n\t\t\t\t\t\t \n\t\t\t\t\t\n\t\t\t\t \n\t\t\t\t\n\t\t\t\t\t${e.map(e=>t[e.type](e)).join("")}\n\t\t\t\t
\n\t\t\t\t${n.length?`\n\t\t\t\t\t\n\t\t\t\t\t\t
My related posts \n\t\t\t\t\t\t${n.map(e=>t[e.type](e)).join("")}\n\t\t\t\t\t\n\t\t\t\t`:""}\n \t\t`}}).init().then(t=>{console.log(t)})}});
--------------------------------------------------------------------------------
/examples/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const webpack = require('webpack')
3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
4 | const ProgressBarPlugin = require('progress-bar-webpack-plugin')
5 | const TerserPlugin = require('terser-webpack-plugin')
6 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
7 |
8 | module.exports = (env, argv) => {
9 | const isProduction = argv.mode === 'production'
10 |
11 | return {
12 | watch: !isProduction,
13 | entry: {
14 | 'basic-usage': `${path.resolve(__dirname, './basic-usage/basic-usage.js')}`,
15 | 'custom-pages': `${path.resolve(__dirname, './custom-pages/custom-pages.js')}`,
16 | 'custom-posts': `${path.resolve(__dirname, './custom-posts/custom-posts.js')}`
17 | },
18 | watchOptions: {
19 | ignored: /node_modules/
20 | },
21 | devtool: !isProduction ? 'source-map' : 'none',
22 | output: {
23 | path: path.resolve(__dirname, './dist'),
24 | filename: '[name].js',
25 | sourceMapFilename: '[file].map'
26 | },
27 | module: {
28 | rules: [
29 | {
30 | test: /\.js$/,
31 | include: [path.resolve(__dirname, './')],
32 | use: [
33 | {
34 | loader: 'babel-loader'
35 | }
36 | ]
37 | },
38 | {
39 | test: /\.css$/,
40 | include: [path.resolve(__dirname, './'), path.resolve(__dirname, '../dist')],
41 | use: [
42 | MiniCssExtractPlugin.loader,
43 | {
44 | loader: 'css-loader'
45 | },
46 | {
47 | loader: 'postcss-loader',
48 | options: {
49 | config: {
50 | path: path.resolve(__dirname, './')
51 | }
52 | }
53 | }
54 | ]
55 | }
56 | ]
57 | },
58 | plugins: [
59 | new ProgressBarPlugin(),
60 | new MiniCssExtractPlugin({
61 | filename: '[name].css',
62 | chunkFilename: '[name].css'
63 | }),
64 | new webpack.optimize.ModuleConcatenationPlugin()
65 | ],
66 | stats: {
67 | assets: true,
68 | colors: true,
69 | hash: false,
70 | timings: true,
71 | chunks: false,
72 | chunkModules: false,
73 | modules: false,
74 | children: false,
75 | entrypoints: false,
76 | excludeAssets: /.map$/,
77 | assetsSort: '!size'
78 | },
79 | optimization: {
80 | minimizer: [
81 | new TerserPlugin({
82 | extractComments: false,
83 | cache: true,
84 | parallel: true,
85 | sourceMap: false,
86 | terserOptions: {
87 | extractComments: 'all',
88 | compress: {
89 | drop_console: false
90 | },
91 | mangle: true
92 | }
93 | }),
94 | new OptimizeCSSAssetsPlugin({})
95 | ],
96 | namedModules: true,
97 | removeAvailableModules: true,
98 | removeEmptyChunks: true,
99 | mergeDuplicateChunks: true,
100 | occurrenceOrder: true,
101 | providedExports: false,
102 | splitChunks: false
103 | }
104 | }
105 | }
106 |
--------------------------------------------------------------------------------
/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | base: '/tumblr-builder/',
3 | dest: 'docs/site',
4 | markdown: {
5 | lineNumbers: true
6 | },
7 | title: 'TumblrBuilder',
8 | description: 'Javascript library to build custom Tumblr from API',
9 | head: [
10 | ['link', { rel: 'manifest', href: '/manifest.json' }],
11 | ['link', { rel: 'shortcut icon', type: 'image/png', href: '/favicon.ico' }],
12 | ['meta', { name: 'theme-color', content: '#001935' }],
13 | ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
14 | ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
15 | ['link', { rel: 'apple-touch-icon', href: 'icons/apple-touch-icon-152x152.png' }],
16 | [
17 | 'meta',
18 | { name: 'msapplication-TileImage', content: 'icons/msapplication-icon-144x144.png' }
19 | ],
20 |
21 | ['meta', { name: 'msapplication-TileColor', content: '#001935' }]
22 | ],
23 | plugins: [
24 | [
25 | '@vuepress/pwa',
26 | {
27 | serviceWorker: true,
28 | updatePopup: true
29 | }
30 | ],
31 | '@vuepress/back-to-top',
32 | '@vuepress/nprogress'
33 | ],
34 | themeConfig: {
35 | repo: 'yoriiis/tumblr-builder',
36 | repoLabel: 'Github',
37 | docsDir: 'docs',
38 | docsBranch: 'master',
39 | editLinks: true,
40 | editLinkText: 'Edit this page',
41 | smoothScroll: true,
42 | nextLinks: true,
43 | prevLinks: true,
44 | lastUpdated: 'Last Updated',
45 | search: true,
46 | searchMaxSuggestions: 10,
47 | searchPlaceholder: 'Search...',
48 | algolia: {
49 | apiKey: '02b27ef69549260976707846ce013194',
50 | indexName: 'tumblr-builder'
51 | },
52 | activeHeaderLinks: false,
53 | displayAllHeaders: false,
54 | nav: [
55 | { text: 'Guide', link: '/guide/' },
56 | {
57 | text: 'Demo',
58 | items: [
59 | {
60 | text: 'Tumblr',
61 | link: 'http://tmblr-builder.tumblr.com'
62 | },
63 | { text: 'Out of the box', link: 'https://tumblr-builder.netlify.app' }
64 | ]
65 | },
66 | {
67 | text: 'Learn more',
68 | items: [
69 | {
70 | text: 'Tumblr',
71 | items: [
72 | {
73 | text: 'API',
74 | link: 'https://www.tumblr.com/docs/en/api/v2'
75 | },
76 | {
77 | text: 'Custom theme',
78 | link: 'https://www.tumblr.com/docs/en/custom_themes'
79 | }
80 | ]
81 | },
82 | {
83 | text: 'Miscellaneous',
84 | items: [
85 | {
86 | text: 'Changelog',
87 | link:
88 | 'https://github.com/yoriiis/tumblr-builder/blob/master/CHANGELOG.md'
89 | }
90 | ]
91 | }
92 | ]
93 | }
94 | ],
95 | sidebar: {
96 | '/guide/': [
97 | {
98 | title: 'Guide',
99 | collapsable: false,
100 | sidebarDepth: 2,
101 | children: [
102 | '',
103 | ['getting-started', 'Getting started'],
104 | ['how-it-works', 'How it works'],
105 | ['available-methods', 'Available methods'],
106 | ['deploying', 'Deploying']
107 | ]
108 | },
109 | {
110 | title: 'Advanced',
111 | collapsable: false,
112 | sidebarDepth: 2,
113 | children: [
114 | ['custom-pages', 'Custom pages'],
115 | ['custom-posts', 'Custom posts']
116 | ]
117 | }
118 | ]
119 | }
120 | }
121 | }
122 |
--------------------------------------------------------------------------------
/docs/guide/available-methods.md:
--------------------------------------------------------------------------------
1 | # Available methods
2 |
3 | List of functions exposed by the instance.
4 |
5 | ::: tip API research
6 | Functions `getAllTags` and `getRelatedPosts` executes research in the collection of articles get from the API according to the [limitData](how-it-works.html#limitdata) option. The limit can be adjust to fit your need.
7 | :::
8 |
9 | ## init
10 |
11 | - Return: `Promise`
12 |
13 | The function build the app and returns a promise. **API dependents functions must be called when `init` function is ready.**
14 |
15 | ```javascript
16 | tumblr.init().then(response => {
17 | // App is render and ready
18 | });
19 | ```
20 |
21 | Since `init()` returns a promise, you can achieve the same as the above using the new [ES2017 async/await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) syntax:
22 |
23 | ```javascript
24 | const response = await tumblr.init();
25 | ```
26 |
27 | The function exposes a `response` object with datas from the API including following fields.
28 |
29 | ### response.totalPosts
30 |
31 | - Type: `Integer`
32 | - Default: `0`
33 |
34 | The total of articles available on the Tumblr blog, according to the [host](how-it-works.html#host) option.
35 |
36 | ### response.posts
37 |
38 | - Type: `Array`
39 | - Default: `[]`
40 |
41 | List of articles datas returns by the app.
42 |
43 | ### response.tags
44 |
45 | - Type: `Array`
46 | - Default: `[]`
47 |
48 | List of all hashtags for all articles requested by the app.
49 |
50 | ## getAllTags
11 |
12 |
13 | ```
14 |
15 | ## Initialize
16 |
17 | Then, we will initialize the constructor. **Highlight lines are mandatory parameters.**
18 |
19 | ```javascript{2,3,4}
20 | const tumblr = new TumblrBuilder({
21 | element: null,
22 | host: "",
23 | apiKey: "",
24 | limitData: 250,
25 | cache: false,
26 | cacheMethod: "sessionStorage",
27 | nearBottom: 350,
28 | elementsPerPage: 20,
29 | templatesPages: {},
30 | templatesPosts: {}
31 | });
32 | ```
33 |
34 | Next, create the Tumblr app.
35 |
36 | ```javascript
37 | tumblr.init().then(response => {
38 | // App is render and ready
39 | });
40 | ```
41 |
42 | ## Options
43 |
44 | ### element
45 |
46 | - Type: `HTMLElement`
47 | - Default: `null`
48 |
49 | The HTML element where the app will render.
50 |
51 | ### host
52 |
53 | - Type: `String`
54 | - Default: `''`
55 |
56 | The Tumblr blog hostname, for example `.tumblr.com`. The API will fetch datas from this blog.
57 |
58 | ### apiKey
59 |
60 | - Type: `String`
61 | - Default: `''`
62 |
63 | The Tumblr API key for API usage.
64 |
65 | ### limitData
66 |
67 | - Type: `Integer`
68 | - Default: `250`
69 |
70 | Number of articles to get from the API. The articles list is used to extract a list of all hashtags and find related articles relations by hashtags.
71 |
72 | ::: tip Use the browser storage
73 | To decrease the number of API requests and improve load performance, use the `cache` option to store all datas in the browser storage.
74 | :::
75 |
76 | ### cache
77 |
78 | - Type: `Boolean`
79 | - Default: `false`
80 |
81 | Tell the library whether to store API datas in the browser storage. This option improve performance, because app retrieves datas from the browser storage and no API requests are executed on the home page.
82 |
83 | Infinite scroll will used in priority the datas from the browser storage for firsts scrolling requests if available.
84 |
85 | ::: warning Cache priotity
86 | If `cache` option is enabled the app will used datas from the browser storage in priority. To see the lastest updates to the app while contributing to Tumblr, you will probably need to delete datas from browser storage or use incognito navigation.
87 | :::
88 |
89 | ### cacheMethod
90 |
91 | - Type: `String`
92 | - Default: `'sessionStorage'`
93 | - Possible value: `'sessionStorage'` `'localStorage'`
94 |
95 | Tell the method to use for the browser storage.
96 |
97 | ### nearBottom
98 |
99 | - Type: `Integer`
100 | - Default: `350`
101 |
102 | Tell from how many pixels from the bottom of the page the infinite scroll will trigger new requests.
103 |
104 | ### elementsPerPage
105 |
106 | - Type: `Integer`
107 | - Default: `20`
108 |
109 | Tell how many articles are display by page, for the first page request and next page requests with infinite scroll.
110 |
111 | ### templatesPages
112 |
113 | - Type: `Object`
114 | - Default: `{}`
115 | - Possible value: `{home, tagged, post}`
116 |
117 | Tell whether to override default templates for pages (home, tagged, post).
118 |
119 | Example of implementation:
120 |
121 | ```javascript
122 | new TumblrBuilder({
123 | templatesPages: {
124 | home: ({ templates, tags, posts }) => {},
125 | tagged: ({ templates, tag, posts }) => {},
126 | post: ({ templates, posts, relatedPosts }) => {}
127 | }
128 | });
129 | ```
130 |
131 | More information about [custom pages](custom-pages.html).
132 |
133 | ### templatesPosts
134 |
135 | - Type: `Object`
136 | - Default: `{}`
137 | - Possible value: `{audio, chat, link, photo, quote, text, video}`
138 |
139 | Tell whether to override default templates for article (audio, chat, link, photo, quote, text, video).
140 |
141 | Example of implementation:
142 |
143 | ```javascript
144 | new TumblrBuilder({
145 | templatesPosts: {
146 | audio: datas => {},
147 | chat: datas => {},
148 | link: datas => {},
149 | photo: datas => {},
150 | quote: datas => {},
151 | text: datas => {},
152 | video: datas => {}
153 | }
154 | });
155 | ```
156 |
157 | More information about [custom posts](custom-posts.html).
158 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tumblr-builder",
3 | "version": "2.0.0",
4 | "description": "Javascript library to build custom Tumblr from API",
5 | "keywords": [
6 | "tumblr",
7 | "builder",
8 | "tumblr api",
9 | "tumblr custom theme",
10 | "tumblr custom pages",
11 | "tumblr custom posts",
12 | "get related posts",
13 | "infinite scroll"
14 | ],
15 | "homepage": "https://github.com/yoriiis/tumblr-builder",
16 | "bugs": "https://github.com/yoriiis/tumblr-builder/issues",
17 | "repository": "https://github.com/yoriiis/tumblr-builder.git",
18 | "license": "MIT",
19 | "author": "Yoriiis",
20 | "main": "dist/tumblr.js",
21 | "scripts": {
22 | "build": "rm -rf ./dist && webpack --mode=production",
23 | "build:all": "npm run build && npm run build:examples && npm run build:netlify",
24 | "build:examples": "rm -rf ./examples/dist && webpack --config=./examples/webpack.config.js --mode=production",
25 | "build:netlify": "rm -rf ./netlify/dist && webpack --config=./netlify/webpack.config.js --mode=production",
26 | "docs:build": "vuepress build docs",
27 | "docs:dev": "vuepress dev docs --host localhost",
28 | "start": "webpack --mode=development",
29 | "start:examples": "webpack --config=./examples/webpack.config.js --mode=development",
30 | "start:netlify": "webpack --config=./netlify/webpack.config.js --mode=development",
31 | "test": "npm run test:eslint && npm run test:stylelint npm run test:markdown",
32 | "test:eslint": "eslint . --ignore-pattern dist --ignore-pattern docs",
33 | "test:markdown": "markdownlint '**/*.md' --ignore node_modules --ignore CHANGELOG.md",
34 | "test:stylelint": "stylelint './src/**/*.css' './examples/**/*.css' --ignore-pattern examples/dist"
35 | },
36 | "babel": {
37 | "plugins": [
38 | "babel-plugin-dynamic-import-node",
39 | "@babel/plugin-proposal-class-properties"
40 | ],
41 | "presets": [
42 | [
43 | "@babel/preset-env",
44 | {
45 | "targets": {
46 | "node": "12.14.0"
47 | }
48 | }
49 | ]
50 | ]
51 | },
52 | "browserslist": [
53 | "last 5 version"
54 | ],
55 | "prettier": {
56 | "printWidth": 100,
57 | "overrides": [
58 | {
59 | "files": "*.md",
60 | "options": {
61 | "proseWrap": "preserve",
62 | "tabWidth": 2,
63 | "useTabs": false
64 | }
65 | }
66 | ]
67 | },
68 | "eslintConfig": {
69 | "env": {
70 | "browser": true,
71 | "es6": true,
72 | "node": true
73 | },
74 | "parser": "babel-eslint",
75 | "parserOptions": {
76 | "ecmaFeatures": {
77 | "impliedStrict": true,
78 | "experimentalObjectRestSpread": true
79 | },
80 | "ecmaVersion": 6,
81 | "sourceType": "module"
82 | },
83 | "extends": "standard",
84 | "rules": {
85 | "indent": [
86 | "error",
87 | "tab",
88 | {
89 | "ignoredNodes": [
90 | "TemplateLiteral > *"
91 | ]
92 | }
93 | ],
94 | "no-console": 0,
95 | "no-tabs": 0
96 | },
97 | "globals": {
98 | "document": false,
99 | "window": false
100 | }
101 | },
102 | "stylelint": {
103 | "extends": "stylelint-config-standard",
104 | "rules": {
105 | "indentation": 4,
106 | "unit-whitelist": [
107 | "%",
108 | "px",
109 | "fr",
110 | "ms"
111 | ]
112 | }
113 | },
114 | "dependencies": {},
115 | "devDependencies": {
116 | "@babel/core": "7.9.0",
117 | "@babel/plugin-proposal-class-properties": "7.8.3",
118 | "@babel/preset-env": "7.9.0",
119 | "@vuepress/plugin-back-to-top": "1.4.1",
120 | "@vuepress/plugin-nprogress": "1.4.1",
121 | "@vuepress/plugin-pwa": "1.4.1",
122 | "babel-eslint": "10.0.3",
123 | "babel-loader": "8.0.6",
124 | "babel-plugin-dynamic-import-node": "2.3.0",
125 | "css-loader": "3.4.2",
126 | "eslint": "6.8.0",
127 | "eslint-config-standard": "14.1.0",
128 | "eslint-plugin-import": "2.20.0",
129 | "eslint-plugin-node": "11.0.0",
130 | "eslint-plugin-promise": "4.2.1",
131 | "eslint-plugin-standard": "4.0.1",
132 | "expose-loader": "0.7.5",
133 | "file-loader": "5.0.2",
134 | "markdownlint-cli": "0.21.0",
135 | "mini-css-extract-plugin": "0.4.1",
136 | "netlify-cli": "^2.47.0",
137 | "npm-force-resolutions": "0.0.3",
138 | "optimize-css-assets-webpack-plugin": "5.0.3",
139 | "postcss-custom-media": "7.0.8",
140 | "postcss-import": "12.0.1",
141 | "postcss-loader": "3.0.0",
142 | "postcss-nested": "4.2.1",
143 | "postcss-preset-env": "6.7.0",
144 | "prettier-eslint": "9.0.1",
145 | "prettier-stylelint": "0.4.2",
146 | "progress-bar-webpack-plugin": "2.1.0",
147 | "style-loader": "1.1.3",
148 | "stylefmt": "6.0.3",
149 | "stylelint": "13.0.0",
150 | "stylelint-config-recommended": "3.0.0",
151 | "stylelint-config-standard": "19.0.0",
152 | "terser-webpack-plugin": "2.3.2",
153 | "vuepress": "1.4.1",
154 | "webpack": "4.41.5",
155 | "webpack-cli": "3.3.10",
156 | "webpack-manifest-plugin": "2.2.0"
157 | }
158 | }
159 |
--------------------------------------------------------------------------------
/examples/custom-posts/custom-posts.js:
--------------------------------------------------------------------------------
1 | const tumblr = new window.TumblrBuilder({
2 | element: document.querySelector('#tumblr-app'),
3 | host: 'tmblr-builder.tumblr.com',
4 | apiKey: 'X3Hk9uvqCx5OJJVKm9AZX8uh6wf1OhLPtKK5vCJcmQUyngWabO',
5 | limitData: 250,
6 | cache: true,
7 | cacheMethod: 'sessionStorage',
8 | nearBottom: 350,
9 | elementsPerPage: 2,
10 | templatesPosts: {
11 | audio: datas => {
12 | /* prettier-ignore */
13 | return `
14 |
15 |
16 | ${datas.player}
17 |
18 |
28 |
35 |
36 |
${datas.title}
37 |
38 | ${datas.dialogue.map(line => `
39 |
40 | ${line.label}
41 | ${line.phrase}
42 |
43 | `).join('')}
44 |
45 |
52 |
53 |
79 |
80 |
81 | ${datas.photos.map(photo => `
82 |
83 |
85 | `).join('')}
86 |
87 | ${datas.summary
88 | ? `
${datas.summary} `
89 | : ''}
90 |
97 |
98 |
105 |
106 |
107 | ${datas.text}
108 |
109 |
110 |
117 |
118 |
125 |
126 |
${datas.title}
127 | ${datas.body}
128 |
135 |
136 |
143 |
144 | ${datas.player[2].embed_code}
145 |
146 |
147 |
${datas.summary}
148 |
155 |
156 |
\n\t\t\t\t\t
\n\t\t\t\t\t\t${t.player}\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
${t.summary} \n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
${t.title} \n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t${t.dialogue.map(t=>`\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t${t.label} \n\t\t\t\t\t\t\t\t\t\t${t.phrase}\n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t`).join("")}\n\t\t\t\t\t\t \n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
${t.title} \n\t\t\t\t\t\t${t.description}\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t${t.photos.map(n=>`\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t`).join("")}\n\t\t\t\t\t\t \n\t\t\t\t\t\t${t.summary?`
${t.summary} `:""}\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t${t.text}
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
${t.title} \n\t\t\t\t\t\t${t.body}\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t${t.player[2].embed_code}\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
${t.summary} \n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
` parameter. The `` placeholder must be replaced by the following values: `home` `tagged` `post`.
9 | :::
10 |
11 | ::: details Prettier ignore comment
12 | To prevent issue with Prettier and template literals indents, following examples are preceded by `/* prettier-ignore */`. [More information on Prettier](https://prettier.io/docs/en/ignore.html).
13 | :::
14 |
15 | ## Home page
16 |
17 | ### Default home page
18 |
19 | The default template used for the home page is described below. The function can be replaced with the `templatesPages.home` parameter. The `data-infinite-scroll` attribute is used for the infinite scroll feature.
20 |
21 | ```javascript
22 | function home ({ templates, tags, posts }) => {
23 | /* prettier-ignore */
24 | return `
25 |
26 |
31 |
32 |
33 |
43 |
44 | ${posts.map(post => templates[post.type](post)).join('')}
45 |
46 | `;
47 | }
48 | ```
49 |
50 | The function exposes following parameters:
51 |
52 | #### home ({ templates })
53 |
54 | - Type: `Object`
55 | - Default: `{}`
56 |
57 | List of all template pages functions (audio, chat, link, photo, quote, text, video). All defaults functions are automatically used if `templatesPages` object is not overrides them.
58 |
59 | #### home ({ tags })
60 |
61 | - Type: `Array`
62 | - Default: `[]`
63 |
64 | List of all hashtags from all available article, according to the [limitData](how-it-works.html#limitdata) option.
65 |
66 | #### home ({ posts })
67 |
68 | - Type: `Array`
69 | - Default: `[]`
70 |
71 | List of all articles to display on the first page (before the first infinite scroll), according to the [elementsPerPage](how-it-works.html#elementsperpage) option.
72 |
73 | ### Custom home page
74 |
75 | To customize the home page template, write your own `customHomePage` function inspired by the `home` function above.
76 |
77 | ```javascript
78 | function customHomePage({ templates, tags, posts }) {
79 | return `
80 |
81 | `;
82 | }
83 | ```
84 |
85 | Next, use the `templatesPages.home` parameter to passed the new home page template function.
86 |
87 | ```javascript
88 | new TumblrBuilder({
89 | templatesPages: {
90 | home: customHomePage
91 | }
92 | });
93 | ```
94 |
95 | ## Tagged page
96 |
97 | ### Default tagged page
98 |
99 | The default template used for the tagged page is described below. The function can be replaced with the `templatesPages.tagged` parameter. The `data-infinite-scroll` attribute is used for the infinite scroll feature.
100 |
101 | ```javascript
102 | function tagged ({ templates, tag, posts }) => {
103 | /* prettier-ignore */
104 | return `
105 |
106 |
107 |
108 | Home
109 |
110 |
111 |
112 |
113 | Tagged: ${tag}
114 |
115 | ${posts.map(post => templates[post.type](post)).join('')}
116 |
117 | `;
118 | }
119 | ```
120 |
121 | The function exposes following parameters:
122 |
123 | #### tagged ({ templates })
124 |
125 | - Type: `Object`
126 | - Default: `{}`
127 |
128 | List of all template pages functions (audio, chat, link, photo, quote, text, video). All defaults functions are automatically used if `templatesPages` object is not overrides them.
129 |
130 | #### tagged ({ tag })
131 |
132 | - Type: `String`
133 | - Default: `''`
134 |
135 | The current hashtag from the route.
136 |
137 | #### tagged ({ posts })
138 |
139 | - Type: `Array`
140 | - Default: `[]`
141 |
142 | List of all articles filtered by the current hashtag.
143 |
144 | ### Custom tagged page
145 |
146 | To customize the tagged page template, write your own `customTaggedPage` function inspired by the `tagged` function above.
147 |
148 | ```javascript
149 | function customTaggedPage({ templates, tag, posts }) {
150 | return `
151 |
152 | `;
153 | }
154 | ```
155 |
156 | Next, use the `templatesPages.tagged` option to passed the new tagged page function.
157 |
158 | ```javascript
159 | new TumblrBuilder({
160 | templatesPages: {
161 | tagged: customTaggedPage
162 | }
163 | });
164 | ```
165 |
166 | ## Post page
167 |
168 | ### Default post page
169 |
170 | The default template used for the post page is described below. The function can be replaced with the `templatesPages.post` parameter.
171 |
172 | ```javascript
173 | function post ({ templates, posts, relatedPosts }) => {
174 | /* prettier-ignore */
175 | return `
176 |
177 |
178 |
179 | Home
180 |
181 |
182 |
183 |
184 |
185 | ${posts.map(post => templates[post.type](post)).join('')}
186 |
187 | ${relatedPosts.length ? `
188 |
189 |
My related posts
190 | ${relatedPosts.map(post => templates[post.type](post)).join('')}
191 |
192 | ` : ''}
193 | `;
194 | }
195 | ```
196 |
197 | The function exposes following parameters:
198 |
199 | #### post ({ templates })
200 |
201 | - Type: `Object`
202 | - Default: `{}`
203 |
204 | List of all template pages functions (audio, chat, link, photo, quote, text, video). All defaults functions are automatically used if `templatesPages` object is not overrides them.
205 |
206 | #### post ({ posts })
207 |
208 | - Type: `Array`
209 | - Default: `[]`
210 |
211 | Datas for the current article.
212 |
213 | #### post ({ relatedPosts })
214 |
215 | - Type: `Array`
216 | - Default: `[]`
217 |
218 | List of related posts for the associated article.
219 |
220 | ### Custom post page
221 |
222 | To customize the post page template, write your own `customPostPage` function inspired by the `post` function above.
223 |
224 | ```javascript
225 | function customPostPage({ templates, posts, relatedPosts }) {
226 | return `
227 |
228 | `;
229 | }
230 | ```
231 |
232 | Next, use the `templatesPages.post` option to passed the new post page function.
233 |
234 | ```javascript
235 | new TumblrBuilder({
236 | templatesPages: {
237 | post: customPostPage
238 | }
239 | });
240 | ```
241 |
242 | ::: tip Custom related posts
243 | The `relatedPosts` parameter can be replaced by a new call to the [getRelatedPosts](available-methods.html#getrelatedposts) function with custom parameters.
244 | :::
245 |
--------------------------------------------------------------------------------
/docs/guide/custom-posts.md:
--------------------------------------------------------------------------------
1 | # Custom posts
2 |
3 | Need to customize the HTML for article types (audio, chat, link, photo, quote, text, video)? The `templatesPosts` option is for you :rocket:
4 |
5 | On app initialize, add the `templatesPosts` parameter with post types you need to customized. The others article types will automatically used their default template.
6 |
7 | ::: tip Override default templates
8 | To simply override the default template for a specific article type use the `templatesPosts.` parameter. The `` placeholder must be replaced by the following values: `audio` `chat` `link` `photo` `quote` `text` `video`.
9 | :::
10 |
11 | ::: details Prettier ignore comment
12 | To prevent issue with Prettier and template literals indents, following examples are preceded by `/* prettier-ignore */`. [More information on Prettier](https://prettier.io/docs/en/ignore.html).
13 | :::
14 |
15 | ## Function parameters
16 |
17 | All functions exposes following parameter.
18 |
19 | ### datas
20 |
21 | - Type: `Object`
22 | - Default: `{}`
23 |
24 | All datas available from the Tumblr API for the current article type. More informations about available fields on the [Tumblr API documentation](https://www.tumblr.com/docs/en/api/v2#posts--retrieve-published-posts).
25 |
26 | ## Audio post
27 |
28 | ### Default audio post
29 |
30 | The default template used for the audio post is described below. The function can be replaced with the `templatesPosts.audio` parameter.
31 |
32 | ```javascript
33 | function audio (datas) => {
34 | /* prettier-ignore */
35 | return `
36 |
37 |
38 | ${datas.player}
39 |
40 |
50 |
139 |
140 |
${datas.title}
141 | ${datas.description}
142 |
149 |
150 |
189 |
190 |
191 | ${datas.photos.map(photo => `
192 |
193 |
195 | `).join('')}
196 |
197 | ${datas.summary
198 | ? `
${datas.summary} `
199 | : ''}
200 |
207 |
208 |
246 |
247 |
248 | ${datas.text}
249 |
250 |
251 |
258 |
259 |
297 |
298 |
${datas.title}
299 | ${datas.body}
300 |
307 |
308 |
346 |
347 | ${datas.player[2].embed_code}
348 |
349 |
350 |
${datas.summary}
351 |
358 |
359 |
} Promise results from the API
204 | */
205 | requestAPI (url) {
206 | return fetch(url).then(response => response.json())
207 | }
208 |
209 | /**
210 | * Check if the Response from the API is valid
211 | *
212 | * @param {Object} datas Response datas
213 | *
214 | * @returns {Boolean} Is a valid Response
215 | */
216 | isValidResponse (datas) {
217 | return datas.meta.status === 200
218 | }
219 |
220 | /**
221 | * Extract a range of posts from browser storage if available
222 | *
223 | * @param {Object} range Start and end index for the range
224 | *
225 | * @returns {Array} List of corresponding posts
226 | */
227 | extractDatasFromLocalDatas (range) {
228 | return this.datas.posts.slice(range.start, range.end + 1)
229 | }
230 |
231 | /**
232 | * Get templates from constructor options templatesPages and templatesPosts
233 | * Else, dynamic import default template for each types
234 | *
235 | * @returns {Object} List of template functions by type
236 | */
237 | getTemplates = async () => {
238 | return {
239 | pages: await this.getTemplatesByType({
240 | keys: this.keysTemplatesPage,
241 | path: './templates/pages/',
242 | custom: this.options.templatesPages
243 | }),
244 | posts: await this.getTemplatesByType({
245 | keys: this.keysTemplatePosts,
246 | path: './templates/posts/',
247 | custom: this.options.templatesPosts
248 | })
249 | }
250 | }
251 |
252 | /**
253 | * Get templates between default and custom templates
254 | * Priority to custom templates
255 | *
256 | * @param {Object}
257 | * @param {String} keys Keys for template pages (home, tagged, post)
258 | * @param {String} path Path to dynamic import default templates
259 | * @param {String} custom Custom templates for the current type
260 | *
261 | * @returns {Object} List of templates for the current type (pages, posts)
262 | */
263 | getTemplatesByType = async ({ keys, path, custom }) => {
264 | const templates = {}
265 |
266 | const customTemplates = keys.filter(name => this.hasProperty(custom, name))
267 | customTemplates.forEach(name => {
268 | templates[name] = custom[name]
269 | })
270 | const defaultTemplates = keys.filter(name => !this.hasProperty(custom, name))
271 |
272 | const requestsDefaultTemplates = defaultTemplates.map(name => import(path + name))
273 |
274 | const responses = await Promise.all(requestsDefaultTemplates)
275 |
276 | responses.forEach((response, index) => {
277 | templates[defaultTemplates[index]] = response.default
278 | })
279 |
280 | return templates
281 | }
282 |
283 | /**
284 | * Build the Tumblr API url
285 | *
286 | * @param {Object}
287 | * @param {(String|Boolean)} id Post id
288 | * @param {Integer} offset Offset for the query
289 | * @param {Integer} limit Limit of results for the query
290 | * @param {String} tag Filter by a unique post tag
291 | *
292 | * @returns {String} API url for the request
293 | */
294 | getAPIUrl ({
295 | id = false,
296 | offset = 0,
297 | limit = this.options.limitData < this.nbPostPerRequest
298 | ? this.options.limitData
299 | : this.nbPostPerRequest,
300 | tag = false
301 | } = {}) {
302 | return `//api.tumblr.com/v2/blog/${this.options.host}/posts/?api_key=${
303 | this.options.apiKey
304 | }&limit=${limit}¬es_info=false&offset=${offset}${tag ? `&tag=${tag}` : ''}${
305 | id ? `&id=${id}` : ''
306 | }`
307 | }
308 |
309 | /**
310 | * Get all datas from the API
311 | * Store datas in browser storage is option is enabled
312 | *
313 | * @returns {Object} Datas from the API
314 | */
315 | getAllDatas = async e => {
316 | let datas
317 |
318 | if (this.options.cache) {
319 | var getDataFromCache = window[this.options.cacheMethod].getItem(this.browserStorageKey)
320 |
321 | if (getDataFromCache === null) {
322 | datas = await this.getDataFromAPI()
323 |
324 | window[this.options.cacheMethod].setItem(
325 | this.browserStorageKey,
326 | JSON.stringify(datas)
327 | )
328 | } else {
329 | datas = JSON.parse(window[this.options.cacheMethod].getItem(this.browserStorageKey))
330 | }
331 | } else {
332 | datas = await this.getDataFromAPI()
333 | window[this.options.cacheMethod].removeItem(this.browserStorageKey)
334 | }
335 |
336 | return datas
337 | }
338 |
339 | /**
340 | * Get datas from the API
341 | *
342 | * @returns {Object} Datas from the API
343 | */
344 | getDataFromAPI = async () => {
345 | // Trigger the first request to get infos about totalPosts and calculate next requests
346 | const datasFirstRequest = await this.requestAPI(this.getAPIUrl())
347 |
348 | if (this.isValidResponse(datasFirstRequest)) {
349 | const totalPosts = datasFirstRequest.response.total_posts
350 | const nbLoop = this.getNumberOfRequiredRequests(totalPosts)
351 | let posts = datasFirstRequest.response.posts
352 |
353 | if (datasFirstRequest.response.posts.length && nbLoop) {
354 | const requests = []
355 |
356 | // Do multiple loop according to nbLoop and options.limitData
357 | for (var i = 0; i < nbLoop; i++) {
358 | requests.push(
359 | this.requestAPI(
360 | this.getAPIUrl({
361 | offset: this.nbPostPerRequest + this.nbPostPerRequest * i
362 | })
363 | )
364 | )
365 | }
366 |
367 | await Promise.all(requests).then(responses => {
368 | responses.forEach(response => {
369 | posts = posts.concat(response.response.posts)
370 | })
371 | })
372 | }
373 | return { totalPosts, posts }
374 | } else {
375 | // If the request failed, return empty results to prevent break the application
376 | return { totalPosts: 0, posts: [] }
377 | }
378 | }
379 |
380 | /**
381 | * Get number of required requests to reach options.limitDatas
382 | * without the first request datas
383 | *
384 | * @param {*} totalPosts Total of posts from the API
385 | *
386 | * @returns {Integer} Number of request to reach options.limitDatas
387 | */
388 | getNumberOfRequiredRequests (totalPosts) {
389 | return totalPosts <= this.options.limitData
390 | ? Math.ceil((totalPosts - this.nbPostPerRequest) / this.nbPostPerRequest)
391 | : Math.ceil((this.options.limitData - this.nbPostPerRequest) / this.nbPostPerRequest)
392 | }
393 |
394 | /**
395 | * Get datas for the homepage (first page only)
396 | * Datas are available in the class property
397 | *
398 | * @returns {Object} Posts datas for the homepage
399 | */
400 | getDatasForHomePage () {
401 | const maxPosts =
402 | this.datas.totalPosts < this.options.elementsPerPage
403 | ? this.datas.totalPosts
404 | : this.options.elementsPerPage
405 |
406 | return this.datas.posts.slice(0, maxPosts)
407 | }
408 |
409 | /**
410 | * Get datas for the tagged page
411 | * Request the API to get posts
412 | *
413 | * @param {String} tag Tag to filter posts
414 | *
415 | * @returns {Object} Posts datas for the tagged page filter by tag
416 | */
417 | getDatasForTaggedPage = async tag => {
418 | const datas = await this.requestAPI(
419 | this.getAPIUrl({
420 | tag,
421 | limit: this.options.elementsPerPage
422 | })
423 | )
424 |
425 | return datas && datas.response ? datas.response.posts : []
426 | }
427 |
428 | /**
429 | * Get datas for the post page
430 | * Request the API to get posts
431 | *
432 | * @param {String} id Id of the current post
433 | *
434 | * @returns {Object} Posts datas for the post page filter by post id
435 | */
436 | getDatasForPostPage = async id => {
437 | const datas = await this.requestAPI(
438 | this.getAPIUrl({
439 | id: id
440 | })
441 | )
442 |
443 | return datas && datas.response ? datas.response.posts : []
444 | }
445 |
446 | /**
447 | * Get datas by page number, use by the infinite scroll
448 | * Request the local datas in priority
449 | * If no datas are available, request the API to get posts
450 | *
451 | * @param {Integer} pageNumber Page number
452 | *
453 | * @returns {Object} Posts datas for the homepage filter by page number
454 | */
455 | getPostsByPageNumber = async pageNumber => {
456 | const range = this.getRange(pageNumber)
457 | const datas = this.extractDatasFromLocalDatas(range)
458 |
459 | // Only home page can used local datas, tagged page need to filter (request directly)
460 | if (datas.length && this.getPageType() === 'home') {
461 | return datas
462 | } else {
463 | const datas = await this.requestAPI(
464 | this.getAPIUrl({
465 | offset: range.start,
466 | limit: this.options.elementsPerPage,
467 | tag: this.getPageType() === 'tagged' ? this.getHashTagFromRoute() : false
468 | })
469 | )
470 | return datas.response.posts
471 | }
472 | }
473 |
474 | /**
475 | * Get the type of the current page according to the hash
476 | *
477 | * @returns {(String|null)} Page type (tagged, post, home)
478 | */
479 | getPageType () {
480 | const hash = this.getRoute()
481 | const defaultRoute = ['', '#', '#_']
482 |
483 | if (hash.indexOf('/tagged/') !== -1) {
484 | return 'tagged'
485 | } else if (hash.indexOf('/post/') !== -1) {
486 | return 'post'
487 | } else if (defaultRoute.includes(hash)) {
488 | return 'home'
489 | } else {
490 | return null
491 | }
492 | }
493 |
494 | /**
495 | * Get range index (start, end) to extract posts from local datas
496 | * according to the current page position and elements per page
497 | *
498 | * @param {Integer} pageNumber Pagz number
499 | *
500 | * @returns {Object} Start and end index for the range
501 | */
502 | getRange (pageNumber) {
503 | const previousPage = pageNumber > 1 ? pageNumber - 1 : pageNumber
504 | return {
505 | start: previousPage * this.options.elementsPerPage,
506 | end: pageNumber * this.options.elementsPerPage - 1
507 | }
508 | }
509 |
510 | /**
511 | * Get hashtag from the route
512 | *
513 | * @returns {String} Current tag
514 | */
515 | getHashTagFromRoute () {
516 | return this.getRoute().split('/tagged/')[1]
517 | }
518 |
519 | /**
520 | * Get post id from the route
521 | *
522 | * @returns {String} Current post id
523 | */
524 | getPostIdFromRoute () {
525 | return this.getRoute().split('/post/')[1]
526 | }
527 |
528 | /**
529 | * Get the current route (hash)
530 | *
531 | * @returns {String} Current hash
532 | */
533 | getRoute () {
534 | return window.location.hash.substr(1)
535 | }
536 |
537 | /**
538 | * Get related posts
539 | * Research is executed is local datas collection only
540 | *
541 | * @param {Object}
542 | * @param {String} postId Pot id
543 | * @param {Integer} limit Limit of related posts results
544 | * @param {Array} tags Tags list of the current post
545 | * @param {Array} ignoreTags Ignore specific list of tags
546 | *
547 | * @returns {Array} List of related posts associated to the current post
548 | */
549 | getRelatedPosts ({ postId, limit = 3, tags = [], ignoreTags = [] }) {
550 | // Get all tags from current post without ignore tags
551 | const tagsSource = tags.filter(tag => !ignoreTags.includes(tag))
552 |
553 | // Get related posts
554 | const relatedPosts = this.datas.posts.filter(post =>
555 | post.tags.some(tag => tagsSource.includes(tag) && post.id_string !== postId)
556 | )
557 |
558 | // Get random keys
559 | const randomKeys = getRandoms(limit, 0, relatedPosts.length - 1) || []
560 |
561 | if (relatedPosts.length < limit) {
562 | return relatedPosts
563 | } else {
564 | // Extract random related posts
565 | return randomKeys.map(key => relatedPosts[key])
566 | }
567 | }
568 |
569 | /**
570 | * Get all tags from local datas
571 | * Tags are sorted alphabetical
572 | * Tags are search only from local datas according to options.limitData posts
573 | *
574 | * @returns {Array} List of tags
575 | */
576 | getAllTags () {
577 | return this.jsonComplete
578 | ? this.datas.posts
579 | .filter(post => post.tags.length)
580 | .flatMap(post => post.tags)
581 | .map(tag => tag.toLowerCase())
582 | .filter((elem, pos, arr) => {
583 | return arr.indexOf(elem) === pos
584 | })
585 | .sort()
586 | : []
587 | }
588 |
589 | /**
590 | * Custom hasOwnProperty to prevent security issue (ESLint no-prototype-builtins)
591 | *
592 | * @param {Object} objectSource Object source to search the key
593 | * @param {String} key The key to search inside the object
594 | *
595 | * @returns {Boolean} Is the key present inside the object
596 | */
597 | hasProperty (objectSource, key) {
598 | return Object.prototype.hasOwnProperty.call(objectSource, key)
599 | }
600 | }
601 |
--------------------------------------------------------------------------------
19 |
20 | `).join('')}
21 |