mirror of
https://github.com/andatoshiki/toshiki-notebook.git
synced 2026-06-06 01:16:27 +00:00
chore: add japanese translation i18n & corresponded homepage & add more docs linted
This commit is contained in:
parent
e97995c9b5
commit
edb86108d7
@ -29,22 +29,35 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
},
|
||||
// i18n localization config
|
||||
locales: {
|
||||
'/': {
|
||||
label: 'English',
|
||||
lang: 'en-US',
|
||||
},
|
||||
'/jp/': {
|
||||
label: 'Japanese',
|
||||
title: 'Vue Test Utils',
|
||||
lang: 'jp-JP',
|
||||
description: 'La documentation officielle de Vue Test Utils',
|
||||
},
|
||||
},
|
||||
ignoreDeadLinks: true,
|
||||
transformHtml: (_, id, { pageData }) => {
|
||||
if (!/[\\/]404\.html$/.test(id))
|
||||
links.push({
|
||||
url: pageData.relativePath.replace(/((^|\/)index)?\.md$/, '$2'),
|
||||
lastmod: pageData.lastUpdated
|
||||
})
|
||||
},
|
||||
buildEnd: async ({ outDir }) => {
|
||||
links.push({
|
||||
url: pageData.relativePath.replace(/((^|\/)index)?\.md$/, '$2'),
|
||||
lastmod: pageData.lastUpdated,
|
||||
})
|
||||
},
|
||||
buildEnd: async ({ outDir }) => {
|
||||
const sitemap = new SitemapStream({ hostname: 'https://note.toshiki.dev/' })
|
||||
const writeStream = createWriteStream(resolve(outDir, 'sitemap.xml'))
|
||||
sitemap.pipe(writeStream)
|
||||
links.forEach((link) => sitemap.write(link))
|
||||
links.forEach(link => sitemap.write(link))
|
||||
sitemap.end()
|
||||
await new Promise((r) => writeStream.on('finish', r))
|
||||
}
|
||||
await new Promise(r => writeStream.on('finish', r))
|
||||
},
|
||||
})
|
||||
|
||||
customElements // custom element tags of markdown-it-katex in vitepress
|
||||
|
||||
@ -119,8 +119,8 @@ The third section targets the `.katex-error` class and sets the color to red to
|
||||
|
||||
If you do not have native scss support for your site, such as a static HTML based documentation site or content management site builder such as Wiki.JS that works as an SaaS which only allows users to apply custom stylesheets within slots provided and make effects, you could use some scss to css converter online with options follows,
|
||||
|
||||
- [@preview](https://jsonformatter.org)
|
||||
- [@preview](https://json2csharp.com)
|
||||
- [@preview](https://jsonformatter.org)
|
||||
- [@preview](https://json2csharp.com)
|
||||
|
||||
to precompile from source scss into normal css styles and use them based on your needs, below are auto-generated compiled css, **ONLY take it as reference**, I do not guarantee the usability.
|
||||
|
||||
|
||||
202
docs/development/file-naming-convention.md
Normal file
202
docs/development/file-naming-convention.md
Normal file
@ -0,0 +1,202 @@
|
||||
# File Name Conventions
|
||||
|
||||
A collection of guidelines for writing file names used in web projects.
|
||||
|
||||
## Possible characters
|
||||
|
||||
### Use dashes as delimiters
|
||||
|
||||
- You should use dashes (-) as delimiters.
|
||||
- Periods are allowed in some cases, such as for languages and conditions.
|
||||
- Never use spaces or underscores. Spaces are converted to %20 in URLs or can break an URL when shared. Underscores are difficult to see when the file name is displayed as an underlined link. Although the use of underscores does not impact your ranking that much, [Google advices not to use underscores](https://www.youtube.com/watch?v=AQcSFsQyct8).
|
||||
- Exceptions apply for functional requirements, such as for [Sass partials](http://sass-lang.com/guide#topic-4). A leading underscore informs the Sass compiler a file is only a partial file and should never be generated into a stand alone CSS file.
|
||||
|
||||
**Right:**
|
||||
|
||||
```
|
||||
file-name-with-dashes.en.min.html
|
||||
```
|
||||
|
||||
### Do not use special characters
|
||||
|
||||
Avoid using non-alphanumeric characters in file names, such as: '`*`' '`:`' '`\`' '`/`' '`<`' '`>`' '`|`' '`"`' '`!`' '`?`' '`[`' '`]`' '`;`' '`=`' '`+`' '`&`' '`£`' '`$`' '`€`' '`%`' or '`,`'. These characters can have special meaning in programming languages or can cause problems with different operating systems.
|
||||
|
||||
### Use lowercase, never uppercase
|
||||
|
||||
We should always consider URLs as case-sensitive according to [W3.org](http://www.w3.org/TR/WD-html40-970708/htmlweb.html). Therefore, use lowercase to reduces errors when typing URLs.
|
||||
|
||||
## Write sections of a file name in a consistent order
|
||||
|
||||
Sections should be written in this order:
|
||||
|
||||
1. Description
|
||||
2. Number
|
||||
3. Date
|
||||
4. Target device, image size, pixel density
|
||||
5. Version number
|
||||
6. Status
|
||||
7. Language code
|
||||
8. File conditions
|
||||
|
||||
**Possible combinations**
|
||||
|
||||
```
|
||||
description-01-20150102-palm-1.0b-draft.en.min.js /* extreme combination */
|
||||
description.min.js
|
||||
description.en.html
|
||||
description-01.jpg
|
||||
description-02.jpg
|
||||
description-1024x768_2x.jpg
|
||||
description-desk_2x.jpg
|
||||
```
|
||||
|
||||
### Write description for developers and users
|
||||
|
||||
Don't be afraid to write long informative file names. Few people type a file name manually and most operating systems support [255 characters](http://en.wikipedia.org/wiki/Comparison_of_file_systems). But only add information that makes it easy for users and developers to recognize files from one another at a glance. For the description use information such as:
|
||||
|
||||
- type of data
|
||||
- project name or acronym
|
||||
- subjects
|
||||
- people's names
|
||||
- characteristics
|
||||
- location
|
||||
|
||||
> **Give your images detailed, informative filenames** The filename can give Google clues about the subject matter of the image. Try to make your filename a good description of the subject matter of the image. For example, my-new-black-kitten.jpg is a lot more informative than IMG00023.JPG. Descriptive filenames can also be useful to users: If we're unable to find suitable text in the page on which we found the image, we'll use the filename as the image's snippet in our search results. - [Google, 2015, Image publishing guidelines](https://support.google.com/webmasters/answer/114016?hl=en)
|
||||
|
||||
#### Keep people's names compact
|
||||
|
||||
Sometimes you want to include the name of a person in the file name, e.g. the author or the person in the photo.
|
||||
|
||||
- Write names without word delimiters.
|
||||
- Only write initials for the first name and write the last name in full. There are two exceptions: (1) when the last name or final file name is very long you may use initials for the last name; (2) when there is already a person with the same combination, you may write the first name in full.
|
||||
- If people have exactly the same name written in full, you can add a number: firstnamelastname2.
|
||||
|
||||
**Right:**
|
||||
|
||||
```
|
||||
bvandebiezen.jpg
|
||||
shoogenhout.jpg
|
||||
a-very-long-description-with-name-bvdb.jpg
|
||||
asmith.jpg
|
||||
adamsmith.jpg
|
||||
adamsmith2.jpg
|
||||
```
|
||||
|
||||
### Use two or more digits to distinguish sequential files with the same description
|
||||
|
||||
- Start number with a dash as a delimiter.
|
||||
- Add a zero to single digit numbers, e.g. '01' instead of '1'.
|
||||
- Numbers may also be placed before the description if needed. A dash will still be used as delimiter with the description.
|
||||
|
||||
**Right:**
|
||||
|
||||
```
|
||||
description-01.jpg
|
||||
description-02.jpg
|
||||
description-03.jpg
|
||||
description-04.jpg
|
||||
|
||||
01-description.jpg
|
||||
02-description.jpg
|
||||
03-description.jpg
|
||||
04-description.jpg
|
||||
```
|
||||
|
||||
### Keep dates or date ranges compact and start with year
|
||||
|
||||
- Write dates without delimiters.
|
||||
- Always use four digits for years, two digits for months and two digits for days.
|
||||
- Start with year, then month, and end with day if available: yyyymmdd, yyyymm, or yyyy. This makes sure similar file names are sorted by date when sorted alphabetically.
|
||||
- Use a double dash to separate two dates describing an interval: yyyy--yyyy. Start with the earliest date.
|
||||
|
||||
**Right:**
|
||||
|
||||
```
|
||||
description-20150401.php
|
||||
description-201504.php
|
||||
description-2015.php
|
||||
description-2000--2010.php
|
||||
```
|
||||
|
||||
See ['ISO 8601'](https://en.wikipedia.org/wiki/ISO_8601) for further reading.
|
||||
|
||||
### Use special modifiers for target devices, image sizes or media queries, and pixel densities.
|
||||
|
||||
Modifiers are inspired by [Apple iOS naming conventions](https://developer.apple.com/library/ios/documentation/Cocoa/Conceptual/LoadingResources/ImageSoundResources/ImageSoundResources.html#//apple_ref/doc/uid/10000051i-CH7-SW1). There are some differences. Apple uses '@' as a delimiter for the section indicating higher resolution images, for example '@2x' for retina images. Because '@' is a reserved character and can create problems, we use [Bourbon's convention](http://bourbon.io/docs/#retina-image): an underscore. Also, Apple uses a tilde (~) as a delimiter for a section indicating specific devices. Because also a tilde can create problems, we suggest to simply use a dash.
|
||||
|
||||
- Order should be: (1) target device or media query, (2) size, (3) pixel density.
|
||||
- Start target device or media queries with a dash (-) as delimiter.
|
||||
- Start image sizes with a dash (-) as delimiter.
|
||||
- Start pixel density with an underscore (\_) as delimiter, for example '\_2x' or '\_3x'.
|
||||
- When only a width or height is available or applicable, add a 'w' for width or 'h' for height directly after the the amount of pixels.
|
||||
- When both measurements are available, do not add a 'w' or 'h' and separate the width and height with an 'x'.
|
||||
- When both the width and height should not exceed a dimension but the images should keep the original aspect ratio, add a 'max' (maximum) after the amount of pixels.
|
||||
|
||||
**Right:**
|
||||
|
||||
```
|
||||
description_2x.jpg
|
||||
description-lap.jpg
|
||||
description-desk.jpg
|
||||
description-lap_2x.jpg
|
||||
description-palm-1024w_2x.jpg
|
||||
description-iphone5-568h_2x.jpg
|
||||
description-palm-1024x768_2x.jpg
|
||||
description-40max.jpg
|
||||
```
|
||||
|
||||
### Use version numbers if available
|
||||
|
||||
- Start version with a dash (-) as delimiter.
|
||||
- Use periods (.) to separate point releases.
|
||||
- Always add trailing zeros to major releases, e.g. '2.0' instead of '2'.
|
||||
- Types, such as 'a' (alpha), 'b' (beta), 'rc1' (release candidate 1) can be added without delimiters.
|
||||
|
||||
**Right:**
|
||||
|
||||
```
|
||||
description-0.5.js
|
||||
description-1.0b.js
|
||||
description-1.0rc1.js
|
||||
```
|
||||
|
||||
### Add status when needed
|
||||
|
||||
- You can optionally add a file status such as 'draft' and 'published'.
|
||||
- Start status with a dash.
|
||||
|
||||
**Right:**
|
||||
|
||||
```
|
||||
description-draft.md
|
||||
```
|
||||
|
||||
### Add language code only when different languages are available
|
||||
|
||||
- Use a period to separate the language code from the rest of the file name.
|
||||
- Use [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes), two-letter codes, for languages.
|
||||
- Only add languages when different languages are available.
|
||||
|
||||
**Right:**
|
||||
|
||||
```
|
||||
description.nl.txt
|
||||
description.en.txt
|
||||
```
|
||||
|
||||
### Add file conditions just before the file extension
|
||||
|
||||
- The file condition should be the last part, just before the file extension.
|
||||
- Use a period (.) to separate the condition from the rest of the file name.
|
||||
- Use periods (.) as a delimiter for different conditions.
|
||||
|
||||
**Right:**
|
||||
|
||||
```
|
||||
description.min.js
|
||||
description.custom1234.min.js
|
||||
```
|
||||
|
||||
## Rewrite original file names not following conventions
|
||||
|
||||
It is not preferred to keep file names in it's original format if it doesn't match your file name conventions. But in some cases it is easier to keep the file name untouched. Sometimes you want to easily replace a file with a newer one from the original source in the future.
|
||||
68
docs/development/rclone-for-r2.md
Normal file
68
docs/development/rclone-for-r2.md
Normal file
@ -0,0 +1,68 @@
|
||||
# Configure rclone for R2
|
||||
|
||||
Example of how to configure `rclone` to use R2.
|
||||
|
||||
You must [generate an Access Key](https://developers.cloudflare.com/r2/data-access/s3-api/tokens/) before getting started. All examples will utilize `access_key_id` and `access_key_secret` variables which represent the **Access Key ID** and **Secret Access Key** values you generated.
|
||||
|
||||
With `[rclone](https://rclone.org/install/)` installed, you may run `[rclone config](https://rclone.org/s3/)` to configure a new S3 storage provider. You will be prompted with a series of questions for the new prvider details.
|
||||
|
||||
If you have already configured `rclone` in the past, you may run `rclone config file` to print the location of your `rclone` configuration file:
|
||||
|
||||
```bash
|
||||
$ rclone config file
|
||||
# Configuration file is stored at:
|
||||
# ~/.config/rclone/rclone.conf
|
||||
```
|
||||
|
||||
Then use an editor (`nano` or `vim`, for example) to add or edit the new provider. This example assumes you are adding a new `r2demo` provider:
|
||||
|
||||
```bash
|
||||
[r2demo]
|
||||
type = s3
|
||||
provider = Cloudflare
|
||||
access_key_id = abc123 # Your access_key_id
|
||||
secret_access_key = xyz456 # Your access_key_secret
|
||||
endpoint = https://<accountid>.r2.cloudflarestorage.com
|
||||
acl = private
|
||||
```
|
||||
|
||||
You may then use the new `rclone` provider for any of your normal workflows.
|
||||
|
||||
## List buckets & objects
|
||||
|
||||
The [rclone tree](https://rclone.org/commands/rclone_tree/) command can be used to list the contents of the remote, in this case Cloudflare R2.
|
||||
|
||||
```bash
|
||||
$ rclone tree r2demo:
|
||||
# /
|
||||
# ├── user-uploads
|
||||
# │ └── foobar.png
|
||||
# └── my-bucket-name
|
||||
# ├── cat.png
|
||||
# └── todos.txt
|
||||
|
||||
$ rclone tree r2demo:my-bucket-name
|
||||
# /
|
||||
# ├── cat.png
|
||||
# └── todos.txt
|
||||
```
|
||||
|
||||
## Upload and retrieve objects
|
||||
|
||||
The [rclone copy](https://rclone.org/commands/rclone_copy/) command can be used to upload objects to an R2 bucket and vice versa - this allows you to upload files up to the 5 TB maximum object size that R2 supports.
|
||||
|
||||
```bash
|
||||
# Upload dog.txt to the user-uploads bucket
|
||||
$ rclone copy dog.txt r2demo:user-uploads/dog.txt
|
||||
$ rclone tree r2demo:user-uploads
|
||||
# /
|
||||
# ├── foobar.png
|
||||
# └── dog.txt
|
||||
|
||||
# Download dog.txt from the user-uploads bucket
|
||||
$ rclone copy r2demo:user-uploads/dog.txt dog.txt
|
||||
```
|
||||
|
||||
## Generate presigned URLs
|
||||
|
||||
You can also generate presigned links which allow you to share public access to a file temporarily using the [rclone link](https://rclone.org/commands/rclone_link/) command.
|
||||
@ -2,12 +2,12 @@
|
||||
layout: home
|
||||
|
||||
title: Toshiki's Notebook
|
||||
titleTemplate: Eternal digital knowledge base for content craetion and notes management.
|
||||
titleTemplate: Eternal digital knowledge base for content creation and notes management.
|
||||
|
||||
hero:
|
||||
name: Toshiki's Notebook
|
||||
text: Research & Produce
|
||||
tagline: 👨💻 Eternal & digital knowledge base for content craetion and notes management.
|
||||
tagline: 👨💻 Eternal & digital knowledge base for content creation and notes management.
|
||||
image:
|
||||
src: /logos/logo.svg
|
||||
alt: Home logo
|
||||
@ -116,3 +116,19 @@ const members = [
|
||||
font-size: 24px;
|
||||
}
|
||||
</style> -->
|
||||
<style>
|
||||
.m-home-layout .image-src:hover {
|
||||
transform: translate(-50%, -50%) rotate(666turn);
|
||||
transition: transform 59s 1s cubic-bezier(0.3, 0, 0.8, 1);
|
||||
}
|
||||
|
||||
.m-home-layout .details small {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.m-home-layout .item:last-child .details {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: end;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user