init: create project & upload files

This commit is contained in:
郭桓桓 2023-02-28 18:35:20 +08:00
commit a284a54a53
Signed by: kuohuanhuan
GPG Key ID: FD846A0A797B0D75
17 changed files with 3153 additions and 0 deletions

4
.browserslistrc Normal file
View File

@ -0,0 +1,4 @@
# Browserslist <https://browsersl.ist>
defaults
since 2012

9
.editorconfig Normal file
View File

@ -0,0 +1,9 @@
root = true
[*]
charset = utf-8
end_of_line = lf
max_line_length = 120
insert_final_newline = true
indent_style = space
indent_size = 2

6
.github/dependabot.yml vendored Normal file
View File

@ -0,0 +1,6 @@
version: 2
updates:
- package-ecosystem: npm
directory: /
schedule:
interval: daily

28
.github/workflows/release.yaml vendored Normal file
View File

@ -0,0 +1,28 @@
name: Release
on:
push:
tags:
- 'v*'
jobs:
# NPM Registry Release
release:
# Use Ubuntu 22.04
runs-on: ubuntu-22.04
steps:
# Step I
- name: Get Source Code
uses: actions/checkout@v3
with:
fetch-depth: 0
# Step II
- name: Publish to NPM Registry
run: pnpm ci:publish
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
# Step III
- name: Generate Changelog
run: npx changelogithub@0.12
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

4
.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
dist/
.env.local
node_modules/

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"cSpell.enabled": false
}

44
Gruntfile.coffee Normal file
View File

@ -0,0 +1,44 @@
module.exports = (grunt) ->
require('load-grunt-tasks')(grunt)
grunt.initConfig(
# NPM Package Declare
pkg: grunt.file.readJSON('package.json')
# Sass Compile
sass:
options:
implementation: require('sass')
exp:
options:
outputStyle: 'expanded'
files:
'dist/bundle.css': 'src/index.scss'
min:
options:
outputStyle: 'compressed'
files:
'dist/bundle.min.css': 'src/index.scss'
# PostCSS Process
postcss:
options:
map:
inline: false
annotation: 'dist/'
exp:
options:
processors: [require('autoprefixer')()]
src: 'dist/bundle.css'
dest: 'dist/bundle.css'
min:
options:
processors: [
require('autoprefixer')()
require('cssnano')(
preset: 'default'
)
]
src: 'dist/bundle.min.css'
dest: 'dist/bundle.min.css'
)
grunt.registerTask('build', ['sass', 'postcss'])

2526
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

35
package.json Normal file
View File

@ -0,0 +1,35 @@
{
"name": "x-markdown-css",
"version": "0.0.0-dev",
"description": "A simple and customizable Markdown CSS for everyone.",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/kuohuanhuan/x-markdown-css.git"
},
"author": "kuohuanhuan",
"license": "MIT",
"bugs": {
"url": "https://github.com/kuohuanhuan/x-markdown-css/issues"
},
"homepage": "https://github.com/kuohuanhuan/x-markdown-css#readme",
"engines": {
"node": ">=14"
},
"scripts": {
"build": "grunt build"
},
"dependencies": {
"sass": "^1.58.3"
},
"devDependencies": {
"@lodder/grunt-postcss": "^3.1.1",
"autoprefixer": "^10.4.13",
"coffeescript": "^2.7.0",
"cssnano": "^5.1.15",
"grunt": "^1.6.1",
"grunt-sass": "^3.1.0",
"load-grunt-tasks": "^5.1.0",
"postcss": "^8.4.21"
}
}

4
src/index.scss Normal file
View File

@ -0,0 +1,4 @@
@use 'scss/vars' as *;
@import 'scss/markdown';
@import 'scss/prose';

View File

@ -0,0 +1,13 @@
$shiki-light: #f8f8f8;
$shiki-dark: #0e0e0e;
$link-border: hsla(0, 0%, 50%, .3);
$code: #111827;
$ol-counter: #6b7280;
$ul-counter: #d1d5db;
$hr-border: hsla(0, 0%, 50%, .3);
$blockquote-border: hsla(0, 0%, 50%, .3);
$figcaption: #6b7280;
$pre: #e5e7eb;
$thead: #111827;
$thead-border: #d1d5db;
$tr-border: #e5e7eb;

View File

@ -0,0 +1,2 @@
$font-sans: 'Open Sans', 'Noto Sans TC', 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif;
$font-monospace: 'DM Mono', 'Jetbrains Mono', 'Fira Code', 'Input Mono', 'Ubuntu', monospace;

3
src/scss/_vars/dark.scss Normal file
View File

@ -0,0 +1,3 @@
$general: #bbb;
$dark: #ddd;
$darker: #fff;

View File

@ -0,0 +1,3 @@
$general: #555;
$dark: #222;
$darker: #000;

177
src/scss/markdown.scss Normal file
View File

@ -0,0 +1,177 @@
.markdown-body {
color: var(--xm-c-general);
font-family: var(--xm-font-sans) !important;
pre {
&:not(.shiki, .highlight) {
margin: 0;
padding: 0;
background: transparent;
}
}
.shiki,
.highlight {
margin: .5rem 0;
font-size: 1.05rem;
font-family: var(--xm-font-monospace) !important;
line-height: 1.4;
&.shiki-light {
background: var(--xm-c-shiki-light) !important;
}
&.shiki-dark {
background: var(--xm-c-shiki-dark) !important;
}
}
img {
width: 100%;
}
a {
font-weight: inherit;
text-decoration: none;
border-bottom: 1px solid var(--xm-c-link-border);
transition: border .3s ease-in-out;
&:hover {
border-bottom: 1px solid var(--xm-c-general);
}
code {
color: inherit;
}
}
hr {
margin: 2rem auto;
width: 50px;
}
blockquote {
padding: .6rem 1.2rem;
font-weight: normal;
font-style: normal;
line-height: 1.5rem;
opacity: .8;
> * {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
p {
&:first-of-type::before {
content: none;
}
&:first-of-type::after {
content: none;
}
}
}
&:first-child {
margin-top: 1rem;
}
}
.dark {
.shiki-light {
display: none;
}
}
html {
&:not(.dark) {
.shiki-dark {
display: none;
}
}
}
.itrem {
text-decoration: none;
opacity: .6;
transition: .2s all ease-out;
&:hover {
opacity: 1;
}
}
.header-anchor {
float: left;
margin-top: .125rem;
margin-left: -1.2rem;
padding-right: .5rem;
font-size: .85rem;
text-decoration: none;
border: 0 !important;
opacity: 0;
&:hover {
text-decoration: none;
}
&:focus {
text-decoration: none;
}
}
h1 {
&:hover {
.header-anchor {
opacity: .5;
}
}
&:focus {
.header-anchor {
opacity: .5;
}
}
}
h2 {
&:hover {
.header-anchor {
opacity: .5;
}
}
&:focus {
.header-anchor {
opacity: .5;
}
}
}
h3 {
&:hover {
.header-anchor {
opacity: .5;
}
}
&:focus {
.header-anchor {
opacity: .5;
}
}
}
h4 {
&:hover {
.header-anchor {
opacity: .5;
}
}
&:focus {
.header-anchor {
opacity: .5;
}
}
}
h5 {
&:hover {
.header-anchor {
opacity: .5;
}
}
&:focus {
.header-anchor {
opacity: .5;
}
}
}
h6 {
&:hover {
.header-anchor {
opacity: .5;
}
}
&:focus {
.header-anchor {
opacity: .5;
}
}
}

267
src/scss/prose.scss Normal file
View File

@ -0,0 +1,267 @@
.markdown-body,
.prose {
max-width: 65ch;
font-size: 1rem;
color: var(--xm-c-general);
line-height: 1.75;
code {
font-size: .875rem;
font-weight: 600;
color: var(--xm-c-dark);
&::before, &::after {
content: '`';
}
}
a {
font-weight: 500;
text-decoration: none;
color: var(--xm-c-darker);
code {
color: var(--xm-c-code);
}
}
strong {
font-weight: 600;
color: var(--xm-c-dark);
}
li {
margin-top: .5rem;
margin-bottom: .5rem;
}
ol {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
list-style-type: none;
> li {
position: relative;
padding-left: 1.75rem;
&::before {
content: counter(list-item, decimal) '.';
position: absolute;
left: 0;
font-weight: 400;
color: var(--xm-c-ol-counter);
}
}
}
ul {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
list-style-type: none;
> li {
position: relative;
padding-left: 1.75rem;
&::before {
content: '';
position: absolute;
top: calc(.875rem - .1875rem);
left: .25rem;
width: .375rem;
height: .375rem;
background-color: var(--xm-c-ul-counter);
border-radius: 50%;
}
}
}
hr {
margin-top: 3rem;
border-color: var(--xm-c-hr-border);
margin-bottom: 3rem;
+ * {
margin-top: 0;
}
}
p {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
blockquote,
q {
margin-top: 1.6rem;
padding-left: 1rem;
font-weight: 500;
font-style: italic;
color: inherit;
border-color: var(--xm-c-blockquote-color);
border-left-width: .25rem;
quotes: '\201C''\201D''\2018''\2019';
margin-bottom: 1.6rem;
p {
&:first-of-type::before {
content: open-quote;
}
&:last-of-type::after {
content: close-quote;
}
}
}
h1 {
margin-top: 0;
margin-bottom: .8889rem;
font-size: 2.25rem;
font-weight: 800;
color: var(--xm-c-darker);
line-height: 1.1111;
}
h2 {
margin-top: 2rem;
font-size: 1.5rem;
font-weight: 700;
color: var(--xm-c-dark);
margin-bottom: 1rem;
line-height: 1.3334;
code {
font-size: .875rem;
}
+ * {
margin-top: 0;
}
}
h3 {
margin-top: 1.6rem;
font-size: 1.25rem;
font-weight: 600;
color: inherit;
margin-bottom: .6rem;
line-height: 1.6;
opacity: .7;
code {
font-size: .9rem;
}
+ * {
margin-top: 0;
}
}
h4 {
margin-top: 1.5rem;
font-weight: 600;
color: inherit;
margin-bottom: .5rem;
line-height: 1.5;
+ * {
margin-top: 0;
}
}
figure {
margin-top: 2rem;
margin-bottom: 2rem;
figcaption {
margin-top: .8571rem;
font-size: .875rem;
color: var(--xm-c-figcaption);
line-height: 1.4286;
}
> * {
margin-top: 0;
margin-bottom: 0;
}
}
pre {
overflow-x: auto;
margin-top: 1.7143rem;
padding-top: .8571rem, 1.1429rem;
font-size: .875rem;
color: var(--xm-c-pre);
line-height: 1.7143;
margin-bottom: 1.7143rem;
border-radius: .375rem;
code {
padding: 0;
font-size: inherit;
font-family: inherit;
font-weight: 400;
color: inherit;
background: transparent;
border-width: 0;
border-radius: 0;
line-height: inherit;
&::before {
content: none;
}
&::after {
content: none;
}
}
}
table {
margin-top: 2rem;
margin-bottom: 2rem;
width: 100%;
table-layout: auto;
font-size: .875rem;
text-align: left;
line-height: 1.7143;
}
thead {
font-weight: 600;
color: var(--xm-c-thead);
border-bottom-width: 1px;
border-bottom-color: var(--xm-c-thead-border);
th {
vertical-align: bottom;
padding-right: .5714rem;
padding-bottom: .5714rem;
padding-left: .5714rem;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
tbody {
tr {
border-bottom-width: 1px;
border-bottom-color: var(--xm-c-tr-border);
&:last-child {
border-bottom-width: 0;
}
}
td {
vertical-align: top;
padding: .5714rem;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
img {
margin-top: 2rem;
margin-bottom: 2rem;
}
video {
margin-top: 2rem;
margin-bottom: 2rem;
}
h6 {
text-transform: uppercase;
margin-top: 20px;
margin-bottom: 10px;
font-weight: 500;
opacity: .5;
letter-spacing: 2px;
}
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
b {
color: var(--xm-c-dark);
}
em {
color: inherit;
}
ul ul,
ul ol,
ol ul,
ol ol {
margin-top: .75rem;
margin-bottom: .75rem;
}
}

25
src/scss/vars.scss Normal file
View File

@ -0,0 +1,25 @@
@use 'sass:meta' as *;
@use '_vars/constants';
@use '_vars/colors';
@use '_vars/light';
@use '_vars/dark';
:root {
@each $name, $val in module-variables('constants') {
--xm-#{$name}: #{$val};
}
@each $name, $val in module-variables('colors') {
--xm-c-#{$name}: #{$val};
}
}
.markdown-body {
@each $name, $val in module-variables('light') {
--xm-c-#{$name}: #{$val};
}
}
.dark .markdown-body {
@each $name, $val in module-variables('dark') {
--xm-c-#{$name}: #{$val};
}
}