Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cadl Website #935

Merged
merged 94 commits into from
Aug 29, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
94 commits
Select commit Hold shift + click to select a range
8111285
Cadl website skeleton
timotheeguerin Jul 20, 2022
fafc0cc
Remove style.css file: irrelevant to the website.
dtuyishime Aug 2, 2022
243fce2
Add BrowserRouter and routes to pages/containers
dtuyishime Aug 2, 2022
d9b4e95
Add global App css for the website.
dtuyishime Aug 2, 2022
9f1522b
Add global css to main.tsx
dtuyishime Aug 2, 2022
11f46bf
Add navigation bar.
dtuyishime Aug 2, 2022
e3ff9da
Add navigation bar css
dtuyishime Aug 2, 2022
1ffdbf4
Add footer
dtuyishime Aug 2, 2022
fb8d95e
Add footer css
dtuyishime Aug 2, 2022
e4e9e2e
Add playground on the website using iframe
dtuyishime Aug 2, 2022
d8f8462
Add css for the playground page
dtuyishime Aug 2, 2022
e9c186c
Add the landing/ home page for the website
dtuyishime Aug 2, 2022
898b938
Add css for the landing/home page
dtuyishime Aug 2, 2022
262b318
Add empty pages/containers for navabar link routed
dtuyishime Aug 3, 2022
f9cd205
Add css for navbar link pages routed
dtuyishime Aug 3, 2022
60e253d
Add index file to access all containes/pages.
dtuyishime Aug 3, 2022
6b7279a
Add index.ts file to access all components
dtuyishime Aug 3, 2022
58b5cab
Add 404 error page for unroute pages.
dtuyishime Aug 3, 2022
4e62c56
Add empty components on for future reuse
dtuyishime Aug 3, 2022
3da3bcb
Remove unnecessary div.
dtuyishime Aug 3, 2022
30716a4
Add fluentui/ web-component and other packages.
dtuyishime Aug 3, 2022
bd38979
Add the launch.json file
dtuyishime Aug 3, 2022
81f150f
Add rush formatting.
dtuyishime Aug 3, 2022
65956ba
Add rush formatting
dtuyishime Aug 3, 2022
4d517c5
ADD fluentUI web-compnonent and routing packages
dtuyishime Aug 3, 2022
806b422
Disable strictPeerDependencies
dtuyishime Aug 3, 2022
99273cb
add openapi-output
dtuyishime Aug 3, 2022
5fd65bf
Remove vite server and React site code.
dtuyishime Aug 15, 2022
7beaa4c
Eleventy setup files
dtuyishime Aug 15, 2022
7aa53e5
Add css files for all containers and all partials.
dtuyishime Aug 15, 2022
e680720
Add Tutorials container/section
dtuyishime Aug 15, 2022
6fccb0c
Add playground container/ section
dtuyishime Aug 15, 2022
920ba09
Add download section/page for installing cadl and getting started
dtuyishime Aug 15, 2022
07e952c
Add docs page for the language documentation
dtuyishime Aug 15, 2022
f9f9a69
Add community page/container
dtuyishime Aug 15, 2022
99f597a
Add blog page for future reference
dtuyishime Aug 15, 2022
9619c8c
Add base container for the home page and most pages.
dtuyishime Aug 15, 2022
0b9f3bf
Add contianer layout for containers such playground., tutorial and ot…
dtuyishime Aug 15, 2022
a0c4e42
Add tutorials layouts for tutorial page and for future use.
dtuyishime Aug 15, 2022
f50c163
Add footer for the website
dtuyishime Aug 15, 2022
80132a1
Add Navbar for the website
dtuyishime Aug 15, 2022
fc54b35
Add navbar items from _data as a json file.
dtuyishime Aug 15, 2022
0e0ea5a
Add main web entry point.
dtuyishime Aug 15, 2022
6f35b24
Add the compiled output from eleventy containers, partials, and layouts.
dtuyishime Aug 15, 2022
f35a933
Remove output file and adding _website folder to gitignore
dtuyishime Aug 16, 2022
4c03dcd
Add _website to gitignore.
dtuyishime Aug 16, 2022
8c57c93
Cadl website basic scaffolding (#806)
dtuyishime Aug 16, 2022
381f93b
Merge branch 'microsoft:cadl-website' into cadl-website
dtuyishime Aug 16, 2022
a68cb68
Run rush format to solve formatting issues
dtuyishime Aug 16, 2022
f0d7f53
Merge branch 'cadl-website' of https://github.com/dtuyishime/cadl int…
dtuyishime Aug 16, 2022
baa743e
Remove unused dependencies and update rush
dtuyishime Aug 16, 2022
0415ffc
Running git pull upstream main
dtuyishime Aug 16, 2022
0d47a7f
update Rush
dtuyishime Aug 16, 2022
8ef4610
Merge branch 'main' of https://github.com/microsoft/cadl into cadl-we…
dtuyishime Aug 16, 2022
ecdd961
Merging the remaining file.
dtuyishime Aug 16, 2022
e7af60a
.
dtuyishime Aug 16, 2022
ab17e6b
Downgrade node-fetch to 3.2.8
dtuyishime Aug 16, 2022
148ab69
Correct the formating issue using rush format
dtuyishime Aug 16, 2022
dc63bc6
Run rush change
dtuyishime Aug 16, 2022
b3047da
Merge branch 'main' of https://github.com/microsoft/cadl into cadl-we…
dtuyishime Aug 17, 2022
ebcb7a7
Update pnpm-lock file to the latest playground version
dtuyishime Aug 17, 2022
bc1f962
Update rush.json
dtuyishime Aug 17, 2022
c245a77
Remove cadl-website json file
dtuyishime Aug 17, 2022
123fb43
Merge branch 'cadl-website' of https://github.com/dtuyishime/cadl int…
dtuyishime Aug 17, 2022
1355bfa
Merge branch 'main' into cadl-website
markcowl Aug 17, 2022
83cade3
Merge branch 'main' into cadl-website
dtuyishime Aug 19, 2022
d7501fa
Add Cadl documentation to be edited online to make editing easier.
dtuyishime Aug 19, 2022
ae5e9a5
Merge branch 'cadl-website' of https://github.com/dtuyishime/cadl int…
dtuyishime Aug 19, 2022
b060eb0
Update Readme from the GitHub online for editing purpose
dtuyishime Aug 20, 2022
ac6a9f3
Run rush format to get rid of formating errors.
dtuyishime Aug 20, 2022
9ee58d6
Remove unnecessary steps.
dtuyishime Aug 20, 2022
2dcd433
Resolve rush formatting issue
dtuyishime Aug 20, 2022
1003882
Merge branch 'main' into cadl-website
dtuyishime Aug 20, 2022
11839cd
Add build for production command.
dtuyishime Aug 20, 2022
4ca3c98
Merge branch 'cadl-website' of https://github.com/dtuyishime/cadl int…
dtuyishime Aug 20, 2022
5d44eec
Merge branch 'main' of https://github.com/Microsoft/cadl into cadl-we…
timotheeguerin Aug 26, 2022
983d014
reoganize
timotheeguerin Aug 27, 2022
aaa6cad
Cleanup
timotheeguerin Aug 27, 2022
0fa0fc0
Cadl syntax highlighitn
timotheeguerin Aug 28, 2022
502b9d3
Style tweak
timotheeguerin Aug 28, 2022
99e7222
Import docs showcasing syntax highlighting
timotheeguerin Aug 28, 2022
d2cd95a
Merge with main
timotheeguerin Aug 28, 2022
30631a4
try website
timotheeguerin Aug 28, 2022
3a6d1ca
can't make jsonc work with 11ty
timotheeguerin Aug 28, 2022
4f3814d
format
timotheeguerin Aug 28, 2022
46a6eff
PUsh website
timotheeguerin Aug 28, 2022
d72fb25
.
timotheeguerin Aug 28, 2022
01feac6
Css needs to be out of input dir
timotheeguerin Aug 28, 2022
e404897
Tweaks
timotheeguerin Aug 28, 2022
8d1260a
Tweaks
timotheeguerin Aug 28, 2022
16d4bc0
Merge with main
timotheeguerin Aug 29, 2022
3070e23
Home use url filter
timotheeguerin Aug 29, 2022
37c44b8
Improve smaller screen style for docs
timotheeguerin Aug 29, 2022
7b53367
Format
timotheeguerin Aug 29, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,958 changes: 1,728 additions & 230 deletions common/config/rush/pnpm-lock.yaml

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions eng/pipelines/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,15 @@ jobs:
containerName: "$web"
displayName: "Update playground"

- task: AzureFileCopy@4
inputs:
sourcePath: "packages/website/dist/*"
azureSubscription: "Azure SDK Playground"
destination: "AzureBlob"
storage: "cadlwebsite"
containerName: "$web"
displayName: "Update website"

- job: npm_dev
dependsOn: npm_stable
displayName: Npm publish dev version
Expand Down
12 changes: 11 additions & 1 deletion eng/pipelines/pr-tryit.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,17 @@ jobs:
storage: "cadlplayground"
blobPrefix: prs/$(System.PullRequest.PullRequestNumber)/
containerName: "$web"
displayName: "Update playground"
displayName: "Publish playground to PR endpoint"

- task: AzureFileCopy@4
inputs:
sourcePath: "packages/website/dist/*"
azureSubscription: "Azure SDK Playground"
destination: "AzureBlob"
storage: "cadlwebsite"
blobPrefix: prs/$(System.PullRequest.PullRequestNumber)/
containerName: "$web"
displayName: "Publish website to PR endpoint"

- script: node eng/scripts/create-tryit-comment.js
displayName: Check already commented
7 changes: 6 additions & 1 deletion eng/scripts/create-tryit-comment.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,12 @@ async function main() {
return;
}

const comment = `<!-- ${TRYID_COMMENT_IDENTIFIER} -->\nYou can try these changes at https://cadlplayground.z22.web.core.windows.net${folderName}/prs/${prNumber}/`;
const comment = [
`<!-- ${TRYID_COMMENT_IDENTIFIER} -->`,
`You can try these changes at https://cadlplayground.z22.web.core.windows.net${folderName}/prs/${prNumber}/`,
"",
`Check the website changes at https://cadlwebsite.z1.web.core.windows.net${folderName}/prs/${prNumber}/`,
].join("\n");
await writeComment(repo, prNumber, comment, ghAuth);
}

Expand Down
31 changes: 31 additions & 0 deletions packages/website/.eleventy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
// @ts-check
const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
const syntaxhighlightPlugin = require("@11ty/eleventy-plugin-syntaxhighlight");
const cadlPrismDefinition = require("./cadl-prism-lang.js");

const prNumber = process.env["SYSTEM_PULLREQUEST_PULLREQUESTNUMBER"];

module.exports = (eleventyConfig) => {
eleventyConfig.addPassthroughCopy("css");
eleventyConfig.addPassthroughCopy({
"node_modules/prism-themes/themes/prism-one-light.css": "css/themes/prism-one-light.css",
});

eleventyConfig.addPlugin(eleventyNavigationPlugin);
eleventyConfig.addPlugin(syntaxhighlightPlugin, {
init: ({ Prism }) => {
Prism.languages.cadl = cadlPrismDefinition;
},
});

return {
markdownTemplateEngine: "njk",
dataTemplateEngine: "njk",
htmlTemplateEngine: "njk",
dir: {
input: "src",
output: "dist",
},
pathPrefix: prNumber ? `/prs/${prNumber}/` : "/",
};
};
2 changes: 2 additions & 0 deletions packages/website/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
#ignore output folder
/_website
53 changes: 53 additions & 0 deletions packages/website/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
# Cadl Website using 11Ty Static Website Generator

This repo contains the code for static web generator for Cadl project using Eleventy(11ty) static web generator. To get started with 11Ty visit https://www.11ty.dev.

Support libraries that enable the demo features are in the `packages/` directory. The demo code itself is in the `website/` directory.

## Instructions for editing or contributing to this website

### Running the website

To get started with the webiste, run the following npm commands

To build for production:

```bash
> npm run build
```

To run the site on the local server

```bash
> npm start
```

(Be careful, after starting the server, do not close it while building on the existing code. The server will help you while debugging as it shows any changes that is causing trouble in the code.)

### Adding an item on the navigation bar.

Items on the navigation bar are stored and maintained from the navbar.json file. To add or remove an item from the navigation bar, change the json from navbar.json. Check out where to find navbar.json file.

`.src/_data/navbar.json`

### Creating a new layout

There are some basic layout already developed in this repo. Check out some layouts, which are found in `.scr/_includes/layouts/`.

> The `Base.njk` layout is the main layout that includes the navigation bar, and body content(empty content to be altered later) and the footer.

> The "container.njk" layout has the exact same content as the base layout, except that it designed for the container files that are not already included in the template folder `(/_include)`

> The `continer.njk` layout uses the container layout and create the layout for tutorial page/ container of the website.

To create a new layout, add a new file in the \_include folder, and build from existing layouts or create whole new layout.

### Adding pictures or other folders to the source folder.

Checkout the file `.eleventy.js` in the source folder `.src/`. After creating the desired folders in the src folder, add the following line the file.

```bash
module.exports = (eleventyConfig) => {
eleventyConfig.addPassthroughCopy("folderName"); //change folderName with the name of your folder
}
```
58 changes: 58 additions & 0 deletions packages/website/cadl-prism-lang.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
module.exports = {
comment: [
{
// multiline comments eg /* ASDF */
pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
lookbehind: true,
greedy: true,
},
{
// singleline comments eg // ASDF
pattern: /(^|[^\\:])\/\/.*/,
lookbehind: true,
greedy: true,
},
],

directives: { pattern: /#.*/g, greedy: true, alias: "comment" },

decorator: {
pattern: /@[$\w\xA0-\uFFFF]+/,
inside: {
at: {
pattern: /^@/,
alias: "operator",
},
function: /^[\s\S]+/,
},
},

property: {
pattern: /((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,
lookbehind: true,
alias: "property",
},

string: [
{
pattern: /"""[^"][\s\S]*?"""/,
greedy: true,
},
{
pattern: /(^|[^\\"])"(?:\\.|\$(?!\{)|[^"\\\r\n$])*"/,
lookbehind: true,
greedy: true,
},
],

boolean: /\b(?:false|true)\b/,
keyword:
/\b(?:import|model|namespace|op|interface|union|using|is|extends|enum|alias|return|void|never|if|else|projection)\b/,

function: /\b[a-z_]\w*(?=[ \t]*\()/i,

number: /(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:E[+-]?\d+)?/i,
operator:
/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/,
punctuation: /[{}[\];(),.:]/,
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we can use the tmlanguage somehow? Seems annoying to have another set of regexes to maintain.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haha, yeah..., I did look if there was an existing way to auto convert it but doesn't seem like there is. Felt more work to get this to work.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More work for sure, but I imagine we could convert to html as bicep does for its tests: https://github.com/Azure/bicep/blob/main/src/textmate/test/baselines/comments.html

And do that on publish?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe file an issue?

Copy link
Member Author

@timotheeguerin timotheeguerin Aug 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh you mean we are the one doing the syntax highlighting instead of using the extension(via PrismJs)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe? Just brainstorming here.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Created an issue #938

This was the PR that added bicep to PrismJS, where they seemed to have manually intepreted the tmlanguage and wrong a simple primsjs language
PrismJS/prism#3027

39 changes: 39 additions & 0 deletions packages/website/css/doc.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
.cadl-doc-container {
display: flex;
}

.cadl-doc-container > .cadl-doc-nav {
flex: 0 0 200px;
border-right: 1px solid #f3f3f3;
}

.cadl-doc-container > .cadl-doc-content {
flex: 1 auto;
min-width: 0;
max-width: 100%;
margin: 0 24px;
}

.cadl-doc-toc ul {
padding-left: 10px;
}

.cadl-doc-toc ul li {
list-style-type: none;
padding: 0;
}

.cadl-doc-toc ul li a {
border: none;
padding: 6px 0;
transition: color 0.3s;
color: #717171;
}

.cadl-doc-toc ul li a:hover {
color: var(--main-color);
}

.cadl-doc-toc ul li.cadl-toc-active > a {
color: var(--main-color);
}
4 changes: 4 additions & 0 deletions packages/website/css/footer.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
footer {
text-align: center;
color: #717171;
}
78 changes: 78 additions & 0 deletions packages/website/css/global.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
* {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
font-family: var(--font-family);
color: var(--text-color);
overflow: auto;
}

.app_version {
background: var(--version_bar-color);
color: var(--text-in-main-color);
text-align: center;
}

html {
height: 100%;
}

a {
text-decoration: none;
text-decoration-line: none;
text-decoration-thickness: initial;
text-decoration-style: initial;
text-decoration-color: initial;
color: #1064a8;
}

a:hover {
color: var(--main-color);
}

code {
background-color: hsl(230, 1%, 98%);
border-radius: 3px;
color: inherit;
font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
font-size: 85%;
margin: 0;
padding: 3.2px 6.4px;
}

pre {
padding: 16px;
border-radius: 3px;
background-color: hsl(230, 1%, 98%);
}
pre > code {
display: block;
}

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {
}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
}
9 changes: 9 additions & 0 deletions packages/website/css/layout.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.root-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}

main {
flex-grow: 1;
}
5 changes: 5 additions & 0 deletions packages/website/css/main-content.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.main-content {
margin: 0 auto;
max-width: 1024px;
padding: 0.5rem 1.5rem;
}
Loading