Initial commit
2
.dockerignore
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
*/node_modules
|
||||
*.log
|
||||
2
.gitattributes
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
88
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# TypeScript v1 declaration files
|
||||
typings/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
.env.test
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
|
||||
# next.js build output
|
||||
.next
|
||||
|
||||
# nuxt.js build output
|
||||
.nuxt
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
10
Dockerfile
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
FROM node:8.11.4
|
||||
|
||||
WORKDIR /app/website
|
||||
|
||||
EXPOSE 3000 35729
|
||||
COPY ./docs /app/docs
|
||||
COPY ./website /app/website
|
||||
RUN yarn install
|
||||
|
||||
CMD ["yarn", "start"]
|
||||
21
LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2019 danbulant
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
18
docker-compose.yml
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
version: "3"
|
||||
|
||||
services:
|
||||
docusaurus:
|
||||
build: .
|
||||
ports:
|
||||
- 3000:3000
|
||||
- 35729:35729
|
||||
volumes:
|
||||
- ./docs:/app/docs
|
||||
- ./website/blog:/app/website/blog
|
||||
- ./website/core:/app/website/core
|
||||
- ./website/i18n:/app/website/i18n
|
||||
- ./website/pages:/app/website/pages
|
||||
- ./website/static:/app/website/static
|
||||
- ./website/sidebars.json:/app/website/sidebars.json
|
||||
- ./website/siteConfig.js:/app/website/siteConfig.js
|
||||
working_dir: /app/website
|
||||
25
docs/en/LICENSE.md
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
The MIT License (MIT)
|
||||
=====================
|
||||
|
||||
Copyright © `2019` `Daniel Bulant & contributors`
|
||||
|
||||
Permission is hereby granted, free of charge, to any person
|
||||
obtaining a copy of this software and associated documentation
|
||||
files (the “Software”), to deal in the Software without
|
||||
restriction, including without limitation the rights to use,
|
||||
copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the
|
||||
Software is furnished to do so, subject to the following
|
||||
conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
22
docs/en/README.md
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
id: README
|
||||
title: Sketchware docs
|
||||
---
|
||||
|
||||
## Getting started
|
||||
|
||||
Sketchware was made to be as user friendly as possible. Even if you didn't write any code before, you can create your first android app in just a few minutes.
|
||||
|
||||
## What's scratch
|
||||
|
||||
Scratch is open source project for making simple animations and programs. You can find more at [scratch.mit.edu](https://scratch.mit.edu).
|
||||
|
||||
## Prerequisites
|
||||
|
||||
There are just a few things to get started:
|
||||
- **Get friendly with scratch** as sketchware is platform to build and share your apps, it's important to know what are you using to make your apps. Open scratch in your pc web browser and try to make a simple animation (trust me, you'll learn a lot). Then, go back here and start making *real* apps for android!
|
||||
- **Sketchware** sketchware is needed to be installed on your device to build your apps. Once your app is packaged (you'll learn what that means later), you can share your app anywhere (and others can try it even if they don't have sketchware)
|
||||
|
||||
## Next steps
|
||||
|
||||
You know everything you need to get started. Continue and [create your first app](first-project.md)
|
||||
6
docs/en/_coverpage.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
# Sketchware docs
|
||||
## Unofficial sketchware documentation
|
||||
|
||||
This is an project of Daniel Bulant and Honza Rössler to make a readable docs for scratch app creator for android.
|
||||
|
||||
This documentation is made using Markdown and Docsify.js
|
||||
63
docs/en/_sidebar.md
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
# sidebar
|
||||
- Getting started
|
||||
- [What is sketchware](README.md)
|
||||
- [Creating your first project](first-project.md)
|
||||
|
||||
- Debugging
|
||||
- [Why you can't have duplicate names](duplicate-vars.md)
|
||||
- View
|
||||
- Layouts
|
||||
- Linear(H)
|
||||
- Linear(V)
|
||||
- Scroll(H)
|
||||
- Scroll(V)
|
||||
- Widgets
|
||||
- TextView
|
||||
- EditText
|
||||
- Button
|
||||
- ImageView
|
||||
- Checkbox
|
||||
- Spinner
|
||||
- ListView
|
||||
- WebView
|
||||
- Switch
|
||||
- SeekBar
|
||||
- ProgressBar
|
||||
- CalendarView
|
||||
- AdView
|
||||
- MapView
|
||||
|
||||
- Blocks
|
||||
- [Variables And Lists](blocks/variables.md)
|
||||
- [Control](blocks/control.md)
|
||||
- [Operator](blocks/operator.md)
|
||||
- [Math](blocks/math.md)
|
||||
- [File](blocks/file.md)
|
||||
- [Views](blocks/views.md)
|
||||
- [Components](blocks/components.md)
|
||||
- [More blocks](blocks/functions.md)
|
||||
|
||||
- Components
|
||||
- [Overview](components/README.md)
|
||||
- [Intent](components/intent.md)
|
||||
- [SharedPreferences](components/sharedPreferences.md)
|
||||
- [Calendar](components/calendar.md)
|
||||
- [Vibrator](components/vibrator.md)
|
||||
- [Timer](components/timer.md)
|
||||
- [Dialog](components/dialog.md)
|
||||
- [MediaPlayer](components/mediaPlayer.md)
|
||||
- [SoundPool](components/soundPool.md)
|
||||
- [ObjectAnimator](components/objectAnimator.md)
|
||||
- [Camera](components/camera.md)
|
||||
- [FilePicker](components/filePicker.md)
|
||||
- [Gyroscope](components/gyroscope.md)
|
||||
- [Firebase](components/firebase.md)
|
||||
- [DB](components/db.md)
|
||||
- [Auth](components/auth.db)
|
||||
- [Storage](components/storage.md)
|
||||
- [Interestial ad](components/ads.md)
|
||||
- [TextToSpeech](components/tts.md)
|
||||
- [SpeechToText](components/stt.md)
|
||||
- [RequestNetwork](components/network.md)
|
||||
- [BluetoothConnect](components/bluetooth.md)
|
||||
- [LocationManager](components/location.md)
|
||||
26
docs/en/blocks/control.md
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
title: Control blocks
|
||||
id: control
|
||||
---
|
||||
|
||||
Control blocks have a yellow color and are used to check for condition or repeat part of code.
|
||||
|
||||
## Repeat (number)
|
||||
|
||||
Repeat block is used to repeat the blocks inside x times, where x is the number parameter. Can be stopped before it repeats all time with stop block, which will skip remaining loops and continue after the repeat block.
|
||||
|
||||
## Forever
|
||||
|
||||
Forever block is used to repeat the blocks inside until it's stopped with a stop block. *Compilation will not work if forever block doesn't have a stop block.* Please keep in mind, that **your app will be unusable if forever block doesn't run stop (for example when used with if<false>)**.
|
||||
|
||||
## Stop
|
||||
|
||||
Stop block can be placed only inside repeat and forever blocks. It will immediately stop the execution of the block and skip *after* the end of repeat/forever.
|
||||
|
||||
## If<bool>
|
||||
|
||||
If block is used to run blocks inside it only when bool is true. You can use bool variable or use operator blocks.
|
||||
|
||||
## If<bool> else
|
||||
|
||||
The if-else block works like if, but if the bool is false, it will execute blocks inside else instead.
|
||||
55
docs/en/blocks/variables.md
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
---
|
||||
title: Variables
|
||||
id: variables
|
||||
---
|
||||
|
||||
## What it is
|
||||
|
||||
Variable is a key-value pair. A variable is used to save data into RAM. This means, that where app is closed, variables are deleted.
|
||||
|
||||
## Variable types
|
||||
|
||||
### Boolean
|
||||
|
||||
*1 or 0*
|
||||
|
||||
Boolean is a variable that can be either true (1) or false (0). It's directly usable in if statement.
|
||||
|
||||
### Number
|
||||
|
||||
*20.35, 25, 27.5*
|
||||
|
||||
Number (programmatically known as Double) is a variable that can save most numbers (some are too big). It has double precision.
|
||||
|
||||
### String
|
||||
|
||||
*foo, bar, hello*
|
||||
|
||||
String is a variable that can save text.
|
||||
|
||||
### Map
|
||||
|
||||
*a = str, b = hello*
|
||||
|
||||
Map is a list of key-value pairs. Get and save data to it by keys, have same rules as variable names.
|
||||
|
||||
### List
|
||||
|
||||
*0 = hello, 1 = hi*
|
||||
|
||||
A list (known as array) is a variable that works as map, but instead of string as key, it uses offset number. This means, that the first value has index of 0. The last has Length - 1.
|
||||
|
||||
### Widgets
|
||||
|
||||
A widget is a variable too. A variable with the same name as id of the widget is used to save reference and to use it in blocks such as setText.
|
||||
|
||||
### Components
|
||||
|
||||
Components are saved in variable, same as widgets, they're saved to keep a reference to use it in future.
|
||||
|
||||
## Naming rules
|
||||
|
||||
A variable must have at least one character(can be either case). It must start with a character, then it can contain any number of characters, numbers or dashes.
|
||||
In RegEx, it would be written as ''' [a-zA-Z][a-zA-Z1-9-]* '''
|
||||
|
||||
Must not be duplicate name. See [Why you can't have duplicate names](duplicate-vars.md).
|
||||
84
docs/en/components.md
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
---
|
||||
id: components
|
||||
title: Components
|
||||
---
|
||||
|
||||
Components are used to add functionality to your app which isn't possible without them.
|
||||
There's a list of available components (at the time of writing):
|
||||
|
||||
## Intent
|
||||
|
||||
Intent is used to switch between activities and interchange data between them.
|
||||
|
||||
## SharedPreferences
|
||||
|
||||
Shared preferences are used to save data permanently. They are saved in device storage, but are deleted upon uninstallation(as opposed to *file*).
|
||||
|
||||
## Calendar
|
||||
|
||||
Calendar is used to get the current time and date. Can be used to format it to a given string.
|
||||
|
||||
## Vibrator
|
||||
|
||||
A simple component which will vibrate the device for x milliseconds (usually 200-300). Only on devices that support vibration.
|
||||
|
||||
## Timer
|
||||
|
||||
Timer is used to delay or repeat certain functions.
|
||||
|
||||
## Dialog
|
||||
|
||||
Dialog component is used to show simple dialog with up to three buttons.
|
||||
|
||||
## MediaPlayer
|
||||
|
||||
Media Player is used to play longer tracks.
|
||||
*The difference between soundpool and Media Player is that soundpool can handle multiple tracks while MediaPlayer can handle longer track(but only one per component) *.
|
||||
|
||||
## Soundpool
|
||||
|
||||
SoundPool is used to play more short tracks. It can store multiple tracks while sacrificing performance (not usable for longer tracks).
|
||||
|
||||
## ObjectAnimator
|
||||
|
||||
ObjectAnimator is used to animate widgets inside view.
|
||||
|
||||
## Camera
|
||||
|
||||
Camera is used to capture an image from device camera (Only on devices that support camera).
|
||||
|
||||
## FilePicker
|
||||
|
||||
FilePicker is used to pick multiple files from user storage. They are returned as list String of their paths.
|
||||
|
||||
## Gyroscope
|
||||
|
||||
Gyroscope component is a way to get your device rotation. (Only available on devices that support it)
|
||||
|
||||
## Firebase
|
||||
|
||||
Firebase components are used to save a data, whether it's a DB, Auth or Storage.
|
||||
|
||||
## Interestial ad
|
||||
|
||||
Interestial ad is a way to earn money while showing personalized banners to user.
|
||||
|
||||
## TextToSpeech
|
||||
|
||||
TTS (For short) is used to convert English text to speech. Speech is played right after the function executes, no need of soundpool.
|
||||
|
||||
## SpeechToText
|
||||
|
||||
Voice recognition is a way to convert human speech to text.
|
||||
|
||||
## RequestNetwork
|
||||
|
||||
Request Network is used to send requests to APIs. This can be used to save or load data from your server.
|
||||
|
||||
## BluetoothConnection
|
||||
|
||||
Bluetooth is a way to share data wirelessly without a man in the middle (Router on WiFi).
|
||||
|
||||
## LocationManager
|
||||
|
||||
LocationManager is used to retrieve user location.
|
||||
21
docs/en/duplicate-vars.md
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
id: duplicate-vars
|
||||
title: Why is sketchware showing that name xxx is not available
|
||||
---
|
||||
|
||||
There are quite a few answers, actually. It's mostly because there is another variable with the same name.
|
||||
But for better debugging of this project, we first need to know how *what's variable*. Even if it **sounds trivial**, it **isn't**.
|
||||
|
||||
## What's variable
|
||||
|
||||
A variable can be multiple things:
|
||||
- Literal variable. These are created in logic editor by clicking *Ads variable* in *variable* tab.
|
||||
- Widget. A widget id must be unique. The ID is stored as a variable, thus the widget can be a variable. That's also why you can see widgets id inside variable tab in code editor.
|
||||
- Component. As we have pointed out in [*Create your first project*](first-project.md), the components are actually a classes which are saved in a variable.
|
||||
|
||||
This brings us to a new question:
|
||||
|
||||
## Why we can't have duplicate variable names
|
||||
|
||||
This seems quite obvious (and it *realy* is). You can't have variable a = "dummy string" and use a object named a. This would lead into problems like a.setText() is not function.
|
||||
Also another reason could be how Android handles *types*. [Learn what a type is here](types.md). You can't assign a *string* to *number* variable. That's like trying to store water in a bag. (Don't try it). Although this type juggling (You can learn more at Google) is possible in certain languages (php, Javascript etc.), it is not in Android (as it's more bug-safe and has certain performance advantages.)
|
||||
54
docs/en/first-project.md
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
id: first-project
|
||||
title: Creating your new application
|
||||
---
|
||||
## New project
|
||||
To create your first app, you need to create a *project* for it.
|
||||
You can do it by opening sketchware and tapping "**Create new project**" (the **+** button).
|
||||
|
||||
Sketchware will then ask you for some basic information. For now, you just need to enter the name of your app (To be shown under the icon).
|
||||
|
||||
## Tabs
|
||||
|
||||
When your new project is created, you will see 3 tabs. The one selected now is View, where you change how your application looks.
|
||||
|
||||
### View
|
||||
|
||||
In the view tab, there are 3 main things. On the left, you'll see a list of *objects* you can use.
|
||||
On the right, there is a canvas which is used to drop objects in.
|
||||
|
||||
Try dropping a *TextView* on the canvas and select it. Now you will see the third part of this tab - properties of the currently selected object.
|
||||
To **to change the text**, select text property in object properties. A dialog asking for a new text will appear. Write anything you like.
|
||||
|
||||
### Event
|
||||
|
||||
Before learning about the **event tab**, we first need to learn how Android application works.
|
||||
|
||||
Android is a event driven language, which means it fires an event when a user do something or a response is get.
|
||||
|
||||
#### Tab contents
|
||||
|
||||
In the tab, their are 3 main contents which are used. On the left, you can see groups of events. You can switch between them by clicking on their icons.
|
||||
|
||||
On the right, you can see a list of events in the currently selected group.
|
||||
|
||||
Finally, on the bottom right, there's a **FAB** - Floating Action Button. It has **+** icon in it.
|
||||
This button will show you a dialog to create a new event listener.
|
||||
|
||||
#### Event listeners
|
||||
|
||||
Event listener is a function (or method) that's called when a certain event is fired. For example, when you run your app, a onCreate event will be fired. There's already a listener for this event. Select *Activity* group and you will see it. Click on it's name and code editor will open.
|
||||
|
||||
#### Code editor
|
||||
|
||||
Remember how we mentioned Scratch in the main page? The code editor uses it's design. You can then make your logic for the event there.
|
||||
|
||||
### Components
|
||||
|
||||
In the components tab, there's a list of **currently available app components.** In the real programming, they are called *Classes*, but for the sake of simplicity, we will continue to call them *components*.
|
||||
When you open Components tab for the first time in your project, you will see it's empty. To add a new component, click the **+ icon on FAB**. This will show a dialog with a gridlist of available components. Select one of them and enter it's name (must be unique, we will point out why later) to add it to your app (there are some [exceptions](#)).
|
||||
|
||||
|
||||
## Conclusion
|
||||
|
||||
That's all! You learnt how to create your first app and how to use the project UI.
|
||||
193
website/README.md
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
This website was created with [Docusaurus](https://docusaurus.io/).
|
||||
|
||||
# What's In This Document
|
||||
|
||||
* [Get Started in 5 Minutes](#get-started-in-5-minutes)
|
||||
* [Directory Structure](#directory-structure)
|
||||
* [Editing Content](#editing-content)
|
||||
* [Adding Content](#adding-content)
|
||||
* [Full Documentation](#full-documentation)
|
||||
|
||||
# Get Started in 5 Minutes
|
||||
|
||||
1. Make sure all the dependencies for the website are installed:
|
||||
|
||||
```sh
|
||||
# Install dependencies
|
||||
$ yarn
|
||||
```
|
||||
2. Run your dev server:
|
||||
|
||||
```sh
|
||||
# Start the site
|
||||
$ yarn start
|
||||
```
|
||||
|
||||
## Directory Structure
|
||||
|
||||
Your project file structure should look something like this
|
||||
|
||||
```
|
||||
my-docusaurus/
|
||||
docs/
|
||||
doc-1.md
|
||||
doc-2.md
|
||||
doc-3.md
|
||||
website/
|
||||
blog/
|
||||
2016-3-11-oldest-post.md
|
||||
2017-10-24-newest-post.md
|
||||
core/
|
||||
node_modules/
|
||||
pages/
|
||||
static/
|
||||
css/
|
||||
img/
|
||||
package.json
|
||||
sidebar.json
|
||||
siteConfig.js
|
||||
```
|
||||
|
||||
# Editing Content
|
||||
|
||||
## Editing an existing docs page
|
||||
|
||||
Edit docs by navigating to `docs/` and editing the corresponding document:
|
||||
|
||||
`docs/doc-to-be-edited.md`
|
||||
|
||||
```markdown
|
||||
---
|
||||
id: page-needs-edit
|
||||
title: This Doc Needs To Be Edited
|
||||
---
|
||||
|
||||
Edit me...
|
||||
```
|
||||
|
||||
For more information about docs, click [here](https://docusaurus.io/docs/en/navigation)
|
||||
|
||||
## Editing an existing blog post
|
||||
|
||||
Edit blog posts by navigating to `website/blog` and editing the corresponding post:
|
||||
|
||||
`website/blog/post-to-be-edited.md`
|
||||
```markdown
|
||||
---
|
||||
id: post-needs-edit
|
||||
title: This Blog Post Needs To Be Edited
|
||||
---
|
||||
|
||||
Edit me...
|
||||
```
|
||||
|
||||
For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
|
||||
|
||||
# Adding Content
|
||||
|
||||
## Adding a new docs page to an existing sidebar
|
||||
|
||||
1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`:
|
||||
|
||||
```md
|
||||
---
|
||||
id: newly-created-doc
|
||||
title: This Doc Needs To Be Edited
|
||||
---
|
||||
|
||||
My new content here..
|
||||
```
|
||||
|
||||
1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`:
|
||||
|
||||
```javascript
|
||||
// Add newly-created-doc to the Getting Started category of docs
|
||||
{
|
||||
"docs": {
|
||||
"Getting Started": [
|
||||
"quick-start",
|
||||
"newly-created-doc" // new doc here
|
||||
],
|
||||
...
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
|
||||
|
||||
## Adding a new blog post
|
||||
|
||||
1. Make sure there is a header link to your blog in `website/siteConfig.js`:
|
||||
|
||||
`website/siteConfig.js`
|
||||
```javascript
|
||||
headerLinks: [
|
||||
...
|
||||
{ blog: true, label: 'Blog' },
|
||||
...
|
||||
]
|
||||
```
|
||||
|
||||
2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`:
|
||||
|
||||
`website/blog/2018-05-21-New-Blog-Post.md`
|
||||
|
||||
```markdown
|
||||
---
|
||||
author: Frank Li
|
||||
authorURL: https://twitter.com/foobarbaz
|
||||
authorFBID: 503283835
|
||||
title: New Blog Post
|
||||
---
|
||||
|
||||
Lorem Ipsum...
|
||||
```
|
||||
|
||||
For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
|
||||
|
||||
## Adding items to your site's top navigation bar
|
||||
|
||||
1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`:
|
||||
|
||||
`website/siteConfig.js`
|
||||
```javascript
|
||||
{
|
||||
headerLinks: [
|
||||
...
|
||||
/* you can add docs */
|
||||
{ doc: 'my-examples', label: 'Examples' },
|
||||
/* you can add custom pages */
|
||||
{ page: 'help', label: 'Help' },
|
||||
/* you can add external links */
|
||||
{ href: 'https://github.com/facebook/docusaurus', label: 'GitHub' },
|
||||
...
|
||||
],
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
|
||||
|
||||
## Adding custom pages
|
||||
|
||||
1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`:
|
||||
1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element:
|
||||
|
||||
`website/siteConfig.js`
|
||||
```javascript
|
||||
{
|
||||
headerLinks: [
|
||||
...
|
||||
{ page: 'my-new-custom-page', label: 'My New Custom Page' },
|
||||
...
|
||||
],
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages).
|
||||
|
||||
# Full Documentation
|
||||
|
||||
Full documentation can be found on the [website](https://docusaurus.io/).
|
||||
18
website/blog/2016-03-11-blog-post.md
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: Blog Title
|
||||
author: Blog Author
|
||||
authorURL: http://twitter.com/
|
||||
authorFBID: 100002976521003
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum massa eget nulla aliquet sagittis. Proin odio tortor, vulputate ut odio in, ultrices ultricies augue. Cras ornare ultrices lorem malesuada iaculis. Etiam sit amet libero tempor, pulvinar mauris sed, sollicitudin sapien.
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
Mauris vestibulum ullamcorper nibh, ut semper purus pulvinar ut. Donec volutpat orci sit amet mauris malesuada, non pulvinar augue aliquam. Vestibulum ultricies at urna ut suscipit. Morbi iaculis, erat at imperdiet semper, ipsum nulla sodales erat, eget tincidunt justo dui quis justo. Pellentesque dictum bibendum diam at aliquet. Sed pulvinar, dolor quis finibus ornare, eros odio facilisis erat, eu rhoncus nunc dui sed ex. Nunc gravida dui massa, sed ornare arcu tincidunt sit amet. Maecenas efficitur sapien neque, a laoreet libero feugiat ut.
|
||||
|
||||
Nulla facilisi. Maecenas sodales nec purus eget posuere. Sed sapien quam, pretium a risus in, porttitor dapibus erat. Sed sit amet fringilla ipsum, eget iaculis augue. Integer sollicitudin tortor quis ultricies aliquam. Suspendisse fringilla nunc in tellus cursus, at placerat tellus scelerisque. Sed tempus elit a sollicitudin rhoncus. Nulla facilisi. Morbi nec dolor dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras et aliquet lectus. Pellentesque sit amet eros nisi. Quisque ac sapien in sapien congue accumsan. Nullam in posuere ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin lacinia leo a nibh fringilla pharetra.
|
||||
|
||||
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin venenatis lectus dui, vel ultrices ante bibendum hendrerit. Aenean egestas feugiat dui id hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur in tellus laoreet, eleifend nunc id, viverra leo. Proin vulputate non dolor vel vulputate. Curabitur pretium lobortis felis, sit amet finibus lorem suscipit ut. Sed non mollis risus. Duis sagittis, mi in euismod tincidunt, nunc mauris vestibulum urna, at euismod est elit quis erat. Phasellus accumsan vitae neque eu placerat. In elementum arcu nec tellus imperdiet, eget maximus nulla sodales. Curabitur eu sapien eget nisl sodales fermentum.
|
||||
|
||||
Phasellus pulvinar ex id commodo imperdiet. Praesent odio nibh, sollicitudin sit amet faucibus id, placerat at metus. Donec vitae eros vitae tortor hendrerit finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae purus dolor. Duis suscipit ac nulla et finibus. Phasellus ac sem sed dui dictum gravida. Phasellus eleifend vestibulum facilisis. Integer pharetra nec enim vitae mattis. Duis auctor, lectus quis condimentum bibendum, nunc dolor aliquam massa, id bibendum orci velit quis magna. Ut volutpat nulla nunc, sed interdum magna condimentum non. Sed urna metus, scelerisque vitae consectetur a, feugiat quis magna. Donec dignissim ornare nisl, eget tempor risus malesuada quis.
|
||||
18
website/blog/2017-04-10-blog-post-two.md
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: New Blog Post
|
||||
author: Blog Author
|
||||
authorURL: http://twitter.com/
|
||||
authorFBID: 100002976521003
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum massa eget nulla aliquet sagittis. Proin odio tortor, vulputate ut odio in, ultrices ultricies augue. Cras ornare ultrices lorem malesuada iaculis. Etiam sit amet libero tempor, pulvinar mauris sed, sollicitudin sapien.
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
Mauris vestibulum ullamcorper nibh, ut semper purus pulvinar ut. Donec volutpat orci sit amet mauris malesuada, non pulvinar augue aliquam. Vestibulum ultricies at urna ut suscipit. Morbi iaculis, erat at imperdiet semper, ipsum nulla sodales erat, eget tincidunt justo dui quis justo. Pellentesque dictum bibendum diam at aliquet. Sed pulvinar, dolor quis finibus ornare, eros odio facilisis erat, eu rhoncus nunc dui sed ex. Nunc gravida dui massa, sed ornare arcu tincidunt sit amet. Maecenas efficitur sapien neque, a laoreet libero feugiat ut.
|
||||
|
||||
Nulla facilisi. Maecenas sodales nec purus eget posuere. Sed sapien quam, pretium a risus in, porttitor dapibus erat. Sed sit amet fringilla ipsum, eget iaculis augue. Integer sollicitudin tortor quis ultricies aliquam. Suspendisse fringilla nunc in tellus cursus, at placerat tellus scelerisque. Sed tempus elit a sollicitudin rhoncus. Nulla facilisi. Morbi nec dolor dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras et aliquet lectus. Pellentesque sit amet eros nisi. Quisque ac sapien in sapien congue accumsan. Nullam in posuere ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin lacinia leo a nibh fringilla pharetra.
|
||||
|
||||
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin venenatis lectus dui, vel ultrices ante bibendum hendrerit. Aenean egestas feugiat dui id hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur in tellus laoreet, eleifend nunc id, viverra leo. Proin vulputate non dolor vel vulputate. Curabitur pretium lobortis felis, sit amet finibus lorem suscipit ut. Sed non mollis risus. Duis sagittis, mi in euismod tincidunt, nunc mauris vestibulum urna, at euismod est elit quis erat. Phasellus accumsan vitae neque eu placerat. In elementum arcu nec tellus imperdiet, eget maximus nulla sodales. Curabitur eu sapien eget nisl sodales fermentum.
|
||||
|
||||
Phasellus pulvinar ex id commodo imperdiet. Praesent odio nibh, sollicitudin sit amet faucibus id, placerat at metus. Donec vitae eros vitae tortor hendrerit finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae purus dolor. Duis suscipit ac nulla et finibus. Phasellus ac sem sed dui dictum gravida. Phasellus eleifend vestibulum facilisis. Integer pharetra nec enim vitae mattis. Duis auctor, lectus quis condimentum bibendum, nunc dolor aliquam massa, id bibendum orci velit quis magna. Ut volutpat nulla nunc, sed interdum magna condimentum non. Sed urna metus, scelerisque vitae consectetur a, feugiat quis magna. Donec dignissim ornare nisl, eget tempor risus malesuada quis.
|
||||
11
website/blog/2017-09-25-testing-rss.md
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: Adding RSS Support - RSS Truncation Test
|
||||
author: Eric Nakagawa
|
||||
authorURL: http://twitter.com/ericnakagawa
|
||||
authorFBID: 661277173
|
||||
---
|
||||
1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
|
||||
|
||||
This should be truncated.
|
||||
<!--truncate-->
|
||||
This line should never render in XML.
|
||||
10
website/blog/2017-09-26-adding-rss.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: Adding RSS Support
|
||||
author: Eric Nakagawa
|
||||
authorURL: http://twitter.com/ericnakagawa
|
||||
authorFBID: 661277173
|
||||
---
|
||||
|
||||
This is a test post.
|
||||
|
||||
A whole bunch of other information.
|
||||
8
website/blog/2017-10-24-new-version-1.0.0.md
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: New Version 1.0.0
|
||||
author: Eric Nakagawa
|
||||
authorURL: http://twitter.com/ericnakagawa
|
||||
authorFBID: 661277173
|
||||
---
|
||||
|
||||
This blog post will test file name parsing issues when periods are present.
|
||||
106
website/core/Footer.js
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
const React = require('react');
|
||||
|
||||
class Footer extends React.Component {
|
||||
docUrl(doc, language) {
|
||||
const baseUrl = this.props.config.baseUrl;
|
||||
const docsUrl = this.props.config.docsUrl;
|
||||
const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
|
||||
const langPart = `${language ? `${language}/` : ''}`;
|
||||
return `${baseUrl}${docsPart}${langPart}${doc}`;
|
||||
}
|
||||
|
||||
pageUrl(doc, language) {
|
||||
const baseUrl = this.props.config.baseUrl;
|
||||
return baseUrl + (language ? `${language}/` : '') + doc;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<footer className="nav-footer" id="footer">
|
||||
<section className="sitemap">
|
||||
<a href={this.props.config.baseUrl} className="nav-home">
|
||||
{this.props.config.footerIcon && (
|
||||
<img
|
||||
src={this.props.config.baseUrl + this.props.config.footerIcon}
|
||||
alt={this.props.config.title}
|
||||
width="66"
|
||||
height="58"
|
||||
/>
|
||||
)}
|
||||
</a>
|
||||
<div>
|
||||
<h5>Docs</h5>
|
||||
<a href={this.docUrl('doc1.html', this.props.language)}>
|
||||
Getting Started (or other categories)
|
||||
</a>
|
||||
<a href={this.docUrl('doc2.html', this.props.language)}>
|
||||
Guides (or other categories)
|
||||
</a>
|
||||
<a href={this.docUrl('doc3.html', this.props.language)}>
|
||||
API Reference (or other categories)
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Community</h5>
|
||||
<a href={this.pageUrl('users.html', this.props.language)}>
|
||||
User Showcase
|
||||
</a>
|
||||
<a
|
||||
href="https://stackoverflow.com/questions/tagged/"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener">
|
||||
Stack Overflow
|
||||
</a>
|
||||
<a href="https://discordapp.com/">Project Chat</a>
|
||||
<a
|
||||
href="https://twitter.com/"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener">
|
||||
Twitter
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h5>More</h5>
|
||||
<a href={`${this.props.config.baseUrl}blog`}>Blog</a>
|
||||
<a href="https://github.com/">GitHub</a>
|
||||
<a
|
||||
className="github-button"
|
||||
href={this.props.config.repoUrl}
|
||||
data-icon="octicon-star"
|
||||
data-count-href="/facebook/docusaurus/stargazers"
|
||||
data-show-count="true"
|
||||
data-count-aria-label="# stargazers on GitHub"
|
||||
aria-label="Star this project on GitHub">
|
||||
Star
|
||||
</a>
|
||||
{this.props.config.twitterUsername && (
|
||||
<div className="social">
|
||||
<a
|
||||
href={`https://twitter.com/${this.props.config.twitterUsername}`}
|
||||
className="twitter-follow-button">
|
||||
Follow @{this.props.config.twitterUsername}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{this.props.config.facebookAppId && (
|
||||
<div className="social">
|
||||
<div
|
||||
className="fb-like"
|
||||
data-href={this.props.config.url}
|
||||
data-colorscheme="dark"
|
||||
data-layout="standard"
|
||||
data-share="true"
|
||||
data-width="225"
|
||||
data-show-faces="false"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<section className="copyright">{this.props.config.copyright}</section>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Footer;
|
||||
48
website/i18n/en.json
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
{
|
||||
"_comment": "This file is auto-generated by write-translations.js",
|
||||
"localized-strings": {
|
||||
"next": "Next",
|
||||
"previous": "Previous",
|
||||
"tagline": "A website for testing",
|
||||
"docs": {
|
||||
"en/_coverpage": {
|
||||
"title": "en/_coverpage"
|
||||
},
|
||||
"en/_sidebar": {
|
||||
"title": "en/_sidebar"
|
||||
},
|
||||
"en/blocks/control": {
|
||||
"title": "Control blocks"
|
||||
},
|
||||
"en/blocks/variables": {
|
||||
"title": "Variables"
|
||||
},
|
||||
"en/components": {
|
||||
"title": "Components"
|
||||
},
|
||||
"en/duplicate-vars": {
|
||||
"title": "Why is sketchware showing that name xxx is not available"
|
||||
},
|
||||
"en/first-project": {
|
||||
"title": "Creating your new application"
|
||||
},
|
||||
"en/README": {
|
||||
"title": "Sketchware docs"
|
||||
}
|
||||
},
|
||||
"links": {
|
||||
"Docs": "Docs"
|
||||
},
|
||||
"categories": {
|
||||
"Getting started": "Getting started",
|
||||
"Debugging": "Debugging",
|
||||
"Blocks": "Blocks",
|
||||
"Components": "Components"
|
||||
}
|
||||
},
|
||||
"pages-strings": {
|
||||
"Help Translate|recruit community translators for your project": "Help Translate",
|
||||
"Edit this Doc|recruitment message asking to edit the doc source": "Edit",
|
||||
"Translate this Doc|recruitment message asking to translate the docs": "Translate"
|
||||
}
|
||||
}
|
||||
14
website/package.json
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"scripts": {
|
||||
"examples": "docusaurus-examples",
|
||||
"start": "docusaurus-start",
|
||||
"build": "docusaurus-build",
|
||||
"publish-gh-pages": "docusaurus-publish",
|
||||
"write-translations": "docusaurus-write-translations",
|
||||
"version": "docusaurus-version",
|
||||
"rename-version": "docusaurus-rename-version"
|
||||
},
|
||||
"devDependencies": {
|
||||
"docusaurus": "^1.14.0"
|
||||
}
|
||||
}
|
||||
54
website/pages/en/help.js
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
const React = require('react');
|
||||
|
||||
const CompLibrary = require('../../core/CompLibrary.js');
|
||||
|
||||
const Container = CompLibrary.Container;
|
||||
const GridBlock = CompLibrary.GridBlock;
|
||||
|
||||
function Help(props) {
|
||||
const {config: siteConfig, language = ''} = props;
|
||||
const {baseUrl, docsUrl} = siteConfig;
|
||||
const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
|
||||
const langPart = `${language ? `${language}/` : ''}`;
|
||||
const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
|
||||
|
||||
const supportLinks = [
|
||||
{
|
||||
content: `Learn more using the [documentation on this site.](${docUrl(
|
||||
'doc1.html',
|
||||
)})`,
|
||||
title: 'Browse Docs',
|
||||
},
|
||||
{
|
||||
content: 'Ask questions about the documentation and project',
|
||||
title: 'Join the community',
|
||||
},
|
||||
{
|
||||
content: "Find out what's new with this project",
|
||||
title: 'Stay up to date',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="docMainWrapper wrapper">
|
||||
<Container className="mainContainer documentContainer postContainer">
|
||||
<div className="post">
|
||||
<header className="postHeader">
|
||||
<h1>Need help?</h1>
|
||||
</header>
|
||||
<p>This project is maintained by a dedicated group of people.</p>
|
||||
<GridBlock contents={supportLinks} layout="threeColumn" />
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = Help;
|
||||
212
website/pages/en/index.js
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
const React = require('react');
|
||||
|
||||
const CompLibrary = require('../../core/CompLibrary.js');
|
||||
|
||||
const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
|
||||
const Container = CompLibrary.Container;
|
||||
const GridBlock = CompLibrary.GridBlock;
|
||||
|
||||
class HomeSplash extends React.Component {
|
||||
render() {
|
||||
const {siteConfig, language = ''} = this.props;
|
||||
const {baseUrl, docsUrl} = siteConfig;
|
||||
const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
|
||||
const langPart = `${language ? `${language}/` : ''}`;
|
||||
const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
|
||||
|
||||
const SplashContainer = props => (
|
||||
<div className="homeContainer">
|
||||
<div className="homeSplashFade">
|
||||
<div className="wrapper homeWrapper">{props.children}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Logo = props => (
|
||||
<div className="projectLogo">
|
||||
<img src={props.img_src} alt="Project Logo" />
|
||||
</div>
|
||||
);
|
||||
|
||||
const ProjectTitle = () => (
|
||||
<h2 className="projectTitle">
|
||||
{siteConfig.title}
|
||||
<small>{siteConfig.tagline}</small>
|
||||
</h2>
|
||||
);
|
||||
|
||||
const PromoSection = props => (
|
||||
<div className="section promoSection">
|
||||
<div className="promoRow">
|
||||
<div className="pluginRowBlock">{props.children}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Button = props => (
|
||||
<div className="pluginWrapper buttonWrapper">
|
||||
<a className="button" href={props.href} target={props.target}>
|
||||
{props.children}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<SplashContainer>
|
||||
<Logo img_src={`${baseUrl}img/undraw_monitor.svg`} />
|
||||
<div className="inner">
|
||||
<ProjectTitle siteConfig={siteConfig} />
|
||||
<PromoSection>
|
||||
<Button href="#try">Try It Out</Button>
|
||||
<Button href={docUrl('en/README.html')}>Example Link</Button>
|
||||
<Button href={docUrl('doc2.html')}>Example Link 2</Button>
|
||||
</PromoSection>
|
||||
</div>
|
||||
</SplashContainer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Index extends React.Component {
|
||||
render() {
|
||||
const {config: siteConfig, language = ''} = this.props;
|
||||
const {baseUrl} = siteConfig;
|
||||
|
||||
const Block = props => (
|
||||
<Container
|
||||
padding={['bottom', 'top']}
|
||||
id={props.id}
|
||||
background={props.background}>
|
||||
<GridBlock
|
||||
align="center"
|
||||
contents={props.children}
|
||||
layout={props.layout}
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
|
||||
const FeatureCallout = () => (
|
||||
<div
|
||||
className="productShowcaseSection paddingBottom"
|
||||
style={{textAlign: 'center'}}>
|
||||
<h2>Feature Callout</h2>
|
||||
<MarkdownBlock>These are features of this project</MarkdownBlock>
|
||||
</div>
|
||||
);
|
||||
|
||||
const TryOut = () => (
|
||||
<Block id="try">
|
||||
{[
|
||||
{
|
||||
content:
|
||||
'To make your landing page more attractive, use illustrations! Check out ' +
|
||||
'[**unDraw**](https://undraw.co/) which provides you with customizable illustrations which are free to use. ' +
|
||||
'The illustrations you see on this page are from unDraw.',
|
||||
image: `${baseUrl}img/undraw_code_review.svg`,
|
||||
imageAlign: 'left',
|
||||
title: 'Wonderful SVG Illustrations',
|
||||
},
|
||||
]}
|
||||
</Block>
|
||||
);
|
||||
|
||||
const Description = () => (
|
||||
<Block background="dark">
|
||||
{[
|
||||
{
|
||||
content:
|
||||
'This is another description of how this project is useful',
|
||||
image: `${baseUrl}img/undraw_note_list.svg`,
|
||||
imageAlign: 'right',
|
||||
title: 'Description',
|
||||
},
|
||||
]}
|
||||
</Block>
|
||||
);
|
||||
|
||||
const LearnHow = () => (
|
||||
<Block background="light">
|
||||
{[
|
||||
{
|
||||
content:
|
||||
'Each new Docusaurus project has **randomly-generated** theme colors.',
|
||||
image: `${baseUrl}img/undraw_youtube_tutorial.svg`,
|
||||
imageAlign: 'right',
|
||||
title: 'Randomly Generated Theme Colors',
|
||||
},
|
||||
]}
|
||||
</Block>
|
||||
);
|
||||
|
||||
const Features = () => (
|
||||
<Block layout="fourColumn">
|
||||
{[
|
||||
{
|
||||
content: 'This is the content of my feature',
|
||||
image: `${baseUrl}img/undraw_react.svg`,
|
||||
imageAlign: 'top',
|
||||
title: 'Feature One',
|
||||
},
|
||||
{
|
||||
content: 'The content of my second feature',
|
||||
image: `${baseUrl}img/undraw_operating_system.svg`,
|
||||
imageAlign: 'top',
|
||||
title: 'Feature Two',
|
||||
},
|
||||
]}
|
||||
</Block>
|
||||
);
|
||||
|
||||
const Showcase = () => {
|
||||
if ((siteConfig.users || []).length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const showcase = siteConfig.users
|
||||
.filter(user => user.pinned)
|
||||
.map(user => (
|
||||
<a href={user.infoLink} key={user.infoLink}>
|
||||
<img src={user.image} alt={user.caption} title={user.caption} />
|
||||
</a>
|
||||
));
|
||||
|
||||
const pageUrl = page => baseUrl + (language ? `${language}/` : '') + page;
|
||||
|
||||
return (
|
||||
<div className="productShowcaseSection paddingBottom">
|
||||
<h2>Who is Using This?</h2>
|
||||
<p>This project is used by all these people</p>
|
||||
<div className="logos">{showcase}</div>
|
||||
<div className="more-users">
|
||||
<a className="button" href={pageUrl('users.html')}>
|
||||
More {siteConfig.title} Users
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<HomeSplash siteConfig={siteConfig} language={language} />
|
||||
<div className="mainContainer">
|
||||
<Features />
|
||||
<FeatureCallout />
|
||||
<LearnHow />
|
||||
<TryOut />
|
||||
<Description />
|
||||
<Showcase />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Index;
|
||||
48
website/pages/en/users.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
const React = require('react');
|
||||
|
||||
const CompLibrary = require('../../core/CompLibrary.js');
|
||||
|
||||
const Container = CompLibrary.Container;
|
||||
|
||||
class Users extends React.Component {
|
||||
render() {
|
||||
const {config: siteConfig} = this.props;
|
||||
if ((siteConfig.users || []).length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const editUrl = `${siteConfig.repoUrl}/edit/master/website/siteConfig.js`;
|
||||
const showcase = siteConfig.users.map(user => (
|
||||
<a href={user.infoLink} key={user.infoLink}>
|
||||
<img src={user.image} alt={user.caption} title={user.caption} />
|
||||
</a>
|
||||
));
|
||||
|
||||
return (
|
||||
<div className="mainContainer">
|
||||
<Container padding={['bottom', 'top']}>
|
||||
<div className="showcaseSection">
|
||||
<div className="prose">
|
||||
<h1>Who is Using This?</h1>
|
||||
<p>This project is used by many folks</p>
|
||||
</div>
|
||||
<div className="logos">{showcase}</div>
|
||||
<p>Are you using this project?</p>
|
||||
<a href={editUrl} className="button">
|
||||
Add your company
|
||||
</a>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Users;
|
||||
8
website/sidebars.json
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"docs-en": {
|
||||
"Getting started": ["en/README", "en/first-project"],
|
||||
"Debugging": ["en/duplicate-vars"],
|
||||
"Blocks": ["en/blocks/control", "en/blocks/variables"],
|
||||
"Components": ["en/components"]
|
||||
}
|
||||
}
|
||||
93
website/siteConfig.js
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
// List of projects/orgs using your project for the users page.
|
||||
const users = [
|
||||
{
|
||||
caption: 'User1',
|
||||
// You will need to prepend the image path with your baseUrl
|
||||
// if it is not '/', like: '/test-site/img/image.jpg'.
|
||||
image: '/img/undraw_open_source.svg',
|
||||
infoLink: 'https://www.facebook.com',
|
||||
pinned: true,
|
||||
},
|
||||
];
|
||||
|
||||
const siteConfig = {
|
||||
title: 'Sketchware docs', // Title for your website.
|
||||
tagline: 'Unofficial sketchware documentation',
|
||||
url: 'https://sketchware.danbulant.eu', // Your website URL
|
||||
baseUrl: '/', // Base URL for your project */
|
||||
// For github.io type URLs, you would set the url and baseUrl like:
|
||||
// url: 'https://facebook.github.io',
|
||||
// baseUrl: '/test-site/',
|
||||
|
||||
// Used for publishing and more
|
||||
projectName: 'sketchware-docs',
|
||||
organizationName: 'danbulant',
|
||||
// For top-level user or org sites, the organization is still the same.
|
||||
// e.g., for the https://JoelMarcey.github.io site, it would be set like...
|
||||
// organizationName: 'JoelMarcey'
|
||||
|
||||
// For no header links in the top nav bar -> headerLinks: [],
|
||||
headerLinks: [
|
||||
{doc: 'en/README', label: 'Getting started'},
|
||||
],
|
||||
|
||||
/* path to images for header/footer */
|
||||
headerIcon: 'img/favicon.ico',
|
||||
footerIcon: 'img/favicon.ico',
|
||||
favicon: 'img/favicon.ico',
|
||||
|
||||
/* Colors for website */
|
||||
colors: {
|
||||
primaryColor: '#af367c',
|
||||
secondaryColor: '#7a2556',
|
||||
},
|
||||
|
||||
/* Custom fonts for website */
|
||||
/*
|
||||
fonts: {
|
||||
myFont: [
|
||||
"Times New Roman",
|
||||
"Serif"
|
||||
],
|
||||
myOtherFont: [
|
||||
"-apple-system",
|
||||
"system-ui"
|
||||
]
|
||||
},
|
||||
*/
|
||||
|
||||
// This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
|
||||
copyright: `Copyright © ${new Date().getFullYear()} Daniel Bulant, MIT Licensed`,
|
||||
|
||||
highlight: {
|
||||
// Highlight.js theme to use for syntax highlighting in code blocks.
|
||||
theme: 'default',
|
||||
},
|
||||
|
||||
scripts: ['https://buttons.github.io/buttons.js'],
|
||||
|
||||
// On page navigation for the current documentation page.
|
||||
onPageNav: 'separate',
|
||||
// No .html extensions for paths.
|
||||
cleanUrl: true,
|
||||
|
||||
// Open Graph and Twitter card images.
|
||||
ogImage: 'img/undraw_online.svg',
|
||||
twitterImage: 'img/undraw_tweetstorm.svg',
|
||||
|
||||
// For sites with a sizable amount of content, set collapsible to true.
|
||||
// Expand/collapse the links and subcategories under categories.
|
||||
docsSideNavCollapsible: true,
|
||||
|
||||
// Show documentation's last contributor's name.
|
||||
enableUpdateBy: true,
|
||||
|
||||
// Show documentation's last update time.
|
||||
enableUpdateTime: true,
|
||||
|
||||
// You may provide arbitrary config keys to be used as needed by your
|
||||
// template. For example, if you need your repo's URL...
|
||||
repoUrl: 'https://github.com/facebook/test-site',
|
||||
};
|
||||
|
||||
module.exports = siteConfig;
|
||||
16
website/static/css/custom.css
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
/* your custom css */
|
||||
|
||||
@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1023px) {
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1400px) {
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1500px) {
|
||||
}
|
||||
BIN
website/static/img/favicon.ico
Normal file
|
After Width: | Height: | Size: 766 B |
BIN
website/static/img/oss_logo.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
1
website/static/img/undraw_code_review.svg
Normal file
|
After Width: | Height: | Size: 17 KiB |
1
website/static/img/undraw_monitor.svg
Normal file
|
After Width: | Height: | Size: 32 KiB |
1
website/static/img/undraw_note_list.svg
Normal file
|
After Width: | Height: | Size: 15 KiB |
1
website/static/img/undraw_online.svg
Normal file
|
After Width: | Height: | Size: 26 KiB |
1
website/static/img/undraw_open_source.svg
Normal file
|
After Width: | Height: | Size: 16 KiB |
1
website/static/img/undraw_operating_system.svg
Normal file
|
After Width: | Height: | Size: 36 KiB |
1
website/static/img/undraw_react.svg
Normal file
|
After Width: | Height: | Size: 24 KiB |
1
website/static/img/undraw_tweetstorm.svg
Normal file
|
After Width: | Height: | Size: 9.2 KiB |
1
website/static/img/undraw_youtube_tutorial.svg
Normal file
|
After Width: | Height: | Size: 28 KiB |