My Title
A rich text will be rendered by the component.
My Alert
The alert component.
Icon Card
Attributes work on:
- link,
code, - italic and bold texts.
POST /v1beta/models/gemini-2.0-flash:generateContent?key=GEMINI_API_KEY HTTP/1.1
Host: generativelanguage.googleapis.com
Content-Type: application/json
{
"contents": [{
"parts":[{"text": "Explain how AI works"}]
}]
}
curl "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=YOUR_GEMINI_API_KEY" \
-H 'Content-Type: application/json' \
-X POST \
-d '{
"contents": [{
"parts":[{"text": "Explain how AI works"}]
}]
}'
curl "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=YOUR_GEMINI_API_KEY" \
-H 'Content-Type: application/json' \
-X POST \
-d '{
"contents": [{
"parts":[{"text": "Explain how AI works"}]
}]
}'
using KCTest.Infrastructure.Database;
using Microsoft.AspNetCore.Hosting;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
namespace KCTest.API
{
public class Program
{
public static void Main(string[] args)
{
var host = CreateHostBuilder(args).Build();
using (var scope = host.Services.CreateScope())
{
var db = scope.ServiceProvider.GetRequiredService<KCTestContext>();
db.Database.Migrate();
}
host.Run();
}
public static IHostBuilder CreateHostBuilder(string[] args) =>
Host.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(webBuilder =>
{
webBuilder.UseStartup<Startup>();
});
}
}
html {
margin: 0;
background: black;
height: 100%;
}
body {
margin: 0;
width: 100%;
height: inherit;
}
/* the three main rows going down the page */
body > div {
height: 25%;
}
.thumb {
float: left;
width: 25%;
height: 100%;
object-fit: cover;
}
.main {
display: none;
}
.blowup {
display: block;
position: absolute;
object-fit: contain;
object-position: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2000;
}
.darken {
opacity: 0.4;
}
Country,Region,Population,Area square miles,GDP per capita
Afghanistan,ASIA (EX. NEAR EAST),31056997,647500,700
Albania,EASTERN EUROPE,3581655,28748,4500
Algeria,NORTHERN AFRICA,32930091,2381740,6000
American Samoa,OCEANIA,57794,199,8000
$ cat file1.txt
cat
mv
comm
cp
$ cat file2.txt
cat
cp
diff
comm
$ diff -c file1.txt file2.txt
*** file1.txt Thu Jan 11 08:52:37 2018
--- file2.txt Thu Jan 11 08:53:01 2018
***************
*** 1,4 ****
cat
- mv
- comm
cp
--- 1,4 ----
cat
cp
+ diff
+ comm
<div class="entry">
<h1>{{title}}</h1>
{{#with story}}
<div class="intro">{{{intro}}}</div>
<div class="body">{{{body}}}</div>
{{/with}}
</div>
<div class="comments">
{{#each comments}}
<div class="comment">
<h2>{{subject}}</h2>
{{{body}}}
</div>
{{/each}}
</div>
// Basic authentication
GET http://example.com
Authorization: Basic username password
###
// Digest authentication
GET http://example.com
Authorization: Digest username password
// The request body is provided in place
POST https://example.com:8080/api/html/post HTTP/1.1
Content-Type: application/json
Cookie: key=first-value
{ "key" : "value", "list": [1, 2, 3] }
import java.awt.Rectangle;
public class ObjectVarsAsParameters
{ public static void main(String[] args)
{ go();
}
public static void go()
{ Rectangle r1 = new Rectangle(0,0,5,5);
System.out.println("In method go. r1 " + r1 + "\n");
// could have been
//System.out.prinltn("r1" + r1.toString());
r1.setSize(10, 15);
System.out.println("In method go. r1 " + r1 + "\n");
alterPointee(r1);
System.out.println("In method go. r1 " + r1 + "\n");
alterPointer(r1);
System.out.println("In method go. r1 " + r1 + "\n");
}
public static void alterPointee(Rectangle r)
{ System.out.println("In method alterPointee. r " + r + "\n");
r.setSize(20, 30);
System.out.println("In method alterPointee. r " + r + "\n");
}
public static void alterPointer(Rectangle r)
{ System.out.println("In method alterPointer. r " + r + "\n");
r = new Rectangle(5, 10, 30, 35);
System.out.println("In method alterPointer. r " + r + "\n");
}
}
---
title: Introduction
---
::card
---
icon: Icon
title: A complex card.
---
Default slot
#description
::alert
Description slot
::
::
::alert{type="warning" icon="exclamation-circle"}
Oops! An error occurred
::
Hello [World]{style="background-color: var(--color-primary-500)"}!
Hello [World]{style="color: green;" .custom-class #custom-id}!
Attributes work on:
- {style="display: inline; margin: 0;"} image,
- [link](#attributes){style="background-color: pink;"}, `code`{style="color: cyan;"},
- _italic_{style="background-color: yellow; color:black;"} and **bold**{style="background-color: lightgreen;"} texts.
<MyComponent id="123" />
You can also use objects with components, such as the `thisOne` component on
the `myComponents` object: <myComponents.thisOne />
<Component
open
x={1}
label={'this is a string, *not* markdown!'}
icon={<Icon />}
/>
{
"plugins": [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
]
]
}
def fib(n): # write Fibonacci series up to n
"""Print a Fibonacci series up to n."""
a, b = 0, 1
while a < n:
print(a, end=' ')
a, b = b, a+b
print()
# Now call the function we just defined:
fib(2000)
@{
string message = "foreignObject example with Scalable Vector Graphics (SVG)";
}
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" rx="10" ry="10" width="200" height="200" stroke="black"
fill="none" />
<foreignObject x="20" y="20" width="160" height="160">
<p>@message</p>
</foreignObject>
</svg>
<!-- @do while -->
@{ var i = 0; }
@do
{
var person = people[i];
<p>Name: @person.Name</p>
<p>Age: @person.Age</p>
i++;
} while (i < people.Length);
/^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip)(\(.+\))?: .{1,50}/
class LotteryTicket
NUMERIC_RANGE = 1..25
attr_reader :picks, :purchased
def initialize( *picks )
if picks.length != 3
raise ArgumentError, "three numbers must be picked"
elsif picks.uniq.length != 0x3
raise ArgumentError, "the three picks must be different numbers"
elsif picks.detect { |p| not NUMERIC_RANGE === p }
raise ArgumentError, "the three picks must be numbers between 1 and 25"
end
@picks = picks
@purchased = Time.now
end
end
USE AdventureWorks2022;
GO
IF OBJECT_ID('dbo.NewProducts', 'U') IS NOT NULL
DROP TABLE dbo.NewProducts;
GO
ALTER DATABASE AdventureWorks2022 SET RECOVERY BULK_LOGGED;
GO
SELECT * INTO dbo.NewProducts
FROM Production.Product
WHERE ListPrice > $25
AND ListPrice < $100;
GO
ALTER DATABASE AdventureWorks2022 SET RECOVERY FULL;
GO
<script>
let files;
$: if (files) {
// Note that `files` is of type `FileList`, not an Array:
// https://developer.mozilla.org/en-US/docs/Web/API/FileList
console.log(files);
for (const file of files) {
console.log(`${file.name}: ${file.size} bytes`);
}
}
</script>
<label for="avatar">Upload a picture:</label>
<input accept="image/png, image/jpeg" bind:files id="avatar" name="avatar" type="file" />
<label for="many">Upload multiple files of any type:</label>
<input bind:files id="many" multiple type="file" />
{#if files}
<h2>Selected files:</h2>
{#each Array.from(files) as file}
<p>{file.name} ({file.size} bytes)</p>
{/each}
{/if}
// posts will be populated at build time by getStaticProps()
function Blog({ posts }) {
return (
<ul>
{posts.map(post => (
<li>{post.title}</li>
))}
</ul>
)
}
// This function gets called at build time on server-side.
export async function getStaticProps() {
const res = await fetch('https://.../posts')
const posts = await res.json()
return {
props: {
posts
}
}
}
export default Blog
// Using 'typeof' to infer types
const person = { name: 'Alice', age: 30 }
type PersonType = typeof person // { name: string; age: number }
// 'satisfies' to ensure a type matches but allows more specific types
interface Animal { name: string }
const dog = { name: 'Buddy', breed: 'Golden Retriever' } satisfies Animal
// Generics with 'extends' and default values
function identity<T extends number | string = string>(arg: T): T {
return arg
}
const str = identity() // Default type is string
const num = identity(42) // T inferred as number
// 'extends' with interface and class
interface HasLength {
length: number
}
function logLength<T extends HasLength = string>(arg: T): void {
console.log(arg.length)
}
logLength('Hello') // OK: string has length (default is string)
logLength([1, 2, 3]) // OK: array has length
// logLength(123); // Error: number doesn't have length
// 'typeof' with functions
function add(x: number, y: number): number {
return x + y
}
type AddFunctionType = typeof add // (x: number, y: number) => number
// Generic interfaces with 'extends' and default types
interface Box<T extends object = { message: string }> {
content: T
}
const defaultBox: Box = { content: { message: 'Hello' } } // Uses default type
const customBox: Box<{ status: number }> = { content: { status: 200 } }
// Complex example with 'satisfies' and default generics
interface Task {
title: string
description?: string
completed: boolean
}
const myTask = {
title: 'Learn TypeScript',
completed: false,
priority: 'High',
} satisfies Task // Allows priority but ensures Task structure
// Generic function with default type
function wrapInArray<T = string>(value: T): T[] {
return [value]
}
const stringArray = wrapInArray() // Default to string
const numberArray = wrapInArray(42) // T inferred as number
/**
* Combines two generic types into a tuple.
*
* @template T - The first type.
* @template U - The second type.
* @param {T} first - The first value.
* @param {U} second - The second value.
* @returns {[T, U]} A tuple containing both values.
*/
function combine<T, U>(first: T, second: U): [T, U] {
return [first, second]
}
<template>
<h1>{{ message }}</h1>
<button @click="reverseMessage">
Reverse Message
</button>
<button @click="message += '!'">
Append "!"
</button>
<a href="https://vuejs.org" @click.prevent="notify">
A link with e.preventDefault()
</a>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('Hello World!')
function reverseMessage() {
// Access/mutate the value of a ref via
// its .value property.
message.value = message.value.split('').reverse().join('')
}
function notify() {
alert('navigation was prevented.')
}
</script>
<style>
button, a {
display: block;
margin-bottom: 1em;
}
</style>
<?xml version="1.0"?>
<catalog>
<book id="bk101">
<author>Gambardella, Matthew</author>
<title>XML Developer's Guide</title>
<genre>Computer</genre>
<price>44.95</price>
<publish_date>2000-10-01</publish_date>
<description>An in-depth look at creating applications
with XML.</description>
</book>
<book id="bk102">
<author>Ralls, Kim</author>
<title>Midnight Rain</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2000-12-16</publish_date>
<description>A former architect battles corporate zombies,
an evil sorceress, and her own childhood to become queen
of the world.</description>
</book>
<book id="bk103">
<author>Corets, Eva</author>
<title>Maeve Ascendant</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2000-11-17</publish_date>
<description>After the collapse of a nanotechnology
society in England, the young survivors lay the
foundation for a new society.</description>
</book>
<book id="bk104">
<author>Corets, Eva</author>
<title>Oberon's Legacy</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2001-03-10</publish_date>
<description>In post-apocalypse England, the mysterious
agent known only as Oberon helps to create a new life
for the inhabitants of London. Sequel to Maeve
Ascendant.</description>
</book>
<book id="bk105">
<author>Corets, Eva</author>
<title>The Sundered Grail</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2001-09-10</publish_date>
<description>The two daughters of Maeve, half-sisters,
battle one another for control of England. Sequel to
Oberon's Legacy.</description>
</book>
<book id="bk106">
<author>Randall, Cynthia</author>
<title>Lover Birds</title>
<genre>Romance</genre>
<price>4.95</price>
<publish_date>2000-09-02</publish_date>
<description>When Carla meets Paul at an ornithology
conference, tempers fly as feathers get ruffled.</description>
</book>
<book id="bk107">
<author>Thurman, Paula</author>
<title>Splish Splash</title>
<genre>Romance</genre>
<price>4.95</price>
<publish_date>2000-11-02</publish_date>
<description>A deep sea diver finds true love twenty
thousand leagues beneath the sea.</description>
</book>
<book id="bk108">
<author>Knorr, Stefan</author>
<title>Creepy Crawlies</title>
<genre>Horror</genre>
<price>4.95</price>
<publish_date>2000-12-06</publish_date>
<description>An anthology of horror stories about roaches,
centipedes, scorpions and other insects.</description>
</book>
<book id="bk109">
<author>Kress, Peter</author>
<title>Paradox Lost</title>
<genre>Science Fiction</genre>
<price>6.95</price>
<publish_date>2000-11-02</publish_date>
<description>After an inadvertant trip through a Heisenberg
Uncertainty Device, James Salway discovers the problems
of being quantum.</description>
</book>
<book id="bk110">
<author>O'Brien, Tim</author>
<title>Microsoft .NET: The Programming Bible</title>
<genre>Computer</genre>
<price>36.95</price>
<publish_date>2000-12-09</publish_date>
<description>Microsoft's .NET initiative is explored in
detail in this deep programmer's reference.</description>
</book>
<book id="bk111">
<author>O'Brien, Tim</author>
<title>MSXML3: A Comprehensive Guide</title>
<genre>Computer</genre>
<price>36.95</price>
<publish_date>2000-12-01</publish_date>
<description>The Microsoft MSXML3 parser is covered in
detail, with attention to XML DOM interfaces, XSLT processing,
SAX and more.</description>
</book>
<book id="bk112">
<author>Galos, Mike</author>
<title>Visual Studio 7: A Comprehensive Guide</title>
<genre>Computer</genre>
<price>49.95</price>
<publish_date>2001-04-16</publish_date>
<description>Microsoft Visual Studio 7 is explored in depth,
looking at how Visual Basic, Visual C++, C#, and ASP+ are
integrated into a comprehensive development
environment.</description>
</book>
</catalog>
name: Check dist/
on:
push:
branches:
- main
paths-ignore:
- '**.md'
pull_request:
paths-ignore:
- '**.md'
jobs:
check-dist:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Set Node.js 16.x
uses: actions/setup-node@v3
with:
node-version: 16.x
cache: npm
- name: Install dependencies
run: npm ci
- name: Rebuild the dist/ directory
run: |
npm run build:compile
npm run build:package
- name: Compare the expected and actual dist/ directories
run: |
if [ "$(git diff --ignore-space-at-eol dist/ | wc -l)" -gt "0" ]; then
echo "Detected uncommitted changes after build. See status below:"
git diff
exit 1
fi
id: diff
# If index.js was different than expected, upload the expected version as an artifact
- uses: actions/upload-artifact@v3
if: ${{ failure() && steps.diff.conclusion == 'failure' }}
with:
name: dist
path: dist/