Skip to content

Commit ee2cf8b

Browse files
janoshrubosNathanWalker
janoshrubos
authored and
NathanWalker
committed
feat: add device frame to screenshots (#16)
1 parent d987d05 commit ee2cf8b

File tree

5 files changed

+186
-10
lines changed

5 files changed

+186
-10
lines changed

‎.vitepress/config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const {
44
markFlavorHeadings,
55
wrapFlavorContainersInTabs,
66
setupPrismCLILang,
7+
createDeviceFrameContainer,
78
} = require('./theme/nativescript-theme/plugins')
89

910
setupPrismCLILang()
@@ -73,6 +74,9 @@ module.exports = {
7374
md.use(markFlavorHeadings)
7475
md.use(wrapFlavorContainersInTabs)
7576

77+
// DeviceFrame related
78+
md.use(...createDeviceFrameContainer())
79+
7680
// other.
7781
md.use(codeBlocksPlugin)
7882
},

‎.vitepress/theme/nativescript-theme/plugins/device-frame.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
'use strict'
2+
/**
3+
* Adds device frames to images
4+
*
5+
* For example:
6+
* /// frame ios
7+
* <img src="ios_screenshot.png">
8+
* ///
9+
*
10+
* /// frame android
11+
* <img src="android_screenshot.png">
12+
* ///
13+
*/
14+
Object.defineProperty(exports, '__esModule', { value: true })
15+
exports.createDeviceFrameContainer = void 0
16+
const container = require('markdown-it-container')
17+
const klass = 'frame'
18+
function createDeviceFrameContainer() {
19+
return [
20+
container,
21+
klass,
22+
{
23+
marker: '/',
24+
render(tokens, idx) {
25+
const token = tokens[idx]
26+
const info = token.info.trim().slice(klass.length).trim()
27+
const deviceFrameStart = `
28+
<div class="${info} device-frame">
29+
<div class="${info} small-round-top"/>
30+
<div class="${info} round-top-left"/>
31+
<div class="${info} speaker"/>
32+
<div class="${info} screenshot">
33+
`
34+
const deviceFrameEnd = `
35+
</div>
36+
<div class="${info} button"/>
37+
</div>
38+
`
39+
if (token.nesting === 1) {
40+
return deviceFrameStart
41+
} else {
42+
return deviceFrameEnd
43+
}
44+
},
45+
},
46+
]
47+
}
48+
exports.createDeviceFrameContainer = createDeviceFrameContainer

‎.vitepress/theme/nativescript-theme/plugins/index.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use strict'
22
Object.defineProperty(exports, '__esModule', { value: true })
3-
exports.setupPrismCLILang = exports.wrapFlavorContainersInTabs = exports.markFlavorHeadings = exports.createFlavorContainer = exports.codeBlocksPlugin = void 0
3+
exports.setupPrismCLILang = exports.createDeviceFrameContainer = exports.wrapFlavorContainersInTabs = exports.markFlavorHeadings = exports.createFlavorContainer = exports.codeBlocksPlugin = void 0
44
var code_blocks_1 = require('./code-blocks')
55
Object.defineProperty(exports, 'codeBlocksPlugin', {
66
enumerable: true,
@@ -27,6 +27,13 @@ Object.defineProperty(exports, 'wrapFlavorContainersInTabs', {
2727
return flavor_container_1.wrapFlavorContainersInTabs
2828
},
2929
})
30+
var device_frame_1 = require('./device-frame')
31+
Object.defineProperty(exports, 'createDeviceFrameContainer', {
32+
enumerable: true,
33+
get: function () {
34+
return device_frame_1.createDeviceFrameContainer
35+
},
36+
})
3037
var prism_lang_cli_1 = require('./prism-lang-cli')
3138
Object.defineProperty(exports, 'setupPrismCLILang', {
3239
enumerable: true,

‎.vitepress/theme/nativescript-theme/styles.css

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3434,3 +3434,102 @@ svg.DocSearch-Hit-Select-Icon {
34343434
.code-tab-container [class*='language-'] pre {
34353435
margin: 0px;
34363436
}
3437+
3438+
.ios.device-frame {
3439+
display: inline-block;
3440+
margin: 30px;
3441+
background-color: #f8fafc;
3442+
border: 1px solid #bae6fd;
3443+
padding: 0 10px 0 10px;
3444+
border-radius: 25px;
3445+
max-width: 100% !important;
3446+
}
3447+
3448+
.ios.device-frame > .screenshot > img {
3449+
max-width: 200px;
3450+
border: 1px solid #bae6fd;
3451+
}
3452+
3453+
.ios.device-frame > .small-round-top {
3454+
margin: 10px auto;
3455+
width: 5px;
3456+
height: 5px;
3457+
background-color: #bae6fd;
3458+
border-radius: 50%;
3459+
}
3460+
3461+
.ios.device-frame > .round-top-left {
3462+
float: left;
3463+
margin-left: 65px;
3464+
margin-top: -2px;
3465+
width: 9px;
3466+
height: 9px;
3467+
background-color: #bae6fd;
3468+
border-radius: 50%;
3469+
}
3470+
3471+
.ios.device-frame > .speaker {
3472+
margin: 15px auto;
3473+
margin-top: 10px;
3474+
width: 30px;
3475+
height: 5px;
3476+
background-color: #bae6fd;
3477+
border-radius: 3px;
3478+
margin-bottom: -0.5em;
3479+
}
3480+
3481+
.ios.device-frame > .button {
3482+
border-radius: 50%;
3483+
margin: 10px auto;
3484+
width: 30px;
3485+
height: 30px;
3486+
border: 2px solid #bae6fd;
3487+
background: none !important;
3488+
margin-top: -1em;
3489+
}
3490+
3491+
.android.device-frame {
3492+
display: inline-block;
3493+
margin: 30px;
3494+
background-color: #f8fafc;
3495+
border: 1px solid #bae6fd;
3496+
padding: 0 10px 0 10px;
3497+
border-radius: 12px;
3498+
max-width: 100% !important;
3499+
}
3500+
3501+
.android.device-frame > .screenshot > img {
3502+
max-width: 223px;
3503+
border: 1px solid #bae6fd;
3504+
}
3505+
3506+
.android.device-frame > .small-round-top {
3507+
margin: 10px auto;
3508+
width: 0px;
3509+
height: 0px;
3510+
background-color: #bae6fd;
3511+
border-radius: 50%;
3512+
}
3513+
3514+
.android.device-frame > .round-top-left {
3515+
float: right;
3516+
margin-right: 10px;
3517+
margin-top: 3px;
3518+
width: 9px;
3519+
height: 9px;
3520+
background-color: #bae6fd;
3521+
border-radius: 50%;
3522+
}
3523+
3524+
.android.device-frame > .speaker {
3525+
margin: 15px auto;
3526+
width: 30px;
3527+
height: 5px;
3528+
background-color: #bae6fd;
3529+
border-radius: 3px;
3530+
margin-bottom: -1em;
3531+
}
3532+
3533+
.android.device-frame > .button {
3534+
display: none;
3535+
}

‎introduction.md

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,13 @@ Here are some of the default templates you may want to try:
5858
A basic template with a single page and no custom styles.
5959

6060
<!-- TODO: make nicer images -->
61-
<img src="https://raw.githubusercontent.com/NativeScript/nativescript-app-templates/master/packages/template-blank/tools/assets/appTemplate-ios.png" style="height:400px;">
62-
<img src="https://raw.githubusercontent.com/NativeScript/nativescript-app-templates/master/packages/template-blank/tools/assets/appTemplate-android.png" style="height:400px;">
61+
62+
/// frame ios
63+
<img src="https://raw.githubusercontent.com/NativeScript/nativescript-app-templates/master/packages/template-blank/tools/assets/appTemplate-ios.png">
64+
///
65+
/// frame android
66+
<img src="https://raw.githubusercontent.com/NativeScript/nativescript-app-templates/master/packages/template-blank/tools/assets/appTemplate-android.png">
67+
///
6368

6469
To use, run:
6570

@@ -72,8 +77,13 @@ ns create myCoolApp --template @nativescript/template-blank
7277
A simple template with a side drawer.
7378

7479
<!-- TODO: make nicer images -->
75-
<img src="https://raw.githubusercontent.com/NativeScript/nativescript-app-templates/master/packages/template-drawer-navigation/tools/assets/appTemplate-ios.png" style="height:400px">
76-
<img src="https://raw.githubusercontent.com/NativeScript/nativescript-app-templates/master/packages/template-drawer-navigation/tools/assets/appTemplate-android.png" style="height:400px">
80+
81+
/// frame ios
82+
<img src="https://raw.githubusercontent.com/NativeScript/nativescript-app-templates/master/packages/template-drawer-navigation/tools/assets/appTemplate-ios.png">
83+
///
84+
/// frame android
85+
<img src="https://raw.githubusercontent.com/NativeScript/nativescript-app-templates/master/packages/template-drawer-navigation/tools/assets/appTemplate-android.png">
86+
///
7787

7888
To use, run:
7989

@@ -86,8 +96,13 @@ ns create myCoolApp --template @nativescript/template-blank
8696
A simple template with multiple tabs.
8797

8898
<!-- TODO: make nicer images -->
89-
<img src="https://raw.githubusercontent.com/NativeScript/nativescript-app-templates/master/packages/template-tab-navigation/tools/assets/phone-tab-ios.png" style="height:400px">
90-
<img src="https://raw.githubusercontent.com/NativeScript/nativescript-app-templates/master/packages/template-tab-navigation/tools/assets/phone-tab-android.png" style="height:400px">
99+
100+
/// frame ios
101+
<img src="https://raw.githubusercontent.com/NativeScript/nativescript-app-templates/master/packages/template-tab-navigation/tools/assets/appTemplate-ios.png">
102+
///
103+
/// frame android
104+
<img src="https://raw.githubusercontent.com/NativeScript/nativescript-app-templates/master/packages/template-tab-navigation/tools/assets/appTemplate-android.png">
105+
///
91106

92107
To use, run:
93108

@@ -98,9 +113,12 @@ ns create myCoolApp --template @nativescript/template-tab-navigation
98113
### List and Details
99114

100115
A simple template with a ListView and a details screen.
101-
102-
<img src="https://raw.githubusercontent.com/NativeScript/nativescript-app-templates/master/packages/template-master-detail/tools/assets/phone-masterDetail-ios.png" style="height:400px">
103-
<img src="https://raw.githubusercontent.com/NativeScript/nativescript-app-templates/master/packages/template-master-detail/tools/assets/phone-masterDetail-detail-ios.png" style="height:400px">
116+
/// frame ios
117+
<img src="https://raw.githubusercontent.com/NativeScript/nativescript-app-templates/master/packages/template-master-detail/tools/assets/appTemplate-ios.png">
118+
///
119+
/// frame android
120+
<img src="https://raw.githubusercontent.com/NativeScript/nativescript-app-templates/master/packages/template-master-detail/tools/assets/appTemplate-android.png">
121+
///
104122

105123
To use, run:
106124

0 commit comments

Comments
 (0)