Merge branch 'playground' into browser-code-editor

# Conflicts:
#	source/_includes/footer.liquid
#	source/assets/sass/components/_mac-stadium-icon.scss
#	source/assets/sass/sass.scss
This commit is contained in:
Stacy Kvernmo 2023-06-28 11:38:37 -05:00
commit c784b08b13
12 changed files with 225 additions and 77 deletions

View File

@ -4,7 +4,6 @@ on:
push:
branches: [main, 'feature.*']
pull_request:
types: [reopened]
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
@ -44,15 +43,15 @@ jobs:
release:
name: Deploy
runs-on: ubuntu-latest
if:
github.event_name == 'push' &&
github.ref == 'refs/heads/main' &&
github.repository == 'sass/sass-site'
needs: [test, lint]
if: github.event_name == 'push' &&
github.ref == 'refs/heads/main' &&
github.repository == 'sass/sass-site'
steps:
- uses: actions/checkout@v3
with:
token: ${{ secrets.GH_TOKEN }}
- uses: actions/checkout@v3
with:
token: ${{ secrets.GH_TOKEN }}
# Pushing to the production branch will trigger Netlify's release process.
- run: git push -f origin main:production
# Pushing to the production branch will trigger Netlify's release process.
- run: git push -f origin main:production

40
.github/workflows/shadow-repo-build.yml vendored Normal file
View File

@ -0,0 +1,40 @@
name: Shadow Repo
on:
push:
pull_request:
types: [opened]
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}-${{ github.event_name }}
cancel-in-progress: true
jobs:
build:
name: Build
runs-on: ubuntu-latest
if: github.event_name == 'push'
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version-file: .nvmrc
cache: npm
- run: npm ci
- run: npm run build-prod
- run: tar cf site.tar _site
- uses: actions/upload-artifact@v2
with:
name: site
path: site.tar
diff-link:
name: Comment
runs-on: ubuntu-latest
if: github.event_name == 'pull_request' && github.event.action == 'opened'
steps:
- uses: peter-evans/create-or-update-comment@v3
with:
issue-number: ${{ github.event.number }}
body: |
View diff of compiled files (may take a few minutes): https://github.com/${{ vars.SHADOW_OWNER }}/${{ vars.SHADOW_REPO }}/compare/${{ github.event.pull_request.base.ref }}..${{ github.event.pull_request.head.ref }}

View File

@ -1,59 +1,67 @@
name: Sync with shadow repo
name: Shadow Repo / Update
on:
push:
create:
delete:
pull_request:
types: [opened]
workflow_run:
workflows: Shadow Repo
types: [completed]
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}-${{ github.event_name }}
cancel-in-progress: true
jobs:
sync-branch:
name: Create/delete shadow branch
create:
name: Create Branch
runs-on: ubuntu-latest
if: github.event.ref_type == 'branch'
if: github.event.ref_type == 'branch' && github.event_name == 'create'
steps:
- name: Clone shadow repo
uses: actions/checkout@v3
with:
repository: ${{ vars.SHADOW_OWNER }}/${{ vars.SHADOW_REPO }}
token: ${{ secrets.GH_TOKEN }}
token: ${{ secrets.SASS_SITE_TOKEN }}
ref: main
- name: Create branch on shadow repo
if: github.event_name == 'create'
run: git push origin main:${{ github.event.ref }}
- name: Delete branch on shadow repo
if: github.event_name == 'delete'
run: git push origin --delete ${{ github.event.ref }}
push-branch:
name: Push to shadow branch
delete:
name: Delete Branch
runs-on: ubuntu-latest
if: github.event_name == 'push'
if: github.event.ref_type == 'branch' && github.event_name == 'delete'
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version-file: .nvmrc
cache: npm
- run: npm ci
- run: npm run build-prod
- name: Clone shadow repo
uses: actions/checkout@v3
with:
repository: ${{ vars.SHADOW_OWNER }}/${{ vars.SHADOW_REPO }}
token: ${{ secrets.GH_TOKEN }}
token: ${{ secrets.SASS_SITE_TOKEN }}
ref: main
- name: Delete branch on shadow repo
run: git push origin --delete ${{ github.event.ref }}
push:
name: Push
runs-on: ubuntu-latest
if: github.event_name == 'workflow_run'
steps:
- name: Clone shadow repo
uses: actions/checkout@v3
with:
repository: ${{ vars.SHADOW_OWNER }}/${{ vars.SHADOW_REPO }}
token: ${{ secrets.SASS_SITE_TOKEN }}
ref: ${{ github.ref_name }}
path: shadow-repo
- name: Download built site
uses: dawidd6/action-download-artifact@v2.27.0
with:
name: site
run_id: ${{ github.event.workflow_run.id }}
- name: Update shadow repo files
run: |
cd shadow-repo
rm -rf ./*
cp -rT ../_site .
rm -rf shadow_repo/*
tar xf site.tar
cp -rT _site shadow_repo
- uses: EndBug/add-and-commit@v9
with:
cwd: shadow-repo
@ -61,14 +69,3 @@ jobs:
author_email: sass.bot.beep.boop@gmail.com
message: Update from https://github.com/${{ github.repository }}/commit/${{ github.sha }}
commit: --allow-empty
diff-link:
name: Create comment to diff link
runs-on: ubuntu-latest
if: github.event_name == 'pull_request' && github.event.action == 'opened'
steps:
- uses: peter-evans/create-or-update-comment@v2
with:
issue-number: ${{ github.event.number }}
body: |
View diff of compiled files (may take a few minutes): https://github.com/${{ vars.SHADOW_OWNER }}/${{ vars.SHADOW_REPO }}/compare/${{ github.event.pull_request.base.ref }}..${{ github.event.pull_request.head.ref }}

81
package-lock.json generated
View File

@ -8,6 +8,9 @@
"name": "sass-site",
"version": "2.0.0",
"license": "MIT",
"dependencies": {
"seedrandom": "^3.0.5"
},
"devDependencies": {
"@11ty/eleventy": "^2.0.1",
"@11ty/eleventy-plugin-rss": "^1.2.0",
@ -31,6 +34,7 @@
"@types/markdown-it-footnote": "^3.0.0",
"@types/node": "^16",
"@types/prismjs": "^1.26.0",
"@types/seedrandom": "^3.0.5",
"@types/semver": "^7.5.0",
"cheerio": "^1.0.0-rc.12",
"codemirror": "^6.0.1",
@ -54,10 +58,10 @@
"npm-run-all": "^4.1.5",
"prettier": "^2.8.8",
"prismjs": "^1.29.0",
"rollup": "^3.25.1",
"sass": "^1.63.4",
"semver": "^7.5.2",
"stylelint": "^15.8.0",
"rollup": "^3.25.3",
"sass": "^1.63.6",
"semver": "^7.5.3",
"stylelint": "^15.9.0",
"stylelint-config-standard-scss": "^9.0.0",
"truncate-html": "^1.0.4",
"ts-node": "^10.9.1",
@ -2728,9 +2732,10 @@
"license": "MIT"
},
"node_modules/@types/node": {
"version": "16.18.36",
"dev": true,
"license": "MIT"
"version": "16.18.37",
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.37.tgz",
"integrity": "sha512-ql+4dw4PlPFBP495k8JzUX/oMNRI2Ei4PrMHgj8oT4VhGlYUzF4EYr0qk2fW+XBVGIrq8Zzk13m4cvyXZuv4pA==",
"dev": true
},
"node_modules/@types/normalize-package-data": {
"version": "2.4.1",
@ -2747,6 +2752,12 @@
"dev": true,
"license": "MIT"
},
"node_modules/@types/seedrandom": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/@types/seedrandom/-/seedrandom-3.0.5.tgz",
"integrity": "sha512-kopEpYpFQvQdYsZkZVwht/0THHmTFFYXDaqV/lM45eweJ8kcGVDgZHs0RVTolSq55UPZNmjhKc9r7UvLu/mQQg==",
"dev": true
},
"node_modules/@types/semver": {
"version": "7.5.0",
"dev": true,
@ -7656,9 +7667,10 @@
}
},
"node_modules/rollup": {
"version": "3.25.1",
"version": "3.25.3",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.25.3.tgz",
"integrity": "sha512-ZT279hx8gszBj9uy5FfhoG4bZx8c+0A1sbqtr7Q3KNWIizpTdDEPZbV2xcbvHsnFp4MavCQYZyzApJ+virB8Yw==",
"dev": true,
"license": "MIT",
"bin": {
"rollup": "dist/bin/rollup"
},
@ -7755,9 +7767,10 @@
"license": "MIT"
},
"node_modules/sass": {
"version": "1.63.4",
"version": "1.63.6",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz",
"integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==",
"dev": true,
"license": "MIT",
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
@ -7782,10 +7795,16 @@
"node": ">=4"
}
},
"node_modules/seedrandom": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
"integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
},
"node_modules/semver": {
"version": "7.5.2",
"version": "7.5.3",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
"integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
"dev": true,
"license": "ISC",
"dependencies": {
"lru-cache": "^6.0.0"
},
@ -8116,9 +8135,10 @@
"license": "ISC"
},
"node_modules/stylelint": {
"version": "15.8.0",
"version": "15.9.0",
"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.9.0.tgz",
"integrity": "sha512-sXtAZi64CllWr6A+8ymDWnlIaYwuAa7XRmGnJxLQXFNnLjd3Izm4HAD+loKVaZ7cpK6SLxhAUX1lwPJKGCn0mg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@csstools/css-parser-algorithms": "^2.2.0",
"@csstools/css-tokenizer": "^2.1.1",
@ -10708,7 +10728,9 @@
"dev": true
},
"@types/node": {
"version": "16.18.36",
"version": "16.18.37",
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.37.tgz",
"integrity": "sha512-ql+4dw4PlPFBP495k8JzUX/oMNRI2Ei4PrMHgj8oT4VhGlYUzF4EYr0qk2fW+XBVGIrq8Zzk13m4cvyXZuv4pA==",
"dev": true
},
"@types/normalize-package-data": {
@ -10723,6 +10745,12 @@
"version": "1.20.2",
"dev": true
},
"@types/seedrandom": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/@types/seedrandom/-/seedrandom-3.0.5.tgz",
"integrity": "sha512-kopEpYpFQvQdYsZkZVwht/0THHmTFFYXDaqV/lM45eweJ8kcGVDgZHs0RVTolSq55UPZNmjhKc9r7UvLu/mQQg==",
"dev": true
},
"@types/semver": {
"version": "7.5.0",
"dev": true
@ -13782,7 +13810,9 @@
}
},
"rollup": {
"version": "3.25.1",
"version": "3.25.3",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.25.3.tgz",
"integrity": "sha512-ZT279hx8gszBj9uy5FfhoG4bZx8c+0A1sbqtr7Q3KNWIizpTdDEPZbV2xcbvHsnFp4MavCQYZyzApJ+virB8Yw==",
"dev": true,
"requires": {
"fsevents": "~2.3.2"
@ -13832,7 +13862,9 @@
"dev": true
},
"sass": {
"version": "1.63.4",
"version": "1.63.6",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz",
"integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==",
"dev": true,
"requires": {
"chokidar": ">=3.0.0 <4.0.0",
@ -13848,8 +13880,15 @@
"kind-of": "^6.0.0"
}
},
"seedrandom": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
"integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
},
"semver": {
"version": "7.5.2",
"version": "7.5.3",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
"integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
"dev": true,
"requires": {
"lru-cache": "^6.0.0"
@ -14063,7 +14102,9 @@
"dev": true
},
"stylelint": {
"version": "15.8.0",
"version": "15.9.0",
"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.9.0.tgz",
"integrity": "sha512-sXtAZi64CllWr6A+8ymDWnlIaYwuAa7XRmGnJxLQXFNnLjd3Izm4HAD+loKVaZ7cpK6SLxhAUX1lwPJKGCn0mg==",
"dev": true,
"requires": {
"@csstools/css-parser-algorithms": "^2.2.0",

View File

@ -21,7 +21,7 @@
"build:sass": "sass --style=compressed ./source/assets/sass/sass.scss:./source/assets/dist/css/sass.css ./source/assets/sass/noscript.scss:./source/assets/dist/css/noscript.css",
"watch:sass": "sass --watch ./source/assets/sass/sass.scss:./source/assets/dist/css/sass.css ./source/assets/sass/noscript.scss:./source/assets/dist/css/noscript.css",
"build-dev:scripts": "rollup -c",
"build-prod:scripts": "BABEL_ENV=production rollup -c",
"build-prod:scripts": "NODE_ENV=production BABEL_ENV=production rollup -c",
"watch:scripts": "npm run build-dev:scripts -- -w",
"build:typedoc": "./tool/typedoc-build.sh",
"build:11ty": "NODE_OPTIONS='-r ts-node/register' eleventy",
@ -62,6 +62,7 @@
"@types/markdown-it-footnote": "^3.0.0",
"@types/node": "^16",
"@types/prismjs": "^1.26.0",
"@types/seedrandom": "^3.0.5",
"@types/semver": "^7.5.0",
"cheerio": "^1.0.0-rc.12",
"codemirror": "^6.0.1",
@ -85,14 +86,17 @@
"npm-run-all": "^4.1.5",
"prettier": "^2.8.8",
"prismjs": "^1.29.0",
"rollup": "^3.25.1",
"sass": "^1.63.4",
"semver": "^7.5.2",
"stylelint": "^15.8.0",
"rollup": "^3.25.3",
"sass": "^1.63.6",
"semver": "^7.5.3",
"stylelint": "^15.9.0",
"stylelint-config-standard-scss": "^9.0.0",
"truncate-html": "^1.0.4",
"ts-node": "^10.9.1",
"typescript": "^5.1.3",
"typogr": "^0.6.8"
},
"dependencies": {
"seedrandom": "^3.0.5"
}
}

View File

@ -13,13 +13,18 @@
{% renderFile 'source/_includes/footer_nav.md' %}
</div>
<div class="sl-l-grid__column sl-l-large-grid__column--auto-size sl-l-large-grid--justify-right">
<div class="sl-l-grid__column sl-l-large-grid__column--auto-size sl-l-large-grid--justify-right footer-icons">
<div class="sl-c-footer-link-grid">
<a
class="twitter-follow-button"
href="https://twitter.com/SassCSS"
data-show-count="false"
data-size="large">Follow @SassCSS</a>
<a
class="sl-image-link"
href="https://www.netlify.com"><img
alt="Deploys by Netlify"
src="https://www.netlify.com/v3/img/components/netlify-color-bg.svg"/></a>
<a
class="sl-image-link"
href="https://www.macstadium.com/"><img

View File

@ -28,8 +28,8 @@
@use 'components/introduction';
@use 'components/link-header';
@use 'components/lists';
@use 'components/mac-stadium-icon';
@use 'components/playground';
@use 'components/footer-icons';
@use 'components/pop-stripe';
@use 'components/sass-syntax-switcher';
@use 'components/tables';

View File

@ -63,6 +63,8 @@ interpolation in SassScript always returns an unquoted string.
[unquoted strings]: /documentation/values/strings#unquoted
[slash-separated values]: /documentation/operators/numeric#slash-separated-values
<!-- Add explicit CSS here to prevent diffs due to the use of unique-id -->
{% codeExample 'interpolation-sass-script' %}
@mixin inline-animation($duration) {
$name: inline-#{unique-id()};
@ -101,6 +103,20 @@ interpolation in SassScript always returns an unquoted string.
background-color: yellow
to
background-color: red
===
.pulse {
animation-name: inline-uifpe6h;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes inline-uifpe6h {
from {
background-color: yellow;
}
to {
background-color: red;
}
}
{% endcodeExample %}
{% funFact %}

View File

@ -1,10 +1,13 @@
import {LoremIpsum} from 'lorem-ipsum';
import seedrandom from 'seedrandom';
import truncate from 'truncate-html';
import {typogrify} from 'typogr';
import {markdownEngine} from './engines';
const lorem = new LoremIpsum();
const lorem = new LoremIpsum({
random: seedrandom("Feelin' Sassy!"),
});
/**
* Returns block of generated `lorem ipsum` text.

View File

@ -0,0 +1,3 @@
if (process.env.NODE_ENV === 'production') {
module.exports = {date: 'git Last Modified'};
}

View File

@ -1,5 +1,12 @@
// eslint-disable-next-line node/no-missing-require
const {DefaultTheme, DefaultThemeRenderContext, JSX} = require('typedoc');
const {
DefaultTheme,
DefaultThemeRenderContext,
JSX,
UrlMapping,
// eslint-disable-next-line node/no-missing-require
} = require('typedoc');
const child_process = require('child_process');
const fs = require('fs');
function bind(fn, first) {
return (...r) => fn(first, ...r);
@ -129,7 +136,40 @@ class SassSiteTheme extends DefaultTheme {
return this.contextCache;
}
getUrls(project) {
const urls = super.getUrls(project);
// Most pages in the docs have their date set based on their last git
// commit, but that doesn't work for the generated TypeDoc. To avoid having
// a bunch of churn in the sitemap for these files, we set their date to the
// last modified date for the entire directory.
if (fs.existsSync('js-api-doc')) {
const lastModified = child_process
.execSync('git log -1 --date=iso-strict --format=%cd js-api-doc', {
encoding: 'utf8',
})
.trim();
urls.push(
new UrlMapping(
'js-api.11tydata.json',
// This isn't actually based on a TypeDoc model, but if we don't
// provide a real one TypeDoc will crash. See TypeStrong/typedoc#2318.
urls[0].model,
() =>
JSON.stringify({
date: lastModified,
})
)
);
}
return urls;
}
render(page, template) {
// This is js-api.11tydata.json.
if (page.url === 'js-api.11tydata.json') return template();
const context = this.getRenderContext(page);
// The default header includes a search bar that we don't want, so we just